✨ feat(eww): a lot of stuff fixed, prettier active window and media widgets

eww/styles/bar.scss

@@ -1,7 +1,13 @@
 
+$foreground: lighten($color: $foreground, $amount: 10);
+
 .bar {
     background: transparent;
     padding: 4px;
+
+    & label {
+        font-weight: 500;
+    }
 }
 
 /* Styles .widgets-[left/center/right] */
@@ -28,14 +34,15 @@
 button {
     padding: 6px 10px;
     border-radius: 12px;
+    background: none;
 }
 
 button:hover {
-    background: darken($color: $color1, $amount: 5);
+    background: $color3;
 }
 
 button:active {
-    background: darken($color: $color1, $amount: 20)
+    background: darken($color: $color3, $amount: 10);
 }
 
 button label {
@@ -103,12 +110,9 @@ menu {
 }
 
 .distro-logo {
-    padding: 0 14px;
-
-    & > button {
-        padding: 0;
-        margin: 0;
-    }
+    padding: 0;
+    padding-left: 12px;
+    padding-right: 6px;
 
     & > label {
         font-size: 15px;
@@ -124,25 +128,72 @@ menu {
     }
 }
 
+
 .mediaplayer {
     border-radius: 12px;
     box-shadow: inset 0 0 0px 2px $color3;
     padding: 0 4px;
+    padding-right: 0px;
 
-    & > label {
+    & label.media-title,
+    & label.media-artist {
         margin: 0 4px;
         padding-right: 5px;
+        color: $foreground;
+        font-size: inherit;
+
+        &.media-title {
+            margin-top: 6px;
+            margin-bottom: 6px;
+            border-right: .5px solid darken($color: $foreground, $amount: 20);
+        }
+    }
+
+    &.revealed label.media-artist {
         border-right: 2px solid $color3;
     }
 
-    & > button {
+    & button {
         padding: 0 7px;
-        border-radius: 4px;
-        margin: 2px 2px;
+        border-radius: 0px;
     }
 }
 
+.window {
+    padding: 0 4px;
+    padding-right: 6px;
+
+    & > .window-icon {
+        padding-right: 24px;
+        margin-right: 4px;
+        background-position: center;
+        background-size: 24px;
+        background-repeat: no-repeat;
+    }
+
+    & > label.window-class {
+        font-size: 10px;
+        font-family: monospace;
+        color: darken($color: $foreground, $amount: 20);
+    }
+
+    & > label.window-title {
+        margin-top: -2px;
+        font-size: inherit;
+        color: $foreground;
+    }
+}
+
+.network {
+    padding-left: 10px;
+    padding-right: 7px;
+}
+
 .notifications button {
-    padding-left: 11px;
-    padding-right: 11px;
+    padding-left: 12px;
+    padding-right: 10px;
+
+    &.open, &:hover {
+        background: $color3;
+    }
 }

eww/styles/calendar.scss

@@ -1,9 +1,30 @@
-.widget-calendar {
-    padding: 24px;
+
+.calendar-box {
+    padding: 12px;
     background: rgba($background, 0.6);
     border-radius: 16px;
 
-    & > .title {
-        background: $color1;
+    & > label.calendar-header {
+        font-size: 15px;
+        font-weight: 700;
+    }
+
+    .month-calendar {
+        transition: all 120ms linear;
+        border-radius: 8px;
+        padding: 6px;
+        font-weight: 600;
+
+        & > .header {
+            border-radius: 6px;
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+            border-bottom: solid .5px gray;
+        }
+
+        // Selected day / Current day
+        &:selected {
+            background: darken($color: $color3, $amount: 20);
+        }
     }
 }

eww/styles/control-center.scss

@@ -1,5 +1,9 @@
 
-.control-center {
-    background: green;
+// window.control-center {}
+
+box.cc {
+    margin: 16px;
+    background: rgba($background, .85);
     border-radius: 16px;
+    border: 2px solid darken($color: $color3, $amount: 20);
 }