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;
 }
 
 /*