Merge pull request #8 from matthis-k/main

Add some support for more swaync features

src/_theme.scss

@@ -5,6 +5,21 @@
   transition: 200ms;
 }
 
+trough highlight {
+    background: $text;
+}
+
+scale trough {
+    margin: 0rem 1rem;
+    background-color: $surface0;
+    min-height: 8px;
+    min-width: 70px;
+}
+
+slider {
+    background-color: $blue;
+}
+
 .floating-notifications.background .notification-row .notification-background {
   box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.8), inset 0 0 0 1px $surface0;
   border-radius: 12.6px;
@@ -90,7 +105,7 @@
   padding: 14px;
 }
 
-.control-center .widget-title {
+.control-center .widget-title>label {
   color: $text;
   font-size: 1.3em;
 }
@@ -180,6 +195,10 @@
   background-color: $maroon;
 }
 
+.close-button {
+  border-radius: 6.3px;
+}
+
 .control-center .notification-row .notification-background .close-button:hover {
   background-color: $red;
   color: $base;
@@ -202,16 +221,6 @@
   color: $text;
 }
 
-progressbar,
-progress,
-trough {
-  border-radius: 12.6px;
-}
-
-progressbar {
-  box-shadow: inset 0 0 0 1px $surface1;
-}
-
 .notification.critical progress {
   background-color: $red;
 }
@@ -221,14 +230,6 @@ progressbar {
   background-color: $blue;
 }
 
-trough {
-  background-color: $surface0;
-}
-
-.control-center trough {
-  background-color: $surface1;
-}
-
 .control-center-dnd {
   margin-top: 5px;
   border-radius: 8px;
@@ -267,4 +268,79 @@ trough {
   background: $surface1;
   border-radius: 8px;
   border: 1px solid $overlay0;
-}
+}
+
+.widget-mpris .widget-mpris-player {
+    background: $surface0;
+    padding: 7px;
+}
+
+.widget-mpris .widget-mpris-title {
+    font-size: 1.2rem;
+}
+
+.widget-mpris .widget-mpris-subtitle {
+    font-size: 0.8rem;
+}
+
+.widget-menubar>box>.menu-button-bar>button>label {
+    font-size: 3rem;
+    padding: 0.5rem 2rem;
+}
+
+.widget-menubar>box>.menu-button-bar>:last-child {
+    color: $red;
+}
+
+.power-buttons,
+.powermode-buttons,
+.screenshot-buttons {
+
+}
+.power-buttons button:hover,
+.powermode-buttons button:hover,
+.screenshot-buttons button:hover {
+    background: $surface0;
+}
+
+.control-center .widget-label>label {
+  color: $text;
+  font-size: 2rem;
+}
+
+.widget-buttons-grid {
+    padding-top: 1rem;
+}
+
+.widget-buttons-grid>flowbox>flowboxchild>button label {
+    font-size: 2.5rem;
+}
+
+.widget-volume {
+    padding-top: 1rem;
+}
+
+.widget-volume label {
+    font-size: 1.5rem;
+    color: $sapphire;
+}
+
+.widget-volume trough highlight {
+    background: $sapphire;
+}
+
+.widget-backlight trough highlight {
+    background: $yellow;
+}
+.widget-backlight scale {
+    margin-right: 1rem;
+}
+
+.widget-backlight label {
+    font-size: 1.5rem;
+    color: $yellow;
+}
+
+.widget-backlight .KB {
+    padding-bottom: 1rem;
+}