/* ========================================================================== RemoSync Theme: Hacker Dark ========================================================================== Caracter: inmersion terminal. El aula es un centro de operaciones y el fosforo verde sobre negro da la sensacion de estar DENTRO del sistema. Las scan lines y el glow son el ruido de un tubo de rayos catodicos: se quedan en el fondo, nunca por delante del texto. Fuente: JetBrains Mono Emocion: energia, inmersion tecnica, exclusividad Contexto: bootcamps de programacion, ciberseguridad ========================================================================== LA REGLA DE ESTE TEMA: UN SOLO FOSFORO, VARIAS INTENSIDADES Todo el verde de aqui es el MISMO tono —135 grados, el del `#00ff41`— a distinta intensidad. Un tubo de fosforo no tiene dos verdes: tiene un verde y un haz que le pega mas fuerte o mas flojo. De ahi sale la escala: 100 % #00ff41 texto principal, acento, exito, borde fuerte 80 % #00cc33 texto secundario, flecha del select 53 % #22873a borde del campo (contorno de control, 1.4.11) 48 % #007a1f texto atenuado — el «half-bright» del terminal Y el hover no sube de tono: FLOREA. `#33ff66` es el mismo 135 grados con la saturacion bajada al 80 %, que es lo que hace un pixel sobredirigido en un CRT — se va hacia el blanco por su propio tono, no hacia el pastel. Por eso `#63ff90`, que se habia colado, apagaba el golpe: se iba a 137 grados y al 61 % de saturacion, y eso ya no es fosforo, es menta. Los fondos van al reves: casi negro absoluto, y el croma SUBE con el nivel (2 -> 3 -> 5 -> 6 -> 9 -> 12 sobre 255). La escalera de superficies existe y apenas se insinua; lo que separa una tarjeta del fondo es su linea de un pixel, no su relleno. ========================================================================== EXCEPCION D-3 — POR QUE `hacker-dark` NO CUMPLE 4,5:1 EN UN TOKEN El texto atenuado de este tema es `#007a1f` y su ratio es 3,22:1 contra la superficie mas clara. No es un descuido ni un valor por afinar: ese color NO PUEDE llegar a 4,5:1 con ningun fondo. Sobre negro absoluto da 3,80:1, y ese es su techo aritmetico. Para cumplir AA habria que aclararlo, y aclararlo es exactamente lo que convierte este tema en «una interfaz oscura con acentos verdes». La decision de producto (D-3) es que en ESTE tema, y solo en este, la fuerza estetica manda sobre el ratio de ese token. `ContrasteTest` sigue CALCULANDO y REPORTANDO el ratio; lo que hace es no fallar por el, con la excepcion nombrada y su motivo escritos en el propio test. Los otros nueve temas siguen exigiendo 4,5:1 y 3:1 sin excepcion. Lo que la excepcion NO cubre: todo lo demas de este tema cumple, y con mas margen que antes, porque los fondos han vuelto a ser negros. ========================================================================== Contraste WCAG 2.1 — CALCULADO, no estimado. Cada ratio es el PEOR de los cuatro fondos del tema (bg-primary, surface-1, surface-2, bg-secondary), con las capas translucidas ya compuestas. Se mide contra el peor y no contra bg-primary porque el uso mas frecuente del texto atenuado son placeholders y textos de ayuda, que viven sobre surface-1, no sobre el fondo de la pagina. `tests/http/ContrasteTest.php` REHACE esta cuenta sobre estos mismos tokens en cada ejecucion, y quien ESCRIBE estas lineas es `docs/reparacion/referencia/temas/cabeceras.php`: ninguna cifra de aqui se teclea a mano. Antes decian «cumple AA» sobre ratios de 2,8:1 y nadie lo comprobaba. Si cambias un token, vuelve a ejecutarlo. --rs-text-primary #00ff41 13.02:1 AA texto normal --rs-text-secondary #00cc33 8.20:1 AA texto normal --rs-text-muted #007a1f 3.22:1 AA solo texto grande (>= 18,66px) --rs-accent-primary #00ff41 13.02:1 AA texto normal --rs-accent-hover #33ff66 13.24:1 AA texto normal --rs-success #00ff41 13.02:1 AA texto normal --rs-warning #ffb800 10.25:1 AA texto normal --rs-error #ff2d2d 4.80:1 AA texto normal --rs-info #00e5ff 11.56:1 AA texto normal --rs-border-field #22873a 3.89:1 AA componente (1.4.11) --rs-select-arrow-color #00cc33 8.20:1 AA componente (1.4.11) ========================================================================== */ :root[data-rs-theme="hacker"][data-rs-mode="dark"] { /* --- Fondos: la profundidad del negro es el tema --- */ --rs-bg-primary: #050805; --rs-bg-secondary: #080d09; --rs-bg-tertiary: #020402; /* --- Superficies: la escalera existe y apenas se insinua. Sube en croma, no en gris: el fosforo se acumula al elevarse. --- */ --rs-surface-1: #0c120d; --rs-surface-2: #111a13; --rs-surface-3: #17231a; /* --- Texto: un fosforo, cuatro intensidades --- */ --rs-text-primary: #00ff41; --rs-text-secondary: #00cc33; --rs-text-muted: #007a1f; --rs-text-inverse: #030603; /* --- Acento: el hover florea, no se apastela --- */ --rs-accent-primary: #00ff41; --rs-accent-hover: #33ff66; --rs-accent-active: #00c633; --rs-accent-muted: rgba(0, 255, 65, 0.12); /* --- Acento secundario: cyan neon --- */ --rs-accent-secondary: #00e5ff; --rs-accent-secondary-hover: #33ecff; /* --- Bordes: linea de un pixel, no caja --- */ --rs-border-default: #1a3320; --rs-border-subtle: #101f14; --rs-border-strong: #00ff41; --rs-border-accent: #00e5ff; --rs-border-field: #22873a; --rs-select-arrow-color: #00cc33; /* --- Radios: un terminal no tiene esquinas de 12 px. `--rs-radius-full` NO se toca: gobierna conmutadores y avatares. --- */ --rs-radius-sm: 2px; --rs-radius-md: 3px; --rs-radius-lg: 4px; --rs-radius-xl: 5px; --rs-radius-2xl: 6px; /* --- Sombras y glow: el fosforo sangra un poco bajo cada panel --- */ --rs-shadow-sm: 0 1px 3px rgba(0, 255, 65, 0.08); --rs-shadow-md: 0 4px 14px rgba(0, 255, 65, 0.13); --rs-shadow-lg: 0 10px 30px rgba(0, 255, 65, 0.17); --rs-glow-color: #00ff41; --rs-glow-secondary: #00e5ff; --rs-glow-text: 0 0 8px rgba(0, 255, 65, 0.5); --rs-glow-box: 0 0 12px rgba(0, 255, 65, 0.3); /* --- Superposicion --- */ --rs-overlay-bg: rgba(5, 8, 5, 0.94); /* --- Scan line --- */ --rs-scanline-color: rgba(0, 255, 65, 0.055); --rs-scanline-speed: 8s; /* --- Estados semanticos --- */ /* Color de TEXTO en avisos y distintivos: umbral 4,5:1, no 3:1. */ --rs-success: #00ff41; --rs-warning: #ffb800; --rs-error: #ff2d2d; --rs-info: #00e5ff; /* --- Tipografia --- */ --rs-font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; --rs-font-family-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; --rs-font-family-display: var(--rs-font-family); } /* --- Tipografia --- El glow vive en los titulos, que son grandes y sobran de contraste. En el cuerpo NO hay resplandor: un `text-shadow` sobre 14 px de monoespaciada emborrona los trazos finos y se lee peor, no mejor. */ :root[data-rs-theme="hacker"][data-rs-mode="dark"] h1 { font-size: 2.5rem; text-transform: uppercase; letter-spacing: 0.05em; text-shadow: var(--rs-glow-text); } :root[data-rs-theme="hacker"][data-rs-mode="dark"] h2, :root[data-rs-theme="hacker"][data-rs-mode="dark"] h3 { letter-spacing: 0.02em; text-shadow: 0 0 6px rgba(0, 255, 65, 0.3); } /* La monoespaciada de las etiquetas quiere aire: son celdas, no palabras. */ :root[data-rs-theme="hacker"][data-rs-mode="dark"] th, :root[data-rs-theme="hacker"][data-rs-mode="dark"] .rs-badge, :root[data-rs-theme="hacker"][data-rs-mode="dark"] label { letter-spacing: 0.06em; } /* Seleccion en video inverso: el gesto de un terminal de verdad. */ :root[data-rs-theme="hacker"][data-rs-mode="dark"] ::selection { background: var(--rs-accent-primary); color: var(--rs-text-inverse); text-shadow: none; } /* El cursor es del fosforo, no del sistema. */ :root[data-rs-theme="hacker"][data-rs-mode="dark"] input, :root[data-rs-theme="hacker"][data-rs-mode="dark"] textarea, :root[data-rs-theme="hacker"][data-rs-mode="dark"] select { caret-color: var(--rs-accent-primary); } /* La barra de desplazamiento tambien es parte del tubo. */ :root[data-rs-theme="hacker"][data-rs-mode="dark"] * { scrollbar-color: #1d5a2c var(--rs-bg-tertiary); scrollbar-width: thin; } :root[data-rs-theme="hacker"][data-rs-mode="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; } :root[data-rs-theme="hacker"][data-rs-mode="dark"] ::-webkit-scrollbar-track { background: var(--rs-bg-tertiary); } :root[data-rs-theme="hacker"][data-rs-mode="dark"] ::-webkit-scrollbar-thumb { background: #1d5a2c; border: 2px solid var(--rs-bg-tertiary); border-radius: 0; } :root[data-rs-theme="hacker"][data-rs-mode="dark"] ::-webkit-scrollbar-thumb:hover { background: #2c8f43; } /* --- El tubo: scan lines y floracion, SIEMPRE detras del contenido --- `--rs-z-three` vale -1 y `--rs-z-content` vale 10 (base.css 158-160). Estas capas viven por debajo de cero: son el ruido del tubo, no una lamina sobre la pagina. Y no llevan `mix-blend-mode`. Un modo de fusion aditivo aqui pintaria luz POR ENCIMA del texto y lo emborronaria: es el defecto que se retiro de `3d-dark` y no vuelve por esta puerta. Todo lo de aqui es fondo. */ :root[data-rs-theme="hacker"][data-rs-mode="dark"] .rs-scanline-overlay { position: fixed; inset: 0; pointer-events: none; z-index: var(--rs-z-three); background: /* La floracion del haz en el centro del tubo: el cristal nunca esta iluminado por igual de borde a borde. */ radial-gradient( 120% 85% at 50% 32%, rgba(0, 255, 65, 0.036) 0%, rgba(0, 255, 65, 0.010) 45%, transparent 78% ), /* Y el vinetado de las esquinas, que es lo que da curvatura al vidrio. */ radial-gradient( 135% 110% at 50% 50%, transparent 50%, rgba(0, 0, 0, 0.45) 100% ), /* Las lineas de barrido, al final: la trama mas fina del tubo. */ repeating-linear-gradient( 0deg, transparent, transparent 2px, var(--rs-scanline-color) 2px, var(--rs-scanline-color) 4px ); } /* El retorno vertical del haz: una banda ancha y blanda, no una regla de 4 px. Un CRT no dibuja una linea al volver arriba, aclara una franja. */ :root[data-rs-theme="hacker"][data-rs-mode="dark"] .rs-scanline-beam { position: fixed; left: 0; right: 0; height: 180px; background: linear-gradient( 180deg, transparent, rgba(0, 255, 65, 0.035) 45%, rgba(0, 255, 65, 0.06) 62%, rgba(0, 255, 65, 0.02) 76%, transparent ); animation: rs-scanline var(--rs-scanline-speed) linear infinite; pointer-events: none; z-index: var(--rs-z-three); } /* --- Superficies: la separacion la hace la linea, no el relleno --- */ :root[data-rs-theme="hacker"][data-rs-mode="dark"] .rs-card { border-color: var(--rs-border-default); } /* Al pasar por encima, la tarjeta no se mueve ni crece: se ENCIENDE. */ :root[data-rs-theme="hacker"][data-rs-mode="dark"] .rs-card:hover { border-color: rgba(0, 255, 65, 0.34); box-shadow: var(--rs-shadow-md), 0 0 10px rgba(0, 255, 65, 0.08); } /* --- Glow en lo interactivo --- */ :root[data-rs-theme="hacker"][data-rs-mode="dark"] .rs-btn--primary { box-shadow: var(--rs-glow-box); } :root[data-rs-theme="hacker"][data-rs-mode="dark"] .rs-btn--primary:hover { box-shadow: 0 0 18px rgba(0, 255, 65, 0.45); } :root[data-rs-theme="hacker"][data-rs-mode="dark"] .rs-btn--primary:active { box-shadow: 0 0 6px rgba(0, 255, 65, 0.5); } /* El boton secundario y el fantasma son contorno: al pasar por encima sube la linea y aparece un halo corto, y nada mas. */ :root[data-rs-theme="hacker"][data-rs-mode="dark"] .rs-btn--secondary:hover, :root[data-rs-theme="hacker"][data-rs-mode="dark"] .rs-btn--ghost:hover { box-shadow: 0 0 10px rgba(0, 255, 65, 0.16); } :root[data-rs-theme="hacker"][data-rs-mode="dark"] .rs-btn, :root[data-rs-theme="hacker"][data-rs-mode="dark"] .rs-sidebar-link, :root[data-rs-theme="hacker"][data-rs-mode="dark"] .rs-sidebar-utility, :root[data-rs-theme="hacker"][data-rs-mode="dark"] .rs-dashboard-tool, :root[data-rs-theme="hacker"][data-rs-mode="dark"] .rs-bottom-nav__item { -webkit-text-fill-color: currentColor; } :root[data-rs-theme="hacker"][data-rs-mode="dark"] .rs-btn--primary, :root[data-rs-theme="hacker"][data-rs-mode="dark"] .rs-btn--primary:hover, :root[data-rs-theme="hacker"][data-rs-mode="dark"] .rs-btn--primary:focus-visible { color: var(--rs-text-inverse); -webkit-text-fill-color: currentColor; } :root[data-rs-theme="hacker"][data-rs-mode="dark"] .rs-btn--secondary, :root[data-rs-theme="hacker"][data-rs-mode="dark"] .rs-btn--secondary:hover, :root[data-rs-theme="hacker"][data-rs-mode="dark"] .rs-btn--secondary:focus-visible, :root[data-rs-theme="hacker"][data-rs-mode="dark"] .rs-btn--ghost, :root[data-rs-theme="hacker"][data-rs-mode="dark"] .rs-btn--ghost:hover, :root[data-rs-theme="hacker"][data-rs-mode="dark"] .rs-btn--ghost:focus-visible, :root[data-rs-theme="hacker"][data-rs-mode="dark"] .rs-sidebar-link:hover, :root[data-rs-theme="hacker"][data-rs-mode="dark"] .rs-sidebar-utility:hover, :root[data-rs-theme="hacker"][data-rs-mode="dark"] .rs-dashboard-tool:hover, :root[data-rs-theme="hacker"][data-rs-mode="dark"] .rs-bottom-nav__item:hover { color: var(--rs-text-primary); -webkit-text-fill-color: currentColor; } /* El enlace del cuerpo: subrayado a distancia de terminal, y al pasar por encima sube de intensidad. Sin glow: es texto pequeno. */ :root[data-rs-theme="hacker"][data-rs-mode="dark"] .rs-content a:not(.rs-btn) { text-underline-offset: 0.25em; text-decoration-thickness: 1px; } /* El foco es luz, no bulto: el borde sube al fosforo entero y el anillo aprieta contra el campo. La forma del control no cambia. */ :root[data-rs-theme="hacker"][data-rs-mode="dark"] input:focus, :root[data-rs-theme="hacker"][data-rs-mode="dark"] select:focus, :root[data-rs-theme="hacker"][data-rs-mode="dark"] textarea:focus { border-color: var(--rs-accent-primary); box-shadow: 0 0 0 2px rgba(0, 255, 65, 0.28), 0 0 14px rgba(0, 255, 65, 0.16); } :root[data-rs-theme="hacker"][data-rs-mode="dark"] input::placeholder, :root[data-rs-theme="hacker"][data-rs-mode="dark"] textarea::placeholder { color: var(--rs-text-muted); opacity: 1; } /* Deshabilitado: la terminal no acepta esta entrada. */ :root[data-rs-theme="hacker"][data-rs-mode="dark"] input:disabled, :root[data-rs-theme="hacker"][data-rs-mode="dark"] select:disabled, :root[data-rs-theme="hacker"][data-rs-mode="dark"] textarea:disabled { background: var(--rs-bg-tertiary); border-color: #1d4426; color: #006a1b; cursor: not-allowed; } /* --- Tabla: rejilla de terminal. La fila se ilumina, no se desplaza. --- */ :root[data-rs-theme="hacker"][data-rs-mode="dark"] .rs-table tbody tr:hover { background: rgba(0, 255, 65, 0.05); } /* --- Superposicion --- */ :root[data-rs-theme="hacker"][data-rs-mode="dark"] .rs-overlay { border-top-color: var(--rs-border-default); } :root[data-rs-theme="hacker"][data-rs-mode="dark"] .rs-overlay-btn:hover { box-shadow: 0 0 8px rgba(0, 255, 65, 0.2); } :root[data-rs-theme="hacker"][data-rs-mode="dark"] .rs-overlay-btn--active { box-shadow: 0 0 12px rgba(0, 255, 65, 0.3); } /* --- Codigo: el cyan es la segunda tinta del tubo --- */ :root[data-rs-theme="hacker"][data-rs-mode="dark"] code { color: #00e5ff; } /* --- Adaptativo: sin barrido en tablet, sin efectos en movil --- */ @media (max-width: 1279px) { :root[data-rs-theme="hacker"][data-rs-mode="dark"] .rs-scanline-beam { animation: none; display: none; } } @media (max-width: 767px) { :root[data-rs-theme="hacker"][data-rs-mode="dark"] .rs-scanline-overlay, :root[data-rs-theme="hacker"][data-rs-mode="dark"] .rs-scanline-beam { display: none; } :root[data-rs-theme="hacker"][data-rs-mode="dark"] h1, :root[data-rs-theme="hacker"][data-rs-mode="dark"] h2, :root[data-rs-theme="hacker"][data-rs-mode="dark"] h3 { text-shadow: none; } :root[data-rs-theme="hacker"][data-rs-mode="dark"] h1 { font-size: 1.625rem; } }