/* nexe.css - el full d'estil comú de Nexe. Cap font ni recurs de fora.
Els colors dels dos temes (Mediterrània i Nit), les ombres, la lletra, el
moviment i les capes són a barra.css: els comparteix l'Estudi.
Nucli 0.30.0: abans hi havia tres capes, l'una sobre l'altra (la base
del DineCat, «la forma del Tabler» i «les mides comunes»), i cada peça
es definia dues o tres vegades. Ara cada peça és en un sol lloc, amb el
valor que guanyava. Les peces comunes porten «:root» al davant: els dona
el pes d'una classe més, perquè un estil de mòdul no les trepitgi sense
voler (si un mòdul ha de canviar una peça, que ho digui amb dues classes). */
/* ========================================================== */
/* ESCALES */
/* ========================================================== */
/* Cinc mides de lletra i res per sota dels 12 px. */
:root {
--t-micro: 12px; /* distintius, ajudes, cel·les de taula denses */
--t-meta: 13px; /* text secundari, botons, taules */
--t-body: 14px; /* cos */
--t-lead: 18px; /* títols de secció */
--t-h1: 24px; /* xifres grans, títol del portal */
--lh-tight: 1.3; --lh-snug: 1.4; --lh-body: 1.55;
/* l'espaiat */
--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
--s5: 24px; --s6: 32px; --s7: 48px;
/* tres radis: el petit (distintius, codi), el dels controls (camps,
botons, avisos) i el de les cartes i els panells; i la píndola */
--r-petit: 4px; --r-control: 6px; --r-carta: 8px; --r-pindola: 999px;
/* les alçades: tot el que va de costat fa 36 px; dins d'una taula, 28 */
--alt-control: 36px; --alt-control-sm: 28px;
--mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
/* ========================================================== */
/* BASE */
/* ========================================================== */
* { box-sizing: border-box; }
body {
margin: 0; padding: 0;
font-family: var(--lletra);
background: var(--bg);
color: var(--text);
font-size: var(--t-body);
line-height: 1.43;
transition: background-color var(--d-hover) var(--ease-out), color var(--d-hover) var(--ease-out);
}
code {
font-family: var(--mono); font-size: var(--t-micro);
background: var(--surface-2); padding: 1px 5px; border-radius: var(--r-petit);
}
a { color: var(--primary); }
a:hover { color: var(--primary-hover); }
/* La selecció, el cursor de text, l'anell de focus i les barres de
desplaçament, amb els colors del tema. L'anell de focus visible és el que
fa que tot es pugui fer servir només amb el teclat. */
::selection { background: var(--primary-soft); color: var(--text); }
:root { accent-color: var(--primary); caret-color: var(--primary); }
:where(a, button, input, select, textarea, summary, [tabindex],
[role="button"]):focus-visible {
outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 5px;
}
:where(a, button, input, select, textarea, summary, [tabindex],
[role="button"]):focus:not(:focus-visible) { outline: none; }
@supports (scrollbar-color: auto) {
* { scrollbar-color: var(--border) transparent; scrollbar-width: thin; }
}
/* les xifres, de la mateixa amplada: si no, la columna balla */
td, .num, time, .hora, .mida, .pct { font-variant-numeric: tabular-nums; }
/* El moviment pot marejar. Reduir-lo no vol dir treure'l tot: els canvis
d'opacitat i color es queden; marxen el desplaçament i l'escala. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
/* ...menys les rodetes: són l'única senyal que la màquina treballa */
.spinner {
animation-duration: 1.4s !important;
animation-iteration-count: infinite !important;
}
}
/* ========================================================== */
/* CONTINGUT I CARTES */
/* ========================================================== */
/* --amplada-pagina i --marge-pagina són a barra.css */
.contingut {
max-width: var(--amplada-pagina); margin: 24px auto; padding: 0 var(--marge-pagina);
}
.pagina-cap + .contingut { margin-top: 14px; }
.contingut:has(+ .nexe-peu), .contingut:has(+ #nexe-peu-lloc) { margin-bottom: 0; }
:root .carta {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-carta); box-shadow: var(--ombra-carta);
padding: 20px; margin-bottom: 22px;
}
.carta h2 {
margin: 0 0 16px 0;
font-size: var(--t-body); font-weight: 600; color: var(--text);
}
/* el primer títol de la carta fa de capçalera (!important: moltes
plantilles hi porten un style="margin-top:0") */
:root .carta > h2:first-child {
margin: -20px -20px 16px !important; padding: 14px 20px;
border-bottom: 1px solid var(--border);
}
/* el h3 d'una carta és un .rotul (la regla comuna és més avall) */
:root .carta h3 { margin: 24px 0 8px 0; }
.carta h3:first-child { margin-top: 0; }
/* una ajuda just sota d'un títol pertany al títol */
.carta h2 + .ajuda, .carta h3 + .ajuda { margin-top: -6px; }
:root .carta > h2:first-child + .ajuda { margin-top: 0; }
.carta > p { margin: 8px 0; }
/* Carta amb capçalera i accions: el títol a l'esquerra i els botons o
distintius a la dreta.
Títol
...
...
...
*/
.carta-cap {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
margin: -20px -20px 16px; padding: 6px 20px;
/* la mateixa alçada amb botons o sense: dues cartes del costat quadren */
min-height: calc(var(--alt-control) + 13px);
border-bottom: 1px solid var(--border);
}
.carta-titol, :root .carta .carta-titol {
margin: 0; flex: 1 1 auto; min-width: 0;
text-transform: none; letter-spacing: normal;
font-size: var(--t-body); font-weight: 600; color: var(--text);
display: flex; align-items: center; gap: 8px;
}
.carta-accions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.carta-cos > :last-child { margin-bottom: 0; }
.carta-peu {
margin: 16px -20px -20px; padding: 12px 20px;
border-top: 1px solid var(--border); background: var(--surface-2);
border-radius: 0 0 var(--r-carta) var(--r-carta);
font-size: var(--t-micro); color: var(--text-soft);
}
.carta-petita { padding: 14px 16px; }
.carta-petita .carta-cap { margin: -14px -16px 12px; padding: 4px 16px; }
/* una taula que arriba a les vores de la carta */
.carta > .u-scroll-x:last-child, .carta-cos > .u-scroll-x:last-child { margin-bottom: -4px; }
/* una sola carta centrada i estreta (un error, canviar la contrasenya) */
.carta-estreta { max-width: 520px; margin: 48px auto; }
/* el segon factor: el QR (sempre fosc sobre blanc, també amb el tema fosc),
la clau per escriure a mà, el camp del codi i els codis de recuperació */
.qr-marc { margin: 12px 0; }
.qr-marc svg.qr { display: block; width: 208px; height: 208px;
border: 1px solid var(--border); border-radius: 8px; }
.clau-secreta { display: block; margin-top: 4px; font-family: var(--mono);
font-size: var(--t-meta); letter-spacing: .04em; overflow-wrap: anywhere; }
:root input.codi-entrada { font-family: var(--mono); font-size: var(--t-lead);
letter-spacing: .2em; font-variant-numeric: tabular-nums; }
.passos { margin: 0 0 16px; padding-left: 20px; display: grid; gap: 12px; }
.codis-recuperacio { list-style: none; margin: 12px 0 16px; padding: 12px 16px;
display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px;
background: var(--surface-2); border-radius: 8px;
font-family: var(--mono); font-size: var(--t-body); letter-spacing: .06em; }
/* la fila d'una taula que ha superat un límit */
.taula tr.fila-error > td, tr.fila-error > td { background: var(--error-soft); }
/* una columna de taula curta (una casella, un sí/no) */
th.th-curt { width: 80px; }
/* nucli 0.63.0: la graella de permisos, per àrees i mòduls (_permisos.html) */
.permisos-eines { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 12px; }
.permisos-eines .ajuda { margin: 0 0 0 6px; }
.taula-permisos .casella-cap { display: inline-flex; align-items: center; gap: 6px; margin: 0; font: inherit; }
.taula-permisos .fila-area > th { padding-top: 18px; font-size: var(--t-lead); font-weight: 700;
color: var(--area, var(--text)); border-bottom: 2px solid var(--area, var(--border)); text-align: left; }
.taula-permisos .fila-area > td { padding-top: 18px; border-bottom: 2px solid var(--border); }
.taula-permisos .fila-modul > td { background: var(--surface-2); }
.taula-permisos .fila-permis > td:first-child { padding-left: 28px; }
/* passos numerats dins d'una carta d'ajuda */
.llista-passos { margin: 0 0 6px 18px; padding: 0; }
/* cartes de costat (dues o més, segons l'amplada) */
.graella-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 0 20px;
align-items: start; }
/* ========================================================== */
/* CAMPS */
/* ========================================================== */
/* Les graelles de camps: tantes columnes com hi càpiguen (mín. 260 px).
Les etiquetes d'una mateixa fila ocupen la mateixa ratlla i els camps
comencen tots a la mateixa alçada; l'ajuda, a sota. Cada .camp és una
subgraella de tres files: etiqueta, camp, ajuda. */
.graella {
display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
row-gap: 0; column-gap: 16px;
}
.graella > .camp {
display: grid; grid-row: span 3; grid-template-rows: subgrid;
row-gap: 0; margin-bottom: 0; padding-bottom: 12px; align-content: start;
}
.graella > .camp > label:first-child { align-self: end; }
.graella > .camp-casella > label:first-child,
.graella > .camp > label:only-child { grid-row: 2; align-self: center; margin: 0; }
.graella > .camp > :nth-child(2) { align-self: start; }
.graella > .camp > :nth-child(3) { margin-top: 4px; }
/* l'ajuda d'una casella o d'un interruptor, a sota (no a la fila de les etiquetes) */
.graella > .camp-casella > label:first-child + * { grid-row: 3; margin-top: 4px; }
.camp { position: relative; margin-bottom: 4px; }
:root .camp label {
display: block; margin-bottom: 4px;
font-size: var(--t-meta); color: var(--text); font-weight: 500;
}
/* l'etiqueta fora d'un .camp */
.etiqueta-camp { display: block; font-size: var(--t-meta); font-weight: 500;
color: var(--text); margin-bottom: 4px; }
/* l'amplada sencera pesa poc (:where): qualsevol classe d'amplada la canvia */
:where(input, select, textarea) { width: 100%; }
:root input, :root select, :root textarea {
padding: 8px 12px;
border: 1px solid var(--border); border-radius: var(--r-control);
font-size: var(--t-meta); font-family: inherit;
background: var(--surface); color: var(--text);
box-shadow: var(--ombra-control);
transition: border-color var(--d-hover) var(--ease-out), box-shadow var(--d-hover) var(--ease-out);
}
/* les caselles i els rodons no són camps de text: ni s'estiren ni fan ombra */
:where(input[type=checkbox], input[type=radio]) { width: auto; }
:root input[type=checkbox], :root input[type=radio] {
padding: 0; vertical-align: middle; box-shadow: none;
}
:root input:focus, :root select:focus, :root textarea:focus {
outline: none;
border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 25%, transparent);
}
textarea { resize: vertical; min-height: 60px; }
/* un camp que no es pot canviar (el nom d'una cosa que s'edita) es veu apagat */
:root :is(input, textarea)[readonly]:not([data-tria-tot]) { background: var(--surface-2); box-shadow: none; }
/* el selector de color, a l'alçada dels camps del costat */
:root input[type=color] { height: var(--alt-control); padding: 3px; }
:where(input[type=color]) { width: 56px; }
/* el selector de fitxer, a l'alçada dels camps i dels botons */
:root input[type=file] { height: var(--alt-control); padding: 0 !important; line-height: calc(var(--alt-control) - 2px); }
:root input[type=file]::file-selector-button {
height: 100%; margin: 0 10px 0 0; padding: 0 12px; border: 0; border-right: 1px solid var(--border);
background: var(--surface-2); color: var(--text); font: inherit; font-weight: 500; cursor: pointer; }
/* amplades dels camps dins d'una fila o una taula (durades, números, IPs):
tres mides i prou; .camp-llarg també val per a un .camp sencer o un select */
input.camp-curt, select.camp-curt, .camp.camp-curt { width: 84px; flex: none; }
input.camp-mitja, select.camp-mitja, .camp.camp-mitja { width: 130px; flex: none; }
input.camp-llarg, select.camp-llarg { min-width: 220px; }
.camp.camp-llarg { min-width: 180px; }
/* el camp amb el seu botó o text enganxat */
.camp-grup { display: flex; align-items: stretch; width: 100%; }
.camp-grup > input, .camp-grup > select { flex: 1 1 auto; min-width: 0; width: 1%; }
.camp-grup > * { border-radius: 0 !important; margin-left: -1px; }
.camp-grup > :first-child { border-radius: var(--r-control) 0 0 var(--r-control) !important; margin-left: 0; }
.camp-grup > :last-child { border-radius: 0 var(--r-control) var(--r-control) 0 !important; }
.camp-grup > :only-child { border-radius: var(--r-control) !important; }
.camp-grup-text {
display: inline-flex; align-items: center; padding: 0 12px; white-space: nowrap;
background: var(--surface-2); border: 1px solid var(--border);
color: var(--text-soft); font-size: var(--t-meta);
}
/* les caselles amb el seu text */
.casella { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 6px;
font-size: var(--t-meta); cursor: pointer; }
.casella > input { margin-top: 3px; flex: none; }
.casella-linia { display: inline-flex; margin-right: 14px; }
.opcions-checkboxes { display: flex; flex-direction: column; gap: 8px; }
.opcions-checkboxes label {
display: flex; align-items: center; gap: 8px;
font-size: var(--t-meta); color: var(--text); margin: 0;
padding: 8px 10px; background: var(--surface-2);
border-radius: var(--r-control); cursor: pointer;
}
.opcions-checkboxes input[type=checkbox] { width: auto; margin: 0; }
/* L'interruptor: una casella dibuixada amb el SEU fons (la pista i la
boleta són dos degradats), sense ::after -- alguns navegadors no pinten
pseudoelements damunt d'un . Encès i apagat fan la mateixa mida. */
/* Una opció de sí o no és SEMPRE un interruptor, mai un desplegable Sí/No:
Dins d'una .graella va en un .camp.camp-casella i queda a l'altura dels
altres camps de la fila. */
:root .interruptor, :root .camp label.interruptor {
display: flex; width: fit-content; align-items: center; gap: 10px; margin: 0;
font-size: var(--t-meta); color: var(--text); font-weight: 500; cursor: pointer;
}
.camp > label.interruptor { min-height: var(--alt-control); }
:root .interruptor > input[type=checkbox] {
appearance: none; -webkit-appearance: none; flex: none;
width: 36px; height: 20px; margin: 0; padding: 0; border: 0;
border-radius: var(--r-pindola); cursor: pointer; box-shadow: none;
background:
radial-gradient(circle 8px at 10px 50%, #fff 7px, rgba(0, 0, 0, .18) 7.5px,
transparent 8.5px),
var(--border);
transition: background-color var(--d-hover) var(--ease-out),
background-position var(--d-hover) var(--ease-out);
background-repeat: no-repeat; background-position: 0 0, 0 0;
background-size: 36px 20px, auto;
}
:root .interruptor > input[type=checkbox]:checked {
background-color: var(--primary);
background-image:
radial-gradient(circle 8px at 26px 50%, #fff 7px, rgba(0, 0, 0, .18) 7.5px,
transparent 8.5px);
}
:root .interruptor > input[type=checkbox]:focus-visible {
outline: 2px solid var(--primary); outline-offset: 2px; }
:root .interruptor > input[type=checkbox]:disabled { opacity: .5; cursor: not-allowed; }
/* ========================================================== */
/* BOTONS */
/* ========================================================== */
/* Un