/* * theme-light.css * Tema claro para canalqc. * * Activalo con: o * document.documentElement.dataset.theme = 'light' * * NO modifica css/app.css ni index.html — aditivo y reversible. */ /* ── Tema: todos los tokens bajo [data-theme="light"] ────────── */ [data-theme="light"] { /* ── Superficies ────────────────────────────────────────────── */ --bg: #ffffff; --surface: #f1f5f9; --surface2: #e2e8f0; --surface3: #cbd5e1; --input-bg: #e2e8f0; /* ── Texto ──────────────────────────────────────────────────── */ --text: #0f172a; --subtext: #64748b; --border: #cbd5e1; /* ── Semantico ──────────────────────────────────────────────── */ --danger: #dc2626; --success: #16a34a; --live: #db2777; --live-dim: rgba(219, 39, 119, 0.12); } /* ── Overrides estructurales ───────────────────────────────────── Solo propiedades que no se heredan con los tokens de arriba. ── */ /* Fondo plano — sin gradiente radial */ [data-theme="light"] html, [data-theme="light"] body, [data-theme="light"] #app { background: var(--bg); background-image: none; } /* Matar gradientes heredados de body en cualquier contexto */ [data-theme="light"] body:has(#section-guardado.active), [data-theme="light"] body:has(#section-ganadores.active), [data-theme="light"] body:has(#section-faq.active), [data-theme="light"] body:has(#section-actividad.active), [data-theme="light"] body:has(#section-chat.active) #app { background-image: none; background-color: var(--bg); } /* Header */ [data-theme="light"] #app-header { background: rgba(255, 255, 255, 0.92); border-bottom: 0.5px solid rgba(0, 0, 0, 0.10); } [data-theme="light"] .header-avatar { background: rgba(255, 255, 255, 0.88); border: 0.5px solid rgba(0, 0, 0, 0.08); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10); } /* Bottom nav */ [data-theme="light"] #bottom-nav { background: rgba(255, 255, 255, 0.92); border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.08); } /* Nav chat badge — border color cambia con el fondo */ [data-theme="light"] .nav-chat-badge { border-color: var(--bg); } /* Bottom bar (comentar) */ [data-theme="light"] #bottom-bar { background: rgba(255, 255, 255, 0.88); border-top: 1px solid rgba(0, 0, 0, 0.07); } /* Pinned bar */ [data-theme="light"] #pinned-bar { background: rgba(255, 255, 255, 0.92); border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); } [data-theme="light"] #pinned-bar:hover { background: rgba(255, 255, 255, 0.98); } /* Scroll to bottom button */ [data-theme="light"] #scroll-bottom-btn { background: rgba(255, 255, 255, 0.92); border-color: rgba(0, 0, 0, 0.15); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12); } /* Section backgrounds — solidos */ [data-theme="light"] #section-guardado, [data-theme="light"] #section-ganadores, [data-theme="light"] #section-faq, [data-theme="light"] #section-actividad { background: var(--bg); } /* Chat section — solid background, no pattern */ [data-theme="light"] body:has(#section-chat.active) #app { background-color: var(--bg); background-image: none; } /* Section comments — full screen slide-in */ [data-theme="light"] #section-comments { background-color: var(--bg); background-image: none; } [data-theme="light"] .comments-header { background: rgba(255, 255, 255, 0.88); border-bottom-color: rgba(0, 0, 0, 0.07); } /* Post bubbles — solid surface, no glassmorphism */ [data-theme="light"] .post-bubble { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid var(--border); } [data-theme="light"] .post-bubble:has(.post-media-wrap) { background: var(--surface); } /* Comment bubbles — solid surface */ [data-theme="light"] .comment-bubble { background: var(--surface2); backdrop-filter: none; -webkit-backdrop-filter: none; border-color: var(--border); } /* Comment post card (replicated post header in discussion view) */ [data-theme="light"] .comment-post-card { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; border-color: var(--border); } /* Ganador cards — solid surface */ [data-theme="light"] .ganador-card { background: var(--surface); border-color: var(--border); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04); } /* FAQ items — solid surface */ [data-theme="light"] .faq-item { background: var(--surface); border-color: var(--border); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04); } [data-theme="light"] .faq-item.open { background: var(--surface2); border-color: var(--border); } /* Action sheet panels */ [data-theme="light"] .action-sheet-panel { background: rgba(255, 255, 255, 0.96); border-top-color: rgba(0, 0, 0, 0.08); } [data-theme="light"] .action-sheet-panel::before { background: rgba(0, 0, 0, 0.15); } /* Modal card */ [data-theme="light"] .modal-card { background: rgba(255, 255, 255, 0.96); border-top-color: rgba(0, 0, 0, 0.08); } /* Login / apodo overlay card */ [data-theme="light"] .apodo-card { background: rgba(255, 255, 255, 0.96); border-color: rgba(0, 0, 0, 0.08); } /* Post detail overlay */ [data-theme="light"] #post-detail-overlay { background: var(--bg); } [data-theme="light"] #post-detail-footer { background: rgba(255, 255, 255, 0.92); border-top-color: rgba(0, 0, 0, 0.08); } /* Chatbot panel */ [data-theme="light"] #chatbot-panel { background-color: var(--bg); background-image: none; } /* Bio "Ver mas" gradient */ [data-theme="light"] #historias-bio-content.bio-has-more #historias-bio-more { background: linear-gradient(to right, transparent, var(--bg) 45%); } /* Loading screen — uses var(--bg) already, just kill gradient */ [data-theme="light"] #screen-loading { background: var(--bg); background-image: none; } /* Profile panel */ [data-theme="light"] #profile-sheet { background: var(--surface); } /* Reaction button — use surface color */ [data-theme="light"] .reaction-btn { background: var(--surface2); border-color: var(--border); } [data-theme="light"] .reaction-btn.reacted { background: var(--primary-dim); } /* Form inputs */ [data-theme="light"] .form-input, [data-theme="light"] #comment-input, [data-theme="light"] #apodo-input, [data-theme="light"] #login-email-input, [data-theme="light"] #login-otp-input { background: var(--input-bg); border-color: var(--border); color: var(--text); } [data-theme="light"] .form-input::placeholder, [data-theme="light"] #comment-input::placeholder { color: var(--subtext); } /* Post-notif banner */ [data-theme="light"] #post-notif { background: var(--surface2); border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12); } /* Story viewer overlay */ [data-theme="light"] #story-viewer { background: rgba(0, 0, 0, 0.92); }