summaryrefslogtreecommitdiff
path: root/ext/css
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2021-09-10 20:48:03 -0400
committerGitHub <noreply@github.com>2021-09-10 20:48:03 -0400
commit6661933d4727ef4797eeb945f8c1b0b67f546b9d (patch)
tree67d3394f18965af97975e476a70bbdd55585c718 /ext/css
parentdfddf3792ea47ac91fd8bded58a88c87f4febfe2 (diff)
Display button updates (#1945)
* Use span rather than div for button badges * Update action button icons * Rename class * Update current entry indicator
Diffstat (limited to 'ext/css')
-rw-r--r--ext/css/display.css42
-rw-r--r--ext/css/material.css8
2 files changed, 19 insertions, 31 deletions
diff --git a/ext/css/display.css b/ext/css/display.css
index 76e8d6a4..58cd23eb 100644
--- a/ext/css/display.css
+++ b/ext/css/display.css
@@ -627,7 +627,7 @@ button.action-button[hidden] {
-webkit-filter var(--animation-duration) linear,
background-color var(--animation-duration) linear;
}
-button.collapsible-action-button[hidden] {
+button.action-button-collapsible[hidden] {
display: none;
}
button.action-button:disabled {
@@ -653,34 +653,18 @@ button.action-button:active {
background-color: var(--action-button-active-color);
box-shadow: none;
}
-button.action-button[data-icon]::before {
- content: '';
- width: var(--action-button-size);
- height: var(--action-button-size);
- display: block;
- background-color: transparent;
- background-repeat: no-repeat;
- background-size: contain;
-}
-button.action-button[data-icon=view-note]::before {
- background-image: url('/images/view-note.svg');
-}
-button.action-button[data-icon=add-term-kanji]::before {
- background-image: url('/images/add-term-kanji.svg');
-}
-button.action-button[data-icon=add-term-kana]::before {
- background-image: url('/images/add-term-kana.svg');
-}
-button.action-button[data-icon=play-audio]::before {
- background-image: url('/images/play-audio.svg');
-}
-button.action-button[data-icon=source-term]::before {
- background-image: url('/images/source-term.svg');
-}
-.action-view-tags>.icon {
+.icon[data-icon=view-note] { background-image: url('/images/view-note.svg'); }
+.icon[data-icon=add-term-kanji] { background-image: url('/images/add-term-kanji.svg'); }
+.icon[data-icon=add-term-kana] { background-image: url('/images/add-term-kana.svg'); }
+.icon[data-icon=play-audio] { background-image: url('/images/play-audio.svg'); }
+.icon[data-icon=source-term] { background-image: url('/images/source-term.svg'); }
+.icon[data-icon=entry-current] { background-image: url('/images/entry-current.svg'); }
+.action-icon {
display: block;
width: var(--action-button-size);
height: var(--action-button-size);
+}
+.action-icon:not(.color-icon) {
background-color: var(--text-color);
}
:root[data-result-output-mode=merge] .entry[data-type=term] .actions>button.action-button.action-play-audio {
@@ -1048,14 +1032,10 @@ button.action-button[data-icon=source-term]::before {
:root:not([data-popup-current-indicator-mode=asterisk]) .entry-current-indicator-icon {
display: none;
}
-.entry-current-indicator-icon::before {
- content: '';
+.entry-current-indicator-icon>.icon {
width: var(--action-button-size);
height: var(--action-button-size);
display: block;
- background-color: transparent;
- background-repeat: no-repeat;
- background-size: contain;
background-image: url('/images/entry-current.svg');
}
diff --git a/ext/css/material.css b/ext/css/material.css
index 92d4fcdb..710058c7 100644
--- a/ext/css/material.css
+++ b/ext/css/material.css
@@ -228,6 +228,14 @@ body {
mask-size: var(--icon-size);
mask-image: var(--icon-image);
}
+.icon.color-icon {
+ -webkit-mask-image: none;
+ mask-image: none;
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-size: var(--icon-size);
+ background-image: var(--icon-image);
+}
.icon[data-icon=none] { --icon-image: linear-gradient(transparent, transparent); }
.icon[data-icon=profile] { --icon-image: url(/images/profile.svg); }
.icon[data-icon=cog] { --icon-image: url(/images/cog.svg); }