/** * 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:42px;z-index:60;min-width:230px; 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} /* Barre flottante injectée EN plein écran (le switcher du header est hors du conteneur) : sortie au clic + modes d'agencement. position:fixed = relatif à l'élément plein écran. */ .ftv-fs-bar{position:fixed;top:14px;right:14px;z-index:2147483647;display:flex;gap:6px; padding:6px;border-radius:12px;background:rgba(13,18,38,.82);border:1px solid var(--line-2,rgba(255,255,255,.14)); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .ftv-fs-b{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 10px;border-radius:8px; border:1px solid var(--line-2,rgba(255,255,255,.14));background:none;color:var(--soft,#c3c9e8);cursor:pointer;font:inherit;font-size:.82rem} .ftv-fs-b:hover{border-color:var(--blue-glow,#5ea0ff);color:#fff;background:rgba(46,123,255,.14)} .ftv-fs-b:focus-visible{outline:2px solid var(--blue-glow,#5ea0ff);outline-offset:1px} .ftv-fs-exit{color:#fff;border-color:rgba(255,255,255,.28)} /* ── ② 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:#1b2338; --space-2:#252f52; --panel:#222a4e; --panel-2:#2d3766; --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:#c7d3e9; --space-2:#b5c5e0; --panel:#e2e9f6; --panel-2:#d3deef; --ink:#141c33; --soft:#3c4a68; --muted:#5c688a; } /* ============================================================================ * volet-plein-ecran.css — RÈGLES À AJOUTER à controls/freeetv-controls.css * Volet d'options plein écran repliable, semi-transparent (idée Stéphane 14/07). * ADDITIF & isolé : rien ne s'active tant que volet-plein-ecran.js n'a pas posé * la classe `.ftv-foldable` sur la `.ftv-fs-bar` existante. Aucun sélecteur ne * touche l'état actuel de la barre → zéro régression si le JS n'est pas chargé. * * ── COMMENT APPLIQUER ────────────────────────────────────────────────────── * OÙ COLLER * Copier tout ce bloc À LA FIN de : * freeetv-recovery/controls/freeetv-controls.css * (juste après le sélecteur `.ftv-fs-exit`, section « Barre flottante »). * Ne PAS modifier les règles `.ftv-fs-bar` / `.ftv-fs-b` déjà présentes : * elles restent la base ; ces règles-ci ne s'appliquent qu'avec `.ftv-foldable`. * Puis charger volet-plein-ecran.js APRÈS freeetv-controls.js (voir son entête). * * TOKENS : réutilise var(--panel-2), var(--line-2), var(--blue-glow), * var(--muted), var(--faint) — mêmes valeurs de secours que le reste du fichier. * * COMMENT TESTER (jour ET nuit) * - Passer en plein écran (bouton « Plein écran » du menu Affichage, ou depuis * le contrôle flottant), puis : * - Portrait pliable (~700 px CSS) : la poignée « Options ▾ » dépasse en haut- * droite, le corps est replié ~80 %, on voit la vidéo par transparence. * - Paysage (~780 px CSS) : idem, la barre ne déborde pas. * - Vrai téléphone (390 px) : cible tactile de la poignée ≥ 44 px, on * l'attrape au pouce sans zoomer. * - Plein écran RÉEL (pas juste devtools) : tap = bascule, glisser = tire le * volet, se replie seul après ~4 s. `data-open` bascule true/false, le chevron * pivote, le fond est plus transparent replié. * - prefers-reduced-motion:reduce (réglages OS) : aucune anim, tout reste utile. * * COMMENT REVENIR EN ARRIÈRE * Retirer ce bloc de freeetv-controls.css + retirer l'enqueue de * volet-plein-ecran.js. La barre `.ftv-fs-bar` d'origine réapparaît inchangée. * ========================================================================== */ /* Le volet n'existe que si le JS a posé `.ftv-foldable`. On colle au bord haut pour que le corps puisse se glisser au-dessus du cadre, poignée en dessous. */ .ftv-fs-bar.ftv-foldable{ --peek:.20; /* fraction du corps VISIBLE une fois replié (0.20 = 80 % caché) */ --alpha:.62; /* opacité du fond, état ouvert (× 0.55 replié) */ top:0; right:14px; flex-direction:column; align-items:stretch; gap:0; padding:0; /* on neutralise le décor de la barre d'origine : il repart sur le corps + la poignée */ background:none; border:0; -webkit-backdrop-filter:none; backdrop-filter:none; transform:translateY(calc(-1 * var(--ftv-fold, 0px))); /* --ftv-fold posé par le JS (px cachés) */ transition:transform .34s cubic-bezier(.22,.61,.36,1); touch-action:none; /* le drag pointer gère le geste, pas le scroll natif */ filter:drop-shadow(0 16px 38px rgba(0,0,0,.5)); } .ftv-fs-bar.ftv-dragging{transition:none} /* pas d'inertie pendant le glissé */ /* Corps = la rangée de boutons d'origine, empaquetée par le JS dans .ftv-fs-body. */ .ftv-fs-bar.ftv-foldable .ftv-fs-body{ display:flex; align-items:center; gap:6px; padding:6px; border:1px solid var(--line-2,rgba(255,255,255,.14)); border-top:0; border-radius:0 0 14px 14px; background:color-mix(in srgb, var(--panel-2,#111838) calc(var(--alpha) * 100%), transparent); -webkit-backdrop-filter:blur(9px) saturate(1.1); backdrop-filter:blur(9px) saturate(1.1); transition:background .3s; } /* Replié → plus transparent (α × 0.55) pour dégager la vidéo. */ .ftv-fs-bar.ftv-foldable[data-open="false"] .ftv-fs-body{ background:color-mix(in srgb, var(--panel-2,#111838) calc(var(--alpha) * 55%), transparent); } /* La poignée : TOUJOURS visible, c'est elle qui dépasse en replié. Cible tactile ≥ 44 px (min-height + padding large). */ .ftv-fs-bar .ftv-fs-grip{ align-self:center; margin-top:6px; min-height:44px; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:7px 22px 8px; cursor:grab; border:1px solid var(--line-2,rgba(255,255,255,.14)); border-top:0; border-radius:0 0 13px 13px; background:color-mix(in srgb, var(--panel-2,#111838) calc(var(--alpha) * 70%), transparent); -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px); color:var(--muted,#8b93b8); -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; } .ftv-fs-bar .ftv-fs-grip:active{cursor:grabbing} .ftv-fs-bar .ftv-fs-grip:focus-visible{outline:2px solid var(--blue-glow,#5ea0ff); outline-offset:2px} .ftv-fs-grip-bar{width:34px; height:4px; border-radius:3px; background:currentColor; opacity:.85} .ftv-fs-grip-lbl{display:flex; align-items:center; gap:5px; font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; color:var(--faint,#5a6390)} /* Chevron qui pivote selon l'état ouvert/fermé. */ .ftv-fs-grip-chev{transition:transform .3s} .ftv-fs-bar[data-open="true"] .ftv-fs-grip-chev{transform:rotate(180deg)} /* Indice (nudge) au 1er affichage — dip vertical autour de la position repliée. */ @keyframes ftv-fs-nudge{ 0%,100%{transform:translateY(calc(-1 * var(--ftv-fold,0px)))} 50% {transform:translateY(calc(-1 * var(--ftv-fold,0px) + 7px))} } .ftv-fs-bar.ftv-hint{animation:ftv-fs-nudge 1.15s ease-in-out 2} /* Respecte les préférences système : aucune animation/transition. */ @media (prefers-reduced-motion:reduce){ .ftv-fs-bar.ftv-foldable{transition:none} .ftv-fs-bar.ftv-foldable .ftv-fs-body{transition:none} .ftv-fs-bar.ftv-hint{animation:none} .ftv-fs-grip-chev{transition:none} } /* ==== APPEND 15/07 — lisibilité de la poignée plein écran (retour Stéphane : « pas assez visible le texte, change selon le fond »). La vidéo derrière est une iframe cross-origin : impossible d'échantillonner sa couleur. Solution universelle « sous-titre » : texte clair + halo sombre + pastille plus dense → lisible sur fond clair OU sombre, sans casser la transparence du corps du volet. Règles APRÈS le bloc volet → priorité. Réversible. ==== */ .ftv-fs-bar .ftv-fs-grip{ /* base sombre plus solide (garde un léger voile) : la poignée est petite, le corps reste translucide */ background:color-mix(in srgb, #0b1024 84%, transparent); color:#fff; } .ftv-fs-bar .ftv-fs-grip-lbl{ color:#f2f5ff; font-weight:600; text-shadow:0 1px 2px rgba(0,0,0,.9), 0 0 6px rgba(0,0,0,.55); } .ftv-fs-bar .ftv-fs-grip-bar{ background:#fff; opacity:1; box-shadow:0 1px 2px rgba(0,0,0,.65); } .ftv-fs-bar .ftv-fs-grip-chev{ filter:drop-shadow(0 1px 1px rgba(0,0,0,.85)); } /* BARRE-DISCRETE — la barre plein-ecran demarre REPLIEE ; la poignee de rappel reste a 30% d'opacite (100% au survol/focus ou barre ouverte) — Stephane 16/07. */ .ftv-fs-bar.ftv-foldable .ftv-fs-grip{opacity:.3;transition:opacity .25s ease} .ftv-fs-bar.ftv-foldable .ftv-fs-grip:hover, .ftv-fs-bar.ftv-foldable .ftv-fs-grip:focus-visible, .ftv-fs-bar.ftv-foldable[data-open="true"] .ftv-fs-grip{opacity:1}