Implement Setting Dialog - Work in Progress

scss/style/bar/bar.scss

@@ -10,7 +10,7 @@
 
 .bar_item_box_visible {
   background-color: $bar-buttons-background;
-  border-radius: 0.35em;
+  border-radius: $bar-buttons-radius;
   padding: 0.2rem 0.9rem;
   margin: 0.5rem 0.25rem;
 
@@ -60,12 +60,6 @@
       background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-notifications-background);
     }
   }
-  &.power {
-    background-color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-power-background);
-    &:hover {
-      background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-power-background);
-    }
-  }
   &.systray {
     background-color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-systray-background);
     &:hover {

scss/style/bar/power.scss

@@ -2,6 +2,6 @@
 @import '../../variables';
 
 .bar-power_label {
-  color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-power-icon);
+  color: $red;
   margin-top: 0.2rem;
 }

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;
+    }
+}