166 lines
7.3 KiB
CSS
166 lines
7.3 KiB
CSS
/* ==========================================================================
|
|
HBOX — Documentación técnica · hoja de estilo Helgen
|
|
Colores tomados de _brand/estilo-helgen.tex (\definecolor):
|
|
HelgenIndigo #2C3C5B · HelgenCyan #51F3DA · HelgenTeal #17A08C
|
|
HelgenMist #EFF1F5 · HelgenLightCyan #E7FCF8 · HelgenLightIndigo #EDEFF4
|
|
========================================================================== */
|
|
|
|
:root {
|
|
--helgen-indigo: #2C3C5B;
|
|
--helgen-indigo-dark: #1F2A44;
|
|
--helgen-indigo-light: #3D5078;
|
|
--helgen-cyan: #51F3DA;
|
|
--helgen-teal: #17A08C;
|
|
--helgen-mist: #EFF1F5;
|
|
--helgen-light-cyan: #E7FCF8;
|
|
--helgen-light-indigo: #EDEFF4;
|
|
}
|
|
|
|
/* ---- Paleta "custom" de Material ---------------------------------------- */
|
|
[data-md-color-primary="custom"] {
|
|
--md-primary-fg-color: var(--helgen-indigo);
|
|
--md-primary-fg-color--light: var(--helgen-indigo-light);
|
|
--md-primary-fg-color--dark: var(--helgen-indigo-dark);
|
|
--md-primary-bg-color: #ffffff;
|
|
--md-primary-bg-color--light: rgba(255, 255, 255, 0.7);
|
|
}
|
|
[data-md-color-accent="custom"] {
|
|
--md-accent-fg-color: var(--helgen-teal);
|
|
--md-accent-fg-color--transparent: rgba(23, 160, 140, 0.1);
|
|
--md-accent-bg-color: #ffffff;
|
|
--md-accent-bg-color--light: rgba(255, 255, 255, 0.7);
|
|
}
|
|
[data-md-color-scheme="default"] {
|
|
--md-typeset-a-color: #14685c;
|
|
}
|
|
[data-md-color-scheme="slate"][data-md-color-accent="custom"] {
|
|
--md-accent-fg-color: var(--helgen-cyan);
|
|
--md-accent-fg-color--transparent: rgba(81, 243, 218, 0.12);
|
|
--md-accent-bg-color: var(--helgen-indigo-dark);
|
|
}
|
|
[data-md-color-scheme="slate"] {
|
|
--md-typeset-a-color: var(--helgen-cyan);
|
|
--md-default-bg-color: #161d2b;
|
|
--md-code-bg-color: #1c2536;
|
|
}
|
|
|
|
/* Fuentes del sistema (sitio utilizable sin Internet) */
|
|
:root {
|
|
--md-text-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
--md-code-font: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
|
|
}
|
|
|
|
/* ---- Tamaño: pensado para tableta en el taller -------------------------- */
|
|
.md-grid { max-width: 1400px; }
|
|
.md-typeset { font-size: 0.85rem; line-height: 1.6; }
|
|
@media screen and (min-width: 76.25em) {
|
|
.md-typeset { font-size: 0.9rem; }
|
|
}
|
|
.md-typeset h1 { color: var(--helgen-indigo); font-weight: 700; }
|
|
[data-md-color-scheme="slate"] .md-typeset h1 { color: var(--helgen-cyan); }
|
|
.md-typeset h2 { font-weight: 600; border-bottom: 2px solid var(--helgen-light-indigo); padding-bottom: 0.2em; }
|
|
[data-md-color-scheme="slate"] .md-typeset h2 { border-bottom-color: var(--helgen-indigo-light); }
|
|
|
|
/* Cabecera y pestañas */
|
|
.md-header__button.md-logo img { height: 1.6rem; width: auto; }
|
|
.md-tabs__link { font-size: 0.75rem; font-weight: 600; }
|
|
.md-tabs__link--active { border-bottom: 3px solid var(--helgen-cyan); }
|
|
|
|
/* ---- Tarjetas (grid cards) ---------------------------------------------- */
|
|
.md-typeset .grid.cards > ul > li,
|
|
.md-typeset .grid > .card {
|
|
border-radius: 0.5rem;
|
|
border: 1px solid var(--helgen-light-indigo);
|
|
transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
|
|
}
|
|
[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li { border-color: #2a3650; }
|
|
.md-typeset .grid.cards > ul > li:hover,
|
|
.md-typeset .grid > .card:hover {
|
|
border-color: var(--helgen-teal);
|
|
box-shadow: 0 6px 20px rgba(44, 60, 91, 0.18);
|
|
transform: translateY(-2px);
|
|
}
|
|
.md-typeset .grid.cards > ul > li > hr { margin: 0.6em 0; }
|
|
.md-typeset .grid.cards > ul > li h3 { margin-top: 0; }
|
|
.md-typeset .grid.cards > ul > li .md-button { margin: 0.2em 0.4em 0.2em 0; font-size: 0.78em; padding: 0.45em 1em; }
|
|
|
|
/* Botones */
|
|
.md-typeset .md-button--primary {
|
|
background-color: var(--helgen-indigo);
|
|
border-color: var(--helgen-indigo);
|
|
color: #fff;
|
|
}
|
|
.md-typeset .md-button--primary:hover {
|
|
background-color: var(--helgen-teal);
|
|
border-color: var(--helgen-teal);
|
|
}
|
|
|
|
/* ---- Pastillas de estado de tarjeta ------------------------------------- */
|
|
.badge-v3, .badge-v4, .badge-v55, .badge-v56, .badge-v57, .badge-v6, .badge-fw {
|
|
display: inline-block;
|
|
padding: 0.1em 0.65em;
|
|
border-radius: 999px;
|
|
font-size: 0.72em;
|
|
font-weight: 700;
|
|
letter-spacing: 0.02em;
|
|
line-height: 1.6;
|
|
vertical-align: middle;
|
|
white-space: nowrap;
|
|
}
|
|
.badge-v56 { background: var(--helgen-indigo); color: #fff; }
|
|
.badge-v55 { background: var(--helgen-teal); color: #fff; }
|
|
.badge-v57 { background: #e3f5e8; color: #1c5c2e; border: 1px solid #8fd1a3; }
|
|
.badge-v6 { background: #fff3cd; color: #7a5200; border: 1px solid #f0c36d; }
|
|
.badge-v4 { background: var(--helgen-light-indigo); color: var(--helgen-indigo); border: 1px solid #c9d0e0; }
|
|
.badge-v3 { background: #e9e9e9; color: #555; border: 1px solid #ccc; }
|
|
.badge-fw { background: var(--helgen-light-cyan); color: #0f5f52; border: 1px solid #9fe6d8; }
|
|
[data-md-color-scheme="slate"] .badge-v4 { background: #2a3650; color: #dfe6f5; border-color: #3d5078; }
|
|
[data-md-color-scheme="slate"] .badge-v3 { background: #333; color: #ccc; border-color: #555; }
|
|
[data-md-color-scheme="slate"] .badge-v57 { background: #143d22; color: #9fe6b4; border-color: #1c5c2e; }
|
|
[data-md-color-scheme="slate"] .badge-v6 { background: #4a3a10; color: #ffd97a; border-color: #7a5200; }
|
|
[data-md-color-scheme="slate"] .badge-fw { background: #123a34; color: var(--helgen-cyan); border-color: #17A08C; }
|
|
|
|
/* Aviso de búsqueda en la portada */
|
|
.buscar-aviso {
|
|
background: var(--helgen-light-cyan);
|
|
border-left: 4px solid var(--helgen-teal);
|
|
padding: 0.6em 1em;
|
|
border-radius: 0.3rem;
|
|
margin: 1em 0 1.5em;
|
|
}
|
|
[data-md-color-scheme="slate"] .buscar-aviso { background: #123a34; }
|
|
|
|
/* Tablas: más compactas y con cabecera Helgen */
|
|
.md-typeset table:not([class]) th {
|
|
background: var(--helgen-light-indigo);
|
|
color: var(--helgen-indigo);
|
|
}
|
|
[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
|
|
background: #2a3650;
|
|
color: #fff;
|
|
}
|
|
.md-typeset table:not([class]) td, .md-typeset table:not([class]) th { padding: 0.5em 0.8em; }
|
|
|
|
/* Listas de pasos numeradas (índices de sección) */
|
|
.md-typeset ol.pasos > li { margin-bottom: 0.6em; }
|
|
.md-typeset ol.pasos > li::marker { font-weight: 700; color: var(--helgen-teal); }
|
|
|
|
/* ---- Impresión (checklists y procedimientos) ---------------------------- */
|
|
@media print {
|
|
.md-header, .md-tabs, .md-sidebar, .md-footer, .md-top, .md-search,
|
|
.md-content__button, .md-source-file, .md-typeset .headerlink { display: none !important; }
|
|
.md-main__inner { margin: 0; }
|
|
.md-content { max-width: 100%; margin: 0; }
|
|
.md-typeset { font-size: 10.5pt; line-height: 1.35; color: #000; }
|
|
.md-typeset h1 { font-size: 16pt; color: #000; page-break-after: avoid; }
|
|
.md-typeset h2 { font-size: 13pt; page-break-after: avoid; border-bottom: 1px solid #000; }
|
|
.md-typeset h3 { font-size: 11.5pt; page-break-after: avoid; }
|
|
.md-typeset table { page-break-inside: avoid; font-size: 9.5pt; }
|
|
.md-typeset .admonition, .md-typeset details { page-break-inside: avoid; border: 1px solid #000; box-shadow: none; }
|
|
.md-typeset .task-list-control .task-list-indicator { border: 1px solid #000; background: #fff; }
|
|
.md-typeset a { color: #000; text-decoration: none; }
|
|
.md-typeset a[href^="http"]::after { content: none; }
|
|
.badge-v3, .badge-v4, .badge-v55, .badge-v56, .badge-v57, .badge-v6, .badge-fw { border: 1px solid #000; background: none; color: #000; }
|
|
@page { margin: 12mm 14mm; }
|
|
}
|