feat(redesign): roll subpage hero across all pages + Aurora Button + JinjaEditor + pulse fix
Big batch — every secondary page now wears the same glass-card hero that landed on Providers earlier: - notification-trackers, tracking-configs, template-configs - command-trackers, command-configs, command-template-configs - targets (with active-tab title), actions - bots (telegram / email / matrix tabs) - settings, settings/backup, users Each page picks an italic-em emphasis word, an editorial crumb (e.g. 'Routing · Notification', 'Operators · Bots', 'System · Maintenance'), a count meter, and entity-specific status pills derived from live data: 'X armed / Y paused' for trackers and actions, 'X types' for configs/templates, 'X channels' or '$N receivers' for targets. Other changes in this commit: - Button.svelte: redesigned. Primary variant becomes a real Aurora CTA — gradient lavender → orchid pill, 40px tall md / 34px sm, inset highlight, lift + glow on hover. Secondary, danger, ghost variants reworked to match. The 'Add <Type>' button on every page now reads as the page's primary action instead of a flat lavender rectangle. - JinjaEditor: overrode oneDark's hardcoded background with !important so the editor surface picks up var(--color-input-bg). Gutters / scroller / selection / autocomplete tooltip all match Aurora glass tokens now. Template editors stop visually clashing with the surrounding panel. - Aurora pulse dot: rewritten as a self-contained box-shadow glow pulse (no transform, no pseudo-element). The dot's bounding box is now stable so ancestors with overflow:hidden can never clip the visible dot — only the (decorative) outer glow halo. Fixes the 'half-moon clipping' on the dashboard 'On watch' deck. - topbar-action.svelte.ts left in tree but unused (topbar CTA was reverted per your call). Will clean up in a later commit. - Form input baseline styling moved into app.css (rounded 0.625rem, glass background, hover/focus rings) so untouched filter inputs on the per-type pages stop looking out of place. i18n: emphasis / countLabel / armed / paused / receiver / receivers / channelsCount keys added across en + ru. Build clean: 0 errors, 61 pre-existing a11y warnings unchanged.
This commit is contained in:
+93
-14
@@ -181,19 +181,51 @@ body::after {
|
||||
|
||||
[data-theme="light"] body::before { opacity: 0.85; }
|
||||
|
||||
/* Form controls */
|
||||
/* Form controls — Aurora-native defaults */
|
||||
input, select, textarea {
|
||||
color: var(--color-foreground);
|
||||
background-color: var(--color-input-bg);
|
||||
border-color: var(--color-rule-strong);
|
||||
border: 1px solid var(--color-rule-strong);
|
||||
border-radius: 0.625rem;
|
||||
font-family: var(--font-sans);
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
/* Default text inputs / search / textarea: comfortable padding.
|
||||
`<input type="checkbox">` and `<input type="radio">` are excluded so
|
||||
they keep their native compact sizing. Any explicit `padding`/`p-*`
|
||||
utility from a callsite still wins. */
|
||||
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
|
||||
textarea {
|
||||
padding: 0.55rem 0.85rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
select {
|
||||
padding: 0.55rem 2.2rem 0.55rem 0.85rem;
|
||||
font-size: 0.875rem;
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236f6c92' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 0.75rem center;
|
||||
background-size: 12px;
|
||||
}
|
||||
|
||||
input:hover:not(:focus-visible):not([disabled]),
|
||||
select:hover:not(:focus-visible):not([disabled]),
|
||||
textarea:hover:not(:focus-visible):not([disabled]) {
|
||||
border-color: var(--color-rule-strong);
|
||||
background-color: var(--color-glass-strong);
|
||||
}
|
||||
|
||||
input:focus-visible, select:focus-visible, textarea:focus-visible {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px var(--color-glow), 0 0 12px var(--color-glow);
|
||||
box-shadow: 0 0 0 3px var(--color-glow);
|
||||
}
|
||||
|
||||
input::placeholder, textarea::placeholder {
|
||||
color: var(--color-muted-foreground);
|
||||
}
|
||||
|
||||
button:focus-visible, a:focus-visible {
|
||||
@@ -276,9 +308,41 @@ button:focus-visible, a:focus-visible {
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes aurora-pulse {
|
||||
0%, 100% { transform: scale(1); opacity: 1; }
|
||||
50% { transform: scale(1.5); opacity: 0.6; }
|
||||
@keyframes aurora-pulse-glow-mint {
|
||||
0%, 100% {
|
||||
box-shadow:
|
||||
0 0 4px color-mix(in srgb, var(--color-mint) 60%, transparent),
|
||||
0 0 0 0 color-mix(in srgb, var(--color-mint) 0%, transparent);
|
||||
}
|
||||
50% {
|
||||
box-shadow:
|
||||
0 0 10px color-mix(in srgb, var(--color-mint) 80%, transparent),
|
||||
0 0 0 4px color-mix(in srgb, var(--color-mint) 25%, transparent);
|
||||
}
|
||||
}
|
||||
@keyframes aurora-pulse-glow-citrus {
|
||||
0%, 100% {
|
||||
box-shadow:
|
||||
0 0 4px color-mix(in srgb, var(--color-citrus) 60%, transparent),
|
||||
0 0 0 0 color-mix(in srgb, var(--color-citrus) 0%, transparent);
|
||||
}
|
||||
50% {
|
||||
box-shadow:
|
||||
0 0 10px color-mix(in srgb, var(--color-citrus) 80%, transparent),
|
||||
0 0 0 4px color-mix(in srgb, var(--color-citrus) 25%, transparent);
|
||||
}
|
||||
}
|
||||
@keyframes aurora-pulse-glow-coral {
|
||||
0%, 100% {
|
||||
box-shadow:
|
||||
0 0 4px color-mix(in srgb, var(--color-coral) 60%, transparent),
|
||||
0 0 0 0 color-mix(in srgb, var(--color-coral) 0%, transparent);
|
||||
}
|
||||
50% {
|
||||
box-shadow:
|
||||
0 0 10px color-mix(in srgb, var(--color-coral) 80%, transparent),
|
||||
0 0 0 4px color-mix(in srgb, var(--color-coral) 25%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fade-slide-in {
|
||||
@@ -343,15 +407,30 @@ button:focus-visible, a:focus-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Live pulse dot — for "live" / armed indicators */
|
||||
/* Live pulse dot — for "live" / armed indicators.
|
||||
Pulse is a self-contained box-shadow glow on the dot. No transform,
|
||||
no pseudo-element — the dot's own bounding box never changes, so
|
||||
ancestors with overflow:hidden can only clip the (decorative) glow,
|
||||
never the dot itself. */
|
||||
.aurora-pulse {
|
||||
width: 7px; height: 7px;
|
||||
width: 8px; height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-mint);
|
||||
box-shadow: 0 0 8px var(--color-mint);
|
||||
display: inline-block;
|
||||
animation: aurora-pulse 1.4s ease-in-out infinite;
|
||||
flex-shrink: 0;
|
||||
animation: aurora-pulse-glow-mint 1.6s ease-in-out infinite;
|
||||
}
|
||||
.aurora-pulse.warn {
|
||||
background: var(--color-citrus);
|
||||
animation-name: aurora-pulse-glow-citrus;
|
||||
}
|
||||
.aurora-pulse.error {
|
||||
background: var(--color-coral);
|
||||
animation-name: aurora-pulse-glow-coral;
|
||||
}
|
||||
.aurora-pulse.idle {
|
||||
background: var(--color-muted-foreground);
|
||||
box-shadow: none;
|
||||
opacity: 0.5;
|
||||
animation: none;
|
||||
}
|
||||
.aurora-pulse.warn { background: var(--color-citrus); box-shadow: 0 0 8px var(--color-citrus); }
|
||||
.aurora-pulse.error { background: var(--color-coral); box-shadow: 0 0 8px var(--color-coral); }
|
||||
.aurora-pulse.idle { background: var(--color-muted-foreground); box-shadow: none; opacity: 0.5; animation: none; }
|
||||
|
||||
Reference in New Issue
Block a user