/* user-preferences.css Aplica estilos globales basados en los atributos data-* de la etiqueta . Estos estilos sobrescriben configuraciones de UI (animaciones, densidades) de forma global. */ /* ========================================= 1. MOTION & ANIMATION ========================================= */ html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* ========================================= 2. PERFORMANCE MODE ========================================= */ /* lite: Reduces heavy blur and box-shadows slightly */ html[data-performance="lite"] { --glass-blur: blur(4px) !important; } /* high: Disables all expensive filters, shadows, and animations */ html[data-performance="high"] { --glass-blur: blur(0px) !important; --bg-panel: rgba(17, 26, 38, 0.98) !important; /* Más opaco, sin blur */ } html[data-performance="high"] * { box-shadow: none !important; backdrop-filter: none !important; } html[data-performance="high"] .blink { animation: none !important; opacity: 1 !important; } /* ========================================= 3. DENSITY ========================================= */ html[data-density="compact"] { /* Compact mode reduces standard paddings and gaps */ --panel-padding: 8px !important; --gap-base: 5px !important; } html[data-density="compact"] .panel { padding: var(--panel-padding) !important; } html[data-density="compact"] .hud-wrapper, html[data-density="compact"] .camera-grid, html[data-density="compact"] .search-box { gap: var(--gap-base) !important; } html[data-density="spacious"] { --panel-padding: 24px !important; --gap-base: 24px !important; } html[data-density="spacious"] .panel { padding: var(--panel-padding) !important; } html[data-density="spacious"] .hud-wrapper, html[data-density="spacious"] .camera-grid, html[data-density="spacious"] .search-box { gap: var(--gap-base) !important; } /* ========================================= 4. TEXT SIZE ========================================= */ html[data-text-size="small"] { --font-size-base: clamp(10px, 1vw + 6px, 12px) !important; --font-size-sm: clamp(8px, 0.8vw + 5px, 10px) !important; --font-size-lg: clamp(12px, 1.2vw + 8px, 16px) !important; } html[data-text-size="large"] { --font-size-base: clamp(13px, 1vw + 10px, 16px) !important; --font-size-sm: clamp(11px, 0.8vw + 9px, 14px) !important; --font-size-lg: clamp(16px, 1.2vw + 12px, 20px) !important; } /* ========================================= 5. ACCESSIBILITY / HIGH CONTRAST ========================================= */ html[data-high-contrast="true"] { --text-light: #ffffff !important; --text-main: #ffffff !important; --bg-panel: #000000 !important; --border-color: #ffffff !important; --bg-panel-dark: #000000 !important; } html[data-high-contrast="true"] .panel { border: 2px solid var(--border-color) !important; } /* ========================================= 6. LARGE TOUCH TARGETS (MÓVIL) ========================================= */ html[data-large-touch="true"] button, html[data-large-touch="true"] .view-tab, html[data-large-touch="true"] input, html[data-large-touch="true"] select { min-height: 48px !important; min-width: 48px !important; padding: 10px !important; } /* ========================================= 7. SIMPLIFY OVERLAYS ========================================= */ html[data-simplify-overlays="true"] .panel::before, html[data-simplify-overlays="true"] .panel::after, html[data-simplify-overlays="true"] body::before { display: none !important; /* Removes decorative gradients and grid lines */ }