From 618b7ef5520de6f3796b66e42422a36c5a191ab0 Mon Sep 17 00:00:00 2001
From: Jake Stanger <mail@jstanger.dev>
Date: Tue, 2 May 2023 23:08:49 +0100
Subject: [PATCH] docs: improve example css

---
 examples/style.css | 288 +++++++++++++++++++--------------------------
 1 file changed, 123 insertions(+), 165 deletions(-)

diff --git a/examples/style.css b/examples/style.css
index 25ad7dd..f625d91 100644
--- a/examples/style.css
+++ b/examples/style.css
@@ -1,148 +1,123 @@
+@define-color color_bg #2d2d2d;
+@define-color color_bg_dark #1c1c1c;
+@define-color color_border #424242;
+@define-color color_border_active #6699cc;
+@define-color color_text #ffffff;
+@define-color color_urgent #8f0a0a;
+
+/* -- base styles -- */
+
 * {
-    /* `otf-font-awesome` is required to be installed for icons */
     font-family: Noto Sans Nerd Font, sans-serif;
     font-size: 16px;
-
     border: none;
+    border-radius: 0;
+}
+
+box, menubar {
+    background-color: @color_bg;
+}
+
+button {
+    color: @color_text;
+    background-color: @color_bg;
+}
+
+label {
+    color: @color_text;
+}
+
+button:hover {
+    background-color: @color_bg_dark;
 }
 
 #bar {
-    border-top: 1px solid #424242;
+    border-top: 1px solid @color_border;
 }
 
-.background, .container {
-    background-color: #2d2d2d;
+.popup {
+    border: 1px solid @color_border;
+    padding: 1em;
 }
 
-#workspaces .item {
-    color: white;
-    background-color: #2d2d2d;
-    border-radius: 0;
+
+/* -- clipboard -- */
+
+#clipboard {
+    margin-left: 5px;
+    font-size: 1.1em;
 }
 
-#workspaces .item.focused {
-    box-shadow: inset 0 -3px;
-    background-color: #1c1c1c;
+#popup-clipboard .item {
+    padding-bottom: 0.3em;
+    border-bottom: 1px solid @color_border;
 }
 
-#workspaces *:not(.focused):hover {
-    box-shadow: inset 0 -3px;
-}
 
-#launcher .item {
-    border-radius: 0;
-    background-color: #2d2d2d;
-    margin-right: 4px;
-}
-
-#launcher .item:not(.focused):hover {
-    background-color: #1c1c1c;
-}
-
-#launcher .open {
-    border-bottom: 2px solid #6699cc;
-}
-
-#launcher .focused {
-    color: white;
-    background-color: #1c1c1c;
-    border-bottom: 4px solid #6699cc;
-}
-
-#launcher .urgent {
-    color: white;
-    background-color: #8f0a0a;
-}
-
-#popup-launcher .popup-item {
-    color: white;
-    background-color: #2d2d2d;
-    border-radius: 0;
-}
-
-#popup-launcher .popup-item:hover {
-    background-color: #1c1c1c;
-}
-
-#popup-launcher .popup-item:not(:first-child) {
-    border-top: 1px solid white;
-}
+/* -- clock -- */
 
 #clock {
-    color: white;
-    background-color: #2d2d2d;
     font-weight: bold;
     margin-left: 5px;
 }
 
-#clock:hover {
-    background-color: #1c1c1c;
-}
-
-#script {
-    padding-left: 10px;
-    color: white;
-}
-
-#sysinfo {
-    margin-left: 10px;
-    color: white;
-}
-
-#sysinfo #item {
-    margin-left: 5px;
-}
-
-#tray {
-    margin-left: 10px;
-}
-
-#tray .item {
-    background-color: #2d2d2d;
-}
-
-#music {
-    background-color: #2d2d2d;
-    color: white;
-}
-
-.popup {
-    background-color: #2d2d2d;
-    border: 1px solid #424242;
-}
-
-#popup-clock {
-    padding: 1em;
-}
-
 #calendar-clock {
-    color: white;
+    color: @color_text;
     font-size: 2.5em;
     padding-bottom: 0.1em;
 }
 
-#calendar {
-    background-color: #2d2d2d;
-    color: white;
+#popup-clock #calendar {
+    background-color: @color_bg;
+    color: @color_text;
 }
 
