Diferencia entre revisiones de «MediaWiki:Common.css»

/*
 * ===================================================================
 * INICIANDO PROTOCOLO DE ESTILO: CÓDIGO LYOKO
 * INTERFAZ DEL SUPERORDENADOR - ACCESO AUTORIZADO
 *
 * ...
 * ;::::;
 * ;::::; :;
 * ;:::::'   :;
 * ;:::::;     ;.
 * ,:::::'       ;           OOO
 * ::::::;       ;          OOOOO
 * ;:::::;       ;         OOOOOOOO
 * ,;::::::;     ;'         / OOOOOOO
 * ;:::::::::`. ,,,;.        /  / DOOOOOO
 * ,::::::::::::;,,,,,,.      /  /     DOOOO
 * ::::::::::::::;,,,,,,,.   /  /        DOOO
 * ;:::::::::::::;,,,,,,,,. /  /          DO O
 * ;:::::::::::::;,,,,,,,,, /  /           D O
 * ::::::::::::::;,,,,,,,,,/  /            D
 * `:::::::::::::;,,,,,,,'  /
 * `::::::::::;,,,,,,,'  /
 * `::::::::;,,,,,'  /
 * `:::::;,,,'  /
 * `::;,'  /
 *
 * ===================================================================
 */

/* Fuentes digitales para la inmersión total */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=VT323&display=swap');

/* --- Variables Globales del Sistema --- */
:root {
    --color-cyan-interfaz: #00ffff;
    --color-verde-terminal: #39ff14;
    --color-amarillo-aelita: #fefe44;
    --color-fondo-digital: #030814;
    --color-transparencia-bg: rgba(10, 25, 47, 0.85);
    --color-texto-base: #c8d8f0;

    --fuente-terminal: 'Share Tech Mono', monospace;
    --fuente-pixel: 'VT323', monospace;

    --sombra-neon-cyan: 0 0 5px var(--color-cyan-interfaz),
                       0 0 10px var(--color-cyan-interfaz),
                       0 0 20px var(--color-cyan-interfaz),
                       0 0 40px rgba(0, 255, 255, 0.5);
    --sombra-texto-neon-cyan: 0 0 4px var(--color-cyan-interfaz);
    --sombra-texto-neon-verde: 0 0 5px var(--color-verde-terminal);
}

/* --- Definición de Animaciones --- */
@keyframes scanline {
    0% { background-position: 0 0; }
    100% { background-position: 0 100%; }
}

@keyframes glitch {
    0%, 100% { text-shadow: var(--sombra-texto-neon-cyan); clip-path: inset(0 0 0 0); }
    5% { clip-path: inset(0.5em 0 0.2em 0); }
    10% { text-shadow: 2px 0 var(--color-amarillo-aelita), -2px 0 var(--color-verde-terminal); clip-path: inset(0.2em 0 0.8em 0); }
    15% { clip-path: inset(0.9em 0 0.1em 0); }
    20% { text-shadow: var(--sombra-texto-neon-cyan); clip-path: inset(0.1em 0 0.5em 0); }
    /* ... (más pasos para un glitch más complejo) */
}

@keyframes flicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

/* --- Estilo del Cuerpo (El Mar Digital) --- */
html {
    background-color: var(--color-fondo-digital);
}

body {
    background-color: transparent;
    background-image: 
        linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
        linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    background-size: 100% 4px, 6px 100%;
    font-family: var(--fuente-terminal);
    color: var(--color-texto-base);
    animation: scanline 10s linear infinite;
    text-shadow: 0 0 2px rgba(200, 216, 240, 0.5);
}

/* --- Encabezados (Comandos del Sistema) --- */
h1, h2, h3 {
    font-family: var(--fuente-pixel);
    color: var(--color-cyan-interfaz);
    text-shadow: var(--sombra-texto-neon-cyan);
    letter-spacing: 2px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--color-cyan-interfaz);
    padding-bottom: 10px;
}

h1 {
    font-size: 3em;
    animation: glitch 3s infinite;
}

