The_miro
/
Dotfiles
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style(greetd): restyle ReGreet login as Cosmonaut Shell 

Rework regreet.css into holographic-glass login cards — magenta scanlines,
violet top-glow, thin glowing magenta borders, glowing monospace text — to
match hyprdrive's Cosmonaut Shell, with fixed cq_magenta/cq_cyan colours kept
outside apply-theme's palette map. Switch the greeter font to Agave Nerd Font
Mono and the greeting to "-< CREW AUTHENTICATION >-" (regreet.toml).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
main
Amir Alexander Abdelbaki 2026-07-21 20:52:32 +02:00
parent 057a5a44d8
commit ab6e330bed
2 changed files with 91 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

161
etc-greetd/regreet.css
View File

@ -1,4 +1,4 @@
/* regreet.css — CyberQueer login theme for ReGreet (greetd, Wayland-native) /* regreet.css — Cosmonaut Shell login theme for ReGreet (greetd, Wayland-native)
* *
* Deployed to /etc/greetd/regreet.css by * Deployed to /etc/greetd/regreet.css by
* setup/modules/optional-Modules/apps/greetd-regreet.sh and loaded by ReGreet * setup/modules/optional-Modules/apps/greetd-regreet.sh and loaded by ReGreet
@ -7,11 +7,14 @@
* outright; the base theme (regreet.toml `theme_name`) only supplies sane widget * outright; the base theme (regreet.toml `theme_name`) only supplies sane widget
* defaults. We deliberately do NOT reuse the desktop `cyberqueer` GTK theme here: * 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 * 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. * login card's layout. This is the greeter's own, self-contained skin — styled to
* match hyprdrive's "Cosmonaut Shell": translucent holographic glass cards with
* scanlines, thin glowing magenta/violet borders, and glowing monospace text.
* *
* Colours mirror colors.conf (the CyberQueer palette). apply-theme.sh rewrites * The four PALETTE hexes below (bg/text/pink/violet) are the ones apply-theme.sh
* the hex values below in lock-step with the rest of the system — keep them as * rewrites in lock-step with colors.conf — keep them as bare 6-digit hex so its
* bare 6-digit hex so its case-insensitive sed substitution keeps matching. * case-insensitive sed keeps matching. cq_magenta / cq_cyan are NOT in that map,
* so they stay fixed: the Cosmonaut magenta the shell is built around.
* *
* ReGreet widget map (relm4 `#[name]` sets Rust fields, NOT CSS ids — so only * ReGreet widget map (relm4 `#[name]` sets Rust fields, NOT CSS ids — so only
* css classes + node types are selectable): * css classes + node types are selectable):
@ -26,17 +29,18 @@
* infobar → PAM notification bar * infobar → PAM notification bar
*/ */
@define-color cq_bg #1A1A1A; /* near-black base surface */ @define-color cq_bg #1A1A1A; /* near-black base surface (apply-theme) */
@define-color cq_text #D6ABAB; /* warm quasi-white foreground */ @define-color cq_text #D6ABAB; /* warm quasi-white foreground (apply-theme)*/
@define-color cq_pink #E40046; /* hot-pink primary accent */ @define-color cq_pink #E40046; /* hot accent red (apply-theme) */
@define-color cq_violet #5018DD; /* electric-violet secondary */ @define-color cq_violet #5018DD; /* electric violet (apply-theme) */
@define-color cq_red #F50505; /* hi-vis danger red */ @define-color cq_red #F50505; /* hi-vis danger red (fixed) */
@define-color cq_magenta #EB00A6; /* Cosmonaut Shell primary magenta (fixed) */
@define-color cq_cyan #22D3EE; /* cool readout accent (fixed) */
/* Re-tint the base (Adwaita) theme's semantic named colours to CyberQueer. /* Re-tint the base (Adwaita) theme's semantic named colours. Adwaita paints
* Adwaita paints .suggested-action / .destructive-action / selections from * .suggested-action / selections from these, so overriding them here is what
* these named colours, so overriding them here is what actually recolours the * actually recolours those widgets. Kept in bare hex so apply-theme.sh rewrites
* Login and Reboot/Power-Off buttons (a plain `.suggested-action` rule loses to * the palette ones too. */
* Adwaita's own). Kept in bare hex so apply-theme.sh rewrites them too. */
@define-color accent_color #E40046; @define-color accent_color #E40046;
@define-color accent_bg_color #E40046; @define-color accent_bg_color #E40046;
@define-color accent_fg_color #1A1A1A; @define-color accent_fg_color #1A1A1A;
@ -48,52 +52,63 @@
/* ── Backdrop ───────────────────────────────────────────────────────────── /* ── Backdrop ─────────────────────────────────────────────────────────────
* Solid near-black behind the wallpaper Picture, so the greeter never flashes * Solid near-black behind the wallpaper Picture, so the greeter never flashes
* white and stays legible if no wallpaper has been synced yet. */ * white and stays legible if no wallpaper has been synced yet. Monospace
* everywhere, matching the shell. */
window, window,
overlay { overlay {
background-color: @cq_bg; background-color: @cq_bg;
color: @cq_text; color: @cq_magenta;
font-family: "Agave Nerd Font Mono", "JetBrains Mono", monospace;
} }
/* ── Cards: the login frame and the clock frame both carry `.background` ──── */ /* ── Cards: the login frame and the clock frame both carry `.background` ────
* Translucent holographic glass: a faint magenta scanline field + a soft violet
* top-glow layered over a dark translucent fill, ringed by a thin glowing
* magenta border — projected light, not an opaque slab. */
frame.background { frame.background {
background-color: alpha(@cq_bg, 0.86); background-color: alpha(@cq_bg, 0.62);
background-image:
repeating-linear-gradient(0deg,
alpha(@cq_magenta, 0.05) 0px, alpha(@cq_magenta, 0.05) 1px,
transparent 1px, transparent 4px),
radial-gradient(circle at 50% -10%, alpha(@cq_violet, 0.30), transparent 72%);
color: @cq_text; color: @cq_text;
border: 2px solid @cq_pink; border: 1.5px solid alpha(@cq_magenta, 0.85);
border-radius: 20px; border-radius: 18px;
padding: 10px 16px; padding: 12px 18px;
box-shadow: 0 0 26px 2px alpha(@cq_pink, 0.40), box-shadow: 0 0 34px 2px alpha(@cq_magenta, 0.34),
0 0 12px 1px alpha(@cq_violet, 0.30),
inset 0 0 60px alpha(@cq_violet, 0.14); inset 0 0 60px alpha(@cq_violet, 0.14);
} }
/* The clock card sits flush on the top edge (ReGreet flattens its top corners /* 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 * via inline_css at priority 800, which wins over this). Big glowing HUD readout. */
* style the glow + fill, not fight the border geometry). */
frame.background > label { frame.background > label {
font-family: "JetBrains Mono", monospace; font-family: "Agave Nerd Font Mono", "JetBrains Mono", monospace;
font-size: 30pt; font-size: 30pt;
font-weight: 700; font-weight: 700;
letter-spacing: 4px; letter-spacing: 5px;
padding: 4px 26px; padding: 4px 28px;
color: @cq_text; color: @cq_magenta;
text-shadow: 0 0 12px alpha(@cq_pink, 0.75), text-shadow: 0 0 14px alpha(@cq_magenta, 0.80),
0 0 22px alpha(@cq_violet, 0.55); 0 0 26px alpha(@cq_violet, 0.55);
} }
/* ── Text & labels inside the login card ─────────────────────────────────── */ /* ── Text & labels inside the login card ─────────────────────────────────── */
frame.background > grid > label { frame.background > grid > label {
color: @cq_text; color: @cq_magenta;
text-shadow: 0 0 10px alpha(@cq_magenta, 0.45);
margin: 0 6px; margin: 0 6px;
} }
/* ── Entries: username / session / password ──────────────────────────────── */ /* ── Entries: username / session / password ──────────────────────────────── */
entry, entry,
entry.password { entry.password {
background-color: alpha(#000000, 0.45); background-color: alpha(#000000, 0.42);
color: @cq_text; color: @cq_text;
caret-color: @cq_pink; caret-color: @cq_magenta;
border: 2px solid alpha(@cq_violet, 0.85); border: 1.5px solid alpha(@cq_violet, 0.85);
border-radius: 12px; border-radius: 11px;
padding: 8px 12px; padding: 8px 12px;
min-height: 34px; min-height: 34px;
transition: border-color 160ms ease, box-shadow 160ms ease; transition: border-color 160ms ease, box-shadow 160ms ease;
@ -101,49 +116,51 @@ entry.password {
entry image, entry image,
entry.password image { /* the peek-password / clear icons */ entry.password image { /* the peek-password / clear icons */
color: @cq_violet; color: @cq_magenta;
} }
entry:focus-within, entry:focus-within,
entry.password:focus-within { entry.password:focus-within {
border-color: @cq_pink; border-color: @cq_magenta;
box-shadow: 0 0 14px 1px alpha(@cq_pink, 0.55); box-shadow: 0 0 16px 1px alpha(@cq_magenta, 0.55),
inset 0 0 10px alpha(@cq_magenta, 0.12);
} }
entry selection { entry selection {
background-color: @cq_pink; background-color: @cq_magenta;
color: @cq_bg; color: @cq_bg;
} }
/* ── Combo boxes: user + session pickers render as `combobox > button` ───── */ /* ── Combo boxes: user + session pickers render as `combobox > button` ───── */
combobox > button.combo { combobox > button.combo {
background-color: alpha(#000000, 0.45); background-color: alpha(#000000, 0.42);
color: @cq_text; color: @cq_text;
border: 2px solid alpha(@cq_violet, 0.85); border: 1.5px solid alpha(@cq_violet, 0.85);
border-radius: 12px; border-radius: 11px;
padding: 6px 12px; padding: 6px 12px;
min-height: 34px; min-height: 34px;
} }
combobox > button.combo:hover { combobox > button.combo:hover {
border-color: @cq_pink; border-color: @cq_magenta;
box-shadow: 0 0 12px alpha(@cq_magenta, 0.40);
} }
combobox arrow { combobox arrow {
color: @cq_pink; color: @cq_magenta;
min-height: 16px; min-height: 16px;
min-width: 16px; min-width: 16px;
} }
/* The drop-down popover list */
combobox popover contents { combobox popover contents {
background-color: @cq_bg; background-color: alpha(@cq_bg, 0.96);
border: 1px solid @cq_violet; border: 1.5px solid @cq_violet;
border-radius: 12px; border-radius: 11px;
box-shadow: 0 0 18px alpha(@cq_violet, 0.40);
} }
combobox popover contents :selected { combobox popover contents :selected {
background-color: @cq_pink; background-color: @cq_magenta;
color: @cq_bg; color: @cq_bg;
} }
@ -151,17 +168,18 @@ combobox popover contents :selected {
button { button {
color: @cq_text; color: @cq_text;
background-color: alpha(@cq_violet, 0.16); background-color: alpha(@cq_violet, 0.16);
border: 2px solid alpha(@cq_violet, 0.85); border: 1.5px solid alpha(@cq_violet, 0.85);
border-radius: 12px; border-radius: 11px;
padding: 8px 18px; padding: 8px 18px;
min-height: 34px; min-height: 34px;
transition: all 160ms ease; transition: all 160ms ease;
} }
button:hover { button:hover {
background-color: alpha(@cq_violet, 0.32); background-color: alpha(@cq_violet, 0.30);
border-color: @cq_pink; border-color: @cq_magenta;
color: #FFFFFF; color: #FFFFFF;
box-shadow: 0 0 14px alpha(@cq_magenta, 0.40);
} }
button:active { button:active {
@ -177,27 +195,29 @@ button.toggle {
} }
button.toggle:checked { button.toggle:checked {
background-color: alpha(@cq_pink, 0.20); background-color: alpha(@cq_magenta, 0.20);
border-color: @cq_pink; border-color: @cq_magenta;
color: @cq_pink; color: @cq_magenta;
} }
/* Primary action: Login. The `window` prefix (specificity 0,1,2) and /* Primary action: Login. The `window` prefix (specificity 0,1,2) and
* `background-image: none` are needed to beat Adwaita's own accent styling. */ * `background-image: none` beat Adwaita's own accent styling. Solid Cosmonaut
* magenta with a strong glow — the one always-magenta control (cq_magenta is
* outside apply-theme's palette map, so Login stays magenta across themes). */
window button.suggested-action { window button.suggested-action {
background-image: none; background-image: none;
background-color: @cq_pink; background-color: @cq_magenta;
color: @cq_bg; color: @cq_bg;
border: 2px solid @cq_pink; border: 1.5px solid @cq_magenta;
font-weight: 700; font-weight: 700;
box-shadow: 0 0 16px alpha(@cq_pink, 0.45); box-shadow: 0 0 18px alpha(@cq_magenta, 0.55);
} }
window button.suggested-action:hover { window button.suggested-action:hover {
background-color: #FF1A5E; background-color: #FF2ABF;
border-color: #FF1A5E; border-color: #FF2ABF;
color: @cq_bg; color: @cq_bg;
box-shadow: 0 0 22px alpha(@cq_pink, 0.75); box-shadow: 0 0 26px alpha(@cq_magenta, 0.85);
} }
window button.suggested-action:active { window button.suggested-action:active {
@ -205,13 +225,12 @@ window button.suggested-action:active {
border-color: @cq_violet; border-color: @cq_violet;
} }
/* Destructive actions: Reboot / Power Off — quiet red outline, red glow on /* Destructive actions: Reboot / Power Off — quiet red outline, red glow on hover */
* hover (overrides Adwaita's solid-red fill; same specificity trick). */
window button.destructive-action { window button.destructive-action {
background-image: none; background-image: none;
background-color: transparent; background-color: transparent;
color: @cq_text; color: @cq_text;
border: 2px solid alpha(@cq_red, 0.65); border: 1.5px solid alpha(@cq_red, 0.60);
} }
window button.destructive-action:hover { window button.destructive-action:hover {
@ -222,8 +241,6 @@ window button.destructive-action:hover {
} }
/* ── PAM notification bar ────────────────────────────────────────────────── */ /* ── 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 { infobar {
background: transparent; background: transparent;
border: none; border: none;
@ -233,8 +250,8 @@ infobar {
infobar > revealer > box { infobar > revealer > box {
background-color: alpha(@cq_bg, 0.90); background-color: alpha(@cq_bg, 0.90);
color: @cq_text; color: @cq_text;
border: 2px solid @cq_violet; border: 1.5px solid @cq_violet;
border-radius: 12px; border-radius: 11px;
box-shadow: 0 0 18px alpha(@cq_violet, 0.40); box-shadow: 0 0 18px alpha(@cq_violet, 0.40);
} }
@ -252,6 +269,6 @@ infobar label {
tooltip { tooltip {
background-color: @cq_violet; background-color: @cq_violet;
color: @cq_bg; color: @cq_bg;
border-radius: 10px; border-radius: 9px;
padding: 4px 8px; padding: 4px 8px;
} }

4
etc-greetd/regreet.toml
View File

@ -29,7 +29,7 @@ cursor_theme_name = "Adwaita"
cursor_blink = true cursor_blink = true
# Bumped well above the 11pt the old greeter used, so the greeter reads large on # Bumped well above the 11pt the old greeter used, so the greeter reads large on
# the 4K panel. Tune here (or via GDK_SCALE in regreet-session.sh) to taste. # the 4K panel. Tune here (or via GDK_SCALE in regreet-session.sh) to taste.
font_name = "JetBrains Mono 16" font_name = "Agave Nerd Font Mono 15"
icon_theme_name = "Adwaita" icon_theme_name = "Adwaita"
# Clean base for regreet.css to paint on (see header). The CyberQueer colours # Clean base for regreet.css to paint on (see header). The CyberQueer colours
# live in /etc/greetd/regreet.css, not in this theme. # live in /etc/greetd/regreet.css, not in this theme.
@ -40,7 +40,7 @@ reboot = ["systemctl", "reboot"]
poweroff = ["systemctl", "poweroff"] poweroff = ["systemctl", "poweroff"]
[appearance] [appearance]
greeting_msg = "Welcome back" greeting_msg = "-< CREW AUTHENTICATION >-"
[widget.clock] [widget.clock]
format = "%H:%M" format = "%H:%M"