diff --git a/src/component/bookmark/index.css b/src/component/bookmark/index.css index 1505fd9e..8a884d53 100644 --- a/src/component/bookmark/index.css +++ b/src/component/bookmark/index.css @@ -269,8 +269,14 @@ box-shadow: var(--theme-shadow-top-medium); } -.bookmark-link { +.bookmark-link, +.bookmark-link:link, +.bookmark-link:visited, +.bookmark-link:focus, +.bookmark-link:hover, +.bookmark-link:active { background-color: transparent; + border: 0; position: relative; width: 100%; height: 100%; @@ -1119,4 +1125,4 @@ .is-theme-background-type-accent .bookmark-sort-placeholder { box-shadow: var(--edge-on-accent); -} +} \ No newline at end of file diff --git a/src/component/button/index.css b/src/component/button/index.css index 113ce72b..a9a01971 100644 --- a/src/component/button/index.css +++ b/src/component/button/index.css @@ -200,15 +200,21 @@ button .icon, width: 100%; } -.button-link { +.button-link, +.button-link:link, +.button-link:visited, +.button-link:focus, +.button-link:hover, +.button-link:active { background-color: transparent; border: 0; color: hsl(var(--button-link-text)); + text-decoration: none; + transition: background-color var(--layout-transition-extra-fast), color var(--layout-transition-extra-fast); } .button-link:hover, .button-link:focus { - background-color: transparent; color: hsl(var(--button-link-text-focus-hover)); } @@ -229,4 +235,4 @@ button .icon, .button-link:hover:disabled, .button-link:focus:disabled { background-color: transparent; -} +} \ No newline at end of file diff --git a/src/component/link/index.js b/src/component/link/index.js index bdf68762..e7c3c7ed 100644 --- a/src/component/link/index.js +++ b/src/component/link/index.js @@ -1,5 +1,7 @@ import { icon } from '../icon'; +import * as form from '../form'; + import { node } from '../../utility/node'; import { complexNode } from '../../utility/complexNode'; @@ -111,6 +113,14 @@ export const Link = function ({ return this.element.link; }; + this.wrap = () => { + return form.wrap({ + children: [ + this.element.link + ] + }); + }; + this.assemble(); this.bind(); diff --git a/src/component/tab/index.css b/src/component/tab/index.css index 158b8376..bd75fcf7 100644 --- a/src/component/tab/index.css +++ b/src/component/tab/index.css @@ -54,7 +54,7 @@ .tab-nav-button { background-color: transparent; - border: 3px solid transparent; + border: 0; flex-grow: 1; flex-basis: 25%; z-index: 2; @@ -66,10 +66,16 @@ } } +.tab-nav-button:active { + background-color: transparent; + color: hsl(var(--button-link-text)); + transition: background-color 0s, color var(--layout-transition-extra-fast); +} + .tab-nav-button.active { background-color: transparent; color: hsl(var(--theme-accent-text)); - transition: background-color var(--layout-duration-01), border-color var(--layout-duration-01), color var(--layout-transition-extra-fast); + transition: background-color var(--layout-transition-extra-fast), color var(--layout-transition-extra-fast); } .tab.disabled .tab-nav-button { @@ -77,8 +83,7 @@ } .tab.disabled .tab-nav-button.active { - background-color: hsl(var(--button-background-disabled)); - border-color: hsl(var(--theme-primary-020)); + background-color: hsl(var(--theme-primary-020)); color: hsl(var(--button-text-disabled)); } diff --git a/src/style/typography/index.css b/src/style/typography/index.css index e959d16b..ff94180b 100644 --- a/src/style/typography/index.css +++ b/src/style/typography/index.css @@ -85,30 +85,29 @@ i { font-style: italic; } -a { +a, +a:link, +a:visited, +a:focus, +a:hover, +a:active { + padding-bottom: 2px; + border: 0; color: hsl(var(--theme-primary-text-010)); - text-decoration: underline; - transition: color var(--layout-transition-extra-fast), text-decoration var(--layout-transition-extra-fast); + text-decoration: none; + outline: none; } a:link, a:visited { color: hsl(var(--theme-primary-text-010)); + border-bottom: 1px solid hsl(var(--theme-primary-text-010)); + transition: color var(--layout-transition-extra-fast), border var(--layout-transition-extra-fast), padding var(--layout-transition-extra-fast); } -a:focus { - text-decoration-color: hsl(var(--theme-primary-text-010)); - outline: none; -} - -a:hover { - color: rgb(var(--theme-accent)); - text-decoration-color: rgb(var(--theme-accent)); -} - +a:hover, a:active { - color: hsl(var(--theme-primary-text-010)); - text-decoration-color: hsl(var(--theme-primary-text-010)); + border-bottom-color: rgb(var(--theme-accent)); } ol, @@ -180,4 +179,4 @@ code { background-color: hsl(var(--theme-primary-040)); padding: 0.2em 0.5em; border-radius: calc(var(--theme-radius) * 0.01em); -} +} \ No newline at end of file