/** * freeetv-controls.css — 2 réglages « bouton → petite fenêtre → choix mémorisé » (Léonard, 13/07) : * ① PLACE (gagner de la place) : replier le bandeau / plein écran / compact. * ② LUMINOSITÉ : variateur 4 crans (nuit / sombre / doux / jour) — couche data-lum * par-dessus le data-theme existant (aucune duplication du thème). * ADDITIF & isolé. Ne touche NI freeetv.css NI header.php NI freeetv.js (chargé APRÈS, * surcharge propre). Réversible en retirant ce fichier + son JS + l'enqueue. */ /* ── Popover générique (partagé par les 2 réglages) ─────────────────── */ .ftv-pop-wrap{position:relative;display:inline-flex} .ftv-pop{position:absolute;top:calc(100% + 8px);right:0;z-index:60;min-width:210px; background:var(--panel-2,#111838);border:1px solid var(--line-2,rgba(255,255,255,.14)); border-radius:12px;padding:6px;box-shadow:0 18px 44px -22px rgba(0,0,0,.7); display:flex;flex-direction:column;gap:2px} .ftv-pop[hidden]{display:none} .ftv-pop.ftv-pop--left{left:0;right:auto} .ftv-pop-opt{display:flex;align-items:center;gap:10px;width:100%;text-align:left; background:none;border:0;border-radius:8px;padding:9px 10px;cursor:pointer; color:var(--soft,#c3c9e8);font:inherit;font-size:.86rem;line-height:1.2} .ftv-pop-opt:hover{background:rgba(46,123,255,.12);color:var(--ink,#eef2ff)} .ftv-pop-opt:focus-visible{outline:2px solid var(--blue-glow,#5ea0ff);outline-offset:-2px} .ftv-pop-opt[aria-checked="true"]{background:rgba(46,123,255,.16);color:var(--ink,#eef2ff)} .ftv-pop-opt .ftv-pop-ic{flex:none;width:20px;display:grid;place-items:center} .ftv-pop-opt .ftv-pop-tx{flex:1} .ftv-pop-opt .ftv-pop-tx b{display:block;font-weight:600} .ftv-pop-opt .ftv-pop-tx small{display:block;font-size:.72rem;color:var(--faint,#5a6390);margin-top:1px} .ftv-pop-opt .ftv-pop-chk{flex:none;opacity:0} .ftv-pop-opt[aria-checked="true"] .ftv-pop-chk{opacity:1;color:var(--live,#31d07a)} /* Bouton PLACE : même gabarit rond que .theme-toggle (cohérence header). */ .ftv-place-btn{width:30px;height:30px;border:1px solid var(--line-2);border-radius:50%; display:grid;place-items:center;color:var(--soft);background:none;cursor:pointer;padding:0} .ftv-place-btn:hover{border-color:var(--blue-glow);color:var(--ink)} /* ── ① Modes PLACE (couche data-ftv-view sur ) ─────────────────── */ /* Replier le bandeau : on masque baseline + recherche, on ramène le bandeau à une barre fine. */ :root[data-ftv-view~="hero"] .classic .cl-band-sub, :root[data-ftv-view~="hero"] .classic .cl-search{display:none} :root[data-ftv-view~="hero"] .classic .cl-band .cl-band-in{padding-top:14px;padding-bottom:12px} :root[data-ftv-view~="hero"] .classic .cl-band-title{font-size:1.1rem} /* Compact : bandeau replié + colonne pays masquée + grille pleine largeur. */ :root[data-ftv-view~="compact"] .classic .cl-band-sub, :root[data-ftv-view~="compact"] .classic .cl-search{display:none} :root[data-ftv-view~="compact"] .classic .cl-band .cl-band-in{padding-top:14px;padding-bottom:12px} :root[data-ftv-view~="compact"] .classic .cl-band-title{font-size:1.1rem} :root[data-ftv-view~="compact"] .classic .cl-side{display:none} :root[data-ftv-view~="compact"] .classic .cl-layout{display:block} /* Plein écran natif : le conteneur occupe tout l'écran, fond opaque (pas de transparence). */ .classic:fullscreen{background:var(--space,#05060e);overflow-y:auto;padding:0 16px} .classic:-webkit-full-screen{background:var(--space,#05060e);overflow-y:auto;padding:0 16px} /* ── ② Variateur LUMINOSITÉ : 2 crans intermédiaires (couche data-lum) ── */ /* « Sombre » = par-dessus la NUIT (data-theme absent) : noirs relevés, contraste plus doux. */ :root[data-lum="sombre"]{ --space:#151a2c; --space-2:#1c2340; --panel:#1b2240; --panel-2:#232c4f; --ink:#e9edff; --soft:#bcc5e6; --muted:#8f99c1; --faint:#6f7aa4; --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.15); } /* « Doux » = par-dessus le JOUR (data-theme="day", qui apporte logo inversé/étoiles/etc.) : fond un peu moins blanc que le plein jour → « moyennement clair », reposant. */ :root[data-lum="doux"][data-theme="day"]{ --space:#d8e0f0; --space-2:#c8d5ea; --panel:#eef2fa; --panel-2:#e2eaf7; --ink:#141c33; --soft:#3c4a68; --muted:#5c688a; }