/* LA STRUTTURA della skin — quello che le classi sul vogliono dire. * * Un tema che cambia solo i colori fa quarantasette siti dello stesso colore diverso. Questo è * il resto: dove stanno gli sport, cosa vede il giocatore appena entra, quanto stanno strette le * partite, dove finisce la schedina. * * File a parte, non `tb.css`: quello è dell'altra sessione, e due mani sullo stesso foglio è il * modo di perdere il lavoro di qualcuno. Qui ci sono SOLO gli scostamenti dal default — una * skin che non sceglie niente non paga una riga. * * Tutto passa dai token, mai da colori scritti a mano: così una struttura funziona con * qualunque tavolozza, compresa una che l'operatore inventa domani. */ /* ── L'INTESTAZIONE ────────────────────────────────────────────────────── */ /* Alta: logo grande, menu sotto. Da portale. */ .lay-header-tall .hdr-in { flex-wrap: wrap; padding-block: 14px; row-gap: 10px; } .lay-header-tall .brand { font-size: 1.5em; } .lay-header-tall .nav { order: 3; flex-basis: 100%; padding-top: 10px; border-top: 1px solid var(--primary-border, var(--line)); } /* Centrata: logo al centro, azioni ai lati. Da casinò. */ .lay-header-center .hdr-in { position: relative; justify-content: space-between; } .lay-header-center .brand { position: absolute; left: 50%; transform: translateX(-50%); } .lay-header-center .nav { order: -1; } @media (max-width: 860px) { /* Su mobile il logo centrato si scontra con tutto il resto: torna al suo posto. */ .lay-header-center .brand { position: static; transform: none; } } /* ── GLI SPORT ────────────────────────────────────────────────────────── */ /* Chip in alto: una riga che scorre, invece della colonna. Guadagna tutta la larghezza. */ .lay-rail-chips .cols { grid-template-columns: 1fr auto; } .lay-rail-chips .rail-l { grid-column: 1 / -1; display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; } .lay-rail-chips .rail-l::-webkit-scrollbar { display: none; } .lay-rail-chips .rail-l .card { display: contents; } .lay-rail-chips .rail-l li, .lay-rail-chips .rail-l a { flex: 0 0 auto; white-space: nowrap; } /* Nascosti: chi ha un solo sport non ha bisogno di un elenco di uno. */ .lay-rail-hidden .rail-l { display: none; } .lay-rail-hidden .cols { grid-template-columns: 1fr auto; } /* ── QUANTO STANNO STRETTE LE PARTITE ─────────────────────────────────── */ /* Fitta: il doppio di partite senza scorrere. Un trader di sé stesso le vuole tutte a schermo. */ .lay-density-compact .ev { padding: 8px 10px; } .lay-density-compact .ev + .ev { margin-top: 6px; } .lay-density-compact .ev-h { margin-bottom: 6px; } .lay-density-compact .ev-name { font-size: .95em; } .lay-density-compact .px, .lay-density-compact .oc { padding-block: 7px; } /* ── LE QUOTE PER RIGA ────────────────────────────────────────────────── */ .lay-odds-three .ev-odds { grid-template-columns: repeat(3, 1fr); } .lay-odds-two .ev-odds { grid-template-columns: repeat(2, 1fr); } @media (max-width: 560px) { /* Tre colonne su un telefono sono tre quote illeggibili. Il numero di una quota deve * restare leggibile: è l'unica cosa per cui il giocatore è lì. */ .lay-odds-three .ev-odds { grid-template-columns: repeat(2, 1fr); } } /* ── LA SCHEDINA ──────────────────────────────────────────────────────── */ /* Solo la barra in basso: tutta la larghezza al palinsesto. La barra c'è già (è quella di * mobile) — qui la si tiene anche sul desktop. */ .lay-slip-bar .rail-r { display: none; } .lay-slip-bar .cols { grid-template-columns: auto 1fr; } .lay-slip-bar .slipbar.has { display: flex; } /* ── COSA VEDE APPENA ENTRA ───────────────────────────────────────────── */ .hero { display: none; } .lay-hero-featured .hero.hero-featured, .lay-hero-promo .hero.hero-promo, .lay-hero-carousel .hero.hero-carousel { display: block; } .hero { margin-bottom: 14px; padding: clamp(14px, 3vw, 26px); border-radius: var(--r); background: linear-gradient(135deg, var(--navy-1), var(--navy-2)); border: 1px solid var(--primary-border, var(--line)); } /* La promo: una fascia con l'AZIONE addosso. L'accento è il colore del «gioca», e qui lavora. */ .hero-promo { background: linear-gradient(120deg, var(--btn-primary, var(--or)), var(--or-2)); color: var(--btn-primary-text, var(--on-or)); border-color: transparent; } .hero-promo h2 { margin: 0 0 4px; font-size: clamp(18px, 2.4vw, 26px); } .hero-promo p { margin: 0 0 12px; opacity: .92; } .hero-promo .btn { background: var(--btn-primary-text, var(--on-or)); color: var(--btn-primary-hover, var(--or-d)); font-weight: 700; } /* La partita del giorno: una card grande, con le sue quote vere. Non un'immagine finta. */ .hero-featured .hf-name { font-size: clamp(16px, 2vw, 22px); font-weight: 700; } .hero-featured .hf-when { color: var(--secondary-text, var(--mute)); font-size: .9em; margin-bottom: 12px; } /* Il carosello: scorre a mano, senza JavaScript. Un carosello che gira da solo è un carosello * che porta via il bottone da sotto il dito mentre lo si preme. */ .hero-carousel .hc-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .hero-carousel .hc-track::-webkit-scrollbar { display: none; } .hero-carousel .hc-item { flex: 0 0 min(340px, 84%); scroll-snap-align: start; padding: 16px; border-radius: var(--r-s); background: var(--navy-2); border: 1px solid var(--primary-border, var(--line)); } @media (prefers-reduced-motion: reduce) { .hero-carousel .hc-track { scroll-behavior: auto; } } /* ── IL TASTO CHE APRE E CHIUDE IL COUPON (Dav, 10/08 09:01) ────────────────── *«su studio5 devi aggiungere il tasto in basso per aprire/chiudere la right bar con il coupon. Su timerbet c'è ma su studio5 no»*. 📏 PERCHÉ NON ERA UN TRAVASO: su timerbet quel tasto è del TEMA DEL CLIENTE (cercato in tutto `player_ui/` e negli asset: da noi non esiste), e nel tema di un cliente non si entra. Qui è roba nuova — ma piccola, perché lo stato «chiuso» era già scritto: sono le tre righe di `.lay-slip-bar` qui sopra, che nessuno accendeva. ⛔ E L'ALTRA STRADA, SCARTATA — scritta perché fra due mesi non la si riproponga come idea nuova: bastava offrire `.lay-slip-bar` come opzione della skin nel compositore. Zero codice. Ma è un MODO, non un interruttore: il coupon a destra sparirebbe **per tutti e per sempre** su quella skin. Dav ha chiesto di poterlo aprire e chiudere, e la scelta fissa **toglie una cosa a chi la vuole**. Quando un'opzione fa quello che il cliente ha chiesto e l'altra gli leva qualcosa, non è una questione di gusto. 📌 La classe sta sul `` e la mette lo script, non il server: è una preferenza di CHI GUARDA, non della skin. Perciò non si chiama `lay-` (quelle sono scelte dell'operatore). */ .tb-coupon-off .rail-r { display: none; } /* ⛔ E QUI CI SONO CASCATA IO, e la misura l'ha preso: la prima versione era `grid-template-columns: auto 1fr` — copiata da `.lay-slip-bar` qui sopra. Ma `auto` presuppone che la colonna di SINISTRA esista: su una pagina che non ce l'ha, `auto` se lo prende il PALINSESTO e il feed si stringe a 71px invece di allargarsi. Misurato nel browser, non dedotto. 👉 Si rifanno le due righe di `tb.css` (`.cols:has(> .rail-l)`) tolta la destra: `:has()` guarda il DOM, non la visibilità, quindi la colonna resterebbe riservata anche col coupon nascosto. ⚠️ `.lay-slip-bar` qui sopra ha lo STESSO difetto latente. È inutilizzata, quindi non l'ho toccata — ma chi un giorno la accende trova questo. */ .tb-coupon-off .cols { grid-template-columns: minmax(0, 1fr); } .tb-coupon-off .cols:has(> .rail-l) { grid-template-columns: var(--rail-l-w) minmax(0, 1fr); } .tb-coupon-off .slipbar.has { display: flex; } .tb-slip-sw { position: fixed; inset-block-end: 16px; inset-inline-end: 16px; z-index: 90; display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--primary-border, currentColor); background: var(--navy-1, #16202c); color: inherit; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); } .tb-slip-sw:hover, .tb-slip-sw:focus-visible { border-color: var(--btn-primary, currentColor); } .tb-slip-sw svg { width: 16px; height: 16px; flex: none; } /* quando la barra in basso è visibile il tasto le sta SOPRA, non addosso */ .slipbar.has ~ .tb-slip-sw { inset-block-end: 74px; } /* senza JavaScript il tasto non serve a niente: non si mostra proprio, e il coupon resta aperto — il ripiego è lo stato di oggi, mai un coupon chiuso che non si può riaprire. */ .tb-slip-sw[hidden] { display: none; } /* ── LE COMBINAZIONI dentro il dettaglio della schedina (Dav, 10/08 09:45) ──── *«sì, mettili, perché la schedina può essere lunga»*. ⚠️ NATE PER IL DIALOG, RESTANO SENZA. Alle 09:39 Dav aveva chiesto che la schedina si aprisse in un dialog; alle 13:32 ha annullato («invece del dialog, fai come prima che apre la pagina») e Angelo alle 13:26 aveva detto la stessa cosa. Il dialog è stato tolto — ma le combinazioni no: erano una richiesta a sé, e sulla pagina servono uguale. Toglierle avrebbe portato via una cosa che nessuno ha chiesto di togliere, e che era la differenza vera fra le due viste (101 schedine su 1.057 sono sistemi, la più grande ha 26 combinazioni). */ .bet-comb > .bet-comb-t { cursor: pointer; list-style: none; } .bet-comb > .bet-comb-t::-webkit-details-marker { display: none; } .bet-comb > .bet-comb-t::after { content: "▾"; margin-inline-start: auto; opacity: .6; } .bet-comb[open] > .bet-comb-t::after { content: "▴"; } /* ── I MESSAGGI: si aprono, e si possono togliere dalla propria lista (Stefano 10/08) ── Il messaggio nasce CHIUSO: aprirlo è il gesto che lo marca letto. Prima il corpo era già a schermo e restava solo il bottone «Segna come letto» — cioè uno leggeva davvero e il pallino restava acceso. ⛔ E la scorciatoia opposta («è comparso nella lista, quindi è letto») sarebbe stata peggio: «l'avviso è sparito e non l'ho mai letto». */ .msg > .msg-t { cursor: pointer; list-style: none; } .msg > .msg-t::-webkit-details-marker { display: none; } .msg > .msg-t::after { content: "▾"; margin-inline-start: 8px; opacity: .55; } .msg[open] > .msg-t::after { content: "▴"; } .msg-azioni { display: flex; align-items: center; gap: 8px; margin-block-start: 12px; } .msg-f-cestino { margin-inline-start: auto; } .msg-cestino { padding: 6px 10px; line-height: 1; }