Helgen-Services/hbox-docs
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
a91580e1af
hbox-docs/docs/stylesheets/helgen.css

214 lines
8.0 KiB
CSS
Raw Blame History

/* ==========================================================================
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;
/* 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-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;
}
Reference in New Issue View Git Blame Copy Permalink