/* Famiglia «betslot» — SOLO L'IMPAGINAZIONE della vetrina casinò. * * ⛔ Non è il foglio del mirror. Quello sono 117 KB, 807 selettori e 28 variabili con nomi loro * (`--active`, `--coupon`, `--ctm`): importarlo vorrebbe dire due alfabeti sulla stessa pagina, * e un conflitto che non si chiude più. Qui ci sono le poche regole che cambiano la DISPOSIZIONE. * * 📌 NESSUN COLORE SCRITTO A MANO: tutto viene dai token del preset della skin (`--navy-*`, * `--ink`, `--line`, `--mute`, `--or`). È la condizione perché due skin con preset diversi * cambino colore e NON impaginazione — che è una delle prove di accettazione della tappa. * * ⚠️ Le card NON si vestono qui: `.tb-cg` è il markup condiviso e il suo aspetto sta in `tb.css`. * Se lo si rivestisse in questo foglio, la prima pagina (disegnata dal template) e le successive * (che arrivano dall'endpoint) potrebbero divergere — e la differenza si vedrebbe solo scrollando. */ /* 📏 LA LARGHEZZA DELLA CORNICE — MISURATA, e finalmente scritta UNA volta sola. * * Il mirror la tiene in `.grid { max-width: 1360px; margin: 0 auto }`, ed è il contenitore di * TUTTE le fasce: barra strumenti, testata, menu, piede. Verificato sul mirror renderizzato col * suo foglio vero: a 1440 il margine sinistro è 40 = (1440 − 1360) / 2. * * 🔴 IO AVEVO MESSO 1440 A OCCHIO, e il difetto non era il numero: era che `--bs-larghezza` non * la definiva NESSUNO. Le cinque fasce leggevano tutte il valore di ripiego scritto nel loro * `var(..., 1440px)` — cinque copie dello stesso numero indovinato, in cinque punti del file. * Cambiarlo voleva dire cambiarlo cinque volte, e chi ne dimenticava una si ritrovava una fascia * più larga delle altre: uno scalino, che è esattamente il difetto che il commento del piede qui * sotto mette in guardia di non fare. * * 👉 Definendola qui, i `var(..., 1440px)` restano come sono e diventano ripieghi morti: la * variabile vince sempre. È anche il motivo per cui questa riga NON tocca le regole del piede, * che sono di w-lane6 — il piede si allinea da solo perché legge la stessa variabile. * * ⚠️ MA I 1360 OGGI NON SI VEDONO DAPPERTUTTO, e va detto o il prossimo li rimisura invano. * Qui è un `max-width`, e casa fissa la LARGHEZZA: `.shell { width: min(1320px, 100%) }` (tb.css). * Un `max-width` più grande non alza una `width` più piccola — quindi sulle pagine normali le * fasce escono a **1320**, e il 1360 lavora solo da TETTO. Misurato: `/player/promozioni` 1320, * `/player/casino` 1360 (lì il foglio della skin allarga lo shell e il tetto morde). * * ⛔ E NON L'HO FORZATO con una `width` mia, che sarebbe stata una riga sola: la cornice sarebbe * andata a 1360 e il CONTENUTO sarebbe rimasto a 1320, cioè 20px di scalino per lato fra la * testata e la pagina sotto. Nel mirror non c'è nessuno scalino perché lì 1360 è la misura di * TUTTI E DUE. Per averla anche da noi va portato a 1360 anche `main.shell`, e solo per questa * famiglia: oggi non si può, perché il `` non porta nessuna classe che dica «betslot» * (`base.html` di casa scrive `{{ skin_body }} {{ body_page }}`, e sono le opzioni di layout). * 👉 Decisione per il PM: o si aggiunge quella classe e la famiglia va a 1360 intera, oppure la * cornice resta allineata al contenuto di casa a 1320. Meglio allineati a 1320 che larghi e * disallineati — ed è per questo che stasera è così. * * 📌 `:root` e non un contenitore della cornice: le fasce (`.bs-top`, `.bs-hd`, `.bs-menu`, * `.bs-disc`, `.bs-ft`) sono sorelle, non hanno un antenato comune sotto `body`. E questo foglio * arriva solo sulle skin betslot, quindi `:root` qui non è mai globale per sbaglio. * ⚠️ Resta una VARIABILE apposta: una skin di questa famiglia che voglia la cornice più larga la * ritocca in un punto, senza riaprire nessuna delle cinque fasce. */ :root { --bs-larghezza: 1360px; } /* 📏 …E ADESSO I 1360 MORDONO DAVVERO — cornice E contenuto insieme. * * Sopra c'era scritto che il numero lavorava solo da tetto: casa fissa `.shell { width: * min(1320px, 100%) }` (tb.css) e un `max-width` più grande non alza una `width` più piccola. * Quindi le fasce uscivano a 1320, non a 1360. * * ⛔ E la riga sola non si poteva scrivere, perché avrebbe portato a 1360 la CORNICE lasciando * il CONTENUTO a 1320: 20px di scalino per lato fra la testata e la pagina sotto. Nel mirror * scalino non c'è, perché lì 1360 è la misura di tutti e due (`.grid`). * * 👉 Quello che mancava era un modo di dire «questa pagina è betslot» che valesse anche per * `main.shell`, che della cornice non fa parte. La strada breve era una classe di famiglia sul * `` di casa — ma quel `` lo scrivono 57 skin, e per una misura di una famiglia non * si tocca il documento di tutte. * * 📌 Il marcatore ce l'avevamo già: **la cornice stessa**. Dove c'è `.bs-hd` la pagina è * betslot, per costruzione; dove non c'è, questa regola non esiste. `:has()` è già in uso in * questo codice (`chrome_struttura.css`: `main.shell:has(> .cols > .cms-page)`), quindi non * introduce niente di nuovo da mantenere. * * ⚠️ Prende TUTTI gli `shell` della pagina — le fasce, il corpo e il piede — ed è voluto: è * l'unico modo perché si muovano INSIEME. Muoverne uno solo è il difetto che questa riga * esiste per non fare. */ body:has(.bs-hd) .shell { width: min(var(--bs-larghezza, 1360px), 100%); } /* ⚠️ LE MISURE QUI SOTTO NON SI VEDONO SULLA PAGINA CASINO' DI STUDIO5 — e non è un difetto di * questo foglio. Va saputo prima di rimisurare, se no si insegue un numero che non è nostro. * * MISURATO, stessa cornice su due pagine della STESSA skin: * * /player/casino /player/promozioni * barra strumenti padding 10px →32 padding 5px 16px →30 * riga discipline padding 10px →46 padding 0 16px →26 ← la misura di questo foglio * piede padding 10px →58 padding 6px 16px →50 * * La causa è nel foglio su misura della skin (`/player/skin.css`, scritto dall'OPERATORE e * servito per ultimo): * * .body--casino .shell { padding: 10px !important } * * `shell` è la classe di CASA per «contenitore centrato», e le fasce della cornice la portano * addosso perché includono i partial di casa invece di copiarli — che è la regola di questa * tappa. Quindi quella riga prende anche loro. * * ⛔ E NON SI SCAVALCA. Ci ho provato con la specificità (`.shell.bs-disc-in`, 0,3,0) e non basta: * c'è `!important`, quindi l'unico modo sarebbe un `!important` mio. Ma quella riga è una scelta * ESPLICITA di chi gestisce la skin, e un tema che scavalca l'operatore è lo stesso difetto della * testata composta — «quello che un operatore ha deciso deve restare». Un foglio di famiglia che * vince sul foglio della skin toglie all'operatore l'ultima parola su casa sua. * * 👉 Quindi resta una DOMANDA PER IL PM, non una riparazione da qui: o l'operatore stringe il suo * selettore al contenuto (`main.shell`), oppure si decide che la cornice non usa `shell` — e * allora si perde il ripiego «senza il foglio si vede la cornice di casa», che è la cosa che * questa tappa ha pagato più caro. Le due strade costano, e la scelta non è mia. * 📌 Vale anche per il piede di w-lane6: stessa causa, stessa riga, stessa decisione. */ .bs-cas { display: flex; flex-direction: column; gap: 14px; } /* IL CORPO A DUE COLONNE: rail dei filtri a sinistra, griglia a destra. Il rail ha una larghezza sua (`--bs-rail`) così una skin può stringerlo senza toccare la griglia, e sotto i 900px le due colonne diventano una sola: su un telefono un rail fisso mangerebbe metà schermo alla vetrina, che è la cosa che il giocatore è venuto a vedere. */ .bs-cas-lay { --bs-rail: 232px; display: grid; grid-template-columns: var(--bs-rail) 1fr; gap: 16px; align-items: start; } @media (max-width: 900px) { .bs-cas-lay { grid-template-columns: 1fr; } } .bs-cas-corpo { min-width: 0; } /* senza, una card larga sfonda la colonna */ /* L'INTESTAZIONE: il nome della vetrina e QUANTI giochi ci sono. */ .bs-cas-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; } .bs-cas-tit { margin: 0; font: 600 1.15rem/1.2 var(--font, inherit); color: var(--ink); } .bs-cas-n { font-variant-numeric: tabular-nums; color: var(--mute); font-size: .9rem; } /* 📏 LA GRIGLIA — MISURE DEL MIRROR, non piu' indovinate (`style.css`, `.game-grid`): * * grid-template-columns: repeat(6, 210px) column-gap: 20px * .game-grid-item .gg-item-img 210 x 148.583px * * 👉 6x210 + 5x20 = 1360 ESATTI, cioe' la larghezza del loro contenitore (`.grid`, * `.casino-container`): da loro la griglia NON e' elastica, E' il contenitore. E il loro foglio * non ha nessuna media query per `.game-grid` — quella pagina vive a una larghezza sola. * * ⛔ QUINDI QUI NON SI PUO' SCRIVERE `repeat(6, 210px)`, e la ragione va detta: da noi il corpo * della vetrina non e' largo 1360 perche' c'e' il RAIL dei filtri (232px + 16 di gap). Sei * colonne fisse traboccherebbero. Quello che si tiene e' la MISURA VERA — la card e' 210px e il * gap e' 20 — e il NUMERO di colonne lo decide lo spazio: alla loro larghezza, senza rail, torna * esattamente 6. * 📌 COLONNE FISSE a 210, non `minmax(210px, 1fr)`. Con `1fr` le card si stirano per riempire * la riga e la misura del mirror non si vede mai: MISURATO, a 1440 uscivano **239px** invece di * 210 — piu' grandi delle loro, non piu' piccole. * 🔴 E `justify-content: center`, NON `space-between`: con `space-between` lo scatto mostra * grondaie molto piu' larghe dei 20px del riferimento — la misura restava giusta nel foglio e * sbagliata a schermo, che e' il difetto che gli scatti servono a trovare. Con `center` il gap * resta ESATTAMENTE 20 e lo spazio che avanza si divide ai due lati, invece di diventare una * striscia morta a destra. * ⛔ Il numero di colonne non e' scritto qui e non deve esserlo: lo decide lo spazio. Alla loro * larghezza, e senza rail, torna esattamente 6. */ .bs-cas-griglia { display: grid; grid-template-columns: repeat(auto-fill, 210px); justify-content: center; column-gap: 20px; row-gap: 20px; } /* Il rapporto della card, anch'esso misurato: 210/148.583 = 1.4133. Quella di casa e' 4/3 (1.3333), cioe' piu' alta. Scoped alla griglia di betslot: `.tb-cg` e' la card DI CASA e la usano anche gli altri temi — cambiarla la' cambierebbe vetrine che nessuno sta guardando. */ .bs-cas-griglia .tb-cg { aspect-ratio: 210 / 148.583; } /* Su schermo stretto la loro misura non ha una risposta, perche' quella pagina una versione stretta non ce l'ha (il foglio non ha media query, e la loro `/m` e' un guscio vuoto). Qui si ricade sulla regola di casa: card piu' piccole e piu' colonne, invece di una colonna sola di 210px con mezzo schermo vuoto accanto. */ @media (max-width: 520px) { .bs-cas-griglia { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); column-gap: 8px; row-gap: 8px; } } .bs-cas-vuoto { grid-column: 1 / -1; margin: 18px 0; } /* il messaggio sta in mezzo, non in una cella */ /* 🔴 SOLO LA GRIGLIA SCORRE — cerca e filtri restano a vista (richiesta di Jesper, 10/08 12:33). * * Misura di w-lane5 sulla pagina viva, 1440×900: la griglia era alta 1539px senza nessuno * scorrimento interno (`overflow-y: visible`, `max-height: none`), il suo fondo cadeva a 1828px e * il bottone «Mostra altri» a 1842px — cioè **fuori dallo schermo**, con la finestra alta 900. * * ⛔ Perché le regole di casa non bastavano: quelle in `casino_struttura.css` sono agganciate a * `.cb-giochi .cas-blocco` / `.cb-giochi .casino-grid`, e nella catena di betslot * (`.casino-grid.bs-cas-griglia → .bs-cas-corpo → .bs-cas-lay → .bs-cas`) **nessuno dei due * esiste**. Non mordevano: non era un difetto della griglia, era un selettore che non arrivava. * * ⛔ `max-height` e MAI `height`: con tre risultati un'altezza fissa lascerebbe un riquadro mezzo * vuoto proprio mentre uno sta cercando. * ⛔ E SOLO da 900px in su: su schermo stretto una zona che scorre dentro una che non scorre è una * trappola — il dito prende la cosa sbagliata. Sul telefono deve scorrere la pagina. * * 📌 IL TETTO STA SUL CORPO, NON SULLA GRIGLIA — e questa è la sola cosa in cui mi sono scostato * dalla misura che mi è arrivata. Mettendolo sulla griglia, `100vh - 210px` misura dal bordo alto * della FINESTRA, ma la griglia non comincia lì: sopra ha la testata, il menu e il titolo della * vetrina. Provato: fondo della griglia a **979px con la finestra alta 900** — cioè di nuovo un * pezzo sotto lo schermo, che è il difetto da cui siamo partiti. Sul corpo, invece, il titolo è * DENTRO il conto e la griglia si prende quello che avanza da sola: se domani sopra ci finisce una * fascia di categorie (oggi non c'è, `GameCategory` è a zero), non va ritoccato nessun numero. * * 📐 E IL NUMERO È MISURATO, non scelto: il corpo comincia a **256px** dal bordo alto — identico a * 1440×900, 1280×720 e 1024×768, perché sopra ci sono testata e menu (155) più la barra di ricerca * (101), che non cambiano con la larghezza. 272 = quei 256 più 16 di respiro sotto. Con il 210 di * casa il fondo cadeva a 946 su una finestra alta 900: giusto come regola, corto di 46 pixel qui. * `--bs-testa` è lì perché una skin con una testata più alta lo ritocchi senza toccare il resto. */ @media (min-width: 900px) { .bs-cas-corpo { display: flex; flex-direction: column; min-height: 0; max-height: calc(100vh - var(--bs-testa, 272px)); } /* `min-height:0` non è pignoleria: senza, un elemento flex non scende sotto il suo contenuto e la griglia non si lascerebbe stringere — il tetto ci sarebbe e non morderebbe. */ /* 🔴 `grid-auto-rows: max-content` NON È DECORAZIONE: senza, questa riparazione ne apre un'altra peggiore, e l'ho vista in uno scatto prima di consegnarla. Appena la griglia ha un'altezza DEFINITA, le righe `auto` diventano comprimibili: le card `.tb-cg` tengono la loro forma con `aspect-ratio: 4/3` e hanno i figli in `position:absolute`, quindi il loro contenuto misura quasi zero e il browser stringe le righe per far entrare tutto. Misurato a 1440×900 con 80 giochi: **righe da 31px per card alte 116** — le copertine si sovrapponevano e i nomi finivano uno sull'altro, una vetrina illeggibile. ⚠️ Vale per QUALSIASI modo di dare un tetto alla griglia, compreso metterlo sulla griglia stessa: è il tetto a rendere le righe comprimibili, non dove lo si scrive. Chi tocca queste righe non tolga questa. */ .bs-cas-griglia { min-height: 0; grid-auto-rows: max-content; overflow-y: auto; /* arrivati in fondo, la rotella NON deve trascinarsi dietro la pagina */ overscroll-behavior: contain; /* il posto della barra: senza, l'ultima colonna di card ci finisce sotto */ padding-inline-end: 4px; } } /* IL BOTTONE «altri»: lo accende lo script, quindi qui si veste e basta. 📌 `grid-column: 1 / -1` perché adesso sta DENTRO la griglia (vedi il template): è una cella, e senza questa riga occuperebbe una colonna sola, largo come una card. Sta dentro apposta — fuori restava sotto il fondo dello scorrimento e non lo vedeva nessuno. */ .bs-cas-altri { grid-column: 1 / -1; display: block; width: 100%; margin: 14px 0 0; padding: 11px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--navy-1, transparent); color: var(--ink); font: 600 .95rem/1 var(--font, inherit); cursor: pointer; } .bs-cas-altri:hover { background: var(--navy-2, transparent); } /* ⛔ E `hidden` DEVE nascondere. Senza questa riga il `display:block` qui sopra vince sul `[hidden]{display:none}` del browser, e il bottone resta lì anche quando i giochi sono finiti: si preme, non succede niente. Vale la pena una riga in più — è il difetto che, dall'altra parte, teneva il bottone acceso per sbaglio invece che per decisione. */ .bs-cas-altri[hidden] { display: none; } /* ── LA PAGINA «PASSWORD DIMENTICATA» (tappa 3) ───────────────────────────────────────────── * Riquadro stretto e centrato, come nel mirror. Anche qui: nessun colore scritto a mano, solo * token del preset — due skin devono cambiare colore e non disposizione. */ .bs-auth { display: flex; justify-content: center; padding: 28px 14px 40px; } .bs-auth-box { width: 100%; max-width: 440px; } .bs-auth-tit { margin: 0 0 6px; font: 700 1.35rem/1.25 var(--font, inherit); color: var(--ink); } .bs-auth-nota { margin: 0 0 16px; color: var(--mute); font-size: .92rem; line-height: 1.45; } /* L'esito sopra il modulo: vedi il perché nel template. Il bordo lo rende una cosa sola, non una riga di testo che si confonde con l'istruzione. */ .bs-auth-esito { margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); } .bs-auth-lab { display: block; margin: 0 0 6px; font-size: .85rem; color: var(--mute); } .bs-auth-sotto{ margin-top: 12px; text-align: center; font-size: .9rem; } .bs-auth-sotto a { color: var(--or); text-decoration: none; } .bs-auth-sotto a:hover { text-decoration: underline; } /* 🔴 IL CAMPO E IL BOTTONE SI VESTONO QUI, e non è una scelta di gusto — è la stessa riparazione * della tappa 3 un piano più sotto, trovata con lo scatto del 10/08 ~17:3x. * * Il markup porta `.input-box` e `.btn-ctm btn-ctm--login`, che sono i nomi di casa. Misurato sui * fogli che studio5 riceve davvero (tb, layout, attesa_live, assistant, chrome_struttura, casa, * skin.css): * * .btn-ctm ZERO regole di base — esiste solo dentro selettori della testata * .input-box una sola, e SOLO dentro `.wdg-login-inline` (il modulo della barra in alto) * * La base vera di quelle due classi arriva dal foglio del TEMA IMPORTATO. Le quattro skin su * cinque che l'importato non ce l'hanno prendevano quindi un campo di sistema e un bottone che * **non sembra un bottone**: testo nudo in mezzo alla pagina, sull'azione principale della * pagina che vede chi è chiuso fuori. * * ⛔ Quindi si veste `.bs-auth-*`, SEMPRE dentro `.bs-auth`, mai `.input-box`/`.btn-ctm` da soli: * quei due nomi girano su tutto il sito e chi ha l'importato ha già il suo aspetto. Vestirli * globalmente da qui riparerebbe questa pagina e ne ridipingerebbe cento. */ .bs-auth .input-box--container { display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--navy-1, transparent); } .bs-auth .input-box--container:focus-within { border-color: var(--or); } .bs-auth .input-box--container > .mdi { color: var(--mute); flex: none; } /* `flex:1` + `min-width:0`: senza il minimo, la larghezza intrinseca del campo tiene aperta la riga e su 390px il riquadro sfonda di lato invece di stringersi. */ .bs-auth .input-box { flex: 1; min-width: 0; margin: 0; padding: 11px 0; border: 0; background: transparent; color: var(--ink); font: 400 .95rem/1.2 var(--font, inherit); } .bs-auth .input-box:focus { outline: none; } .bs-auth .input-box::placeholder { color: var(--mute); } .bs-auth-vai { display: block; width: 100%; margin-top: 12px; padding: 12px 16px; border: 0; border-radius: 10px; background: var(--or); color: var(--navy-0, #06263c); font: 700 .95rem/1 var(--font, inherit); cursor: pointer; } .bs-auth-vai:hover { filter: brightness(1.06); } /* ══ ② LA TESTATA (tappa 2) ═══════════════════════════════════════════════════════════════════ * La riga del marchio del mirror: marchio a sinistra, comandi del conto a destra, e il menu delle * discipline sulla riga sotto (che è il pezzo ③). * * ⛔ ZERO COLORI SCRITTI A MANO: tutto dai token del preset. È la condizione perché due skin * cambino colore e NON impaginazione — e il modo in cui questa cornice si può dare a una skin * nuova senza toccare una riga. */ /* 📏 LA FASCIA DEL MARCHIO — 84px, LA MISURA DEL MIRROR, e ci sta dentro anche il menu. * * Misurato sul mirror renderizzato col suo foglio vero (non dedotto dai selettori): * * .top-header 84px logo + primary-menu nella STESSA fascia * .logo-holder 268px di larghezza * .primary-menu comincia a 268 (`width: calc(100% - 268px)`) * .primary-menu li a font 18px · line-height 84px · MAIUSCOLO · padding 0 10px · margin 0 4px * * 🔴 Prima erano DUE bande — testata 60px e menu 65px — dove il modello ne ha UNA da 84. * Quarantuno pixel di cornice in più, e il marchio che non aveva nessuna colonna sua. * * 📌 IL 268 È LA SPINA DELLA CORNICE, non un margine: nel mirror la colonna del logo detta dove * comincia TUTTO il resto — barra strumenti, menu primario e menu secondario partono tutti da lì. * Qui la tiene il marchio, ed è una variabile perché una skin col nome lungo possa allargarla * senza toccare nient'altro. * ⛔ Quello che NON ho preso è il riquadro bianco del logo (264×142, sporgente di 33px sopra la * fascia): è un piatto disegnato attorno a un LOGO IMMAGINE, e il nostro marchio è testo * (`skin_brand` col doppio tono di casa). Un riquadro bianco alto 142 con dentro una parola * sarebbe la forma del mirror svuotata del suo contenuto. Si prende la COLONNA, non il piatto. */ .bs-hd { background: var(--navy-1); border-bottom: 1px solid var(--line); } /* 🔴 `flex-wrap: wrap` + `min-width: max-content` sul menu = LA FASCIA VA A CAPO INVECE DI NASCONDERE. Misurato a 1440 con un utente non entrato: i comandi del conto di casa portano il modulo d'accesso INTERO (lingua, Email, Password, Entra, Registrati, ~500px), e fra marchio e conti al menu restavano ~420px per 683 di voci. Col solo ritaglio, «CASINÒ» e «PROMOZIONI» finivano dietro uno scorrimento SENZA barra: due sezioni su sei invisibili su un desktop, che è peggio di una fascia alta — una sezione che non si vede, per chi guarda, non esiste. 👉 Così invece: finché ci stanno, UNA fascia da 84 come nel mirror; quando non ci stanno, il menu scende su una riga sua e non si perde niente. Chi è entrato ha i comandi stretti (saldo, Deposita, Esci) e resta sulla riga sola — cioè il caso del modello. */ .bs-hd-in { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; max-width: var(--bs-larghezza, 1440px); margin: 0 auto; padding: 0 16px; min-height: var(--bs-fascia, 84px); } /* Il marchio: il doppio tono è quello di casa (`due_toni`), qui cambia solo la misura. `flex: none` + larghezza fissa = la colonna del mirror. `align-self: center` perché il testo si centra nella fascia, mentre le voci del menu la occupano tutta in altezza (è il loro `line-height` a farlo, ed è così che il segno della voce scelta arriva fino in fondo). */ .bs-hd-marchio { flex: none; width: var(--bs-marchio, 268px); align-self: center; display: inline-flex; align-items: baseline; gap: 2px; text-decoration: none; color: var(--ink); font: 800 1.35rem/1 var(--font, inherit); letter-spacing: .5px; } .bs-hd-marchio b { color: var(--or); font-weight: 800; } /* ══ ⑤ LA FASCIA QUANDO LA RIEMPIONO I WIDGET COMPOSTI (strada 3) ══════════════════════════════ * * Stesse fasce, contenuto dell'operatore. Qui si dà SOLO la geometria: i widget arrivano già * vestiti dal loro foglio (`chrome_struttura.css`) e nessuna riga qui dentro li ridipinge. * * 🔴 `width: auto` sui widget, e senza questa riga la strada 3 non esiste: i `.wdg` sono blocchi * a tutta larghezza (è quello che li faceva impilare uno sotto l'altro), quindi dentro una riga * flex prenderebbero il 100% a testa e si impilerebbero comunque — la fascia sarebbe cambiata di * nome e non di forma. Con `width: auto` ognuno chiede la sua misura vera, e stanno in riga * finché ci stanno. * * 📌 `flex-wrap` lo eredita da `.bs-hd-in`: quando non ci stanno vanno a capo DENTRO la fascia, * invece di sbordare. Su studio5 `header_bar` (marchio + cerca + conto) e `topnav` (7 sezioni) * non ci stanno in 1320, quindi restano su due righe — ma dentro il contenitore di betslot, * larghe 1360 e allineate alla colonna, invece che due bande estranee a tutta pagina. * ⛔ Non li ho forzati su una riga sola stringendoli: `header_bar` è un dispatcher con sei stili, * e una larghezza imposta da fuori romperebbe quello che l'operatore ha scelto. La fascia si * adatta al contenuto composto, non il contrario. */ .bs-hd--composta .bs-hd-in { align-items: center; row-gap: 0; } .bs-hd--composta .bs-hd-in > .wdg { flex: 1 1 auto; min-width: 0; width: auto; } /* La barra da 32 ospita `utility_bar`. Il fondo e il filo li mette il CONTENITORE e non il widget: così la striscia resta a tutta pagina come nel modello, mentre il suo CONTENUTO si ferma ai 1360 e si allinea a tutto il resto della cornice. 📏 Senza queste due righe il widget usciva largo 1440 su una cornice da 1320 — la sola cosa della pagina che non rispettava il contenitore — e alto 34 invece di 32. */ .bs-top--composta { background: var(--navy-0); border-bottom: 1px solid var(--line); } /* ⛔ NIENTE `.bs-top .wdg { margin: 0 }` QUI SOTTO, e l'ho scoperto misurando: quella riga aveva la stessa specificità di questa (0,2,0) e stando DOPO vinceva, quindi azzerava il `margin: auto` e la striscia restava incollata a sinistra — larga 1360 ma con x = 0, cioè 80px di sbilanciamento su una cornice che dovrebbe essere centrata. Due regole mie che si contraddicono sono peggio di una regola mancante: la misura diceva «1360», e sembrava giusto. */ /* La centratura la fa `shell` dal template, non un numero scritto qui: vedi il commento nel `base.html` della famiglia. Qui resta solo l'altezza della striscia. */ .bs-top--composta .wdg-utility_bar { min-height: 32px; } /* `shell` porta il respiro di casa (`--pad`, 20px) e le fasce della cornice ne usano 16: quattro pixel, ma sono quattro pixel di SBILANCIAMENTO fra due fasce attaccate — misurato, la striscia partiva a 80 e la testata a 76. La cornice ha una spina sola, o non è una cornice. */ .bs-top--composta .shell { padding-inline: 16px; } /* stretto: la fascia del marchio passa a 12, e la striscia la segue — se no la riga che ho aggiunto io sarebbe l'unica fuori squadra. ⚠️ Resta uno scarto di 4px con la riga discipline, che a questa larghezza usa 8: è di prima di stanotte e sta nel referto, non lo tocco qui. */ @media (max-width: 900px) { .bs-top--composta .shell { padding-inline: 12px; } } /* ── ③ IL MENU DELLE SEZIONI, DENTRO LA FASCIA ──────────────────────────────────────────────── Le regole `.bs-menu` più sotto vestono il menu quando sta DA SOLO (è il caso di chi ha composto la testata coi widget: lì il menu resta una banda sua sotto la loro). Qui si spegne quel vestito e si mette quello della fascia — stesso markup, due posti, e nessuno dei due duplicato. */ /* `min-width: max-content` è ciò che DECIDE fra la riga sola e il capo: dice al browser «la mia misura minima è quella delle mie voci», e con `flex-wrap` acceso quando non ci sta scende invece di stringersi. È la stessa scelta della griglia del casinò — la misura è del mirror, il NUMERO di cose è nostro, e a decidere è lo spazio. */ .bs-hd .bs-menu { flex: 1 1 auto; min-width: max-content; display: flex; align-items: stretch; } .bs-hd .bs-menu .subnav { flex: 1; min-width: 0; display: flex; background: none; border: 0; } /* niente centratura e niente larghezza massima: il contenitore che centra è già `.bs-hd-in`, e un secondo `margin: 0 auto` qui dentro spingerebbe il menu lontano dal marchio. */ /* 🔴 `overflow-x: auto` NON È RIFINITURA — senza, le voci ESCONO SOPRA I COMANDI DEL CONTO. Visto nello scatto a 1440: «CASINÒ» e «PROMOZIONI» finivano sotto il modulo d'accesso, con le parole una sull'altra. La misura da sola non lo diceva (`fuori_bordo: false`): il contenitore non traboccava dalla PAGINA, traboccava dentro la fascia, ed è lo stesso inganno del menu discipline — un elemento che non trabocca perché il suo vicino si è ristretto. Il perché tecnico, per chi tocca queste righe: `.bs-menu` può stringersi (`flex: 1 1 auto`) ma le voci dentro sono `flex: none`, quindi non si stringono con lui e sbordano. Il ritaglio le tiene dentro la loro corsia. */ .bs-hd .bs-menu .subnav-in { max-width: none; margin: 0; padding: 0; align-items: stretch; overflow-x: auto; scrollbar-width: none; } .bs-hd .bs-menu .subnav-in::-webkit-scrollbar { display: none; } /* ⚠️ E I COMANDI DEL CONTO NON SI STRINGONO: `flex: none`. Sono l'accesso e il saldo — la cosa che uno cerca per prima — e in una riga stretta devono essere loro a tenere la misura, non le sezioni. È anche il motivo per cui il menu si porta lo scorrimento invece del contrario. 📌 Nel mirror questo problema non esiste, perché lì i comandi del conto stanno nella BARRA da 32px e la fascia da 84 ha solo logo e menu. Da noi non ci stanno: `_hdr_conti` è un partial di casa e vive dentro la testata. Portarcelo vorrebbe dire una barra strumenti di betslot al posto di quella di casa — cioè copiare un partial invece di includerlo, che è la cosa che questa tappa non fa. È l'ultimo scostamento dal modello, ed è scritto nel passaggio. */ .bs-hd-in .hdr-r { flex: none; } /* 📏 Le voci: 18px MAIUSCOLE, alte quanto la fascia. `line-height` = altezza della fascia è il modo del mirror di centrare il testo, e fa sì che lo sfondo della voce scelta la riempia. */ /* 📌 `align-self: stretch` + `align-items: center`, e NON `line-height: 84px`, che sarebbe stato il modo del mirror. La differenza conta solo quando la riga va a capo: con l'altezza scritta nel `line-height`, la riga di sotto sarebbe alta 84 come la fascia — 168px di testata per un menu. Così invece la voce si allunga quanto la fascia quando ci sta dentro, e vale il suo `min-height` quando è su una riga sua. Una regola, due forme. */ .bs-hd .bs-menu .tab { flex: none; flex-direction: row; align-items: center; align-self: stretch; gap: 0; min-height: 44px; padding: 0 10px; margin: 0 4px; border-bottom: 0; font: 700 1.125rem/1.2 var(--font, inherit); letter-spacing: .3px; text-transform: uppercase; } /* ⛔ LE ICONE DELLE SEZIONI SI SPENGONO QUI, e il mirror fa lo stesso: nel suo foglio le `svg` del `primary-menu` sono `display: none` e a schermo restano solo le PAROLE. Misurato che serve davvero: con le icone le sei voci passano da ~683px a ~839, contro i ~720 che restano fra la colonna del marchio e i comandi del conto — cioè traboccherebbero. ⚠️ NON tocca le icone delle DISCIPLINE: quelle sono la richiesta di Dav del 07/08 e stanno nella striscia sotto, che le tiene tutte. Sono due menu diversi. */ .bs-hd .bs-menu .tab .ico { display: none; } /* la voce scelta: il segno del mirror è sotto, e qui riempie l'altezza della fascia */ .bs-hd .bs-menu .tab.on { background: var(--navy-2); color: var(--ink); box-shadow: inset 0 -4px 0 var(--or); } /* I comandi del conto vanno a destra: `_hdr_conti` è il partial di casa e non si tocca — si sposta da qui, che è l'unica cosa che questa cornice ha il diritto di decidere. */ .bs-hd-in .hdr-r { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; } /* Il tasto del menu: solo su schermo stretto. Sopra i 900px il menu è dentro la fascia e si vede, e un tasto che apre una cosa già visibile è un comando che non risponde. */ .bs-hd-menu { display: none; background: none; border: 0; color: var(--ink); cursor: pointer; padding: 4px; line-height: 0; align-self: center; } /* ── SU SCHERMO STRETTO LA FASCIA UNICA TORNA DUE RIGHE ──────────────────────────────────────── La fascia da 84px con la colonna da 268 è la misura del mirror a schermo largo; il mirror una versione stretta non ce l'ha (`body { min-width: 1360px }` — il loro sito stretto non esiste). Qui il menu VA A CAPO invece di sparire: `flex: 1 0 100%` lo manda su una riga sua sotto il marchio, cioè esattamente la forma che questa cornice aveva prima. ⛔ Nasconderlo e basta sarebbe stato più corto da scrivere e avrebbe tolto le sezioni a chi sta sul telefono. ⚠️ E l'icona TORNA: su una riga sua lo spazio c'è, ed era l'unica ragione per spegnerla. */ @media (max-width: 900px) { .bs-hd-menu { display: inline-flex; } .bs-hd-in { flex-wrap: wrap; min-height: 0; gap: 10px; padding: 8px 12px; } .bs-hd-marchio { width: auto; font-size: 1.15rem; } .bs-hd .bs-menu { flex: 1 0 100%; order: 3; } .bs-hd .bs-menu .subnav-in { overflow-x: auto; scrollbar-width: none; } .bs-hd .bs-menu .subnav-in::-webkit-scrollbar { display: none; } .bs-hd .bs-menu .tab { flex-direction: column; gap: 4px; margin: 0; padding: 8px 11px 6px; font-size: .7rem; line-height: 1; } .bs-hd .bs-menu .tab .ico { display: inline-flex; } .bs-hd .bs-menu .tab.on { box-shadow: inset 0 -3px 0 var(--or); } } /* ══ ① LA BARRA STRUMENTI (tappa 2) ═══════════════════════════════════════════════════════════ * La fascia sottile del mirror: più scura della testata, voci ai due estremi, testo piccolo. * ⛔ Il markup è quello di casa (`player/_topbar.html`), incluso e non copiato: qui si veste, e * solo dentro `.bs-top` — così nessun'altra skin se ne accorge. */ /* 📏 32px, la misura del mirror (`.header .top-bar { height: 32px }`, e le sue voci hanno `line-height: 32px` e `font-size: 12.5px`). La nostra usciva 30: il corpo era già giusto (.78rem = 12.48px), mancavano i due pixel della fascia. `min-height` e non `height` perché se un giorno una voce va a capo la barra deve crescere, non tagliare. */ .bs-top .topbar { background: var(--navy-0); border-bottom: 1px solid var(--line); } .bs-top .topbar-in { max-width: var(--bs-larghezza, 1440px); margin: 0 auto; padding: 0 16px; min-height: 32px; display: flex; align-items: center; gap: 12px; } .bs-top .tclock { color: var(--mute); font: 600 .78rem/1 var(--font, inherit); font-variant-numeric: tabular-nums; } /* le voci di servizio all'altro estremo: è la riga che dà alla fascia la forma del mirror */ .bs-top .topbar-links { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 16px; } .bs-top .topbar-links a { color: var(--mute); text-decoration: none; font: 500 .78rem/1 var(--font, inherit); } .bs-top .topbar-links a:hover { color: var(--ink); } /* ── I COMANDI DEL CONTO DENTRO LA BARRA — e la barra deve restare 32 ───────────────────────── * Da qui in poi si veste `_hdr_conti` SOLO dentro `.bs-top`: il partial è di casa e lo usano * tutte le skin, quindi ogni riga qui sotto è scoped alla barra di betslot e fuori non esiste. * * 📏 Misurato: appena i comandi sono entrati nella barra, la barra è passata da 32 a **40**, e * a 390 a **48** — perché i campi d'accesso di casa sono alti 34 e sono pensati per una testata, * non per una striscia. Nel mirror la stessa riga sta in 32 perché lì i campi sono minuti * (`line-height: 32px`, `font-size: 12.5px`, `padding: 0 8px` — le sue `login-bar input`). * * ⛔ Non si tocca `.hdr-login` in generale: quel modulo è la testata di casa su ogni altra skin. */ /* 🔴 QUI NON SI SCRIVE `display` SU NIENTE, e l'ho imparato rompendolo: avevo messo `.bs-top .hdr-r .hdr-login { display: flex }` (un doppione di casa, che già lo fa) e `.bs-top .hdr-r form { display: inline-flex }`. Tutte e due, più specifiche di casa e senza media query, RIACCENDEVANO il modulo d'accesso che casa spegne sotto gli 860 (`@media (max-width:860px) { .hdr-login { display: none } }`) — e a 390 i comandi uscivano larghi 494 su uno schermo da 390, con il bordo sinistro a **x = −9**. 👉 Vestire il markup di casa vuol dire toccarne le MISURE, non la sua logica di comparsa: le regole che decidono cosa si vede a quale larghezza restano sue, o si scavalcano di nascosto. */ .bs-top .hdr-r { gap: 8px; } /* i campi: alti 24, così 24 + i 4+4 di respiro fanno i 32 della striscia */ .bs-top .hdr-r input[type="email"], .bs-top .hdr-r input[type="password"] { height: 24px; padding: 0 8px; min-width: 0; width: 120px; font: 400 .78rem/24px var(--font, inherit); } /* ⛔ E ANCHE QUI NIENTE `display`, per la seconda volta nello stesso pezzo: `.btn-ghost` ce l'ha già da casa (`display: inline-flex`), e riscriverlo scavalcava `.hdr-r .only-m { display: none }` — cioè il link «Entra» che casa tiene per il telefono. Nello scatto a 1440 «Entra» compariva DUE VOLTE, il bottone del modulo e quello di scorta. Si toccano le misure, non la comparsa. */ .bs-top .hdr-r .btn, .bs-top .hdr-r .btn-ghost { height: 24px; padding: 0 10px; border-radius: 6px; font: 700 .78rem/1 var(--font, inherit); } .bs-top .hdr-r .balance { display: inline-flex; align-items: center; gap: 6px; font: 600 .78rem/1 var(--font, inherit); } .bs-top .hdr-r .balance small { font-size: .72rem; color: var(--mute); } .bs-top .hdr-r .langpick summary { padding: 0 4px; } /* la bandiera di casa è tarata sulla testata: qui rimpicciolisce con la riga */ .bs-top .hdr-r .fl { width: 16px; height: 12px; } /* i moduli non portano margini propri dentro una striscia — solo il margine, mai il `display`: `.hdr-login` È un `form`, e una regola su `form` qui lo riaccenderebbe sotto gli 860. */ .bs-top .hdr-r form { margin: 0; } /* Su schermo stretto l'ora sparisce e restano i servizi: in 390px una fascia con dentro tutto diventa due righe, e due righe di roba di servizio sopra il marchio sono spazio tolto al sito. */ @media (max-width: 560px) { .bs-top .tclock { display: none; } .bs-top .topbar-in { padding: 4px 12px; justify-content: center; } .bs-top .topbar-links { margin-inline-start: 0; gap: 14px; } } /* ══ ③ IL MENU DELLE DISCIPLINE (tappa 2) ═════════════════════════════════════════════════════ * La riga del mirror: voci allineate a sinistra col marchio, la scelta col suo segno sotto. * ⛔ Markup di casa (`player/_subnav.html`), incluso e non copiato: quali voci esistono lo decide * la skin, e quella logica non si duplica in una famiglia. */ .bs-menu .subnav { background: var(--navy-1); border-bottom: 1px solid var(--line); } /* ⚠️ `justify-content: flex-start` SEMPRE, non solo su schermo stretto: casa centra le voci, e nel mirror il menu è allineato col marchio. Senza questa riga la regola di casa vince e le voci restano in mezzo — misurato: la prima voce partiva a 415px su una finestra da 1440. */ .bs-menu .subnav-in { max-width: var(--bs-larghezza, 1440px); margin: 0 auto; padding: 0 16px; display: flex; align-items: stretch; gap: 2px; justify-content: flex-start; } /* 🔴 `flex: none` — e l'ho capito solo guardando lo scatto, dopo che la MISURA mi aveva detto che andava bene. Sotto i 390px il contenitore NON traboccava (`scrollWidth == clientWidth`, letto dal browser): a schiacciarsi erano le VOCI, che con `nowrap` si stringevano sotto il loro testo e lo tagliavano. La misura guardava la cosa sbagliata — un contenitore che non trabocca perché il suo contenuto si è arreso non è un contenitore che ci sta. Con `flex: none` le voci tengono la loro misura, il contenitore trabocca davvero, e lo scorrimento qui sotto serve a qualcosa. */ .bs-menu .tab { flex: none; display: inline-flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 14px 8px; color: var(--mute); text-decoration: none; font: 700 .74rem/1 var(--font, inherit); letter-spacing: .4px; text-transform: uppercase; white-space: nowrap; border-bottom: 3px solid transparent; } .bs-menu .tab:hover { color: var(--ink); } /* la scelta porta il segno, ed è l'unico posto dove serve l'accento */ .bs-menu .tab.on { color: var(--ink); background: var(--navy-2); border-bottom-color: var(--or); } /* 🔴 SU SCHERMO STRETTO SI PARTE DA SINISTRA E SI SCORRE, e non è una preferenza: il menu di casa è CENTRATO, e un menu centrato che non ci sta non trabocca a destra — trabocca da tutte e due le parti, e quella che si perde è la PRIMA voce. Visto nello scatto a 390 del pezzo ②. ⚠️ `justify-content: flex-start` da solo non basta: senza lo scorrimento le voci si schiaccerebbero. Le due righe vanno insieme. */ @media (max-width: 900px) { /* 🔴 `min-width: 0`, E SENZA QUESTO LO SCORRIMENTO QUI SOTTO NON SCATTA MAI — misurato a 390: `.bs-menu` usciva larga **425px** su uno schermo da 390, e `.subnav-in` aveva `scrollWidth == clientWidth`, cioè non traboccava affatto. La ragione è la trappola classica del flexbox: `.bs-menu` è un FLEX ITEM del `` (che e' `display:flex; flex-direction:column` in `tb.css`), e un flex item nasce con `min-width: auto` — non puo' stringersi sotto la larghezza del proprio contenuto. Quindi invece di traboccare si ALLARGA, si porta dietro tutta la pagina, e `overflow-x: auto` non ha niente da scorrere. ⚠️ E' la stessa cosa scritta piu' su per il campo della pagina d'accesso — «senza il minimo, la larghezza intrinseca tiene aperta la colonna». Qui mordeva un piano piu' in alto: non una colonna, la pagina. ⛔ E il `min-width: max-content` di sopra NON si toglie: sopra i 900 e' quello che fa andare A CAPO la fascia invece di schiacciare le voci, ed e' una scelta misurata. Si spegne solo dove il capo non basta piu' — cioe' qui, dove al posto del capo serve lo scorrimento. */ /* ⚠️ `.bs-hd .bs-menu` e non `.bs-menu`: la regola qui sopra ha DUE classi, e una a una sola perde per specificità qualunque sia l'ordine. Ci sono cascato: avevo scritto `.bs-menu` e la misura non si era mossa di un pixel — il modo giusto di accorgersene è che il valore calcolato diceva ancora `min-width: max-content`, non che «non funziona». */ .bs-hd .bs-menu, .bs-menu .subnav { min-width: 0; } .bs-menu .subnav-in { min-width: 0; justify-content: flex-start; overflow-x: auto; padding: 0 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .bs-menu .subnav-in::-webkit-scrollbar { display: none; } .bs-menu .tab { padding: 8px 11px 6px; font-size: .7rem; } } /* ══ ④ IL PIEDE (tappa 2) ═════════════════════════════════════════════════════════════════════ La forma del mirror: UNA riga di servizi (marchio · menu · gioco responsabile · pagamenti) e sotto la riga della firma. Il markup è `themes/betslot/_piede.html` — qui non si aggiunge niente, si dispone. ⛔ Zero colori scritti a mano: solo token del preset. */ /* 🔴 NIENTE `margin-top` QUI, e non e' una dimenticanza. Il markup porta anche `ftr`, e `.ftr { margin-block-start: auto }` di casa e' cio' che tiene il piede IN FONDO su una pagina corta (il `body` e' un flex in colonna alto 100vh). Un `margin-top` qui vincerebbe per ordine di sorgente e il piede si staccherebbe a meta' pagina — un difetto che si vede solo sulle pagine corte, cioe' proprio quelle che nessuno apre per controllare il piede. L'aria sopra la da' il padding qui sotto. */ /* 📏 MISURE DEL MIRROR (`style.css`, regola globale `footer`): * * padding: 50px 0 90px border-top: 6px solid var(--tertiary) * * Il piede del modello e' ALTO — 50px sopra, 90 sotto — e i 90 servono a fare posto al * copyright, che da loro e' `position: absolute; bottom: 10px`. Il nostro copyright e' una riga * nel flusso, quindi i 90 non servono: si tiene il 50 sopra, che e' l'aria vera, e sotto quanto * basta alla riga. La riga dei servizi resta 45px, che e' il loro `line-height`. * * ⛔ IL 6px E' MISURATO, IL COLORE NO. Loro usano `--tertiary`, che nel loro foglio e' il fondo * della riga del menu: nel nostro preset non esiste un equivalente, e un token si sceglie, non si * misura. Ho preso `--or` — l'accento — perche' e' l'unico che rende quella banda una riga * VOLUTA invece di un bordo sbagliato di 6px. Se il PM la vuole piu' sobria, `--navy-2` e' la * stessa misura con meno voce: si cambia UNA parola, e non cambia niente altro. */ .bs-ft { background: var(--navy-1); border-top: 6px solid var(--or); padding-top: 50px; } /* La riga dei servizi. `flex-wrap` e non una griglia a colonne fisse: i quattro pezzi hanno larghezze molto diverse (un marchio corto, un menu che cresce con le voci) e una griglia li incolonnerebbe lasciando buchi. Andando a capo, l'ordine resta quello del mirror a qualunque larghezza. `--bs-larghezza` è la stessa della testata e del menu: se il piede fosse più largo della cornice si vedrebbe come uno scalino. */ /* ⚠️ `justify-content: flex-start` ESPLICITO: il markup porta `ftr-in`, che di casa centra. Senza questa riga la disposizione «marchio a sinistra, code a destra» reggerebbe lo stesso — i margini `auto` battono `justify-content` — ma per una regola di flexbox che nessuno ricorda guardando questo file. Scritta, si legge. */ .bs-ft-in { max-width: var(--bs-larghezza, 1440px); margin: 0 auto; padding: 6px 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px 22px; min-height: 45px; } .bs-ft-marchio { display: inline-flex; align-items: baseline; gap: 2px; text-decoration: none; color: var(--ink); font: 800 1.05rem/1 var(--font, inherit); letter-spacing: .3px; } .bs-ft-marchio b { color: var(--or); font-weight: 800; } /* IL MENU. `margin-inline-start: auto` sul menu e `auto` di nuovo sul gioco responsabile spingono marchio a sinistra e le due code a destra: è la disposizione «ai due estremi» del mirror, ottenuta senza posizionare niente a mano. */ /* `gap` a 0 in orizzontale: la spaziatura la fa il `padding: 0 10px` delle voci, che e' la misura del mirror. Sommare i due darebbe voci larghe il doppio del riferimento. */ .bs-ft-menu { margin-inline-start: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; } /* 📏 MISURE VERE, non piu' indovinate (foglio del mirror, `footer .footer-menu li a`): font-size 14px · padding 0 10px · line-height 45px · text-transform uppercase. Le prendo dalla variante `main-footer`, che sta su 19 pagine del mirror, NON da `center-footer` (7, le sole pagine CMS) da cui avevo preso la forma la prima volta. ⛔ Il colore resta nostro: loro hanno `var(--white)`, noi `--mute` del preset. */ .bs-ft-menu a { color: var(--mute); text-decoration: none; font: 600 .875rem/1.4 var(--font, inherit); text-transform: uppercase; letter-spacing: .3px; padding: 0 10px; white-space: nowrap; } .bs-ft-menu a:hover { color: var(--ink); } .bs-ft-resp { display: inline-flex; align-items: center; gap: 10px; } .bs-ft-resp a { color: var(--mute); text-decoration: none; font: 600 .82rem/1.4 var(--font, inherit); white-space: nowrap; } .bs-ft-resp a:hover { color: var(--ink); } /* Il 18+ è DISEGNATO, non un'immagine: vale in ogni lingua, non chiede un asset per skin e non sbiadisce quando cambia il preset. Il bordo lo rende un bollino senza riempirlo di colore. */ .bs-ft-18 { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 22px; padding: 0 6px; border: 1px solid var(--line); border-radius: 11px; color: var(--mute); font: 800 .72rem/1 var(--font, inherit); letter-spacing: .3px; } /* 📏 I METODI DI PAGAMENTO — e qui la misura ha corretto una mia strizzata. Loro: `footer .payment { float: right; width: 480px }`, cioe' una STRISCIA LARGA a destra. La nostra immagine e' 381x40 (rapporto 9.5:1, misurato sul file): col vecchio tetto di `max-height: 26px` usciva 248x26, cioe' meta' del peso che ha nel modello. 👉 Ora esce alla sua misura naturale (381x40) invece di essere schiacciata. Non la porto a 480: sarebbe un ingrandimento di un PNG da 381, cioe' sfocatura per somigliare a un numero. 🔴 QUI HO SBAGLIATO DUE VOLTE, e le ha trovate la prova solo dopo averla riparata. ① Tolto il tetto, l'immagine usciva **149x18** invece che alla sua misura — ma NON era il flex: era che il PNG non si caricava affatto nella prova, e quello che misuravo era il riquadro del testo alternativo. Una prova che non serve le immagini approva qualunque cosa. ② Allora le ho messo `width: 381px`, e l'ho SCHIACCIATA: col tetto di casa (`.ftr-pay img { max-height: 34px }`) usciva 381x34, cioe' un rapporto 11:1 al posto di 9.5:1. Due misure imposte a un'immagine sono una deformazione, non un allineamento. 👉 Ora nessuna delle due: `width: auto` + `height: auto`, e il rapporto resta quello del file. 📏 E IL TETTO E' 26px, NON i 34 di casa — scelto per tenere la STRUTTURA del mirror, che e' una riga sola. Da loro `.payment` e' larga 480 e ci sta perche' il loro menu ha QUATTRO voci corte (Chi Siamo, Gioco Responsabile, Termini, Regolamento); il nostro ne ha sei e piu' lunghe. Misurato: col tetto di casa la striscia esce 324px e la riga VA A CAPO — i loghi finiscono sotto il marchio e il menu resta a destra, che non e' la disposizione del modello. A 26px esce 248x26, la riga tiene, e la forma e' la loro. ⛔ Cioe' fra la MISURA della striscia e la STRUTTURA della riga ho tenuto la struttura: e' la riga «struttura loro, contenuto nostro» applicata al caso in cui le due cose confliggono. ⛔ `max-width: 100%` resta e non e' decorazione: senza, su una finestra stretta e' l'immagine a decidere la larghezza della pagina e il piede sfonda di lato. */ .bs-ft-pay { flex: 0 1 auto; min-width: 0; max-width: 100%; display: flex; align-items: center; } .bs-ft-pay img { display: block; width: auto; max-width: 100%; height: auto; max-height: 26px; opacity: .85; } /* LA FIRMA. Riga a sé, separata da un filo: nel mirror è `.footer-copyright`, l'unica cosa centrata di tutto il piede. */ /* 📏 `footer .footer-copyright` del mirror: font-size 11px. Avevo messo 12.5px. */ .bs-ft-fine { border-top: 1px solid var(--line); color: var(--mute); font: 500 .6875rem/1.6 var(--font, inherit); text-align: center; padding: 10px 16px 28px; } /* ── SU SCHERMO STRETTO ──────────────────────────────────────────────────────────────────────── Il `margin-inline-start: auto` va SPENTO, e non è un dettaglio: quando i pezzi vanno a capo quel margine resta e spinge il menu contro il bordo destro, lasciando a sinistra un vuoto che sembra un difetto di allineamento. In colonna gli estremi non esistono più — quindi non si spinge più niente e tutto parte dal bordo sinistro, incolonnato. ⚠️ Stesso punto di rottura della testata e del menu (900px): tre pezzi della stessa cornice che cambiassero forma a larghezze diverse si vedrebbero riorganizzare uno per volta. */ @media (max-width: 900px) { .bs-ft-in { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px 12px; } .bs-ft-menu { margin-inline-start: 0; width: 100%; gap: 4px 0; } .bs-ft-in { padding: 12px 12px; } } /* Sotto i 560px il menu passa a due colonne invece di una riga che va a capo a caso: sei voci in fila su un telefono diventano cinque righe di lunghezza diversa. Due colonne le allineano. */ @media (max-width: 560px) { .bs-ft-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; } .bs-ft-menu a { white-space: normal; } .bs-ft-resp { flex-wrap: wrap; } .bs-ft-fine { font-size: .74rem; } } /* ══ LA RIGA DELLE DISCIPLINE (tappa 2) ═══════════════════════════════════════════════════════ * * 🔴 QUESTA RIGA NON E' IL `primary-menu`, E IL COMMENTO DI PRIMA SBAGLIAVA. L'ho letto sul * mirror RENDERIZZATO col suo foglio vero, non piu' dedotto dai selettori: * * primary-menu fascia alta 84px, testo 18px MAIUSCOLO, insieme al logo * → SPORT · LIVE · CASINO · LIVE CASINO · VIRTUAL · POKER · IPPICA * secondary-menu striscia sottile 26px, testo 13px * → HOME · Eventi di Oggi · Calcio · Statistiche · Mobile * * Le voci del `primary-menu` sono le SEZIONI del sito (le nostre `_subnav`), non le discipline: * portano un'icona di sport nel markup, ed e' quello che mi aveva ingannata leggendo il foglio. * Ma nel foglio quelle icone sono `display: none` — a schermo si vedono SOLO le parole. * * 👉 Quindi la nostra riga delle discipline e' il `secondary-menu`: la striscia sottile. * ⛔ E la ragione per cui erano due menu diversi resta identica, solo al contrario di come * l'avevo scritta: le sezioni sono la fascia ALTA, le discipline la striscia BASSA. Due barre * uguali una sopra l'altra restano il modo in cui una persona clicca quella sbagliata. * * 📏 MISURE VERE (`.bottom-header` e `ul.secondary-menu` del mirror, misurate a 1440): * * striscia 26px (era 64px da noi: due volte e mezzo) * voce font 13px · line-height 26px * * 🔴 IL 26 SI TIENE, IL `margin: 0 18px` DELLE VOCI NO — e la ragione e' la stessa della griglia * del casino' qui sopra: la MISURA e' del mirror, il NUMERO di voci e' nostro. Loro hanno 5 voci * di solo testo, noi ne abbiamo 13 con l'icona, e coi loro 18px di margine la striscia * crescerebbe di altri ~470px senza guadagnare niente. Si tiene l'ALTEZZA e il CORPO — che sono * cio' che si vede — e la spaziatura la detta il nostro contenuto. * * ⚠️ E LE 13 DISCIPLINE NON CI STANNO COMUNQUE: la striscia SCORRE, anche a 1440. Misurato, * somma delle voci **1423px** contro una corsia di 1320 — e non e' il padding a deciderlo: casa * fissa `.subnav .tab { min-width: 92px }`, quindi le voci corte non si stringono, e quelle * lunghe (`Football australiano` 161, `Hockey su ghiaccio` 156) sforano da sole. Scorreva anche * prima di questa misura, con le voci alte 42: non e' un difetto che ho introdotto stringendo la * striscia, ed e' il motivo per cui `overflow-x: auto` qui sotto non e' decorazione. * 📌 Chi vorra' farcele stare deve togliere il `min-width` di casa SOLO qui dentro, non allargare * la striscia: e' quello il numero che tiene larghe le voci corte. */ .bs-disc { background: var(--navy-0); border-bottom: 1px solid var(--line); } .bs-disc-in { max-width: var(--bs-larghezza, 1440px); margin: 0 auto; padding: 0 16px; display: flex; align-items: stretch; gap: 0; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; } .bs-disc-in::-webkit-scrollbar { display: none; } /* `flex: none` per la stessa ragione del menu: senza, le voci si stringono sotto il loro testo e lo tagliano — e il contenitore non trabocca, quindi la misura direbbe che ci stanno. */ /* ⚠️ `.bs-disc .tab` e non `.bs-disc-voce` da solo: la regola di casa e' `.subnav .tab`, cioe' DUE classi, e batteva la mia che ne aveva una. Le voci uscivano in colonna (icona sopra il nome) invece che in riga. Stessa specificita' e foglio piu' avanti: adesso vince questa. */ /* 📌 `24px` di line-height piu' i `2px` del bordo fanno i 26 esatti della striscia. Il bordo e' dentro la misura, non in aggiunta: e' il segno della disciplina scelta, e se si sommasse all'altezza la riga si alzerebbe di 2px appena uno sceglie qualcosa — un salto che si vede. */ .bs-disc .tab { flex: none; flex-direction: row; align-items: center; gap: 6px; padding: 0 10px; color: var(--mute); text-decoration: none; font: 600 .8125rem/24px var(--font, inherit); text-transform: none; letter-spacing: 0; white-space: nowrap; border-bottom: 2px solid transparent; } .bs-disc .tab:hover { color: var(--ink); } .bs-disc .tab.on { color: var(--ink); border-bottom-color: var(--or); } /* ⚠️ L'icona la rimpicciolisce il TEMPLATE (`dim=16`), non questa regola — vedi `_discipline.html`. Qui resta solo la garanzia che non sia LEI a decidere l'altezza della striscia: `_ico.html` scrive `width`/`height` negli attributi, e un'icona da 20 in una riga da 26 la spingerebbe a 28 nella finestra fra il riavvio e il `collectstatic`, cioe' proprio quando il foglio non c'e'. */ .bs-disc .tab .ico { width: 16px; height: 16px; flex: none; } @media (max-width: 900px) { .bs-disc-in { padding: 0 8px; } .bs-disc .tab { padding: 0 8px; } } /* ══ ⑤ LA HOME / PALINSESTO (tappa 2) ═════════════════════════════════════════════════════════ * 📏 MISURE DEL MIRROR (`style.css`), e sono tre numeri che stanno insieme: * * .side-bar width: 256px ← il rail di sinistra * .center-content width: calc(100% - 514px) ← 514 = 256 + 258 * .center-content.right-closed calc(100% - 304px) (304 = 256 + 48, coupon chiuso) * * 👉 Cioe' il loro palinsesto e' a TRE COLONNE dentro i 1360: rail 256 · centro · coupon 258. * Il `514` non e' un numero a se': e' la somma, ed e' cosi' che si legge che il coupon vale 258. * * ⛔ E QUI NON SI RISCRIVE NIENTE. La home di casa ha GIA' tre colonne — `.rail-l` (il rail * degli sport), il centro, `.rail-r` (il coupon, che la base disegna quando non c'e' `hide_slip`) * — e le loro larghezze sono gia' due variabili (`--rail-l-w`, `--rail-r-w` in `tb.css`). Vestire * vuol dire cambiare i due valori, non rifare la pagina: un `themes/betslot/home.html` che * ricopiasse quella struttura sarebbe la copia che diverge al primo ritocco di casa. * * 📌 E questo foglio arriva SOLO alle skin betslot (lo carica il `{% block head %}` della sua * base), quindi qui si possono nominare le classi di casa senza toccare nessun altro tema. * ⚠️ `.cols` e non `:root`: i due token sono definiti su `.cols` in `tb.css`, e una definizione * su `:root` perderebbe contro quella — piu' vicina all'elemento. */ .cols { --rail-l-w: 256px; --rail-r-w: 258px; } /* Il coupon chiuso: da loro il centro si allarga a `calc(100% - 304px)`, cioe' il rail resta e al posto del coupon restano 48px. Da noi il coupon che si spegne e' `.tb-coupon-off`, che toglie del tutto la colonna — piu' netto e gia' provato: qui si tiene la larghezza del rail, che e' l'unica delle due misure che resta vera. */ .tb-coupon-off .cols { --rail-l-w: 256px; } /* ══ ⑥ IL PALINSESTO A TABELLA (tappa 2) ══════════════════════════════════════════════════════ * 📏 MISURE DEL MIRROR (`style.css`, `.odds-table`): * * border-collapse: collapse · width: 100% * th, td padding: 3px 0 · line-height: 24px · font-size: 11px * .first-header font-size: 13px · bold · centrata * td.match-name min-width: 270px * td.odd-cell width: 54px · centrata * * ⛔ Colori dai token del preset: loro hanno `--primary-darken-2` per l'intestazione e `#eeedee` * per la riga, che sono la LORO tavolozza. Qui l'intestazione è `--navy-2` e la riga `--navy-1`, * cioè le stesse superfici che il resto della cornice usa già. */ /* 🔴 `table-layout: fixed`, E L'HA TROVATO UNO SCATTO. Misurato sul servito: la tabella usciva larga **1098px dentro un contenitore da 774** (`.matches`, che ha `overflow-x: hidden`) — cioè le quote erano tagliate e IRRAGGIUNGIBILI. E la mia misura del traboccamento diceva zero, perché guardava il bordo dello SCHERMO: un contenuto tagliato da un contenitore non esce mai dalla finestra. Con `auto` il browser dà a ogni colonna la sua larghezza naturale, e i nomi lunghi delle squadre (`min-content` della cella nome: 535px) allargano la tabella oltre la colonna centrale. Con `fixed` comandano le larghezze DICHIARATE qui sotto, e il nome va in ellissi — che è la regola che `.bs-pal-squadre b` aveva già e che non poteva applicare. */ .bs-pal { width: 100%; table-layout: fixed; border-collapse: collapse; } .bs-pal-testa th { background: var(--navy-2); color: var(--ink); text-align: center; font: 700 .8125rem/24px var(--font, inherit); padding: 6px 8px; } .bs-pal-testa th:first-child { text-align: start; } /* La riga. `border-bottom` e non lo sfondo alternato del mirror: su fondo scuro due grigi vicini si leggono come un difetto di resa, una riga di separazione no. */ .bs-pal-riga { border-bottom: 1px solid var(--line); } .bs-pal-riga:hover { background: var(--navy-2); } .bs-pal td { padding: 3px 0; line-height: 24px; font-size: .6875rem; vertical-align: middle; } /* IL BLOCCO DEL NOME — `min-width: 270px` è loro. `width: 1%` insieme a `white-space` sulle altre celle fa sì che sia questa colonna a prendersi lo spazio che avanza: senza, la tabella distribuisce a caso e le quote ballano da una riga all'altra. */ .bs-pal-nome { min-width: 270px; padding-inline: 10px 8px; } .bs-pal-nome a { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); } /* L'ora in due riquadri affiancati, com'è nel mirror (`.match-date` + `.match-time`). */ .bs-pal-quando { flex: none; display: inline-flex; align-items: stretch; border-radius: 3px; overflow: hidden; border: 1px solid var(--line); font: 700 .6875rem/22px var(--font, inherit); } .bs-pal-data { background: var(--navy-2); color: var(--mute); padding: 0 6px; } .bs-pal-ora { background: var(--navy-0); color: var(--ink); padding: 0 6px; } .bs-pal-live { background: var(--or); color: var(--navy-0); padding: 0 8px; font-weight: 800; } .bs-pal-squadre { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; } .bs-pal-squadre b { font-size: .78125rem; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bs-pal-lega { color: var(--mute); font-size: .6875rem; } /* LE QUOTE. La cella del mirror è 54px; qui il bottone è quello di casa (`.chip`) e porta etichetta + prezzo, quindi la misura è un MINIMO per bottone e non una larghezza di colonna. */ /* ⚠️ Una larghezza DICHIARATA, non `1%`: con `table-layout: fixed` le percentuali minime collasserebbero la colonna. E `white-space: normal` perché un mercato con più di tre esiti deve poter andare a capo dentro la sua cella invece di spingere fuori la tabella. */ .bs-pal-quote { width: 320px; white-space: normal; padding-inline: 8px; } .bs-pal-quote form { display: inline-block; margin: 0; } .bs-pal-quote .chip { min-width: 54px; } .bs-pal-senza { text-align: center; } .bs-pal-senza .more { color: var(--or); font-size: .6875rem; text-decoration: none; } .bs-pal-altri { width: 42px; text-align: center; padding-inline: 6px 10px; } .bs-pal-altri a { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 3px; color: var(--mute); font-weight: 700; text-decoration: none; } .bs-pal-altri a:hover { color: var(--ink); border-color: var(--or); } /* ── SU SCHERMO STRETTO ──────────────────────────────────────────────────────────────────────── Il `min-width: 270px` del nome più le quote non ci stanno in 390px: la tabella traboccherebbe. Qui la riga si impila — nome sopra, quote sotto — che è la stessa cosa che fa la card di casa. ⛔ E si spegne il `min-width`, o resta lui a tenere aperta la tabella anche impilata. */ @media (max-width: 720px) { .bs-pal, .bs-pal tbody, .bs-pal-riga, .bs-pal td { display: block; width: auto; } .bs-pal-testa { display: none; } /* un'intestazione senza colonne non dice niente */ .bs-pal-riga { padding: 8px 10px; border-bottom: 1px solid var(--line); } .bs-pal-nome { min-width: 0; padding: 0 0 6px; } .bs-pal-quote { width: auto; white-space: normal; padding: 0; } .bs-pal-quote .chip { min-width: 48px; } .bs-pal-altri { display: none; } /* il nome è già un link alla scheda */ }