huge updates

styles/bar.css

@@ -51,18 +51,87 @@
 /*
  * ── battery ───────────────────────────────────────────────────────────
 */
+/*#battery {*/
+/*  background-color: @surfaceContainer;*/
+/*  border-radius: 100px;*/
+/*  padding: 2px 10px 2px 10px;*/
+/*}*/
+/**/
+/*#battery label {*/
+/*  font-weight: 600;*/
+/*}*/
+/**/
+/*#battery-label {*/
+/*  margin-right: 5px;*/
+/*}*/
+
 #battery {
   background-color: @surfaceContainer;
-  border-radius: 100px;
-  padding: 2px 10px 2px 10px;
+  padding: 4px;
+  border-radius: 16px;
+  margin-top: 4px;
 }
 
-#battery label {
-  font-weight: 600;
+#battery-circle {
+  color: @surfaceBright;
+  border: 3px solid @primary;
 }
 
-#battery-label {
-  margin-right: 5px;
+#battery-circle.alert {
+  border: 2px solid @error-dim;
+}
+
+#battery-icon {
+  font-size: 20px;
+}
+
+#battery-icon.alert {
+  color: @error-dim;
+}
+
+#battery-save,
+#battery-balanced,
+#battery-performance {
+  border-radius: 12px;
+  min-width: 28px;
+  min-height: 28px;
+}
+
+#battery-save-label,
+#battery-balanced-label,
+#battery-performance-label {
+  color: @outline;
+  font-size: 20px;
+}
+
+#battery-save:hover,
+#battery-balanced:hover,
+#battery-performance:hover {
+  background-color: @surfaceBright;
+}
+
+#battery-save:hover #battery-save-label,
+#battery-balanced:hover #battery-balanced-label,
+#battery-performance:hover #battery-performance-label {
+  color: @primary;
+}
+
+#battery-save.active,
+#battery-balanced.active,
+#battery-performance.active {
+  background-color: @primary;
+}
+
+#battery-save.active #battery-save-label,
+#battery-balanced.active #battery-balanced-label,
+#battery-performance.active #battery-performance-label {
+  color: @shadow;
+}
+
+#battery-level {
+  color: @primary;
+  font-weight: bold;
+  margin: 0 4px;
 }
 
 /*

styles/dashboard.css

@@ -0,0 +1,143 @@
+#buttons-grid {
+  min-height: 52px;
+}
+
+#network-button,
+#bluetooth-button,
+#night-mode-button,
+#caffeine-button,
+#dark-mode-button,
+#power-profile-button {
+  border-radius: 20px;
+}
+
+#network-button,
+#bluetooth-button {
+  background-color: unset;
+  padding: 0;
+}
+
+#night-mode-button,
+#caffeine-button,
+#dark-mode-button,
+#power-profile-button {
+  background-color: @primary;
+  padding: 0 10px;
+}
+
+#night-mode-button.disabled,
+#caffeine-button.disabled,
+#dark-mode-button.disabled,
+#power-profile.disabled {
+  background-color: @surface;
+}
+
+#network-status-button,
+#network-menu-button,
+#bluetooth-status-button,
+#bluetooth-menu-button {
+  background-color: @primary;
+  padding: 0 8px;
+}
+
+#network-status-button:hover,
+#network-menu-button:hover,
+#bluetooth-status-button:hover,
+#bluetooth-menu-button:hover,
+#bluetooth-button:hover,
+#night-mode-button:hover,
+#caffeine-button:hover,
+#dark-mode-button:hover,
+#power-profile-button:hover {
+  background-color: mix(@onPrimary, @primary, 0.7);
+}
+
+#network-status-button.disabled,
+#network-menu-button.disabled,
+#bluetooth-status-button.disabled,
+#bluetooth-menu-button.disabled,
+#dark-mode-button.disabled,
+#power-profile-button.disabled {
+  background-color: @surface;
+}
+
+#network-status-button.disabled:hover,
+#network-menu-button.disabled:hover,
+#bluetooth-status-button.disabled:hover,
+#bluetooth-menu-button.disabled:hover,
+#night-mode-button.disabled:hover,
+#caffeine-button.disabled:hover,
+#dark-mode-button.disabled:hover,
+#power-profile-button.disabled:hover {
+  background-color: @surfaceBright;
+}
+
+#network-status-button,
+#bluetooth-status-button,
+#dark-mode-status-button,
+#power-profile-status-button {
+  border-radius: 20px 0 0 20px;
+}
+
+#network-menu-button,
+#bluetooth-menu-button {
+  border-radius: 0 20px 20px 0;
+}
+
+#network-menu-label,
+#bluetooth-menu-label,
+#dark-mode-label,
+#power-profile-label {
+  font-size: 16px;
+}
+
+#network-menu-label.disabled,
+#bluetooth-menu-label.disabled,
+#dark-mode-label.disabled,
+#power-profile-label.disabled {
+  color: @outline;
+}
+
+#network-label,
+#bluetooth-label,
+#night-mode-label,
+#caffeine-label,
+#dark-mode-label,
+#power-profile-label {
+  color: @shadow;
+  font-size: 14px;
+  font-weight: bold;
+  margin-bottom: -4px;
+}
+
+#network-label.disabled,
+#bluetooth-label.disabled,
+#night-mode-label.disabled,
+#caffeine-label.disabled,
+#dark-mode-label.disabled,
+#power-profile-label.disabled {
+  color: @outline;
+}
+
+#network-ssid,
+#bluetooth-status,
+#night-mode-status,
+#caffeine-status,
+#dark-mode-status,
+#power-profile-status {
+  color: @surfaceBright;
+  font-size: 12px;
+}
+
+#network-ssid.disabled,
+#bluetooth-status.disabled,
+#night-mode-status.disabled,
+#caffeine-status.disabled,
+#dark-mode-status.disabled,
+#power-profile-status.disabled {
+  color: @outline;
+}
+
+#power-profile-button.balanced-profile {
+  background-color: transparent;
+}

styles/launcher.css

@@ -1,6 +1,9 @@
 /*
  * ── launcher ──────────────────────────────────────────────────────────
 */
