Dotfiles/desktopenvs/hyprdrive/horizon-dock/style/style.css

81 lines
2.7 KiB
CSS

/* horizon-dock — CyberQueer orbital dock. Colors come from _colors.css
* (@text/@bg/@accent/@violet/@danger), loaded first by theme.py. Every icon is
* a "planet" node styled identically to orbit-menu's .orbit-node/.orbit-center
* (same glow/hover treatment, same radial-gradient formula) so the two
* components read as one continuous aesthetic.
*/
window.horizon-dock-window {
background: transparent;
}
/* The cyberqueer theme's `* { background-color: #1a1a1a }` paints DrawingArea
* nodes specifically (see orbit-menu/style/style.css's .orbit-hologram fix for
* the same discovery) — the background arc canvas is a DrawingArea sitting
* behind everything, so without this it paints an opaque rectangle that blots
* out the transparent window, which is what reads as "the system GTK theme". */
.horizon-canvas,
.horizon-hologram {
background: transparent;
background-color: transparent;
background-image: none;
}
/* -- planet nodes: identical language to orbit-menu's .orbit-node ------------ */
.horizon-planet {
border-radius: 9999px;
border: 1.5px solid alpha(@violet, 0.5);
color: @text;
background-image: radial-gradient(circle at 35% 30%, alpha(@violet, 0.18), alpha(@violet, 0.32) 80%);
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(@violet, 0);
}
.horizon-planet * {
background: transparent;
background-color: transparent;
background-image: none;
}
.horizon-planet: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);
}
.horizon-planet:active {
box-shadow: 0 0 22px 3px alpha(@violet, 0.85);
}
/* the tray satellite reads as "special" — accent-tinted instead of violet, and
* an OPAQUE background (not the translucent radial-gradient the other planets
* use) so overflowing favorites scrolling underneath it visibly disappear
* behind it rather than showing through. Opaque, but still violet-tinted
* rather than flat gray (a literal near-black-violet, not @bg/@violet, since
* this one spot genuinely needs full opacity for the occlusion to work). */
.horizon-tray-satellite {
border-color: alpha(@accent, 0.55);
background-image: none;
background-color: #140b28;
}
.horizon-tray-satellite:hover {
border-color: @accent;
box-shadow: 0 0 16px 1px alpha(@accent, 0.6);
}
.horizon-tray-popover {
background-color: #140b28;
}
.horizon-tray-box {
padding: 8px;
}
.horizon-tray-item {
border-radius: 9999px;
min-width: 28px;
min-height: 28px;
}