197 lines
5.6 KiB
CSS
197 lines
5.6 KiB
CSS
/* astal-menu — CyberQueer 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. */
|
|
|
|
* {
|
|
font-family: "Agave Nerd Font Mono", monospace;
|
|
font-size: 13pt;
|
|
}
|
|
|
|
/* ---- 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. */
|
|
window,
|
|
window.background,
|
|
.menu-window,
|
|
#menu-window,
|
|
.panel,
|
|
#panel-root {
|
|
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;
|
|
}
|
|
|
|
.quad-card { min-height: 190px; }
|
|
.section-title { color: @text; font-weight: bold; opacity: 0.85; }
|
|
|
|
.quad-card,
|
|
.quad-expanded,
|
|
.appdrawer,
|
|
.taskbar,
|
|
.favorites {
|
|
background: @bg;
|
|
border: 3px solid @accent;
|
|
border-radius: 18px;
|
|
padding: 12px 14px;
|
|
margin: 3px; /* keep the border off the grid/overlay clip edge */
|
|
}
|
|
|
|
.quad-header,
|
|
.appdrawer-header,
|
|
.expanded-header {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.quad-title { color: @text; font-weight: bold; }
|
|
.quad-icon { color: @accent; font-size: 15pt; }
|
|
|
|
.quad-body { color: @text; }
|
|
|
|
/* pill action buttons */
|
|
.quad-action,
|
|
.enable-btn {
|
|
color: @text;
|
|
background: @bg;
|
|
border: 3px solid @violet;
|
|
border-radius: 25px;
|
|
padding: 6px 14px;
|
|
min-height: 32px;
|
|
min-width: 32px;
|
|
}
|
|
.quad-action:hover,
|
|
.enable-btn:hover { border-color: @accent; color: @accent; }
|
|
.quad-action:active,
|
|
button:checked.quad-action { background: @accent; color: @bg; border-color: @accent; }
|
|
|
|
.quad-disabled { color: @text; opacity: 0.7; }
|
|
.enable-btn { border-color: @accent; }
|
|
|
|
/* settings popover */
|
|
.quad-settings { background: @bg; 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: @bg;
|
|
}
|
|
.appdrawer-search:focus-within { border-color: @accent; }
|
|
|
|
.app-tile {
|
|
background: transparent;
|
|
border: 2px solid transparent;
|
|
border-radius: 16px;
|
|
padding: 10px 6px;
|
|
min-width: 92px;
|
|
}
|
|
.app-tile:hover { border-color: @accent; background: alpha(@violet, 0.18); }
|
|
.app-tile label { color: @text; font-size: 10pt; }
|
|
|
|
/* ---- favourites row (top of drawer) --------------------------------- */
|
|
.favorites-row { padding: 4px 0; }
|
|
.fav-tile {
|
|
background: @bg;
|
|
border: 2px solid @violet;
|
|
border-radius: 16px;
|
|
padding: 6px 12px;
|
|
min-height: 40px;
|
|
}
|
|
.fav-tile:hover { border-color: @accent; }
|
|
.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;
|
|
}
|
|
.task-tile:hover { border-color: @accent; background: alpha(@violet, 0.18); }
|
|
.task-badge {
|
|
color: @bg; background: @accent;
|
|
border-radius: 10px; padding: 0 6px; font-size: 9pt;
|
|
}
|
|
.task-popover { background: @bg; 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; }
|
|
|
|
/* ---- 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: @bg;
|
|
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: 8px 6px;
|
|
border-radius: 12px;
|
|
min-height: 40px;
|
|
}
|
|
.bt-row:hover,
|
|
.net-row:hover { background: alpha(@violet, 0.15); }
|
|
.bt-status { color: @accent; font-size: 10pt; }
|
|
.bt-history label,
|
|
.net-ip { color: @text; opacity: 0.85; font-size: 11pt; }
|
|
|
|
.net-switcher { margin-bottom: 8px; }
|
|
.net-entry {
|
|
border: 2px solid @violet;
|
|
border-radius: 12px;
|
|
padding: 6px 10px;
|
|
color: @text;
|
|
background: @bg;
|
|
}
|
|
.net-entry:focus-within { border-color: @accent; }
|
|
.pubip { color: @accent; font-size: 15pt; }
|
|
|
|
/* switches / scrollbars pick up the accent */
|
|
switch:checked { background: @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: @bg; }
|
|
.module-frame > box { padding: 10px 12px; }
|
|
|
|
/* floating panel + close button */
|
|
.panel { padding: 2px; }
|
|
.close-btn {
|
|
color: @text; background: @bg;
|
|
border: 2px solid @accent; border-radius: 20px;
|
|
min-width: 34px; min-height: 34px; margin: 2px 4px;
|
|
}
|
|
.close-btn:hover { background: @accent; color: @bg; }
|