/* LA VETRINA DEL CASINÒ DENTRO UN TEMA IMPORTATO — solo la STRUTTURA, mai i colori. * * Angelo, 31/07: «sistema il casinò, attiva i giochi su studio51». Attivati i 3.613 giochi la * pagina è passata da 404 a 200 — e le schede uscivano UNA PER RIGA a schermo intero: pagina * alta 16.824px, un gioco per schermata. * * ⚠️ Le regole per queste classi ESISTONO, in `player/skin_fixes.css`, e sono anche belle. Ma * quel foglio le pagine vestite non lo caricano, e non si può aggiungerlo agli strutturali: * dentro ci sono gradienti, fondi e un bottone «Gioca» dorato: sono SCELTE DI COLORE, e su una * pagina vestita il colore è del tema. Aggiungerlo vorrebbe dire che ogni skin, con qualunque * tema, si ritrova le card blu-navy di casa. * * Quindi qui c'è solo quello che senza rompe: la griglia, la proporzione della card e * l'immagine che la riempie. Nessun `background`, nessun `color`. Una card senza gradiente si * vede benissimo — è l'immagine del gioco a occuparla tutta; una card senza griglia no. * * ⚠️ E il giorno che si vorranno anche i gradienti su un tema preciso, la strada è il CSS di * QUEL tema (`.tb-cg` sta nel contratto delle classi nostre), non questo foglio. */ .tb-cas { box-sizing: border-box; width: 100%; } /* ── LA BARRA: ricerca, tab delle categorie, tipi ── */ .tb-cas-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 10px 0 12px; } .tb-cas-search { flex: 1 1 220px; min-width: 0; } .tb-cas-search input { box-sizing: border-box; width: 100%; } .tb-cas-tabs, .tb-cas-tipi { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; } .tb-cas-tab { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; } /* ── LA GRIGLIA: è la riga che mancava ── `auto-fill` con una misura minima: sei-sette card per riga su un monitor, tre sul telefono, senza che nessuno decida un numero — e senza rompersi quando la colonna centrale del tema è più stretta della nostra. */ .tb-cas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; align-items: start; } @media (max-width: 560px) { .tb-cas-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; } } /* ── LA CARD: la proporzione e l'immagine che la riempie ── `aspect-ratio` è ciò che tiene la card alta quanto deve: senza, l'altezza la decideva l'immagine alla sua misura naturale — ed è così che una pagina diventa alta 16.824px. */ .tb-cg { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; text-decoration: none; } .tb-cg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 1; } .tb-cg-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2.4em; font-weight: 900; } .tb-cg-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; gap: 5px; padding: 22px 8px 7px; } /* il nome sta su due righe e poi taglia: i nomi dei giochi arrivano lunghissimi dal fornitore e senza questo la card si allunga o il testo esce dal bordo. */ .tb-cg-name { font-size: .8em; font-weight: 700; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-height: 2.3em; } .tb-cg-play { align-self: flex-start; font-size: .68em; font-weight: 800; padding: 4px 10px; border-radius: 7px; } /* ── il fondo della vetrina ── */ .tb-cas-empty { padding: 30px 12px; text-align: center; } .tb-cas-more { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px 0 6px; } .tb-cas-more[hidden] { display: none; } /* ═══════════════════════════════════════════════════════════════════════════ LE BARRE DELLA VETRINA — provider, gruppi, cerca, viste (Dav, 03/08 21:19) Sta qui e non nella pagina perché l'ha chiesto lui: «non hardcodare codice nella pagina ma in caso aggiungilo in un css separato». Questo foglio è già fra i FOGLI_STRUTTURALI, quindi arriva su ogni skin — vestita o no — ed è l'unico posto in cui queste classi esistono. ⚠️ STESSA REGOLA DEL RESTO DEL FILE: solo STRUTTURA, mai colori. Niente `background`, niente `color`: su una pagina vestita il colore è del tema, e un chip blu-navy di casa in mezzo al design di un cliente è il difetto delle «due cornici di studio5». Qui c'è quello che senza rompe — la fila che scorre, la spaziatura, la griglia che cambia forma. ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ LA COLONNA A SINISTRA — la strada A di Jesper (09/08 16:55: «vai con la A») 🔴 IL DIFETTO, col numero, misurato sulla skin 150 prima di toccare niente: a 1440 il primo gioco a y=730 su una finestra di 900 a 390 il primo gioco a y=2709 su una finestra di 844 ← tre schermate e mezza Cinquanta riquadri fornitore larghi quanto la pagina, prima di un gioco. Sul telefono era il difetto vero, ed e' li' che si misura il rimedio. ⛔ QUESTE REGOLE NON POSSONO TOCCARE TIMERBET, e non e' una speranza: `.cb-lay`, `.cb-col` e `.cb-giochi` esistono SOLO in `player/casino.html`, cioe' nel ramo che prende una skin SENZA tema importato (57 su 58). Su una pagina vestita quelle classi non compaiono e le regole sono inerti — anche se questo foglio, essendo STRUTTURALE, arriva su ogni skin. ⚠️ Per la stessa ragione qui NON si tocca `.tb-cg` ne' `.tb-cas-grid`: quelle sono condivise con la lobby vestita, e cambiarle entrerebbe nel disegno di un cliente. 📌 E come sempre in questo foglio: solo STRUTTURA, mai colori. ═══════════════════════════════════════════════════════════════════════════ */ .cb-lay{display:block} .cb-col{display:flex;flex-direction:column;gap:10px;min-width:0} .cb-col-gruppo{display:flex;flex-direction:column;gap:4px} .cb-col-tit{display:flex;align-items:center;justify-content:space-between;gap:8px; padding:6px 2px 2px;font-size:12px;font-weight:800;letter-spacing:.04em; text-transform:uppercase;opacity:.75} .cb-col-tutti{font-size:11px;font-weight:600;text-transform:none;letter-spacing:0; text-decoration:underline;opacity:.85} /* ── LA COLONNA A DUE COLONNE (Jesper, 10/08 07:27, con lo scatto di Timerbet) ───────────────── Il secondo messaggio ha cambiato il bersaglio: non erano «i loghi due per riga», era **tutta la colonna a due colonne** — riquadri, categorie e provider. Fare solo i loghi sarebbe stata meta' della richiesta, e la meta' che si vede meno. 👉 E qui il 287px trova la sua ragione: e' la larghezza che serve perche' DUE riquadri ci stiano dentro. Non era un numero a caso, e infatti non si negozia — se due non tornano, il posto dove guardare sono i margini interni, non la larghezza. 📌 Solo STRUTTURA, come tutto questo foglio: la sottolineatura della voce attiva e' in `currentColor`, cioe' prende il colore del tema. Nello scatto e' azzurra perche' e' azzurro il tema di Timerbet — copiare quell'azzurro qui vorrebbe dire entrare nel disegno di 57 skin. */ .cb-col-lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; align-content:start} .cb-voce{position:relative;display:flex;align-items:center;justify-content:center;gap:5px; padding:9px 8px;border-radius:8px; text-decoration:none;border:1px solid currentColor;font-size:13.5px;line-height:1.2; opacity:.8;min-width:0;text-align:center;overflow-wrap:anywhere} /* ⛔ Il conteggio NON e' piu' spinto a destra (`margin-inline-start:auto`): in un riquadro stretto e centrato quel margine lo staccava dal nome e lo appiccicava al bordo. Adesso sta accanto, con un filo d'aria — 5px: nello scatto di Timerbet «Tutte405» e «Live403» sono incollati, ma quello e' il loro prodotto di adesso, non necessariamente cio' che Jesper vuole qui. Se lo vuole incollato e' un `gap:0`, ed e' una riga. */ .cb-voce small{margin-inline-start:0;opacity:.7;font-size:.85em} .cb-voce.on{opacity:1;font-weight:700} /* La voce attiva si riconosce dalla SOTTOLINEATURA in basso, come nello scatto: e' piu' leggibile del solo bordo, che a due colonne si confonde con quello delle sorelle. */ .cb-voce.on::after{content:"";position:absolute;inset-inline:20%;bottom:-1px;height:2px; background:currentColor;border-radius:2px} .cb-col-voce{display:block;padding:8px 10px;border-radius:8px;border:1px solid currentColor; text-decoration:none;font-size:13.5px;font-weight:700} /* I provider sono tanti (cinquanta sulla 150): scorrono DENTRO il loro riquadro invece di allungare la colonna. E' la riga che tiene i giochi dove sono. */ .cb-col-lista--prov{max-height:340px;overflow-y:auto;overscroll-behavior:contain} /* ⛔ QUI AVEVO SCRITTO UN DIFETTO, e lo scatto l'ha mostrato. Avevo rimpicciolito il logo nella colonna (`width:104px;background-size:1040px 1625px`) per farlo stare piu' comodo. Ma le `background-position` dei ~50 provider sono calcolate sullo sprite NATIVO 1280x2000: scalare lo sfondo senza ricalcolarle ritaglia il pezzo sbagliato di immagine, e in pagina uscivano loghi tagliati e sovrapposti. 👉 Il logo resta alla sua misura nativa (128x48) e la colonna e' larga abbastanza. E' la stessa lezione dei 38 riquadri vuoti del 04/08: una classe si puo' usare dove i suoi numeri non valgono, e il template non se ne lamenta — lo dice solo la foto. */ .cb-voce--prov{padding-block:4px} /* ── L'INTERRUTTORE, che e' una casella di spunta e non uno script ── Sotto i 900px la colonna nasce CHIUSA: i giochi sono la prima cosa che si vede, che e' esattamente la richiesta. Sopra, sta sempre aperta e il bottone sparisce. Senza JavaScript funziona identico — e' il motivo per cui non e' uno script. */ .cb-sw-lbl{display:inline-flex;align-items:center;gap:6px;margin-block-end:10px; padding:8px 14px;border-radius:999px;border:1px solid currentColor; font-size:13px;font-weight:700;cursor:pointer;user-select:none} .cb-sw-chiudi{display:none} .cb-sw:checked ~ .cb-lay .cb-sw-apri{display:none} .cb-sw:checked ~ .cb-lay .cb-sw-chiudi{display:inline} @media (max-width:899px){ .cb-col{display:none} .cb-sw:checked ~ .cb-lay .cb-col{display:flex;margin-block-end:12px} /* aperta sul telefono la lista dei provider non deve mangiarsi lo schermo lei */ .cb-col-lista--prov{max-height:260px} } @media (min-width:900px){ .cb-sw-lbl{display:none} /* 🔴 287px — LA MISURA E' DI JESPER (10/08 07:25), e si scrive 287 esatti: e' un numero suo, probabilmente allineato a qualcosa che da qui non si vede, e arrotondarlo a «circa 290» vorrebbe dire rispondere a una domanda diversa da quella che ha fatto. ⛔ `.cb-giochi` NON si tocca: e' la seconda colonna `minmax(0,1fr)`, quindi si restringe da sola dei 57px che la colonna guadagna. Dargli una larghezza esplicita creerebbe due numeri che devono restare d'accordo — e prima o poi non lo sono piu'. */ .cb-lay{display:grid;grid-template-columns:287px minmax(0,1fr);gap:16px;align-items:start} .cb-col{position:sticky;top:8px;max-height:calc(100vh - 16px);overflow-y:auto; overscroll-behavior:contain} } /* ── I LOGHI DEI PROVIDER, DUE PER RIGA (Jesper, 10/08) ─────────────────────── La lista era una colonna: un logo per riga, e 50 provider facevano una striscia lunghissima dentro il suo riquadro. Due per riga la dimezzano. 📏 IL CONTO, perche' 287 non e' un numero a caso una volta che i loghi sono due: 287 la colonna -15 la barra di scorrimento della lista (`overflow-y:auto`, sta DENTRO la larghezza) --- 272 utili -8 il vuoto fra le due colonne --- 264 per due loghi → 132 a testa, e il logo nativo ne occupa 128. Ci sta, con 4 di aria. ⛔ E IL LOGO NON SI RIMPICCIOLISCE, mai: le `background-position` dei ~50 provider sono calcolate sullo sprite NATIVO 1280x2000 (`.cb-logo`, box 128x48). Scalarlo ritaglia il pezzo sbagliato — e' il difetto gia' preso in faccia il 05/08, scritto venti righe piu' su. Percio' qui si toglie il PADDING attorno al logo, non si tocca il logo: ed e' esattamente quello che Jesper aveva previsto — «cb-voce cb-voce--prov verra' piu' piccola». 📌 E il conteggio va SOTTO, non di fianco: a 128px il numero non ci sta accanto al logo, e toglierlo non era un'opzione — «Pragmatic Play 80» senza l'80 e' una voce che dice meno di prima. Impilato si legge e non ruba larghezza. */ /* La griglia a due ora e' della BASE `.cb-col-lista` (categorie e provider insieme): qui resta solo cio' che e' proprio dei provider — l'altezza massima con lo scorrimento. */ .cb-voce--prov{flex-direction:column;justify-content:center;gap:2px; padding-block:6px;padding-inline:0;text-align:center;min-width:0} /* il conteggio non e' piu' spinto a destra dal `margin-inline-start:auto` di `.cb-voce small`: in colonna quel margine lo staccherebbe dal logo invece di allinearlo. */ .cb-voce--prov small{margin-inline-start:0} /* Chi non ha il logo mostra il nome: dentro 132px deve andare a capo invece di sfondare. */ .cb-voce--prov span:not(.sr-only){overflow-wrap:anywhere;line-height:1.15} .cb-giochi{min-width:0} .cb{display:flex;flex-direction:column;gap:8px;margin-block-end:12px} /* Le due barre scorrono in orizzontale invece di andare a capo: con 30 provider una fila che va a capo diventa un muro alto mezzo schermo, e i giochi finiscono sotto la piega. */ .cb-barra{display:flex;gap:6px;overflow-x:auto;overflow-y:hidden; scrollbar-width:none;-webkit-overflow-scrolling:touch} .cb-barra::-webkit-scrollbar{display:none} .cb-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px; padding:6px 12px;border-radius:999px;text-decoration:none; border:1px solid currentColor;font-size:13px;line-height:1.2;opacity:.72} .cb-chip.on{opacity:1;font-weight:700} .cb-chip small{opacity:.7;font-size:.85em} /* ⛔ `.cb-logo` è stata TOLTA il 04/08: disegnava un riquadro vuoto su ogni provider, perché lo sprite dei loghi vive dentro il tema importato e queste skin non ce l'hanno. Se un domani lo sprite arriva anche qui, la regola torna — ma insieme al file, non da sola. */ .cb-cerca{display:flex;gap:6px} .cb-cerca-in{flex:1;min-width:0;padding:7px 12px;border-radius:999px; border:1px solid currentColor;background:transparent;color:inherit;font-size:14px} .cb-cerca-go{flex:none;padding:7px 14px;border-radius:999px;border:1px solid currentColor; background:transparent;color:inherit;cursor:pointer;font-size:13px} .cb-viste{display:flex;gap:4px;align-self:flex-end} .cb-vista{width:32px;height:32px;border-radius:8px;border:1px solid currentColor; background:transparent;color:inherit;cursor:pointer;opacity:.6;font-size:15px;line-height:1} .cb-vista.on{opacity:1} /* LA VISTA A ELENCO: la stessa griglia, una colonna sola e le card basse — più giochi a schermo per chi cerca un titolo invece di guardare le figure. Non è un secondo markup: è la stessa griglia con una classe sopra. */ /* 🔑 DUE GRIGLIE, UNA REGOLA (05/08). Le due lobby hanno il contenitore con due nomi diversi — `.casino-grid` quella di ripiego, `.tb-cas-grid` quella vestita — ma le CARD dentro sono le stesse (`.tb-cg`). Scrivere due blocchi uguali con un selettore diverso è il modo in cui due pagine che «fanno la stessa cosa» cominciano a non farla più: si elencano i due contenitori davanti alla stessa regola, e chi ne aggiunge un terzo lo aggiunge qui. */ .casino-grid.is-elenco, .tb-cas-grid.is-elenco{grid-template-columns:1fr} .casino-grid.is-elenco .tb-cg, .tb-cas-grid.is-elenco .tb-cg{aspect-ratio:auto;min-height:56px; display:flex;align-items:center;gap:10px;padding:6px} .casino-grid.is-elenco .tb-cg-img, .tb-cas-grid.is-elenco .tb-cg-img{width:56px;height:56px;object-fit:cover;position:static;flex:none} .casino-grid.is-elenco .tb-cg-foot, .tb-cas-grid.is-elenco .tb-cg-foot{position:static;flex:1;min-width:0;text-align:start} /* Il segnaposto della lobby vestita (la lettera del gioco) è posizionato in assoluto: a elenco deve stare nella riga come l'immagine, o la card si accartoccia. */ .tb-cas-grid.is-elenco .tb-cg-ph{position:static;width:56px;height:56px;flex:none; display:flex;align-items:center;justify-content:center} /* Il margine dei due blocchi della vetrina, che stava in linea nella pagina (Dav: niente stile nella pagina). Una classe, non un attributo: si cambia in un posto per tutte le skin. */ .cas-blocco{margin-block-end:12px} /* «Mostra altri giochi»: lo accende lo script, quindi senza JavaScript non compare — meglio niente che un comando che non risponde. In attesa resta cliccabile ma si spegne un po', così si vede che sta lavorando senza saltare la pagina. */ .cb-altri{display:block;width:100%;margin-block-start:10px;padding:10px 14px; border-radius:999px;border:1px solid currentColor;background:transparent; color:inherit;cursor:pointer;font-size:14px} .cb-altri--attesa{opacity:.5;pointer-events:none} /* ⛔ `[hidden]` DEVE VINCERE, e senza questa riga non vinceva: `display:block` qui sopra batte il `display:none` che il browser dà a `[hidden]`, quindi un bottone marcato nascosto restava a schermo. Due conseguenze vere, misurate su tutt'e due i rami (casa e betslot): · finiti i giochi lo script fa `altri.hidden = true` → il bottone resta lì e chi lo preme non ottiene niente, che è il difetto da cui veniamo tutto il giorno; · senza JavaScript il template lo rende già `hidden` («meglio niente che un comando che non risponde», scritto in `casino.html`) — e quella promessa non era mantenuta. 📌 w-arcanus aveva visto lo stesso incidente dal lato dell'ACCENSIONE e l'ha risolto nello script (`altri.hidden = false`, 9d789b675). Questa è l'altra metà: lo SPEGNIMENTO. */ .cb-altri[hidden]{display:none} /* LO SLIDER DELLA VETRINA: solo la forma, mai i colori (la regola di questo foglio). Una diapositiva per volta, le altre spente; senza JavaScript resta la prima — che è un banner, e un banner fermo è meglio di una pila di immagini una sotto l'altra. */ .cb-slider{position:relative;overflow:hidden;border-radius:8px} .cb-slide{display:block} .cb-slide img{display:block;width:100%;height:auto} .cb-slide--off{display:none} /* ⤵︎ LOGHI PROVIDER — blocco GENERATO da `costruisci_loghi_provider`. Non a mano. */ /* Un foglio solo, ritagliato: il logo si accende SOLO se la pagina trova lo slug in `casino_svc/loghi_provider.py`, che nasce dallo stesso giro di queste regole. Il nome del provider resta SEMPRE nel markup: il logo lo affianca, non lo sostituisce — chi legge con la voce, o chi il foglio non lo scarica, legge il nome. */ /* Nessun colore qui: questo foglio è STRUTTURALE e su una pagina vestita vincerebbe sul tema del cliente. Il fondo scuro che serve ai marchi bianchi è cotto dentro il PNG, dove è parte dell'immagine e non una scelta di stile. */ .cb-logo{display:block;width:110px;height:44px;flex:none;border-radius:6px;background-repeat:no-repeat;background-size:110px 1672px;background-image:url("iconpack/provider/loghi-dark.784eb8e23730.png")} /* Nella barra il logo sta dentro una pastiglia: si rimpicciolisce tutto insieme, foglio compreso, così resta nitido invece di sgranarsi. */ .cb-chip .cb-logo{width:55px;height:22px;background-size:55px 836px} .cb-logo--1x2{background-position:0 -0px} .cb-chip .cb-logo--1x2{background-position:0 -0px} .cb-logo--amatic{background-position:0 -44px} .cb-chip .cb-logo--amatic{background-position:0 -22px} .cb-logo--aristocrat{background-position:0 -88px} .cb-chip .cb-logo--aristocrat{background-position:0 -44px} .cb-logo--aviator{background-position:0 -132px} .cb-chip .cb-logo--aviator{background-position:0 -66px} .cb-logo--betsoft{background-position:0 -176px} .cb-chip .cb-logo--betsoft{background-position:0 -88px} .cb-logo--bgaming{background-position:0 -220px} .cb-chip .cb-logo--bgaming{background-position:0 -110px} .cb-logo--blueprint{background-position:0 -264px} .cb-chip .cb-logo--blueprint{background-position:0 -132px} .cb-logo--bomba{background-position:0 -308px} .cb-chip .cb-logo--bomba{background-position:0 -154px} .cb-logo--booongo{background-position:0 -352px} .cb-chip .cb-logo--booongo{background-position:0 -176px} .cb-logo--btg{background-position:0 -396px} .cb-chip .cb-logo--btg{background-position:0 -198px} .cb-logo--egt{background-position:0 -440px} .cb-chip .cb-logo--egt{background-position:0 -220px} .cb-logo--evoplay{background-position:0 -484px} .cb-chip .cb-logo--evoplay{background-position:0 -242px} .cb-logo--gaminator{background-position:0 -528px} .cb-chip .cb-logo--gaminator{background-position:0 -264px} .cb-logo--goldenrace{background-position:0 -572px} .cb-chip .cb-logo--goldenrace{background-position:0 -286px} .cb-logo--greentube{background-position:0 -616px} .cb-chip .cb-logo--greentube{background-position:0 -308px} .cb-logo--habanero{background-position:0 -660px} .cb-chip .cb-logo--habanero{background-position:0 -330px} .cb-logo--igrosoft{background-position:0 -704px} .cb-chip .cb-logo--igrosoft{background-position:0 -352px} .cb-logo--igt{background-position:0 -748px} .cb-chip .cb-logo--igt{background-position:0 -374px} .cb-logo--irondog{background-position:0 -792px} .cb-chip .cb-logo--irondog{background-position:0 -396px} .cb-logo--isoftbet{background-position:0 -836px} .cb-chip .cb-logo--isoftbet{background-position:0 -418px} .cb-logo--leap{background-position:0 -880px} .cb-chip .cb-logo--leap{background-position:0 -440px} .cb-logo--merkur{background-position:0 -924px} .cb-chip .cb-logo--merkur{background-position:0 -462px} .cb-logo--netent{background-position:0 -968px} .cb-chip .cb-logo--netent{background-position:0 -484px} .cb-logo--novomatic{background-position:0 -1012px} .cb-chip .cb-logo--novomatic{background-position:0 -506px} .cb-logo--octavian{background-position:0 -1056px} .cb-chip .cb-logo--octavian{background-position:0 -528px} .cb-logo--platipus{background-position:0 -1100px} .cb-chip .cb-logo--platipus{background-position:0 -550px} .cb-logo--playngo{background-position:0 -1144px} .cb-chip .cb-logo--playngo{background-position:0 -572px} .cb-logo--playson{background-position:0 -1188px} .cb-chip .cb-logo--playson{background-position:0 -594px} .cb-logo--playtech{background-position:0 -1232px} .cb-chip .cb-logo--playtech{background-position:0 -616px} .cb-logo--pragmatic{background-position:0 -1276px} .cb-chip .cb-logo--pragmatic{background-position:0 -638px} .cb-logo--pragmaticplaylive{background-position:0 -1320px} .cb-chip .cb-logo--pragmaticplaylive{background-position:0 -660px} .cb-logo--quickspin{background-position:0 -1364px} .cb-chip .cb-logo--quickspin{background-position:0 -682px} .cb-logo--redrake{background-position:0 -1408px} .cb-chip .cb-logo--redrake{background-position:0 -704px} .cb-logo--redtiger{background-position:0 -1452px} .cb-chip .cb-logo--redtiger{background-position:0 -726px} .cb-logo--skywind{background-position:0 -1496px} .cb-chip .cb-logo--skywind{background-position:0 -748px} .cb-logo--spaceman{background-position:0 -1540px} .cb-chip .cb-logo--spaceman{background-position:0 -770px} .cb-logo--spinomenal{background-position:0 -1584px} .cb-chip .cb-logo--spinomenal{background-position:0 -792px} .cb-logo--yggdrasil{background-position:0 -1628px} .cb-chip .cb-logo--yggdrasil{background-position:0 -814px} /* ⤴︎ fine del blocco generato dei loghi provider. */ /* ── L'ICONA DELLA CATEGORIA (Jesper 10/08) ─────────────────────────────────── Il glifo lo porta il font di Jesper; qui c'e' il POSTO che occupa e la forma neutra del ripiego, che deve dire «categoria senza icona» senza dire «guasto»: un cerchietto vuoto della stessa famiglia, non un quadratino. 📌 `aria-hidden` sull'icona: il nome della categoria e' li' accanto ed e' quello che si legge. */ .cat-ico{flex:none;width:18px;height:18px;display:inline-flex;align-items:center; justify-content:center;font-size:16px;line-height:1;opacity:.85} .cat-ico--generica{border:1.5px solid currentColor;border-radius:50%;width:13px;height:13px; opacity:.45} /* ── IL FONT DELLE ICONE — e la cosa da sapere: NON ci mancava ──────────────── Lo zip che Jesper ha mandato alle 08:33 contiene `fontNEW.css` + `Linearicons-Free.*`, e il font delle icone non c'e'; alle 11:04 ha aggiunto «non ho il woff2». Ma il file NON serviva chiederglielo: `icomoon.ttf` sta nel nostro albero dal 07/08, dentro lo specchio del sito legacy, ed e' lo STESSO build — non uno somigliante. La prova non e' che i codici esistono (due font qualunque possono avere un glifo a \e958): e' che lo specchio porta anche il CSS che li ASSEGNA, `sass3/style-prematch3.css`, con le stesse classi `.icon-casino-filter-*` e gli stessi codici che ha mandato lui — \e939 sul filtro 0, \e958 sul 16, \e95f sull'11, \e94f sul 21, \e94c sul 22, \e945 sul -1, \e953 sul 20. Sette su sette. 👁 E li ho GUARDATI, non solo contati: griglia, slot machine, joypad, gettoni, ruota della fortuna, stella, tavolo da roulette. Un codice presente nella mappa non dice che disegno sia. ⛔ Percorso: si serve dallo specchio, come gia' fa `tb.css` per Gilroy — stessa cartella, stesso `../playersite/…`. Copiarlo in `player/fonts/` avrebbe fatto due copie dello stesso font, e fra sei mesi una delle due sarebbe stata quella sbagliata. ✅ E ALLE 11:04 IL PACCHETTO E' ARRIVATO («non ho il woff2, ti passo tutti i font che usiamo»): dentro c'e' `fonts/icomoon.ttf`, ed e' il NOSTRO byte per byte — sha256 6250b9e4…aab3fa su tutt'e due. Non «lo stesso build»: lo stesso file. ⚠️ E nello stesso zip ce n'e' un SECONDO che si chiama identico, dentro una cartella che si chiama pure `icomoon/` — `fonts/icomoon/fonts/icomoon.ttf`, 4 KB invece di 94. Sembra il posto piu' ovvio dove cercarlo ed e' quello sbagliato: ha 13 glifi e **nessuno** degli otto nostri. Chi un domani rifa' questo lavoro dallo zip prenda quello SCIOLTO nella radice di `fonts/`. ⛔ NIENTE eot/svg: il `@font-face` legacy li elenca, nello specchio non ci sono, e un `src` che nomina file inesistenti e' un 404 a ogni pagina. Restano due voci, e tutt'e due esistono. 📌 IL WOFF2 L'ABBIAMO GENERATO NOI, e va detto perche' NON e' un file di Jesper: nasce da quel `icomoon.ttf` (sha256 qui sopra) con fontTools 4.63, ed e' una conversione — stessi 130 glifi, stessi disegno per disegno, nessuno perso e nessuno inventato, verificato riaprendolo. 94.740 byte → 48.824, il 49% in meno su ogni pagina del casino'. La prova `test_il_woff2_nasce_da_QUEL_ttf` tiene legate le due cose: se il .ttf cambia, diventa rossa e dice di rigenerarlo, invece di lasciar servire un woff2 che non corrisponde piu'. ⛔ Famiglia `tb_icone`, NON `ctm_icons`: nello specchio quel nome e' gia' preso da un `@font-face` che punta a quattro file che qui non esistono. Stesso nome, due dichiarazioni, e chi legge non sa piu' quale vince. ⛔ `font-display:block` e non `swap`: con `swap` il browser disegna subito il carattere di ripiego, e per un font di ICONE quel ripiego e' il tofu ▯ — un quadratino a fianco di ogni voce, che e' esattamente la cosa che il ripiego generico esiste per evitare. */ @font-face{ font-family:'tb_icone'; /* il woff2 e' NOSTRO (generato dal ttf qui sotto), il ttf e' l'originale di Jesper: la provenienza si legge dal percorso, senza dover aprire un registro. Il woff2 per primo — chi lo sa leggere si ferma li' e non scarica i 94 KB; a chi non lo sa leggere resta il ttf. */ src:url("fonts/icomoon.464ab20ef7d2.woff2") format("woff2"), url("../playersite/assets/global.cdn000.net/css/new/fonts/icomoon.faa8152924ab.ttf") format("truetype"); font-weight:normal;font-style:normal;font-display:block; } .cat-ico[class*="cat-ico--"]:not(.cat-ico--generica)::before{ font-family:'tb_icone';speak:none;font-style:normal;font-weight:normal;font-variant:normal; text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; content:var(--cat-glifo); } /* I codici sono di Jesper (08:33), copiati e non scelti. Il nome della classe e' la parola che ha usato lui — «slot», «virtual», «crash», «mini» — non un numero: `.icon-casino-filter-16` del legacy e' l'id di categoria del VECCHIO sistema, e qui varrebbe come una data sbagliata. */ .cat-ico--tutti{--cat-glifo:"\e939"} .cat-ico--slot{--cat-glifo:"\e958"} .cat-ico--virtual{--cat-glifo:"\e95f"} .cat-ico--crash{--cat-glifo:"\e94f"} .cat-ico--mini{--cat-glifo:"\e94c"} /* «instant» arrivata per ultima (14:00), e il codice si conferma da solo: nel CSS legacy \e951 e' la classe `.icon-casino-filter-lblInstantWin`. Il nome del glifo dice «instant win». */ .cat-ico--instant{--cat-glifo:"\e951"} /* Le ULTIME DUE (Jesper, 18:49 e 18:51) — ed erano esattamente le due che la sorveglianza aveva segnalato nel registro («la categoria «live» non ha un'icona… chiedere a Jesper quale glifo»). Il giro si chiude come era stato disegnato: il codice se ne accorge, lo dice, e la risposta arriva. ⚠️ E su `\e944` la controprova dei NOMI avrebbe dato un falso allarme: nel CSS legacy quel glifo è `.icon-casino-filter-lblDragonTiger`, che con l'ippica non c'entra niente. Ma il DISEGNO è una testa di cavallo — guardato a schermo prima di metterlo. Il nome della classe legacy mente, il glifo no: e' la ragione per cui questi si guardano e non si contano. */ .cat-ico--live{--cat-glifo:"\e94a"} .cat-ico--ippica{--cat-glifo:"\e944"} /* «per il futuro se escono» (Jesper, 08:33): pronte, e oggi nessuna categoria le chiede. Restano qui perche' il giorno che una esce bastera' la riga in `_CAT_ICONE`, senza ricercare il codice in una chat di un mese fa. */ .cat-ico--consigliati{--cat-glifo:"\e945"} .cat-ico--megaways{--cat-glifo:"\e953"} /* ── SOLO LA GRIGLIA SCORRE, CERCA E FILTRI RESTANO A VISTA (Jesper, 10/08 09:55 e 10:14) ── *«cerca e filtri restano SEMPRE A VISTA e sotto scorrono solo i giochi»*. ⚠️ SOLO DA 900px IN SU, ed e' una scelta, non una dimenticanza. Su schermo stretto una zona che scorre dentro una che non scorre e' una trappola: il dito prende la cosa sbagliata, e per uscire dal riquadro bisogna indovinare dove appoggiarlo. Sul telefono scorre la pagina, come adesso — che li' e' anche il gesto giusto, perche' la testata sparisce e i giochi si prendono tutto lo schermo. ⛔ E `max-height`, MAI `height`: con tre risultati un'altezza fissa lascerebbe un riquadro mezzo vuoto — e succederebbe proprio mentre uno cerca, cioe' nel momento peggiore. Con `max-height` la griglia e' alta quanto i giochi che ha, e scorre solo quando serve. 📌 `overscroll-behavior: contain`: arrivato in fondo alla griglia, la rotella non prosegue trascinando la pagina — e' la stessa riga che questo foglio usa gia' per la lista dei provider, che e' proprio il comportamento a cui Jesper si e' riferito. */ @media (min-width:900px){ .cb-giochi .cas-blocco{display:flex;flex-direction:column;min-height:0} .cb-giochi .casino-grid{ max-height:calc(100vh - var(--cb-testa, 210px)); overflow-y:auto;overscroll-behavior:contain; padding-inline-end:4px; /* la barra di scorrimento non si mangia l'ultima colonna */ } .cb-giochi .casino-grid::-webkit-scrollbar{width:8px} } /* Il messaggio di «non ho trovato niente»: e' una FRASE, non un riquadro vuoto che sembra un caricamento che non finisce. Vale mentre si scrive, che e' quando capita piu' spesso. */ .cb-vuoto{padding:28px 12px;text-align:center;line-height:1.5} .cb-vuoto b{display:block;font-size:15px;margin-block-end:4px} .cb-vuoto span{opacity:.75;font-size:13px} /* mentre la ricerca e' in volo la griglia si smorza: dice «sto lavorando» senza spostare niente */ .casino-grid.cb-cerca-attesa{opacity:.55;transition:opacity .12s}