/* ═══════════════════════════════════════════════════════════════════════════ 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; /* 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){ 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} } /* ═══ 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)} #rightSidebarSport .right-sidebar--wrapper{ overflow-y:auto; overscroll-behavior:contain; padding-bottom:12px; padding-bottom:calc(12px + var(--tbm-safe))} /* 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:0 8px 8px; border-radius:12px} } /* ═══ 6. LA BARRA IN BASSO ═══ Cinque voci, il pollice ci arriva tutto. La schedina sta in mezzo e sporge: è l'azione che vale soldi, e l'unica dorata. */ .tbm-nav{display:none} @media (max-width: 900px){ .tbm-nav{ display:grid; grid-template-columns:repeat(5,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)} } .tbm-nav a{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; height:var(--tbm-bar-h); min-width:0; padding:0 2px; color:var(--tbm-dim); text-decoration:none; font-weight:700; -webkit-tap-highlight-color:transparent} .tbm-nav a svg{width:22px; height:22px; flex:none; display:block} /* Le ETICHETTE si troncano se non ci stanno. `:not(.tbm-slip-btn)` non è pignoleria: anche il tondo della schedina è uno , e con `overflow:hidden` addosso ritagliava via il contatore delle selezioni, che sporge apposta dal bordo. */ .tbm-nav a > span:not(.tbm-slip-btn){ font-size:10px; line-height:1; letter-spacing:.01em; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .tbm-nav a.is-on{color:var(--tbm-ink)} /* il filo sopra la voce attiva: dice dove sei senza rubare spazio */ .tbm-nav a.is-on:before{ content:""; position:absolute; top:0; width:26px; height:3px; border-radius:0 0 3px 3px; background:var(--tbm-accent)} .tbm-nav a{position:relative} .tbm-nav a:focus-visible{outline:2px solid var(--tbm-accent); outline-offset:-3px} /* il pallino rosso del live: pulsa piano, come il minuto che scorre */ .tbm-nav .tbm-live-dot{ position:absolute; top:9px; margin-left:17px; width:7px; height:7px; border-radius:50%; background:var(--tbm-live); box-shadow:0 0 0 2px var(--tbm-bg); animation:tbm-pulse 2s ease-in-out infinite} @keyframes tbm-pulse{50%{opacity:.35}} /* ── la schedina: il tasto rialzato ── */ .tbm-nav .tbm-slip{justify-content:flex-end; padding-bottom:5px} .tbm-nav .tbm-slip .tbm-slip-btn{ position:absolute; bottom:calc(var(--tbm-bar-h) - 28px); left:50%; transform:translateX(-50%); width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg,#ffcb3d,var(--tbm-accent)); color:var(--tbm-accent-ink); /* l'anello della barra stacca il tondo; l'ombra sotto è corta, non un alone — una sfocatura larga di colore su fondo scuro sembra un difetto di stampa */ box-shadow:0 0 0 4px var(--tbm-ring), 0 3px 8px rgba(4,14,24,.45)} /* il contatore sporge dal bordo del tondo APPOSTA: qui niente ritaglio, mai */ .tbm-nav .tbm-slip-btn{overflow:visible !important} .tbm-nav .tbm-slip .tbm-slip-btn svg{width:24px; height:24px} /* l'etichetta della schedina sta sotto il tondo: va tenuta leggibile, non in ombra */ .tbm-nav .tbm-slip > span{margin-top:auto; color:var(--tbm-ink)} /* il contatore delle selezioni: compare solo se c'è davvero qualcosa dentro */ .tbm-nav .tbm-count{ /* sporge in alto a destra del tondo e sta SOPRA a tutto: se finisce sotto il bordo il numero si perde a metà, ed è il numero che dice quante giocate hai in mano */ position:absolute; top:-5px; right:-7px; z-index:3; min-width:19px; height:19px; padding:0 5px; border-radius:99px; background:var(--tbm-live); color:#fff; font-size:11px; font-weight:900; line-height:19px; text-align:center; box-shadow:0 0 0 2px var(--tbm-ring); display:none} .tbm-nav.has-slip .tbm-count{display:block} /* ── i pulsanti flottanti che c'erano già finirebbero SOTTO la barra ── */ .pa-fab, .tbtour-fab{ bottom:calc(var(--tbm-bar-h) + var(--tbm-safe) + 12px) !important} @media (prefers-reduced-motion: reduce){ .tbm-nav .tbm-live-dot{animation:none} #leftSidebarSport.left-sidebar, #rightSidebarSport.right-sidebar, .sidebar--overlay{transition:none} } } /* ═══ 7. TABLET ═══ A 768px non serve la barra da telefono: ci sta ancora una colonna in più. Si toglie solo ciò che deborda e si allarga il tocco. */ @media (min-width: 901px) and (max-width: 1024px){ .hd-menu--list{flex-wrap:wrap} .qt-btn{min-height:40px} .left-sidebar{width:240px; min-width:0} } /* ── LA BANDA SPORT DEL TEMA SCORRE NEL SUO CONTENITORE (bug GC 20/07) ───────────────── `.tab-items--c` (markup del tema, vive nel DB) è un flex NOWRAP largo quanto la somma degli sport (1086px con l'offerta di oggi): senza questo, o un antenato la clippa (gli sport oltre il bordo diventano IRRAGGIUNGIBILI) o — dove il clip non c'è — trascina la pagina in overflow-x. Vale a ogni larghezza: anche la colonna desktop è più stretta della banda. La pagina non scrolla MAI di lato: già garantito dal guard html/body. */ .box-main--sports-tab .tab-items--ctm, .box-main--sports-tab .box-main--typemarket-container{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none} .box-main--sports-tab .tab-items--ctm::-webkit-scrollbar{display:none} /* ── IL CAMPO RICERCA DELLA NAVBAR SPORT VA A CAPO SU MOBILE (bug GC 20/07) ──────────── `.box-main--top` è flex NOWRAP e largo ~1307px: la strip sport scorre nel suo box (fix precedente), ma il `.search-box--ctm` — fratello FUORI dallo scroll, largo fisso 443px — restava tagliato/fuori dal viewport a 390/360. Qui, sotto i 900px, la riga va a capo: la strip tiene la prima riga (e scorre), il search scende sotto a piena larghezza e si comprime nel contenitore. Il body non scrolla mai di lato (guard html/body sopra). */ @media (max-width: 900px){ /* prima: il contenitore della navbar sport NON deve essere più largo del viewport, se no le % dei figli si calcolano su 1307px (il search diventava 1117px). */ .box-main--sports-tab, .box-main--sports-tab .box-main--wrapper, .box-main--sports-tab .box-main--top{max-width:100%;min-width:0;box-sizing:border-box} .box-main--sports-tab .box-main--top{flex-wrap:wrap;width:100%} /* la strip tiene la prima riga e scorre nel suo box; il search scende sotto a piena larghezza del VIEWPORT (ora che il contenitore è vincolato) e si comprime. */ .box-main--sports-tab .box-main--center{flex:1 1 100%;min-width:0;max-width:100%;overflow-x:auto} .box-main--sports-tab .box-main--left{flex:0 0 auto;min-width:0} .box-main--sports-tab .box-main--right{flex:1 1 100%;width:100%;max-width:100%;min-width:0;margin-top:6px} .box-main--sports-tab .search-box--ctm{width:100%;max-width:100%;min-width:0;box-sizing:border-box} .box-main--sports-tab .search-box--ctm input{width:100%;min-width:0;box-sizing:border-box} } /* ============================================================================ MENU SINISTRO COLLASSATO — «live» diventa solo un pallino (richiesta Dav 22/07) «quando é collapsed/minimizzato togli la scritta live e lascia solo il pallino rosso (font size 0, border-radius 50%) così non fa sballare il layout». Stato: il tema mette `.active` sulla sidebar ESPANSA → il collassato è `.left-sidebar:not(.active)`. Da espanso resta tutto com'è (testo + pallino). ⚠️ Perché questa regola sta QUI e non in tb.css: sulle pagine a tema importato `tb.css` NON è caricato — i fogli sono quelli del tema (`/player/theme-asset/…`) più questo `app_mobile.css`, iniettato con nell'head dalla middleware. Questo è l'unico nostro foglio che arriva a quelle pagine. (Regola di casa rispettata: file .css collegato, nessun inline.) Se un domani la middleware inietterà più fogli, questa sezione può traslocare in `tb_components.css`. Design D. ========================================================================== */ .left-sidebar:not(.active) .ms-tag.live, .left-sidebar:not(.active) .ms-live{ /* la scritta sparisce senza togliere il nodo (niente salti di layout) */ font-size:0; line-height:0; /* … e l'indicatore diventa un pallino tondo */ display:inline-block; width:9px; height:9px; min-width:0; padding:0; border-radius:50%; flex:none; vertical-align:middle; /* il rosso resta quello del tema: se il badge aveva già il suo fondo lo tiene, altrimenti questo fallback lo rende comunque visibile */ background:#ff3b3b; color:transparent; border:0; box-shadow:0 0 0 2px rgba(255,59,59,.22); } /* il pallino non deve allargare la riga né spingere il chevron */ .left-sidebar:not(.active) .btn-menu--group, .left-sidebar:not(.active) .menu-group > a{ gap:6px; } /* ============================================================================ FIX header submenu — hover-gap (BUG Dav 22/07) + spazio voci Il tema (template_c_header.css, servito dal DB) apre il submenu con `position:absolute; top:100px → 36px; transition:all .5s`: tra la voce e il pannello resta un VUOTO e lo slide di mezzo secondo fa perdere l'hover → il submenu si chiude prima di poterci cliccare. Questo foglio è iniettato DOPO il CSS del tema, quindi vince a parità di selettore (stessa specificità, regola più recente). Niente JS. Design D. ========================================================================== */ /* il
  • è il contenitore dell'hover: assicuriamoci che il submenu si posizioni rispetto a lui e stia ATTACCATO alla voce (niente più top:100px/36px). */ .hd-ctm.hd-ctm--c .hd-ctm--menu ul.hd-menu--list > li{ position:relative; } .hd-ctm.hd-ctm--c .hd-ctm--menu .hd-submenu--container{ top:100%; /* flush sotto la voce: nessun gap verticale */ z-index:15; /* niente slide di posizione: solo un fade rapido, così non "scappa" */ transition:opacity .12s ease, visibility .12s ease; opacity:0; visibility:hidden; /* nascosto ma pronto (no display:none: serve l'hover) */ } .hd-ctm.hd-ctm--c .hd-ctm--menu ul.hd-menu--list > li:hover .hd-submenu--container{ top:100%; /* resta attaccato, non salta */ opacity:1; visibility:visible; transition:opacity .12s ease; } /* PONTE invisibile che copre l'eventuale micro-gap tra la voce e il pannello: così spostando il cursore verso il basso non si esce mai dall'area in hover. */ .hd-ctm.hd-ctm--c .hd-ctm--menu .hd-submenu--container::before{ content:""; position:absolute; inset-inline:0; top:-10px; height:12px; background:transparent; } /* mentre il submenu è aperto, tieni la freccia/voce in stato attivo (feedback) */ .hd-ctm.hd-ctm--c .hd-ctm--menu ul.hd-menu--list > li:hover > a .mdi-chevron-down{ transform:rotate(180deg); } /* --- SPAZIO VOCI: righe COMPATTE (Angelo Repoli 24/07): meno padding verticale, più dense, così ne entrano di più senza scroll — coerente con la tendina LIVE qui sotto. --- */ .hd-ctm.hd-ctm--c .hd-ctm--menu .hd-submenu--container ul > li{ text-align:left; font-size:12.5px; padding:0; border-radius:0; } .hd-ctm.hd-ctm--c .hd-ctm--menu .hd-submenu--container ul > li + li{ border-top:1px solid rgba(255,255,255,.06); /* separatore leggibile */ } .hd-ctm.hd-ctm--c .hd-ctm--menu .hd-submenu--container ul > li a{ display:flex; align-items:center; padding:.28rem .8rem; /* righe più strette/dense (prima .5rem) */ font-size:12.5px; line-height:1.2; font-weight:400; border-left:0; /* il filetto a sinistra affollava: via */ white-space:nowrap; } .hd-ctm.hd-ctm--c .hd-ctm--menu .hd-submenu--container ul > li a:hover{ background:rgba(47,127,209,.10); /* hover BLU come la tendina LIVE: uniforme su tutte e 5 le voci e leggibile sul fondo bianco/blu dei submenu (Angelo 24/07) */ } .hd-ctm.hd-ctm--c .hd-ctm--menu .hd-submenu--container{ min-width:210px; padding:4px 0; border-radius:6px; box-shadow:0 12px 30px rgba(0,0,0,.35); } @media (prefers-reduced-motion:reduce){ .hd-ctm.hd-ctm--c .hd-ctm--menu .hd-submenu--container{transition:none} } /* ============================================================================ ICONA CALENDARIO chiara sui campi data SCURI (Dav 22/07) Nei filtri con campo navy (`.tb-filtri`, e `.bl--scuro`), l'indicatore nativo del date input è scuro su fondo scuro → invisibile. Lo schiariamo. NON tocchiamo i filtri a campo bianco (`.bl` chiaro di «Le mie scommesse»): lì l'icona scura si vede già, e invertirla la renderebbe bianco-su-bianco. CSS via . Design D. ========================================================================== */ .tb-filtri input[type=date]::-webkit-calendar-picker-indicator, .bl--scuro .bl-campo input[type=date]::-webkit-calendar-picker-indicator{ filter:invert(1) opacity(.7); /* bianco/grigio chiaro come il testo del campo */ cursor:pointer; } .tb-filtri input[type=date]:hover::-webkit-calendar-picker-indicator, .bl--scuro .bl-campo input[type=date]:hover::-webkit-calendar-picker-indicator{ filter:invert(1) opacity(1); } /* ============================================================================ A32 — INTESTAZIONE LOGGATA COMPATTA E RESPONSIVE (22/07) Segnalazione: su telefono i pulsanti dell'header (CONTO, DEPOSITA, PREMI, saldo, ESCI, ingranaggio) sono troppo grandi, sbordano e si TAGLIANO — l'ESCI a sinistra e il saldo a destra. CAUSA. Il tema importato veste il mobile solo per `.hd-ctm--a`; per la skin servita `.hd-ctm--c` lo stato LOGGATO non ha regole per telefono. Lì il contenitore ha `justify-content:center` e gli item misure fisse (btn `min-width:100px`, account-menu 40px, account-info `margin:0 1rem`): a ~390px la fila è più larga dello schermo e, essendo CENTRATA, viene tagliata da ENTRAMBI i lati. RIMEDIO. Fila ancorata a destra, item compatti, SALDO sempre per intero e leggibile. Sotto i 430px le icone secondarie (conto/premi/messaggi) — già raggiungibili dal menu account — si ritirano e l'ESCI resta come sola icona, così saldo + deposita + menu + esci ci stanno tutti senza clipping. Niente scroll-container: aprirebbe il taglio sui menu a tendina (account/lingua) che ricadono verso il basso. CSS via (regola di casa), non inline. Design D. ========================================================================== */ @media (max-width:768px){ .hd-ctm.hd-ctm--c .hd-ctm--auth.hd-ctm--auth-logged{overflow:visible; min-width:0} .hd-ctm.hd-ctm--c .hd-ctm--auth.hd-ctm--auth-logged .hd-ctm--auth-wrapper{ padding:0 4px; gap:6px; flex-wrap:nowrap; min-width:0; justify-content:flex-end; /* la fila abbraccia il bordo destro, non è più centrata */ } /* SALDO: intero, in grassetto, non va mai a capo */ .hd-ctm.hd-ctm--c .hd-ctm--auth.hd-ctm--auth-logged .account-info{ margin:0 4px 0 0; min-width:0; flex:0 0 auto; } .hd-ctm.hd-ctm--c .hd-ctm--auth.hd-ctm--auth-logged .account-info span.info-amount{ font-size:13px; font-weight:800; white-space:nowrap; } .hd-ctm.hd-ctm--c .hd-ctm--auth.hd-ctm--auth-logged .account-info span.info-user{ font-size:10.5px; max-width:22vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* icone (conto/deposita/messaggi) e ingranaggio: compatte, misura fissa piccola */ .hd-ctm.hd-ctm--c .hd-ctm--auth.hd-ctm--auth-logged .account-icon{ height:30px; min-width:30px; padding:0 7px; font-size:18px; flex:0 0 auto; border-radius:8px; } .hd-ctm.hd-ctm--c .hd-ctm--auth.hd-ctm--auth-logged .account-menu{ width:30px; min-width:30px; height:30px; font-size:19px; flex:0 0 auto; } /* ESCI/logout: via i 100px fissi */ .hd-ctm.hd-ctm--c .hd-ctm--auth.hd-ctm--auth-logged .btn-ctm, .hd-ctm.hd-ctm--c .hd-ctm--auth.hd-ctm--auth-logged ~ .hd-ctm--auth .btn-ctm{ min-width:auto; padding:6px 9px; flex:0 0 auto; } } /* fascia stretta dei telefoni: si libera lo spazio che serve al saldo */ @media (max-width:430px){ /* l'username si legge nel menu account: sul saldo pesa e basta */ .hd-ctm.hd-ctm--c .hd-ctm--auth.hd-ctm--auth-logged .account-info span.info-user{display:none} /* conto / premi / messaggi restano nel menu account, non nella barra */ .hd-ctm.hd-ctm--c .hd-ctm--auth.hd-ctm--auth-logged .account-icon:not(.account-deposit){display:none} /* ESCI diventa sola icona (il testo starebbe stretto); ACCEDI/REGISTRATI da sloggato NON è toccato */ .hd-ctm.hd-ctm--c .hd-ctm--auth.hd-ctm--auth-logged .btn-ctm .btn-text, .hd-ctm.hd-ctm--c .hd-ctm--auth.hd-ctm--auth-logged ~ .hd-ctm--auth .btn-ctm .btn-text{display:none} .hd-ctm.hd-ctm--c .hd-ctm--auth.hd-ctm--auth-logged .hd-ctm--auth-wrapper{gap:4px} } /* ════════════════════════════════════════════════════════════════════════════ DROPDOWN «LIVE» dell'header UNIFORMATO agli altri submenu del nav (Dav 24/07). Il menu live (`.tb-livedd-menu`, «Tutti gli sport/…») era SCURO mentre SPORT/CASINO (`.hd-submenu--container`) sono BIANCO/BLU. Qui gli stessi colori/sfondo, in FILE (regola Dav: niente inline). Struttura (fixed, coordinate dal JS) invariata. ──────────────────────────────────────────────────────────────────────────── */ .tb-livedd{position:relative;display:inline-flex;align-items:center;gap:5px;cursor:pointer} .tb-livedd-car{font-size:.62em;opacity:.8;transition:transform .15s} .tb-livedd.is-open .tb-livedd-car{transform:rotate(180deg)} .tb-livedd-menu{position:fixed;z-index:5000;display:none;min-width:240px;max-height:70vh;overflow:auto; background:#fff;color:#2f7fd1;border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,.25); padding:4px 0;font-size:12.5px;font-weight:600;text-align:left} /* font come i submenu tema (12.5px) — 5 voci uniformi */ .tb-livedd.is-open .tb-livedd-menu{display:block} /* RIGHE COMPATTE (Angelo Repoli 24/07): meno padding verticale, righe più dense → ne entrano di più prima di dover scrollare. */ .tb-livedd-menu a{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:4px 14px;margin:0 8px;line-height:1.2;font-size:12.5px !important;color:#2f7fd1;text-decoration:none;white-space:nowrap;font-weight:600; border-left:2px solid rgba(29,59,90,.15)} /* !important: batte la regola nav del tema (14px), 5 voci uniformi */ .tb-livedd-menu a:hover{background:rgba(47,127,209,.08);border-left-color:#2f7fd1} .tb-livedd-menu a.on{color:#12456f;background:rgba(47,127,209,.10);border-left-color:#2f7fd1} .tb-livedd-menu a b{font-weight:800;color:#1a5da6;font-size:.86em} /* il contatore, leggibile su bianco */ .tb-livedd-menu .tb-livedd-vuoto{padding:12px 14px;opacity:.7;font-weight:500;color:#5b7793} .tb-livedd-menu .tb-livedd-sep{height:1px;background:rgba(29,59,90,.12);margin:5px 0}