Settings advanced indicators (#2103)
* Update the advanced toggle to have a custom color * Add indicators to advanced-only settings
This commit is contained in:
parent
ea1d64c9dd
commit
eb80fb233b
@ -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;
|
||||
|
@ -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",
|
||||
|
Loading…
Reference in New Issue
Block a user