aboutsummaryrefslogtreecommitdiff
path: root/ext/mixed/css
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2020-12-20 15:43:10 -0500
committerGitHub <noreply@github.com>2020-12-20 15:43:10 -0500
commitf5ae0f1f3d9a83aa85322a2008e21da5b882e01c (patch)
tree939cd57fffa280623ec78bd7ef4bd261d881ee63 /ext/mixed/css
parent4f6309842f0926edb90907a3502c36ead465fc42 (diff)
Settings v2 icon improvements (#1147)
* Update navigation icons * Improve outline layout, fixing badge indicators * Change attribute value * Update icon buttons * Update settings page
Diffstat (limited to 'ext/mixed/css')
-rw-r--r--ext/mixed/css/search.css32
1 files changed, 19 insertions, 13 deletions
diff --git a/ext/mixed/css/search.css b/ext/mixed/css/search.css
index 8c8f77e6..ad4a2ae7 100644
--- a/ext/mixed/css/search.css
+++ b/ext/mixed/css/search.css
@@ -98,6 +98,23 @@ h1 {
border-bottom: calc(1em / (var(--font-size-no-units) * 2)) solid var(--separator-color1);
}
+/* Icons */
+.icon {
+ --icon-image: none;
+ --icon-size: contain;
+ -webkit-mask-repeat: no-repeat;
+ -webkit-mask-position: center center;
+ -webkit-mask-mode: alpha;
+ -webkit-mask-size: var(--icon-size);
+ -webkit-mask-image: var(--icon-image);
+ mask-repeat: no-repeat;
+ mask-position: center center;
+ mask-mode: alpha;
+ mask-size: var(--icon-size);
+ mask-image: var(--icon-image);
+}
+.icon[data-icon=magnifying-glass] { --icon-image: url(/mixed/img/magnifying-glass.svg); }
+
/* Material design select */
select {
width: var(--input-width-large);
@@ -289,7 +306,7 @@ label.toggle {
background-color: var(--input-background-color-darker);
}
-.icon-button-icon {
+#search-button>.icon {
display: block;
position: absolute;
left: 0;
@@ -297,18 +314,7 @@ label.toggle {
right: 0;
bottom: 0;
background-color: var(--button-icon-color);
- mask-repeat: no-repeat;
- mask-position: center center;
- mask-mode: alpha;
- -webkit-mask-repeat: no-repeat;
- -webkit-mask-position: center center;
- -webkit-mask-mode: alpha;
-}
-.icon-button-icon[data-icon=magnifying-glass] {
- mask-image: url(/mixed/img/magnifying-glass.svg);
- -webkit-mask-image: url(/mixed/img/magnifying-glass.svg);
- mask-size: 16px 16px;
- -webkit-mask-size: 16px 16px;
+ --icon-size: 16px 16px;
}
/* Search options */