/* regreet.css — CyberQueer login theme for ReGreet (greetd, Wayland-native) * * Deployed to /etc/greetd/regreet.css by * setup/modules/optional-Modules/apps/greetd-regreet.sh and loaded by ReGreet * via `regreet -s` at STYLE_PROVIDER_PRIORITY_APPLICATION (600) — i.e. ON TOP of * the base GTK theme (priority 200). So this file owns the login-screen look * outright; the base theme (regreet.toml `theme_name`) only supplies sane widget * defaults. We deliberately do NOT reuse the desktop `cyberqueer` GTK theme here: * its `* { all: unset }` reset is meant for waybar/eww/Thunar and would strip a * login card's layout. This is the greeter's own, self-contained cyberqueer skin. * * Colours mirror colors.conf (the CyberQueer palette). apply-theme.sh rewrites * the hex values below in lock-step with the rest of the system — keep them as * bare 6-digit hex so its case-insensitive sed substitution keeps matching. * * ReGreet widget map (relm4 `#[name]` sets Rust fields, NOT CSS ids — so only * css classes + node types are selectable): * frame.background → login card AND clock card * frame.background > grid → the login card's contents * frame.background > label→ the clock label (clock card's only child) * entry / entry.password → username / session / secret fields * combobox → user + session pickers * button.suggested-action → Login * button.destructive-action → Reboot / Power Off * button.toggle → manual user/session entry toggles * infobar → PAM notification bar */ @define-color cq_bg #1A1A1A; /* near-black base surface */ @define-color cq_text #D6ABAB; /* warm quasi-white foreground */ @define-color cq_pink #E40046; /* hot-pink primary accent */ @define-color cq_violet #5018DD; /* electric-violet secondary */ @define-color cq_red #F50505; /* hi-vis danger red */ /* Re-tint the base (Adwaita) theme's semantic named colours to CyberQueer. * Adwaita paints .suggested-action / .destructive-action / selections from * these named colours, so overriding them here is what actually recolours the * Login and Reboot/Power-Off buttons (a plain `.suggested-action` rule loses to * Adwaita's own). Kept in bare hex so apply-theme.sh rewrites them too. */ @define-color accent_color #E40046; @define-color accent_bg_color #E40046; @define-color accent_fg_color #1A1A1A; @define-color theme_selected_bg_color #E40046; @define-color theme_selected_fg_color #1A1A1A; @define-color destructive_color #F50505; @define-color destructive_bg_color #F50505; @define-color destructive_fg_color #1A1A1A; /* ── Backdrop ───────────────────────────────────────────────────────────── * Solid near-black behind the wallpaper Picture, so the greeter never flashes * white and stays legible if no wallpaper has been synced yet. */ window, overlay { background-color: @cq_bg; color: @cq_text; } /* ── Cards: the login frame and the clock frame both carry `.background` ──── */ frame.background { background-color: alpha(@cq_bg, 0.86); color: @cq_text; border: 2px solid @cq_pink; border-radius: 20px; padding: 10px 16px; box-shadow: 0 0 26px 2px alpha(@cq_pink, 0.40), inset 0 0 60px alpha(@cq_violet, 0.14); } /* The clock card sits flush on the top edge (ReGreet flattens its top corners * via inline_css at priority 800, which wins over this — so we only need to * style the glow + fill, not fight the border geometry). */ frame.background > label { font-family: "JetBrains Mono", monospace; font-size: 30pt; font-weight: 700; letter-spacing: 4px; padding: 4px 26px; color: @cq_text; text-shadow: 0 0 12px alpha(@cq_pink, 0.75), 0 0 22px alpha(@cq_violet, 0.55); } /* ── Text & labels inside the login card ─────────────────────────────────── */ frame.background > grid > label { color: @cq_text; margin: 0 6px; } /* ── Entries: username / session / password ──────────────────────────────── */ entry, entry.password { background-color: alpha(#000000, 0.45); color: @cq_text; caret-color: @cq_pink; border: 2px solid alpha(@cq_violet, 0.85); border-radius: 12px; padding: 8px 12px; min-height: 34px; transition: border-color 160ms ease, box-shadow 160ms ease; } entry image, entry.password image { /* the peek-password / clear icons */ color: @cq_violet; } entry:focus-within, entry.password:focus-within { border-color: @cq_pink; box-shadow: 0 0 14px 1px alpha(@cq_pink, 0.55); } entry selection { background-color: @cq_pink; color: @cq_bg; } /* ── Combo boxes: user + session pickers render as `combobox > button` ───── */ combobox > button.combo { background-color: alpha(#000000, 0.45); color: @cq_text; border: 2px solid alpha(@cq_violet, 0.85); border-radius: 12px; padding: 6px 12px; min-height: 34px; } combobox > button.combo:hover { border-color: @cq_pink; } combobox arrow { color: @cq_pink; min-height: 16px; min-width: 16px; } /* The drop-down popover list */ combobox popover contents { background-color: @cq_bg; border: 1px solid @cq_violet; border-radius: 12px; } combobox popover contents :selected { background-color: @cq_pink; color: @cq_bg; } /* ── Buttons ─────────────────────────────────────────────────────────────── */ button { color: @cq_text; background-color: alpha(@cq_violet, 0.16); border: 2px solid alpha(@cq_violet, 0.85); border-radius: 12px; padding: 8px 18px; min-height: 34px; transition: all 160ms ease; } button:hover { background-color: alpha(@cq_violet, 0.32); border-color: @cq_pink; color: #FFFFFF; } button:active { background-color: @cq_violet; color: @cq_bg; } /* Manual-entry toggles (pencil icons) — quieter, icon-only */ button.toggle { background-color: transparent; border-color: alpha(@cq_violet, 0.55); padding: 6px; } button.toggle:checked { background-color: alpha(@cq_pink, 0.20); border-color: @cq_pink; color: @cq_pink; } /* Primary action: Login. The `window` prefix (specificity 0,1,2) and * `background-image: none` are needed to beat Adwaita's own accent styling. */ window button.suggested-action { background-image: none; background-color: @cq_pink; color: @cq_bg; border: 2px solid @cq_pink; font-weight: 700; box-shadow: 0 0 16px alpha(@cq_pink, 0.45); } window button.suggested-action:hover { background-color: #FF1A5E; border-color: #FF1A5E; color: @cq_bg; box-shadow: 0 0 22px alpha(@cq_pink, 0.75); } window button.suggested-action:active { background-color: @cq_violet; border-color: @cq_violet; } /* Destructive actions: Reboot / Power Off — quiet red outline, red glow on * hover (overrides Adwaita's solid-red fill; same specificity trick). */ window button.destructive-action { background-image: none; background-color: transparent; color: @cq_text; border: 2px solid alpha(@cq_red, 0.65); } window button.destructive-action:hover { background-color: alpha(@cq_red, 0.18); border-color: @cq_red; color: @cq_red; box-shadow: 0 0 16px alpha(@cq_red, 0.45); } /* ── PAM notification bar ────────────────────────────────────────────────── */ /* Style only the inner message box so a collapsed/unrevealed infobar draws * nothing (no stray border line above the power buttons). */ infobar { background: transparent; border: none; box-shadow: none; } infobar > revealer > box { background-color: alpha(@cq_bg, 0.90); color: @cq_text; border: 2px solid @cq_violet; border-radius: 12px; box-shadow: 0 0 18px alpha(@cq_violet, 0.40); } infobar.error > revealer > box { border-color: @cq_red; box-shadow: 0 0 18px alpha(@cq_red, 0.45); } infobar label { color: @cq_text; padding: 6px 12px; } /* ── Tooltips (hover hints on the toggle buttons) ────────────────────────── */ tooltip { background-color: @cq_violet; color: @cq_bg; border-radius: 10px; padding: 4px 8px; }