✨ a lot of changes and new stuff! started using mako

eww/styles/control-center.scss

@@ -1,14 +1,16 @@
-
 box.cc {
-    margin: 16px;
+    margin-top: 8px;
+    margin-bottom: 14px;
+    margin-left: 14px;
     background: rgba($background, .85);
-    border-radius: 16px;
-    border: 2px solid darken($color: $color3, $amount: 20);
+    border-top-left-radius: 24px;
+    border-bottom-left-radius: 24px;
     padding: 18px;
+    box-shadow: 0 5 8px 1px black;
 }
 
-.quickactions {
-    margin-bottom: 10px;
+.top-bar {
+    margin-bottom: 15px;
 
     & label {
         &.hostname {
@@ -37,7 +39,7 @@ box.cc {
     }
 }
 
-.control-center .mediaplayer {
+.big-media {
     padding: 16px;
     margin: 6px 0;
     border-radius: 18px;
@@ -70,7 +72,7 @@ box.cc {
             }
         }
 
-        & > .media-controls {
+        & > .controls {
             padding: 0px;
 
             & > button {
@@ -87,7 +89,7 @@ box.cc {
         }
     }
 
-    &.mediaplayer-album-bg {
+    &.album-bg {
         box-shadow: inset 0 0 0 100px rgba($background, .6);
         background-size: cover;
     }
@@ -104,9 +106,9 @@ box.cc {
                 & > .top {
                     border-top-left-radius: inherit;
                     border-top-right-radius: inherit;
-                    background: darken($color: $color1, $amount: 5);
+                    background: darken($color: $color1, $amount: 7);
                     border-bottom: .5px solid rgba(darken($color: $foreground, $amount: 15), .3);
-                    padding: 2px 6px;
+                    padding: 5px 6px;
 
                     & > .app-info {
                         & .app-icon {
@@ -117,12 +119,13 @@ box.cc {
                 }
 
                 & .content {
-                    padding: 6px;
-                    padding-top: 0;
+                    padding: 8px;
+                    padding-top: 0px;
 
                     & > .image {
                         border-radius: 16px;
                         margin-right: 6px;
+                        margin-top: 6px;
                         background-size: cover;
                         background-repeat: no-repeat;
                         background-position: center 0;
@@ -160,46 +163,52 @@ box.cc {
     }
 }
 
-.toggle-grid {
-    .grid-toggle .toggle {
-        margin: 0 6px;
-
-        &:first-child {
-            margin-left: 0;
-        }
-
-        &:last-child {
-            margin-right: 0;
-        }
-    }
-}
-
-.grid-toggle {
+.toggles {
     
-    &.active {
-        background: darken($color: $color1, $amount: 2);
+    margin-bottom: 10px;
+    
+    & > .toggle-checkbox:first-child {
+        margin-left: 0;
     }
 
-    & > .toggle {
-        padding: 8px;
-        border-radius: 18px;
+    & > .toggle-checkbox:last-child {
+        margin-right: 0;
+    }
 
-        label {
-            font-family: "Cantarell", "0xProto Nerd Font";
+    & .toggle-checkbox {
+        margin: 2px;
+
+        &:hover {
+            & > box {
+                background: darken($color: $color2, $amount: 15);
+            }
         }
 
-        .icon {
-            margin-right: 6px;
-            font-size: 16px;
+        &:checked {
+            & > box {
+                background: darken($color: $color1, $amount: 12);
+            }
         }
 
-        label.header {
-            font-weight: 700;
-            font-size: 12px;
+        & > *:not(box) {
+            color: transparent;
         }
 
-        label.body {
-            font-size: 11px;
+        & > .toggle {
+            background: darken($color: $foreground, $amount: 65);
+            border-radius: 16px;
+            padding: 16px;
+            margin-left: -16px; // This covers the checkbox space, hiding the check thing
+
+            .icon {
+                font-size: 14px;
+                padding-right: 5px;
+            }
+
+            .label {
+                font-size: 12px;
+                font-weight: 600;
+            }
         }
     }
 }