✨ feat(swaync): make slider dot visible, better slider transitions

swaync/style.css

@@ -1,50 +1,53 @@
 
 @import "_colors.css";
 
-/* All */
 
 * {
-  all: unset;
+    all: unset;
-  font-size: 14px;
+    font-size: 14px;
-  font-family: "0xProto Nerd Font Regular", otf-font-awesome, Cantarell, sans-serif;
+    font-family: "0xProto Nerd Font Regular", otf-font-awesome, Cantarell, sans-serif;
-  transition: 160ms ease-in;
+    transition: 160ms ease-in;
 }
 
-scale trough {
+tooltip {
-  margin: 0rem 1rem;
+    background: shade(@background-alt, .8);
-  background-color: @background-alt;
+    border: .5px solid shade(@highlight, .8);
-  min-height: 8px;
-  min-width: 70px;
-}
-
-trough {
-    border-radius: 4px;
-}
-
-trough:hover {
-    padding: 4px;
     border-radius: 6px;
 }
 
-trough > *:active {
+trough { /* slider's background */
+    margin: 0rem 1rem;
+    background-color: @background-alt;
+    min-height: 8px;
+    min-width: 70px;
+    border-radius: 8px;
+}
+
+trough:hover, trough:active {
+    padding: 4px;
+    border-radius: 10.5px;
+}
+
+trough slider { /* slider's dot indicator */
+    background: shade(@yellow, .72);
+    border-radius: 50%;
+    padding: 8px;
+    box-shadow: inset 0 0 1px .5px @background-alt;
+}
+
+trough slider:active {
     background: @active;
-    padding: 6px;
 }
 
-trough highlight {
+trough highlight { /* slider bar */
-    padding: 5px;
+    border-top-left-radius: 8px;
-    border-radius: 4px;
+    border-bottom-left-radius: 8px;
-    background: @highlight;
+    background: shade(@highlight, .9);
 }
 
-slider {
+/* Notifications (Not from control center) */
-  background: @highlight;
-  border-radius: 50%;
-}
 
-/* Notifications */
+.floating-notifications .notification-row .notification-background {
-
-.floating-notifications.background .notification-row .notification-background {
   box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.8), inset 0 0 0 1px #313244;
   border-radius: 16px;
   margin: 18px;
@@ -53,124 +56,99 @@ slider {
   padding: 0;
 }
 
-.floating-notifications.background .notification-row .notification-background .notification {
+.notification-row .notification-background .notification {
   padding: 7px;
   border-radius: 16px;
 }
 
-.floating-notifications.background .notification-row .notification-background .notification.critical {
+.notification-row .notification-background .notification.critical {
-  box-shadow: inset 0 0 7px 0 #f38ba8;
+    border: 2px solid shade(@red, .7);
 }
 
-.floating-notifications.background .notification-row .notification-background .notification .notification-content {
+.notification-row .notification-background .notification .notification-content {
   margin: 7px;
 }
 
-.floating-notifications.background .notification-row .notification-background .notification .notification-content .summary {
+.notification-row .notification-background .notification .notification-content .summary {
-  color: #cdd6f4;
+  color: @text;
 }
 
-.floating-notifications.background .notification-row .notification-background .notification .notification-content .time {
+.notification-row .notification-background .notification .notification-content .time {
   color: @subtext1;
 }
 
-.floating-notifications.background .notification-row .notification-background .notification .notification-content .body {
+.notification-row .notification-background .notification .notification-content .body {
-  color: #cdd6f4;
+  color: @text;
 }
 
-.floating-notifications.background .notification-row .notification-background .notification > *:last-child > * {
+.notification-row .notification-background .notification > *:last-child > * {
   min-height: 3.4em;
 }
 
-.floating-notifications.background .notification-row .notification-background .notification > *:last-child > * .notification-action {
+.notification-row .notification .notification-action {
-  border-radius: 14px;
+  border-radius: 16px;
-  color: #cdd6f4;
+  color: @text;
-  background-color: @highlight;
+  background-color: shade(@highlight, .5);
-  box-shadow: inset 0 0 0 1px #45475a;
+  border: .5px solid @mantle;
-  margin: 7px;
+  margin: 5px;
 }
 
-.floating-notifications.background .notification-row .notification-background .notification > *:last-child > * .notification-action:hover {
+.notification-row .notification .notification-action:hover {
-  box-shadow: inset 0 0 0 1px #45475a;
+  border: 1px solid #45475a;
-  background-color: #313244;
+  background-color: @hover;
-  color: #cdd6f4;
 }
 
-.floating-notifications.background .notification-row .notification-background .notification > *:last-child > * .notification-action:active {
+.notification-row .notification .notification-action:active {
-  box-shadow: inset 0 0 0 1px #45475a;
+  background-color: shade(@highlight, .6); 
-  background-color: #74c7ec;
+  color: @text;
-  color: #cdd6f4;
 }
 
-.floating-notifications.background .notification-row .notification-background .close-button {
+.close-button {
-  margin: 7px;
+  border-radius: 8px;
-  padding: 2px;
+  margin: 6px;
-  border-radius: 6.3px;
+  padding: 2.5px;
-  color: #1e1e2e;
+  border-radius: 8px;
-  background-color: #f38ba8;
+  color: @crust;
+  background-color: shade(@red, .85);
 }
 
-.floating-notifications.background .notification-row .notification-background .close-button:hover {
+.close-button:hover {
-  background-color: #eba0ac;
+  background-color: shade(@red, .95);
-  color: #1e1e2e;
+  color: @crust;
 }
 
-.floating-notifications.background .notification-row .notification-background .close-button:active {
+.close-button:active {
-  background-color: #f38ba8;
+  background-color: @red;
-  color: #1e1e2e;
+  color: @crust;
 }
 
-/* Control Center */
+/* Control Center Notifications */
-
-.control-center {
-  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.8), inset 0 0 0 1px #313244;
-  border-radius: 12.6px;
-  margin: 18px;
-  background: @background;
-  color: #cdd6f4;
-  padding: 1.5rem;
-}
-
-.control-center .widget-title > label {
-  color: #cdd6f4;
-  font-size: 1.5em;
-  font-weight: 600;
-}
-
-.control-center .widget-title button:hover {
-  box-shadow: inset 0 0 0 1px #45475a;
-  background-color: #585b70;
-  color: #cdd6f4;
-}
-
-.control-center .widget-title button:active {
-  box-shadow: inset 0 0 0 1px #45475a;
-  background-color: #74c7ec;
-  color: #1e1e2e;
-}
 
 .control-center .notification-row .notification-background {
   border-radius: 16px;
-  color: #cdd6f4;
+  color: @text;
-  background-color: #313244;
+  background-color: @background-alt;
-  box-shadow: inset 0 0 0 1px #45475a;
+  border: 1px solid #45475a;
   margin-top: 14px;
 }
 
 .control-center .notification-row .notification-background .notification {
-  padding: 7px;
+  padding: 10px;
 }
 
 .control-center .notification-row .notification-background .notification.critical {
-  box-shadow: inset 0 0 7px 0 #f38ba8;
+  border: 2px solid shade(@red, .8);
 }
 
 .control-center .notification-row .notification-background .notification .notification-content {
-  margin: 7px;
+  margin: 8px;
+
 }
 
 .control-center .notification-row .notification-background .notification .notification-content .summary {
   color: #cdd6f4;
+  font-size: 1.2em;
+  font-weight: 600;
 }
 
 .control-center .notification-row .notification-background .notification .notification-content .time {
@@ -185,57 +163,6 @@ slider {
   min-height: 3.4em;
 }
 
-.control-center .notification-row .notification-background .notification > *:last-child > * .notification-action {
-  border-radius: 7px;
-  color: #cdd6f4;
-  background-color: #11111b;
-  box-shadow: inset 0 0 0 1px #45475a;
-  margin: 7px;
-}
-
-.control-center .notification-row .notification-background .notification > *:last-child > * .notification-action:hover {
-  box-shadow: inset 0 0 0 1px #45475a;
-  background-color: #313244;
-  color: #cdd6f4;
-}
-
-.control-center .notification-row .notification-background .notification > *:last-child > * .notification-action:active {
-  box-shadow: inset 0 0 0 1px #45475a;
-  background-color: #74c7ec;
-  color: #cdd6f4;
-}
-
-.close-button {
-  border-radius: 8px;
-  margin: 6px;
-  padding: 2.5px;
-  border-radius: 8px;
-  color: #1e1e2e;
-  background-color: #eba0ac;
-}
-
-.control-center .notification-row .notification-background .close-button:hover {
-  background-color: #f38ba8;
-  color: #1e1e2e;
-}
-
-.control-center .notification-row .notification-background .close-button:active {
-  background-color: #f38ba8;
-  color: #1e1e2e;
-}
-
-.control-center .notification-row .notification-background:hover {
-  box-shadow: inset 0 0 0 1px #45475a;
-  background-color: #7f849c;
-  color: #cdd6f4;
-}
-
-.control-center .notification-row .notification-background:active {
-  box-shadow: inset 0 0 0 1px #45475a;
-  background-color: #74c7ec;
-  color: #cdd6f4;
-}
-
 .notification.critical progress {
   background-color: #f38ba8;
 }
@@ -245,6 +172,37 @@ slider {
   background-color: #89b4fa;
 }
 
+/* Control Center */
+
+.control-center {
+  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.8), inset 0 0 0 1px #313244;
+  border-radius: 12.6px;
+  margin: 18px;
+  background: @background;
+  color: #cdd6f4;
+  padding: 1.5rem;
+}
+
+.control-center .widget-title > label {
+  color: @text;
+  font-size: 1.5em;
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+
+.control-center .widget-title button label {
+    color: @text;
+    border: 1px solid @yellow;
+}
+
+.control-center .widget-title button:hover {
+  background-color: @hover;
+}
+
+.control-center .widget-title button:active {
+  background-color: @active;
+}
+
 .control-center-dnd {
   margin-top: 5px;
   border-radius: 8px;