alex/yomichan
1
Fork 0
Code Releases Activity

Improve button styles (#1427)

Browse Source 
* Update variable names

* Update standard button styles

* Update styles

* Update button styles

* Update styles

* Add current styles

* Update button styles

* Update styles

* Update outline item styles

* Update styles

* Update styles

* Update notification button styles

* Update button styles
This commit is contained in:
toasted-nutbread 2021-02-21 00:18:43 -05:00 committed by GitHub
parent ad0f8bfe39
commit ae1f7ad9fe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 346 additions and 337 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
ext/css/display.css
View File

@ -477,65 +477,57 @@ a {
/* Sidebar buttons */ /* Sidebar buttons */
button.sidebar-button { button.sidebar-button {
--button-content-color: var(--sidebar-button-icon-color);
--button-border-color: transparent;
--button-background-color: var(--sidebar-button-background-color);
--button-shadow: none;
--button-hover-border-color: transparent;
--button-hover-background-color: var(--sidebar-button-background-color-hover);
--button-hover-shadow: none;
--button-active-border-color: transparent;
--button-active-background-color: var(--sidebar-button-background-color-active);
--button-active-shadow: none;
--button-disabled-content-color: var(--sidebar-button-disabled-icon-color);
--button-disabled-border-color: transparent;
--button-disabled-background-color: var(--sidebar-button-background-color);
--button-disabled-shadow: none;
width: 100%; width: 100%;
height: var(--sidebar-button-height); height: var(--sidebar-button-height);
background-color: var(--sidebar-button-background-color);
margin: 0; margin: 0;
padding: 0; padding: 0;
border: 0; border-style: none;
border-width: 0;
cursor: pointer; cursor: pointer;
display: block; display: block;
transition: background-color 0.125s ease-in-out; transition: background-color 0.125s ease-in-out;
outline: none; outline: none;
font-size: inherit; font-size: inherit;
border-radius: 0; border-radius: 0;
box-shadow: none;
} }
:root[data-popup-action-bar-location=top] button.sidebar-button, :root[data-popup-action-bar-location=top] button.sidebar-button,
:root[data-popup-action-bar-location=bottom] button.sidebar-button { :root[data-popup-action-bar-location=bottom] button.sidebar-button {
width: var(--sidebar-width); width: var(--sidebar-width);
height: 100%; height: 100%;
} }
button.sidebar-button:disabled {
cursor: default;
}
button.sidebar-button:hover,
button.sidebar-button:active,
button.sidebar-button:focus {
box-shadow: none;
}
button.sidebar-button:hover,
button.sidebar-button:focus {
background-color: var(--sidebar-button-background-color-hover);
}
button.sidebar-button:focus:not(:focus-visible):not(:hover) {
background-color: var(--sidebar-button-background-color);
}
button.sidebar-button:focus-visible {
background-color: var(--sidebar-button-background-color-hover);
}
button.sidebar-button:active {
background-color: var(--sidebar-button-background-color-active);
}
button.sidebar-button.danger { button.sidebar-button.danger {
background-color: var(--sidebar-button-danger-background-color); --button-content-color: var(--sidebar-button-icon-color);
} --button-border-color: transparent;
button.sidebar-button.danger:hover, --button-background-color: var(--sidebar-button-danger-background-color);
button.sidebar-button.danger:focus { --button-shadow: none;
background-color: var(--sidebar-button-danger-background-color-hover);
} --button-hover-content-color: var(--sidebar-button-danger-icon-color);
button.sidebar-button.danger:focus:not(:focus-visible):not(:hover) { --button-hover-border-color: transparent;
background-color: var(--sidebar-button-danger-background-color); --button-hover-background-color: var(--sidebar-button-danger-background-color-hover);
} --button-hover-shadow: none;
button.sidebar-button.danger:focus-visible {
background-color: var(--sidebar-button-danger-background-color-hover); --button-active-content-color: var(--sidebar-button-danger-icon-color);
} --button-active-border-color: transparent;
button.sidebar-button.danger:active { --button-active-background-color: var(--sidebar-button-danger-background-color-active);
background-color: var(--sidebar-button-danger-background-color-active); --button-active-shadow: none;
}
button.sidebar-button:disabled,
button.sidebar-button.danger:disabled {
background-color: var(--sidebar-button-background-color);
} }
.sidebar-button-icon { .sidebar-button-icon {
--icon-size: var(--sidebar-button-icon-size) var(--sidebar-button-icon-size); --icon-size: var(--sidebar-button-icon-size) var(--sidebar-button-icon-size);
@ -543,25 +535,13 @@ button.sidebar-button.danger:disabled {
display: block; display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: var(--sidebar-button-icon-color); background-color: var(--button-current-content-color);
transition: background-color 0.125s ease-in-out; transition: background-color 0.125s ease-in-out;
} }
button.sidebar-button:disabled .sidebar-button-icon, button.sidebar-button.sidebar-button-highlight {
button.sidebar-button.danger:disabled .sidebar-button-icon { --button-content-color: var(--accent-color);
background-color: var(--sidebar-button-disabled-icon-color); --button-hover-content-color: var(--accent-color);
} --button-active-content-color: var(--accent-color);
button.sidebar-button.danger:hover .sidebar-button-icon,
button.sidebar-button.danger:focus .sidebar-button-icon {
background-color: var(--sidebar-button-danger-icon-color);
}
button.sidebar-button.danger:focus:not(:focus-visible):not(:hover) .sidebar-button-icon {
background-color: var(--sidebar-button-icon-color);
}
button.sidebar-button.danger:focus-visible .sidebar-button-icon {
background-color: var(--sidebar-button-danger-icon-color);
}
button.sidebar-button.sidebar-button-highlight>.sidebar-button-icon {
background-color: var(--accent-color);
} }
@ -1593,31 +1573,37 @@ button.action-button[data-icon=source-term]::before {
top: 0; top: 0;
right: 0; right: 0;
} }
button.footer-notification-close-button, button.footer-notification-close-button {
button.footer-notification-close-button:focus, --button-content-color: var(--notification-text-color);
button.footer-notification-close-button:hover, --button-border-color: transparent;
button.footer-notification-close-button:active { --button-background-color: transparent;
--button-shadow: none;
--button-hover-border-color: transparent;
--button-hover-background-color: transparent;
--button-hover-shadow: none;
--button-active-border-color: transparent;
--button-active-background-color: transparent;
--button-active-shadow: none;
--button-focus-visible-border-color: transparent;
--button-focus-visible-background-color: var(--notification-background-color-light);
--button-focus-visible-shadow: none;
flex: 0 0 auto; flex: 0 0 auto;
background-color: transparent;
margin: -0.25em; margin: -0.25em;
padding: 0.5em; padding: 0.5em;
border: none; border-style: none;
outline: none; border-width: 0;
cursor: pointer; cursor: pointer;
font-size: inherit; font-size: inherit;
box-shadow: none;
}
button.footer-notification-close-button:focus-visible {
background-color: var(--notification-background-color-light);
}
button.footer-notification-close-button:focus-visible:active {
background-color: var(--notification-background-color-lighter);
} }
.footer-notification-close-button-icon { .footer-notification-close-button-icon {
display: block; display: block;
width: calc(16em / var(--font-size-no-units)); width: calc(16em / var(--font-size-no-units));
height: calc(16em / var(--font-size-no-units)); height: calc(16em / var(--font-size-no-units));
background-color: var(--notification-text-color); background-color: var(--button-content-color);
} }

424
ext/css/material.css
View File

@ -44,7 +44,7 @@
--material-arrow-dimension1: calc(5em / var(--font-size-no-units)); --material-arrow-dimension1: calc(5em / var(--font-size-no-units));
--material-arrow-dimension2: calc(10em / var(--font-size-no-units)); --material-arrow-dimension2: calc(10em / var(--font-size-no-units));
--button-shadow-params: 0 0.0625em 0.125em 0; --button-default-shadow-params: 0 0.0625em 0.125em 0;
--thin-border-size: calc(1em / var(--font-size-no-units)); --thin-border-size: calc(1em / var(--font-size-no-units));
@ -102,10 +102,10 @@
--input-background-color-darker: #cccccc; --input-background-color-darker: #cccccc;
--input-outline-color: var(--text-color); --input-outline-color: var(--text-color);
--button-text-color: #ffffff; --button-default-text-color: #ffffff;
--button-border-color: #cccccc; --button-default-border-color: #cccccc;
--button-icon-color: #333333; --button-default-icon-color: #333333;
--button-icon-color-light: #666666; --button-default-icon-color-light: #666666;
--checkbox-checked-color: var(--accent-color); --checkbox-checked-color: var(--accent-color);
--checkbox-unchecked-color: #666666; --checkbox-unchecked-color: #666666;
@ -160,10 +160,10 @@
--input-background-color-darker: #484848; --input-background-color-darker: #484848;
--input-outline-color: var(--text-color); --input-outline-color: var(--text-color);
--button-text-color: #000000; --button-default-text-color: #000000;
--button-border-color: #333333; --button-default-border-color: #333333;
--button-icon-color: #cccccc; --button-default-icon-color: #cccccc;
--button-icon-color-light: #999999; --button-default-icon-color-light: #999999;
--checkbox-unchecked-color: #999999; --checkbox-unchecked-color: #999999;
@ -761,207 +761,250 @@ input[type=number].code {
/* Material design button */ /* Material design button */
button { button,
border: var(--thin-border-size) solid transparent; .button {
--button-content-color: var(--button-default-text-color);
--button-border-color: var(--accent-color);
--button-background-color: var(--accent-color);
--button-shadow: none;
--button-hover-content-color: var(--button-content-color);
--button-hover-border-color: var(--button-hover-background-color);
--button-hover-background-color: var(--accent-color-light);
--button-hover-shadow: var(--button-default-shadow-params) var(--shadow-color-light);
--button-focus-content-color: var(--button-hover-content-color);
--button-focus-border-color: var(--button-hover-border-color);
--button-focus-background-color: var(--button-hover-background-color);
--button-focus-shadow: var(--button-hover-shadow);
--button-focus-visible-content-color: var(--button-focus-content-color);
--button-focus-visible-border-color: var(--button-focus-border-color);
--button-focus-visible-background-color: var(--button-focus-background-color);
--button-focus-visible-shadow: var(--button-focus-shadow);
--button-active-content-color: var(--button-content-color);
--button-active-border-color: var(--button-active-background-color);
--button-active-background-color: var(--accent-color-lighter);
--button-active-shadow: var(--button-default-shadow-params) var(--shadow-color);
--button-disabled-content-color: var(--button-default-text-color);
--button-disabled-border-color: var(--disabled-color);
--button-disabled-background-color: var(--disabled-color);
--button-disabled-shadow: none;
--button-current-content-color: var(--button-content-color);
--button-current-border-color: var(--button-border-color);
--button-current-background-color: var(--button-background-color);
--button-current-shadow: var(--button-shadow);
border-width: var(--thin-border-size);
border-style: solid;
border-radius: 0.3em; border-radius: 0.3em;
padding: 0.5em 1em; padding: 0.5em 1em;
font-weight: bold; font-weight: bold;
font-size: inherit; font-size: inherit;
font-family: inherit; font-family: inherit;
cursor: pointer; cursor: pointer;
background-color: transparent;
box-shadow: var(--button-shadow-params) var(--shadow-color-off);
transition: transition:
background-color var(--animation-duration) ease-in, background-color var(--animation-duration) ease-in-out,
box-shadow var(--animation-duration) ease-in, box-shadow var(--animation-duration) ease-in-out,
border-color var(--animation-duration) ease-in; border-color var(--animation-duration) ease-in-out;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
}
button:focus {
outline: none;
}
button:hover {
transition:
background-color var(--animation-duration) ease-out,
box-shadow var(--animation-duration) ease-out,
border-color var(--animation-duration) ease-out;
}
button:hover {
box-shadow: var(--button-shadow-params) var(--shadow-color-light);
}
button:active {
box-shadow: var(--button-shadow-params) var(--shadow-color);
}
/* Standard button */ color: var(--button-current-content-color);
button { border-color: var(--button-current-border-color);
color: var(--button-text-color); background-color: var(--button-current-background-color);
border-color: var(--accent-color); box-shadow: var(--button-current-shadow);
background-color: var(--accent-color);
} }
button:hover, button:hover,
button:focus { .button:hover {
background-color: var(--accent-color-light); --button-current-content-color: var(--button-hover-content-color);
border-color: var(--accent-color-light); --button-current-border-color: var(--button-hover-border-color);
--button-current-background-color: var(--button-hover-background-color);
--button-current-shadow: var(--button-hover-shadow);
} }
button:focus:not(:focus-visible):not(:hover):not(:active) { button:focus,
background-color: var(--accent-color); .button:focus {
border-color: var(--accent-color); --button-current-content-color: var(--button-focus-content-color);
} --button-current-border-color: var(--button-focus-border-color);
button:focus-visible { --button-current-background-color: var(--button-focus-background-color);
background-color: var(--accent-color-light); --button-current-shadow: var(--button-focus-shadow);
border-color: var(--accent-color-light);
outline: none;
} }
button:active, button:active,
button:active:focus { .button:active {
border-color: var(--accent-color-lighter); --button-current-content-color: var(--button-active-content-color);
background-color: var(--accent-color-lighter); --button-current-border-color: var(--button-active-border-color);
--button-current-background-color: var(--button-active-background-color);
--button-current-shadow: var(--button-active-shadow);
}
button:focus:not(:focus-visible),
.button:focus:not(:focus-visible) {
--button-current-content-color: var(--button-content-color);
--button-current-border-color: var(--button-border-color);
--button-current-background-color: var(--button-background-color);
--button-current-shadow: var(--button-shadow);
}
button:focus-visible,
.button:focus-visible {
--button-current-content-color: var(--button-focus-visible-content-color);
--button-current-border-color: var(--button-focus-visible-border-color);
--button-current-background-color: var(--button-focus-visible-background-color);
--button-current-shadow: var(--button-focus-visible-shadow);
}
button:hover:focus-visible,
button:hover:not(:focus-visible),
.button:hover:focus-visible,
.button:hover:not(:focus-visible) {
--button-current-content-color: var(--button-hover-content-color);
--button-current-border-color: var(--button-hover-border-color);
--button-current-background-color: var(--button-hover-background-color);
--button-current-shadow: var(--button-hover-shadow);
}
button:focus:focus-visible,
.button:focus:focus-visible {
--button-current-content-color: var(--button-focus-visible-content-color);
--button-current-border-color: var(--button-focus-visible-border-color);
--button-current-background-color: var(--button-focus-visible-background-color);
--button-current-shadow: var(--button-focus-visible-shadow);
}
button:active:focus-visible,
button:active:not(:focus-visible),
.button:active:focus-visible,
.button:active:not(:focus-visible) {
--button-current-content-color: var(--button-active-content-color);
--button-current-border-color: var(--button-active-border-color);
--button-current-background-color: var(--button-active-background-color);
--button-current-shadow: var(--button-active-shadow);
}
button:disabled,
.button:disabled {
cursor: default;
}
button:disabled,
button:disabled:focus,
button:disabled:hover,
button:disabled:active,
.button:disabled,
.button:disabled:focus,
.button:disabled:hover,
.button:disabled:active {
--button-current-content-color: var(--button-disabled-content-color);
--button-current-border-color: var(--button-disabled-border-color);
--button-current-background-color: var(--button-disabled-background-color);
--button-current-shadow: var(--button-disabled-shadow);
}
button:disabled:focus-visible,
.button:disabled:focus-visible {
--button-current-content-color: var(--button-disabled-content-color);
--button-current-border-color: var(--button-disabled-border-color);
--button-current-background-color: var(--button-disabled-background-color);
--button-current-shadow: var(--button-disabled-shadow);
} }
/* Standard danger button */ /* Standard danger button */
button.danger { button.danger {
color: var(--button-text-color); --button-border-color: var(--danger-color);
border-color: var(--danger-color); --button-background-color: var(--danger-color);
background-color: var(--danger-color); --button-hover-background-color: var(--danger-color-light);
} --button-active-background-color: var(--danger-color-lighter);
button.danger:hover,
button.danger:focus {
background-color: var(--danger-color-light);
border-color: var(--danger-color-light);
}
button.danger:focus:not(:focus-visible):not(:hover):not(:active) {
background-color: var(--danger-color);
border-color: var(--danger-color);
}
button.danger:focus-visible {
background-color: var(--danger-color-light);
border-color: var(--danger-color-light);
}
button.danger:active,
button.danger:active:focus {
border-color: var(--danger-color-lighter);
background-color: var(--danger-color-lighter);
} }
/* Low emphasis button */ /* Low emphasis button */
button.low-emphasis { button.low-emphasis {
color: var(--accent-color); --button-content-color: var(--accent-color);
border-color: var(--button-border-color); --button-border-color: var(--button-default-border-color);
background-color: var(--accent-color-transparent0); --button-background-color: var(--accent-color-transparent0);
} --button-hover-border-color: var(--accent-color);
button.low-emphasis:hover, --button-hover-background-color: var(--accent-color-transparent5);
button.low-emphasis:focus { --button-active-border-color: var(--accent-color);
border-color: var(--accent-color); --button-active-background-color: var(--accent-color-transparent25);
background-color: var(--accent-color-transparent5); --button-disabled-content-color: var(--disabled-color);
} --button-disabled-border-color: var(--disabled-color);
button.low-emphasis:focus:not(:focus-visible):not(:hover):not(:active) { --button-disabled-background-color: var(--accent-color-transparent0);
border-color: var(--button-border-color);
background-color: var(--accent-color-transparent0);
}
button.low-emphasis:focus-visible {
border-color: var(--accent-color);
background-color: var(--accent-color-transparent5);
}
button.low-emphasis:active,
button.low-emphasis:active:focus {
border-color: var(--accent-color);
background-color: var(--accent-color-transparent25);
} }
/* Low emphasis danger button */ /* Low emphasis danger button */
button.low-emphasis.danger { button.low-emphasis.danger {
color: var(--danger-color); --button-content-color: var(--danger-color);
border-color: var(--button-border-color); --button-border-color: var(--button-default-border-color);
background-color: var(--danger-color-transparent0); --button-background-color: var(--danger-color-transparent0);
} --button-hover-border-color: var(--danger-color);
button.low-emphasis.danger:hover, --button-hover-background-color: var(--danger-color-transparent5);
button.low-emphasis.danger:focus { --button-active-border-color: var(--danger-color);
border-color: var(--danger-color); --button-active-background-color: var(--danger-color-transparent25);
background-color: var(--danger-color-transparent5); --button-disabled-content-color: var(--disabled-color);
} --button-disabled-border-color: var(--disabled-color);
button.low-emphasis.danger:focus:not(:focus-visible):not(:hover):not(:active) { --button-disabled-background-color: var(--danger-color-transparent0);
border-color: var(--button-border-color);
background-color: var(--danger-color-transparent0);
}
button.low-emphasis.danger:focus-visible {
border-color: var(--danger-color);
background-color: var(--danger-color-transparent5);
}
button.low-emphasis.danger:active,
button.low-emphasis.danger:active:focus {
border-color: var(--danger-color);
background-color: var(--danger-color-transparent25);
}
/* Disabled buttons */
button:disabled,
button:disabled:focus,
button:disabled:hover,
button:disabled:active {
color: var(--button-text-color);
border-color: var(--disabled-color);
background-color: var(--disabled-color);
cursor: default;
}
button.low-emphasis:disabled,
button.low-emphasis:disabled:focus,
button.low-emphasis:disabled:hover,
button.low-emphasis:disabled:active {
color: var(--disabled-color);
border-color: var(--disabled-color);
background-color: transparent;
} }
/* Input suffix button */ /* Input suffix button */
button.input-suffix-button { button.input-suffix-button {
--button-content-color: var(--button-default-icon-color);
--button-border-color: var(--input-background-color);
--button-background-color: var(--input-background-color);
--button-hover-background-color: var(--input-background-color-dark);
--button-active-background-color: var(--input-background-color-darker);
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border: none; border-style: none;
border-width: 0;
height: var(--input-height); height: var(--input-height);
line-height: var(--input-height); line-height: var(--input-height);
background-color: var(--input-background-color);
box-sizing: border-box; box-sizing: border-box;
padding: 0 0.5em; padding: 0 0.5em;
border-color: transparent; position: relative;
transition: }
background-color var(--animation-duration) ease-in, button.input-suffix-button.light-icon {
box-shadow var(--animation-duration) ease-in; --button-content-color: var(--button-default-icon-color-light);
} }
button.input-suffix-button.input-suffix-icon-button { button.input-suffix-button.input-suffix-icon-button {
width: 2.125em; width: 2.125em;
position: relative;
}
button.input-suffix-button.input-suffix-icon-button:hover,
button.input-suffix-button.input-suffix-icon-button:focus {
background-color: var(--input-background-color-dark);
}
button.input-suffix-button.input-suffix-icon-button:focus:not(:focus-visible):not(:hover):not(:active) {
background-color: var(--input-background-color);
}
button.input-suffix-button.input-suffix-icon-button:focus-visible {
background-color: var(--input-background-color-dark);
}
button.input-suffix-button.input-suffix-icon-button:active,
button.input-suffix-button.input-suffix-icon-button:active:focus {
background-color: var(--input-background-color-darker);
} }
button.input-suffix-button.input-suffix-icon-button>.icon { button.input-suffix-button.input-suffix-icon-button>.icon {
display: block; display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: var(--button-icon-color); background-color: var(--button-current-content-color);
} }
input[type=text]:invalid+button.input-suffix-button, input[type=text]:invalid+button.input-suffix-button,
input[type=number]:invalid+button.input-suffix-button, input[type=number]:invalid+button.input-suffix-button,
input[type=text][data-invalid=true]+button.input-suffix-button, input[type=text][data-invalid=true]+button.input-suffix-button,
input[type=number][data-invalid=true]+button.input-suffix-button { input[type=number][data-invalid=true]+button.input-suffix-button {
border: var(--thin-border-size) solid var(--danger-color); --button-border-color: var(--danger-color);
--button-hover-border-color: var(--danger-color);
--button-active-border-color: var(--danger-color);
--button-disabled-border-color: var(--danger-color);
border-width: var(--thin-border-size);
border-style: solid;
border-left-style: none; border-left-style: none;
} }
/* Material design icon button */ /* Material design icon button */
button.icon-button { button.icon-button {
--button-content-color: var(--button-default-icon-color);
--button-border-color: transparent;
--button-background-color: transparent;
--button-shadow: none;
--button-hover-border-color: transparent;
--button-hover-background-color: transparent;
--button-hover-shadow: none;
--button-active-border-color: transparent;
--button-active-background-color: transparent;
--button-active-shadow: none;
--button-disabled-content-color: var(--button-default-icon-color);
--button-disabled-border-color: transparent;
--button-disabled-background-color: transparent;
--button-disabled-shadow: none;
vertical-align: middle; vertical-align: middle;
border: none; border: none;
margin: 0; margin: 0;
@ -969,7 +1012,10 @@ button.icon-button {
box-sizing: content-box; box-sizing: content-box;
font-size: inherit; font-size: inherit;
cursor: pointer; cursor: pointer;
background-color: transparent; }
button.icon-button.light-icon {
--button-content-color: var(--button-default-icon-color-light);
--button-disabled-content-color: var(--button-default-icon-color-light);
} }
button.icon-button:not([hidden]) { button.icon-button:not([hidden]) {
display: inline-block; display: inline-block;
@ -980,22 +1026,6 @@ button.icon-button>.icon-button-inner {
height: var(--icon-button-size); height: var(--icon-button-size);
position: relative; position: relative;
} }
button.icon-button:focus {
outline: none;
}
button.icon-button,
button.icon-button:hover,
button.icon-button:focus,
button.icon-button:active {
background-color: transparent;
box-shadow: none;
}
button.icon-button:focus:not(:focus-visible),
button.icon-button:focus:hover:not(:focus-visible),
button.icon-button:focus:active:not(:focus-visible) {
background-color: transparent;
box-shadow: none;
}
.icon-button>.icon-button-inner::after { .icon-button>.icon-button-inner::after {
position: absolute; position: absolute;
display: block; display: block;
@ -1041,12 +1071,9 @@ button.icon-button:focus:active:not(:focus-visible) {
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: var(--button-icon-color); background-color: var(--button-current-content-color);
--icon-size: calc(16em / var(--font-size-no-units)) calc(16em / var(--font-size-no-units)); --icon-size: calc(16em / var(--font-size-no-units)) calc(16em / var(--font-size-no-units));
} }
.icon-button>.icon-button-inner>.icon.icon-button-icon-light {
background-color: var(--button-icon-color-light);
}
.icon-button>.icon-button-inner>.icon[data-icon=material-right-arrow] { --icon-size: var(--material-arrow-dimension1) var(--material-arrow-dimension2); } .icon-button>.icon-button-inner>.icon[data-icon=material-right-arrow] { --icon-size: var(--material-arrow-dimension1) var(--material-arrow-dimension2); }
.icon-button>.icon-button-inner>.icon[data-icon=material-down-arrow] { --icon-size: var(--material-arrow-dimension2) var(--material-arrow-dimension1); } .icon-button>.icon-button-inner>.icon[data-icon=material-down-arrow] { --icon-size: var(--material-arrow-dimension2) var(--material-arrow-dimension1); }
@ -1095,12 +1122,29 @@ button.icon-button:focus:active:not(:focus-visible) {
white-space: nowrap; white-space: nowrap;
} }
button.popup-menu-item { button.popup-menu-item {
--button-content-color: var(--text-color);
--button-border-color: transparent;
--button-background-color: transparent;
--button-shadow: none;
--button-hover-border-color: transparent;
--button-hover-background-color: var(--menu-item-hover-color);
--button-hover-shadow: none;
--button-active-border-color: transparent;
--button-active-background-color: var(--menu-item-active-color);
--button-active-shadow: none;
--button-disabled-content-color: var(--text-color-light2);
--button-disabled-border-color: transparent;
--button-disabled-background-color: transparent;
--button-disabled-shadow: none;
padding: 0.625em 1.5em; padding: 0.625em 1.5em;
flex: 1 1 auto; flex: 1 1 auto;
border-radius: 0; border-radius: 0;
background-color: transparent; border-style: none;
color: var(--text-color); border-width: 0;
border: none;
text-align: left; text-align: left;
font-size: 1em; font-size: 1em;
font-weight: normal; font-weight: normal;
@ -1110,30 +1154,10 @@ button.popup-menu-item {
button.popup-menu-item:not([hidden]) { button.popup-menu-item:not([hidden]) {
display: flex; display: flex;
} }
button.popup-menu-item:hover,
button.popup-menu-item:focus {
background-color: var(--menu-item-hover-color);
box-shadow: none;
}
button.popup-menu-item:focus:not(:focus-visible):not(:hover):not(:disabled) {
background-color: transparent;
}
button.popup-menu-item:focus-visible:not(:disabled) {
background-color: var(--menu-item-hover-color);
}
button.popup-menu-item:active:not(:disabled) {
background-color: var(--menu-item-active-color);
box-shadow: none;
}
button.popup-menu-item:disabled {
color: var(--text-color-light2);
background-color: transparent;
box-shadow: none;
}
.popup-menu-item-icon { .popup-menu-item-icon {
width: calc(16em / 14); width: calc(16em / 14);
height: calc(16em / 14); height: calc(16em / 14);
background-color: var(--text-color); background-color: var(--button-current-content-color);
flex: 0 0 auto; flex: 0 0 auto;
} }
.popup-menu-item-icon:not([hidden]) { .popup-menu-item-icon:not([hidden]) {

2
ext/css/search.css
View File

@ -121,7 +121,7 @@ h1 {
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: var(--button-icon-color); background-color: var(--button-default-icon-color);
--icon-size: 16px 16px; --icon-size: 16px 16px;
} }

77
ext/css/settings.css
View File

@ -213,7 +213,7 @@ h3 {
} }
.heading-container-icon>.icon { .heading-container-icon>.icon {
display: block; display: block;
background-color: var(--button-icon-color); background-color: var(--button-default-icon-color);
width: var(--outline-item-icon-size); width: var(--outline-item-icon-size);
height: var(--outline-item-icon-size); height: var(--outline-item-icon-size);
} }
@ -392,6 +392,22 @@ a.heading-link-light {
padding-bottom: 2em; padding-bottom: 2em;
} }
.outline-item { .outline-item {
--button-content-color: var(--text-color);
--button-border-color: transparent;
--button-background-color: var(--outline-item-background-color);
--button-shadow: none;
--button-hover-border-color: transparent;
--button-hover-background-color: var(--outline-item-background-color-hover);
--button-hover-shadow: none;
--button-active-border-color: transparent;
--button-active-background-color: var(--outline-item-background-color-hover);
--button-active-shadow: none;
font-weight: normal;
border-style: none;
border-width: 0;
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%; width: 100%;
@ -399,24 +415,11 @@ a.heading-link-light {
line-height: var(--outline-item-height); line-height: var(--outline-item-height);
padding: 0 1.5em; padding: 0 1.5em;
cursor: pointer; cursor: pointer;
background-color: var(--outline-item-background-color);
transition: background-color var(--animation-duration) ease-in-out; transition: background-color var(--animation-duration) ease-in-out;
} }
.outline-item, .outline-item,
.outline-item:hover { .outline-item:hover {
text-decoration: none; text-decoration: none;
color: var(--text-color);
}
.outline-item:hover,
.outline-item:focus {
outline: none;
background-color: var(--outline-item-background-color-hover);
}
.outline-item:focus:not(:focus-visible) {
background-color: var(--outline-item-background-color);
}
.outline-item:focus-visible {
background-color: var(--outline-item-background-color-hover);
} }
.outline-item-left { .outline-item-left {
display: inline-block; display: inline-block;
@ -440,7 +443,7 @@ a.heading-link-light {
} }
.outline-item-icon { .outline-item-icon {
display: block; display: block;
background-color: var(--button-icon-color); background-color: var(--button-default-icon-color);
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
@ -890,13 +893,13 @@ select.short-height {
right: 0; right: 0;
bottom: 0; bottom: 0;
} }
button.icon-button.modal-header-button>.icon-button-inner>.icon { button.icon-button.modal-header-button {
background-color: var(--button-icon-color-light); --button-content-color: var(--button-default-icon-color-light);
transition: background-color var(--animation-duration) ease-in-out; --button-hover-content-color: var(--button-default-icon-color);
--button-active-content-color: var(--button-default-icon-color);
} }
button.icon-button.modal-header-button:hover>.icon-button-inner>.icon, button.icon-button.modal-header-button>.icon-button-inner>.icon {
button.icon-button.modal-header-button:active>.icon-button-inner>.icon { transition: background-color var(--animation-duration) ease-in-out;
background-color: var(--button-icon-color);
} }
.modal-header-button[data-modal-action=expand], .modal-header-button[data-modal-action=expand],
.modal-header-button[data-modal-action=collapse] { .modal-header-button[data-modal-action=collapse] {
@ -1064,6 +1067,19 @@ button.icon-button.modal-header-button:active>.icon-button-inner>.icon {
padding-bottom: var(--fab-button-padding); padding-bottom: var(--fab-button-padding);
} }
button.fab-button { button.fab-button {
--button-content-color: var(--button-default-text-color);
--button-border-color: transparent;
--button-background-color: transparent;
--button-shadow: none;
--button-hover-border-color: transparent;
--button-hover-background-color: transparent;
--button-hover-shadow: none;
--button-active-border-color: transparent;
--button-active-background-color: transparent;
--button-active-shadow: none;
display: block; display: block;
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -1073,13 +1089,6 @@ button.fab-button>.icon-button-inner {
width: var(--fab-button-size); width: var(--fab-button-size);
height: var(--fab-button-size); height: var(--fab-button-size);
} }
button.fab-button,
button.fab-button:hover,
button.fab-button:focus,
button.fab-button:active {
background-color: transparent;
box-shadow: none;
}
.fab-button-background { .fab-button-background {
position: absolute; position: absolute;
display: block; display: block;
@ -1093,7 +1102,7 @@ button.fab-button:active {
box-shadow: var(--shadow-vertical); box-shadow: var(--shadow-vertical);
} }
button.fab-button>.icon-button-inner>.icon { button.fab-button>.icon-button-inner>.icon {
background-color: #ffffff; background-color: var(--button-content-color);
} }
.fab-container-item.fab-container-item-popup-preview { .fab-container-item.fab-container-item-popup-preview {
display: none; display: none;
@ -1451,16 +1460,6 @@ input.anki-card-field-value {
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
button.anki-card-field-value-menu-button {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border: none;
height: var(--input-height);
line-height: var(--input-height);
background-color: var(--input-background-color);
box-sizing: border-box;
padding: 0 0.5em;
}
#anki-error-message-details { #anki-error-message-details {
margin-top: 0.25em; margin-top: 0.25em;
font-family: 'Courier New', Courier, monospace; font-family: 'Courier New', Courier, monospace;

46
ext/settings.html
View File

@ -21,26 +21,26 @@
<div class="content-left"> <div class="content-left">
<div class="sidebar"><div class="sidebar-inner"> <div class="sidebar"><div class="sidebar-inner">
<div class="sidebar-body"> <div class="sidebar-body">
<a href="#!profile" class="outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="profile"></span></span><span class="outline-item-label">Profile</span></a> <a href="#!profile" class="button outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="profile"></span></span><span class="outline-item-label">Profile</span></a>
<a href="#!dictionaries" class="outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="book"></span><span class="outline-item-left-warning-badge no-dictionaries-enabled-warning" hidden><div class="warning-badge"><span class="icon" data-icon="exclamation-point-short"></span></div></span></span><span class="outline-item-label">Dictionaries</span></a> <a href="#!dictionaries" class="button outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="book"></span><span class="outline-item-left-warning-badge no-dictionaries-enabled-warning" hidden><div class="warning-badge"><span class="icon" data-icon="exclamation-point-short"></span></div></span></span><span class="outline-item-label">Dictionaries</span></a>
<a href="#!general" class="outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="cog"></span></span><span class="outline-item-label">General</span></a> <a href="#!general" class="button outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="cog"></span></span><span class="outline-item-label">General</span></a>
<a href="#!scanning" class="outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="scanning"></span></span><span class="outline-item-label">Scanning</span></a> <a href="#!scanning" class="button outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="scanning"></span></span><span class="outline-item-label">Scanning</span></a>
<a href="#!popup" class="outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="popup"></span></span><span class="outline-item-label">Popup</span></a> <a href="#!popup" class="button outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="popup"></span></span><span class="outline-item-label">Popup</span></a>
<a href="#!popup-appearance" class="outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="palette"></span></span><span class="outline-item-label">Appearance</span></a> <a href="#!popup-appearance" class="button outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="palette"></span></span><span class="outline-item-label">Appearance</span></a>
<a href="#!popup-size" class="outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="popup-size"></span></span><span class="outline-item-label">Position &amp; Size</span></a> <a href="#!popup-size" class="button outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="popup-size"></span></span><span class="outline-item-label">Position &amp; Size</span></a>
<a href="#!window" class="outline-item advanced-only"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="window"></span></span><span class="outline-item-label">Window</span></a> <a href="#!window" class="button outline-item advanced-only"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="window"></span></span><span class="outline-item-label">Window</span></a>
<a href="#!audio" class="outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="speaker"></span></span><span class="outline-item-label">Audio</span></a> <a href="#!audio" class="button outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="speaker"></span></span><span class="outline-item-label">Audio</span></a>
<a href="#!text-parsing" class="outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="text-parsing"></span></span><span class="outline-item-label">Text Parsing</span></a> <a href="#!text-parsing" class="button outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="text-parsing"></span></span><span class="outline-item-label">Text Parsing</span></a>
<a href="#!sentence-parsing" class="outline-item advanced-only"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="sentence-parsing"></span></span><span class="outline-item-label">Sentence Parsing</span></a> <a href="#!sentence-parsing" class="button outline-item advanced-only"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="sentence-parsing"></span></span><span class="outline-item-label">Sentence Parsing</span></a>
<a href="#!translation" class="outline-item advanced-only"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="translation"></span></span><span class="outline-item-label">Translation</span></a> <a href="#!translation" class="button outline-item advanced-only"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="translation"></span></span><span class="outline-item-label">Translation</span></a>
<a href="#!anki" class="outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="note-card"></span></span><span class="outline-item-label">Anki</span></a> <a href="#!anki" class="button outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="note-card"></span></span><span class="outline-item-label">Anki</span></a>
<a href="#!clipboard" class="outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="clipboard"></span></span><span class="outline-item-label">Clipboard</span></a> <a href="#!clipboard" class="button outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="clipboard"></span></span><span class="outline-item-label">Clipboard</span></a>
<a href="#!shortcuts" class="outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="keyboard"></span></span><span class="outline-item-label">Shortcuts</span></a> <a href="#!shortcuts" class="button outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="keyboard"></span></span><span class="outline-item-label">Shortcuts</span></a>
<a href="#!backup" class="outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="backup"></span></span><span class="outline-item-label">Backup</span></a> <a href="#!backup" class="button outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="backup"></span></span><span class="outline-item-label">Backup</span></a>
<a href="#!security" class="outline-item advanced-only"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="lock"></span></span><span class="outline-item-label">Security</span></a> <a href="#!security" class="button outline-item advanced-only"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="lock"></span></span><span class="outline-item-label">Security</span></a>
</div> </div>
<div class="sidebar-bottom"> <div class="sidebar-bottom">
<label class="outline-item"><span class="outline-item-left"> <label class="button outline-item"><span class="outline-item-left">
<label class="toggle"><input id="advanced-checkbox" type="checkbox" data-setting="general.showAdvanced" <label class="toggle"><input id="advanced-checkbox" type="checkbox" data-setting="general.showAdvanced"
data-transform='{ data-transform='{
"type": "setAttribute", "type": "setAttribute",
@ -49,7 +49,7 @@
}' }'
><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label> ><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
</span><span class="outline-item-label">Advanced</span></label> </span><span class="outline-item-label">Advanced</span></label>
<a href="/info.html" class="outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="question-mark"></span></span><span class="outline-item-label">About Yomichan</span></a> <a href="/info.html" class="button outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="question-mark"></span></span><span class="outline-item-label">About Yomichan</span></a>
</div> </div>
</div></div> </div></div>
</div> </div>
@ -2421,13 +2421,13 @@
<div class="scan-input-prefix-cell" data-property="include"><span>Required inputs:</span></div> <div class="scan-input-prefix-cell" data-property="include"><span>Required inputs:</span></div>
<div class="scan-input-content-cell" data-property="include"> <div class="scan-input-content-cell" data-property="include">
<input type="text" class="input-with-suffix-button scan-input-field" autocomplete="off" spellcheck="false" placeholder="No inputs" data-property="include"> <input type="text" class="input-with-suffix-button scan-input-field" autocomplete="off" spellcheck="false" placeholder="No inputs" data-property="include">
<button class="input-suffix-button input-suffix-icon-button mouse-button" data-property="include"><span class="icon icon-button-icon-light" data-icon="mouse"></span></button> <button class="input-suffix-button input-suffix-icon-button light-icon mouse-button" data-property="include"><span class="icon" data-icon="mouse"></span></button>
</div> </div>
<div class="scan-input-prefix-cell" data-property="exclude"><span>Excluded inputs:</span></div> <div class="scan-input-prefix-cell" data-property="exclude"><span>Excluded inputs:</span></div>
<div class="scan-input-content-cell" data-property="exclude"> <div class="scan-input-content-cell" data-property="exclude">
<input type="text" class="input-with-suffix-button scan-input-field" autocomplete="off" spellcheck="false" placeholder="No inputs" data-property="exclude"> <input type="text" class="input-with-suffix-button scan-input-field" autocomplete="off" spellcheck="false" placeholder="No inputs" data-property="exclude">
<button class="input-suffix-button input-suffix-icon-button mouse-button" data-property="exclude"><span class="icon icon-button-icon-light" data-icon="mouse"></span></button> <button class="input-suffix-button input-suffix-icon-button light-icon mouse-button" data-property="exclude"><span class="icon" data-icon="mouse"></span></button>
</div> </div>
<div class="scan-input-prefix-cell scan-input-options-cell" data-property="types"><span>Input types:</span></div> <div class="scan-input-prefix-cell scan-input-options-cell" data-property="types"><span>Input types:</span></div>
@ -2746,7 +2746,7 @@
<template id="anki-card-field-template"><div class="anki-card-field-name-container"><span class="anki-card-field-name"></span></div> <template id="anki-card-field-template"><div class="anki-card-field-name-container"><span class="anki-card-field-name"></span></div>
<div class="anki-card-field-value-container"> <div class="anki-card-field-value-container">
<input type="text" class="anki-card-field-value input-with-suffix-button" autocomplete="off"> <input type="text" class="anki-card-field-value input-with-suffix-button" autocomplete="off">
<button class="anki-card-field-value-menu-button input-suffix-button input-suffix-icon-button" data-menu-position="below left"><span class="icon icon-button-icon-light" data-icon="material-down-arrow"></span></button> <button class="anki-card-field-value-menu-button input-suffix-button input-suffix-icon-button light-icon" data-menu-position="below left"><span class="icon" data-icon="material-down-arrow"></span></button>
</div></template> </div></template>
<template id="anki-card-terms-field-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"><div class="popup-menu-body"></div></div></div></template> <template id="anki-card-terms-field-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"><div class="popup-menu-body"></div></div></div></template>
@ -2783,7 +2783,7 @@
<input type="text" id="anki-card-templates-test-text-input" class="form-control" value="読め" placeholder="Preview text" autocomplete="off" lang="ja"> <input type="text" id="anki-card-templates-test-text-input" class="form-control" value="読め" placeholder="Preview text" autocomplete="off" lang="ja">
<div class="anki-card-templates-test-input-container"> <div class="anki-card-templates-test-input-container">
<input type="text" class="input-with-suffix-button" id="anki-card-templates-test-field-input" value="{expression}" placeholder="{marker}" autocomplete="off" spellcheck="false"> <input type="text" class="input-with-suffix-button" id="anki-card-templates-test-field-input" value="{expression}" placeholder="{marker}" autocomplete="off" spellcheck="false">
<button class="input-suffix-button input-suffix-icon-button" id="anki-card-templates-test-field-menu-button" data-menu="anki-card-all-field-menu" data-menu-position="below left"><span class="icon icon-button-icon-light" data-icon="material-down-arrow"></span></button> <button class="input-suffix-button input-suffix-icon-button light-icon" id="anki-card-templates-test-field-menu-button" data-menu="anki-card-all-field-menu" data-menu-position="below left"><span class="icon" data-icon="material-down-arrow"></span></button>
</div> </div>
<button id="anki-card-templates-test-render-button">Test</button> <button id="anki-card-templates-test-render-button">Test</button>
</div> </div>