swaync: re-theme (pink/black)

hosts/common/programs/swaynotificationcenter/style.css

@@ -1,26 +1,96 @@
-/* these color definitions are used by the built-in style */
-/* noti-bg defaults `rgb(48, 48, 48)` and is the default button/slider/grid background */
-@define-color noti-bg rgb(36, 36, 36);
-@define-color noti-bg-darker rgb(24, 24, 24);
+/* foreground (text)/background */
+@define-color fg0       #d8d8d8;
+@define-color fg1       #ffffff;
+@define-color bg0       #130c0c;
+@define-color bg1       #1c1716;
+/* green accents */
+@define-color accent-g0 #1f5e54;
+@define-color accent-g1 #418379;
+@define-color accent-g2 #5b938a;
+/* red accents */
+@define-color accent-r0 #c96262;
+@define-color accent-r1 #d27871;
+@define-color accent-r2 #ff8080;
+/* light (teal-white) accents */
+@define-color accent-l0 #e1f0ef;
+@define-color accent-l1 #f9fffc;
 
-/* avoid black-on-black text that the default style ships */
-window {
-  color: rgb(255, 255, 255);
+* {
+  /* disable box shadows on e.g. buttons, sliders, as they tend to just look like graphical glitches */
+  box-shadow: 0 0;
+  border-width: 0px;
+  background: none;
+}
+.control-center {
+  background-color: alpha(@bg1, 0.95);
 }
 
-/* window behind entire control center. defaults to 25% opacity. */
 .blank-window {
-  background: rgba(0, 0, 0, 0.5);
+  /* dim the entire screen, not just what's behind the control center */
+  background: alpha(@bg0, 0.2);
+}
+
+button {
+  border-width: 2px;
+  border-color: alpha(@bg1, 0.9);
+  color: @fg0;
+  background-color: @bg0;
+}
+button:checked {
+  color: @fg1;
+  background-color: @accent-r1;
+  border-color: alpha(@bg1, 0.1);
+}
+
+.widget-mpris > .horizontal > button {
+  background: none;
+  border: none;
 }
 
 .widget-buttons-grid button.toggle {
   /* text color for inactive buttons, and "Clear All" button.*/
-  color: rgb(172, 172, 172);
   /* padding defaults to 16px; tighten, so i can squish it all onto one row */
   padding-left: 0px;
   padding-right: 0px;
 }
-.widget-buttons-grid button.toggle:checked {
-  color: rgb(255, 255, 255);
-  background-color: rgb(0, 110, 190);
+
+.widget-buttons-grid, .widget-backlight, .widget-volume {
+  /* default padding is 8px: tighten */
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+
+/* hierarchy is .horizontal > {label, scale > contents > trough > { slider, highlight } } */
+scale {
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+scale trough {
+  padding-left: 9px;
+  padding-right: 9px;
+  border-radius: 9px;
+  background: @bg0;
+}
+scale highlight {
+  border-radius: 9px;
+  margin: 0px;
+  margin-left: -9px;
+  background: @accent-r1;
+}
+scale slider {
+  margin-top: -3px;
+  margin-bottom: -3px;
+  background: @accent-l1;
+  min-height: 25px;
+  min-width: 25px;
+}
+switch {
+  background: @bg0;
+}
+switch:checked {
+  background: @accent-r1;
+}
+switch slider {
+  background: @accent-l1;
 }