-#calendar .header {
+#popup-clock #calendar .header {
     padding-top: 1em;
-    border-top: 1px solid #424242;
+    border-top: 1px solid @color_border;
     font-size: 1.5em;
 }
 
-#calendar:selected {
-    background-color: #6699cc;
+#popup-clock #calendar:selected {
+    background-color: @color_border_active;
 }
 
-#music:hover {
-    background-color: #1c1c1c;
+
+/* -- launcher -- */
+
+#launcher .item {
+    margin-right: 4px;
 }
 
-#popup-music {
-    color: white;
-    padding: 1em;
+#launcher .item:not(.focused):hover {
+    background-color: @color_bg_dark;
+}
+
+#launcher .open {
+    border-bottom: 2px solid @color_text;
+}
+
+#launcher .focused {
+    border-bottom-color: @color_border_active;
+}
+
+#launcher .urgent {
+    border-bottom-color: @color_urgent;
+}
+
+#popup-launcher {
+    padding: 0;
+}
+
+#popup-launcher .popup-item:not(:first-child) {
+    border-top: 1px solid @color_border;
+}
+
+
+/* -- music -- */
+
+#music:hover * {
+    background-color: @color_bg_dark;
 }
 
 #popup-music #album-art {
@@ -153,88 +128,71 @@
     font-size: 1.7em;
 }
 
-#popup-music #controls * {
-    border-radius: 0;
-    background-color: #2d2d2d;
-    color: white;
-}
-
 #popup-music #controls *:disabled {
-    color: #424242;
+    color: @color_border;
 }
 
+#popup-music #volume scale slider {
+    border-radius: 100%;
+}
+
+/* volume icon */
 #popup-music #volume > box:last-child label {
     margin-left: 6px;
 }
 
-#focused {
-    color: white;
+
+/* -- script -- */
+
+#script {
+    padding-left: 10px;
 }
 
-.power-menu {
+
+/* -- sys_info -- */
+
+#sysinfo {
     margin-left: 10px;
 }
 
-.power-menu #power-btn {
-    color: white;
-    background-color: #2d2d2d;
+#sysinfo #item {
+    margin-left: 5px;
 }
 
-.power-menu #power-btn:hover {
-    background-color: #1c1c1c;
+
+/* -- tray -- */
+
+#tray {
+    margin-left: 10px;
 }
 
-.popup-power-menu {
-    padding: 1em;
+
+/* -- workspaces -- */
+
+#workspaces .item.focused {
+    box-shadow: inset 0 -3px;
+    background-color: @color_bg_dark;
 }
 
+#workspaces .item:hover {
+    box-shadow: inset 0 -3px;
+}
+
+
+/* -- custom: power menu -- */
+
 .popup-power-menu #header {
-    color: white;
     font-size: 1.4em;
-    border-bottom: 1px solid white;
     padding-bottom: 0.4em;
-    margin-bottom: 0.8em;
+    margin-bottom: 0.6em;
+    border-bottom: 1px solid @color_border
 }
 
 .popup-power-menu .power-btn {
-    color: white;
-    background-color: #2d2d2d;
-    border: 1px solid white;
+    border: 1px solid @color_border;
     padding: 0.6em 1em;
 }
 
-.popup-power-menu .power-btn + .power-btn {
-    margin-left: 1em;
+.popup-power-menu #buttons > *:nth-child(1) .power-btn {
+    margin-right: 1em;
 }
-
-.popup-power-menu .power-btn:hover {
-    background-color: #1c1c1c;
-}
-
-#clipboard * {
-    font-size: 1.8em;
-}
-
-#popup-clipboard {
-    padding: 1em;
-    color: white;
-}
-
-#popup-clipboard .item {
-    border-bottom: 1px solid #424242;
-}
-
-#popup-clipboard .btn > *:nth-child(2) {
-    padding: 10px;
-}
-
-#popup-clipboard .btn-remove {
-    background-color: #2d2d2d;
-    color: white;
-    font-size: 1.2em;
-    border-left: 1px solid #424242;
-}
-
-#popup-clipboard .btn-remove:hover {
-    color: #fcc;
-}
\ No newline at end of file