Radio

modules/home/wayland/apps/eww/bar/css/_colors.scss

@@ -26,4 +26,6 @@ $border-radius: 8px;
 $border-width: 2px;
 
 $gaps-screen: 8px;
-$gaps-window: 4px;
+$gaps-window: 4px;
+
+$panel-font-size: 10pt;

modules/home/wayland/apps/eww/bar/css/_radio.scss

@@ -1,66 +1,90 @@
-.radio-win {
-  //margin: $gaps-screen;
-  //padding: .5em;
+
+.radio-accent { background-color: $base0D; }
+
+// Now playing
+.radio-now-playing {
+  margin-bottom: 8pt;
 }
 
-.album_art, .station_art {
+.radio-art {
   background-repeat: no-repeat;
   @include border-radius;
+  @include background-base2;
+  min-width: 72px;
+  min-height: 72px;
 }
 
-.album_art {
-  background-size: 240px;
-  min-height: 240px;
-  min-width: 240px;
-  margin: $gaps-screen;
-}
-
-.song {
-  @include color-accent;
-  font-size: 24px;
-  font-weight: bold;
-  margin: 20px 0 0;
-}
-
-.artist {
-  color: $base0E;
-  font-size: 16px;
-  font-weight: normal;
-  margin: 0 0 $gaps-screen;
-}
-
-.btn_bar {
+.radio-art-icon {
+  font-size: 2em;
   @include color-body;
-  font-size: 20px;
+}
+
+.radio-song {
+  font-size: 0.88em;
   font-weight: bold;
-  margin: $gaps-screen 0;
+  @include color-base;
+  margin-bottom: 2pt;
 }
 
-.btn_play {
-  font-size: 48px;
-  font-weight: bold;
-  margin: 0 12px;
-
-  &:hover { @include color-base; }
+.radio-artist {
+  font-size: 0.74em;
+  @include color-body;
 }
 
-.station_list {
-  border-right: $border-width solid $base03;
-  margin-right: $gaps-screen;
+// Controls
+.radio-controls {
+  margin-top: 6pt;
 }
 
-.station_art {
-  background-size: 50px;
-  min-height: 50px;
-  min-width: 50px;
-  margin: $gaps-window;
-  margin-right: $gaps-screen;
-  @include background-base;
-  border: $border-width solid $base00;
-
-  &:hover { border-color: $base04; }
+.radio-ctrl-btn {
+  font-size: 2em;
+  padding: 4pt 20pt;
+  @include border-radius;
+  @include color-body;
+  &:hover { @include background-active; @include color-base; }
 }
 
-.station_sel {
-  border-color: $base03;
+// Station list
+.station-list {}
+
+scrollbar {
+  background-color: transparent;
+  border: none;
+  min-width: 6px;
+}
+scrollbar trough {
+  @include background-base2;
+  @include border-radius;
+  min-width: 6px;
+}
+scrollbar slider {
+  background-color: $base04;
+  @include border-radius;
+  min-width: 6px;
+  min-height: 20px;
+  &:hover { background-color: $base05; }
+}
+
+.station-row {
+  padding: 4pt 3pt;
+  @include border-radius;
+  &:hover { @include background-base2; }
+}
+
+.station-row-active {
+  .station-name { @include color-accent; }
+}
+
+.station-icon {
+  background-repeat: no-repeat;
+  @include border-radius;
+  @include background-base2;
+  min-width: 28px;
+  min-height: 28px;
+  margin-right: 8pt;
+}
+
+.station-name {
+  font-size: 0.76em;
+  @include color-body;
 }

modules/home/wayland/apps/eww/bar/css/_sys.scss

@@ -7,7 +7,7 @@
 .cpubar, .gpubar, .membar, .batbar { @include background-base2; margin: $gaps-window 0; }
 
 // Window chrome
-.sys-win            { padding: 10pt; }
+.sys-win            { padding: 10pt; font-size: $panel-font-size; }
 .sys-section        { margin-bottom: 0; }
 .sys-section-header { margin-bottom: 10pt; }
 
@@ -48,7 +48,7 @@
 .ram-ring                      { color: $base08; }
 .swap-ring                     { color: $base09; }
 
-// Ring margins — freq rings use larger margins for concentric overlay effect
+// Ring margins - freq rings use larger margins for concentric overlay effect
 .cpu-usage-ring, .gpu-ring { margin: 3pt; }
 .ram-ring, .bat-ring       { margin: 4pt; }
 .swap-ring                 { margin: 3.5pt; }