139 lines
5.3 KiB
CSS
139 lines
5.3 KiB
CSS
/*
|
|
* ============================================================
|
|
* Waybar Style — Hyprland Cyberqueer Theme
|
|
* ============================================================
|
|
* GTK CSS that controls the visual look of the waybar taskbar.
|
|
* All selectors match waybar's internal widget IDs.
|
|
*
|
|
* Cyberqueer palette:
|
|
* #1a1a1a — near-black panel background
|
|
* #5018dd — electric purple (inactive / default accent)
|
|
* #E40046 — neon red-pink (active / urgent / focused)
|
|
* ============================================================
|
|
*/
|
|
|
|
/* ── Global reset ─────────────────────────────────────────────
|
|
* Applied to every widget in the bar.
|
|
* Removes default GTK borders and sets transparent backgrounds
|
|
* so each widget can define its own background color below.
|
|
* Large border-radius (30 px) gives the "pill" capsule shape
|
|
* that is a signature of the cyberqueer aesthetic.
|
|
*/
|
|
* {
|
|
border: none;
|
|
|
|
/* Agave Nerd Font Mono provides the icon glyphs used in module
|
|
* format strings (battery, CPU, wifi, etc.). sans-serif is the
|
|
* generic fallback if Agave is not installed. */
|
|
font-family: Agave Nerd Font Mono, sans-serif;
|
|
font-size: 12pt;
|
|
|
|
/* Transparent default so color only appears where explicitly set. */
|
|
background: transparent;
|
|
|
|
/* Compact vertical padding keeps the bar slim. */
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
/* Horizontal padding gives each module text a bit of breathing room. */
|
|
padding-right: 6px;
|
|
padding-left: 6px;
|
|
|
|
/* 1 px top margin keeps module pills off the very top pixel. */
|
|
margin-top: 1px;
|
|
margin-bottom: 0px;
|
|
/* 2 px horizontal margin creates the small gap between adjacent modules. */
|
|
margin-right: 2px;
|
|
margin-left: 2px;
|
|
|
|
/* 30 px radius turns every element into a rounded pill shape. */
|
|
border-radius: 30px;
|
|
}
|
|
|
|
/* ── Workspace buttons — inactive state ───────────────────────
|
|
* Each workspace number is a GTK button.
|
|
* Inactive (non-focused) workspaces: dark background + purple text.
|
|
*/
|
|
#workspaces button {
|
|
/* 3 px solid border traces the pill outline clearly. */
|
|
border: solid;
|
|
border-width: 3px;
|
|
/* Near-black background matches the general panel color. */
|
|
background: #1a1a1a;
|
|
/* Electric purple for inactive workspace labels. */
|
|
color: #5018dd;
|
|
}
|
|
|
|
|
|
/* ── Workspace buttons — active (focused) state ───────────────
|
|
* The currently focused workspace switches text to neon red-pink
|
|
* so it immediately stands out from the inactive ones.
|
|
*/
|
|
#workspaces button.active {
|
|
border: solid;
|
|
border-width: 3px;
|
|
background: #1a1a1a;
|
|
/* Neon accent color makes the active workspace unmistakable. */
|
|
color: #E40046;
|
|
|
|
}
|
|
|
|
/* ── Workspace buttons — urgent state ─────────────────────────
|
|
* An app on an urgent workspace is demanding attention.
|
|
* Colors are fully inverted: the hot accent becomes the background
|
|
* and dark text sits on top — a high-contrast visual alarm.
|
|
*/
|
|
#workspaces button.urgent {
|
|
border: solid;
|
|
border-width: 3px;
|
|
/* Flipped: background becomes the neon accent. */
|
|
background: #E40046;
|
|
/* Dark text on bright background for maximum contrast. */
|
|
color: #1a1a1a;
|
|
|
|
}
|
|
|
|
|
|
/* ── Standard status modules ──────────────────────────────────
|
|
* All "regular" status modules share this single rule:
|
|
* dark pill background + electric-purple text. This creates a
|
|
* consistent look across the entire right side of the bar.
|
|
*
|
|
* #clock — HH:MM:SS time
|
|
* #disk — root disk usage %
|
|
* #window — focused window class/title
|
|
* #battery — battery level and charge state
|
|
* #cpu — CPU usage %
|
|
* #memory — RAM usage %
|
|
* #temperature — CPU temperature
|
|
* #backlight — screen brightness
|
|
* #network — network connection type
|
|
* #pulseaudio — audio volume / mute state
|
|
* #custom-media — media player (if module is added)
|
|
* #tray — system tray host
|
|
* #mode — Hyprland submap mode label
|
|
* #idle_inhibitor — idle/screen-lock prevention toggle
|
|
* #custom-netaddrsimple — local IP address display
|
|
*/
|
|
#clock, #disk, #window, #battery, #cpu, #memory, #temperature, #backlight, #network, #pulseaudio, #custom-media, #tray, #mode, #idle_inhibitor, #custom-netaddrsimple {
|
|
border: solid;
|
|
border-width: 3px;
|
|
/* Dark panel background shared across all status modules. */
|
|
background: #1a1a1a;
|
|
/* Electric purple for all default module text and Nerd Font icons. */
|
|
color: #5018dd;
|
|
}
|
|
|
|
/* ── idle_inhibitor — activated (idle prevention ON) ──────────
|
|
* When the user has clicked to prevent the screen from sleeping,
|
|
* switch to the neon accent so it is visually obvious that
|
|
* idle inhibition is currently active.
|
|
*/
|
|
#idle_inhibitor.activated {
|
|
border: solid;
|
|
border-width: 3px;
|
|
background: #1a1a1a;
|
|
/* Neon red-pink = "something is actively overriding idle". */
|
|
color: #E40046;
|
|
|
|
}
|