/* ========================================================================== Modo oscuro (fusionado en AF Menú) Técnica de inversión universal: se invierten los colores de TODA la página (garantiza que ningún cuadro/widget se quede en blanco, sin depender de conocer las clases CSS del tema). Después se "revierte" la inversión en imágenes, vídeos y el propio botón para que se vean con sus colores reales. ========================================================================== */ html.dmaf-dark { background-color: #ffffff !important; filter: invert(1) hue-rotate(180deg); } /* IMPORTANTE: el filter del afecta visualmente a TODOS sus descendientes (no es algo que un hijo pueda "cancelar" poniendo filter:none, los filtros de CSS se combinan, no se anulan entre sí). Por eso, para que fotos/escudos/logos se vean con sus colores reales, necesitan SIEMPRE una segunda inversión propia que compense la del (doble inversión = colores normales). Se añade un pequeño extra de contraste/saturación porque, al aplicar dos filtros seguidos, el navegador redondea el color en cada paso y la imagen queda ligeramente "lavada"; este ajuste lo compensa sin tocar el diseño del bloque, solo el color final de la imagen. Se aplica en CSS puro, sin esperar a dark-mode.js, para que no haya flash al recargar. */ html.dmaf-dark img, html.dmaf-dark picture, html.dmaf-dark video, html.dmaf-dark iframe, html.dmaf-dark svg, html.dmaf-dark canvas, html.dmaf-dark embed, html.dmaf-dark object { filter: invert(1) hue-rotate(180deg) saturate(1.15) contrast(1.03) !important; } /* Bloques con una foto puesta como fondo CSS (background-image), típico de tarjetas de artículos ("Dos Chollos", previas de jornada...), campos de fútbol en alineaciones, etc.: se excluyen de la inversión general -foto y cualquier texto encima- tal cual estaban diseñados en origen. Esta regla es CSS PURO (selector de atributo), así que actúa de inmediato pase lo que pase con la carga de la imagen -incluida la carga diferida (lazy load), que es donde fallaba intentar detectarlo con JavaScript: el atributo "style" puede cambiar bastante después de que la página ya haya cargado, y el CSS lo sigue detectando igual porque los selectores de atributo se re-evalúan solos, sin script. */ html.dmaf-dark [style*="background-image"] { filter: invert(1) hue-rotate(180deg) !important; } /* Caso poco común: media (o bloque con foto de fondo) dentro de un contenedor que el script detecta como YA oscuro de por sí (p. ej. un logo dentro de un menú con fondo oscuro propio del tema). Ahí ya recibe DOS inversiones de sus contenedores (la del + la del propio bloque .dmaf-keep-dark), así que no necesita ninguna inversión propia: dark-mode.js le añade esta clase para dejarlo sin filtro. */ html.dmaf-dark .dmaf-media-plain { filter: none !important; } /* Elementos que el script detecta como YA oscuros (p. ej. menú móvil con fondo oscuro de por sí), o bloques con foto de fondo que deben quedar tal cual el diseño original: se excluyen de la inversión general. Ver assets/dark-mode.js */ html.dmaf-dark .dmaf-keep-dark { filter: invert(1) hue-rotate(180deg); } /* Transición suave al cambiar de tema */ html { transition: filter 0.25s ease; } /* ========================================================================== Botones flotantes (modo oscuro y subir arriba): se "des-invierten" para verse SIEMPRE igual, tanto en modo claro como oscuro. La geometría del botón y su posición están en extras.css. ========================================================================== */ html.dmaf-dark .afm-fab { filter: invert(1) hue-rotate(180deg); } #dmaf-toggle-btn { background-color: #1e1e1e; color: #ffffff; } html.dmaf-dark #dmaf-toggle-btn { background-color: #ffcc4d; color: #121212; } #dmaf-toggle-btn .dmaf-icon { position: absolute; transition: opacity 0.2s ease, transform 0.2s ease; } #dmaf-toggle-btn .dmaf-icon-sun { opacity: 0; transform: rotate(-90deg) scale(0.6); } #dmaf-toggle-btn .dmaf-icon-moon { opacity: 1; transform: rotate(0) scale(1); } html.dmaf-dark #dmaf-toggle-btn .dmaf-icon-sun { opacity: 1; transform: rotate(0) scale(1); } html.dmaf-dark #dmaf-toggle-btn .dmaf-icon-moon { opacity: 0; transform: rotate(90deg) scale(0.6); } /* Botón alternativo insertado vía shortcode [dark_mode_toggle] o [af_dark] */ .dmaf-toggle-inline { cursor: pointer; background: transparent; border: 1px solid currentColor; border-radius: 4px; padding: 6px 14px; font: inherit; color: inherit; } html.dmaf-dark .dmaf-toggle-inline { filter: invert(1) hue-rotate(180deg); }