From eb80fb233b5114eb090b720f2ad1743e18e1b2f2 Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Sat, 2 Apr 2022 14:59:16 -0400
Subject: Settings advanced indicators (#2103)
* Update the advanced toggle to have a custom color
* Add indicators to advanced-only settings
---
ext/css/settings.css | 24 ++++++++++++++++++++++++
1 file changed, 24 insertions(+)
(limited to 'ext/css')
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;
--
cgit v1.2.3