control panel: fix css priority, drop blur, soften active tiles

The panel styled itself at PRIORITY_APPLICATION (600) while
~/.config/gtk-3.0/gtk.css loads at PRIORITY_USER (800) and styles plain
'button'. The user sheet won, so tile backgrounds never applied - but the
more specific '.tile.active .tile-icon { color: #0f0d17 }' did, which is why
icons rendered black on dark tiles. The panel now loads at USER + 1.

- global blur made every translucent window fuzzy, not just the panel: removed
- picom no longer re-rounds the panel; it clipped at 12px over an 18px css
  radius and chewed the corners
- active tiles are a tint plus an accent border rather than a solid accent fill
- 10px transparent gutter outside the card, 20px padding inside
- the particles tile was using a television glyph; now an atom

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Cn3dHfbgNYdbZvzb1b3GQt

.config/bspwm/picom.conf

@@ -58,6 +58,9 @@ rounded-corners-exclude = [
   "window_type = 'dock'",
   # never round a fullscreen game
   "_NET_WM_STATE@:32a *= '_NET_WM_STATE_FULLSCREEN'",
+  # the control panel draws its own rounded card; picom clipping it at a
+  # different radius made the corners look chewed
+  "class_g = 'Control-panel.py'",
 ];
 
 # The control centre redraws by relaunching rofi, so the open/close zoom and
@@ -68,15 +71,3 @@ fade-exclude = [
 animation-exclude = [
   "class_g = 'Rofi'",
 ];
-
-# Translucent surfaces over busy content read as noise without blur.
-blur-method = "dual_kawase";
-blur-strength = 6;
-blur-background = true;
-blur-background-frame = true;
-blur-background-exclude = [
-  # the particle layer is transparent on purpose; blurring it would smear
-  # the wallpaper behind it
-  "window_type = 'desktop'",
-  "class_g = 'Particles'",
-];

.config/scripts/control-panel.py

@@ -20,13 +20,16 @@ CSS = b"""
 /* Glyphs come from the Nerd Font. Without an explicit family, GTK uses the
    desktop font (Noto Sans), which lacks them, and Pango's per-glyph fallback
    picks a font that ignores the css colour - that is why icons rendered black. */
-.icon, .tile-icon, .pw, .rowbtn, .title {
+.icon, .tile-icon, .pw, .rowbtn, .title,
+.icon label, .pw label, .rowbtn label, .tile label {
     font-family: "JetBrainsMono Nerd Font", "Symbols Nerd Font", monospace;
 }
+.pw label, .rowbtn label { color: #e9eefb; }
+.pw:hover label          { color: #e9eefb; }
 
 window.panel { background-color: transparent; }
 .frame {
-    background-color: rgba(15, 13, 23, 0.82);
+    background-color: rgba(15, 13, 23, 0.88);
     border: 1px solid rgba(146, 185, 234, 0.16);
     border-radius: 18px;
 }
@@ -36,9 +39,9 @@ window.panel { background-color: transparent; }
 .section    { color: #92b9ea; font-size: 10px; font-weight: bold; letter-spacing: 1px; }
 .tile-icon  { font-size: 20px; color: #e9eefb; }
 .tile-name  { font-size: 12px; color: #e9eefb; }
-.tile.active .tile-icon,
-.tile.active .tile-name,
-.tile.active .subtle { color: #0f0d17; }
+.tile.active .tile-icon { color: #92b9ea; }
+.tile.active .tile-name { color: #e9eefb; }
+.tile.active .subtle    { color: #9dbdea; }
 
 .card {
     background-color: rgba(34, 28, 51, 0.66);
@@ -56,9 +59,8 @@ window.panel { background-color: transparent; }
 }
 .tile:hover  { background-color: rgba(58, 51, 80, 0.9); }
 .tile.active {
-    background-color: #92b9ea;
-    color: #0f0d17;
-    border-color: #92b9ea;
+    background-color: rgba(146, 185, 234, 0.14);
+    border-color: rgba(146, 185, 234, 0.55);
 }
 .rowbtn {
     background-image: none;
@@ -107,7 +109,7 @@ ICON = {
     "net_eth": "󰈀", "net_wifi": "󰖩", "net_off": "󰖪",
     "bt_on": "󰂯", "bt_off": "󰂲", "bt_conn": "󰂱",
     "vol": "󰕾", "vol_mute": "󰝟", "mic": "󰍬", "mic_mute": "󰍭",
-    "dnd_on": "󰂛", "dnd_off": "󰂚", "particles": "󰠹", "wall": "󰸉",
+    "dnd_on": "󰂛", "dnd_off": "󰂚", "particles": "󰝨", "wall": "󰸉",
     "lock": "󰌾", "logout": "󰍃", "suspend": "󰒲", "reboot": "󰜉", "power": "󰐥",
     "back": "󰅁", "refresh": "󰑓", "vpn_on": "󰖂", "vpn_off": "󰕥",
     "clip": "󰅍", "shot": "󰹑", "bar": "󰍹",
@@ -264,7 +266,10 @@ class Panel(Gtk.Window):
 
         frame = Gtk.Box(orientation=Gtk.Orientation.VERTICAL)
         frame.get_style_context().add_class("frame")
-        frame.set_border_width(20)
+        frame.set_border_width(20)          # padding inside the card
+        for setter in ("set_margin_top", "set_margin_bottom",
+                       "set_margin_start", "set_margin_end"):
+            getattr(frame, setter)(10)      # transparent gutter outside it
         frame.add(self.stack)
         self.add(frame)
 
@@ -797,9 +802,12 @@ def main():
 
     provider = Gtk.CssProvider()
     provider.load_from_data(CSS)
+    # ~/.config/gtk-3.0/gtk.css loads at PRIORITY_USER (800) and styles plain
+    # `button`, which outranks this sheet at APPLICATION (600) and was undoing
+    # the tile/icon styling. Sit just above it.
     Gtk.StyleContext.add_provider_for_screen(
         Gdk.Screen.get_default(), provider,
-        Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION)
+        Gtk.STYLE_PROVIDER_PRIORITY_USER + 1)
     win = Panel()
     win._loading = True
     win.show_all()