aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2022-04-02 14:59:16 -0400
committerGitHub <noreply@github.com>2022-04-02 14:59:16 -0400
commiteb80fb233b5114eb090b720f2ad1743e18e1b2f2 (patch)
treeab1d20dd3d83ca50062e096b50cb863d45102487
parentea1d64c9dd0905e96f498f2b491d96d03192b96b (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.css24
-rw-r--r--ext/settings.html2
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",