Implement Setting Dialog - Work in Progress

2024-07-21 16:20:34 -07:00
parent ab721edbd2
commit 28fbb8e3b4
21 changed files with 585 additions and 21 deletions
--- a/scss/style/settings/dialog.scss
+++ b/scss/style/settings/dialog.scss
@@ -0,0 +1,172 @@
+@import '../../variables';
+
+window.settings-dialog {
+    background-color: $bar-menus-cards;
+    color: $bar-menus-text;
+
+    $padding: 1em;
+    $primary_bg: $bar-menus-background;
+    $spacing: 0.4em;
+    $radius: 0.5em;
+    $widget-bg: $bar-menus-cards;
+    $border: none;
+    $fg: $bar-menus-text;
+
+
+    .header {
+
+        padding: $padding;
+
+        button {
+            font-weight: bold;
+            padding: $padding*.5 $padding;
+
+        }
+
+        button.close {
+            padding: $padding * .5;
+        }
+
+        button.reset {
+            padding: $padding*.5;
+        }
+    }
+
+    .page {
+
+        .page-content {
+            padding: $padding*2;
+            padding-top: 0;
+        }
+    }
+
+    .group {
+        .group-title {
+            color: $primary-bg;
+            margin-bottom: $spacing*.5;
+        }
+
+        .group-reset {
+            margin: $spacing * .5;
+            padding: $padding * .5;
+
+            &:disabled {
+                color: transparent;
+            }
+        }
+
+        &:not(:first-child) {
+            margin-top: $spacing;
+        }
+    }
+
+    .row {
+        background-color: $widget-bg;
+        padding: $padding;
+        border: $border;
+        border-top: none;
+
+        &:first-child {
+            border-radius: $radius $radius 0em 0em;
+            border: $border;
+        }
+
+        &:last-child {
+            border-radius: 0em 0em $radius $radius;
+        }
+
+        &:first-child:last-child {
+            border-radius: $radius;
+            border: $border;
+        }
+
+        button.reset {
+            margin-left: $spacing;
+        }
+
+        label.id,
+        label.note {
+            color: transparentize($fg, .4)
+        }
+
+        entry,
+        button {
+            padding: $padding;
+        }
+
+        spinbutton {
+            entry {
+                border-radius: $radius 0em 0em $radius;
+            }
+
+            button {
+                border-radius: 0em;
+            }
+
+            button:last-child {
+                border-radius: 0em $radius $radius 0em;
+            }
+        }
+
+        .enum-setter {
+            label {
+                background-color: $widget-bg;
+                border: $border;
+                padding: 0em $padding;
+                border-radius: $radius 0em 0em $radius;
+            }
+
+            button {
+                border-radius: 0em;
+            }
+
+            button:last-child {
+                border-radius: 0em $radius $radius 0em;
+            }
+        }
+
+        &.wallpaper {
+            button {
+                margin-top: $spacing * .5;
+            }
+
+            .preview {
+                border-radius: $radius;
+            }
+        }
+    }
+}
+
+.option-item {
+    margin: 0em 2em;
+    margin-bottom: 1em;
+
+    .reset {
+        color: $bar-menus-iconbuttons-passive;
+    }
+    .options-label {
+        color: $bar-menus-text;
+    }
+    .options-sublabel {
+        font-size: 0.75em;
+        margin-top: 0.2em;
+        color: $bar-menus-dimtext;
+    }
+    .inputter-container {
+        border-radius: $bar-menus-border-radius * 0.5;
+        :first-child {
+            border-radius: $bar-menus-border-radius * 0.5;
+        }
+        padding: 0.35em 0.35em;
+        background: $surface1;
+        margin-right: 1em;
+    }
+}
+.options-header {
+    margin: 1em 1em;
+    .label-name {
+        color: $bar-menus-label;
+        font-size: 0.9em;
+        margin-right: 0.5em;
+    }
+}