/* vrp-jukebox.css - il JukeBox (platform/pages/jukebox.php).
*
* ⚠️ I COLORI NON STANNO PIU' QUI. Dal 12/09/2026 sono tutti `var(--vrp-…)`,
* e i valori li dichiara `vrp-livrea.css`, la paletta unica di casa. Questo
* foglio e' stato il PRIMO a essere convertito (vitti: *"sì, comincia dal
* jukebox... una livrea unica per tutta la piattaforma!"*): aveva 44 colori
* scritti a mano e 3 variabili, adesso ha 5 colori e sono tutti OMBRE.
* Le ombre restano nere apposta: un'ombra non e' un colore della casa, e'
* mancanza di luce - cambiando livrea non deve cambiare.
* Se serve un colore nuovo si aggiunge alla LIVREA, non qui.
*
* Poco: l'esploratore si veste da se' (vrp-explorer.css) e la livrea della
* piattaforma pure. Qui c'e' la testata, la console in fondo e la coda.
*
* La CONSOLE sta appiccicata in basso e resta li' mentre si sfoglia: si cambia
* scaffale senza perdere di vista cosa sta suonando. E' la ragione per cui non
* e' una colonna a lato - su una finestra stretta la colonna sparirebbe.
*/
/* Tutta la testata a DESTRA (vitti, 27/09/2026: «sposta gli help dalla
faccia di Elena a sopra il muretto a destra»): a sinistra lo sfondo resta
libero. L'esito si mette prima del titolo, sempre a destra. */
.jb-testata {
display: flex;
align-items: center;
justify-content: flex-end;
gap: .8rem;
flex-wrap: wrap;
margin: 0 0 .6rem;
}
.jb-testata small {
display: block;
font-weight: 400;
opacity: .75;
margin-top: .15rem;
}
.jb-esito {
order: -1;
flex: 0 0 100%; /* una riga tutta sua, sopra titolo e ? (vitti) */
margin-left: auto;
font-size: .9rem;
text-align: right;
}
/* vuoto non deve lasciare una riga bianca sopra il titolo */
.jb-esito:empty { display: none; }
/* ==== il triangolo su ogni mattonella ==============================
Suona SUBITO, saltando la coda. Sta in un angolo e non ruba il clic
alla mattonella, che invece accoda. */
.jb-ora-btn {
position: absolute;
right: 5px;
top: 5px;
z-index: 3;
width: 1.7rem;
height: 1.7rem;
border: 1px solid var(--vrp-line-strong);
border-radius: 50%;
background: var(--vrp-velo);
color: var(--vrp-txt-forte);
font-size: .85rem;
line-height: 1;
cursor: pointer;
}
.jb-ora-btn:hover { background: var(--vrp-accent); border-color: var(--vrp-accent); }
/* Su una CARTELLA (un album) i tasti sono due: il triangolo la suona subito,
il piu' la mette in fondo alla coda. Il clic sulla mattonella li' e' gia'
preso - apre l'album - e per questo servono due tasti invece di uno.
Il piu' sta a sinistra del triangolo: 1,7rem di tasto + 4px di respiro. */
.jb-piu-btn {
right: calc(5px + 1.7rem + 4px);
font-size: 1rem;
}
/* ==== la scena ======================================================
Mentre suona e nessuno tocca niente, l'esploratore si toglie e resta questa:
copertina grande e titolo. Al primo tocco l'esploratore torna. */
/* `hidden` da solo non basterebbe: .vx-shell e' display:flex, e il flex vince
sull'attributo. Con la classe davanti la specificita' e' dalla nostra. */
.vx-shell[hidden] { display: none; }
.jb-scena {
display: flex;
flex-direction: column;
align-items: center;
/* `safe`: se il contenuto non ci sta, sborda SOTTO e non sopra - prima la
riga dell'album finiva tagliata sotto la testata (vitti, 27/09/2026) */
justify-content: safe center;
gap: .6rem;
padding: 1rem 1rem;
cursor: pointer;
user-select: none;
text-align: center;
}
/* 🐞 LA SCENA ERA SEMPRE A VIDEO (trovata il 09/09/2026, guardando la pagina).
La stessa trappola gia' scritta due volte qui sopra, per .vx-shell e per
.jb-scena__nota, era rimasta aperta proprio sulla scena: `display: flex`
vince sull'attributo `hidden`, quindi il pannellone col ♫ e la scritta
«tocca per tornare alla musica da scegliere» stava sotto l'esploratore
ANCHE a musica ferma. Il JS era innocente: `scenaAccesa()` metteva e
toglieva `hidden` come si deve, ma il CSS non lo stava a sentire. */
.jb-scena[hidden] { display: none; }
/* La misura della copertina la detta lo spazio che AVANZA sopra la console.
`--jb-conh` la scrive il JS misurando la console vera: aperta la lista si
alza, e la copertina si stringe invece di finirci sotto. Il ripiego 8rem
serve solo per il primo istante, prima che il JS misuri. */
/* La misura: vitti, 12/09/2026, con l'Argerich in mano - *"la copertina e'
troppo grande!"*. Era 74vw (mezzo schermo abbondante su un telefono in
piedi) e sul suo scatto arrivava a coprire tutto fra la testata e la
console. Scesa a 52vw / 16rem, e il terzo termine lascia due dita in piu'
di aria sopra la console. Resta comunque il pezzo piu' grande della scena:
e' la copertina di quello che suona, non una miniatura. */
.jb-scena__cover,
.jb-scena__nota {
/* `--jb-scenah` e' lo spazio VERO che resta fra la scena e la console,
misurato dal JS (12/09/2026). Il `calc(100svh ...)` resta come ripiego
per il primo istante, prima che la misura arrivi. */
/* 27/09/2026 vitti: «la cover un po' piu' grande» - il tetto passa da
16rem a 30rem (e 60vw); in pratica comanda lo spazio misurato, che e'
l'ultima parola. */
width: min(60vw, 30rem, var(--jb-scenah, calc(100svh - var(--jb-conh, 8rem) - 15rem)));
aspect-ratio: 1 / 1;
border-radius: 14px;
/* ⚠️ MAI schiacciata dal flex. La scena e' una colonna flex: se il conto
sfora di poco, il valore di partenza (`flex-shrink: 1`) accorcia la
figura in altezza senza toccarne la larghezza - il quadrato si sfonda e
`object-fit` taglia. E' quello che vitti ha visto sdraiato. */
flex: 0 0 auto;
}
.jb-scena__cover {
height: auto;
/* `contain` e non `cover`: se un giorno il quadrato salta lo stesso, la
copertina si rimpicciolisce - non si fa tagliare via la testa. */
object-fit: contain;
box-shadow: 0 10px 34px rgba(0, 0, 0, .55);
}
/* il ripiego per il brano senza copertina: lo stesso quadrato, col glifo */
.jb-scena__nota {
display: flex;
align-items: center;
justify-content: center;
background: var(--vrp-velo);
font-size: 5rem;
}
/* Stessa trappola di .vx-shell: display:flex vince sull'attributo `hidden`.
Qui costava caro - glifo E copertina insieme, due quadrati uno sull'altro. */
.jb-scena__nota[hidden] { display: none; }
.jb-scena__nome {
font-size: 1.15rem;
font-weight: 600;
max-width: 34ch;
}
/* La scena si guarda all'aperto, col sole: qui la leggibilita' vale piu'
della discrezione. Ombra e non velo - lo sfondo resta nitido (regola di
casa: niente blur). */
.jb-scena__nome { text-shadow: 0 1px 4px rgba(0, 0, 0, .7); }
/* l'album, sopra la copertina (27/09/2026): piu' piccolo del brano, che e'
la notizia; stessa ombra per leggerlo al sole */
.jb-scena__album {
font-size: 1rem;
font-weight: 500;
opacity: .9;
max-width: 34ch;
text-shadow: 0 1px 4px rgba(0, 0, 0, .7);
}
.jb-scena__album[hidden] { display: none; }
.jb-scena__aiuto {
font-size: .95rem;
opacity: .75;
text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
}
/* ==== la console ==================================================== */
.jb-console {
position: sticky;
bottom: 0;
z-index: 50;
display: flex;
align-items: center;
gap: .8rem;
flex-wrap: wrap;
margin-top: 1rem;
padding: .6rem .9rem;
background: var(--vrp-panel);
border: 1px solid var(--vrp-line);
border-radius: 10px;
box-shadow: 0 -6px 18px rgba(0, 0, 0, .35);
}
.jb-ora {
display: flex;
align-items: center;
gap: .4rem;
min-width: 12rem;
flex: 1 1 14rem;
}
/* La copertina del brano che suona. Sta al posto del glifo 🎵 (uno dei due e'
sempre nascosto): la console non cambia altezza quando un brano non ce l'ha. */
.jb-ora__cover {
width: 3.2rem;
height: 3.2rem;
flex: 0 0 auto;
object-fit: cover;
border-radius: 6px;
background: var(--vrp-bg);
}
/* "11/18" accanto al titolo: piccolo, in cifre tabellari, senza rubare la
scena al nome del brano. */
.jb-ora__pos {
flex: 0 0 auto;
font-size: .82em;
opacity: .6;
font-variant-numeric: tabular-nums;
}
.jb-ora__nome {
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.jb-console audio { height: 2.1rem; flex: 1 1 16rem; }
.jb-comandi { display: flex; gap: .3rem; }
.jb-comandi button {
width: 2.1rem;
height: 2.1rem;
border: 1px solid var(--vrp-line-strong);
border-radius: 7px;
background: var(--vrp-panel2);
color: var(--vrp-txt);
cursor: pointer;
font-size: .95rem;
line-height: 1;
}
/* «🖼 Copertina» ha la scritta: largo quanto serve (27/10/2026) */
.jb-comandi button#jb-ascolta { width: auto; padding: 0 .6rem; white-space: nowrap; }
.jb-comandi button:hover { background: var(--vrp-panel3); }
.jb-comandi button.is-acceso { background: var(--vrp-accent); border-color: var(--vrp-accent); color: var(--vrp-accent-txt); }
/* La tasca mentre scarica: spenta e non cliccabile, cosi' non si fa
partire due volte lo stesso scaricamento. */
.jb-comandi button:disabled { opacity: .5; cursor: progress; }
/* ==== la coda ======================================================= */
.jb-coda { flex: 0 0 auto; }
.jb-coda > summary {
cursor: pointer;
font-size: .85rem;
opacity: .8;
user-select: none;
}
.jb-coda[open] > summary { opacity: 1; font-weight: 600; }
/* La coda aperta in GRANDE (vitti, 27/10/2026): una riga tutta sua in fondo
alla console, alta mezzo schermo, scritte piu' grandi. */
/* Le playing list uguali (vitti, stessa sera): larghe come la coda. Una
alla volta: aprirne una chiude l'altra (lo fa il JS). `dvh` per il
telefono, dove la barra del browser va e viene. */
.jb-coda[open], .jb-liste[open] { flex: 1 1 100%; order: 10; }
.jb-coda[open] .jb-coda__lista { max-height: 50vh; max-height: 50dvh; font-size: 1rem; }
/* La coda grande un po' piu' fitta (vitti, dallo screenshot del 27/10). */
.jb-coda[open] .jb-coda__lista li { padding: .02rem .2rem; line-height: 1.3; }
/* La SCELTA delle liste: larga come la coda, 3 COLONNE, fino a 4 righe e poi
scorre (vitti, 27/10/2026). Con 3 liste o meno resta una riga sola. Sul
telefono una colonna. Riga = 2.2rem, 4 righe = 8.8rem. */
.jb-liste[open] .jb-liste__lista {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-auto-rows: 2.2rem;
column-gap: .8rem;
max-height: 8.8rem;
font-size: 1rem;
}
@media (max-width: 600px) {
.jb-liste[open] .jb-liste__lista { grid-template-columns: 1fr; }
}
.jb-liste[open] .jb-liste__lista li { align-items: center; min-width: 0; }
.jb-liste[open] .jb-liste__nome {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.jb-liste[open] .jb-liste__di { flex: 0 0 auto; white-space: nowrap; }
.jb-coda__lista {
margin: .4rem 0 0;
/* il rientro dell' non serve piu': il numero se lo scrive la riga */
padding-left: .3rem;
list-style: none;
max-height: 12rem;
overflow: auto;
font-size: .86rem;
}
.jb-coda__lista li {
padding: .12rem .2rem;
border-radius: 4px;
cursor: pointer;
display: flex;
align-items: center;
gap: .4rem;
}
.jb-coda__lista li:hover { background: var(--vrp-panel2); }
/* "7/18": cifre a larghezza fissa, cosi' i nomi partono tutti incolonnati
anche passando da 9/18 a 10/18. */
.jb-coda__n {
flex: 0 0 auto;
min-width: 3.4em;
opacity: .55;
font-variant-numeric: tabular-nums;
font-size: .82em;
}
.jb-coda__nome {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* il brano che sta suonando: si riconosce senza doverlo cercare */
.jb-coda__lista li.is-ora {
background: var(--vrp-liv3);
font-weight: 600;
}
.jb-togli {
margin-left: auto;
border: 0;
background: none;
color: inherit;
opacity: .45;
cursor: pointer;
font-size: .8rem;
padding: 0 .2rem;
}
.jb-togli:hover { opacity: 1; color: var(--vrp-err); }
/* ▲▼ nella coda (28/09/2026): stessi panni del ✕, spinti a destra con lui */
.jb-sposta {
border: 0; background: none; color: inherit; opacity: .45; cursor: pointer;
font-size: .75rem; padding: 0 .25rem;
}
.jb-sposta:first-of-type { margin-left: auto; }
.jb-coda__lista li .jb-sposta ~ .jb-togli { margin-left: 0; }
.jb-sposta:hover:not(:disabled) { opacity: 1; color: var(--vrp-gold); }
.jb-sposta:disabled { opacity: .12; cursor: default; }
/* ==== le playing list ===============================================
Stessa forma della coda (una tendina nella console) perche' fanno lo
stesso mestiere: elenchi di brani su cui si clicca. Un vestito diverso
avrebbe fatto sembrare diverso un gesto che e' identico.
Si vedono anche da ospite: quello che manca all'ospite e' il bottone
Salva, non l'elenco. */
.jb-liste { flex: 0 0 auto; }
.jb-liste > summary {
cursor: pointer;
font-size: .85rem;
opacity: .8;
user-select: none;
}
.jb-liste[open] > summary { opacity: 1; font-weight: 600; }
.jb-liste__n { opacity: .6; font-weight: 400; }
.jb-liste__lista {
margin: .4rem 0 0;
padding: 0;
list-style: none;
max-height: 12rem;
overflow: auto;
font-size: .86rem;
min-width: 14rem;
}
.jb-liste__lista li {
padding: .18rem .3rem;
border-radius: 4px;
cursor: pointer;
display: flex;
align-items: baseline;
gap: .45rem;
}
.jb-liste__lista li:hover { background: var(--vrp-panel2); }
.jb-liste__nome { font-weight: 600; }
.jb-liste__di { opacity: .6; font-size: .8rem; }
.jb-liste__vuoto {
opacity: .55;
cursor: default;
font-style: italic;
}
.jb-liste__vuoto:hover { background: none; }
.jb-liste__ospite {
margin: .5rem 0 0;
font-size: .8rem;
opacity: .6;
max-width: 20rem;
}
.jb-salva {
margin-top: .5rem;
padding: .3rem .6rem;
border: 1px solid var(--vrp-line-strong);
border-radius: 7px;
background: var(--vrp-panel2);
color: var(--vrp-txt);
cursor: pointer;
font-size: .85rem;
}
.jb-salva:hover { background: var(--vrp-accent); border-color: var(--vrp-accent); color: var(--vrp-accent-txt); }
/* ==== il foglio (09/09/2026) ========================================
* La pagina e' passata dal guscio da 760px al FOGLIO (`.vrp-fixed-body`):
* largo 92%, alto quanto lo schermo, testata ferma e corpo che scorre.
* Dentro il corpo lo spazio va DATO, se no l'esploratore resta alto quanto il
* suo contenuto e in mezzo alla pagina si apre un buco con la fotografia.
*
* ⚠️ Si stila `.jb-foglio`, non `.vrp-fixed-body`: quella classe e' di tutta
* la piattaforma, e un foglio di UNA pagina che riscrive una classe comune la
* rompe dovunque appaia - la lezione del `.vv-btn` della barra dell'editor. */
.jb-foglio { display: flex; flex-direction: column; }
/* l'esploratore si prende quello che avanza; `min-height: 0` perche' senza,
dentro un flex, un figlio che scorre non si lascia stringere */
.jb-foglio > .vx-shell { flex: 1 1 auto; min-height: 0; }
/* la scena, quando c'e', prende lo stesso posto dell'esploratore */
.jb-foglio > .jb-scena { flex: 1 1 auto; min-height: 0; }
/* la console resta della sua altezza e si incolla in fondo alla cornice */
.jb-foglio > .jb-console { flex: 0 0 auto; }
/* ==== la ripresa (09/09/2026) =======================================
* Compare solo quando c'e' una coda di prima da riprendere: sta in console
* accanto alla coda, e sparisce al primo clic. Colore d'oro perche' e' un
* invito, non un comando: non deve competere con play e avanti. */
.jb-ripresa { flex: 0 0 auto; }
.jb-ripresa[hidden] { display: none; }
.jb-ripresa button {
border: 1px solid var(--vrp-gold);
border-radius: 7px;
padding: .35rem .7rem;
background: var(--vrp-liv2);
color: var(--vrp-gold);
cursor: pointer;
font-size: .85rem;
/* Il bottone adesso nomina il brano (12/09/2026) e un titolo lungo
spingerebbe fuori "coda vuota": una riga sola, e taglia con i puntini.
Il testo intero resta nel `title`. */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: min(28rem, 62vw);
}
.jb-ripresa button:hover { background: var(--vrp-gold); color: var(--vrp-accent-txt); }
/* ===== Le mattonelle piu' piccole (vitti, 11/09/2026: *"le copertine nel
jukebox son troppo grandi!"*) =============================================
La misura dell'esploratore (150px, immagine alta 120) e' pensata per le
FOTO, dove la miniatura e' il contenuto. Qui e' un'etichetta: con la
Discoteca del NAS (160 artisti, 495 album) a quella misura se ne vedevano
pochi per volta. Tre quarti, e SOLO dentro il JukeBox (`.jb-foglio`): gli
altri cassetti che usano lo stesso motore restano come sono. */
.jb-foglio .vx-grid-inner { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
.jb-foglio .vx-tile img { height: 86px; }
/* e la cartellina senza copertina (il glifo 📁/🎵) alta come le immagini:
se no nella stessa riga le mattonelle vengono di due altezze */
.jb-foglio .vx-tile .vx-fileico { height: 86px; font-size: 30px; }
/* ==== LA RICERCA (12/09/2026) =======================================
La casella sta nella barra dell'esploratore, fra le briciole e i bottoni.
I risultati NON si infilano nella griglia: prendono il posto dell'albero e
della griglia, e si torna indietro con ✕ o con Esc. Cosi' non si confonde
«quello che c'e' in questa cartella» con «quello che ho trovato». */
.jb-cerca {
flex: 1 1 12rem;
min-width: 8rem;
max-width: 22rem;
padding: .3rem .6rem;
border: 1px solid var(--vrp-line-strong);
border-radius: 7px;
background: var(--vrp-liv2);
color: inherit;
font-size: .92rem;
}
.jb-cerca::placeholder { opacity: .65; }
.jb-trovati[hidden] { display: none; }
.jb-trovati { padding: .2rem 0 .4rem; }
/* Mentre si cerca, l'albero e la griglia si tolgono di mezzo.
⚠️ Con una CLASSE e non con `hidden`: `.vx-layout` e' display:flex e
contro un display esplicito l'attributo hidden non puo' niente (gia'
inciampato due volte sulla scena). */
.vx-layout.jb-via { display: none; }
.jb-trovati__testa {
display: flex;
align-items: center;
gap: .7rem;
flex-wrap: wrap;
padding: .3rem .2rem .6rem;
font-size: .92rem;
opacity: .85;
}
.jb-trovati__chiudi {
margin-left: auto;
border: 1px solid var(--vrp-line-strong);
border-radius: 6px;
padding: .2rem .55rem;
background: transparent;
color: inherit;
cursor: pointer;
font-size: .85rem;
}
.jb-trovati__chiudi:hover { background: var(--vrp-liv3); }
.jb-trovati__tutti { margin: 0 0 .6rem; }
/* Una riga per risultato, non una mattonella: qui conta LEGGERE dove sta il
brano («Martha Argerich / Chopin»), e un nome lungo in una mattonella da
110px sparisce sotto i puntini. */
.jb-trovati__lista {
display: flex;
flex-direction: column;
gap: 4px;
max-height: 52vh;
overflow-y: auto;
}
.jb-trovato {
position: relative;
display: flex;
align-items: center;
gap: .6rem;
padding: .35rem 4.4rem .35rem .4rem; /* spazio a destra per i due tasti */
border: 1px solid var(--vrp-line);
border-radius: 8px;
background: var(--vrp-liv2);
cursor: pointer;
}
.jb-trovato:hover { background: var(--vrp-liv3); }
.jb-trovato__cover {
flex: 0 0 auto;
width: 40px;
height: 40px;
border-radius: 5px;
object-fit: cover;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
background: var(--vrp-liv1);
}
.jb-trovato__testo { min-width: 0; } /* se no i puntini non arrivano mai */
.jb-trovato__nome {
font-size: .95rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.jb-trovato__dove {
font-size: .8rem;
opacity: .65;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* i due tasti della riga: il ▶ in fondo, il ＋ alla sua sinistra - le stesse
posizioni delle mattonelle, cosi' la mano sa gia' dove sono */
.jb-trovato .jb-ora-btn { top: 50%; transform: translateY(-50%); }
@media (max-width: 520px) {
.jb-cerca { flex: 1 1 100%; max-width: none; order: 10; }
}
/* ==== IL ? DELLA TESTATA, E LA GUIDA CHE APRE =======================
vitti, 13/09/2026: *"nel jukebox, le istruzioni occupano molto spazio,
facciamole a scomparsa, o con un bottone di help che apre un popup"*.
Sul telefono le tre righe di istruzioni si mangiavano 85 dei 109 pixel
della testata. Ora la testata e' una riga sola e il resto sta qui dietro.
I colori NON stanno qui: sono le variabili di vrp-livrea.css, la paletta
unica di casa. */
.jb-aiuto {
flex: 0 0 auto;
width: 1.6rem;
height: 1.6rem;
padding: 0;
border: 1px solid var(--vrp-line-strong);
border-radius: 50%;
background: var(--vrp-panel2);
color: var(--vrp-txt);
font: inherit;
font-weight: 700;
line-height: 1;
cursor: pointer;
}
.jb-aiuto:hover {
border-color: var(--vrp-accent);
color: var(--vrp-accent);
}
.jb-guida {
width: min(56ch, 92vw);
max-height: 86dvh;
padding: 1.1rem 1.3rem 1.4rem;
border: 1px solid var(--vrp-line-strong);
border-radius: 12px;
background: var(--vrp-panel);
color: var(--vrp-txt);
overflow: auto;
}
.jb-guida::backdrop { background: rgba(0, 0, 0, .55); }
.jb-guida h2 {
margin: 0 2rem .8rem 0;
font-size: 1.15rem;
}
.jb-guida h3 {
margin: 1.1rem 0 .35rem;
font-size: .95rem;
color: var(--vrp-accent);
}
.jb-guida ul { margin: 0; padding-left: 1.2rem; }
.jb-guida li { margin: .3rem 0; }
.jb-guida p { margin: .3rem 0; }
/* La X: sta nell'angolo e non entra nel flusso, cosi' il titolo non le gira
intorno. E' dentro un