/* color-scheme su :root evita il lampo bianco durante le navigazioni. */ :root { color-scheme: dark light; --bg:#0f1115; --card:#181b22; --testo:#e8eaf0; --tenue:#9aa2b1; --bordo:#272b35; --acc:#4c8dff; --err:#ff6b6b; --ok:#4ade80; } @media (prefers-color-scheme: light) { :root { --bg:#f7f8fa; --card:#fff; --testo:#12141a; --tenue:#5b6270; --bordo:#e2e5ea; } } * { box-sizing: border-box; } html, body { max-width: 100%; overflow-x: hidden; } body { margin:0; padding:16px; background:var(--bg); color:var(--testo); font:16px/1.5 system-ui, -apple-system, sans-serif; padding-bottom: calc(16px + env(safe-area-inset-bottom)); } h1 { font-size:20px; margin:0; } h2 { font-size:16px; color:var(--tenue); margin:0 0 8px; } header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; } input, select, button { font:inherit; min-height:44px; border-radius:10px; } input, select { width:100%; padding:10px 12px; background:var(--card); color:var(--testo); border:1px solid var(--bordo); } button { padding:10px 18px; border:0; background:var(--acc); color:#fff; font-weight:600; } button.ghost { background:transparent; color:var(--acc); border:1px solid var(--bordo); } button:disabled { opacity:.5; } form { display:flex; gap:8px; margin-bottom:8px; } form button { flex:0 0 auto; } .errore { color:var(--err); min-height:1.4em; margin:4px 0; } .errore:empty { margin:0; min-height:0; } /* Colori ESPLICITI per tema: lo sfondo ambrato è fisso, il colore del testo della pagina no — in tema chiaro il testo scuro sull'ambra scura spariva (visto nello screenshot di verifica della scelta video/playlist). */ .avviso { background:#3a2f14; border:1px solid #6b5620; color:#f0e6c8; padding:10px 12px; border-radius:10px; margin-bottom:12px; } @media (prefers-color-scheme: light) { .avviso { background:#fdf3d7; border-color:#e0cd92; color:#5b4a14; } } #scelta-lista p { margin:0 0 8px; } #scelta-lista .azioni { display:flex; gap:8px; flex-wrap:wrap; } #scelta-lista .azioni button { flex:1 1 auto; } #barra-formato { position:sticky; top:0; z-index:5; background:var(--bg); padding:12px 0; border-bottom:1px solid var(--bordo); margin-bottom:12px; } #barra-formato .scelte { display:flex; gap:12px; align-items:center; margin-bottom:8px; flex-wrap:wrap; } #barra-formato .scelte label { display:flex; gap:6px; align-items:center; white-space:nowrap; min-height:44px; } #barra-formato select { width:auto; } #barra-formato .azioni { display:flex; gap:8px; flex-wrap:wrap; } #barra-formato .azioni button { flex:1 1 auto; } /* display SOLO quando non è hidden: un blocco{display:flex} valido sempre batterebbe in specificità [hidden]{display:none} e lo vanificherebbe — visto succedere davvero nello screenshot di verifica (#lista-testa). Vale anche per #ordina-cerca, nato con la stessa struttura. */ #ordina-cerca:not([hidden]) { display:flex; } #ordina-cerca { align-items:center; gap:10px; padding:4px 0 10px; flex-wrap:wrap; } #ordina-cerca #cerca { flex:1 1 220px; min-width:0; } #ordina-cerca .scelte { display:flex; gap:6px; flex-wrap:wrap; } button.ordina { background:transparent; color:var(--tenue); border:1px solid var(--bordo); padding:8px 12px; min-height:36px; font-weight:500; } button.ordina.attivo { background:var(--acc); color:#fff; border-color:var(--acc); font-weight:600; } /* pillola piccola, bordo, testo minuscolo: la piattaforma su ogni riga e «foto» quando non è un video. Un colore SUO per «foto» — non è un errore, è un'informazione in più, non deve leggersi come un avviso. */ .badge { display:inline-block; padding:1px 8px; margin-right:6px; border:1px solid var(--bordo); border-radius:999px; font-size:11px; line-height:1.6; text-transform:lowercase; color:var(--tenue); } .badge.foto { color:var(--acc); border-color:var(--acc); } li .badges { display:block; margin-bottom:2px; } #lista-testa:not([hidden]) { display:flex; } #lista-testa { justify-content:space-between; align-items:center; padding:8px 0; color:var(--tenue); gap:8px; flex-wrap:wrap; } #lista-testa label { display:flex; gap:6px; align-items:center; min-height:44px; } ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; } li { background:var(--card); border:1px solid var(--bordo); border-radius:12px; } /* La riga intera è il bersaglio del tap (>=44px di altezza), non la sola checkbox da 24px: su un telefono e' quella la vera area cliccabile. */ li label.riga-video { display:flex; gap:10px; align-items:center; width:100%; padding:10px; cursor:pointer; min-height:44px; } li img { width:96px; aspect-ratio:16/9; object-fit:cover; border-radius:8px; flex:0 0 auto; } li .meta { flex:1; min-width:0; } li .titolo { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } li .titolo a { color:inherit; text-decoration:underline; text-decoration-color:var(--tenue); text-underline-offset:3px; } li .sotto { color:var(--tenue); font-size:14px; } li input[type=checkbox] { width:24px; height:24px; flex:0 0 auto; } /* flex-wrap: la riga di un job di testo contiene una barra da quattro tasti, ognuno con min-width:7rem (vedi .azioni-testo .btn in fondo): su un telefono senza il wrap i tasti resterebbero sulla stessa riga del titolo e lo schiaccerebbero fino a farlo sparire. Con il wrap la barra scende sotto. */ #job li { padding:10px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; } #job li button { min-width:44px; } #job li button.annulla { color:var(--err); } /* Lo scroll automatico dopo «Prepara» non deve infilare il titolo sotto la barra formato sticky: margine di scroll pari alla sua altezza tipica. */ #sezione-job { scroll-margin-top:120px; } #job li button.scarta { min-width:44px; padding:10px; } #zip-riga { margin-bottom:8px; } #zip-riga button { width:100%; } progress { width:100%; height:8px; } /* stessa specificità di "li .sotto" (elemento+classe): senza il prefisso "li" qui perdevano il confronto di specificità e il colore restava sempre quello tenue — visto succedere davvero nello screenshot di verifica. */ li .stato-error { color:var(--err); } li .stato-ready { color:var(--ok); } dialog { background:var(--card); color:var(--testo); border:1px solid var(--bordo); border-radius:14px; max-width:min(520px, 92vw); /* con una guida aperta il contenuto supera lo schermo del telefono: scrolla il dialog, mai la pagina sotto */ max-height:85dvh; overflow-y:auto; } dialog::backdrop { background:rgba(0,0,0,.6); } .nota { color:var(--tenue); font-size:14px; } /* Selettore di piattaforma in testa al pannello cookie: stessa forma delle altre righe di radio della pagina (barra formato, ordina), qui non annidata sotto nessun altro id quindi serve la sua regola. */ #cookie-piattaforme { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:8px; } #cookie-piattaforme label { display:flex; gap:6px; align-items:center; white-space:nowrap; min-height:44px; } #cookie-stato p { margin:6px 0; } /* Uno slot per piattaforma: quello scelto nel selettore qui sopra si evidenzia, ma tutti e quattro restano leggibili — un cookie morto su una piattaforma non deve sparire dietro quello vivo di un'altra. */ .slot-cookie { border:1px solid var(--bordo); border-radius:10px; padding:8px 12px; margin:8px 0; } .slot-cookie.attivo { border-color:var(--acc); } .azioni-testo { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; } /* Due dei quattro tasti sono (i download .txt/.srt), due sono