/* ====================================================================== MINECUB - MODO OSCURO ("noche MineCub") ---------------------------------------------------------------------- Contraparte oscura de custom.css para TODO el sitio salvo la wiki (la wiki va en oscuro-wiki.css). Se carga DESPUES de custom.css. MECANISMO - El tema activo viaja en el atributo del : data-theme="dark" o data-theme="light". Lo pone un script inline al principio del , antes de cualquier CSS, para que la primera pintura ya salga oscura y no haya destello blanco. - La preferencia se guarda en localStorage con la clave 'mc-tema' ('oscuro' | 'claro'). Sin preferencia manda prefers-color-scheme del sistema, pero esa decision la toma el SCRIPT: aqui no hay ni un solo @media (prefers-color-scheme). Si lo hubiera, alguien con el sistema en oscuro y la web en claro veria mezclados los dos temas. - Al cambiar de tema el script emite window 'mc:tema' con detail.oscuro. - TODAS las reglas de este fichero cuelgan de html[data-theme="dark"]. El prefijo suma (0,1,1) de especificidad a cada selector, asi que una copia del selector de custom.css o de semantic.min.css con el prefijo delante gana siempre, sin !important. Solo se usa !important donde custom.css o semantic.min.css ya lo usan (no hay otra forma de ganar). PALETA "NOCHE MINECUB" (comun a los tres ficheros del modo oscuro) fondo de pagina #0f1411 superficie (tarjetas) #161c18 superficie elevada #1c241f texto principal #e9eee9 texto apagado #9aa69d linea #26312a linea fuerte #364336 verde #3fbf5a verde oscuro #2f9a45 verde boton (fosfo) #00ff34 NO cambia: es la marca verde boton oscuro #00cc2a tinte verde #14301c sombras rgba(0,0,0,.55) y rgba(0,0,0,.7) LA TRAMPA DE LOS TOKENS Los tokens de custom.css llevan nombre de color, no de funcion: --mc-white es la SUPERFICIE de las tarjetas pero tambien el TEXTO del boton negro al pasar el raton; --mc-black es el TEXTO pero tambien el FONDO del volcado de stats y del aviso de cookies. Aqui se les da la vuelta (asi el 90% del sitio se oscurece solo) y despues se FIJAN uno a uno los usos que no deben cambiar: todo texto sobre el boton fosforito vuelve a ser tinta oscura, y todo fondo que ya era oscuro se queda oscuro. Cada seccion dice que fija y por que. ====================================================================== */ /* ====================================================================== 1. TOKENS ====================================================================== */ html[data-theme="dark"]{ /* Los dos "colores" se invierten: black pasa a ser el texto claro y white la superficie de las tarjetas. */ --mc-black: #e9eee9; --mc-white: #161c18; /* En claro --mc-off es el hueso "hundido" bajo el blanco. En oscuro las cosas que se acercan al usuario (botones, cabeceras de tabla, filas al pasar el raton) se ACLARAN, asi que off pasa a ser la superficie elevada, no una mas oscura. */ --mc-off: #1c241f; /* Los papeles de los dos verdes se INVIERTEN a proposito. En claro --mc-green-d es el verde LEGIBLE (todo texto verde del sitio lo usa, porque el claro no daba contraste sobre blanco) y --mc-green el de adorno y hover. Sobre oscuro el legible es el mas claro: #3fbf5a da 7.3:1 sobre la superficie y 6:1 sobre el tinte, mientras que #2f9a45 se queda en 4.8:1 y en 4:1 sobre el tinte (suspende para texto). Por eso el token que usa el texto recibe el verde claro. */ --mc-green: #2f9a45; --mc-green-d: #3fbf5a; /* La marca no cambia con el tema. Se repiten para que quede escrito. */ --mc-green-btn: #00ff34; --mc-green-btn-d: #00cc2a; --mc-green-tint: #14301c; --mc-line: #26312a; --mc-line-strong: #364336; --mc-muted: #9aa69d; /* Sobre fondo oscuro una sombra al 18% no se ve; hay que ir al 55-70% para que las tarjetas sigan despegandose del fondo. */ --mc-shadow-sm: 0 6px 18px rgba(0,0,0,.55); --mc-shadow-md: 0 18px 40px rgba(0,0,0,.7); /* Tokens NUEVOS, solo de este fichero (custom.css no los conoce). */ --mc-bg: #0f1411; /* fondo de pagina */ --mc-hueco: #121815; /* pozo: cuerpos de panel sobre los que van tarjetas */ --mc-texto-2: #c5cdc6; /* texto secundario, entre principal y apagado */ /* Tinta para el texto que va SOBRE el boton fosforito. Es el negro del tema claro, para que el boton se vea identico en los dos temas: 13.8:1 de contraste. Con --mc-black invertido el texto seria claro sobre verde claro (1.3:1) y desapareceria. */ --mc-tinta: #0e120f; /* Los controles nativos (scrollbars, selects, calendarios, casillas) siguen al tema elegido y no al del sistema. */ color-scheme: dark; } /* ====================================================================== 2. BASE - html, body, enlaces, titulares, seleccion, scrollbars ====================================================================== */ /* custom.css (lineas 5-27, herencia de DefaultRevamp) pinta html, body y .pusher de blanco a mano; Fomantic tambien pone body en #fff. */ html[data-theme="dark"], html[data-theme="dark"] body{ background:var(--mc-bg); color:var(--mc-black); } html[data-theme="dark"] body.pushable > .pusher, html[data-theme="dark"] .pusher{ background:var(--mc-bg); } /* Fomantic deja los enlaces en azul (#4183c4) y custom.css no lo toca, asi que en claro los enlaces del contenido son azules por omision. Sobre oscuro ese azul se queda en 3.5:1; el verde legible da 7.3:1 y es de la casa. El fosfo, que sobre blanco no se lee (1.4:1), sobre oscuro da 12:1 y sirve perfectamente para el hover. :where() deja el prefijo SIN especificidad (0,0,1), igual que la regla `a` de Fomantic: gana a esa por venir despues, pero PIERDE frente a cualquier regla con clase de custom.css (.mc-post h3 a, .mc-lb-nick a, .mc-staff-card a...). Sin :where(), el prefijo sumaba (0,1,1) y los titulos de noticias y los nicks del podio salian verdes en vez de en texto, que no es lo que dice el diseno. */ :where(html[data-theme="dark"]) a{ color:var(--mc-green-d); } :where(html[data-theme="dark"]) a:hover{ color:var(--mc-green-btn); } /* Titulares sueltos (los

/

de miembros y formularios que no llevan .ui.header). Tambien con :where(): es un respaldo, no debe ganar a nada. */ :where(html[data-theme="dark"]) :where(h1, h2, h3, h4, h5, h6){ color:var(--mc-black); } html[data-theme="dark"] hr{ border-color:var(--mc-line); } /* Fomantic: ::selection{background:#cce2ff;color:rgba(0,0,0,.87)} - azul claro con texto negro sobre pagina oscura. */ html[data-theme="dark"] ::selection{ background:rgba(0,255,52,.30); color:var(--mc-black); } /* Placeholders: Fomantic los pone en gris #bfbfbf, que sobre oscuro casi parece texto escrito. El apagado del tema los distingue del contenido. */ html[data-theme="dark"] ::placeholder{ color:var(--mc-muted); opacity:1; } html[data-theme="dark"] .ui.form ::placeholder, html[data-theme="dark"] .ui.input > input::placeholder{ color:var(--mc-muted); opacity:1; } /* Campos sueltos (buscador de stats, vincular, login) no llevan color de texto en custom.css: fian del navegador. Se fija para que no dependa del valor de fieldtext de cada motor. Con :where() la regla pesa (0,0,0): es el respaldo, y cualquier regla del tema (las opciones bloqueadas de la encuesta en --mc-muted, por ejemplo) sigue mandando. */ :where(html[data-theme="dark"]) :where(input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]), textarea, select){ color:var(--mc-black); } /* color-scheme ya oscurece la barra principal; estas son las barras de los contenedores con overflow (sugerencias, modales con scroll), que Fomantic pinta con negros translucidos invisibles sobre oscuro. */ html[data-theme="dark"] body ::-webkit-scrollbar-track{ background:rgba(255,255,255,.06); } html[data-theme="dark"] body ::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.22); } html[data-theme="dark"] body ::-webkit-scrollbar-thumb:window-inactive{ background:rgba(255,255,255,.14); } html[data-theme="dark"] body ::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.34); } /* ====================================================================== 3. AUTHBAR, MASTHEAD, SUBNAV Y SUS DESPLEGABLES ====================================================================== */ /* La franja de arriba va con el fondo de pagina, no con la superficie elevada que le tocaria por el token: es el marco exterior del sitio, y asi los botones (superficie + borde) se recortan sobre ella. */ html[data-theme="dark"] #mc-authbar{ background:var(--mc-bg); border-bottom-color:var(--mc-line); } /* .mc-btn: borde y texto claros por el token; el hover sigue invirtiendo (fondo claro, texto oscuro), mismo gesto que en el tema claro. .mc-btn-primary: fondo fosfo con color:var(--mc-black) !important en custom.css -> ahora seria texto claro sobre verde claro. Tinta. */ html[data-theme="dark"] .mc-btn-primary, html[data-theme="dark"] .mc-btn-primary:hover{ color:var(--mc-tinta) !important; } /* MASTHEAD. La foto (bg.jpg) es un mosaico verde, azul y amarillo a plena luz; en claro va sin capa. En oscuro se le pone un velo que la baja a media luz para que el logo flotante y las pastillas de cristal sigan leyendose y la banda no sea un fogonazo entre dos zonas negras. La capa es un ::after del propio div de la foto (esta vacio y es absoluto). */ html[data-theme="dark"] #mc-masthead .mc-bgphoto::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,12,9,.50), rgba(8,12,9,.64)); } /* Con la foto mas oscura las pastillas pierden contraste con el fondo; se les sube un poco la opacidad del cristal y el filo para compensar. */ html[data-theme="dark"] .mc-pill{ background:rgba(6,9,7,.62); border-color:rgba(255,255,255,.28); } html[data-theme="dark"] .mc-pill:hover{ background:rgba(6,9,7,.76); } /* SUBNAV. El fondo, el borde y el submenu ya salen del token. Lo que hay que tocar son los filtros de las ilustraciones: sus sombras eran negras al 16-22% (invisibles sobre oscuro). En reposo, sombra negra densa; en la pagina actual, halo fosfo, que es lo que la senala. */ html[data-theme="dark"] #mc-subnav .mc-nav-ico img{ filter:saturate(.45) brightness(1.02) contrast(.94) drop-shadow(0 3px 5px rgba(0,0,0,.6)); opacity:.74; } html[data-theme="dark"] #mc-subnav .mc-nav-btn.active .mc-nav-ico img{ filter:saturate(1.12) brightness(1.02) contrast(1.04) drop-shadow(0 4px 9px rgba(0,255,52,.38)); } /* El item del submenu al pasar el raton usa --mc-off (elevada): bien. El separador y el borde ya van por token. Nada mas que fijar aqui. */ /* ====================================================================== 4. FOOTER ====================================================================== */ /* custom.css lo fija en #1b1c1d !important (el gris de Fomantic). Sobre la pagina #0f1411 ese gris quedaria MAS claro que el resto, al reves de lo que debe: el pie es el suelo del sitio, un punto mas oscuro que la pagina, con una linea que lo separe. !important porque custom.css lo usa. */ html[data-theme="dark"] #footer.ui.segment, html[data-theme="dark"] #footer{ background:#0b0f0c !important; color:var(--mc-black) !important; border-top:1px solid var(--mc-line) !important; } /* ====================================================================== 5. PORTADA - modalidades, noticias, staff ====================================================================== */ /* La sombra del hover de las tarjetas de modalidad era negra al 26%. */ html[data-theme="dark"] .mc-mode-card:hover{ box-shadow:0 20px 40px rgba(0,0,0,.7); } /* Noticias y staff llevan una "textura": rayitas diagonales NEGRAS al 2.8% y un lavado fosfo al 5%. Sobre superficie oscura las rayas negras no existen; se cambian por rayas claras y se sube un pelo el lavado. */ html[data-theme="dark"] .mc-post, html[data-theme="dark"] .mc-staff-group{ background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0px, rgba(255,255,255,.035) 1px, transparent 1px, transparent 4px), radial-gradient(ellipse 420px 220px at 100% 0%, rgba(0,255,52,.07), transparent 70%); } /* Los colores de rol por defecto (rojo #b23324, naranja #b3730f) eran tonos para leer sobre blanco. Dos pasos mas claros para leer sobre oscuro. La plantilla los pisa con el color del grupo en linea; esto es el respaldo. */ html[data-theme="dark"] .mc-staff-role.mc-c-red{ color:#e5665a; } html[data-theme="dark"] .mc-staff-role.mc-c-orange{ color:#d9a441; } /* ====================================================================== 6. FOMANTIC UI - reskin oscuro de lo que semantic.min.css pinta claro semantic.min.css se carga ANTES que custom.css y trae todo en blanco (#fff) y negro (rgba(0,0,0,.87)) a mano. custom.css solo re-pinta parte; el resto llega aqui tal cual. ====================================================================== */ /* ---------- segmentos ---------- */ /* El fondo ya lo pone custom.css con el token. Lo que queda: el texto gris del segmento secundario (pie de cada post del foro). */ html[data-theme="dark"] .ui.secondary.segment{ color:var(--mc-muted); } /* ---------- cabeceras ---------- */ html[data-theme="dark"] .ui.dividing.header{ border-bottom-color:var(--mc-line); } /* ---------- botones ---------- */ /* Fondo fosfo + color:var(--mc-black) !important en custom.css: tinta. !important porque custom.css lo usa. :not(.icon) porque en custom.css .ui.icon.button (declarado despues) gana al primary y pinta esos botones con fondo de superficie e icono del color del texto: el engranaje del perfil y la lupa del buscador del foro. Sin la exclusion, la tinta caeria sobre la superficie oscura y el icono desapareceria. Lo mismo con :not(.dropdown): los botones-menu "Moderacion" y "Compartir" son .primary pero custom.css los pinta con .ui.dropdown.button en gris. */ html[data-theme="dark"] .ui.primary.button:not(.icon):not(.dropdown), html[data-theme="dark"] .ui.button.primary:not(.icon):not(.dropdown), html[data-theme="dark"] .ui.primary.button:not(.icon):not(.dropdown):hover, html[data-theme="dark"] .ui.button.primary:not(.icon):not(.dropdown):hover, html[data-theme="dark"] .ui.positive.button:not(.icon):not(.dropdown), html[data-theme="dark"] .ui.positive.button:not(.icon):not(.dropdown):hover{ color:var(--mc-tinta) !important; } /* La bolita "or" entre dos botones (404, redireccion de foro): Fomantic la pinta blanca con texto gris. */ html[data-theme="dark"] .ui.buttons .or:before{ background-color:var(--mc-white); color:var(--mc-muted); } /* ---------- desplegables (.ui.dropdown) ---------- */ html[data-theme="dark"] .ui.dropdown .menu{ background:var(--mc-off); border-color:var(--mc-line-strong); box-shadow:var(--mc-shadow-md); } html[data-theme="dark"] .ui.dropdown .menu > .item{ color:var(--mc-black); } html[data-theme="dark"] .ui.dropdown .menu > .item:hover{ background:rgba(255,255,255,.06); color:var(--mc-black); } html[data-theme="dark"] .ui.dropdown .menu .active.item{ color:var(--mc-green-d); } html[data-theme="dark"] .ui.dropdown .menu .selected.item, html[data-theme="dark"] .ui.dropdown.selected{ background:rgba(255,255,255,.05); color:var(--mc-black); } html[data-theme="dark"] .ui.dropdown .menu > .header{ color:var(--mc-muted); } html[data-theme="dark"] .ui.dropdown .menu > .divider{ border-top-color:var(--mc-line); } html[data-theme="dark"] .ui.dropdown .menu > .item > .description, html[data-theme="dark"] .ui.dropdown > .text > .description, html[data-theme="dark"] .ui.dropdown .menu > .message:not(.ui){ color:var(--mc-muted); } /* La flechita del menu "pointing" (Moderacion, Compartir): blanca. */ html[data-theme="dark"] .ui.pointing.dropdown > .menu:after{ background:var(--mc-off); box-shadow:-1px -1px 0 0 var(--mc-line-strong); } /* Selects convertidos por Fomantic (ajustes, registro, mover tema...). */ html[data-theme="dark"] .ui.selection.dropdown{ background:var(--mc-white); color:var(--mc-black); border-color:var(--mc-line-strong); } html[data-theme="dark"] .ui.selection.dropdown .menu > .item{ border-top-color:var(--mc-line); } html[data-theme="dark"] .ui.selection.dropdown:hover{ border-color:var(--mc-line-strong); } html[data-theme="dark"] .ui.selection.active.dropdown, html[data-theme="dark"] .ui.selection.active.dropdown .menu, html[data-theme="dark"] .ui.selection.dropdown:focus, html[data-theme="dark"] .ui.selection.dropdown:focus .menu{ border-color:var(--mc-green-d); } html[data-theme="dark"] .ui.selection.visible.dropdown > .text:not(.default){ color:var(--mc-black); } html[data-theme="dark"] .ui.default.dropdown:not(.button) > .text, html[data-theme="dark"] .ui.dropdown:not(.button) > .default.text{ color:var(--mc-muted); } html[data-theme="dark"] .ui.search.dropdown > input.search{ color:var(--mc-black); } /* Fomantic fuerza con !important el color de los items de un dropdown que vive DENTRO de un .ui.menu. Mismo !important para poder ganarle. */ html[data-theme="dark"] .ui.menu .ui.dropdown .menu > .item{ color:var(--mc-black) !important; } html[data-theme="dark"] .ui.menu .ui.dropdown .menu > .item:hover, html[data-theme="dark"] .ui.menu .ui.dropdown .menu > .selected.item, html[data-theme="dark"] .ui.menu .ui.dropdown .menu > .active.item{ background:rgba(255,255,255,.06) !important; color:var(--mc-black) !important; } /* ---------- tablas ---------- */ html[data-theme="dark"] .ui.table{ background:var(--mc-white); color:var(--mc-black); } html[data-theme="dark"] .ui.table tfoot th{ background:var(--mc-off); color:var(--mc-black); border-top-color:var(--mc-line); } /* Cebra: azul-negro al 2% no se ve sobre oscuro. */ html[data-theme="dark"] .ui.striped.table tbody tr:nth-child(2n), html[data-theme="dark"] .ui.striped.table > tr:nth-child(2n){ background-color:rgba(255,255,255,.03); } /* Fomantic pone el hover de las tablas seleccionables en NEGRO !important (rgba(0,0,0,.95)): al pasar el raton por un tema del foro el texto desaparecia. Mismo !important para ganarle. */ html[data-theme="dark"] .ui.selectable.table tbody tr:hover, html[data-theme="dark"] .ui.table tbody tr td.selectable:hover{ background:var(--mc-off) !important; color:var(--mc-black) !important; } html[data-theme="dark"] .ui.celled.table tr td, html[data-theme="dark"] .ui.celled.table tr th{ border-left-color:var(--mc-line); } /* Tabla de definicion (ajustes de notificaciones): la primera columna. */ html[data-theme="dark"] .ui.definition.table tr td.definition, html[data-theme="dark"] .ui.definition.table tr td:first-child:not(.ignored){ background:rgba(255,255,255,.04); color:var(--mc-black); } html[data-theme="dark"] .ui.definition.table thead:not(.full-width) th:first-child{ color:var(--mc-muted); box-shadow:-1px -1px 0 1px var(--mc-white); } html[data-theme="dark"] .ui.definition.table td:nth-child(2), html[data-theme="dark"] .ui.definition.table thead:not(.full-width) th:nth-child(2){ border-left-color:var(--mc-line); } /* ---------- mensajes (info / success / warning / error) ---------- */ /* Los de color vienen en pasteles claros con texto oscuro; se pasan a fondo oscuro tenido y texto claro del mismo matiz (todos por encima de 7:1). El borde lo deja custom.css en --mc-line con !important y aqui no se pelea por el: el fondo tenido ya distingue el tipo. */ html[data-theme="dark"] .ui.message{ background:var(--mc-off); color:var(--mc-black); } html[data-theme="dark"] .ui.success.message, html[data-theme="dark"] .ui.positive.message{ background-color:#132a1a; color:#9fe7ad; } html[data-theme="dark"] .ui.success.message .header, html[data-theme="dark"] .ui.positive.message .header{ color:#c4f3cd; } html[data-theme="dark"] .ui.error.message, html[data-theme="dark"] .ui.negative.message, html[data-theme="dark"] .ui.red.message{ background-color:#2b1614; color:#ff9b91; } html[data-theme="dark"] .ui.error.message .header, html[data-theme="dark"] .ui.negative.message .header{ color:#ffb8b0; } html[data-theme="dark"] .ui.info.message{ background-color:#12232e; color:#8cc4ee; } html[data-theme="dark"] .ui.info.message .header{ color:#b1d8f5; } html[data-theme="dark"] .ui.warning.message{ background-color:#2a2210; color:#f0c674; } html[data-theme="dark"] .ui.warning.message .header{ color:#f7d68e; } html[data-theme="dark"] .ui.orange.message{ background-color:#2b1a0f; color:#ffa25c; } /* ---------- formularios ---------- */ /* El Fomantic que carga la pagina es el del nucleo (2.9), no la copia vieja de css/: su regla es `.ui.form:not(.inverted) .field > label:not(.button)`, con dos :not() que suben la especificidad; hay que repetirla igual. */ html[data-theme="dark"] .ui.form .field > label, html[data-theme="dark"] .ui.form:not(.inverted) .field > label:not(.button), html[data-theme="dark"] .ui.form .inline.field > label, html[data-theme="dark"] .ui.form .inline.fields > label, html[data-theme="dark"] .ui.form .inline.fields .field > label, html[data-theme="dark"] .ui.form .grouped.fields > label{ color:var(--mc-black); } /* Fomantic pinta cada tipo de input en blanco con texto negro; custom.css solo cambia el borde de text/password/email. Se cubren TODOS los tipos que usan las plantillas (date en registro, number y file en formularios). */ html[data-theme="dark"] .ui.form input:not([type]), html[data-theme="dark"] .ui.form input[type="date"], html[data-theme="dark"] .ui.form input[type="datetime-local"], html[data-theme="dark"] .ui.form input[type="email"], html[data-theme="dark"] .ui.form input[type="file"], html[data-theme="dark"] .ui.form input[type="number"], html[data-theme="dark"] .ui.form input[type="password"], html[data-theme="dark"] .ui.form input[type="search"], html[data-theme="dark"] .ui.form input[type="tel"], html[data-theme="dark"] .ui.form input[type="text"], html[data-theme="dark"] .ui.form input[type="time"], html[data-theme="dark"] .ui.form input[type="url"], html[data-theme="dark"] .ui.form textarea, html[data-theme="dark"] .ui.form select, html[data-theme="dark"] .ui.input > input{ background:var(--mc-white); color:var(--mc-black); border-color:var(--mc-line-strong); } /* El :focus de Fomantic vuelve a poner fondo #fff y texto negro. */ html[data-theme="dark"] .ui.form input:not([type]):focus, html[data-theme="dark"] .ui.form input[type="date"]:focus, html[data-theme="dark"] .ui.form input[type="datetime-local"]:focus, html[data-theme="dark"] .ui.form input[type="email"]:focus, html[data-theme="dark"] .ui.form input[type="file"]:focus, html[data-theme="dark"] .ui.form input[type="number"]:focus, html[data-theme="dark"] .ui.form input[type="password"]:focus, html[data-theme="dark"] .ui.form input[type="search"]:focus, html[data-theme="dark"] .ui.form input[type="tel"]:focus, html[data-theme="dark"] .ui.form input[type="text"]:focus, html[data-theme="dark"] .ui.form input[type="time"]:focus, html[data-theme="dark"] .ui.form input[type="url"]:focus, html[data-theme="dark"] .ui.form textarea:focus, html[data-theme="dark"] .ui.input > input:focus, html[data-theme="dark"] .ui.input.focus > input{ background:var(--mc-white); color:var(--mc-black); border-color:var(--mc-green-btn); } /* El icono de la lupa dentro de un .ui.icon.input (buscar miembro, sanciones) hereda el color del contenedor, que Fomantic deja en negro. */ html[data-theme="dark"] .ui.input{ color:var(--mc-black); } html[data-theme="dark"] .ui.input > input:active, html[data-theme="dark"] .ui.input.down input{ background:var(--mc-white); color:var(--mc-black); border-color:var(--mc-line-strong); } html[data-theme="dark"] .ui.action.input:not([class*="left action"]) > input:focus{ border-right-color:var(--mc-green-btn) !important; } /* !important: lo lleva la regla de Fomantic */ html[data-theme="dark"] .ui.input.error > input{ background-color:#2b1614; border-color:#6b2a26; color:#ff9b91; } /* Casillas y radios. Fomantic dibuja la caja con un ::before blanco y la marca con un ::after negro; cada estado repite los dos colores, asi que hay que repetir cada estado con el prefijo. */ html[data-theme="dark"] .ui.checkbox label, html[data-theme="dark"] .ui.checkbox + label, html[data-theme="dark"] .ui.checkbox label:hover, html[data-theme="dark"] .ui.checkbox + label:hover, html[data-theme="dark"] .ui.checkbox input:focus ~ label, html[data-theme="dark"] .ui.checkbox input:active ~ label{ color:var(--mc-black); } html[data-theme="dark"] .ui.checkbox .box:before, html[data-theme="dark"] .ui.checkbox label:before, html[data-theme="dark"] .ui.checkbox .box:hover::before, html[data-theme="dark"] .ui.checkbox label:hover::before, html[data-theme="dark"] .ui.checkbox .box:active::before, html[data-theme="dark"] .ui.checkbox label:active::before{ background:var(--mc-off); border-color:var(--mc-line-strong); } html[data-theme="dark"] .ui.checkbox input:focus ~ .box:before, html[data-theme="dark"] .ui.checkbox input:focus ~ label:before, html[data-theme="dark"] .ui.checkbox input:checked ~ .box:before, html[data-theme="dark"] .ui.checkbox input:checked ~ label:before, html[data-theme="dark"] .ui.checkbox input:not([type=radio]):indeterminate ~ .box:before, html[data-theme="dark"] .ui.checkbox input:not([type=radio]):indeterminate ~ label:before, html[data-theme="dark"] .ui.checkbox input:checked:focus ~ .box:before, html[data-theme="dark"] .ui.checkbox input:checked:focus ~ label:before, html[data-theme="dark"] .ui.checkbox input:not([type=radio]):indeterminate:focus ~ .box:before, html[data-theme="dark"] .ui.checkbox input:not([type=radio]):indeterminate:focus ~ label:before{ background:var(--mc-off); border-color:var(--mc-green-d); } /* La marca: fosfo, que sobre la caja oscura es lo que mas canta. */ html[data-theme="dark"] .ui.checkbox .box:after, html[data-theme="dark"] .ui.checkbox label:after, html[data-theme="dark"] .ui.checkbox .box:active::after, html[data-theme="dark"] .ui.checkbox label:active::after, html[data-theme="dark"] .ui.checkbox input:focus ~ .box:after, html[data-theme="dark"] .ui.checkbox input:focus ~ label:after, html[data-theme="dark"] .ui.checkbox input:checked ~ .box:after, html[data-theme="dark"] .ui.checkbox input:checked ~ label:after, html[data-theme="dark"] .ui.checkbox input:not([type=radio]):indeterminate ~ .box:after, html[data-theme="dark"] .ui.checkbox input:not([type=radio]):indeterminate ~ label:after, html[data-theme="dark"] .ui.checkbox input:checked:focus ~ .box:after, html[data-theme="dark"] .ui.checkbox input:checked:focus ~ label:after{ color:var(--mc-green-btn); } html[data-theme="dark"] .ui.checkbox input[disabled] ~ label, html[data-theme="dark"] .ui.disabled.checkbox label{ color:var(--mc-black); } /* Radio: el punto es un fondo, no un caracter. */ html[data-theme="dark"] .ui.radio.checkbox .box:after, html[data-theme="dark"] .ui.radio.checkbox label:after, html[data-theme="dark"] .ui.radio.checkbox input:focus ~ .box:after, html[data-theme="dark"] .ui.radio.checkbox input:focus ~ label:after, html[data-theme="dark"] .ui.radio.checkbox input:checked ~ .box:after, html[data-theme="dark"] .ui.radio.checkbox input:checked ~ label:after, html[data-theme="dark"] .ui.radio.checkbox input:focus:checked ~ .box:after, html[data-theme="dark"] .ui.radio.checkbox input:focus:checked ~ label:after{ background-color:var(--mc-green-btn); } html[data-theme="dark"] .ui.radio.checkbox input:focus ~ .box:before, html[data-theme="dark"] .ui.radio.checkbox input:focus ~ label:before, html[data-theme="dark"] .ui.radio.checkbox input:checked ~ .box:before, html[data-theme="dark"] .ui.radio.checkbox input:checked ~ label:before, html[data-theme="dark"] .ui.radio.checkbox input:focus:checked ~ .box:before, html[data-theme="dark"] .ui.radio.checkbox input:focus:checked ~ label:before{ background-color:var(--mc-off); } /* Interruptores (ajustes de notificaciones). Fomantic pone el texto del estado marcado en NEGRO !important y el carril en azul !important. Mismo !important para ganarle; el carril encendido va en verde. */ html[data-theme="dark"] .ui.toggle.checkbox .box, html[data-theme="dark"] .ui.toggle.checkbox label{ color:var(--mc-black); } html[data-theme="dark"] .ui.toggle.checkbox input:checked ~ .box, html[data-theme="dark"] .ui.toggle.checkbox input:checked ~ label, html[data-theme="dark"] .ui.toggle.checkbox input:focus:checked ~ .box, html[data-theme="dark"] .ui.toggle.checkbox input:focus:checked ~ label{ color:var(--mc-black) !important; } html[data-theme="dark"] .ui.toggle.checkbox .box:before, html[data-theme="dark"] .ui.toggle.checkbox label:before{ background:rgba(255,255,255,.14); } html[data-theme="dark"] .ui.toggle.checkbox .box:hover::before, html[data-theme="dark"] .ui.toggle.checkbox label:hover::before, html[data-theme="dark"] .ui.toggle.checkbox input:focus ~ .box:before, html[data-theme="dark"] .ui.toggle.checkbox input:focus ~ label:before{ background-color:rgba(255,255,255,.22); } html[data-theme="dark"] .ui.toggle.checkbox input:checked ~ .box:before, html[data-theme="dark"] .ui.toggle.checkbox input:checked ~ label:before, html[data-theme="dark"] .ui.toggle.checkbox input:focus:checked ~ .box:before, html[data-theme="dark"] .ui.toggle.checkbox input:focus:checked ~ label:before{ background-color:var(--mc-green-btn-d) !important; } /* ---------- separadores ---------- */ /* La linea de arriba ya es --mc-line via custom.css. Fomantic anade una segunda linea BLANCA al 10% debajo (efecto bisel sobre blanco), que sobre oscuro se ve como un filo doble. El color del texto (el rotulo de los divisores horizontales) viene en negro al 85%. */ html[data-theme="dark"] .ui.divider{ color:var(--mc-muted); } html[data-theme="dark"] .ui.divider:not(.vertical):not(.horizontal){ border-bottom-color:transparent; } /* El divisor horizontal con texto ("Detalles" en sanciones) dibuja sus dos lineas con un PNG gris incrustado; se cambia por un degradado plano. */ html[data-theme="dark"] .ui.horizontal.divider:after, html[data-theme="dark"] .ui.horizontal.divider:before{ background-image:linear-gradient(var(--mc-line-strong), var(--mc-line-strong)); } /* ---------- paginacion ---------- */ /* La pagina activa es fosfo con color:var(--mc-black) !important. Tinta. */ html[data-theme="dark"] .ui.pagination.menu .item.active{ color:var(--mc-tinta) !important; } /* ---------- tarjetas (.ui.card: widgets, miembros, mensajes, status) ---------- */ html[data-theme="dark"] .ui.card, html[data-theme="dark"] .ui.cards > .card{ background:var(--mc-white); } html[data-theme="dark"] .ui.card > .content, html[data-theme="dark"] .ui.cards > .card > .content{ border-top-color:var(--mc-line); } html[data-theme="dark"] .ui.card > .content > .header, html[data-theme="dark"] .ui.cards > .card > .content > .header, html[data-theme="dark"] .ui.card > .content > a.header, html[data-theme="dark"] .ui.cards > .card > .content > a.header{ color:var(--mc-black); } html[data-theme="dark"] .ui.card > .content > a.header:hover, html[data-theme="dark"] .ui.cards > .card > .content > a.header:hover{ color:var(--mc-green-d); } html[data-theme="dark"] .ui.card > .content > .description, html[data-theme="dark"] .ui.cards > .card > .content > .description{ color:var(--mc-texto-2); } html[data-theme="dark"] .ui.card .meta, html[data-theme="dark"] .ui.cards > .card .meta, html[data-theme="dark"] .ui.card .meta > a:not(.ui), html[data-theme="dark"] .ui.cards > .card .meta > a:not(.ui), html[data-theme="dark"] .ui.card > .extra, html[data-theme="dark"] .ui.cards > .card > .extra, html[data-theme="dark"] .ui.card > .extra a:not(.ui), html[data-theme="dark"] .ui.cards > .card > .extra a:not(.ui){ color:var(--mc-muted); } html[data-theme="dark"] .ui.card > .extra a:not(.ui):hover, html[data-theme="dark"] .ui.cards > .card > .extra a:not(.ui):hover, html[data-theme="dark"] .ui.card .meta > a:not(.ui):hover, html[data-theme="dark"] .ui.cards > .card .meta > a:not(.ui):hover{ color:var(--mc-green-d); } /* Fomantic fija con !important el borde superior del pie de la tarjeta. */ html[data-theme="dark"] .ui.card > .extra, html[data-theme="dark"] .ui.cards > .card > .extra{ border-top:1px solid var(--mc-line) !important; } /* ---------- popups y tooltips ---------- */ /* El popup de cuenta/alertas del authbar, los de titulo de tema, el de usuario (#user-popup). Fondo blanco y flecha blanca con filo gris. */ html[data-theme="dark"] .ui.popup{ background:var(--mc-off); color:var(--mc-black); } html[data-theme="dark"] .ui.popup:before, html[data-theme="dark"] .ui.top.popup:before, html[data-theme="dark"] .ui.bottom.popup:before, html[data-theme="dark"] .ui.left.center.popup:before, html[data-theme="dark"] .ui.right.center.popup:before, html[data-theme="dark"] .ui.top.left.popup:before, html[data-theme="dark"] .ui.top.right.popup:before, html[data-theme="dark"] .ui.bottom.left.popup:before, html[data-theme="dark"] .ui.bottom.right.popup:before{ background:var(--mc-off); box-shadow:none; } /* Tooltips por atributo (data-tooltip): la version normal es blanca, la "inverted" es #1b1c1d, que sobre nuestras superficies casi no se distingue. Las dos pasan a la superficie elevada con borde. */ html[data-theme="dark"] [data-tooltip]:not([data-inverted]):after, html[data-theme="dark"] [data-tooltip][data-inverted]:after{ background:var(--mc-off); color:var(--mc-black); border:1px solid var(--mc-line-strong); box-shadow:var(--mc-shadow-sm); } html[data-theme="dark"] [data-tooltip]:not([data-inverted]):before, html[data-theme="dark"] [data-tooltip][data-inverted]:before{ background:var(--mc-off); box-shadow:1px 1px 0 0 var(--mc-line-strong); } /* ---------- modales, dimmers y loaders ---------- */ html[data-theme="dark"] .ui.modal, html[data-theme="dark"] .ui.modal > .header, html[data-theme="dark"] .ui.modal > .content, html[data-theme="dark"] .ui.modal > .scrolling.content{ background:var(--mc-white); color:var(--mc-black); } html[data-theme="dark"] .ui.modal > .header{ border-bottom-color:var(--mc-line); } html[data-theme="dark"] .ui.modal > .actions{ border-top-color:var(--mc-line); } /* En pantallas chicas Fomantic mete la X dentro del modal y la pinta negra. */ html[data-theme="dark"] .ui.modal > .close{ color:var(--mc-black); } /* Dimmer invertido (la carga de sanciones): blanco al 85%. */ html[data-theme="dark"] .ui.inverted.dimmer{ background-color:rgba(15,20,17,.85); } html[data-theme="dark"] .ui.inverted.dimmer .ui.loader, html[data-theme="dark"] .ui.text.loader{ color:var(--mc-black); } html[data-theme="dark"] .ui.loader:before, html[data-theme="dark"] .ui.inverted.dimmer .ui.loader:before{ border-color:rgba(255,255,255,.12); } html[data-theme="dark"] .ui.loader:after, html[data-theme="dark"] .ui.inverted.dimmer .ui.loader:after{ border-color:var(--mc-green-d) transparent transparent; } /* ---------- menus (vertical del panel de usuario, pointing de miembros, tabular del perfil, pestanas del modal de reacciones) ---------- */ html[data-theme="dark"] .ui.menu{ background:var(--mc-white); border-color:var(--mc-line); box-shadow:var(--mc-shadow-sm); } html[data-theme="dark"] .ui.vertical.menu{ background:var(--mc-white); box-shadow:var(--mc-shadow-sm); } html[data-theme="dark"] .ui.menu .item{ color:var(--mc-black); } html[data-theme="dark"] .ui.menu .item:before, html[data-theme="dark"] .ui.vertical.menu .item:before{ background:var(--mc-line); } html[data-theme="dark"] .ui.link.menu .item:hover, html[data-theme="dark"] .ui.menu .dropdown.item:hover, html[data-theme="dark"] .ui.menu .link.item:hover, html[data-theme="dark"] .ui.menu a.item:hover{ background:rgba(255,255,255,.05); color:var(--mc-black); } /* La copia vieja de semantic.min.css del tema trae una regla propia: .ui.menu .active.item{background:rgba(0,0,0,.5) !important; color:white !important}. Sobre oscuro es un bloque negro. Mismo !important, en verde. :not(.pagination) porque la paginacion tiene su propio activo en fosfo (custom.css) y esta regla, con un nivel mas de especificidad, se lo pisaba y dejaba tinta oscura sobre el tinte. */ html[data-theme="dark"] .ui.menu:not(.pagination) .active.item, html[data-theme="dark"] .ui.menu:not(.pagination) .active.item:hover, html[data-theme="dark"] .ui.vertical.menu .active.item:hover{ background:var(--mc-green-tint) !important; color:var(--mc-green-d) !important; } html[data-theme="dark"] .ui.pointing.menu .active.item:after, html[data-theme="dark"] .ui.vertical.pointing.menu .active.item:after, html[data-theme="dark"] .ui.vertical.pointing.menu .active.item:hover:after{ background-color:var(--mc-green-tint); } /* Pestanas del perfil: la activa tiene que fundirse con el segmento que cuelga debajo, no ser verde. */ html[data-theme="dark"] .ui.tabular.menu{ border-bottom-color:var(--mc-line-strong); } html[data-theme="dark"] .ui.tabular.menu .item{ color:var(--mc-black); } html[data-theme="dark"] .ui.tabular.menu .item:hover{ color:var(--mc-green-d); } html[data-theme="dark"] .ui.tabular.menu .active.item, html[data-theme="dark"] .ui.tabular.menu .active.item:hover{ background:var(--mc-white) !important; color:var(--mc-black) !important; border-color:var(--mc-line-strong); } /* ---------- listas ---------- */ /* Fomantic 2.9 (el del nucleo) pinta el .content de cada item en negro al 87%; la copia vieja no lo hacia. inherit y no un color fijo: en las listas de seleccion el item va en texto secundario y el contenido debe seguirlo. */ html[data-theme="dark"] .ui.list .list > .item > .content, html[data-theme="dark"] .ui.list > .item > .content{ color:inherit; } html[data-theme="dark"] .ui.list .list > .item .header, html[data-theme="dark"] .ui.list > .item .header{ color:var(--mc-black); } html[data-theme="dark"] .ui.list .list > .item .description, html[data-theme="dark"] .ui.list > .item .description{ color:var(--mc-texto-2); } /* Titulos de tema en los widgets (a.header): Fomantic los fuerza en azul !important. Texto claro, verde al pasar, como los de la tabla del foro. */ html[data-theme="dark"] .ui.list .list > .item a.header, html[data-theme="dark"] .ui.list > .item a.header{ color:var(--mc-black) !important; } html[data-theme="dark"] .ui.list .list > .item a.header:hover, html[data-theme="dark"] .ui.list > .item a.header:hover{ color:var(--mc-green-d) !important; } html[data-theme="dark"] .ui.list .list > a.item, html[data-theme="dark"] .ui.list > a.item{ color:var(--mc-green-d); } html[data-theme="dark"] .ui.list .list > a.item:hover, html[data-theme="dark"] .ui.list > a.item:hover{ color:var(--mc-green-btn); } html[data-theme="dark"] .ui.list .list > a.item i.icon, html[data-theme="dark"] .ui.list > a.item i.icon{ color:var(--mc-muted); } /* Lista de enlaces (menus emergentes de cuenta, alertas y mensajes). */ html[data-theme="dark"] .ui.link.list .item, html[data-theme="dark"] .ui.link.list .item a:not(.ui), html[data-theme="dark"] .ui.link.list a.item{ color:var(--mc-texto-2); } html[data-theme="dark"] .ui.link.list.list .item a:not(.ui):hover, html[data-theme="dark"] .ui.link.list.list a.item:hover{ color:var(--mc-green-d); } html[data-theme="dark"] .ui.link.list.list .item a:not(.ui):active, html[data-theme="dark"] .ui.link.list.list a.item:active, html[data-theme="dark"] .ui.link.list.list .active.item, html[data-theme="dark"] .ui.link.list.list .active.item a:not(.ui){ color:var(--mc-black); } /* Lista de seleccion (alertas, miembros, sanciones, modal de reacciones). */ html[data-theme="dark"] .ui.selection.list .list > .item, html[data-theme="dark"] .ui.selection.list > .item{ color:var(--mc-texto-2); } html[data-theme="dark"] .ui.selection.list.list > .item:hover, html[data-theme="dark"] .ui.selection.list > .item:hover{ background:rgba(255,255,255,.05); color:var(--mc-black); } html[data-theme="dark"] .ui.selection.list .list > .item:active, html[data-theme="dark"] .ui.selection.list > .item:active, html[data-theme="dark"] .ui.selection.list .list > .item.active, html[data-theme="dark"] .ui.selection.list > .item.active{ background:rgba(255,255,255,.08); color:var(--mc-black); } html[data-theme="dark"] .ui.divided.list > .item, html[data-theme="dark"] .ui.divided.list:not(.horizontal) .list > .item:first-child{ border-top-color:var(--mc-line); } /* ---------- etiquetas (.ui.label) ---------- */ /* La gris por defecto (#e8e8e8 con texto negro al 60%): la de cuenta del authbar, las de usuarios conectados, la de IP en status, las de sesion. Las de color (red, green, blue...) llevan !important en Fomantic y no se tocan: siguen siendo de color con texto blanco. */ html[data-theme="dark"] .ui.label, html[data-theme="dark"] .ui.image.label{ background:var(--mc-off); color:var(--mc-black); } html[data-theme="dark"] a.ui.label:hover{ background:var(--mc-line-strong); color:var(--mc-black); } html[data-theme="dark"] .ui.image.label .detail{ background:rgba(255,255,255,.08); } html[data-theme="dark"] .ui.basic.label{ background:transparent; border-color:var(--mc-line-strong); color:var(--mc-black); } /* ---------- buscador de miembros (.ui.search) ---------- */ html[data-theme="dark"] .ui.search > .prompt{ background:var(--mc-white); border-color:var(--mc-line-strong); color:var(--mc-black); } html[data-theme="dark"] .ui.search > .prompt:focus{ background:var(--mc-white); border-color:var(--mc-green-d); color:var(--mc-black); } html[data-theme="dark"] .ui.search > .results{ background:var(--mc-off); border-color:var(--mc-line-strong); box-shadow:var(--mc-shadow-md); } html[data-theme="dark"] .ui.search > .results .result{ color:var(--mc-black); border-bottom-color:var(--mc-line); } html[data-theme="dark"] .ui.search > .results .result:hover, html[data-theme="dark"] .ui.search > .results .result.active{ background:rgba(255,255,255,.06); } html[data-theme="dark"] .ui.search > .results .result .title, html[data-theme="dark"] .ui.search > .results .result.active .title, html[data-theme="dark"] .ui.search > .results > .message .header, html[data-theme="dark"] .ui.search > .results > .message .description{ color:var(--mc-black); } html[data-theme="dark"] .ui.search > .results .result .description, html[data-theme="dark"] .ui.search > .results .result.active .description{ color:var(--mc-muted); } html[data-theme="dark"] .ui.search > .results > .action{ background:var(--mc-white); color:var(--mc-black); } /* ---------- comentarios (muro del perfil) ---------- */ html[data-theme="dark"] .ui.comments .comment .author, html[data-theme="dark"] .ui.comments .comment .text{ color:var(--mc-black); } html[data-theme="dark"] .ui.comments .comment a.author:hover{ color:var(--mc-green-d); } html[data-theme="dark"] .ui.comments .comment .metadata, html[data-theme="dark"] .ui.comments .comment .actions a{ color:var(--mc-muted); } html[data-theme="dark"] .ui.comments .comment .actions a:hover, html[data-theme="dark"] .ui.comments .comment .actions a.active{ color:var(--mc-green-d); } /* ---------- estadisticas, progreso, placeholders (por si un modulo los pinta) ---------- */ html[data-theme="dark"] .ui.statistic > .value, html[data-theme="dark"] .ui.statistics .statistic > .value{ color:var(--mc-black); } html[data-theme="dark"] .ui.statistic > .label, html[data-theme="dark"] .ui.statistics .statistic > .label{ color:var(--mc-muted); } html[data-theme="dark"] .ui.progress{ background:rgba(255,255,255,.1); } html[data-theme="dark"] .ui.progress .bar{ background:var(--mc-green-d); } html[data-theme="dark"] .ui.progress > .label{ color:var(--mc-black); } html[data-theme="dark"] .ui.placeholder, html[data-theme="dark"] .ui.placeholder .image.header:after, html[data-theme="dark"] .ui.placeholder .line, html[data-theme="dark"] .ui.placeholder .line:after, html[data-theme="dark"] .ui.placeholder > :before{ background-color:var(--mc-white); } html[data-theme="dark"] .ui.placeholder{ background-image:linear-gradient(to right, rgba(255,255,255,.06) 0%, rgba(255,255,255,.12) 15%, rgba(255,255,255,.06) 30%); } /* ---------- icono circular invertido (lupa de sanciones) ---------- */ /* Fomantic: fondo #1b1c1d !important con icono blanco. Sobre oscuro es un circulo gris; en fosfo con tinta es el boton de buscar. */ html[data-theme="dark"] i.inverted.circular.icon, html[data-theme="dark"] i.inverted.bordered.icon{ background-color:var(--mc-green-btn) !important; color:var(--mc-tinta) !important; } /* ====================================================================== 7. FORO Y HERENCIA DE DEFAULTREVAMP (custom.css lineas 1-994) ====================================================================== */ /* Barra lateral del post: linea negra al 10% y una flechita hecha con dos bordes (uno gris para el filo y otro BLANCO que tapa, del color del segmento). El blanco hay que cambiarlo por la superficie o queda un triangulo blanco flotando. */ @media only screen and (min-width: 768px){ html[data-theme="dark"] #topic-post #post-sidebar, html[data-theme="dark"] #topic-reply #reply-sidebar{ border-right-color:var(--mc-line); } html[data-theme="dark"] #topic-post #post-sidebar:before, html[data-theme="dark"] #topic-reply #reply-sidebar:before{ border-right-color:var(--mc-line-strong); } html[data-theme="dark"] #topic-post #post-sidebar:after, html[data-theme="dark"] #topic-reply #reply-sidebar:after{ border-right-color:var(--mc-white); } } @media only screen and (max-width: 768px){ html[data-theme="dark"] #topic-post #post-sidebar, html[data-theme="dark"] #topic-reply #reply-sidebar{ border-bottom-color:var(--mc-line); } } html[data-theme="dark"] #profile-header{ background-color:var(--mc-white); } /* Toastr (avisos flotantes de "copiado", etc.): tarjeta blanca, texto negro y sombra gris #bababb a mano en custom.css. */ html[data-theme="dark"] #toast-container .toast, html[data-theme="dark"] #toast-container .toast:hover{ background:var(--mc-off); color:var(--mc-black); box-shadow:0 8px 24px rgba(0,0,0,.6), 0 0 0 1px var(--mc-line-strong); } html[data-theme="dark"] #toast-container .toast-close-button, html[data-theme="dark"] #toast-container .toast-close-button:hover, html[data-theme="dark"] #toast-container .toast-close-button:focus{ color:var(--mc-black); text-shadow:none; } /* Spoilers del editor. */ html[data-theme="dark"] #tinymce .spoiler, html[data-theme="dark"] .spoiler{ color:var(--mc-black); background:var(--mc-off); box-shadow:0 0 0 1px var(--mc-line-strong) inset, 0 0 0 0 transparent; } html[data-theme="dark"] #tinymce .spoiler-toggle, html[data-theme="dark"] .spoiler-toggle, html[data-theme="dark"] #tinymce .spoiler-text, html[data-theme="dark"] .spoiler-text{ color:var(--mc-black); } /* Insignias de usuario (.badge, estilo Bootstrap). Solo la gris y la clara necesitan cambio; las de color ya son de color con texto blanco. */ html[data-theme="dark"] .badge{ background-color:var(--mc-off); color:var(--mc-black); } html[data-theme="dark"] .badge-light{ background-color:#2a332c; color:var(--mc-black); } html[data-theme="dark"] a.badge-light:hover, html[data-theme="dark"] a.badge-light:focus{ background-color:var(--mc-line-strong); color:var(--mc-black); } /* Encuestas (MinecubPolls): todo va por token salvo estos dos. */ html[data-theme="dark"] .mc-poll-btn{ color:var(--mc-tinta); } html[data-theme="dark"] .mc-poll-opt-del:hover{ border-color:#e5665a; color:#ff9b91; background:rgba(192,57,43,.18); } /* ---------- Editor TinyMCE 5 (skin oxide) ---------- El skin lo inyecta el propio TinyMCE al arrancar, asi que llega DESPUES de este fichero; se gana solo por la especificidad extra del prefijo. Aqui se oscurece el MARCO (barra de herramientas, menus, dialogos, barra de estado). El contenido que se escribe vive dentro de un iframe con su propio CSS del nucleo y desde aqui no se puede tocar: se queda como una hoja blanca con texto negro. */ html[data-theme="dark"] .tox{ color:var(--mc-black); } html[data-theme="dark"] .tox-tinymce{ border-color:var(--mc-line-strong); border-radius:8px; } /* background (no background-color): asi se quita tambien la linea SVG gris que el skin incrusta como imagen de fondo de la barra. */ html[data-theme="dark"] .tox .tox-toolbar-overlord, html[data-theme="dark"] .tox .tox-toolbar, html[data-theme="dark"] .tox .tox-toolbar__overflow, html[data-theme="dark"] .tox .tox-toolbar__primary, html[data-theme="dark"] .tox .tox-menubar, html[data-theme="dark"] .tox .tox-sidebar{ background:var(--mc-white); } html[data-theme="dark"] .tox .tox-toolbar__group:not(:last-of-type){ border-right-color:var(--mc-line); } html[data-theme="dark"] .tox .tox-tbtn, html[data-theme="dark"] .tox .tox-mbtn{ color:var(--mc-black); } html[data-theme="dark"] .tox .tox-tbtn svg{ fill:var(--mc-black); } html[data-theme="dark"] .tox .tox-tbtn:hover, html[data-theme="dark"] .tox .tox-mbtn:hover:not(:disabled):not(.tox-mbtn--active){ background:var(--mc-off); color:var(--mc-black); } html[data-theme="dark"] .tox .tox-tbtn--enabled, html[data-theme="dark"] .tox .tox-tbtn--enabled:hover, html[data-theme="dark"] .tox .tox-mbtn--active{ background:var(--mc-green-tint); color:var(--mc-green-d); } html[data-theme="dark"] .tox .tox-tbtn--enabled svg, html[data-theme="dark"] .tox .tox-tbtn--enabled:hover svg{ fill:var(--mc-green-d); } html[data-theme="dark"] .tox .tox-tbtn--disabled, html[data-theme="dark"] .tox .tox-tbtn--disabled:hover, html[data-theme="dark"] .tox .tox-tbtn:disabled, html[data-theme="dark"] .tox .tox-tbtn:disabled:hover{ color:rgba(233,238,233,.45); } html[data-theme="dark"] .tox .tox-tbtn--disabled svg, html[data-theme="dark"] .tox .tox-tbtn--disabled:hover svg, html[data-theme="dark"] .tox .tox-tbtn:disabled svg, html[data-theme="dark"] .tox .tox-tbtn:disabled:hover svg, html[data-theme="dark"] .tox .tox-tbtn__select-chevron svg{ fill:rgba(233,238,233,.45); } html[data-theme="dark"] .tox .tox-split-button:hover{ box-shadow:0 0 0 1px var(--mc-line-strong) inset; } html[data-theme="dark"] .tox .tox-statusbar{ background-color:var(--mc-white); border-top-color:var(--mc-line); color:var(--mc-muted); } html[data-theme="dark"] .tox .tox-statusbar a, html[data-theme="dark"] .tox .tox-statusbar__path-item, html[data-theme="dark"] .tox .tox-statusbar__wordcount{ color:var(--mc-muted); } html[data-theme="dark"] .tox .tox-statusbar__resize-handle svg{ fill:var(--mc-muted); } /* Menus desplegables del editor (formatos, tabla, emoticonos...). */ html[data-theme="dark"] .tox .tox-menu, html[data-theme="dark"] .tox .tox-pop__dialog{ background-color:var(--mc-off); border-color:var(--mc-line-strong); box-shadow:var(--mc-shadow-md); } html[data-theme="dark"] .tox .tox-collection__item{ color:var(--mc-black); } html[data-theme="dark"] .tox .tox-collection--list .tox-collection__item--enabled{ background-color:var(--mc-off); color:var(--mc-black); } html[data-theme="dark"] .tox .tox-collection--list .tox-collection__item--active{ background-color:var(--mc-green-tint); } html[data-theme="dark"] .tox .tox-collection__group{ border-top-color:var(--mc-line); } html[data-theme="dark"] .tox .tox-collection__group-heading{ background-color:var(--mc-white); color:var(--mc-muted); } html[data-theme="dark"] .tox .tox-collection__item-accessory{ color:var(--mc-muted); } /* Dialogos (insertar enlace, imagen, codigo fuente). */ html[data-theme="dark"] .tox .tox-dialog-wrap__backdrop{ background-color:rgba(15,20,17,.78); } html[data-theme="dark"] .tox .tox-dialog{ background-color:var(--mc-white); border-color:var(--mc-line-strong); box-shadow:var(--mc-shadow-md); } html[data-theme="dark"] .tox .tox-dialog__header, html[data-theme="dark"] .tox .tox-dialog__footer{ background-color:var(--mc-white); color:var(--mc-black); } html[data-theme="dark"] .tox .tox-dialog__footer{ border-top-color:var(--mc-line); } html[data-theme="dark"] .tox .tox-dialog__body{ color:var(--mc-black); } html[data-theme="dark"] .tox .tox-dialog__body-nav-item{ color:var(--mc-muted); } html[data-theme="dark"] .tox .tox-dialog__body-nav-item--active{ border-bottom-color:var(--mc-green-btn); color:var(--mc-green-d); } html[data-theme="dark"] .tox .tox-dialog__body-content a{ color:var(--mc-green-d); } html[data-theme="dark"] .tox .tox-label, html[data-theme="dark"] .tox .tox-toolbar-label, html[data-theme="dark"] .tox .tox-insert-table-picker__label{ color:var(--mc-muted); } html[data-theme="dark"] .tox .tox-listboxfield .tox-listbox--select, html[data-theme="dark"] .tox .tox-textarea, html[data-theme="dark"] .tox .tox-textfield, html[data-theme="dark"] .tox .tox-toolbar-textfield, html[data-theme="dark"] .tox .tox-selectfield select{ background-color:var(--mc-bg); border-color:var(--mc-line-strong); color:var(--mc-black); } html[data-theme="dark"] .tox .tox-listboxfield .tox-listbox--select:focus, html[data-theme="dark"] .tox .tox-textarea:focus, html[data-theme="dark"] .tox .tox-textfield:focus{ background-color:var(--mc-bg); border-color:var(--mc-green-d); } /* Botones del dialogo: el principal en fosfo con tinta, el secundario como los botones grises del sitio. */ html[data-theme="dark"] .tox .tox-button{ background-color:var(--mc-green-btn); border-color:var(--mc-green-btn); color:var(--mc-tinta); } html[data-theme="dark"] .tox .tox-button:hover:not(:disabled){ background-color:var(--mc-green-btn-d); border-color:var(--mc-green-btn-d); color:var(--mc-tinta); } html[data-theme="dark"] .tox .tox-button--secondary{ background-color:var(--mc-off); border-color:var(--mc-line-strong); color:var(--mc-black); } html[data-theme="dark"] .tox .tox-button--secondary:hover:not(:disabled){ background-color:var(--mc-line-strong); border-color:var(--mc-line-strong); color:var(--mc-black); } html[data-theme="dark"] .tox .tox-button--naked{ background-color:transparent; border-color:transparent; color:var(--mc-black); } html[data-theme="dark"] .tox .tox-button--naked:hover:not(:disabled){ background-color:var(--mc-off); border-color:var(--mc-off); color:var(--mc-black); } html[data-theme="dark"] .tox .tox-checkbox__icons .tox-checkbox-icon__unchecked svg{ fill:rgba(233,238,233,.35); } /* ====================================================================== 8. PERFIL, ESTADISTICAS Y CLASIFICACIONES (mc-stats-*, mc-lb-*) La cabecera con el render del jugador ya sale oscura sola: su degradado va de --mc-white a --mc-off, que ahora son superficie y elevada, y el lavado fosfo sigue igual. Aqui solo se ajustan bordes, sombras y los pocos colores escritos a mano. ====================================================================== */ /* El render llevaba una sombra negra al 22% pensada para el fondo claro; sobre oscuro hace falta mas densidad para que el cuerpo se despegue. */ html[data-theme="dark"] .mc-stats-skin img{ filter:drop-shadow(0 8px 16px rgba(0,0,0,.65)); } /* Filos verdes al 26-30% del verde CLARO (#2f9a45): sobre oscuro casi no se ven. Se pasan al verde legible y un punto mas de opacidad. */ html[data-theme="dark"] .mc-stats-skin, html[data-theme="dark"] .mc-lb-cifra{ border-color:rgba(63,191,90,.38); } /* Las cifras destacadas eran tarjetas blancas sobre el degradado; ahora van hundidas (mas oscuras que la cabecera) con filo, que es como se lee un dato "grabado" sobre un panel oscuro. */ html[data-theme="dark"] .mc-stats-tarjeta{ background:rgba(15,20,17,.55); border-color:var(--mc-line-strong); box-shadow:none; } /* Aviso ambar (nota de "datos por nombre", aviso de clasificaciones). */ html[data-theme="dark"] .mc-stats-nota.mc-nota-aviso, html[data-theme="dark"] .mc-lb-nota.mc-nota-aviso{ background:#2a2210; color:#f0c674; border-color:#4a3a12; } /* Los cuerpos de panel son POZOS: van un punto mas oscuros que la superficie para que las tarjetas de dentro (superficie) se lean encima de ellos. Con el token --mc-off (elevada) saldrian mas claros que sus propias tarjetas. */ html[data-theme="dark"] .mc-lb-cuerpo, html[data-theme="dark"] .mc-stats-seccion{ background:var(--mc-hueco); } /* Podio: el primero es fosfo con color:var(--mc-black). Tinta. */ html[data-theme="dark"] .mc-lb-fila.mc-podio-1 .mc-lb-puesto{ color:var(--mc-tinta); } /* Chips (.mc-chip): filo del verde legible; el hover era un verde pastel #d8f0dc. El fuerte es fosfo con color:var(--mc-black) !important. Tinta. */ html[data-theme="dark"] .mc-chip{ border-color:rgba(63,191,90,.38); } html[data-theme="dark"] .mc-chip:hover{ background:#1b3f25; border-color:rgba(63,191,90,.65); } html[data-theme="dark"] .mc-chip-fuerte, html[data-theme="dark"] .mc-chip-fuerte:hover{ color:var(--mc-tinta) !important; border-color:var(--mc-green-btn); } html[data-theme="dark"] .mc-chip-fuerte:hover{ border-color:var(--mc-green-btn-d); } /* Volcado de /stats: background:var(--mc-black) -> ahora seria una caja CLARA con letras fosfo encima. Se fija oscuro, como siempre fue. */ html[data-theme="dark"] .mc-stats-volcado{ background:var(--mc-bg); border:1px solid var(--mc-line); } /* ====================================================================== 9. PAGINAS SUELTAS - login/registro, vincular, cookies, sanciones ====================================================================== */ /* Login y registro: el cuerpo es un pozo (ver arriba); el boton de registrarse es fosfo con color:var(--mc-black) !important -> tinta; los avisos de error eran rosa pastel con texto granate. */ html[data-theme="dark"] .mc-login-cuerpo, html[data-theme="dark"] .mc-vinc-cuerpo{ background:var(--mc-hueco); } html[data-theme="dark"] .mc-login-registro, html[data-theme="dark"] .mc-login-registro:hover{ color:var(--mc-tinta) !important; } html[data-theme="dark"] .mc-login-error, html[data-theme="dark"] .mc-vinc-error{ background:#2b1614; border-color:#6b2a26; color:#ff9b91; } html[data-theme="dark"] .mc-vinc-ok{ border-color:rgba(63,191,90,.45); } html[data-theme="dark"] .mc-vinc-aviso{ background:#2a2210; border-color:#4a3a12; color:#f0c674; } html[data-theme="dark"] .mc-reg-nota-arriba{ border-color:rgba(63,191,90,.38); } /* El numero de paso de /vincular es un circulo fosfo con color:var(--mc-black). */ html[data-theme="dark"] .mc-vinc-num{ color:var(--mc-tinta); } /* Aviso de cookies. custom.css lo pinta con background:var(--mc-black) !important y texto #fff !important: con el token invertido seria una tarjeta clara con texto blanco (invisible). Se fija en superficie elevada con !important, que es lo que usa custom.css (y la libreria escribe sus colores en el atributo style). El boton de aceptar es fosfo: tinta. */ html[data-theme="dark"] .cc-window.cc-floating{ background:var(--mc-off) !important; border-color:rgba(0,255,52,.38) !important; } html[data-theme="dark"] .cc-window .cc-message{ color:var(--mc-black) !important; } html[data-theme="dark"] .cc-window .cc-allow, html[data-theme="dark"] .cc-window .cc-btn.cc-allow{ color:var(--mc-tinta) !important; } /* Sanciones. El titulo lleva color:darkgreen EN LINEA en la plantilla (1.9:1 sobre oscuro) y el JS del modulo inyecta cada dato con style="color: black !important" (texto negro sobre negro: invisible). Un estilo en linea, y mas con !important, no se puede pisar desde una hoja... con la propiedad color. Pero el color que se PINTA es -webkit-text-fill-color, otra propiedad distinta que el inline no toca y que todos los navegadores actuales respetan (Firefox desde el 49). Se fija esa y el texto vuelve a verse sin tocar el JS ni la plantilla. */ html[data-theme="dark"] h2.ui.segment.huge.text{ -webkit-text-fill-color:var(--mc-green-d); } html[data-theme="dark"] #sancionCurrent .ui.list .item, html[data-theme="dark"] #historyAppendSancion .ui.list .item, html[data-theme="dark"] #sancionCurrent .ui.basic.segment .item, html[data-theme="dark"] #historyAppendSancion .ui.basic.segment .item{ -webkit-text-fill-color:var(--mc-black); } /* ====================================================================== 13. ELEVACION - las tarjetas que en claro solo se despegan con SOMBRA ====================================================================== En claro, estos paneles flotan sobre el fondo hueso con una sombra negra suave y sin borde: basta y sobra. En oscuro esa sombra cae sobre un fondo casi negro, asi que NO SE VE, y la unica diferencia que queda entre la tarjeta (#161c18) y el fondo (#0f1411) son tres puntos de luminosidad. El resultado es lo que se vio en la portada: las noticias y el fondo se leian como una sola plancha negra. Se arregla como se marca la elevacion en las interfaces oscuras, que no es con sombras sino con LUZ: la superficie sube un escalon y se le dibuja un borde. La sombra se deja porque sigue aportando un poco de profundidad por debajo, pero ya no es lo unico que separa. Va al final del fichero a proposito: pisa a las secciones de arriba sin tener que repetir sus selectores. */ html[data-theme="dark"] .mc-post, html[data-theme="dark"] .mc-staff-group, html[data-theme="dark"] .mc-lb-panel, html[data-theme="dark"] .mc-stats-panel, html[data-theme="dark"] .mc-modalidad, html[data-theme="dark"] .mc-vinc, html[data-theme="dark"] .mc-login{ background-color:#1a221d; border:1px solid var(--mc-line); } /* La textura diagonal de noticias y staff se calculo sobre la superficie vieja; sobre la nueva, al 3.5% las rayas se notaban como ruido. Al 2.2% hacen lo que tienen que hacer: que el panel no sea un plano muerto. */ html[data-theme="dark"] .mc-post, html[data-theme="dark"] .mc-staff-group{ background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.022) 0px, rgba(255,255,255,.022) 1px, transparent 1px, transparent 4px), radial-gradient(ellipse 420px 220px at 100% 0%, rgba(0,255,52,.06), transparent 70%); } /* Al pasar el raton, la tarjeta sube otro escalon de luz ademas del desplazamiento: en claro ese trabajo lo hacia el salto de sombra. */ html[data-theme="dark"] .mc-post:hover, html[data-theme="dark"] .mc-mode-card:hover{ background-color:#1e2721; border-color:var(--mc-line-strong); } /* .mc-mode-card ya traia borde propio en claro, pero con --mc-line queda casi invisible sobre el fondo; se le sube al borde fuerte para que las cuatro modalidades se lean como tarjetas y no como texto suelto. */ html[data-theme="dark"] .mc-mode-card{ background-color:#1a221d; border-color:var(--mc-line-strong); }