stay on their light surface defaults).
* Tailwind handles layout / surfaces / text colors. This file only covers
* the utilities Tailwind does not.
*/
/* Thin custom scrollbar — apply via class="scrollable" on any overflow container. */
.scrollable::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.scrollable::-webkit-scrollbar-track {
background: transparent;
}
.scrollable::-webkit-scrollbar-thumb {
background: #404040;
border-radius: 9999px;
}
.scrollable::-webkit-scrollbar-thumb:hover {
background: #525252;
}
/* Pill / chip — for scope tags, status hints, small labels. */
.chip {
display: inline-block;
padding: 2px 8px;
margin: 2px;
border-radius: 9999px;
background: #404040;
color: #d4d4d4;
font-size: 0.7rem;
font-weight: 500;
}
/* Raw secret block — fixed-width, full-bleed, dark surface. */
.raw-key {
padding: 8px 12px;
border: 1px solid #404040;
border-radius: 8px;
background: #171717;
color: #f5f5f5;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
word-break: break-all;
}
/* CSS-only tooltip. Wrap a trigger with .tooltip-wrap; put the label in .tooltip-box. */
.tooltip-wrap {
position: relative;
display: inline-flex;
align-items: center;
}
.tooltip-wrap .tooltip-box {
display: none;
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
z-index: 50;
transform: translateX(-50%);
padding: 4px 8px;
border: 1px solid #404040;
border-radius: 6px;
background: #262626;
color: #d4d4d4;
font-size: 0.7rem;
font-weight: 400;
white-space: nowrap;
pointer-events: none;
}
.tooltip-wrap:hover .tooltip-box {
display: block;
}
/* Resizable table columns — pair with table[data-resizable] and the matching JS. */
table[data-resizable] th {
position: relative;
}
.col-resize-handle {
position: absolute;
top: 0;
right: 0;
z-index: 1;
width: 4px;
height: 100%;
cursor: col-resize;
user-select: none;
}
.col-resize-handle:hover,
.col-resize-handle.resizing {
background: #525252;
}
/* Sortable column header. */
.sortable-header {
cursor: pointer;
user-select: none;
}
.sortable-header:hover {
color: #f5f5f5;
}
/* ─────────────────────────────────────────────────────────────────────────────
* Lively theme — inspired by Elysia's Scalar theme.
* Default colorway here is Elysia pink; each admin-ui ships its own
* `colorway.css` next to index.html to override these variables. The shared
* file owns structure + animation + utilities; per-UI files own colors only.
*
* Variables a colorway file may override:
* --wa-color-brand-* — Web Awesome brand ramp (buttons, callouts, focus)
* --aurora-1/2/3 — RGB triplets used by the body aurora gradient
* --admin-accent-soft — lighter accent (sidebar title, active text)
* --admin-accent-on — dark text used on accent fills (selection)
* --admin-accent-card-inset— inset shine on main-pane cards
*
* Derived (computed from the above; rarely overridden directly):
* --admin-accent = rgb(var(--aurora-1))
* --admin-accent-glow = rgba(var(--aurora-1), 0.28)
* --admin-accent-tint = rgba(var(--aurora-1), 0.22)
* --admin-accent-border = rgba(var(--aurora-1), 0.18)
* ──────────────────────────────────────────────────────────────────────────── */
:root {
/* Brand ramp → Elysia pink (Web Awesome built-in palette). */
--wa-color-brand-95: var(--wa-color-pink-95);
--wa-color-brand-90: var(--wa-color-pink-90);
--wa-color-brand-80: var(--wa-color-pink-80);
--wa-color-brand-70: var(--wa-color-pink-70);
--wa-color-brand-60: var(--wa-color-pink-60);
--wa-color-brand-50: var(--wa-color-pink-50);
--wa-color-brand-40: var(--wa-color-pink-40);
--wa-color-brand-30: var(--wa-color-pink-30);
--wa-color-brand-20: var(--wa-color-pink-20);
--wa-color-brand-10: var(--wa-color-pink-10);
--wa-color-brand-05: var(--wa-color-pink-05);
--wa-color-brand: var(--wa-color-pink);
--wa-color-brand-on: var(--wa-color-pink-on);
/* Aurora RGB triplets — referenced from the body gradient + derived accent vars. */
--aurora-1: 240, 98, 146; /* pink-400 — primary accent */
--aurora-2: 96, 165, 250; /* blue-400 — secondary glow */
--aurora-3: 94, 234, 212; /* teal-300 — tertiary glow */
--admin-accent-soft: #ff8fb1;
--admin-accent-on: #2a040b;
--admin-accent-card-inset: rgba(255, 143, 177, 0.06);
/* Derived — colorway files normally don't need to touch these. */
--admin-accent: rgb(var(--aurora-1));
--admin-accent-glow: rgba(var(--aurora-1), 0.28);
--admin-accent-tint: rgba(var(--aurora-1), 0.22);
--admin-accent-border: rgba(var(--aurora-1), 0.18);
}
/* Aurora-flare page background — three layered radial gradients + a diagonal
* stripe sweep. RGB triplets come from --aurora-1/2/3 so each colorway gets
* its own aurora automatically. background-attachment: fixed keeps the glow
* anchored to the viewport regardless of scroll. */
body {
background:
radial-gradient(
1200px 700px at 0% 0%,
rgba(var(--aurora-1), 0.28),
transparent 55%
),
radial-gradient(
1100px 600px at 100% 0%,
rgba(var(--aurora-2), 0.18),
transparent 55%
),
radial-gradient(
900px 500px at 50% -10%,
rgba(var(--aurora-3), 0.12),
transparent 55%
),
repeating-linear-gradient(
115deg,
transparent 0%,
transparent 6%,
rgba(var(--aurora-1), 0.07) 8%,
transparent 14%,
rgba(var(--aurora-3), 0.05) 20%,
rgba(var(--aurora-2), 0.06) 28%,
transparent 35%
),
#171717;
background-attachment: fixed;
}
/* Brand-tinted text selection. */
::selection {
background: var(--admin-accent-soft);
color: var(--admin-accent-on);
}
/* Sidebar — slim brand strip at the top, soft slide-in on load. */
aside {
position: relative;
animation: admin-aside-in 0.4s ease-out;
}
aside::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, var(--admin-accent), transparent 80%);
}
@keyframes admin-aside-in {
from {
opacity: 0;
transform: translateX(-6px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Sidebar title (the first heading-style inside the rail). */
aside > div.text-lg.font-semibold {
color: var(--admin-accent-soft);
letter-spacing: 0.03em;
}
/* Active sidebar nav item — pink-tinted background, pink text, glowing left
* marker. Selectors match Alpine's active-state class swap and out-specific
* Tailwind's bg-neutral-700 / text-neutral-100 utilities (3 element selectors
* vs Tailwind's 1 class). */
aside nav button {
position: relative;
}
aside nav button[class~="bg-neutral-700"] {
background-color: var(--admin-accent-tint);
color: var(--admin-accent-soft);
}
aside nav button[class~="bg-neutral-700"]::before {
content: "";
position: absolute;
left: -4px;
top: 6px;
bottom: 6px;
width: 3px;
border-radius: 9999px;
background: var(--admin-accent);
box-shadow: 0 0 8px var(--admin-accent-glow);
}
/* Brand-tinted scrollbar thumb on hover. */
.scrollable::-webkit-scrollbar-thumb:hover {
background: var(--admin-accent);
}
/* Collapsed sidebar — driven by html.sidebar-collapsed.
* A tiny inline