/* ============================================================ CosplayerID — style-night.css Tema: Oscuro Activacion: (gestionado desde header.php via current_theme() + toggle en /dashboard/settings). Tambien soporta body.night como compat heredada. ESTRATEGIA: 1) Redefinir los design tokens de Tailwind v4 (--color-paper-*, --color-ink-*, --color-paper-card, etc.) bajo [data-theme="dark"]. Como Tailwind compila utilities como var(--color-paper-50), TODAS las clases ya escritas (bg-paper-50, text-ink-900, border-paper-200) cambian automaticamente sin tocar HTML. 2) Mantener vars legacy --clr-* para auth-card, footer, navbar viejos. 3) Overrides puntuales para hex hardcoded en CSS scoped (.pg-*, .t10-*, .cf-*) y para usos de bg-white donde queremos card oscura (no podemos redefinir --color-white global porque rompe text-white en botones con fondo de color). ============================================================ */ body.night, [data-theme="dark"] { /* ---------- Legacy clr-* (auth, navbar, footer, formularios) ---------- */ --clr-primary: #c084fc; --clr-primary-dark: #a855f7; --clr-primary-light: #e9d5ff; --clr-secondary: #f472b6; --clr-secondary-dark: #ec4899; --clr-accent: #22d3ee; --clr-bg: #0a0a0f; --clr-bg-2: #111118; --clr-bg-3: #1a1a24; --clr-bg-card: #13131c; --clr-text: #f1f0ff; --clr-text-2: #a09ec0; --clr-text-3: #5c5a7a; --clr-text-inv: #0a0a0f; --clr-border: #1e1e2e; --clr-border-2: #2a2a3e; --shadow-sm: 0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2); --shadow-md: 0 4px 12px rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.2); --shadow-lg: 0 8px 24px rgba(0,0,0,.5), 0 4px 8px rgba(0,0,0,.3); /* ---------- Tailwind design tokens — invertidos para dark ---------- Estos pisan las definiciones de input.css @theme. Al ser CSS vars, toda utility ya emitida (bg-paper-50, text-ink-900) se actualiza. */ /* paper-* — escala de superficies (claro → oscuro) */ --color-paper-50: #13131c; /* fondo card base */ --color-paper-100: #181822; --color-paper-200: #20202e; --color-paper-300: #2a2a3a; /* paper-card/sunk/line — superficies dashboard */ --color-paper-card: #13131c; --color-paper-sunk: #0e0e16; --color-paper-line: #2a2a3a; /* canvas + surface — fondos globales */ --color-canvas: #0a0a0f; --color-surface: #13131c; /* ink-* — escala de texto (oscuro → claro) — INVERTIDA */ --color-ink: #f1f0ff; --color-ink-2: #c8c5e0; --color-ink-3: #8a87a8; --color-ink-50: oklch(0.16 0.01 270); --color-ink-100: oklch(0.20 0.01 270); --color-ink-200: oklch(0.26 0.01 270); --color-ink-300: oklch(0.36 0.01 270); --color-ink-400: oklch(0.50 0.01 270); --color-ink-500: oklch(0.62 0.008 270); --color-ink-600: oklch(0.74 0.005 270); --color-ink-700: oklch(0.84 0.004 270); --color-ink-800: oklch(0.92 0.003 270); --color-ink-900: oklch(0.97 0.002 270); --color-ink-soft: #d4d1ec; --color-ink-muted: #8a87a8; --color-ink-faint: #54526c; /* lines del sitio */ --color-line: #20202e; --color-line-2: #2a2a3a; /* accent / acento del dashboard — un poco mas claro en dark */ --color-accent: #8b7dff; --color-accent-soft: #1a1832; /* sombras — mas profundas en dark (no perfectas pero suficientes) */ --shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 6px 16px -8px rgba(0,0,0,.5); --shadow-cardhover: 0 2px 4px rgba(0,0,0,.5), 0 18px 32px -14px rgba(0,0,0,.6); --shadow-soft: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.3); /* Tailwind neutral-* scale — invertida. Usada en /dashboard/profile y otras paginas que prefieren la paleta neutral de Tailwind (gris puro) sobre la ink (oklch tinted). Sin esto bg-neutral-50, text-neutral-900, etc. quedan en light. */ --color-neutral-50: #18181a; --color-neutral-100: #1f1f23; --color-neutral-200: #2a2a30; --color-neutral-300: #3a3a42; --color-neutral-400: #6b6b75; --color-neutral-500: #9a9aa5; --color-neutral-600: #b5b5c0; --color-neutral-700: #d4d4dc; --color-neutral-800: #e8e8ef; --color-neutral-900: #f1f0ff; --color-neutral-950: #fafafa; } /* ============================================================ Compat heredada — bloques que NO usan vars (legacy) ============================================================ */ body.night .navbar { background: rgba(10,10,15,0.92); border-bottom-color: var(--clr-border); } body.night .skeleton, [data-theme="dark"] .skeleton { background: linear-gradient( 90deg, var(--clr-bg-3) 25%, var(--clr-border-2) 50%, var(--clr-bg-3) 75% ); background-size: 200% 100%; } body.night .auth-card, [data-theme="dark"] .auth-card { background: var(--clr-bg-2); border-color: var(--clr-border); } body.night .form-input, [data-theme="dark"] .form-input { background: var(--clr-bg-3); border-color: var(--clr-border); color: var(--clr-text); } body.night .form-input:focus, [data-theme="dark"] .form-input:focus { background: var(--clr-bg-2); border-color: var(--clr-primary); } body.night .navbar__search-input, [data-theme="dark"] .navbar__search-input { background: var(--clr-bg-3); border-color: var(--clr-border); color: var(--clr-text); } body.night .filter-tabs, [data-theme="dark"] .filter-tabs { background: var(--clr-bg-2); } body.night .filter-tab.active, [data-theme="dark"] .filter-tab.active { background: var(--clr-bg-3); } body.night .footer, [data-theme="dark"] .footer { background: var(--clr-bg-2); border-top-color: var(--clr-border); } /* ============================================================ bg-white → fondo oscuro SOLO donde representa card/panel ------------------------------------------------------------ No redefinimos --color-white global porque rompe text-white en botones con fondo colored. En vez de eso, pisamos casos especificos donde bg-white = superficie de tarjeta. ============================================================ */ [data-theme="dark"] .pg-card, [data-theme="dark"] .t10-card, [data-theme="dark"] .cf-card { background: var(--color-paper-card) !important; border-color: var(--color-paper-line); } /* Density stepper del grid (selector real: [data-pg-stepper]) */ [data-theme="dark"] [data-pg-stepper] { background: var(--color-paper-card); border-color: var(--color-paper-line); } /* Toggle wrappers reales del Top 10 y Cover Flow. El HTML usa .t10__toggle y .cf__toggle (NO data-stepper). */ [data-theme="dark"] .t10__toggle, [data-theme="dark"] .cf__toggle { background: var(--color-paper-card); border-color: var(--color-paper-line); box-shadow: 0 1px 0 rgba(0,0,0,.3), 0 4px 14px -8px rgba(0,0,0,.5); } /* ============================================================ profiles_grid (.pg-*) — overrides de hex hardcoded ============================================================ */ [data-theme="dark"] .pg-skel { background: linear-gradient(90deg, #20202e 0%, #2a2a3a 40%, #20202e 80%); } [data-theme="dark"] .pg-stat:hover:not(:disabled) { color: var(--color-ink-900); } [data-theme="dark"] .pg-density-btn:not(:disabled):hover { background: var(--color-paper-200); color: var(--color-ink-900); } [data-theme="dark"] .pg-avatar-ring { box-shadow: 0 0 0 2px var(--color-paper-card), 0 2px 8px rgba(0,0,0,.5); } /* ------------------------------------------------------------ Category pill (bottom-left del thumb): el partial emite `bg-white/95 text-ink-900`. En dark, `--color-ink-900` se invierte a oklch(0.97 ...) ≈ blanco, y queda invisible sobre el bg-white literal. Pisamos el FONDO de la pill (texto ya es claro por el override de --color-ink-900) y agregamos un border sutil para separarla del thumb. ------------------------------------------------------------ */ [data-theme="dark"] .pg-card .bg-white\/95.text-ink-900 { background-color: rgba(13,13,20,0.82) !important; box-shadow: 0 1px 3px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.06); } /* ------------------------------------------------------------ TOP badge — refuerzo de contraste en dark. Los gradientes (gold/silver/bronze) son fondos claros fijos; el texto literal ya está bien (#5a3a00 / white) en gold y bronze, pero un drop-shadow sutil ayuda a separar el pill del bg oscuro que rodea el thumb. ------------------------------------------------------------ */ [data-theme="dark"] .pg-card .bg-gradient-to-br.rounded-full { filter: drop-shadow(0 1px 3px rgba(0,0,0,.55)); } /* TOP 2 (silver): el partial emite text-ink-900, que en dark se invierte a casi blanco — invisible sobre plata. Forzamos el mismo color oscuro que en light mode (literal, no token). */ [data-theme="dark"] .pg-card .pg-top-silver { color: #1a1822 !important; } /* TOP 4+ (ink): el partial emite bg-ink-900 text-white. En dark ink-900 se invierte a casi blanco -> fondo blanco + texto blanco = invisible. Forzamos fondo oscuro literal igual que en light. */ [data-theme="dark"] .pg-card .pg-top-ink { background: #1a1822 !important; color: #ffffff !important; } /* ============================================================ NSFW gate overlay (_nsfw_gate.php) — sobre el blur del thumb. En light usa from/via/to-ink-900/* — un velo gris-oscuro. En dark, ink-900 se invierte a casi blanco y el gradient queda BLANQUECINO sobre la imagen — anti-tema y feo. Pisamos con un degradado fucsia (brand del sitio) que mantiene el look erotico/dark y el texto blanco sigue legible. ============================================================ */ [data-theme="dark"] [data-nsfw-gate], [data-theme="dark"] [data-nsfw-veil] { background-image: linear-gradient( 180deg, rgba(196, 42, 135, 0.30) 0%, rgba(196, 42, 135, 0.48) 55%, rgba(120, 20, 75, 0.78) 100% ) !important; } /* ============================================================ NSFW modal (_nsfw_modal.php) — gate +18 global. El partial usa bg-white literal + bg-ink-900/60 para el backdrop, y bg-ink-900 para el CTA Register. En dark todos esos colores se invierten o quedan demasiado claros. ============================================================ */ /* Backdrop: bg-ink-900/60 invertido = casi blanco/60. Lo bajamos a un negro real con buena opacidad (selector directo al id). */ [data-theme="dark"] #nsfwModal { background-color: rgba(0, 0, 0, 0.72) !important; } /* Card interno (única div hija): pisamos bg-white literal a la superficie de tarjeta dark. */ [data-theme="dark"] #nsfwModal > div { background-color: var(--color-paper-card) !important; border: 1px solid var(--color-paper-line); } /* CTA (anchor con bg-ink-900): el modal tiene un solo , sea el destino /register (visitor) o /dashboard/settings#nsfw (user sin NSFW activo). En dark, bg-ink-900 se invierte a casi blanco e invisibiliza el texto blanco. Lo pisamos con brand fucsia para ambos casos via selector generico al unico anchor del modal. */ [data-theme="dark"] #nsfwModal a { background-color: #c42a87 !important; color: #fff !important; } [data-theme="dark"] #nsfwModal a:hover { background-color: #a82273 !important; } /* Botón Cancel: hover:bg-paper-50 invertido queda muy claro. Lo bajamos a paper-200 (superficie elevada del dark). */ [data-theme="dark"] #nsfwModal button[data-nsfw-modal-cancel]:hover { background-color: var(--color-paper-200) !important; } /* ============================================================ profiles_top10 (.t10-*) — overrides puntuales ============================================================ */ [data-theme="dark"] .t10__title { color: var(--color-ink-900); } [data-theme="dark"] .t10__sparkle { color: #c084fc; filter: drop-shadow(0 2px 8px rgba(192,132,252,.4)); } [data-theme="dark"] .t10__sub { color: var(--color-ink-muted); } /* sbtn default transparent — solo color icono. Hover: fill discreto. NO le pongo background default (rompe el look de "pill segmentado") */ [data-theme="dark"] .t10__sbtn { color: var(--color-ink-muted); } [data-theme="dark"] .t10__sbtn:hover { background: var(--color-paper-200); color: var(--color-ink-900); } [data-theme="dark"] .t10__sbtn:focus-visible { outline-color: var(--color-ink-900); } [data-theme="dark"] .t10__dots i { background: var(--color-paper-300); } [data-theme="dark"] .t10__dots i.on { background: var(--color-ink-900); } /* Numeros gigantes 1-10 outline (selector REAL: .t10__num, no rank-num). stroke #1a1a1a literal → invisible en dark. Subimos stroke a 3px y color a ink-500 para que se lean sin competir con las cards. */ [data-theme="dark"] .t10__num { -webkit-text-stroke: 3px var(--color-ink-500); } [data-theme="dark"] .t10__card-inner { background: var(--color-paper-card); } /* ============================================================ cover_flow (.cf-*) — overrides puntuales ============================================================ */ [data-theme="dark"] .cf__title { color: var(--color-ink-900); } [data-theme="dark"] .cf__sub { color: var(--color-ink-muted); } [data-theme="dark"] .cf__sbtn { color: var(--color-ink-muted); } [data-theme="dark"] .cf__sbtn:hover { background: var(--color-paper-200); color: var(--color-ink-900); } [data-theme="dark"] .cf__dots i { background: var(--color-paper-300); } [data-theme="dark"] .cf__dots i.on { background: var(--color-ink-900); } /* ============================================================ NAVBAR — overrides scoped ------------------------------------------------------------ El navbar usa bg-white (sticky + dropdown + mobile panel) y tambien bg-white como "pill activo" en theme/locale toggles. Como no podemos redefinir --color-white global (rompe text-white en botones colored), pisamos los descendant selectors aqui. ============================================================ */ /* Sticky nav background — usa bg-white/90 backdrop-blur */ [data-theme="dark"] nav[data-cn-root].bg-white\/90 { background-color: rgba(13,13,20,0.85) !important; border-bottom-color: var(--color-paper-line) !important; } /* Avatar dropdown panel + mobile menu panel */ [data-theme="dark"] nav[data-cn-root] .bg-white { background-color: var(--color-paper-card); } [data-theme="dark"] #navMobilePanel, [data-theme="dark"] #navMobilePanel .bg-white { background-color: var(--color-paper-card) !important; } /* Search input focus state — vuelve "blanco" al hacer focus, en dark debe ser una superficie ligeramente mas clara. */ [data-theme="dark"] nav[data-cn-root] input[data-cn-search-input]:focus, [data-theme="dark"] #navMobilePanel input[data-cn-search-input]:focus { background-color: var(--color-paper-200) !important; } /* ============================================================ Notifications bell + badge — vars internas --cidnot-* ------------------------------------------------------------ El componente define vars locales --cidnot-surface (#fff), --cidnot-ink (oklch oscuro), --cidnot-hair, etc. Redefinir para dark — descendientes que las usan migran solos. ============================================================ */ [data-theme="dark"] .cidnot-bell, [data-theme="dark"] .cidnot-panel, [data-theme="dark"] .cidnot-scrim { --cidnot-surface: #13131c; --cidnot-surface-2: #181822; --cidnot-ink: #f1f0ff; --cidnot-ink-soft: #c8c5e0; --cidnot-ink-faint: #8a87a8; --cidnot-hair: #2a2a3a; --cidnot-hair-strong: #3a3a4d; } [data-theme="dark"] .cidnot-bell { color: var(--color-ink-700); } [data-theme="dark"] .cidnot-bell:hover { color: var(--color-ink-900); } [data-theme="dark"] .cidnot-panel { background: var(--color-paper-card); border-color: var(--color-paper-line); color: var(--color-ink-700); } [data-theme="dark"] .cidnot-scrim { background: rgba(0,0,0,.55); } /* Navbar search input — focus:bg-white se aplica al escribir. Selector real: #navSearch (no data-cn-search-input). */ [data-theme="dark"] #navSearch, [data-theme="dark"] #navSearch:focus { background-color: var(--color-paper-200) !important; border-color: var(--color-paper-line) !important; color: var(--color-ink-900); } [data-theme="dark"] #navSearch:focus { border-color: var(--color-brand-500) !important; box-shadow: 0 0 0 2px rgba(124,58,237,.20) !important; } [data-theme="dark"] #navSearch::placeholder { color: var(--color-ink-faint); } /* ============================================================ Modal confirmAction (Dar puntos / Boost / etc) — #confirmSheet ------------------------------------------------------------ Sheet bg-white literal + warning bg-rose-50 claro. Pisar. */ [data-theme="dark"] #confirmSheet { background-color: var(--color-paper-card) !important; border-color: var(--color-paper-line) !important; } [data-theme="dark"] #cfWarning { background-color: rgba(244,63,94,.12) !important; border-color: rgba(244,63,94,.30) !important; color: #fda4af !important; } /* Botones del confirmSheet — cancel hover */ [data-theme="dark"] #cfCancel { color: var(--color-ink-muted); } [data-theme="dark"] #cfCancel:hover { background-color: var(--color-paper-200); } /* ============================================================ Modal Reportar perfil — #reportModal ------------------------------------------------------------ Inputs/select/textarea con bg-white literal. card-show ya cambia via profile-show-root scope. */ [data-theme="dark"] #reportModal input.bg-white, [data-theme="dark"] #reportModal select.bg-white, [data-theme="dark"] #reportModal textarea.bg-white { background-color: var(--color-paper-200) !important; color: var(--color-ink-900) !important; border-color: var(--color-paper-line) !important; } [data-theme="dark"] #reportModal input::placeholder, [data-theme="dark"] #reportModal textarea::placeholder, [data-theme="dark"] #reportModal select option { color: var(--color-ink-faint); } [data-theme="dark"] #reportModal input:focus, [data-theme="dark"] #reportModal select:focus, [data-theme="dark"] #reportModal textarea:focus { border-color: var(--color-brand-500) !important; } /* Card amarilla "Necesitamos tus datos..." (bg-amber-50 border-amber-200) */ [data-theme="dark"] #reportModal .bg-amber-50.border-amber-200 { background-color: rgba(234,179,8,.12) !important; border-color: rgba(234,179,8,.30) !important; color: #fcd34d !important; } /* ============================================================ Toast/Notify global de profile-show (#notif + #notifBox) ------------------------------------------------------------ El toast tiene bg-white literal + border-[var(--line)]. Aparece tras toda accion exitosa (boost, gift, follow, copy, etc). Texto colored ya cambia via tokens — solo el wrapper sigue claro. */ [data-theme="dark"] #notifBox { background-color: var(--color-paper-card) !important; border-color: var(--color-paper-line) !important; box-shadow: 0 4px 16px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4); } [data-theme="dark"] #notifMsg { color: var(--color-ink-muted) !important; } /* ============================================================ /explore — overrides scoped ------------------------------------------------------------ La pagina usa bg-white para: search input, KBD, predictive dropdown, tagsMenu, mobile toggle bars, mobile alpha bar, empty state icon. Y bg-white/40 + bg-white/30 para los row bars (filtros y filtros activos). Ningun "bg-white" en explore es para texto sobre fondo colored. ============================================================ */ /* Search input + KBD ⌘K */ [data-theme="dark"] #searchInput.bg-white, [data-theme="dark"] #searchWrap input.bg-white { background-color: var(--color-paper-100) !important; color: var(--color-ink-900); } [data-theme="dark"] #searchWrap kbd.bg-white { background-color: var(--color-paper-200) !important; color: var(--color-ink-muted); } /* Predictive search dropdown */ [data-theme="dark"] #predictive.bg-white, [data-theme="dark"] #predictive { background-color: var(--color-paper-card) !important; border-color: var(--color-paper-line); } /* Filter chips bar + active filters bar (bg-white/40, /30 semi-trans) */ [data-theme="dark"] .border-t.bg-white\/40, [data-theme="dark"] .border-t.bg-white\/30 { background-color: rgba(13,13,20,0.5) !important; } /* Tags dropdown */ [data-theme="dark"] #tagsMenu.bg-white, [data-theme="dark"] #tagsMenu { background-color: var(--color-paper-card) !important; border-color: var(--color-paper-line); } /* Mobile toggle row + mobile alpha row */ [data-theme="dark"] .ex-toggles-mobile.bg-white, [data-theme="dark"] .ex-alpha-mobile.bg-white, [data-theme="dark"] .ex-toggles-mobile, [data-theme="dark"] .ex-alpha-mobile { background-color: var(--color-paper-card); border-color: var(--color-paper-line); } /* Empty state icon container */ [data-theme="dark"] main .inline-flex.bg-white.border-line { background-color: var(--color-paper-100) !important; border-color: var(--color-paper-line); } /* Botones inline reset + load more — en light tienen background:var(--color-ink); color:white. En dark, ink se invierte a claro, asi que texto blanco quedaria invisible. Pisamos: fondo claro + texto oscuro (mantiene el "invertido al fondo" del light). */ [data-theme="dark"] #btnResetEmpty, [data-theme="dark"] #btnLoadMore { background: var(--color-ink-900) !important; color: var(--color-paper-card) !important; border-color: var(--color-ink-900) !important; } /* Sticky letter divider en grid alfabetico */ [data-theme="dark"] .sticky-letter { background: linear-gradient(180deg, var(--color-paper-card) 0%, var(--color-paper-card) 70%, transparent 100%); } /* Chip base — usa bg-paper-50/100 + border-line, ya cambian. Solo refuerza el active state que pinta con fondo ink. */ [data-theme="dark"] .chip.active, [data-theme="dark"] .chip[aria-pressed="true"] { background: var(--color-ink-900); color: var(--color-paper-card); border-color: var(--color-ink-900); } /* ============================================================ HERO module (.hero-mod) — partial self-contained ------------------------------------------------------------ El hero tiene su propio