h2::before {
    content: '>$ ';
    color: var(--color-verde-terminal);
    animation: flicker 1.5s infinite;
}

/* --- Enlaces (Hipervínculos Virtuales) --- */
a {
    color: var(--color-amarillo-aelita);
    text-decoration: none;
    font-weight: bold;
    text-shadow: 0 0 4px var(--color-amarillo-aelita);
    transition: all 0.2s ease;
}

a:hover, a:focus {
    color: var(--color-fondo-digital);
    background-color: var(--color-amarillo-aelita);
    box-shadow: 0 0 10px var(--color-amarillo-aelita);
    padding: 2px 4px;
}

/*
 * ===================================================================
 * LA FICHA DE INFO (INFOBOX) - MONITOR CENTRAL DEL SUPERORDENADOR
 * ===================================================================
 */
.infobox {
    float: right;
    clear: right;
    width: 24em;
    margin: 0.5em 0 0.5em 1.5em;
    padding: 0; /* Padding gestionado por elementos internos */
    
    background-color: var(--color-transparencia-bg);
    border: 2px solid var(--color-cyan-interfaz);
    box-shadow: var(--sombra-neon-cyan);
    
    font-size: 95%;
    border-radius: 0; /* Bordes afilados, tecnológicos */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%); /* Esquina cortada */
}

/* Título de la ficha - Nombre del Programa */
.infobox .infobox-title,
.infobox .infobox-above,
.infobox caption {
    font-family: var(--fuente-pixel);
    font-size: 1.5em;
    text-align: center;
    color: var(--color-verde-terminal);
    text-shadow: var(--sombra-texto-neon-verde);
    background-color: rgba(0, 255, 255, 0.1);
    padding: 0.8em 0.5em;
    text-transform: uppercase;
    letter-spacing: 3px;
    border-bottom: 1px solid var(--color-cyan-interfaz);
}

.infobox .infobox-header,
.infobox .infobox-subheader {
    background-color: rgba(0, 255, 255, 0.15);
    color: var(--color-cyan-interfaz);
    text-align: center;
    padding: 0.5em;
}

/* Celdas de datos */
.infobox .infobox-label,
.infobox th,
.infobox .infobox-data,
.infobox td {
    padding: 0.6em 1em;
    border-top: 1px dashed rgba(0, 255, 255, 0.3);
}

.infobox .infobox-label,
.infobox th {
    color: var(--color-cyan-interfaz);
    font-weight: bold;
}

/* --- Tablas (Grids de Datos) --- */
.wikitable {
    background: transparent;
    border: 1px solid var(--color-verde-terminal);
    border-collapse: collapse;
    margin: 1.5em auto;
}

.wikitable th, .wikitable td {
    border: 1px solid var(--color-verde-terminal);
    padding: 0.8em;
    text-align: center;
}

.wikitable th {
    color: var(--color-verde-terminal);
    font-family: var(--fuente-pixel);
    text-shadow: var(--sombra-texto-neon-verde);
}

/* --- Citas (Registros de Sistema / Mensajes de Franz Hopper) --- */
blockquote {
    margin: 1.5em 10px;
    padding: 1em;
    background-color: var(--color-transparencia-bg);
    border-left: 3px solid var(--color-verde-terminal);
    border-right: 3px solid var(--color-verde-terminal);
    color: var(--color-verde-terminal);
    font-family: var(--fuente-terminal);
    font-size: 1.1em;
}

blockquote::before {
    content: 'LOG_ENTRY: ';
    color: var(--color-texto-base);
}

/* --- Barra de Desplazamiento Digital --- */
::-webkit-scrollbar {
    width: 12px;
    background-color: var(--color-fondo-digital);
}

::-webkit-scrollbar-thumb {
    background-color: var(--color-cyan-interfaz);
    box-shadow: var(--sombra-neon-cyan);
}

::-webkit-scrollbar-track {
    border: 1px solid var(--color-cyan-interfaz);
}