/* ========================================================================== NAVIGATION DU SLIDER - VARIANTE C "LIGNE DE PROGRESSION" (pages projet a slider) -------------------------------------------------------------------------- DESKTOP UNIQUEMENT (fenetres >= 1200 px). - PROJET precedent / suivant + grille PORTFOLIO : INCHANGES (barre du bas). - SLIDES : un filet fin en segments (un par slide) colle au bord bas de l'ecran, (js/slider-nav-b.js). Segments vus + actif = turquoise. Avancer : clic sur un segment ou sur la moitie gauche / droite de l'image. - Les fleches < > disparaissent de la barre turquoise. - PLAY / PAUSE : bouton centre au-dessus du filet, equilibre avec la souris et la grille (meme ecart). - PLEIN ECRAN : meme hauteur que play / pause, centre entre le chevron du projet suivant et le bord droit de l'ecran. Minuteur cyan masque. Toute la barre du plugin (haut a droite) est masquee. PERIMETRE : tablette (768-1199 px) et mobile (<= 767 px) ne changent PAS : barre turquoise d'origine (pause / < > / plein ecran, collee en bas), pas de filet, pas de clic sur l'image. REGLAGES : --snb-accent (point actif), --snb-dot (partie non encore parcourue des segments : noir 50 %). POUR TOUT ANNULER : python3 ajouter-nav-slider-b.py --retirer ========================================================================== */ :root { --snb-accent: #fff; /* progression : BLANC, utilise si CONFIG.palette est vide (js/slider-nav-b.js) ; sinon chaque segment prend sa couleur (--snb-fill) */ --snb-dot: rgba(0, 0, 0, .5); /* partie non parcourue : NOIR a 50 % (avant : blanc a 45 %) ; essayer .35 plus discret, .65 plus marque */ } @media only screen and (min-width: 1200px) { /* ---------- NIVEAUX D'EMPILEMENT : la traînee d'images au curseur (css/cursor-trail.css, z-index 150) passe DERRIERE l'interface ---------- Le slider (css/epicslider.css : position:relative; z-index:1) formait un empilement a lui seul : tout ce qu'il contient (dont les boutons ci-dessous) restait donc SOUS la traînee. On lui retire ce z-index (la valeur 100 du mode plein ecran de secours est conservee) : ses calques (diapositives, titres, logos : z-index 0 a 6) restent SOUS la traînee, et nos boutons (1050, comme les chevrons haut / bas de page et la barre projet) passent AU-DESSUS. Le bandeau defilant (9999) reste au-dessus de tout. Logo PAUL LEON : 1051 (il etait a 150, sous la traînee). */ .epic-slider:not(.fullscreen) { z-index: auto; } #slider-dots, #slider-pause, #slider-prev, #slider-next, #slider-fs, #slider-count { z-index: 1050 !important; } html.pl-chrome-detached #logo { z-index: 1051 !important; } /* ---------- Ligne de progression : filet en segments colle au bord bas ---------- */ #slider-dots { position: absolute; z-index: 7; left: 0; right: 0; /* le slider fait 100 % de la hauteur de la fenetre mais demarre SOUS le bandeau defilant : son bord bas depasse de la hauteur du bandeau ; on remonte d'autant pour que le filet soit au bas de l'ecran */ bottom: var(--top-banner-height, 34px); display: flex; gap: 0; /* l'espace noir de 2 px est dessine par chaque segment (::after) */ margin: 0; padding: 0; opacity: 0; transition: opacity .35s ease; } #slider-dots.snb-ready { opacity: 1; } .epic-slider.es-real-fs #slider-dots { bottom: 0; } /* vrai plein ecran : pas de bandeau */ #slider-dots .snb-dot { -webkit-appearance: none; appearance: none; position: relative; flex: 1 1 0; min-width: 0; height: 16px; /* zone de clic au-dessus du filet (le trait visible fait 3 px) */ margin: 0; padding: 0; border: 0; background: none; cursor: pointer; } #slider-dots .snb-dot::before { content: ""; position: absolute; left: 0; right: 2px; /* laisse 2 px de noir entre deux segments (voir ::after) */ bottom: 0; height: 1.5px; /* filet tres fin */ /* progression continue : --p (0 a 1, ecrit par js/slider-nav-b.js) = part blanche du segment, de gauche a droite ; le reste = noir a 50 % (--snb-dot) directement sur l'image */ background: linear-gradient(90deg, var(--snb-fill, var(--snb-accent)) calc(var(--p, 0) * 100%), var(--snb-dot) calc(var(--p, 0) * 100%)); } #slider-dots .snb-dot::after { content: ""; position: absolute; right: 0; bottom: 0; width: 2px; /* 2 pixels de noir PLEIN entre deux segments */ height: 1.5px; background: #000; } #slider-dots .snb-dot:last-child::after { display: none; } #slider-dots .snb-dot:focus-visible { outline: 1px solid var(--snb-accent); outline-offset: -2px; } /* ---------- Boutons PLAY / PAUSE (centre) et PLEIN ECRAN (a droite) ---------- Meme hauteur, entre la grille PORTFOLIO et le filet de progression ; positions calculees par le JS. Meme langage que les autres boutons : blanc, ombre douce ; play / pause en blanc PLEIN, plein ecran en traits de 2 px. Les icones tiennent dans un carre de 23,4 px, comme la grille PORTFOLIO. */ #slider-pause, #slider-prev, #slider-next, #slider-fs { -webkit-appearance: none; appearance: none; position: absolute; z-index: 7; bottom: auto; width: 30px; /* meme boite que le bouton PORTFOLIO (30 x 30 px, icone de 23,4 px au centre) */ height: 30px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; opacity: 0; transition: opacity .35s ease, right .45s cubic-bezier(.65, 0, .35, 1); filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .75)) drop-shadow(0 0 6px rgba(0, 0, 0, .35)); } /* GROUPE CALE A DROITE (positions calculees par le JS : distance du centre de chaque bouton au bord droit) */ #slider-pause { left: auto; right: var(--snb-r-pause, 50%); transform: translateX(50%); } /* chevrons precedent / suivant de part et d'autre de play / pause : meme chevron que le curseur (boite de 40 px) */ #slider-prev, #slider-next { width: 40px; height: 40px; transform: translateX(50%); } #slider-prev { left: auto; right: var(--snb-r-prev, 50%); } #slider-next { left: auto; right: var(--snb-r-next, 50%); } /* DISPOSITION AU CENTRE (CONFIG.groupRight = false, test v29) : precedent - play/pause - suivant autour du centre du slider ; --snb-chev-x calcule par le JS */ .epic-slider.snb-center #slider-pause { left: 50%; right: auto; transform: translateX(-50%); } .epic-slider.snb-center #slider-prev { left: calc(50% - var(--snb-chev-x, 58px)); right: auto; transform: translateX(-50%); } .epic-slider.snb-center #slider-next { left: calc(50% + var(--snb-chev-x, 58px)); right: auto; transform: translateX(-50%); } /* plein ecran : centre entre le chevron du projet SUIVANT et le bord de l'ecran (--snb-fs-right calcule par le JS ; repli = axe des chevrons haut / bas de page) */ #slider-fs { right: var(--snb-fs-right, calc(var(--logo-center-x, 60px) - 19px)); } #slider-pause.snb-ready, #slider-prev.snb-ready, #slider-next.snb-ready, #slider-fs.snb-ready { opacity: 1; } /* ROLLOVER : plus d'effet propre (opacite, agrandissement) : c'est le GLITCH commun du site (js/glitch-icons.js, cibles #slider-*) */ #slider-pause svg, #slider-fs svg { display: block; margin: 3.3px; } #slider-prev svg, #slider-next svg { display: block; } /* icone de 23,4 px centree dans la boite de 30 px */ #slider-pause .snb-i-play { display: block; } #slider-pause .snb-i-pause { display: none; } #slider-pause.is-playing .snb-i-play { display: none; } #slider-pause.is-playing .snb-i-pause { display: block; } /* ---------- COMPTEUR : NUMERO DE L'IMAGE (1, 2, 3...), en bas a droite, a la place qu'occupait le plein ecran, meme ligne que play/pause ---------- Police "Doto" (points type afficheur numerique) : celle des legendes de vignettes (css/style.css, .thumbInfo : 17 px, graisse 700). Blanc, meme ombre douce que les autres boutons. Glitch au survol (js/glitch-icons.js, cible #slider-count). */ #slider-count { position: absolute; z-index: 1050; right: var(--snb-count-right, 57px); /* centre sur l'ANCIENNE place du plein ecran (calcule par le JS) */ transform: translateX(50%); height: 30px; line-height: 30px; /* meme boite de 30 px que play/pause et plein ecran : centre vertical identique */ font-family: 'Doto', 'Roboto', sans-serif; font-size: 17px; /* EXACTEMENT les legendes de vignettes (css/style.css, .thumbInfo) : Doto 17 px, graisse 700 */ font-weight: 700; letter-spacing: 1px; font-variant-numeric: tabular-nums; white-space: nowrap; color: #fff; cursor: default; opacity: 0; transition: opacity .35s ease; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .55)); /* ombre plus legere que les boutons : elle epaississait les points */ } #slider-count.snb-ready { opacity: 1; } /* plein ecran : les 4 angles se retournent de 180 degres sur eux-memes, chacun dans sa case du carre (meme carre, meme taille dans les deux etats) : angles vers l'exterieur = agrandir, angles retournes vers l'interieur = reduire */ #slider-fs .snb-i-fs path { transform-box: fill-box; transform-origin: 50% 50%; transition: transform .3s cubic-bezier(.65, 0, .35, 1); } .epic-slider.es-real-fs #slider-fs .snb-i-fs path, .epic-slider.fullscreen #slider-fs .snb-i-fs path, body.fullscreen .epic-slider #slider-fs .snb-i-fs path { transform: rotate(180deg); } /* chaque coin se retourne de 180 degres, dans SA case du carre */ #slider-pause:focus-visible, #slider-prev:focus-visible, #slider-next:focus-visible, #slider-fs:focus-visible { outline: 1px solid var(--snb-accent); outline-offset: -4px; } /* ---------- Fleches < > du slider : supprimees ---------- */ .epic-slider #es-direction-nav .es-nav-button:has(#es-prev), .epic-slider #es-direction-nav .es-nav-button:has(#es-next) { display: none !important; } /* ---------- Barre d'origine du plugin (pause / plein ecran) : masquee, remplacee par #slider-pause et #slider-fs ---------- Elle reste dans la page et cliquable par script (visibility, pas display) : le minuteur et les etats continuent de tourner. */ html .epic-slider #es-direction-nav, html .epic-slider.es-real-fs #es-direction-nav, html body.fullscreen .epic-slider #es-direction-nav { visibility: hidden !important; pointer-events: none !important; } /* ---------- Curseur selon la moitie de l'image survolee ---------- */ /* Curseur sur mesure : EXACTEMENT le chevron des boutons HAUT / BAS DE PAGE tourne de 90 degres (carre de 20 px pivote a 45 degres : 2 jambes de 20 px, trait blanc de 2 px, soit 14 x 28 px a l'ecran), avec un fin lisere sombre pour rester lisible sur image claire. Repli : fleches systeme w-resize / e-resize si le navigateur refuse l'image. Point chaud = centre (20 20). */ .epic-slider.snb-cursor-prev { cursor: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2240%22 height=%2240%22 viewBox=%220 0 40 40%22%3E%3Cpath d=%22M27.07 5.86 L12.93 20 L27.07 34.14%22 fill=%22none%22 stroke=%22%23000%22 stroke-opacity=%22.6%22 stroke-width=%224%22 stroke-linecap=%22butt%22 stroke-linejoin=%22miter%22/%3E%3Cpath d=%22M27.07 5.86 L12.93 20 L27.07 34.14%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%222%22 stroke-linecap=%22butt%22 stroke-linejoin=%22miter%22/%3E%3C/svg%3E") 20 20, w-resize; } .epic-slider.snb-cursor-next { cursor: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2240%22 height=%2240%22 viewBox=%220 0 40 40%22%3E%3Cpath d=%22M12.93 5.86 L27.07 20 L12.93 34.14%22 fill=%22none%22 stroke=%22%23000%22 stroke-opacity=%22.6%22 stroke-width=%224%22 stroke-linecap=%22butt%22 stroke-linejoin=%22miter%22/%3E%3Cpath d=%22M12.93 5.86 L27.07 20 L12.93 34.14%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%222%22 stroke-linecap=%22butt%22 stroke-linejoin=%22miter%22/%3E%3C/svg%3E") 20 20, e-resize; } /* ---------- Icones d'interface sur le slider : blanc simple + ombre noire douce (plus de difference) ---------- Classe .snb-on-img posee par js/slider-nav-b.js tant que l'icone est SUR le slider ; elle l'enleve des que l'icone sort du slider (le mix-blend-mode:difference d'origine reprend alors). Le logo n'est pas concerne. */ .snb-on-img { mix-blend-mode: normal !important; isolation: auto !important; filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .75)) drop-shadow(0 0 6px rgba(0, 0, 0, .35)); } /* OPTION "ULTRA EPURE" : masquer AUSSI play / pause et plein ecran -> classe snb-no-bar sur . */ html.snb-no-bar #slider-pause, html.snb-no-bar #slider-prev, html.snb-no-bar #slider-next, html.snb-no-bar #slider-fs, html.snb-no-bar #slider-count { display: none !important; } } /* Tablette et mobile (< 1200 px) : rien n'est modifie, les points ne s'affichent pas. */ @media only screen and (max-width: 1199px) { #slider-dots, #slider-pause, #slider-prev, #slider-next, #slider-fs, #slider-count { display: none !important; } } @media (prefers-reduced-motion: reduce) { #slider-dots, #slider-pause, #slider-prev, #slider-next, #slider-fs, #slider-count, #slider-dots .snb-dot::before, #slider-fs .snb-i-fs path { transition: none; } }