100 lines
2.7 KiB
CSS
100 lines
2.7 KiB
CSS
/* orbit-menu — CyberQueer radial menu.
|
|
* Colors come from _colors.css (@text/@bg/@accent/@violet/@danger), loaded first
|
|
* by theme.py. Nested-level transitions are handled by the Gtk.Stack's own
|
|
* CROSSFADE (see orbit_menu.py); this file only owns per-node hover/glow.
|
|
*/
|
|
|
|
window.orbit-menu-window {
|
|
background: transparent;
|
|
}
|
|
|
|
.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), @bg 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(@bg, 0.4), @bg 80%);
|
|
border-color: alpha(@violet, 0.5);
|
|
}
|
|
|
|
.orbit-node:hover {
|
|
background-image: radial-gradient(circle at 35% 30%, alpha(@violet, 0.55), @bg 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), @bg 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), @bg 80%);
|
|
box-shadow: 0 0 18px 2px alpha(@danger, 0.7);
|
|
}
|
|
|
|
.orbit-danger:active {
|
|
box-shadow: 0 0 26px 4px alpha(@danger, 0.9);
|
|
}
|