nwg-panel: stylize

hosts/common/programs/nwg-panel/config

@@ -6,7 +6,7 @@
     "position": "top",
     "controls": "right",
     "width": "auto",
-    "height": 30,
+    "height": 40,
     "homogeneous": true,
     "margin-top": 0,
     "margin-bottom": 0,
@@ -38,16 +38,10 @@
       "interval": 1,
       "icon-size": 16,
       "hover-opens": false,
-      "leave-closes": true,
+      "leave-closes": false,
       "click-closes": false,
       "css-name": "controls-window",
-      "custom-items": [
+      "custom-items": [],
-        {
-          "name": "Panel settings",
-          "icon": "nwg-panel",
-          "cmd": "nwg-panel-config"
-        }
-      ],
       "menu": {
         "name": "Exit",
         "icon": "system-shutdown-symbolic",
@@ -152,17 +146,9 @@
       "icon-size": 16,
       "chars": 30,
       "scroll": false,
-      "button-css-name": "",
+      "button-css-name": "playerctl-button",
-      "label-css-name": "",
+      "label-css-name": "playerctl-label",
-      "interval": 1
+      "interval": 2
-    },
-    "button-sample": {
-      "command": "notify-send 'sample button'",
-      "icon": "view-grid",
-      "label": "",
-      "label-position": "right",
-      "css-name": "button-custom",
-      "icon-size": 16
     },
     "menu-start": "off",
     "exclusive-zone": true,
@@ -178,4 +164,4 @@
     "start-hidden": false,
     "keyboard-layout": {}
   }
-]
+]

hosts/common/programs/nwg-panel/style.css

@@ -1,59 +1,145 @@
-/***** SUGGESTED TO CHANGE CAREFULLY *****/
+/* foreground (text)/background */
+@define-color fg0       #d8d8d8;
+@define-color fg1       #ffffff;
+@define-color bg0       #130c0c;
+@define-color bg1       #1c1716;
+/* green accents */
+@define-color accent-g0 #1f5e54;
+@define-color accent-g1 #418379;
+@define-color accent-g2 #63a89c;
+/* red accents */
+@define-color accent-r0 #c96262;
+@define-color accent-r1 #d27871;
+@define-color accent-r2 #ff968b;
+/* light (teal-white) accents */
+@define-color accent-l0 #e1f0ef;
+@define-color accent-l1 #f9fffc;
 
-/* Recommended if panel "height" unset or smaller then your theme default button height */
+
-button {
+* {
-    margin: 2px
+  font-size: 16px;
+}
+
+button {
+    margin: 2px;
 }
 
-/* SwayTaskBar and SwayWorkspaces use custom widgets, that need this and the next name
-   to highlight currently focused task / workspace. */
 #task-box {
     padding-left: 4px;
-    padding-right: 4px
+    padding-right: 4px;
 }
 
 #task-box-focused {
-    background-color: rgba (255, 255, 255, 0.12);
+    background-color: @accent-g2;
     padding-left: 4px;
-    padding-right: 4px
+    padding-right: 4px;
 }
 
 
-/***** MODIFY TO YOUR TASTE *****/
+#playerctl-button {
-
+  background-color: rgba(0, 0, 0, 0.08);
-/* Sample button in sample config w/ no background nor border */
+  background-image: none;
-#button-custom {
+  border: none;
-    background: rgba (0, 0, 0, 0.0);
+  box-shadow: none;
-    border: 0
+  margin: -1;
+  outline: none;
 }
 
-/* Top panel in sample config uses this name */
 #panel-top {
-    background: #101010;
+    background: @accent-g1;
-    color: #eeeeee
+    color: @fg1;
 }
 
-/* Bottom panel in sample config uses this name */
+/* increase the size of each workspace icon */
-#panel-bottom {
+#sway-workspaces-item > label {
-    background: #101010;
+  padding-left: 1px;
-    color: #eeeeee
+  padding-right: 1px;
+}
+/* default config highlights hovered workspace with a gray border */
+#sway-workspaces > widget:selected {
+  box-shadow: none;
 }
 
-/* Controls window in sample config uses this name */
 #controls-window {
     border-radius: 15px;
-    background: #36364f;
+    background: @bg1;
-    color: #eeeeee
+    color: @fg1;
-}
-#controls-window scale value {
-    color: #eeeeee
 }
 
+/* default config highlights selected items with a green border */
+#controls-window widget:selected {
+  box-shadow: none;
+  background-color: @accent-r0;
+}
+
+/* default config puts a *ridiculous* amount of padding around the whole controls window */
+#controls-window > widget > .vertical {
+  margin-left: -20px;
+  margin-right: -20px;
+}
+#controls-window > widget > .vertical > .horizontal {
+  margin-top: -14px;  /* full reset would be -20px */
+  margin-bottom: -20px;
+}
+/* add back in a little bit of padding, but in a way such that my highlights apply to it */
+#controls-window .horizontal widget > box,
+#controls-window > widget > .vertical > .horizontal > .vertical > .horizontal
+{
+  padding-left: 12px;
+  padding-right: 12px;
+}
+#controls-window > widget > .vertical > .horizontal > .vertical > widget > box
+{
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+#controls-window > widget > .vertical > .horizontal > .vertical > box > widget > box
+{
+  padding-top: 3px;
+  padding-bottom: 3px;
+}
+
+/* hierarchy is .horizontal > {image, scale > { value, contents > trough > { slider, highlight } } } */
+scale {
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+scale trough {
+  padding-left: 9px;
+  padding-right: 9px;
+  border-radius: 9px;
+  border-color: rgba(0, 0, 0, 0);
+  background: @bg0;
+}
+scale highlight {
+  border-radius: 9px;
+  border-color: rgba(0, 0, 0, 0);
+  margin: 0px;
+  margin-left: -9px;
+  background: @accent-r1;
+}
+scale slider {
+  margin-top: -3px;
+  margin-bottom: -3px;
+  background: @accent-l1;
+  min-height: 25px;
+  min-width: 25px;
+}
+
+/*#clock {
+    font-family: monospace;
+    font-size: 16px
+}*/
+
+/* UNUSED IN MY CURRENT CONFIG: COPIED FROM SAMPLE CONFIG */
+
+/* Controls window in sample config uses this name */
 /* Brightness slider popup window in sample config uses this name */
 #brightness-popup {
     border-radius: 15px;
-    background: #36364f;
+    background: @bg1;
-    color: #eeeeee
+    color: @fg1;
 }
 #brightness-popup box {
     padding: 15px;
@@ -61,24 +147,24 @@ button {
 
 /* Executors usually behave better in monospace fonts */
 #executor-label {
-    font-family: monospace
+    font-family: monospace;
 }
 
-/* and so does the Clock */
+/* Bottom panel in sample config uses this name */
-#clock {
+#panel-bottom {
-    font-family: monospace;
+    background: #101010;
-    font-size: 16px
+    color: #eeeeee;
 }
 
 /* Sample executor-weather uses "css-name": "weather" */
 #weather {
-    font-size: 16px
+    font-size: 16px;
 }
 
 /* dwl-tags module */
 #dwl-tag-box {
 	padding-top: 4px;
-	padding-bottom: 4px
+	padding-bottom: 4px;
 }
 
 #dwl-tag-occupied {
@@ -107,5 +193,5 @@ button {
 
 #dwl-tag-selected {
 	border: solid 2px;
-	border-color: #81a1c1
+	border-color: #81a1c1;
 }