updates

styles/components.css

@@ -1,3 +1,29 @@
+/*
+ * ── language indicator ────────────────────────────────────────────────
+*/
+
+#language {
+  background-color: var(--surface);
+  padding: 8px;
+}
+
+#language.invert {
+  border-radius: 12px;
+}
+
+#lang-label {
+  font-weight: bold;
+}
+
+#lang-label.icon {
+  color: var(--primary);
+  font-size: 20px;
+}
+
+/*
+ * ── battery ───────────────────────────────────────────────────────────
+*/
+
 #battery {
   background-color: var(--surface);
   padding: 4px;
@@ -24,51 +50,24 @@
   color: var(--red-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: var(--outline);
-  font-size: 20px;
-}
-
-#battery-save:hover,
-#battery-balanced:hover,
-#battery-performance:hover {
-  background-color: var(--surface-bright);
-}
-
-#battery-save:hover #battery-save-label,
-#battery-balanced:hover #battery-balanced-label,
-#battery-performance:hover #battery-performance-label {
-  color: var(--primary);
-}
-
-#battery-save.active,
-#battery-balanced.active,
-#battery-performance.active {
-  background-color: var(--primary);
-}
-
-#battery-save.active #battery-save-label,
-#battery-balanced.active #battery-balanced-label,
-#battery-performance.active #battery-performance-label {
-  color: var(--shadow);
-}
-
 #battery-level {
   color: var(--primary);
   font-weight: bold;
   margin: 0 4px;
 }
 
+#battery-circle.power-saver {
+  border: 3px solid var(--green);
+}
+
+#battery-circle.performance {
+  border: 3px solid var(--red);
+}
+
+/*
+ * ── metrics ───────────────────────────────────────────────────────────
+*/
+
 #metrics {
   background-color: var(--surface);
   padding: 4px;
@@ -103,9 +102,14 @@
   min-width: 4px;
 }
 
+/*
+ * ── datetime ──────────────────────────────────────────────────────────
+*/
+
 #date-time {
   background-color: var(--surface);
   padding: 8px;
+  font-weight: bold;
 }
 #date-time.vertical {
   padding: 8px 0;
@@ -115,6 +119,10 @@
   border-radius: 12px;
 }
 
+/*
+ * ── tray ──────────────────────────────────────────────────────────────
+*/
+
 #tray {
   background-color: var(--surface);
   padding: 8px;
@@ -144,3 +152,128 @@ menu > menuitem:hover {
 menu > menuitem:hover > label {
   color: var(--shadow);
 }
+
+/*
+ * ── music player ──────────────────────────────────────────────────────────
+*/
+
+#music-player {
+  background-color: var(--surface);
+  padding: 4px;
+}
+
+#music-player.invert {
+  border-radius: 12px;
+}
+
+/* Track info styles */
+#music-track {
+  color: var(--primary);
+  font-weight: bold;
+  font-size: 12px;
+}
+
+/* Control buttons base styles */
+#music-prev,
+#music-next {
+  background: none;
+  border: none;
+  padding: 4px;
+}
+
+#music-prev:hover,
+#music-next:hover {
+  background-color: var(--surface-bright);
+}
+
+#music-prev:active,
+#music-next:active {
+  background-color: var(--primary);
+}
+
+#music-prev label,
+#music-next label {
+  color: var(--primary);
+  font-size: 14px;
+}
+
+#music-prev:hover label,
+#music-next:hover label {
+  color: var(--primary);
+}
+
+#music-prev:active label,
+#music-next:active label {
+  color: var(--shadow);
+}
+
+/* Play/Pause button styling */
+#music-play-pause {
+  background-color: var(--surface);
+  border-radius: 12px;
+  padding: 6px;
+  border: none;
+}
+
+#music-play-pause label {
+  color: var(--primary);
+  font-size: 18px;
+}
+
+#music-play-pause:hover {
+  background-color: var(--surface-bright);
+}
+
+#music-play-pause:hover label {
+  color: var(--primary);
+}
+
+#music-play-pause:active {
+  background-color: var(--primary);
+}
+
+#music-play-pause:active label {
+  color: var(--shadow);
+}
+
+/* Player indicators container */
+#music-player-indicators {
+  padding: 4px;
+}
+
+/* Player indicator buttons */
+#music-player-indicator-button {
+  background: none;
+  border: none;
+  padding: 2px;
+  border-radius: 6px;
+}
+
+#music-player-indicator-button:hover {
+  background-color: var(--surface-bright);
+}
+
+#music-player-indicator-button:active {
+  background-color: var(--primary);
+}
+
+/* Player indicator labels */
+#music-player-indicator {
+  color: var(--surface-bright);
+  font-size: 12px;
+}
+
+#music-player-indicator-active {
+  color: var(--primary);
+  font-size: 12px;
+  font-weight: bold;
+}
+
+#music-player-indicator-button:hover #music-player-indicator {
+  color: var(--primary);
+}
+
+#music-player-indicator-button:active #music-player-indicator,
+#music-player-indicator-button:active #music-player-indicator-active {
+  color: var(--shadow);
+}