mirror of
https://github.com/xpltdco/media-rip.git
synced 2026-04-03 02:53:58 -06:00
635da2be82
Wireframe background: - Canvas-based constellation animation — 45 floating nodes connected by proximity lines, subtle pulsing glow on select nodes - Blue primary + orange accent line colors match cyberpunk palette - Pauses on tab hidden, respects devicePixelRatio, ~0% CPU idle - Only renders when cyberpunk theme is active (v-if on theme) - Replaces CSS-only diagonal lines/pulse (removed from cyberpunk.css) Unified URL analysis: - Merged 'Checking URL...' and 'Extracting available formats...' into a single loading state with rotating messages: 'Peeking at the URL', 'Interrogating the server', 'Decoding the matrix', etc. - Both fetches run in parallel via Promise.all, single spinner shown - Phase messages rotate every 1.5s during analysis Admin format enforcement: - Backend PUT /admin/settings now accepts default_video_format and default_audio_format fields with validation - Stored in settings_overrides alongside welcome_message - UrlInput reads admin defaults from config store — Auto label shows 'Auto (.mp3)' etc. when admin has set a default - effectiveOutputFormat computed resolves admin default when user selects Auto, sends the resolved format to the backend
81 lines
2.7 KiB
CSS
81 lines
2.7 KiB
CSS
/*
|
|
* media.rip() — Cyberpunk Theme
|
|
*
|
|
* The default and flagship theme.
|
|
*
|
|
* Visual identity:
|
|
* - Electric blue (#00a8ff) + molten orange (#ff6b2b) accent pair
|
|
* - JetBrains Mono for display/code text
|
|
* - CRT scanline overlay (subtle, pointer-events: none)
|
|
* - Grid background pattern
|
|
* - Glow effects on focus/active states
|
|
* - Deep dark backgrounds (#0a0e14 base)
|
|
*
|
|
* ╔════════════════════════════════════════════╗
|
|
* ║ CUSTOM THEME AUTHORS: Copy this file as ║
|
|
* ║ a starting point. Override only the ║
|
|
* ║ variables you want to change. All tokens ║
|
|
* ║ are documented in base.css. ║
|
|
* ╚════════════════════════════════════════════╝
|
|
*/
|
|
|
|
:root[data-theme="cyberpunk"] {
|
|
/* ── Background & Surface ──
|
|
* Deep navy/charcoal base with blue-tinted surfaces.
|
|
* Creates depth through subtle value shifts.
|
|
*/
|
|
--color-bg: #0a0e14;
|
|
--color-surface: #131820;
|
|
--color-surface-hover: #1a2030;
|
|
--color-border: #1e2a3a;
|
|
|
|
/* ── Text ──
|
|
* High-contrast light text on dark backgrounds.
|
|
* Muted variant uses a cool blue-gray.
|
|
*/
|
|
--color-text: #e0e6ed;
|
|
--color-text-muted: #8090a0;
|
|
|
|
/* ── Accent ──
|
|
* Electric blue primary, molten orange secondary.
|
|
* The blue/orange complementary pair is the signature look.
|
|
*/
|
|
--color-accent: #00a8ff;
|
|
--color-accent-hover: #33bbff;
|
|
--color-accent-secondary: #ff6b2b;
|
|
|
|
/* ── Status Colors ── */
|
|
--color-success: #2ecc71;
|
|
--color-warning: #f39c12;
|
|
--color-error: #e74c3c;
|
|
|
|
/* ── Typography ──
|
|
* Display text uses monospace for that terminal aesthetic.
|
|
*/
|
|
--font-display: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;
|
|
|
|
/* ── Effects ──
|
|
* Scanlines: subtle horizontal lines mimicking CRT monitors.
|
|
* Grid: faint blue grid background for that "HUD" feel.
|
|
* Glow: blue shadow on focused elements.
|
|
*/
|
|
--effect-scanlines: repeating-linear-gradient(
|
|
0deg,
|
|
transparent,
|
|
transparent 2px,
|
|
rgba(0, 0, 0, 0.08) 2px,
|
|
rgba(0, 0, 0, 0.08) 4px
|
|
);
|
|
--effect-grid: linear-gradient(rgba(0, 168, 255, 0.03) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(0, 168, 255, 0.03) 1px, transparent 1px);
|
|
--effect-grid-size: 32px 32px;
|
|
--effect-glow: 0 0 20px rgba(0, 168, 255, 0.15);
|
|
|
|
/* ── Shadows ──
|
|
* Deep shadows with slight blue tint.
|
|
*/
|
|
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
|
|
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
|
|
--shadow-glow: 0 0 20px rgba(0, 168, 255, 0.15);
|
|
}
|