ac8905ca38
- Redesigned theme.css: deeper darks (#0f1117), glassmorphism tokens, accent glow, softer borders (rgba), spring/slow transitions, new radii - Added Inter + JetBrains Mono web fonts for premium typography - Enhanced global.css: focus rings with box-shadow, skeleton shimmer animation, glass-card class, fade-in page transitions, slide-up animations, badge-glow pulse - Created Skeleton component library: Skeleton, SkeletonRow, SkeletonTable, SkeletonChannelHeader, SkeletonChannelsList - Replaced spinner-text loading states with skeleton placeholders (Channels page, ChannelDetail header and content table) - Updated all card border-radius from radius-lg to radius-xl across all pages - Added responsive breakpoint stub for mobile (768px)
99 lines
2.9 KiB
CSS
99 lines
2.9 KiB
CSS
/* ── *arr Dark Theme ──
|
|
* Color palette matching Sonarr/Radarr aesthetic with modern glassmorphism touches.
|
|
* All UI components reference these custom properties.
|
|
*/
|
|
|
|
:root {
|
|
/* ── Backgrounds ── */
|
|
--bg-main: #0f1117;
|
|
--bg-sidebar: #0a0c10;
|
|
--bg-card: rgba(30, 33, 44, 0.8);
|
|
--bg-card-solid: #1e212c;
|
|
--bg-input: #1a1d26;
|
|
--bg-hover: rgba(255, 255, 255, 0.04);
|
|
--bg-selected: rgba(255, 255, 255, 0.08);
|
|
--bg-header: #13151c;
|
|
--bg-toolbar: #13151c;
|
|
--bg-modal-overlay: rgba(0, 0, 0, 0.7);
|
|
--bg-glass: rgba(20, 22, 30, 0.6);
|
|
|
|
/* ── Accent ── */
|
|
--accent: #e05d44;
|
|
--accent-hover: #f06a51;
|
|
--accent-subtle: rgba(224, 93, 68, 0.1);
|
|
--accent-glow: rgba(224, 93, 68, 0.25);
|
|
|
|
/* ── Text ── */
|
|
--text-primary: #e8e9ed;
|
|
--text-secondary: #8b8d97;
|
|
--text-muted: #4d5060;
|
|
--text-inverse: #0f1117;
|
|
--text-link: #e05d44;
|
|
|
|
/* ── Status colors ── */
|
|
--success: #34d058;
|
|
--success-bg: rgba(52, 208, 88, 0.1);
|
|
--warning: #ff9f43;
|
|
--warning-bg: rgba(255, 159, 67, 0.1);
|
|
--danger: #f05050;
|
|
--danger-bg: rgba(240, 80, 80, 0.1);
|
|
--info: #e05d44;
|
|
--info-bg: rgba(224, 93, 68, 0.1);
|
|
|
|
/* ── Borders ── */
|
|
--border: rgba(255, 255, 255, 0.06);
|
|
--border-light: rgba(255, 255, 255, 0.1);
|
|
--border-accent: rgba(224, 93, 68, 0.3);
|
|
|
|
/* ── Typography ── */
|
|
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
--font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
|
|
--font-size-xs: 0.6875rem;
|
|
--font-size-sm: 0.8125rem;
|
|
--font-size-base: 0.875rem;
|
|
--font-size-md: 1rem;
|
|
--font-size-lg: 1.125rem;
|
|
--font-size-xl: 1.375rem;
|
|
--font-size-2xl: 1.75rem;
|
|
|
|
/* ── Spacing ── */
|
|
--space-1: 0.25rem;
|
|
--space-2: 0.5rem;
|
|
--space-3: 0.75rem;
|
|
--space-4: 1rem;
|
|
--space-5: 1.25rem;
|
|
--space-6: 1.5rem;
|
|
--space-8: 2rem;
|
|
--space-10: 2.5rem;
|
|
--space-12: 3rem;
|
|
|
|
/* ── Border Radius ── */
|
|
--radius-sm: 4px;
|
|
--radius-md: 6px;
|
|
--radius-lg: 10px;
|
|
--radius-xl: 14px;
|
|
--radius-2xl: 20px;
|
|
--radius-full: 9999px;
|
|
|
|
/* ── Shadows ── */
|
|
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
|
|
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
|
|
--shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);
|
|
--shadow-glow: 0 0 20px rgba(224, 93, 68, 0.15);
|
|
|
|
/* ── Layout ── */
|
|
--sidebar-width: 220px;
|
|
--sidebar-collapsed: 56px;
|
|
--header-height: 56px;
|
|
|
|
/* ── Transitions ── */
|
|
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
--transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
--transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
--transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
|
|
/* ── Glassmorphism ── */
|
|
--glass-blur: 12px;
|
|
--glass-bg: rgba(20, 22, 30, 0.6);
|
|
--glass-border: rgba(255, 255, 255, 0.08);
|
|
}
|