taninux/packaging/tanin-greet/tanin-greet.css

/* =========================================================================
 * tanin-greet — stylesheet. Mirrors the eww topbar (eww.scss): Fuji palette,
 * monochrome, pill shapes, Inter Medium. Accent is the brand Fuji violet.
 * ========================================================================= */
@define-color bg      #0f0f0f;
@define-color bg_alt  #191919;
@define-color bg_hi   #242424;
@define-color fg      #f0f0f0;
@define-color yuki    #f0f0f0;   /* snow white — pill fill */
@define-color muted   #8a8a8a;
@define-color accent  #a39ec4;

/* No font-family override — inherit the system UI font. */
.greeter {
  font-weight: 500;
  color: @fg;
}
* { text-shadow: none; -gtk-icon-shadow: none; outline: none; }

/* dark scrim over the wallpaper — keeps text readable, keeps it moody */
.scrim { background-color: alpha(black, 0.55); }

/* ---- top bar: the eww bar look (opaque #0f0f0f strip) ------------------- *
 * left = session dropdown · center = clock (time/day/date) · right = power.  */
.topbar {
  background-color: @bg;
  min-height: 34px;
  padding: 0 12px;
}
.topbar .clock {
  color: @fg;
  font-size: 13px;
}

/* session dropdown, top-left corner — quiet on the black bar, no box */
.session-dd,
.session-dd > button {
  background: transparent;
  background-image: none;
  border: none;
  box-shadow: none;
  min-height: 0;
  padding: 2px 6px;
  color: @muted;
  font-size: 12px;
}
.session-dd > button:hover { color: @fg; }

/* power button — NO background at all, just the glyph */
.topbar .power,
.topbar .power > button {
  background: transparent;
  background-image: none;
  border: none;
  box-shadow: none;
  min-height: 0;
  min-width: 0;
  padding: 2px 6px;
  color: @muted;
}
.topbar .power:hover,
.topbar .power > button:hover { color: @accent; background: transparent; }

/* TANINUX wordmark — bottom center, understated */
.brand {
  color: @fg;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 3px;
  opacity: 0.8;
}

/* ---- centered login card (flat, no heavy frame — minimal) --------------- *
 * NB: class is .logincard, never .card — libadwaita's built-in .card recipe
 * paints an elevated background + shadow (the "solid box, too big" bug). */
.logincard { padding: 8px; background: transparent; box-shadow: none; }

.avatar {
  color: @fg;
  background-color: alpha(@accent, 0.14);
  border-radius: 999px;
  padding: 16px;
  margin-bottom: 6px;
}

/* username row — plain name + chevron on the right, same width as the pill so
 * the chevron sits where the password pill ends. No background (just the name). */
.namerow { min-width: 300px; }
.username {
  color: @yuki;
  font-size: 17px;
  font-weight: 600;
}
.userswitch {
  background: transparent;
  border: none;
  box-shadow: none;
  min-height: 0;
  min-width: 0;
  padding: 2px 4px;
  color: @muted;
}
.userswitch:hover { color: @fg; }

/* password pill — snow white (yuki), dark text, accent focus ring.
 * border-radius 999px like the bar's workspaces/clock. */
.pill {
  min-width: 300px;
  min-height: 0;
  background-color: alpha(@bg_alt, 0.45);     /* greyish, slightly transparent */
  color: @fg;
  border: 1.5px solid alpha(@fg, 0.22);       /* grey border (unfocused) */
  border-radius: 999px;
  padding: 11px 18px;
  box-shadow: none;
}
entry.pill { caret-color: @yuki; }
entry.pill text { color: @fg; }
entry.pill text > placeholder { color: alpha(@fg, 0.45); }
entry.pill image { color: alpha(@fg, 0.6); }        /* peek-eye icon */
/* clicked / focused → white border */
.pill:focus-within {
  border-color: @yuki;
  background-color: alpha(@bg_alt, 0.55);
  box-shadow: none;
}

/* popup lists (session dropdown, user switcher).
 * IMPORTANT: only style `popover > contents` — the outer `popover` node also
 * covers the reserved shadow/margin area, so a solid bg there paints a huge
 * solid box. Keep the outer node fully transparent. */
popover {
  background: transparent;
  background-image: none;
  border: none;
  box-shadow: none;
  padding: 0;
}
popover > contents {
  background-color: @bg_alt;
  color: @fg;
  border: 1px solid alpha(@fg, 0.06);
  border-radius: 12px;
  box-shadow: 0 8px 24px alpha(black, 0.45);
  padding: 6px;
  min-width: 0;
}
/* kill the inner list's OWN themed background (the lighter nested box) so the
 * whole popover reads as one uniform surface. */
popover listview,
popover scrolledwindow,
popover scrolledwindow > viewport,
popover .view {
  background: transparent;
  background-color: transparent;
  color: @fg;
}
popover listview > row,
popover .menuitem { border-radius: 8px; padding: 5px 10px; }
popover listview > row:selected,
popover listview > row:hover,
popover row:selected,
popover .menuitem:hover { background-color: alpha(@accent, 0.14); color: @accent; }

.error { color: #e0a3a3; font-size: 12px; margin-top: 4px; }

/* power popover buttons */
.menuitem {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 8px;
  padding: 6px 14px;
  color: @fg;
}
.menuitem:hover { background-color: alpha(@accent, 0.14); color: @accent; }