style(eww): Initial design

.config/eww/eww.scss

@@ -1,3 +1,4 @@
+// vi: et ts=4 sw=4
 * {
     all: unset;
     font-family: 'monospace';
@@ -6,17 +7,28 @@
     color: #FFF;
 }
 
+// >> bg
+$bg-100: #434758;
+$bg-300: #2A3039;
+$bg-500: #0E1418; // base
+
+$bg-radius: 8px;
+$bg-margin: 4px;
+// << bg
+
 /** tooltip!! **/
-tooltip.background {
+tooltip {
+    .background {
         background-color: #0f0f17;
         font-size: 18;
         border-radius: 10px;
         color: #bfc9db;
     }
 
-tooltip label {
+    label {
         margin: 6px;
     }
+}
 
 .csd.background.popup { /* SysTray popup */
     background-color: black;
@@ -25,18 +37,44 @@ tooltip label {
         padding-bottom: 8px;
     }
 
+    menuitem {
+        -gtk-dpi: 16;
+    }
+
     menuitem:hover {
         background-color: red;
     }
 }
 
 .bar {
-	background-color: rgba(43, 48, 59, 1);
+    background: $bg-500;
+}
+
+.middle {
+    .clock label {
+        background: $bg-300;
+        margin: $bg-margin 0px;
+        padding: 0 13px;
+        border-radius: $bg-radius;
+    }
 }
 
 .end {
     > box {
-		padding: 0 8px;
+
+        widget > image {
+            background: $bg-300;
+            margin: $bg-margin 0px;
+            padding: 0 6px;
+        }
+
+        widget:first-child > image {
+            border-radius: $bg-radius 0px 0px $bg-radius;
+        }
+
+        widget:last-child > image {
+            border-radius: 0px $bg-radius $bg-radius 0px;
+        }
 
         > label:first-child {
             padding-right: 16px;
@@ -52,20 +90,29 @@ tooltip label {
     }
 }
 
-.workspaces button {
+.workspaces {
+    button:first-child label {
+        border-radius: $bg-radius 0px 0px $bg-radius;
+    }
+
+    button:last-child label {
+        border-radius: 0px $bg-radius $bg-radius 0px;
+    }
+
+    button {
+        min-height: 13px;
+
         label {
+            background: $bg-300;
+            margin: $bg-margin 0px;
             padding: 0 13px;
         }
 
-	&:hover {
-		background: rgba(0, 0, 0, 0.2);
-	}
-
-	&.active {
-		background: rgba(0, 0, 0, 0.4);
-	}
-
         &:hover, &.active {
-		box-shadow: inset 0 -3px #FAA14F;
+            label {
+                background: #1CA2DA;
+                color: white;
+            }
+        }
     }
 }

.config/eww/eww.yuck

@@ -29,7 +29,8 @@
     (workspaces))
 
 (defwidget middle []
-    (clock))
+    (box :class "middle"
+        (clock)))
 
 (defwidget end []
     (box :halign "end"
@@ -46,7 +47,7 @@
                 id))))
 
 (defwidget clock []
-    (eventbox :onclick `eww update dtfull=${!dtfull}`
+    (eventbox :class "clock" :onclick `eww update dtfull=${!dtfull}`
         (label :text {dtfull ? datetime.full : datetime.date})))
 
 (defwidget pair [icon text]