fix(astal-menu): float modules on transparent gaps (beat theme's global bg)
The panel showed a solid #1a1a1a slab between modules. Root cause: the CyberQueer
GTK theme is installed as ~/.config/gtk-4.0/gtk.css (a symlink), which GTK4 loads
at PRIORITY_USER (800) — above our PRIORITY_APPLICATION (600) — and its reset rule
`* { background-color: #1a1a1a }` painted every node, including the structural
containers between modules. Our transparency overrides silently lost the cascade.
Fixes:
- theme.py: load the app stylesheets at USER+1 so they sit just above the
user-level theme symlink and actually win.
- style.css: blank the structural container nodes (window/.panel/overlay/revealer/
grid/scrolledwindow/viewport/drawingarea) so the desktop shows between modules.
- window.py/quadgrid.py: draw each module's card background with the Cairo
bordered(fill_bg=True) so cards stay opaque (incl. rounded corners) while the
gaps go transparent — this GTK build doesn't paint CSS backgrounds on containers,
hence the Cairo fill.
Popovers/buttons keep their backgrounds (the theme's rule still covers those nodes;
only structural containers are overridden). Verified visually end-to-end.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XUWCXM4KhjRkwheaA3X7bP
feat/astal-menu
parent
76194980cb
commit
503b7f3336
|
|
@ -8,16 +8,24 @@
|
|||
}
|
||||
|
||||
/* ---- window / letterbox --------------------------------------------- */
|
||||
/* The backmost surface must be fully transparent so each module floats on its own
|
||||
* drawn border/background. The bare `window` (and its default `.background` node)
|
||||
* is included because the GTK theme paints a solid colour there that a plain
|
||||
* `.menu-window` rule does not always override. */
|
||||
/* The CyberQueer GTK theme paints `* { background-color: #1a1a1a }` on EVERY node,
|
||||
* which fills the gaps between modules with a solid slab. Each module carries its
|
||||
* own drawn (Cairo) card background via bordered(fill_bg=True), so blank the
|
||||
* structural container nodes here to let the desktop show between the floating
|
||||
* modules. `drawingarea` is the bordered() ring canvas — transparent so only its
|
||||
* Cairo-drawn rounded fill shows, not a full-bleed square. */
|
||||
window,
|
||||
window.background,
|
||||
.menu-window,
|
||||
#menu-window,
|
||||
.panel,
|
||||
#panel-root {
|
||||
#panel-root,
|
||||
overlay,
|
||||
revealer,
|
||||
grid,
|
||||
scrolledwindow,
|
||||
viewport,
|
||||
drawingarea {
|
||||
background: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,12 @@ _colors.css (generated from ~/Dotfiles/colors.conf by apply-theme.sh) defines th
|
|||
five CyberQueer @define-color names; style.css consumes them. They are loaded as
|
||||
two separate providers rather than via @import, because GTK4 resolves @import
|
||||
paths unreliably.
|
||||
|
||||
Priority is USER+1, not APPLICATION: the CyberQueer GTK theme is installed as
|
||||
~/.config/gtk-4.0/gtk.css (a symlink), which GTK4 loads at PRIORITY_USER (800) —
|
||||
above APPLICATION (600). Its aggressive `* { background-color: #1a1a1a }` would
|
||||
otherwise beat our rules (e.g. the transparent structural containers that let the
|
||||
modules float), so we must sit just above the user-level theme.
|
||||
"""
|
||||
|
||||
from __future__ import annotations
|
||||
|
|
@ -25,5 +31,5 @@ def load_css() -> None:
|
|||
provider = Gtk.CssProvider()
|
||||
provider.load_from_path(str(path))
|
||||
Gtk.StyleContext.add_provider_for_display(
|
||||
display, provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION
|
||||
display, provider, Gtk.STYLE_PROVIDER_PRIORITY_USER + 1
|
||||
)
|
||||
|
|
|
|||
|
|
@ -41,7 +41,8 @@ class QuadGrid(Gtk.Overlay):
|
|||
card = QuadCard(spec, settings, services,
|
||||
self.request_expand, self.request_collapse)
|
||||
self.cards[spec.id] = card
|
||||
self.grid.attach(bordered(card, radius=16), index % 2, index // 2, 1, 1)
|
||||
self.grid.attach(bordered(card, radius=16, fill_bg=True),
|
||||
index % 2, index // 2, 1, 1)
|
||||
|
||||
# overlay used for the expanded quad
|
||||
self._expand_reveal = Gtk.Revealer(
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ class MenuWindow(Gtk.ApplicationWindow):
|
|||
self.taskbar_reveal = Gtk.Revealer(
|
||||
transition_type=Gtk.RevealerTransitionType.SLIDE_DOWN,
|
||||
transition_duration=160, reveal_child=True)
|
||||
self.taskbar_reveal.set_child(bordered(self.taskbar))
|
||||
self.taskbar_reveal.set_child(bordered(self.taskbar, fill_bg=True))
|
||||
self.root.append(self.taskbar_reveal)
|
||||
|
||||
# quads
|
||||
|
|
@ -74,7 +74,7 @@ class MenuWindow(Gtk.ApplicationWindow):
|
|||
# appdrawer
|
||||
self.appdrawer = AppDrawer(settings, on_launch=self.hide_menu,
|
||||
on_toggle_expand=self._on_appdrawer_expand)
|
||||
self.appdrawer_wrap = bordered(self.appdrawer)
|
||||
self.appdrawer_wrap = bordered(self.appdrawer, fill_bg=True)
|
||||
self.appdrawer_wrap.set_valign(Gtk.Align.FILL)
|
||||
self.root.append(self.appdrawer_wrap)
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue