333 lines
10 KiB
CSS
333 lines
10 KiB
CSS
/* astro-menu — "hologram info display" theme. Colours come from _colors.css
|
||
* (@text/@bg/@accent/@violet/@danger). Mirrors the existing bar idiom: Agave
|
||
* Nerd Font Mono, 3px borders, ~25px pill radii. Touch-friendly hit targets
|
||
* throughout. Module card borders get a Cairo-drawn glow (lib/border.py);
|
||
* this file adds matching CSS box-shadow glow + smooth transitions on every
|
||
* interactive element, and a scanline/sweep/noise hologram overlay (see
|
||
* .astro-hologram, painted by window.py) so the whole panel reads as one
|
||
* continuous piece with orbit-menu and horizon-dock. */
|
||
|
||
* {
|
||
font-family: "Agave Nerd Font Mono", monospace;
|
||
font-size: 13pt;
|
||
}
|
||
|
||
/* ---- window / letterbox --------------------------------------------- */
|
||
/* 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,
|
||
overlay,
|
||
revealer,
|
||
grid,
|
||
scrolledwindow,
|
||
viewport,
|
||
drawingarea {
|
||
background: transparent;
|
||
background-color: transparent;
|
||
}
|
||
|
||
#backdrop {
|
||
background: alpha(black, 0.25);
|
||
}
|
||
|
||
/* Letterbox margins are set in code (window.py) as a fraction of the monitor so
|
||
* the inset scales per display; this box just carries the panel background. */
|
||
|
||
/* ---- quad grid + cards ---------------------------------------------- */
|
||
.quad-grid.dimmed {
|
||
opacity: 0.15;
|
||
}
|
||
|
||
/* bouncy pop when a quad expands (added in ui/quadgrid.py on expand) */
|
||
@keyframes quad-pop {
|
||
0% { transform: scale(0.82); opacity: 0.4; }
|
||
55% { transform: scale(1.05); opacity: 1; }
|
||
78% { transform: scale(0.985); }
|
||
100% { transform: scale(1.0); }
|
||
}
|
||
.quad-pop { animation: quad-pop 300ms ease-out; }
|
||
|
||
/* bouncy pop-expand for the app drawer (added in ui/appdrawer.py on expand) */
|
||
@keyframes drawer-pop {
|
||
0% { transform: scale(0.90); opacity: 0.45; }
|
||
60% { transform: scale(1.025); opacity: 1; }
|
||
82% { transform: scale(0.995); }
|
||
100% { transform: scale(1.0); }
|
||
}
|
||
.drawer-pop { animation: drawer-pop 280ms ease-out; }
|
||
|
||
.quad-card { min-height: 100px; }
|
||
.section-title { color: @text; font-weight: bold; opacity: 0.85; }
|
||
|
||
/* The single module border + background is drawn with Cairo by bordered(fill_bg=True)
|
||
* (see lib/border.py); the CSS border/background here would render a second,
|
||
* concentric ring now that the app stylesheet sits above the theme, so only keep
|
||
* the inner content padding. */
|
||
.quad-card,
|
||
.quad-expanded,
|
||
.appdrawer,
|
||
.taskbar,
|
||
.favorites {
|
||
padding: 8px 12px;
|
||
}
|
||
|
||
.quad-header,
|
||
.appdrawer-header,
|
||
.expanded-header {
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.quad-title { color: @text; font-weight: bold; }
|
||
.quad-icon { color: @accent; font-size: 15pt; }
|
||
|
||
/* minimalist system-stats line (top of the panel) */
|
||
.statsbar { padding: 19px 8px; }
|
||
.statsbar .stat-icon { color: @accent; font-size: 11pt; }
|
||
.statsbar .stat-value { color: @text; font-size: 10pt; }
|
||
|
||
.quad-body { color: @text; }
|
||
|
||
/* pill action buttons */
|
||
.quad-action,
|
||
.enable-btn {
|
||
color: @text;
|
||
background: alpha(@violet, 0.4);
|
||
border: 3px solid @violet;
|
||
border-radius: 25px;
|
||
padding: 1px 14px; /* tight vertically so pills don't waste vertical space */
|
||
min-height: 22px;
|
||
min-width: 22px;
|
||
transition: border-color 180ms ease, color 180ms ease, box-shadow 220ms ease, background 180ms ease;
|
||
box-shadow: 0 0 0 0 alpha(@accent, 0);
|
||
}
|
||
.quad-action:hover,
|
||
.enable-btn:hover {
|
||
border-color: @accent;
|
||
color: @accent;
|
||
box-shadow: 0 0 12px 1px alpha(@accent, 0.55);
|
||
}
|
||
.quad-action:active,
|
||
button:checked.quad-action { background: @accent; color: @bg; border-color: @accent; }
|
||
|
||
/* Columns count stepper value (between the − / + pills) */
|
||
.stepper-value {
|
||
min-width: 34px;
|
||
font-weight: bold;
|
||
color: @accent;
|
||
font-feature-settings: "tnum";
|
||
}
|
||
|
||
/* A MenuButton (the settings cog) wraps an inner `button` node that would render a
|
||
* second ring inside the outer .quad-action pill — flatten it so only one border
|
||
* shows. */
|
||
.quad-action > button {
|
||
border: none;
|
||
background: transparent;
|
||
padding: 0;
|
||
min-width: 0;
|
||
min-height: 0;
|
||
}
|
||
|
||
.quad-disabled { color: @text; opacity: 0.7; }
|
||
.enable-btn { border-color: @accent; }
|
||
|
||
/* settings popover */
|
||
.quad-settings { background: alpha(@violet, 0.4); border: 3px solid @violet; border-radius: 16px; padding: 10px; }
|
||
.switch-row { min-height: 36px; }
|
||
|
||
.expanded-header .quad-title { font-size: 14pt; }
|
||
|
||
/* ---- appdrawer ------------------------------------------------------ */
|
||
.appdrawer-search {
|
||
border: 3px solid @violet;
|
||
border-radius: 25px;
|
||
padding: 8px 14px;
|
||
margin-bottom: 8px;
|
||
color: @text;
|
||
background: alpha(@violet, 0.4);
|
||
transition: border-color 180ms ease, box-shadow 220ms ease;
|
||
box-shadow: 0 0 0 0 alpha(@accent, 0);
|
||
}
|
||
.appdrawer-search:focus-within {
|
||
border-color: @accent;
|
||
box-shadow: 0 0 14px 1px alpha(@accent, 0.45);
|
||
}
|
||
|
||
.app-tile {
|
||
background: transparent;
|
||
border: 2px solid transparent;
|
||
border-radius: 16px;
|
||
padding: 10px 6px;
|
||
min-width: 92px;
|
||
transition: border-color 180ms ease, background 180ms ease, box-shadow 220ms ease;
|
||
box-shadow: 0 0 0 0 alpha(@accent, 0);
|
||
}
|
||
.app-tile:hover {
|
||
border-color: @accent;
|
||
background: alpha(@violet, 0.18);
|
||
box-shadow: 0 0 14px 1px alpha(@accent, 0.4);
|
||
}
|
||
.app-tile label { color: @text; font-size: 10pt; }
|
||
.fav-star { color: @accent; font-size: 13pt; margin: 2px 4px; }
|
||
|
||
/* ---- favourites row (top of drawer) --------------------------------- */
|
||
.favorites-row { padding: 4px 0; }
|
||
.fav-tile {
|
||
background: alpha(@violet, 0.4);
|
||
border: 2px solid @violet;
|
||
border-radius: 16px;
|
||
padding: 6px 12px;
|
||
min-height: 40px;
|
||
transition: border-color 180ms ease, box-shadow 220ms ease;
|
||
box-shadow: 0 0 0 0 alpha(@violet, 0);
|
||
}
|
||
.fav-tile:hover {
|
||
border-color: @accent;
|
||
box-shadow: 0 0 12px 1px alpha(@accent, 0.5);
|
||
}
|
||
.fav-tile label { color: @text; font-size: 11pt; }
|
||
|
||
/* ---- taskbar (open windows) ----------------------------------------- */
|
||
.taskbar-row { padding: 4px 0; }
|
||
.task-tile {
|
||
background: transparent;
|
||
border: 2px solid transparent;
|
||
border-radius: 14px;
|
||
padding: 6px 10px;
|
||
min-height: 44px;
|
||
min-width: 44px;
|
||
transition: border-color 180ms ease, background 180ms ease, box-shadow 220ms ease;
|
||
box-shadow: 0 0 0 0 alpha(@accent, 0);
|
||
}
|
||
.task-tile:hover {
|
||
border-color: @accent;
|
||
background: alpha(@violet, 0.18);
|
||
box-shadow: 0 0 14px 1px alpha(@accent, 0.4);
|
||
}
|
||
.task-badge {
|
||
color: @bg; background: @accent;
|
||
border-radius: 10px; padding: 0 6px; font-size: 9pt;
|
||
}
|
||
.task-popover { background: alpha(@violet, 0.4); border: 3px solid @violet; border-radius: 14px; padding: 6px; }
|
||
.task-window { color: @text; background: transparent; border-radius: 10px; padding: 6px 12px; }
|
||
.task-window:hover { color: @accent; }
|
||
|
||
/* pop-open panel: layout controls + per-window rows */
|
||
.task-panel { padding: 4px 2px; }
|
||
.layout-page { padding: 6px 4px 2px 4px; }
|
||
.task-row { padding: 2px 4px; border-radius: 10px; min-height: 30px; }
|
||
.task-row:hover { background: alpha(@violet, 0.12); }
|
||
.task-name { background: transparent; border: none; padding: 2px 6px; min-height: 26px; }
|
||
.task-name:hover { color: @accent; }
|
||
.task-name label { color: @text; }
|
||
|
||
/* ---- location map --------------------------------------------------- */
|
||
.map-view { border-radius: 14px; }
|
||
.map-info { color: @text; padding: 6px 2px 0 2px; font-size: 11pt; }
|
||
.map-marker { color: @accent; }
|
||
|
||
/* ---- weather -------------------------------------------------------- */
|
||
.ansi-view,
|
||
.ansi-view text {
|
||
background: alpha(@violet, 0.4);
|
||
color: @text;
|
||
font-family: "Agave Nerd Font Mono", monospace;
|
||
font-size: 11pt;
|
||
padding: 4px;
|
||
}
|
||
.weather-status { color: @text; opacity: 0.7; }
|
||
|
||
/* ---- bluetooth / network shared rows -------------------------------- */
|
||
.bt-row,
|
||
.net-row {
|
||
padding: 4px 6px;
|
||
border-radius: 12px;
|
||
min-height: 30px;
|
||
transition: background 180ms ease;
|
||
}
|
||
.bt-row:hover,
|
||
.net-row:hover { background: alpha(@violet, 0.15); }
|
||
.bt-status { color: @accent; font-size: 10pt; }
|
||
.bt-status.bt-failed { color: @danger; }
|
||
.bt-history label,
|
||
.net-ip { color: @text; opacity: 0.85; font-size: 11pt; }
|
||
|
||
.net-switcher { margin-bottom: 8px; }
|
||
.net-adapter { padding: 4px 0; }
|
||
.net-adapter > box { padding-left: 6px; }
|
||
.net-entry {
|
||
border: 2px solid @violet;
|
||
border-radius: 12px;
|
||
padding: 6px 10px;
|
||
color: @text;
|
||
background: alpha(@violet, 0.4);
|
||
transition: border-color 180ms ease, box-shadow 220ms ease;
|
||
box-shadow: 0 0 0 0 alpha(@accent, 0);
|
||
}
|
||
.net-entry:focus-within {
|
||
border-color: @accent;
|
||
box-shadow: 0 0 12px 1px alpha(@accent, 0.45);
|
||
}
|
||
.pubip { color: @accent; font-size: 15pt; }
|
||
|
||
/* switches: fixed pill with a bordered round knob (the reset theme leaves them
|
||
* shapeless otherwise) */
|
||
switch {
|
||
min-width: 48px;
|
||
min-height: 26px;
|
||
border: 2px solid @violet;
|
||
border-radius: 15px;
|
||
background: alpha(@violet, 0.4);
|
||
padding: 0;
|
||
transition: background 180ms ease, border-color 180ms ease, box-shadow 220ms ease;
|
||
}
|
||
switch:checked {
|
||
background: @accent;
|
||
border-color: @accent;
|
||
box-shadow: 0 0 10px 1px alpha(@accent, 0.5);
|
||
}
|
||
switch > slider {
|
||
min-width: 18px;
|
||
min-height: 18px;
|
||
margin: 2px;
|
||
border-radius: 50%;
|
||
border: 1px solid @violet;
|
||
background: @text;
|
||
}
|
||
switch:checked > slider { border-color: @accent; }
|
||
scrollbar slider { background: @violet; border-radius: 8px; min-width: 6px; }
|
||
scrollbar slider:hover { background: @accent; }
|
||
|
||
/* module frames — Gtk.Frame paints borders reliably where boxes do not */
|
||
.module-frame { border: 3px solid @accent; border-radius: 16px; background: alpha(@violet, 0.4); }
|
||
.module-frame > box { padding: 10px 12px; }
|
||
|
||
/* floating panel + close button */
|
||
.panel { padding: 2px; }
|
||
.close-btn {
|
||
color: @text; background: alpha(@violet, 0.4);
|
||
border: none; border-radius: 20px;
|
||
min-width: 34px; min-height: 34px;
|
||
margin: 16px 20px; /* keep it clear of the module's drawn border */
|
||
transition: background 180ms ease, color 180ms ease, box-shadow 220ms ease;
|
||
}
|
||
.close-btn:hover {
|
||
background: @accent;
|
||
color: @bg;
|
||
box-shadow: 0 0 14px 2px alpha(@accent, 0.55);
|
||
}
|
||
|
||
/* ---- holographic overlay (see window.py's Gtk.Overlay + _draw_hologram) --- */
|
||
.astro-hologram {
|
||
background: transparent;
|
||
}
|