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:
@@ -84,23 +84,54 @@
|
||||
}
|
||||
}),
|
||||
EditorView.lineWrapping,
|
||||
EditorView.theme({
|
||||
'&': { fontSize: '13px', fontFamily: "'Consolas', 'Monaco', 'Courier New', monospace" },
|
||||
'.cm-content': { minHeight: `${rows * 1.5}em`, padding: '8px' },
|
||||
'.cm-editor': { borderRadius: '0.375rem', border: '1px solid var(--color-border)' },
|
||||
'.cm-focused': { outline: '2px solid var(--color-primary)', outlineOffset: '0px' },
|
||||
'.cm-error-line': { backgroundColor: 'rgba(239, 68, 68, 0.2)', outline: '1px solid rgba(239, 68, 68, 0.4)' },
|
||||
'.ͼc': { color: '#e879f9' },
|
||||
'.ͼd': { color: '#38bdf8' },
|
||||
'.ͼ5': { color: '#6b7280' },
|
||||
'.cm-tooltip-autocomplete': {
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: '0.375rem',
|
||||
fontSize: '12px',
|
||||
},
|
||||
}),
|
||||
];
|
||||
// Apply oneDark first so its syntax-token colors are kept,
|
||||
// then override with our Aurora-aware theme so background,
|
||||
// borders, and gutters match the rest of the design.
|
||||
if (isDark) extensions.push(oneDark);
|
||||
extensions.push(EditorView.theme({
|
||||
'&': {
|
||||
fontSize: '13px',
|
||||
fontFamily: 'var(--font-mono)',
|
||||
backgroundColor: 'var(--color-input-bg) !important',
|
||||
borderRadius: '14px',
|
||||
border: '1px solid var(--color-rule-strong)',
|
||||
color: 'var(--color-foreground)',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
'.cm-editor': { backgroundColor: 'transparent !important', borderRadius: '14px' },
|
||||
'.cm-scroller': { backgroundColor: 'transparent !important' },
|
||||
'.cm-content': { minHeight: `${rows * 1.5}em`, padding: '12px 14px', caretColor: 'var(--color-primary)' },
|
||||
'.cm-gutters': {
|
||||
backgroundColor: 'transparent',
|
||||
color: 'var(--color-muted-foreground)',
|
||||
borderRight: '1px solid var(--color-border)',
|
||||
},
|
||||
'.cm-activeLineGutter': { backgroundColor: 'var(--color-glass-strong)' },
|
||||
'.cm-activeLine': { backgroundColor: 'var(--color-glass-strong)' },
|
||||
'.cm-cursor': { borderLeftColor: 'var(--color-primary)' },
|
||||
'.cm-selectionBackground, ::selection': { backgroundColor: 'var(--color-glass-elev) !important' },
|
||||
'&.cm-focused .cm-selectionBackground': { backgroundColor: 'var(--color-glow) !important' },
|
||||
'.cm-focused': { outline: 'none' },
|
||||
'&.cm-focused': { borderColor: 'var(--color-primary)', boxShadow: '0 0 0 3px var(--color-glow)' },
|
||||
'.cm-error-line': { backgroundColor: 'rgba(255, 138, 120, 0.18)', outline: '1px solid rgba(255, 138, 120, 0.4)' },
|
||||
'.ͼc': { color: 'var(--color-orchid)' },
|
||||
'.ͼd': { color: 'var(--color-sky)' },
|
||||
'.ͼ5': { color: 'var(--color-muted-foreground)' },
|
||||
'.cm-tooltip-autocomplete': {
|
||||
background: 'color-mix(in srgb, var(--color-background) 92%, transparent)',
|
||||
backdropFilter: 'blur(28px) saturate(160%)',
|
||||
border: '1px solid var(--color-rule-strong)',
|
||||
borderRadius: '12px',
|
||||
fontSize: '12px',
|
||||
boxShadow: '0 12px 30px -12px rgba(0,0,0,0.4)',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
'.cm-tooltip-autocomplete > ul > li[aria-selected]': {
|
||||
backgroundColor: 'var(--color-glass-elev)',
|
||||
color: 'var(--color-primary)',
|
||||
},
|
||||
}));
|
||||
if (placeholder) extensions.push(cmPlaceholder(placeholder));
|
||||
return extensions;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user