/* ─── GUSCIO CONDIVISO FOTORECORD (header + riga schede) ─────────────────
SSOT del "guscio" comune a cruscotto e app sorelle (preventivi, ARTUR FRAME):
header brandizzato con logo + riga schede sotto. Richiede i token di
fotorecord-ui.css (caricarlo PRIMA di questo file).
Uso (pattern, da istanziare in ogni app — vedi docs/index.html § Guscio):
Nome app
...bottoni propri dell'app...
Modalità embed: con ?embed=1 nell'URL, fr-shell.js aggiunge la classe
`fr-embed` a e header+schede spariscono (l'app vive dentro una
scheda del cruscotto, che ha già il proprio guscio). Le app che calcolano
altezze usano var(--fr-shell-h), che in embed vale 0.
Variante laterale (per chi ha molte schede, es. il cruscotto): classe
`fr-shell-laterale` sul , e le schede in gruppi con un titoletto:
...
Le schede diventano una colonna a sinistra, fissa mentre la pagina scorre. Senza
la classe i gruppi non si vedono (la riga resta quella di sempre); sotto i 760px
anche la variante laterale torna una riga in alto.
Colonna ritirata: `fr-schede-chiuse` sul la nasconde e lascia tutta la
larghezza al contenuto (serve alle schede che incorniciano un'app intera). Un
bottone `.fr-shell-schede` nell'header la riapre: lo mostra solo la variante
laterale, e il suo comportamento lo decide l'app (una riga di JS). */
@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@400;600;700&family=Arimo:wght@400;700&display=swap');
:root {
--fr-shell-header-h: 56px;
--fr-shell-tabs-h: 42px;
--fr-shell-h: calc(var(--fr-shell-header-h) + var(--fr-shell-tabs-h));
}
html.fr-embed { --fr-shell-h: 0px; }
.fr-shell-header {
display: flex;
align-items: center;
gap: var(--sp-4);
height: var(--fr-shell-header-h);
box-sizing: border-box;
padding: 0 var(--sp-6);
background: var(--color-bg);
border-bottom: 2px solid var(--color-primary);
}
.fr-shell-logo { height: 30px; display: block; }
.fr-shell-app {
font-family: var(--font-heading);
font-size: 1.15rem;
font-weight: 600;
color: var(--color-primary);
white-space: nowrap;
padding-left: var(--sp-3);
border-left: 1px solid var(--color-border);
line-height: 1;
}
.fr-shell-azioni {
margin-left: auto;
display: flex;
align-items: center;
gap: var(--sp-2);
min-width: 0;
}
.fr-tabs {
display: flex;
align-items: flex-end;
gap: var(--sp-1);
min-height: var(--fr-shell-tabs-h);
box-sizing: border-box;
padding: var(--sp-2) var(--sp-6) 0;
background: var(--color-bg-beige);
border-bottom: 2px solid var(--color-accent);
flex-wrap: wrap;
}
.fr-tab {
font-family: var(--font-body);
font-size: .92rem;
color: var(--color-text);
background: var(--color-accent-light);
border: 1px solid var(--color-border);
border-bottom: none;
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
padding: .42rem 1rem;
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: .35rem;
line-height: 1.2;
}
.fr-tab:hover { background: var(--color-bg); }
.fr-tab.attiva {
background: var(--color-bg);
border-color: var(--color-accent);
color: var(--color-primary);
font-weight: 700;
}
/* Gruppi di schede: nella riga orizzontale non esistono (titoli nascosti) */
.fr-tabs-gruppo { display: contents; }
.fr-tabs-titolo { display: none; }
/* ─── Variante laterale ───────────────────────────────────────────────── */
body.fr-shell-laterale {
--fr-shell-laterale-w: 15.5rem;
--fr-shell-h: var(--fr-shell-header-h); /* le schede non tolgono altezza */
display: grid;
grid-template-columns: var(--fr-shell-laterale-w) minmax(0, 1fr);
grid-template-rows: auto 1fr;
min-height: 100vh;
}
body.fr-shell-laterale > .fr-shell-header { grid-column: 1 / -1; }
body.fr-shell-laterale > .fr-tabs {
grid-column: 1;
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
gap: 0;
padding: var(--sp-3) 0 var(--sp-6) var(--sp-3);
border-bottom: none;
border-right: 2px solid var(--color-accent);
position: sticky;
top: 0;
align-self: start;
max-height: 100vh;
overflow-y: auto;
}
body.fr-shell-laterale > main { grid-column: 2; min-width: 0; }
body.fr-shell-laterale.fr-schede-chiuse { grid-template-columns: 0 minmax(0, 1fr); }
body.fr-shell-laterale.fr-schede-chiuse > .fr-tabs { display: none; }
.fr-shell-schede { display: none; }
body.fr-shell-laterale .fr-shell-schede {
display: inline-flex;
align-items: center;
gap: .35rem;
font-family: var(--font-body);
font-size: .88rem;
padding: .3rem .7rem;
border: 1px solid var(--color-accent);
border-radius: var(--radius-sm);
background: var(--color-bg);
color: var(--color-text);
cursor: pointer;
}
body.fr-shell-laterale .fr-shell-schede:hover { background: var(--color-accent-light); }
body.fr-shell-laterale .fr-tabs-gruppo {
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: var(--sp-3);
}
body.fr-shell-laterale .fr-tabs-titolo {
display: block;
font-family: var(--font-body);
font-size: .72rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--color-text-mid);
padding: var(--sp-1) .6rem;
}
body.fr-shell-laterale .fr-tab {
justify-content: flex-start;
text-align: left;
border: 1px solid transparent;
border-right: none;
border-radius: var(--radius-sm) 0 0 var(--radius-sm);
background: transparent;
padding: .45rem .8rem;
margin-right: -2px; /* la scheda attiva copre il bordo della colonna */
}
body.fr-shell-laterale .fr-tab:hover { background: var(--color-accent-light); }
body.fr-shell-laterale .fr-tab.attiva {
background: var(--color-bg);
border-color: var(--color-accent);
border-right: 2px solid var(--color-bg);
}
@media (max-width: 760px) {
body.fr-shell-laterale { display: block; }
body.fr-shell-laterale .fr-shell-schede { display: none; }
body.fr-shell-laterale.fr-schede-chiuse > .fr-tabs { display: flex; }
body.fr-shell-laterale > .fr-tabs {
flex-direction: row;
flex-wrap: wrap;
align-items: flex-end;
gap: var(--sp-1);
padding: var(--sp-2) var(--sp-3) 0;
border-right: none;
border-bottom: 2px solid var(--color-accent);
position: static;
max-height: none;
}
body.fr-shell-laterale .fr-tabs-gruppo { display: contents; }
body.fr-shell-laterale .fr-tabs-titolo { display: none; }
body.fr-shell-laterale .fr-tab {
border: 1px solid var(--color-border);
border-bottom: none;
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
background: var(--color-accent-light);
margin-right: 0;
}
body.fr-shell-laterale .fr-tab.attiva { border-color: var(--color-accent); background: var(--color-bg); }
}
html.fr-embed body.fr-shell-laterale { display: block; }
/* Embed: dentro una scheda del cruscotto il guscio dell'app sparisce */
html.fr-embed .fr-shell-header,
html.fr-embed .fr-tabs { display: none; }
Nome app