122 lines
3.8 KiB
CSS
122 lines
3.8 KiB
CSS
/* orbit-menu — CyberQueer radial menu.
|
|
* Colors come from _colors.css (@text/@bg/@accent/@violet/@danger), loaded first
|
|
* by theme.py. Nested-level navigation is a manual zoom (see orbit_menu.py's
|
|
* _update_transition); this file only owns per-node hover/glow.
|
|
*/
|
|
|
|
window.orbit-menu-window {
|
|
background: transparent;
|
|
}
|
|
|
|
/* Neutralise the CyberQueer theme's `* { background-color:#1a1a1a }` on EVERY
|
|
* node — the per-level Gtk.Fixed pages and the _viewport Fixed have no css class,
|
|
* so blanking by name (below) misses them and they paint an opaque dark slab over
|
|
* the whole menu. This provider is at USER+1; the node gradients survive because
|
|
* their .orbit-* rules out-specify `*`. */
|
|
* {
|
|
background-color: transparent;
|
|
}
|
|
|
|
/* The cyberqueer theme's `* { background-color: #1a1a1a }` paints DrawingArea
|
|
* nodes too (unlike plain Box/Frame containers, which this GTK build's renderer
|
|
* leaves alone — see lib/border.py in astal-menu for the same observation). The
|
|
* hologram overlay sits on TOP of the entire menu via Gtk.Overlay, so if it kept
|
|
* that background it would hide everything underneath it — force both it and its
|
|
* Gtk.Overlay parent transparent. */
|
|
.orbit-root-overlay,
|
|
.orbit-hologram {
|
|
background: transparent;
|
|
background-color: transparent;
|
|
background-image: none;
|
|
}
|
|
|
|
.orbit-center,
|
|
.orbit-node {
|
|
border-radius: 9999px;
|
|
border: 1.5px solid alpha(@text, 0.15);
|
|
color: @text;
|
|
transition: background 200ms ease, border-color 200ms ease,
|
|
box-shadow 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
box-shadow: 0 0 0 0 alpha(@accent, 0);
|
|
}
|
|
|
|
/* The cyberqueer GTK theme (~/.config/gtk-4.0/gtk.css) paints every widget node
|
|
* with `* { background-color: #1a1a1a }`, including the label/box that carries
|
|
* each node's icon+text — leaving a dark rectangle behind the glyphs instead of
|
|
* showing the round gradient button underneath. Force those descendants clear. */
|
|
.orbit-center *,
|
|
.orbit-node * {
|
|
background: transparent;
|
|
background-color: transparent;
|
|
background-image: none;
|
|
}
|
|
|
|
.orbit-node-icon {
|
|
font-size: 15px;
|
|
color: @text;
|
|
}
|
|
|
|
.orbit-node-text {
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* -- center node ------------------------------------------------------- */
|
|
|
|
.orbit-center {
|
|
background-image: radial-gradient(circle at 35% 30%, alpha(@violet, 0.9), alpha(@violet, 0.32) 75%);
|
|
border-color: alpha(@accent, 0.45);
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
}
|
|
.orbit-center .orbit-node-text {
|
|
font-size: 12px;
|
|
}
|
|
.orbit-center:hover {
|
|
border-color: @accent;
|
|
box-shadow: 0 0 18px 2px alpha(@accent, 0.55);
|
|
}
|
|
|
|
.orbit-root {
|
|
border-color: alpha(@text, 0.25);
|
|
}
|
|
|
|
/* -- ring nodes ---------------------------------------------------------- */
|
|
|
|
.orbit-node {
|
|
background-image: radial-gradient(circle at 35% 30%, alpha(@violet, 0.18), alpha(@violet, 0.32) 80%);
|
|
border-color: alpha(@violet, 0.5);
|
|
}
|
|
|
|
.orbit-node:hover {
|
|
background-image: radial-gradient(circle at 35% 30%, alpha(@violet, 0.55), alpha(@violet, 0.32) 80%);
|
|
border-color: @violet;
|
|
box-shadow: 0 0 16px 1px alpha(@violet, 0.6);
|
|
}
|
|
|
|
.orbit-node:active {
|
|
box-shadow: 0 0 22px 3px alpha(@violet, 0.85);
|
|
}
|
|
|
|
/* -- danger nodes (power actions, force kill) ---------------------------- */
|
|
|
|
.orbit-danger {
|
|
border-color: alpha(@danger, 0.55);
|
|
background-image: radial-gradient(circle at 35% 30%, alpha(@danger, 0.22), alpha(@violet, 0.32) 80%);
|
|
}
|
|
|
|
.orbit-danger .orbit-node-icon,
|
|
.orbit-danger .orbit-node-text {
|
|
color: alpha(@text, 0.95);
|
|
}
|
|
|
|
.orbit-danger:hover {
|
|
border-color: @danger;
|
|
background-image: radial-gradient(circle at 35% 30%, alpha(@danger, 0.5), alpha(@violet, 0.32) 80%);
|
|
box-shadow: 0 0 18px 2px alpha(@danger, 0.7);
|
|
}
|
|
|
|
.orbit-danger:active {
|
|
box-shadow: 0 0 26px 4px alpha(@danger, 0.9);
|
|
}
|