223 lines
8.5 KiB
CSS
223 lines
8.5 KiB
CSS
/* ==========================================================================
|
|
Helgen · tokens del sitio drogheda.helgen.online
|
|
Un solo archivo de colores y letras para el sitio (Material), los tableros y
|
|
las actas. Oscuro primero; el modo claro usa los mismos nombres.
|
|
|
|
- Dentro del sitio (Material) el modo lo decide <body data-md-color-scheme>:
|
|
"slate" = oscuro (por omisión), "default" = claro.
|
|
- Las páginas sueltas (actas, cuenta) usan <html data-tema="claro"> cuando la
|
|
persona eligió claro en el sitio (lo pone js/tema.js).
|
|
|
|
Reglas de la casa: sin emoji, sin MAYÚSCULAS de adorno, sin tarjetas con
|
|
borde de color a la izquierda. El cian solo marca lo que está vivo
|
|
(activo, en curso, foco). Íconos de línea de 1.8 px con puntas redondas.
|
|
========================================================================== */
|
|
|
|
/* ---- Letras (latin, ≈ 76 KB en total; licencia OFL en docs/fonts/) ------ */
|
|
@font-face {
|
|
font-family: "League Spartan";
|
|
font-style: normal;
|
|
font-weight: 100 900;
|
|
font-display: swap;
|
|
src: url("../fonts/league-spartan-latin.woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "Atkinson Hyperlegible Next";
|
|
font-style: normal;
|
|
font-weight: 200 800;
|
|
font-display: swap;
|
|
src: url("../fonts/atkinson-hyperlegible-next-latin.woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "Atkinson Hyperlegible Mono";
|
|
font-style: normal;
|
|
font-weight: 200 800;
|
|
font-display: swap;
|
|
src: url("../fonts/atkinson-hyperlegible-mono-latin.woff2") format("woff2");
|
|
}
|
|
|
|
/* ---- Oscuro (por omisión) ------------------------------------------------ */
|
|
:root,
|
|
[data-md-color-scheme="slate"] {
|
|
--hg-fuente-titulo: "League Spartan", "Futura", "Avenir Next", system-ui, sans-serif;
|
|
--hg-fuente: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
|
--hg-fuente-mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
|
|
|
|
/* superficies */
|
|
--hg-fondo: #0E1524; /* Noche: fondo de página */
|
|
--hg-barra: #0B111D; /* Barra: barra lateral y encabezado */
|
|
--hg-plano: #141D30; /* Plano: tarjetas y campos */
|
|
--hg-plano-2: #111A2C; /* paneles y celdas */
|
|
--hg-elevado: #1A2540; /* selección y menú activo */
|
|
--hg-linea: #233049; /* bordes */
|
|
--hg-linea-2: #2E3D5C; /* bordes de controles */
|
|
--hg-linea-suave: #1A2438; /* divisiones discretas */
|
|
--hg-indigo: #2C3C5B; /* índigo Helgen */
|
|
--hg-cabecera: #0B111D; /* encabezado del sitio */
|
|
--hg-sobre-cabecera: #E7ECF5;
|
|
|
|
/* texto */
|
|
--hg-texto: #E7ECF5; /* Niebla */
|
|
--hg-texto-fuerte: #F2F5FA;
|
|
--hg-texto-suave: #C3CCDD;
|
|
--hg-texto-2: #A9B4CB; /* Secundario */
|
|
--hg-texto-3: #8C99B5; /* Terciario: etiquetas y conteos */
|
|
|
|
/* acento: solo lo vivo */
|
|
--hg-acento: #51F3DA; /* Cian */
|
|
--hg-sobre-acento: #0B111D;
|
|
--hg-acento-suave: rgba(81, 243, 218, 0.14);
|
|
--hg-foco: #51F3DA;
|
|
--hg-liga: #7FE9D8;
|
|
--hg-liga-hover: #51F3DA;
|
|
--hg-teal: #17A08C;
|
|
|
|
/* estados */
|
|
--hg-curso: #51F3DA; --hg-curso-bg: #133A40;
|
|
--hg-hecho: #4FD8BE; --hg-hecho-bg: #123A36; --hg-hecho-icono: #2FBF9F;
|
|
--hg-bloqueado: #FF9494; --hg-bloqueado-bg: #3A1F27;
|
|
--hg-aviso: #F2C46B; --hg-aviso-bg: #3A3020;
|
|
--hg-info: #9DB8FF; --hg-info-bg: #1B2847;
|
|
--hg-pend: #8C99B5; --hg-pend-bg: #1F2A42;
|
|
--hg-halo-curso: rgba(81, 243, 218, 0.22);
|
|
--hg-halo-bloqueado: rgba(255, 148, 148, 0.22);
|
|
|
|
/* ruta a producción: lo hecho va en blanco (21-oct: «la tarjeta en blanco, no en verde») */
|
|
--hg-ruta: #F2F5FA;
|
|
--hg-ruta-linea: rgba(242, 245, 250, 0.82);
|
|
|
|
/* pistas del tablero */
|
|
--hg-p-ingenieria: #8FB0FF;
|
|
--hg-p-produccion: #63D6A8;
|
|
--hg-p-mecanica: #E9B865;
|
|
--hg-p-compras: #C6A8FF;
|
|
--hg-p-campo: #FF9E70;
|
|
--hg-p-gestion: #F08BC6;
|
|
/* semáforo del proyecto y de cada sitio (22-oct) */
|
|
--hg-rojo: #FF5F5F; --hg-rojo-bg: #3D171D; --hg-rojo-linea: #8F2F38;
|
|
--hg-ambar: #F5C35C; --hg-ambar-bg: #3A2F1A;
|
|
--hg-verde: #45D6A0; --hg-verde-bg: #11372C;
|
|
|
|
/* versiones de tarjeta: etiqueta de serigrafía (texto y borde) */
|
|
--hg-v55: #4FD8BE; --hg-v55-borde: rgba(79, 216, 190, 0.42);
|
|
--hg-v56: #A9C1FF; --hg-v56-borde: rgba(169, 193, 255, 0.42);
|
|
--hg-v57: #8BE3A7; --hg-v57-borde: rgba(139, 227, 167, 0.42);
|
|
--hg-v6: #F2C46B; --hg-v6-borde: rgba(242, 196, 107, 0.42);
|
|
--hg-v4: #B9C3D8; --hg-v4-borde: rgba(185, 195, 216, 0.38);
|
|
--hg-v3: #9AA3B5; --hg-v3-borde: rgba(154, 163, 181, 0.36);
|
|
--hg-fw: #7FE9D8; --hg-fw-borde: rgba(127, 233, 216, 0.38);
|
|
|
|
/* forma */
|
|
--hg-radio: 10px;
|
|
--hg-radio-campo: 9px;
|
|
--hg-radio-chico: 7px;
|
|
--hg-sombra: 0 18px 48px rgba(3, 7, 15, 0.55);
|
|
--hg-sombra-suave: 0 1px 2px rgba(3, 7, 15, 0.35);
|
|
}
|
|
|
|
/* ---- Claro: mismos nombres ----------------------------------------------- */
|
|
[data-md-color-scheme="default"],
|
|
html[data-tema="claro"],
|
|
:where(html:has(> body[data-md-color-scheme="default"])) {
|
|
--hg-fondo: #EFF1F5; /* Mist */
|
|
--hg-barra: #F7F8FB;
|
|
--hg-plano: #FFFFFF;
|
|
--hg-plano-2: #F6F7FA;
|
|
--hg-elevado: #E2E8F3;
|
|
--hg-linea: #D5DAE5;
|
|
--hg-linea-2: #C2CADA;
|
|
--hg-linea-suave: #E1E5EE;
|
|
--hg-indigo: #2C3C5B;
|
|
--hg-cabecera: #2C3C5B; /* el encabezado conserva el índigo de la marca */
|
|
--hg-sobre-cabecera: #FFFFFF;
|
|
|
|
--hg-texto: #1F2A40;
|
|
--hg-texto-fuerte: #141C2E;
|
|
--hg-texto-suave: #34415C;
|
|
--hg-texto-2: #4A5875;
|
|
--hg-texto-3: #65728D;
|
|
|
|
--hg-acento: #14685C; /* sobre claro, el cian no se lee: teal oscuro */
|
|
--hg-sobre-acento: #FFFFFF;
|
|
--hg-acento-suave: rgba(20, 104, 92, 0.10);
|
|
--hg-foco: #17A08C;
|
|
--hg-liga: #14685C;
|
|
--hg-liga-hover: #0E4F46;
|
|
--hg-teal: #17A08C;
|
|
|
|
--hg-curso: #0E6E62; --hg-curso-bg: #DDF5F1;
|
|
--hg-hecho: #13806F; --hg-hecho-bg: #E2F5F1; --hg-hecho-icono: #17A08C;
|
|
--hg-bloqueado: #B42318; --hg-bloqueado-bg: #FDECEC;
|
|
--hg-aviso: #8A5A00; --hg-aviso-bg: #FFF3D6;
|
|
--hg-info: #2F55B5; --hg-info-bg: #E6EDFC;
|
|
--hg-pend: #65728D; --hg-pend-bg: #E8ECF3;
|
|
--hg-halo-curso: rgba(20, 104, 92, 0.18);
|
|
--hg-halo-bloqueado: rgba(180, 35, 24, 0.16);
|
|
|
|
--hg-ruta: #1F2A40;
|
|
--hg-ruta-linea: rgba(31, 42, 64, 0.78);
|
|
|
|
--hg-p-ingenieria: #3D63C9;
|
|
--hg-p-produccion: #1E8A5E;
|
|
--hg-p-mecanica: #A26B0A;
|
|
--hg-p-compras: #7A4FD0;
|
|
--hg-p-campo: #C2531F;
|
|
--hg-p-gestion: #B0336F;
|
|
--hg-rojo: #C01A1A; --hg-rojo-bg: #FDE7E7; --hg-rojo-linea: #E9A3A3;
|
|
--hg-ambar: #A15F00; --hg-ambar-bg: #FFF0CF;
|
|
--hg-verde: #12805A; --hg-verde-bg: #E0F4EC;
|
|
|
|
--hg-v55: #13806F; --hg-v55-borde: rgba(19, 128, 111, 0.45);
|
|
--hg-v56: #3552A8; --hg-v56-borde: rgba(53, 82, 168, 0.45);
|
|
--hg-v57: #2E7D46; --hg-v57-borde: rgba(46, 125, 70, 0.45);
|
|
--hg-v6: #8F6208; --hg-v6-borde: rgba(143, 98, 8, 0.45);
|
|
--hg-v4: #4F5B75; --hg-v4-borde: rgba(79, 91, 117, 0.40);
|
|
--hg-v3: #646B7A; --hg-v3-borde: rgba(100, 107, 122, 0.38);
|
|
--hg-fw: #14685C; --hg-fw-borde: rgba(20, 104, 92, 0.40);
|
|
|
|
--hg-sombra: 0 18px 48px rgba(31, 42, 64, 0.22);
|
|
--hg-sombra-suave: 0 1px 2px rgba(31, 42, 64, 0.08);
|
|
}
|
|
|
|
/* Barras de desplazamiento y controles nativos del mismo modo */
|
|
html { color-scheme: dark; }
|
|
html[data-tema="claro"],
|
|
:where(html:has(> body[data-md-color-scheme="default"])) { color-scheme: light; }
|
|
[data-md-color-scheme="slate"] { color-scheme: dark; }
|
|
[data-md-color-scheme="default"] { color-scheme: light; }
|
|
|
|
/* ---- Etiquetas de versión de tarjeta (sirven en todo el sitio) ----------- */
|
|
.badge-v3, .badge-v4, .badge-v55, .badge-v56, .badge-v57, .badge-v6, .badge-fw {
|
|
display: inline-block;
|
|
font-family: var(--hg-fuente-mono);
|
|
font-size: 0.78em;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
padding: 0.28em 0.5em;
|
|
border-radius: 4px;
|
|
border: 1px solid currentColor;
|
|
background: transparent;
|
|
white-space: nowrap;
|
|
vertical-align: 0.08em;
|
|
letter-spacing: 0;
|
|
}
|
|
.badge-v55 { color: var(--hg-v55); border-color: var(--hg-v55-borde); }
|
|
.badge-v56 { color: var(--hg-v56); border-color: var(--hg-v56-borde); }
|
|
.badge-v57 { color: var(--hg-v57); border-color: var(--hg-v57-borde); }
|
|
.badge-v6 { color: var(--hg-v6); border-color: var(--hg-v6-borde); }
|
|
.badge-v4 { color: var(--hg-v4); border-color: var(--hg-v4-borde); }
|
|
.badge-v3 { color: var(--hg-v3); border-color: var(--hg-v3-borde); }
|
|
.badge-fw { color: var(--hg-fw); border-color: var(--hg-fw-borde); font-family: var(--hg-fuente); font-weight: 600; }
|
|
|
|
/* Íconos de línea (los SVG del sitio llevan esta clase) */
|
|
.hg-i {
|
|
width: 18px;
|
|
height: 18px;
|
|
flex: none;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 1.8;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|