diff options
| author | toasted-nutbread <toasted-nutbread@users.noreply.github.com> | 2022-04-02 14:59:16 -0400 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-04-02 14:59:16 -0400 |
| commit | eb80fb233b5114eb090b720f2ad1743e18e1b2f2 (patch) | |
| tree | ab1d20dd3d83ca50062e096b50cb863d45102487 | |
| parent | ea1d64c9dd0905e96f498f2b491d96d03192b96b (diff) | |
Settings advanced indicators (#2103)
* Update the advanced toggle to have a custom color
* Add indicators to advanced-only settings
| -rw-r--r-- | ext/css/settings.css | 24 | ||||
| -rw-r--r-- | ext/settings.html | 2 |
2 files changed, 25 insertions, 1 deletions
diff --git a/ext/css/settings.css b/ext/css/settings.css index 2ccc45ec..6d986c0b 100644 --- a/ext/css/settings.css +++ b/ext/css/settings.css @@ -65,6 +65,9 @@ --warning-color-light: #edc75e; --dim-background-color: rgba(0, 0, 0, 0.5); --content-dimmer-color: rgba(0, 0, 0, 0.1); + --advanced-color: #6640be; + --advanced-color-lighter: hsl(258, 50%, 75%); + --advanced-color-transparent25: rgba(102, 64, 190, 0.5); --modal-padding-horizontal: 1em; --modal-padding-vertical: 0.625em; @@ -496,6 +499,9 @@ a.heading-link-light { .settings-group.settings-group-top-margin { margin-top: 1.0125em; } +.settings-item { + position: relative; +} .settings-item:not([hidden]) { display: block; } @@ -675,6 +681,24 @@ select.short-height { } +/* Advanced settings */ +.settings-group.advanced-only>.settings-item::after, +.settings-item.advanced-only::after { + content: ''; + background-color: var(--advanced-color-lighter); + position: absolute; + right: 0; + top: 0; + height: 100%; + width: 0.25em; +} +.advanced-toggle { + --accent-color: var(--advanced-color); + --accent-color-lighter: var(--advanced-color-lighter); + --accent-color-transparent25: var(--advanced-color-transparent25); +} + + /* Modal */ .modal { position: fixed; diff --git a/ext/settings.html b/ext/settings.html index 406ee345..0a5b633e 100644 --- a/ext/settings.html +++ b/ext/settings.html @@ -42,7 +42,7 @@ </div> <div class="sidebar-bottom"> <label class="button outline-item"><span class="outline-item-left"> - <label class="toggle"><input id="advanced-checkbox" type="checkbox" data-setting="general.showAdvanced" + <label class="toggle advanced-toggle"><input id="advanced-checkbox" type="checkbox" data-setting="general.showAdvanced" data-transform='{ "type": "setAttribute", "selector": ":root", |