/* html/css/atm_2026.css Charge globalement via home.htm (donc sur toutes les pages, puisque home.php inclut toujours html/atm/home.htm), a cote de atm_ie.css/atm_netscape.css. Le chemin d'image /gfx/atm/ correspond a la constante $tdirectory['gfx'] de scripts/lib/data.php -- fixe, donc en dur ici (fichier .css statique, pas de PHP). */ /* Correctif "font boosting" mobile : en l'absence de balise , les navigateurs mobiles appliquent un algorithme d'agrandissement automatique du texte ("text autosizer"/"font inflation") qui recalcule une taille "plus lisible" que celle indiquee en CSS, bloc par bloc -- avec un resultat different selon que le bloc a une taille de police explicitement declaree (ex: class=menu, 11px, sur l'edito et les onglets de rubrique) ou seulement heritee d'un selecteur generique comme "td { font-size: 11px }" (le cas des titres de contenu, $title, qui n'ont aucune classe propre) -- Firefox mobile en particulier semble continuer d'agrandir ces derniers meme avec la balise viewport posee. D'ou la regle ci-dessous sur "*" (tous les elements, pas seulement html) avec le prefixe -moz- en plus de -webkit-, et "none" plutot que "100%" pour desactiver franchement le mecanisme plutot que de seulement neutraliser son resultat. */ html, body, * { -webkit-text-size-adjust: none; -moz-text-size-adjust: none; text-size-adjust: none; } /* Reglage "Reduire les animations" (panneau de reglages, icone engrenage -- voir html/atm/time_machine_widget.php et le petit script en tete de home.htm qui pose cette classe le plus tot possible, avant tout premier rendu). Regle volontairement large ("*") plutot que de gater chaque animation/transition une par une dans ce fichier : ecrase leur duree a une valeur quasi nulle (jamais 0 pur, pour que les evenements JS "transitionend"/"animationend" dont depend une partie du code -- spin() du vinyle Time Machine, entre autres -- continuent de se declencher normalement) plutot que de les desactiver completement. N'affecte PAS les setTimeout() en JS qui pilotent certaines de ces transitions (ex. duree du zoom automatique) : ceux-la continuent d'attendre leur delai d'origine, seul le rendu visuel est acccelere. */ html.atm-reduce-motion *, html.atm-reduce-motion *::before, html.atm-reduce-motion *::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; } /* Empeche une barre de defilement horizontale une fois que l'effet d'introduction "zoom" (voir html/js/atm_intro_zoom.js et le bloc #atm-zoom-wrap/#atm-zoom-inner plus bas) a agrandi le contenu au-dela de la largeur de l'ecran -- la partie qui deborde a gauche (colonne de gauche du site) est alors simplement masquee plutot que scrollable. */ /* Reproduction precise du bug (retour terrain Ludo) : le trait ne bouge pas, c'est reellement un ecart apparu entre lui et le contenu qui le suit -- et il apparait SPECIFIQUEMENT apres avoir scrolle vers le bas PUIS remonte jusqu'a ne plus pouvoir scroller, jamais au tout premier chargement (scrollY=0 avant tout scroll). "jusqu'a ne plus pouvoir scroller" decrit exactement le rebond elastique ("overscroll"/"rubber- banding") que Chrome/Safari mobile jouent quand on tire le contenu au-dela du haut de page -- un declencheur connu de glitches de repaint sur les elements position:sticky/fixed (la barre d'onglets ET son fond de secours #atm-tabs-bar-backdrop, tous deux positionnes ainsi). Les deux tentatives precedentes (JS, forcer un recalcul de #atm-tabs-bar apres coup) n'ont rien change -- plutot que de forcer un rattrapage APRES le fait, cette regle empeche le rebond lui-meme de se produire : le navigateur borne alors le scroll pile au sommet de la page, sans jamais entrer dans cet etat "tire au-dela" qui semble declencher le glitch. */ html, body { overscroll-behavior-y: contain; } body { overflow-x: hidden; } /* Effet d'introduction "zoom" (voir html/js/atm_intro_zoom.js, inclus depuis home.htm) : la page se montre d'abord en entier (design original, tel qu'affiche par defaut grace a la balise de home.htm), puis se resserre en douceur sur la colonne de contenu a droite pour la rendre plus lisible. Deux niveaux imbriques autour de #atm-main-table, pour des raisons techniques : - #atm-zoom-wrap : sa hauteur est augmentee en JS au moment du zoom pour reserver la place necessaire dans le flux normal de la page -- sans ca, les elements suivants (espace de bas de page, widget Time Machine) resteraient a leur ancienne position et se retrouveraient chevauches par le contenu, agrandi visuellement mais toujours a sa taille de mise en page (layout) d'origine. - #atm-zoom-inner : recoit le "transform: scale()" lui-meme (calcule en JS selon la largeur d'ecran). Separe de #atm-zoom-wrap pour ne pas cumuler deux fois l'agrandissement (une fois via la hauteur forcee, une fois via le scale) si les deux etaient portes par le meme element. transform-origin en haut a droite : le coin haut-droit du tableau (cote de la colonne de contenu) reste en place pendant que tout grandit depuis ce point -- la colonne de gauche, elle, s'echappe vers la gauche de l'ecran (masquee par le overflow-x:hidden du body ci-dessus) tandis que la colonne de droite finit par occuper tout l'ecran. Volontairement en dehors de ce wrapper : la barre d'onglets sticky (#atm-tabs-bar) et le widget Time Machine (position:fixed), tous deux perturbes par un transform pose sur un ancetre commun. */ #atm-zoom-inner { transform-origin: 100% 0%; transition-property: transform; transition-timing-function: ease-in-out; /* transition-duration posee dynamiquement en JS : plus longue lors de la toute premiere visite (memorisee dans localStorage), plus rapide ensuite. */ } #atm-zoom-wrap { transition-property: height; transition-timing-function: ease-in-out; } /* Icone engrenage : active/desactive l'effet d'introduction "zoom" ci-dessus (flag "atm_zoom_disabled" dans localStorage, lu par atm_intro_zoom.js au prochain chargement de page). Position : centree HORIZONTALEMENT dans une bande de 32px collee au bord droit du tableau principal (780px, centre via son propre margin:auto) -- PAS dans la totalite de la marge disponible (essaye en premier, cf. ancienne version de ce commentaire : sur un desktop en fenetre large, ca poussait l'icone loin du contenu, au milieu d'une grande zone vide, alors que 32px est justement la largeur de la marge deja utilisee sur mobile, cf. le de home.htm). Que la fenetre soit etroite ou tres large, l'icone reste donc a la meme distance FIXE du bord du contenu. Calcul : la marge totale a droite du tableau vaut (100vw - 780px)/2 ; le bord droit de l'icone doit se trouver a 16px (moitie de la bande de 32px) + la moitie de la largeur de l'icone (24px) en-deca de ce bord, soit (100vw - 780px)/2 - 16px - 12px. Volontairement en CSS PUR (calc() + vw), sans JS ni recalcul au scroll/resize -- vw suit automatiquement la taille de la fenetre. Sur mobile, "vw" correspond a la largeur logique de 844px imposee par le (voir home.htm), pas a la largeur physique de l'ecran, d'ou une marge coherente avec les 32px prevus par ce viewport. Le "max(4px, ...)" est un garde-fou pour les fenetres tres etroites (desktop retreci pres de 780px de large, cf. tests precedents) : sans lui, la formule peut devenir negative et pousser l'icone hors ecran. "top" en revanche N'EST PAS purement CSS : centrer l'icone VERTICALEMENT dans la zone des onglets (padding-top de #atm-tabs-bar + hauteur reelle de la rangee d'onglets, espace au-dessus inclus) demande de connaitre une hauteur qui depend du contenu (police, images de fond des onglets), donc pas calculable en CSS pur -- positionZoomToggle() dans time_machine_widget.php mesure cette zone et pose un top en ligne qui remplace la valeur ci-dessous. Le 12px ici n'est qu'une valeur de repli avant que ce script ne s'execute (ou s'il echouait). Couleurs : fond noir pur (#1c1c1c) et icone blanc pur (#f2f2f2) remplaces par une teinte tiree de la palette d'atome elle-meme -- version assombrie du gris de fond de page ($layout['bg'], #adb2b2) -- et un blanc legerement assombri sur l'icone, pour un rendu plus discret/integre plutot qu'un pastille contrastee au look "app native". */ #atm-zoom-toggle { position: fixed; top: 12px; /* repli avant positionZoomToggle(), voir time_machine_widget.php */ right: max(4px, calc((100vw - 780px) / 2 - 28px)); width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: #d6d6d6; background: #797c7c; border-radius: 50%; cursor: pointer; z-index: 999; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); /* Grossit avec le zoom, meme principe que #tm-sticker ci-dessous (voir son commentaire pour le detail) : transform-origin en haut a droite, puisque c'est ce coin qui est ancre a l'ecran (top/right fixes ci-dessus). */ transform: scale(var(--atm-zoom-scale, 1)); transform-origin: top right; transition-property: opacity, transform; transition-timing-function: ease, ease-in-out; transition-duration: .15s, .15s; /* le 2e repli avant setDurations() */ } #atm-zoom-toggle svg { width: 62%; height: 62%; display: block; } #atm-zoom-toggle.atm-zoom-toggle-off { opacity: 0.4; } /* Barre d'onglets zoomee EN MEME TEMPS que le contenu (voir html/js/atm_intro_zoom.js), pour rester alignee au-dessus de la colonne de droite une fois celle-ci agrandie. Le "transform: scale()" est pose sur #atm-tabs-bar-scale, un niveau interne (voir home.htm) -- PAS sur #atm-tabs-bar lui-meme, qui garde son position:sticky "propre" (sans transform dessus, pour eviter tout risque d'interference avec son calcul de position collee en haut d'ecran pendant le scroll). Meme point d'origine (coin haut-droit) que #atm-zoom-wrap/#atm-zoom-inner, et meme largeur de reference (780px, cf. home.htm), pour rester bord a bord avec le contenu pendant toute l'animation. margin-bottom reste sur #atm-tabs-bar (l'exterieur) : sa hauteur de mise en page ne grandit pas toute seule avec le scale de l'interieur, d'ou cette marge pour reserver la place gagnee visuellement et ne pas chevaucher le contenu juste en dessous. */ #atm-tabs-bar { transition-property: margin-bottom; transition-timing-function: ease-in-out; } #atm-tabs-bar-scale { transform-origin: 100% 0%; transition-property: transform; transition-timing-function: ease-in-out; } /* Poignee de retour, creee en JS (voir atm_intro_zoom.js) une fois l'effet de zoom actif sur cette page : position:fixed sur le bord gauche de l'ecran, toujours accessible quel que soit le defilement ou l'etat de zoom en cours, pour revenir a la vue complete du design (puis y rezoomer). Placee dans la bande laissee visible par le "sliver" du zoom (SLIVER_PX dans le JS) une fois zoomee ; simplement plaquee au bord gauche de l'ecran en vue complete (pas de sliver dans cet etat-la). */ #atm-zoom-handle { position: fixed; left: 0; top: 50%; transform: translateY(-50%); width: 15px; height: 52px; display: flex; align-items: center; justify-content: center; color: #1c1c1c; background: rgba(255,255,255,0.85); border-radius: 0 6px 6px 0; cursor: pointer; z-index: 998; box-shadow: 1px 0 4px rgba(0,0,0,0.3); /* Cachee tant que le zoom automatique n'a pas encore eu lieu (juste creee dans le DOM des le chargement, cf. atm_intro_zoom.js, mais inutile -- et trompeuse, puisqu'elle ne fait rien -- avant que "zoomed" devienne vrai). La classe "atm-zoom-handle-ready" est posee en JS a ce moment-la (activateZoom()). */ opacity: 0; pointer-events: none; transition: opacity .25s ease; } #atm-zoom-handle.atm-zoom-handle-ready { opacity: 1; pointer-events: auto; } #atm-zoom-handle svg { width: 60%; height: 60%; display: block; } /* Fleche vers la GAUCHE ("il y a plus a voir de ce cote, tirez") tant que la colonne de gauche n'est pas (ou peu) revelee ; vers la DROITE ("repoussez pour refermer") une fois qu'elle l'est -- classe posee en JS des que le decalage courant depasse la moitie de la plage autorisee. Le trace SVG de base (M14 5 L8 12 L14 19) dessine un chevron pointant vers la gauche : aucune transformation necessaire pour l'etat de repos, "scaleX(-1)" (miroir horizontal) pour l'etat "revele". */ #atm-zoom-handle svg { transform: scaleX(1); } #atm-zoom-handle.atm-zoom-handle-in svg { transform: scaleX(-1); } /* Onglets de rubrique fixes en haut de l'ecran pendant le scroll -- permet de changer de rubrique sans avoir a remonter en haut de la page. Demande initialement pour le mobile en paysage uniquement ; etendu au portrait egalement (donc plus de condition d'orientation ici) car l'effet de zoom (voir atm_intro_zoom.js) s'applique lui aussi dans les deux orientations, et les onglets doivent y rester visibles pendant le scroll tout autant qu'en paysage. #atm-tabs-bar est le conteneur flex extrait de la table principale (voir html/atm/home.htm), avec son propre fond oppaque pour ne pas devenir transparent une fois colle au-dessus du contenu qui defile. Deux details du rendu d'origine ne suivaient pas la barre une fois collee en haut, puisqu'ils appartiennent a des elements distincts, restes plus haut dans le flux normal de la page (qui defile, eux) : - le petit espace au-dessus des onglets (habituellement cree par  
tout en haut de home.htm) -- repris en "padding-top" directement sur #atm-tabs-bar (voir home.htm), donc "top: 0" suffit ici : l'espace fait partie de la boite de l'element sticky et profite de son propre fond opaque, colle ou non ; - le filet noir sous les onglets a droite (menu_line_3.gif, dans la 1re ligne de #atm-main-table, masque ci-dessous en mode paysage) -- reproduit ici via un border-bottom sur #atm-tabs-bar-right (la partie droite du conteneur flex, celle qui contient les onglets) uniquement, present que l'on ait scrolle ou non. Le filet pointille de la colonne de gauche (menu_line_1.gif) n'est PAS concerne : il reste dans le tableau et continue de defiler normalement avec le contenu. */ #atm-tabs-underline-right { display: none; } #atm-tabs-bar { position: sticky; top: 0; z-index: 500; /* NB : un essai precedent posait ici "transform: translateZ(0)" + "will-change: transform" (tentative de corriger un bug sticky+drag via un calque de composition dedie). Retire : ca a reintroduit le bug du glisser qui "de-zoome" au lieu de deplacer (cf. le commentaire detaille dans atm_intro_zoom.js sur l'ordre scale()/translateX()) -- #atm-tabs-bar-scale est un enfant DIRECT de #atm-tabs-bar, donc poser un transform (meme neutre en 2D) sur le parent semble perturber la composition du transform de l'enfant, meme si la cause exacte (bug moteur de rendu, arrondi de calque, ou autre) reste a confirmer. A ne pas reposer sans tester sur le telephone concerne avant livraison. */ } #atm-tabs-bar-right { border-bottom: 1px solid #000000; } /* Reglage "Time Machine : masquee" (panneau de reglages) : cache le vinyle ET son popover, mais surtout PAS l'icone reglages (#atm-zoom-toggle) elle-meme -- sans elle, impossible de revenir sur ce choix. Classe posee sur , tres tot dans home.htm (avant tout rendu), pour eviter un flash "vinyle visible puis masque". */ html.atm-tm-hidden #tm-sticker, html.atm-tm-hidden #tm-popover { display: none; } #tm-sticker { /* Fixe par rapport a la fenetre (pas au tableau) : reste visible a l'ecran pendant le scroll, a une position constante sur toutes les pages, plutot que de defiler avec le contenu de la page comme le ferait un position:absolute. */ position: fixed; right: 12px; bottom: 12px; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1000; /* Grossit avec le zoom (retour Ludo : "elle ne change pas de taille au zoom, elle devrait grossir"), via la meme variable CSS que le reste (--atm-zoom-scale, posee en JS dans activateZoom()) -- transform et non width/height, pour rester coherent avec le reste du mecanisme de zoom et profiter du meme systeme de transition. transform-origin en bas a droite (et non le centre par defaut) : c'est ce coin qui est ancre a l'ecran (right/bottom fixes ci-dessus), donc celui qui doit rester immobile pendant que le vinyle grandit -- sinon il derive au lieu de "pousser" depuis son coin fixe. Duree de transition posee dynamiquement en JS (setDurations() dans atm_intro_zoom.js), pour rester synchronisee avec l'animation du reste du contenu -- pas de duree fixe ici. */ transform: scale(var(--atm-zoom-scale, 1)); transform-origin: bottom right; transition-property: transform; transition-timing-function: ease-in-out; transition-duration: .15s; /* repli (survol) avant que setDurations() ne pose sa propre valeur */ filter: drop-shadow(0 3px 6px rgba(0,0,0,0.45)); } /* Survol : combine avec l'echelle de zoom courante plutot que de l'ecraser. */ #tm-sticker:hover { transform: scale(calc(var(--atm-zoom-scale, 1) * 1.07)); } #tm-sticker svg { width: 56px; height: 56px; display: block; } #tm-disc-group { transform-origin: 24px 24px; } @keyframes tmSpinBack { from { transform: rotate(0deg); } to { transform: rotate(-1080deg); } } #tm-disc-group.spin-back { animation: tmSpinBack 2200ms cubic-bezier(.08,.75,.2,1) 1; } #tm-popover { /* Meme ancrage que #tm-sticker : fixe par rapport a la fenetre. */ position: fixed; right: 12px; bottom: 68px; /* juste au-dessus du sticker (12px bas + 56px haut) */ width: fit-content; min-width: 240px; background: #ffffff; box-shadow: 0 4px 16px rgba(0,0,0,0.35); z-index: 1001; font-family: Verdana, Helvetica, Arial, sans-serif; /* Fondu + leger zoom depuis le coin bas-droit (celui du vinyle), pas depuis le centre -- transform-origin par defaut serait "50% 50%", d'ou l'effet de zoom centre si on ne le precise pas. "visibility" est delayee de la meme duree que le reste : sans ca, elle bascule sur "hidden" instantanement a la fermeture et rend le fondu de sortie invisible avant meme qu'il ait pu se jouer. */ opacity: 0; transform: scale(0.85); transform-origin: bottom right; transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; visibility: hidden; pointer-events: none; } #tm-popover.open { opacity: 1; transform: scale(1); transition: opacity .2s ease, transform .2s ease, visibility 0s linear 0s; visibility: visible; pointer-events: auto; } .tm-white-frame { padding: 8px; } .tm-pop-title { background: #8aaeae; height: 20px; line-height: 20px; font-size: 11px; color: #ffffff; white-space: nowrap; } .tm-pop-title img { vertical-align: middle; margin: 0 2px 0 4px; } .tm-dots { height: 1px; background-image: url("/gfx/atm/line/menu_line_1.gif"); background-repeat: repeat-x; } .tm-pop-body { background: #efefef; padding: 6px 8px; } .tm-grid { display: grid; grid-template-columns: 1fr 33px; align-items: center; column-gap: 4px; row-gap: 8px; } .tm-grid .tm-content { font-size: 11px; } .tm-grid select { font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 10px; } .tm-select-pair { display: flex; gap: 3px; } .tm-select-pair select { width: 50%; } .tm-grid img { cursor: pointer; border: none; justify-self: end; } .tm-propose-row { display: flex; align-items: center; gap: 5px; } .tm-refresh { cursor: pointer; display: inline-flex; color: #6f8f8f; flex-shrink: 0; } .tm-refresh:hover { color: #4a6666; } .tm-refresh svg { display: block; } /* Overlay des visuels (html/js/atm_visual_overlay.js) : remplace la popup window.open() d'origine pour les images (retour terrain Ludo). Fond sombre plein ecran + cadre blanc centre. Design revu (2e retour terrain Ludo) : PAS de bandeau de titre (l'essai initial reprenait .tm-pop-title/.tm-dots/.tm-pop-body des popovers existants, mais Ludo voulait "juste une petite marge tout autour et l'encadré", sans "header vert") -- cadre simple (padding reduit = la marge demandee, bordure = l'encadre) directement autour de l'image. Croix de fermeture sortie du cadre, "en dehors de l'image" comme demande -- fixee par rapport a l'ecran (voir #atm-visual-overlay-close plus bas pour le detail), donc plus besoin ici d'un padding-top special pour lui reserver de la place au-dessus du cadre. z-index au-dessus des popovers (1001) : un visuel peut etre ouvert depuis du contenu affiche derriere un panneau deja ouvert. */ #atm-visual-overlay { position: fixed; inset: 0; z-index: 1002; display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; background-color: rgba(0,0,0,0); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, background-color .25s ease, visibility 0s linear .25s; } #atm-visual-overlay.open { background-color: rgba(0,0,0,0.78); opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .25s ease, background-color .25s ease, visibility 0s linear 0s; } #atm-visual-overlay-close:hover { opacity: .7; } #atm-visual-overlay .atm-visual-overlay-frame { max-width: 100%; max-height: 100%; display: flex; background: #ffffff; border: 1px solid #000000; box-shadow: 0 4px 20px rgba(0,0,0,0.5); padding: 6px; /* la "petite marge tout autour" de l'image */ box-sizing: border-box; transform: scale(.9); transition: transform .25s ease; } #atm-visual-overlay.open .atm-visual-overlay-frame { transform: scale(1); } /* Retour terrain Ludo : positionnee en absolu par rapport au cadre (.atm-visual-overlay-frame), la croix se retrouvait a gauche au lieu de la droite -- ce cadre n'a pas de largeur fixe (il epouse l'image une fois chargee, cf. son commentaire), donc juste apres l'ouverture de l'overlay (image pas encore chargee, cadre encore vide/etroit) la position "right" calculee par rapport a lui n'avait pas de sens. Fixee directement par rapport a l'ECRAN (independante du cadre/de l'image) : toujours au meme endroit, des l'ouverture, quelle que soit la taille du visuel affiche. */ #atm-visual-overlay-close { position: fixed; top: 14px; right: 14px; z-index: 1003; /* au-dessus du cadre */ cursor: pointer; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 26px; line-height: 1; color: #ffffff; padding: 2px 8px; } #atm-visual-overlay-body { overflow: auto; max-width: 92vw; max-height: 76vh; display: flex; align-items: center; justify-content: center; } #atm-visual-overlay-body img { display: block; max-width: 92vw; max-height: 76vh; width: auto; height: auto; } /* Panneau de reglages (icone engrenage #atm-zoom-toggle) : meme maquette que #tm-popover juste au-dessus (fondu + leger zoom, classes .tm-dots/.tm-white-frame/.tm-pop-title/.tm-pop-body partagees), mais popover distinct avec son propre ancrage -- top/right poses en ligne par positionSettingsPopover() (time_machine_widget.php), les valeurs ci-dessous ne sont qu'un repli avant sa premiere execution. */ #atm-settings-popover { position: fixed; top: 44px; right: 12px; width: fit-content; min-width: 260px; background: #ffffff; box-shadow: 0 4px 16px rgba(0,0,0,0.35); z-index: 1001; font-family: Verdana, Helvetica, Arial, sans-serif; opacity: 0; transform: scale(0.85); transform-origin: top right; transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; visibility: hidden; pointer-events: none; } #atm-settings-popover.open { opacity: 1; transform: scale(1); transition: opacity .2s ease, transform .2s ease, visibility 0s linear 0s; visibility: visible; pointer-events: auto; } .atm-settings-grid { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; row-gap: 10px; } /* font-size gere plus bas, avec .tm-grid .tm-content (regle --atm-zoom-scale) */ .atm-settings-grid .tm-content { white-space: nowrap; } .atm-settings-toggle { display: flex; gap: 4px; align-items: center; } .atm-settings-toggle img { cursor: pointer; border: none; display: block; } .atm-settings-toggle img.atm-settings-inactive { opacity: .4; filter: grayscale(70%); } /* Retour terrain Ludo (captures a l'appui, zoom 2 et 3 en portrait) : les boutons ON/OFF (GIF on.gif/off.gif, cf. html/atm/time_machine_widget.php) et les boutons de niveau de zoom juste en dessous restaient a leur taille native pendant que le texte a cote grossissait avec le zoom (regle --atm-zoom-scale, cf. plus bas dans ce fichier) -- ils paraissaient donc de plus en plus petits par rapport au texte au fur et a mesure qu'on augmente le niveau de zoom. Mis a l'echelle ici de la meme facon, via width/height (et non transform: scale comme pour le vinyle/l'icone reglages) : ces boutons sont DANS la grille de mise en page du panneau (pas en position:fixed comme le vinyle), donc il faut que leur BOITE grandisse reellement pour que la grille s'adapte en consequence, plutot qu'un agrandissement purement visuel qui chevaucherait les lignes voisines. Dimensions natives mesurees directement sur les fichiers GIF (29x19 pour on.gif, 35x19 pour off.gif) : un agrandissement de bitmap au dela de sa taille native pixelise l'image, mais Ludo a valide que c'etait preferable a la taille actuelle, trop petite face au texte zoome. */ .atm-settings-on { width: calc(29px * var(--atm-zoom-scale, 1)); height: calc(19px * var(--atm-zoom-scale, 1)); } .atm-settings-off { width: calc(35px * var(--atm-zoom-scale, 1)); height: calc(19px * var(--atm-zoom-scale, 1)); } /* Niveau de zoom (1/2/3) : pas de bouton GIF existant a decouper pour des chiffres (contrairement a ON/OFF, cf. on.gif/off.gif), donc reproduction CSS du meme relief "3D" Windows que les vrais boutons du site -- mesure pixel par pixel sur les GIF existants lors du travail sur ON/OFF : fond gris #C0C0C0, cadre noir 1px, filet clair (haut/gauche) + filet fonce (bas/droite) en relief, texte noir gras. Coherent avec les toggles ON/OFF juste au-dessus : PAS d'etat "enfonce" (inset inverse, tente puis retire -- Ludo trouvait le relief fidele aux boutons ON/OFF mais pas cet etat enfonce), le niveau actif se distingue seulement par la MEME opacite/desaturation reduite que .atm-settings-toggle img.atm-settings-inactive appliquee aux deux niveaux NON selectionnes. */ .atm-settings-level { display: flex; gap: 4px; } .atm-settings-level-btn { display: flex; align-items: center; justify-content: center; box-sizing: border-box; /* Grandissent avec le zoom, comme les boutons ON/OFF juste au-dessus (voir le commentaire detaille sur .atm-settings-on/.atm-settings-off) : meme dimension de depart (19px), meme variable --atm-zoom-scale. */ width: calc(19px * var(--atm-zoom-scale, 1)); height: calc(19px * var(--atm-zoom-scale, 1)); background: #c0c0c0; border: 1px solid #000000; box-shadow: inset 1px 0 0 #ffffff, inset 0 1px 0 #ffffff, inset -1px 0 0 #808080, inset 0 -1px 0 #808080; color: #000000; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: calc(11px * var(--atm-zoom-scale, 1)); cursor: pointer; -webkit-user-select: none; user-select: none; } .atm-settings-level-btn:not(.atm-settings-level-active) { opacity: .4; filter: grayscale(70%); } .atm-settings-reset-row { margin-top: 10px; padding-top: 8px; border-top: 1px solid #d8d8d8; text-align: right; } #atm-settings-reset { font-size: 11px; color: #6f8f8f; cursor: pointer; text-decoration: underline; } #atm-settings-reset:hover { color: #4a6666; } /* Mise en avant d'une soiree precise dans la liste de l'agenda, quand on y arrive via un resultat de recherche (voir Make_Party_Info() dans scripts/lib/agenda.php, classe posee directement sur les qui contiennent du texte -- pas sur toute la ligne, pour ne pas deborder sur les cellules d'espacement/image a droite). */ .atm-search-hit { animation: atmSearchHitBlink 0.6s ease-in-out 2; } @keyframes atmSearchHitBlink { 0%, 100% { color: inherit; } 50% { color: transparent; } } /* Visuel de la rubrique Agenda dans les resultats de recherche : meme image fixe reutilisee, mais pivotee aleatoirement (cf. Section_Search_Event() dans scripts/lib/functions_atm.php) pour donner l'impression de plusieurs visuels distincts. */ .atm-rot-90 { transform: rotate(-90deg); } .atm-rot-180 { transform: rotate(-180deg); } .atm-rot-270 { transform: rotate(-270deg); } /* Clignotement de la date (haut droite du site) quand on arrive sur une page avec start_date dans l'URL, en meme temps que le vinyle qui tourne (voir html/atm/time_machine_widget.php). */ #atm-date-display.atm-date-blink { animation: atmSearchHitBlink 1.4s ease-in-out 2; } /* Anniversaire (30 ans en 2026, calcule dynamiquement) : les deux derniers chiffres de 1996 et de l'annee en cours clignotent en gras quelques fois, puis "(X ans !)" apparait juste apres -- voir html/atm/home.htm, pied de page (ligne copyright). */ .atm-anniv-pulse { animation: atmSearchHitBlink 0.5s ease-in-out 4; } .atm-anniv-suffix { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; max-width: 0; opacity: 0; animation: atmAnnivReveal 0.4s ease-in 2s forwards; } /* Bandeau "mode paysage conseille" : toaster anime, centre a l'ecran, pilote par html/js/atm_portrait_toast.js (classe .atm-portrait-toast-visible ajoutee/retiree selon l'orientation + une minuterie). Maquette alignee sur le popover "Time Machine" (classes .tm-dots / .tm-white-frame / .tm-pop-title / .tm-pop-body, memes teintes de fond #ffffff / #efefef -- cf. #tm-popover plus haut), avec un jeu de tailles de police propre, au-dessus du reste du site. */ #atm-portrait-toast { position: fixed; top: 50%; left: 50%; width: min(480px, calc(100vw - 40px)); z-index: 1002; box-shadow: 0 6px 24px rgba(0,0,0,0.45); opacity: 0; visibility: hidden; pointer-events: none; /* etat de repos : entierement sous le bas de l'ecran (120vh depuis le centre vertical), pour une entree/sortie qui vient (et repart) bien au-dela du bord visible, pas juste de quelques pixels */ transform: translate(-50%, 120vh); transition: opacity .45s ease, transform .45s ease, visibility 0s linear .45s; } #atm-portrait-toast.atm-portrait-toast-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, -50%); transition: opacity .45s ease, transform .45s ease, visibility 0s linear 0s; } #atm-portrait-toast .tm-white-frame { background: #ffffff; } #atm-portrait-toast .tm-pop-title { /* Valeurs propres au toast, independantes de la regle .tm-pop-title generique (partagee avec le popover Time Machine) : on ne compte pas sur l'heritage/la cascade pour le fond et la couleur du texte, pour que ce bandeau reste visible quoi qu'il arrive a l'autre regle. Taille alignee sur le ratio titre/texte de la Time Machine (11px de titre pour 11px de contenu, soit un ratio de 1) applique au corps de texte agrandi du toast (30px, cf. #atm-portrait-toast-text) : le titre passe donc de 15px a 26px, proche du corps au lieu d'en faire moins de la moitie. Hauteur/line-height fixes remplaces par un padding + display:flex, pour rester lisible (et passer sur deux lignes proprement) meme sur les tres petits ecrans. */ background: #8aaeae; color: #ffffff; white-space: normal; height: auto; line-height: 1.25; padding: 8px 10px; display: flex; align-items: center; gap: 8px; font-size: 26px; font-weight: bold; } #atm-portrait-toast .tm-pop-title img { width: 26px; height: 26px; flex-shrink: 0; } #atm-portrait-toast .tm-pop-body { padding: 18px; } #atm-portrait-toast-text { font-size: 30px; line-height: 1.35; color: #1c1c1c; } #atm-portrait-toast-actions { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 12px 28px; } #atm-portrait-toast-off { font-size: 26px; font-weight: bold; text-decoration: underline; cursor: pointer; color: #4c7a79; } /* Le popover Time Machine (position:fixed par rapport a l'ecran) reste en dehors du conteneur agrandi par l'effet de zoom (#atm-zoom-inner, voir atm_intro_zoom.js) : sa police garde donc sa taille native pendant que le reste de la page grandit visuellement autour de lui. Ces regles la font suivre l'echelle courante, exposee en variable CSS des que le zoom s'applique (--atm-zoom-scale, posee dans activateZoom() du fichier JS) -- 1 par defaut, donc sans effet zoom desactive/desktop. */ .tm-pop-title { font-size: calc(11px * var(--atm-zoom-scale, 1)); height: calc(20px * var(--atm-zoom-scale, 1)); line-height: calc(20px * var(--atm-zoom-scale, 1)); } .tm-grid .tm-content, .atm-settings-grid .tm-content { font-size: calc(11px * var(--atm-zoom-scale, 1)); } .tm-grid select { font-size: calc(10px * var(--atm-zoom-scale, 1)); } @keyframes atmAnnivReveal { from { max-width: 0; opacity: 0; } to { max-width: 20ch; opacity: 1; } }