/** L'élément racine du html => */ :root { --img-height: 233px; --img-width: 150px; --img-scale: .5; --cards-per-row: 3; } /** Toutes les balises*/ * { /** bordures de la boîte */ border: 0; /** Mode de dimensionnement sur la boîte de bordure */ box-sizing: border-box; /** marge extérieure de la boîte */ margin: 0; /** bordure superposé qui apparaît en "focus" */ outline: 0; /** marge intérieure de la boîte */ padding: 0; } button { /** Couleur de fond du boutton(zone du contenu + padding) */ background-color: transparent; } body { /** Couleur du texte */ color: var(--color-text-main); /** Couleur de fond (zone du contenu + padding) */ background-color: var(--bg-main); /** Type de police */ font-family: "Chakra Petch", sans-serif; /** Taille de la police */ font-size: 20px; background: #333333 url(themes/default/img/fond.png) center center no-repeat; background-size: contain; } .hidden { /** Annule l'affiche, !important empêche qu'on puisse reprendre la priorité dessus */ display: none !important; } /** Tous les

, et les */ h1, .h1 { font-family: "Chakra Petch", sans-serif; font-size: 2em; font-weight: 400; } header { /**Gére la disposition des enfants flex perpendiculairement à l'axe principal au "fil" */ align-items: center; /** Activer le système flexbox sur
qui devient "parent-flex" */ display: flex; /** Gére l'orientation du "fil" */ flex-direction: column; /**Gére la goutière (espace de séparation) entre les "éléments flex" */ gap: 5px; padding: 20px; } /** -- Indicateur de thème actif --*/ .theme-indicator { font-size: .8em; } h1 { /**Faire une bordure autour du titre */ border: 4px solid #00eeff; /**Arrondir les coins de la bordure */ border-radius: 20px; /**Ajouter de l'espace entre le texte et la bordure */ padding: 10px 20px; /**Ajouter de l'espace entre la bordure et le bouton*/ margin-bottom: 10px; /**Faire une ombre sur le texte */ text-shadow: 2px 2px 4px #000000; } #hi-score { padding-right: 15px; } .btn { padding: 5px; margin: 0 5px; transform: scale(1.5); border: var(--btn-border); border-radius: 50%; background-image: var(--btn-bg); color: white } /** Lorsqu'on maintient le doigt (ou le clic) sur le bouton */ .btn:active { transform: scale(1.3); border: var(--btn-active-border); } main { /** valeurs : haut, droite, bas (ici = haut), gauche (ici = gauche) */ padding: 0 20px; } /** Tous les éléments qui sont dans */ .score>* { /** Gère l'alignement vertical d'un élément inline par rapport au texte aux inlines voisins */ vertical-align: middle; } /** LE */ #current-score { /** "em" = 1 cadratin (taille du carartère d'imprimerie) C'est un multiplicateur de la dernière taille en pixels donnée au texte */ color: var(--color-score); font-size: 2.5em; } #deck { display: flex; /**Active le retour à la ligne des enfants flex*/ flex-wrap: wrap; gap: 20px; margin-left: auto; margin-right: auto; /** Perspective des transformations */ /** Distance en pixels entre le point d'origine (point de fuite) et l'oeil de l'observateur supposé */ perspective: 800px; /** Position du point de fuite par rapport à #deck */ perspective-origin: 50% 30%; width: calc((20px * (var(--cards-per-row) - 1)) /** Nombre Gaps*/ + (2px * 2 * var(--cards-per-row)) /** Total des bordures*/ + (var(--img-width) * var(--img-scale) * var(--cards-per-row)) /** Total des images*/ ); } /** -- Cartes --*/ .card { /** Bordures */ border: var(--card-border) ; /** Coins arrondie */ border-radius: 3px; position: relative; transition: transform .2s ease-in; } .card.flipped { transform: rotateY(.5turn); } /** Tous les
enfants direct de */ .card>div { /** Hauteur fixe*/ height: calc(var(--img-height) * var(--img-scale)); /** Largeur fixe */ width: calc(var(--img-width) * var(--img-scale)); background-size: calc(var(--img-width) * var(--img-scale)) calc(var(--img-height) * var(--img-scale)); } /** Une autre alternative : * / /** Tous les éléments dont l'attribut "class" commence par "card-" */ /** [class^="card-"] {} */ .card-back { /* Test avec le chemin direct depuis la racine du site */ background-image: url('themes/default/img/back.webp'); /* Couleur de secours */ background-color: var(--card-back-bg-color); background-position: center center; background-repeat: no-repeat; background-size: cover; /* Ajout conseillé pour remplir la carte */ position: relative; border: 2px solid #00eeff; z-index: 2; } .card-img { background: #00eeff center center no-repeat; position: absolute; top: 0; transform: rotateY(.5turn); transition: z-index .2s ease-in; z-index: 1; } .card.flipped .card-img { z-index: 3; } /**-- Modales --*/ /** Bonton réglages --*/ #btn-setting { /** Espaces entre le bord bas du bouton et le bors bas du viewport*/ bottom: 20px; position: fixed; /** Espace entre le bors droit du bouton et le bord droite de l'élément de référence du positionnement */ right: 20px } .modal-overlay { align-items: center; background-color: var(--modal-overlay-bg); display: flex; /** vh = viewport height; 100vh = 100% de la hauteur du viewport */ height: 100vh; justify-content: center; left: 0; /** Positionne le bloc de la même manière qu'absolute, mais sa référence est toujours l'écran */ position: fixed; top: 0; width: 100%; } .modal { background-color: var(--modal-bg); border: var(--modal-border); padding: 20px; align-items: center; display: flex; flex-direction: column; gap: 5px; } /** -- Responsive --*/ /** - Ecrans à partir de 992px de large (desktop) -*/ @media (min-width: 992px) { :root { --img-scale: .9; --cards-per-row: 6; } .card { cursor: pointer; } .btn { cursor: pointer; } /** Lorsqu'on passe le curseur sur le bouton */ .btn:hover { transform: scale(1.3); border: var(--btn-active-border); } }