Settings advanced indicators (#2103)

* Update the advanced toggle to have a custom color

* Add indicators to advanced-only settings
This commit is contained in:
toasted-nutbread 2022-04-02 14:59:16 -04:00 committed by GitHub
parent ea1d64c9dd
commit eb80fb233b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 1 deletions

View File

@ -65,6 +65,9 @@
--warning-color-light: #edc75e; --warning-color-light: #edc75e;
--dim-background-color: rgba(0, 0, 0, 0.5); --dim-background-color: rgba(0, 0, 0, 0.5);
--content-dimmer-color: rgba(0, 0, 0, 0.1); --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-horizontal: 1em;
--modal-padding-vertical: 0.625em; --modal-padding-vertical: 0.625em;
@ -496,6 +499,9 @@ a.heading-link-light {
.settings-group.settings-group-top-margin { .settings-group.settings-group-top-margin {
margin-top: 1.0125em; margin-top: 1.0125em;
} }
.settings-item {
position: relative;
}
.settings-item:not([hidden]) { .settings-item:not([hidden]) {
display: block; 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 */
.modal { .modal {
position: fixed; position: fixed;

View File

@ -42,7 +42,7 @@
</div> </div>
<div class="sidebar-bottom"> <div class="sidebar-bottom">
<label class="button outline-item"><span class="outline-item-left"> <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='{ data-transform='{
"type": "setAttribute", "type": "setAttribute",
"selector": ":root", "selector": ":root",