diff options
| author | toasted-nutbread <toasted-nutbread@users.noreply.github.com> | 2020-12-20 15:43:10 -0500 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2020-12-20 15:43:10 -0500 |
| commit | f5ae0f1f3d9a83aa85322a2008e21da5b882e01c (patch) | |
| tree | 939cd57fffa280623ec78bd7ef4bd261d881ee63 /ext/mixed/css/search.css | |
| parent | 4f6309842f0926edb90907a3502c36ead465fc42 (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/search.css')
| -rw-r--r-- | ext/mixed/css/search.css | 32 |
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 */ |