+#dashboard {
+  min-height: 100px;
+}
 
 #launcher {
   margin: 18px;
@@ -31,12 +34,12 @@
 
 #launcher-content.bluetooth {
   min-height: 464px;
-  min-width: 464px;
+  min-width: 485px;
 }
 
 #launcher-content.wifi {
   min-height: 464px;
-  min-width: 464px;
+  min-width: 485px;
 }
 
 #launcher-content.power {
@@ -49,7 +52,7 @@
 }
 
 #launcher-content {
-  min-width: 420px;
+  min-width: 485px;
 }
 
 #app-launcher,
@@ -63,16 +66,6 @@
   transition: all 0.25s cubic-bezier(0.5, 0.25, 0, 1);
 }
 
-#toggle-launcher-button {
-  background-color: @secondaryContainer;
-  color: @onSecondaryContainer;
-  margin: 11px;
-  margin-left: 0px;
-  min-width: 48px;
-  min-height: 44px;
-  border-radius: 100%;
-}
-
 #clear-launcher-button {
   background-color: @secondaryContainer;
   color: @onSecondaryContainer;

styles/main.css

@@ -3,6 +3,7 @@
 @import "./notification.css";
 @import "./osd.css";
 @import "./launcher.css";
+@import "./dashboard.css";
 
 * {
   all: unset;
@@ -61,9 +62,8 @@ tooltip label {
 /*
  * ── icon ──────────────────────────────────────────────────────────────
 */
-
-#material_icon,
-#material_icon * {
+#material-icon,
+#material-icon * {
   all: unset;
   font-family: "Material Symbols Outlined", "Material Symbols Sharp";
 }

styles/notification.css

@@ -20,6 +20,8 @@
 
 #notification .close-button {
   border-radius: 100px;
+  min-width: 40px;
+  min-height: 40px;
 }
 
 #notification .close-button:hover {
@@ -42,6 +44,7 @@
   border-radius: 100px;
   background-color: transparent;
 }
+
 #notification-action-buttons button:hover {
   background-color: lighter(@outlineVariant);
 }