aboutsummaryrefslogtreecommitdiff
path: root/ext/css/material.css
diff options
context:
space:
mode:
Diffstat (limited to 'ext/css/material.css')
-rw-r--r--ext/css/material.css424
1 files changed, 224 insertions, 200 deletions
diff --git a/ext/css/material.css b/ext/css/material.css
index 9cde17f3..71f930fc 100644
--- a/ext/css/material.css
+++ b/ext/css/material.css
@@ -44,7 +44,7 @@
--material-arrow-dimension1: calc(5em / 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));
@@ -102,10 +102,10 @@
--input-background-color-darker: #cccccc;
--input-outline-color: var(--text-color);
- --button-text-color: #ffffff;
- --button-border-color: #cccccc;
- --button-icon-color: #333333;
- --button-icon-color-light: #666666;
+ --button-default-text-color: #ffffff;
+ --button-default-border-color: #cccccc;
+ --button-default-icon-color: #333333;
+ --button-default-icon-color-light: #666666;
--checkbox-checked-color: var(--accent-color);
--checkbox-unchecked-color: #666666;
@@ -160,10 +160,10 @@
--input-background-color-darker: #484848;
--input-outline-color: var(--text-color);
- --button-text-color: #000000;
- --button-border-color: #333333;
- --button-icon-color: #cccccc;
- --button-icon-color-light: #999999;
+ --button-default-text-color: #000000;
+ --button-default-border-color: #333333;
+ --button-default-icon-color: #cccccc;
+ --button-default-icon-color-light: #999999;
--checkbox-unchecked-color: #999999;
@@ -761,207 +761,250 @@ input[type=number].code {
/* Material design button */
-button {
- border: var(--thin-border-size) solid transparent;
+button,
+.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;
padding: 0.5em 1em;
font-weight: bold;
font-size: inherit;
font-family: inherit;
cursor: pointer;
- background-color: transparent;
- box-shadow: var(--button-shadow-params) var(--shadow-color-off);
transition:
- background-color var(--animation-duration) ease-in,
- box-shadow var(--animation-duration) ease-in,
- border-color var(--animation-duration) ease-in;
+ background-color var(--animation-duration) ease-in-out,
+ box-shadow var(--animation-duration) ease-in-out,
+ border-color var(--animation-duration) ease-in-out;
-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 */
-button {
- color: var(--button-text-color);
- border-color: var(--accent-color);
- background-color: var(--accent-color);
+ color: var(--button-current-content-color);
+ border-color: var(--button-current-border-color);
+ background-color: var(--button-current-background-color);
+ box-shadow: var(--button-current-shadow);
}
button:hover,
-button:focus {
- background-color: var(--accent-color-light);
- border-color: var(--accent-color-light);
+.button:hover {
+ --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,
+.button:focus {
+ --button-current-content-color: var(--button-focus-content-color);
+ --button-current-border-color: var(--button-focus-border-color);
+ --button-current-background-color: var(--button-focus-background-color);
+ --button-current-shadow: var(--button-focus-shadow);
+
+ outline: none;
}
-button:focus:not(:focus-visible):not(:hover):not(:active) {
- background-color: var(--accent-color);
- border-color: var(--accent-color);
+button:active,
+.button:active {
+ --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: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:focus-visible {
- background-color: var(--accent-color-light);
- border-color: var(--accent-color-light);
+button:disabled,
+.button:disabled {
+ cursor: default;
}
-button:active,
-button:active:focus {
- border-color: var(--accent-color-lighter);
- background-color: var(--accent-color-lighter);
+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 */
button.danger {
- color: var(--button-text-color);
- border-color: var(--danger-color);
- background-color: var(--danger-color);
-}
-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);
+ --button-border-color: var(--danger-color);
+ --button-background-color: var(--danger-color);
+ --button-hover-background-color: var(--danger-color-light);
+ --button-active-background-color: var(--danger-color-lighter);
}
/* Low emphasis button */
button.low-emphasis {
- color: var(--accent-color);
- border-color: var(--button-border-color);
- background-color: var(--accent-color-transparent0);
-}
-button.low-emphasis:hover,
-button.low-emphasis:focus {
- border-color: var(--accent-color);
- background-color: var(--accent-color-transparent5);
-}
-button.low-emphasis:focus:not(:focus-visible):not(:hover):not(:active) {
- 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);
+ --button-content-color: var(--accent-color);
+ --button-border-color: var(--button-default-border-color);
+ --button-background-color: var(--accent-color-transparent0);
+ --button-hover-border-color: var(--accent-color);
+ --button-hover-background-color: var(--accent-color-transparent5);
+ --button-active-border-color: var(--accent-color);
+ --button-active-background-color: var(--accent-color-transparent25);
+ --button-disabled-content-color: var(--disabled-color);
+ --button-disabled-border-color: var(--disabled-color);
+ --button-disabled-background-color: var(--accent-color-transparent0);
}
/* Low emphasis danger button */
button.low-emphasis.danger {
- color: var(--danger-color);
- border-color: var(--button-border-color);
- background-color: var(--danger-color-transparent0);
-}
-button.low-emphasis.danger:hover,
-button.low-emphasis.danger:focus {
- border-color: var(--danger-color);
- background-color: var(--danger-color-transparent5);
-}
-button.low-emphasis.danger:focus:not(:focus-visible):not(:hover):not(:active) {
- 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;
+ --button-content-color: var(--danger-color);
+ --button-border-color: var(--button-default-border-color);
+ --button-background-color: var(--danger-color-transparent0);
+ --button-hover-border-color: var(--danger-color);
+ --button-hover-background-color: var(--danger-color-transparent5);
+ --button-active-border-color: var(--danger-color);
+ --button-active-background-color: var(--danger-color-transparent25);
+ --button-disabled-content-color: var(--disabled-color);
+ --button-disabled-border-color: var(--disabled-color);
+ --button-disabled-background-color: var(--danger-color-transparent0);
}
/* 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-bottom-left-radius: 0;
- border: none;
+ border-style: none;
+ border-width: 0;
height: var(--input-height);
line-height: var(--input-height);
- background-color: var(--input-background-color);
box-sizing: border-box;
padding: 0 0.5em;
- border-color: transparent;
- transition:
- background-color var(--animation-duration) ease-in,
- box-shadow var(--animation-duration) ease-in;
-}
-button.input-suffix-button.input-suffix-icon-button {
- 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.light-icon {
+ --button-content-color: var(--button-default-icon-color-light);
}
-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 {
+ width: 2.125em;
}
button.input-suffix-button.input-suffix-icon-button>.icon {
display: block;
width: 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=number]:invalid+button.input-suffix-button,
input[type=text][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;
}
/* Material design 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;
border: none;
margin: 0;
@@ -969,7 +1012,10 @@ button.icon-button {
box-sizing: content-box;
font-size: inherit;
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]) {
display: inline-block;
@@ -980,22 +1026,6 @@ button.icon-button>.icon-button-inner {
height: var(--icon-button-size);
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 {
position: absolute;
display: block;
@@ -1041,12 +1071,9 @@ button.icon-button:focus:active:not(:focus-visible) {
top: 0;
right: 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-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-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;
}
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;
flex: 1 1 auto;
border-radius: 0;
- background-color: transparent;
- color: var(--text-color);
- border: none;
+ border-style: none;
+ border-width: 0;
text-align: left;
font-size: 1em;
font-weight: normal;
@@ -1110,30 +1154,10 @@ button.popup-menu-item {
button.popup-menu-item:not([hidden]) {
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 {
width: calc(16em / 14);
height: calc(16em / 14);
- background-color: var(--text-color);
+ background-color: var(--button-current-content-color);
flex: 0 0 auto;
}
.popup-menu-item-icon:not([hidden]) {