/* ═══════════════════════════════════════════════════════════════════════════ TIMERBET PLAYER — IL LAYER MOBILE COMUNE Autore: D (design). Ordine GC 19/07: su telefono il player deve sembrare un'APP, non un sito rimpicciolito, e deve valere su TUTTI i temi. PERCHÉ UN FILE SOLO. I temi sono quattro sistemi diversi (base classico, layout-libreria, temi importati «fedeli», temi sanificati) e ognuno porta il CSS del suo grafico. Aggiustarli uno per uno significa rifarlo quattro volte e vederlo rompersi al quinto tema. Qui invece: un foglio, caricato in coda a `` così vince per cascata, che parla ai GANCI DI CLASSE che i temi già espongono. COME SI RITINGE. Niente colori sparsi nelle regole: tutto passa dalle variabili qui sotto. Un tema che vuole la sua tinta ridefinisce quelle, in `` o nel proprio foglio, e il resto si adegua: :root { --tbm-bg:#101820; --tbm-accent:#00d4a0 } REGOLA DELLA CASA rispettata: l'ORO è il denaro. Nella barra in basso l'unica cosa dorata è la schedina — l'unico posto dove ci sono i tuoi soldi. Il markup della barra sta in `player/_bottom_nav.html` (frammento a sé). ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* la soglia: sotto questa larghezza il player diventa un'app */ --tbm-bar-h: 56px; /* 🔴 18/08 — QUANTO SI ALZANO I BOTTONI FLOTTANTI quando la barra in basso c'è. Sta qui e non dentro la regola perché adesso la barra esce in DUE fasce (sotto i 901 sempre; fra 901 e 1023 solo dove il coupon non si raggiunge — carta `DAV-1436`): due cancelli, e il valore dev'essere lo stesso o i bottoni si alzano di misure diverse nelle due. */ --tbm-alzata: calc(var(--tbm-bar-h) + var(--tbm-safe) + 12px); /* LA BARRA È VETRO SCURO, NON IL BLU DI UN TEMA. Verificata sui 4 temi importati: il n.1 è blu, il n.2 verde/nero, il n.4 chiaro con oro. Una barra blu fissa, su quelli, sembrava incollata sopra da un'altra app. Non si rincorrono quattro tavolozze: la barra è cromo persistente e si comporta come tale — un velo scuro traslucido che sfoca ciò che ci scorre sotto e sta bene su qualunque fondo. Un tema che voglia la sua tinta ridefinisce queste variabili e vince. */ --tbm-bg: rgba(12,20,30,.90); --tbm-bg-2: rgba(8,14,22,.94); --tbm-ring: #101a26; /* tinta PIENA: anelli e contorni, dove il velo non va */ --tbm-ink: #ffffff; --tbm-dim: rgba(255,255,255,.60); --tbm-accent: #F5B301; /* oro TimerBet = il denaro */ --tbm-accent-ink: #1a1205; --tbm-live: #ff3b3b; --tbm-line: rgba(255,255,255,.12); --tbm-r: 14px; /* la tacca dei telefoni recenti: si somma, non si indovina */ --tbm-safe: env(safe-area-inset-bottom, 0px); } /* ═══ 1. LA REGOLA CHE VIENE PRIMA DI TUTTE ═══ Niente scorrimento orizzontale. Non è una preferenza estetica: se il documento è più largo del telefono, il browser rimpicciolisce l'intera pagina per farcela stare e il testo diventa illeggibile — che è esattamente il difetto segnalato (il player si allargava a 473px su uno schermo da 390). Le cause vere erano due elementi a larghezza fissa nell'intestazione. */ @media (max-width: 900px){ /* ⚠️ 17/08 — `overflow-x` QUI NON COMANDA, e chi legge questa riga crede di sì. * `header_prefs.css:48` dichiara `html, body{ overflow-x:clip }` **senza media query**, e nel * pacchetto `casa.css` viene DOPO questo foglio (`app_mobile.css` è il primo di `FOGLI`): * stessa specificità, e a parità vince l'ultima ⇒ sotto i 900 px vale `clip`, non `hidden`. * ⚖️ Non cambia cosa vede chi naviga (tagliano tutt'e due), ma cambia cosa si può misurare: * con `hidden` un elemento uscito resta raggiungibile via `scrollLeft`, con `clip` no. * 👉 Se un giorno serve `hidden` davvero, non basta scriverlo qui: va alzata la specificità * o tolto di là. 📮 `inbox/dispacci/17-08_A-CHI-TOCCA-UN-CSS_app_mobile-e-il-PRIMO-…` */ html, body{max-width:100%; overflow-x:hidden} /* media e tabelle non sfondano mai il contenitore */ img, video, iframe, canvas, svg{max-width:100%; height:auto} table{max-width:100%} /* il velo di caricamento seguiva la larghezza sfondata invece dello schermo */ #loaderCtm, .loader-ctm{width:100% !important; max-width:100vw} } /* ═══ 2. INTESTAZIONE COMPATTA ═══ Sul telefono l'intestazione deve dire tre cose e basta: chi sei, quanto hai, e come si ricarica. La barra dei menu del desktop sparisce — le sue voci vivono nella barra in basso, dove ci arriva il pollice. */ @media (max-width: 900px){ .hd-ctm{position:sticky; top:0; z-index:900} .hd-top-header{padding:6px 10px !important; gap:8px} .hd-ctm--logo img, .nav-logo--img{max-height:26px; width:auto} /* ERA IL COLPEVOLE DELL'ALLARGAMENTO: 433px fissi, in position:fixed. Sul telefono non serve: è la nav desktop, sostituita dalla barra in basso. */ .hd-ctm--menu{display:none !important} /* i cartellini «promo/agente/deposita» dell'intestazione: via, sono desktop */ .hd-menu--top{display:none !important} /* saldo e deposita restano, ma stretti e leggibili */ .hd-top-header--right{gap:6px; flex-wrap:nowrap; min-width:0} .hd-ctm--auth{gap:6px; min-width:0} .hd-ctm--auth .btn-ctm{ min-height:36px; padding:6px 10px; font-size:12.5px; white-space:nowrap} .hd-ctm--auth .btn-text{font-variant-numeric:tabular-nums} .text-separator{display:none} /* L'orologio dell'intestazione sfondava lo schermo (arrivava a 447px su 390) ed e' l'unica cosa li' dentro che il telefono ha gia' nella sua barra di stato. */ #tbClock{display:none} } /* ═══ 2-bis. LA BARRA DEL CONTO NON STA SOPRA IL MARCHIO ═══ * * 🔴 IL DIFETTO, misurato sul servito (timerbet, 17/08) e non dedotto: la nostra barra del conto * (`.hu`) è più larga della fetta che il tema le dà, e la eccedenza si divide **sui due lati** * perché il contenitore del tema centra (`justify-content:center`). Quella di sinistra finisce * addosso al marchio, che sta nell'angolo: * * 390px nodo di rete barra 40..386 (346 px) in una fetta di 246 → copre 42 px di logo * `elementFromPoint` sul centro del marchio → **DIV.hu-user** * 390px giocatore barra 95..358 (263 px) in una fetta di 218 → copre 14 px * 320px nodo di rete copre 58 px **e 26 px di barra stanno fuori schermo** (invisibili: * `overflow-x:hidden` della §1 non fa scorrere, taglia) * * ⚠️ Non è un difetto del blocco fido: la barra di un GIOCATORE, che il fido non ce l'ha, copre * il marchio lo stesso. Il fido (Stefano, 14/08 12:53) l'ha solo reso evidente, perché è la parte * più a sinistra della pillola. Chi lo togliesse per «riparare» toglierebbe il sintomo. * * ✅ LA CURA: sotto la soglia la barra prende una riga sua, e dentro quella riga può andare a * capo. Così nessun pezzo si sovrappone al marchio e nessuno esce dallo schermo — la fila si * accorcia da sé quando lo schermo è stretto, invece di sfondare. * * 📏 LA SOGLIA NON È INVENTATA: misurata a undici larghezze, la sovrapposizione comincia fra * 500 px (0) e 480 px (6 px). I 520 sono il confine che questa testata ha GIÀ — è quello del * pannello di ricarica (`barra_utility.html`, `.hu-ric-pan` sotto i 520) — quindi non se ne * aggiunge uno nuovo, si usa il suo. * * ⚖️ COSA COSTA, detto: l'intestazione cresce. Misurato a 390 px: 92 → 133 px per un nodo di * rete, 44 → 78 per un giocatore. È il prezzo di far stare tutto: prima quei pixel c'erano lo * stesso, solo che stavano sopra il logo o fuori dallo schermo. * * 🔒 E RESTA CASA NOSTRA: `:has(.hd-ctm--auth-hu)` — quella classe la scrive il NOSTRO widget * (`theme_family/barra_utility.html:27`), quindi la riga tocca solo le testate che ospitano la * nostra barra. Su una skin di un cliente che non ce l'ha, il selettore non aggancia niente. * ⚠️ `:has()` è di dicembre 2023: dove non c'è, il browser butta la regola intera e la pagina * resta quella di oggi — la cura non arriva, ma niente si rompe. */ @media (max-width: 520px){ .hd-top-header:has(.hd-ctm--auth-hu){flex-wrap:wrap} .hd-top-header--right:has(.hd-ctm--auth-hu){flex:1 0 100%; justify-content:flex-end} .hd-ctm--auth-hu{max-width:100%} /* la fila va a capo da sé: a 390 sta in due righe, a 280 in tre, e non esce mai dal bordo * * 🔴 17/08 — QUESTA RIGA ERA `.hu{…}` E SUL SERVITO NON MORDEVA. Misurato in browser sulla * pagina vera dopo che la cura è andata in onda: `flex-wrap` **calcolato** = `nowrap`, e a * 320/360 px su un nodo di rete restavano **35 e 15 px di barra fuori schermo** — cioè persi, * perché la §1 ha `overflow-x:hidden`. La copertura del marchio era a posto (la reggono le * tre righe qui sopra, che hanno un `:has()` e quindi pesano di più); a cadere era solo questa. * * LA CAUSA, e non è di questa regola: `header_user.css` dichiara `.hu{…flex-wrap:nowrap…}`, * stessa specificità — e nel PACCHETTO `casa.css` la nostra sta a byte 1.970 e la sua a 65.262. * A parità di specificità vince chi viene DOPO. `justify-content` mordeva solo perché lì non * è dichiarato. * * ⚠️ E NON È UN CASO ISOLATO: `app_mobile.css` è il **primo** dei 30 fogli di `FOGLI` * (`player_ui/mobile.py`). Ogni regola scritta qui parte perdente contro una di pari * specificità scritta in QUALUNQUE altro foglio di casa. Chi cura qui deve o alzare la * specificità (come sotto) o sapere che sta scrivendo un valore di partenza, non una cura. * 📌 Stessa forma del `7c83d9838` di ieri sera («a parità di specificità vince chi viene DOPO»). * * 👉 La cura non è `!important`: è il contesto che la regola ha già intorno. `.hd-ctm--auth-hu` * è la classe del NOSTRO widget — la stessa che le tre righe sopra usano per non uscire di * casa — quindi il perimetro non cambia di un elemento, e la specificità sale a (0,2,0). */ .hd-ctm--auth-hu .hu{flex-wrap:wrap; justify-content:flex-end} } /* ═══ 3. IL CORPO: CARD, NON TABELLE STRETTE ═══ */ @media (max-width: 900px){ .page-container, .main-wrapper, .main-container{ display:block !important; width:100% !important; max-width:100% !important; margin:0 !important; padding-left:0 !important; padding-right:0 !important} /* lo spazio che la barra in basso occupa: il contenuto non ci finisce sotto */ body{padding-bottom:calc(var(--tbm-bar-h) + var(--tbm-safe) + 8px) !important} /* i pannelli diventano card a tutta larghezza con un filo d'aria */ .box-main, .ctm-panel, .box-sidebar{border-radius:12px; margin:8px 8px 10px} /* La riga «filtri + tab sport» è un flex che sul telefono si schiaccia: il testo del selettore va a capo su tre righe e le tab si tagliano a metà parola. Si impila invece di comprimere. */ .box-main--wrapper{flex-wrap:wrap} .box-main--left, .box-main--middle, .box-main--right{ min-width:0; max-width:100%; flex-basis:100%} .box-main--left{display:flex; align-items:center; gap:8px; white-space:nowrap} /* IL BERSAGLIO DEL POLLICE. 44px è la misura sotto la quale si sbaglia tasto — e qui sbagliare tasto significa piazzare la quota sbagliata. Non si applica ai bottoni dell'intestazione: là lo spazio verticale è prezioso e non si scommette. */ .qt-btn, .menu-button, .tabs-ctm--item, .menu-item > a, .tab-item--btn{ min-height:44px; display:flex; align-items:center; justify-content:center} .qt-btn{font-size:15px; font-weight:800} /* le quote: tre colonne uguali, non una fila che deborda */ .tb-btns, .odds-select, .odds-row{ display:grid !important; grid-template-columns:repeat(3,1fr); gap:6px} .tb-btns > *, .odds-select > *{min-width:0} /* Le liste orizzontali scorrono col dito invece di tagliarsi a metà parola. ⚠ NON si tocca il `display` dei contenitori `owl-carousel`: quel carosello è gestito da uno script del tema che si costruisce la sua riga scorrevole da sé — forzarlo a flex gliela svuota (provato: le tab degli sport sparivano). Si dà solo il permesso di scorrere a chi non è un carosello. */ .top-menu--horizontal, .top-menu--wrapper, .coupon-tabs, .tabs-ctm{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none} .top-menu--horizontal::-webkit-scrollbar, .tabs-ctm::-webkit-scrollbar{display:none} .tab-items--ctm:not(.owl-carousel){ display:flex; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none} .tab-items--ctm:not(.owl-carousel) .tab-item--ctm{flex:none} } /* ═══ 4. IL MENU SPORT COME CASSETTO ═══ Il tema ha già l'aside e il suo velo cliccabile: non serve markup nuovo, basta ridefinire cosa vuol dire «aperto» sotto la soglia. */ @media (max-width: 900px){ #leftSidebarSport.left-sidebar{ position:fixed; inset:0 auto 0 0; z-index:1000; width:min(84vw, 340px); max-width:340px; transform:translateX(-102%); transition:transform .26s cubic-bezier(.22,.61,.36,1); overflow-y:auto; overscroll-behavior:contain; box-shadow:2px 0 24px rgba(0,0,0,.4)} #leftSidebarSport.left-sidebar.active{transform:translateX(0)} .sidebar--overlay{ position:fixed; inset:0; z-index:999; background:rgba(4,14,24,.55); opacity:0; pointer-events:none; transition:opacity .22s} .left-sidebar.active .sidebar--overlay, .right-sidebar.active .sidebar--overlay{opacity:1; pointer-events:auto} /* i bottoni «richiudi» del desktop non hanno senso in un cassetto */ .button-collapse{display:none} } /* ═══ 5. LA SCHEDINA COME PANNELLO DAL BASSO ═══ Su telefono una colonna laterale schiacciata è illeggibile proprio quando conta di più: al momento di giocare. Diventa un foglio che sale dal basso, con la maniglia, che si chiude trascinando o toccando fuori. ⚠ Lo stato sta su #rightSidebarSport, MAI su .box-sidebar--coupon: quel nodo viene rimpiazzato per intero a ogni gamba aggiunta o tolta, e con lui sparirebbe la classe di apertura. */ @media (max-width: 900px){ #rightSidebarSport.right-sidebar{ position:fixed; inset:auto 0 0 0; z-index:1000; width:100%; max-width:100%; height:auto; max-height:84vh; transform:translateY(102%); transition:transform .28s cubic-bezier(.22,.61,.36,1); border-radius:var(--tbm-r) var(--tbm-r) 0 0; background:var(--tbm-bg); box-shadow:0 -8px 30px rgba(4,14,24,.45); display:flex; flex-direction:column; overflow:hidden} #rightSidebarSport.right-sidebar.active{transform:translateY(0)} /* la maniglia: dice «questo si trascina» senza scriverlo */ #rightSidebarSport.right-sidebar:before{ content:""; flex:none; width:38px; height:4px; border-radius:99px; margin:8px auto 4px; background:var(--tbm-dim)} /* 🔴 IL FONDO DEL PANNELLO STA SOTTO LA BARRA — misurato il 13/08 col coupon aperto a 390px, e non era un sospetto: `.tbm-nav` è `z-index:1100`, il foglio 1000, e il tetto della barra cade a y 788 mentre il pannello arriva a 844. coperto **56px** esatti su tutte e tre le skin ( = `--tbm-bar-h` ) conseguenza l'ULTIMO bottone del coupon — «Carica coupon» — finisce SOTTO la barra ⛔ Il vecchio `padding-bottom` contava solo la tacca del telefono (`--tbm-safe`) e non la barra che questo stesso foglio disegna trenta righe più giù: due pezzi della stessa pagina che non sapevano l'uno dell'altro. Adesso lo spazio in fondo è alto quanto la barra. 📌 Vale per tutti e due gli impianti, e il difetto c'era prima di questo lavoro: l'ho trovato aprendo il pannello nuovo e guardando cosa succedeva anche all'altro. */ #rightSidebarSport .right-sidebar--wrapper{ overflow-y:auto; overscroll-behavior:contain; padding-bottom:12px; padding-bottom:calc(var(--tbm-bar-h) + var(--tbm-safe) + 12px)} /* il gancio desktop per aprire la colonna: sul telefono ci pensa la barra */ #rightSidebarSport .right-sidebar--openmenu{display:none} .box-sidebar.box-sidebar--coupon{margin:8px 8px 8px; border-radius:12px} /* 📏 ANGELO 18/08 12:02 «rispetta lo spazio»: il margin-top era 0 e il riquadro si attaccava a «Ricarica rapida» (misurato: stacco 0px sopra, 8px sotto). Gli altri .box-sidebar prendono 8px dalla regola generale di questa stessa media query; qui erano azzerati. ⛔ Si cura SOLO da questo lato: metterlo anche sul blocco sopra farebbe 16px. */ /* ── E LO STESSO FOGLIO PER L'ALTRO IMPIANTO DI BARRE ────────────────────── Punto 5 di Dav (13/08 08:23): *«in tutte le pagine da mobile devi mostrare solo la parte centrale, l'header e il footer»*. Il blocco qui sopra lo mantiene dove la barra destra è `#rightSidebarSport`; dove è `aside.rail-r` NON lo manteneva, e la misura dice quanto: a 390px, `.rail-r` è `position:static` e cade a y 32.782 su una pagina alta 33.923 y 3.410 su una alta 4.512 ⛔ Cioè il coupon non era «di fianco»: era in fondo a trentamila pixel. Non è un difetto di disegno — è una colonna che su telefono NESSUNO raggiunge. E il punto 4 senza il punto 5 l'avrebbe fatta vedere in DUE posti insieme (nel pannello e in coda alla pagina). 🔑 NIENTE CLASSI NUOVE (regola Dav 14:16): stessa forma, stesso `.active`, stessa maniglia. ⛔ E NON si è riusato l'id `#rightSidebarSport` mettendolo sull'`aside`, che sarebbe stata la scorciatoia: `@media (min-width:1024px)` gli dà `width:300px; flex:0 0 300px`, e sul desktop avrebbe spento la colonna larga a 500px chiesta da Jesper il 10/08. Misurato prima di scrivere, non dopo. 📌 Vince su `.rail-r{position:static}` di `tb.css` per ordine di cascata, non per un `!important`: il pacchetto di casa è linkato DOPO. */ .rail-r{ position:fixed; inset:auto 0 0 0; z-index:1000; width:100%; max-width:100%; height:auto; max-height:84vh; transform:translateY(102%); transition:transform .28s cubic-bezier(.22,.61,.36,1); border-radius:var(--tbm-r) var(--tbm-r) 0 0; background:var(--tbm-bg); box-shadow:0 -8px 30px rgba(4,14,24,.45); display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain; /* ⬇ alto quanto la barra in basso, che gli sta SOPRA di 56px: vedi il blocco qui sopra */ padding-bottom:calc(var(--tbm-bar-h) + var(--tbm-safe) + 12px)} .rail-r.active{transform:translateY(0)} /* la maniglia, identica all'altro impianto: dice «questo si trascina» senza scriverlo */ .rail-r:before{ content:""; flex:none; width:38px; height:4px; border-radius:99px; margin:8px auto 4px; background:var(--tbm-dim)} } /* ═══ 6. LA BARRA IN BASSO ═══ Il pollice ci arriva tutto. La schedina sta in mezzo e sporge: è l'azione che vale soldi, e l'unica dorata. 📌 «Cinque voci» diceva questa riga, ed era vero fino al 13/08: adesso sono QUATTRO, CINQUE o SEI — il casinò sparisce dove la vetrina è vuota (`has_casino`), il burger compare solo dove c'è una barra sinistra da aprire. La griglia qui sotto le conta. */ .tbm-nav{display:none} /* 🔴 18/08 — IL CANCELLO ARRIVA A 1023, NON A 900. Dav, 17/08 14:36: *«da 900 a 1280 nascondi la right bar e fai comparire il bottone per aprirla»*. Misurando (carta `A/todo/DAV-1436-…`) sotto la richiesta c'è un difetto che nessuno aveva nominato: **fra 901 e 1023 px, sulla pagina del palinsesto — quella del suo scatto — il coupon non si raggiunge**, e non c'è niente da premere. @1000px, pagina `/player/eventi-giorno/scegli?...` timerbet `#rightSidebarSport` **0×816**, spinto a x 1000 ⇒ sparito studio5 `.rail-r` 960×235 ma a **y 1.123** (pagina alta 2.002) ⇒ impilato sotto betslot `.rail-r` 960×180 a **y 2.161** (pagina alta 3.032) ⇒ idem e su tutte e tre: barra `display:none`, tasto `#tbmSlip` **0** ⚖️ Sulla HOME, alla stessa larghezza, il coupon **c'è** su tutte e tre (300 · 268 · 960): il difetto è della pagina, non della skin. Per questo il cancello qui sotto non nomina né l'una né l'altra: **guarda se il coupon si raggiunge**, e la risposta cambia da pagina a pagina. ⛔ E 1023 non è un numero nuovo: è la soglia che il tema si è già scelto (`/player/theme-asset/1/script/extra.js`, `isMobile = innerWidth < 1024`). 📌 Qui c'è solo il VESTITO, definito una volta per tutta la fascia in cui la barra può uscire. **Chi esce dove** lo decide il cancello in negativo subito dopo il blocco. */ @media (max-width: 1023px){ /* 🔴 LA BARRA CONTA LE SUE VOCI, non ne dà per scontate cinque (13/08, carta `188-d`). Il burger del punto 2 di Dav è la SESTA, e con `repeat(5,1fr)` sarebbe andato a capo: la barra raddoppiava di altezza e copriva il contenuto. E il cinque fisso era già ottimista prima del burger — `has_casino` toglie la voce del casinò dove la vetrina è vuota, e quattro voci in cinque colonne lasciano una cella vuota a destra, cioè la barra sbilenca. `grid-auto-flow:column` le tiene su UNA riga a qualunque numero. ⛔ Nessuna classe nuova: cambia come la riga esistente conta, non cosa veste. */ .tbm-nav{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; align-items:end; position:fixed; inset:auto 0 0 0; z-index:1100; height:calc(var(--tbm-bar-h) + var(--tbm-safe)); padding-bottom:var(--tbm-safe); background:linear-gradient(180deg,var(--tbm-bg),var(--tbm-bg-2)); -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3); border-top:1px solid var(--tbm-line); box-shadow:0 -2px 14px rgba(4,14,24,.35)} /* dove la sfocatura non c'è, il velo si fa quasi pieno: se no si legge il testo sotto */ @supports not (backdrop-filter: blur(1px)){ .tbm-nav{background:linear-gradient(180deg,#0d1520,#080e16)} } /* 📌 `a` E `button` INSIEME, e non è una svista di scrittura: il burger del punto 2 è un `