summaryrefslogtreecommitdiff
path: root/ext/mixed/css/display.css
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2020-12-29 21:33:57 -0500
committerGitHub <noreply@github.com>2020-12-29 21:33:57 -0500
commit773d67e75a3d01df5ad492896e19f5029e6e35d2 (patch)
tree3970596a45461adc739cef7b1017ac871bd71db2 /ext/mixed/css/display.css
parenta23c94fb02d22f1dad9a65d54a819561cce9f053 (diff)
Split material css (#1175)
* Separate material styles into a separate file * Improve action button styles * Rename --font-size-default to --font-size * Remove px units * Remove some material vars * Fix some variable names * Define variables * Remove --shadow-vertical * Revert name change * Move var * Rename var * Update vars * Remove redundant vars * Update search styles * Update styles * Update colors * Update variable names * Include material.css on float.html page
Diffstat (limited to 'ext/mixed/css/display.css')
-rw-r--r--ext/mixed/css/display.css89
1 files changed, 49 insertions, 40 deletions
diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index f0f39d07..abf8ae6e 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -81,17 +81,16 @@
/* Colors */
--background-color: #ffffff;
--glossary-image-background-color: #eeeeee;
- --accent-color: #0275d8;
--link-color: var(--accent-color);
- --default-text-color: #000000;
- --light-text-color: #777777;
- --very-light-text-color: #999999;
- --kanji-text-color: var(--default-text-color);
+ --text-color: #000000;
+ --text-color-light: #777777;
+ --text-color-very-light: #999999;
+ --kanji-text-color: var(--text-color);
--kanji-popular-text-color: var(--accent-color);
- --kanji-rare-text-color: var(--very-light-text-color);
+ --kanji-rare-text-color: var(--text-color-very-light);
--kanji-furigana-text-color: inherit;
- --reason-text-color: var(--light-text-color);
+ --reason-text-color: var(--text-color-light);
--light-border-color: #eeeeee;
--medium-border-color: #dddddd;
@@ -136,22 +135,23 @@
--notification-text-color: #ffffff;
--notification-background-color: #333333;
--notification-shadow-color: rgba(0, 0, 0, 0.5);
+
+ --action-button-active-color: var(--scrollbar-thumb-color);
}
:root[data-theme=dark] {
/* Colors */
--background-color: #1e1e1e;
--glossary-image-background-color: #2f2f2f;
- --accent-color: #4eacfd;
--link-color: var(--accent-color);
- --default-text-color: #d4d4d4;
- --light-text-color: #888888;
- --very-light-text-color: #666666;
- --kanji-text-color: var(--default-text-color);
+ --text-color: #d4d4d4;
+ --text-color-light: #888888;
+ --text-color-very-light: #666666;
+ --kanji-text-color: var(--text-color);
--kanji-popular-text-color: var(--accent-color);
- --kanji-rare-text-color: var(--very-light-text-color);
+ --kanji-rare-text-color: var(--text-color-very-light);
--kanji-furigana-text-color: inherit;
- --reason-text-color: var(--light-text-color);
+ --reason-text-color: var(--text-color-light);
--light-border-color: #2f2f2f;
--medium-border-color: #3f3f3f;
@@ -196,6 +196,8 @@
--notification-text-color: #2f2f2f;
--notification-background-color: #e1e1e1;
--notification-shadow-color: rgba(255, 255, 255, 0.25);
+
+ --action-button-active-color: var(--scrollbar-thumb-color);
}
@@ -224,7 +226,7 @@ body {
height: 100%;
overflow: hidden;
background-color: var(--background-color);
- color: var(--default-text-color);
+ color: var(--text-color);
font-size: inherit;
}
ol, ul {
@@ -541,7 +543,8 @@ button.sidebar-button.danger:hover .sidebar-button-icon {
content: '';
display: block;
}
-.action-button {
+button.action-button {
+ cursor: pointer;
display: block;
opacity: 1;
border: 0;
@@ -553,12 +556,10 @@ button.sidebar-button.danger:hover .sidebar-button-icon {
opacity var(--animation-duration) linear,
visibility 0s linear 0s,
filter var(--animation-duration) linear,
- -webkit-filter var(--animation-duration) linear;
+ -webkit-filter var(--animation-duration) linear,
+ background-color var(--animation-duration) linear;
}
-button.action-button {
- cursor: pointer;
-}
-.action-button[hidden] {
+button.action-button[hidden] {
display: block;
visibility: hidden;
opacity: 0;
@@ -566,18 +567,26 @@ button.action-button {
opacity var(--animation-duration) linear,
visibility 0s linear var(--animation-duration),
filter var(--animation-duration) linear,
- -webkit-filter var(--animation-duration) linear;
+ -webkit-filter var(--animation-duration) linear,
+ background-color var(--animation-duration) linear;
}
-.action-button:disabled {
+button.action-button:disabled {
pointer-events: none;
cursor: default;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
+ background-color: transparent;
}
-.action-button:disabled:not([hidden]) {
+button.action-button:disabled:not([hidden]) {
opacity: 0.25;
}
-.action-button::before {
+button.action-button:hover {
+ background-color: transparent;
+}
+button.action-button:active {
+ background-color: var(--action-button-active-color);
+}
+button.action-button::before {
content: "";
width: var(--action-button-size);
height: var(--action-button-size);
@@ -586,22 +595,22 @@ button.action-button {
background-repeat: no-repeat;
background-size: contain;
}
-.action-button[data-icon=view-note]::before {
+button.action-button[data-icon=view-note]::before {
background-image: url("/mixed/img/view-note.svg");
}
-.action-button[data-icon=add-term-kanji]::before {
+button.action-button[data-icon=add-term-kanji]::before {
background-image: url("/mixed/img/add-term-kanji.svg");
}
-.action-button[data-icon=add-term-kana]::before {
+button.action-button[data-icon=add-term-kana]::before {
background-image: url("/mixed/img/add-term-kana.svg");
}
-.action-button[data-icon=play-audio]::before {
+button.action-button[data-icon=play-audio]::before {
background-image: url("/mixed/img/play-audio.svg");
}
-.action-button[data-icon=source-term]::before {
+button.action-button[data-icon=source-term]::before {
background-image: url("/mixed/img/source-term.svg");
}
-.entry[data-type=term][data-expression-multi=true] .actions>.action-play-audio {
+.entry[data-type=term][data-expression-multi=true] .actions>button.action-button.action-play-audio {
display: none;
}
@@ -949,10 +958,10 @@ button.action-button {
}
.term-definition-item::marker,
.term-glossary-item::marker {
- color: var(--light-text-color);
+ color: var(--text-color-light);
}
.term-definition-disambiguation-list {
- color: var(--light-text-color);
+ color: var(--text-color-light);
}
.term-definition-disambiguation-list[data-count="0"] {
display: none;
@@ -1015,7 +1024,7 @@ button.action-button {
}
.term-pitch-accent-group::marker,
.term-pitch-accent::marker {
- color: var(--light-text-color);
+ color: var(--text-color-light);
}
.term-pitch-accent {
display: list-item;
@@ -1030,7 +1039,7 @@ button.action-button {
}
.term-pitch-accent-disambiguation-list {
padding-right: 0.25em;
- color: var(--light-text-color);
+ color: var(--text-color-light);
}
.term-pitch-accent-disambiguation-list::before {
content: "(";
@@ -1156,7 +1165,7 @@ button.action-button {
display: table;
table-layout: fixed;
white-space: normal;
- color: var(--light-text-color);
+ color: var(--text-color-light);
}
.term-glossary-item[data-has-image=true][data-image-load-state=load-error] .term-glossary-image-container-overlay::after {
content: "Image failed to load";
@@ -1259,7 +1268,7 @@ button.action-button {
list-style-type: none;
}
.kanji-glossary-item::marker {
- color: var(--light-text-color);
+ color: var(--text-color-light);
}
@@ -1368,7 +1377,7 @@ button.action-button {
height: 75%;
}
.frame-resizer-handle {
- fill: var(--default-text-color);
+ fill: var(--text-color);
opacity: 0.125;
cursor: se-resize;
pointer-events: auto;
@@ -1468,7 +1477,7 @@ button.action-button {
white-space: pre-wrap;
content: var(--compact-list-separator);
display: inline;
- color: var(--light-text-color);
+ color: var(--text-color-light);
}
:root[data-glossary-layout-mode=compact] .entry:not([data-expression-multi=true]) .term-special-tags {
display: none;
@@ -1508,7 +1517,7 @@ button.action-button {
white-space: pre-wrap;
content: var(--compact-list-separator);
display: inline;
- color: var(--light-text-color);
+ color: var(--text-color-light);
}
:root[data-glossary-layout-mode=compact] .term-glossary-image-container {