/************************************************************************************************************************/ /************************************************************************************************************************/ /** **/ /** Données communes **/ /** **/ /************************************************************************************************************************/ /************************************************************************************************************************/ /* ==================================================================================================================== */ /* */ /* I. Définitions générales (root) */ /* */ /* ==================================================================================================================== */ :root /* Paramétrage des couleurs de la page */ /* -------------------------------------------------------------------- */ { --transparent: #11ffee00; /* Complètement transparent */ --black: #000000; /* Inutilisé */ --white: #FFFFFF; /* Textes & Icônes sur fond foncé */ --whiteTr: #FFFFFF22; /* Survol des Icônes */ --blue01: #006087; /* Barre de titre */ --blue02: #C5D9EC; /* Entrée menu sélectionnée (fond) */ --blue03: #084B77; /* Entrée menu sélectionnée (texte) */ --blue04: #1E90FC; /* Page */ --blue05: #0A7398; /* Barre de titre du schéma */ --blue06: #EBFAFF; /* Hover bloc */ --blue07: #2171AF; /* Lien vers autre page */ --blue08: #71AEE4; /* Border d'input sélectionné */ --grey01: #F7F7F7; /* Fond de page par défaut */ --grey02: #DCDCDC; /* Boutons, Entrée menu survolée */ --grey03: #646970; /* Texte, icônes menu... sur fond blanc */ /* <=> #646970FF */ --grey03Tr: #64697010; /* Texte, icônes menu */ --grey04: #888888; /* Zone de dessin du schéma */ --grey04Tr: #AAAAAA88; /* Voile gris */ --grey05: #2C3338; /* Texte d'input */ --grey06: #C3C4C7; /* Border d'input */ --grey07: #444455; /* Volet de navigation du schéma */ --violet01: #CB316B; /* Boutons d'action violet-rouge */ --violet02: #AD1F58; /* Boutons d'action survolés */ --yellow: #FFFF00; /* Tests */ /* Propriété font-size : taille de police par défaut */ /* Propriété font-family : liste ordonnée des polices à utiliser */ /* -------------------------------------------------------------------- */ font-size: 14px; font-family: Lato, sans-serif; color: var(--grey03); /* Valeurs par défaut margin/padding (NB. Pas d'héritage pour border) */ /* ------------------------------------------------------------------------ */ margin: 0; /* Précaution systématique pour éviter les marges générées par le navigateur */ padding: 0; } /* ==================================================================================================================== */ /* */ /* II. Définitions adaptées à une petite fenêtre */ /* */ /* ==================================================================================================================== */ @media (max-width: 480px) { } /* ==================================================================================================================== */ /* */ /* III. Définitions adaptées à une grande fenêtre */ /* */ /* ==================================================================================================================== */ @media (min-width: 480px) { /* -------------------------------------------------------------------------------------------------------------------- */ /* Voile Gris */ /* -------------------------------------------------------------------------------------------------------------------- */ #greyShadowWindow{ position: absolute; right: 0px; top: 0px; height: 100%; width: 100%; background-color: var(--grey04Tr); display: none; z-index: 999; } /* ==================================================================================================================== */ /* */ /* RAPPEL DES PRINCIPALES PROPRIETES DE MISE EN FORME */ /* */ /* ==================================================================================================================== */ #nomIdentifiant{ /* Mettre "." pour une classe */ font-size: 14px; /* Taille de police : rem em % px ... */ color: #6e05c3; /* Couleur du texte rgb(255,0,0) green var(--grey02) ... */ font-weight: bold; /* Texte en gras 100,200...900 */ font-style: italique; /* Texte en italique */ text-decoration: underline; /* Soulignement et autres overline line-through */ text-transform: uppercase; /* Majuscules ou minuscules ... */ font-variant: small-caps; /* Petites majuscules */ line-height: 1.5; /* Interligne minimum Unités de taille police, %taille police, nb fois interligne */ font: bold 1.2rem Garamond,serif; /* Raccourci de mise en forme de caractères */ text-shadow: 2px -2px 2px blue; /* Ombrage du texte Décalage x droite, y bas, étendue du flou, couleur ombre */ text-align: left; /* Alignement horizontal du texte left right center justify */ text-indent: 5rem; /* Retrait 1ère ligne d'un paragraphe + ou - */ vertical-align: top; /* Affichage éléments en indice ou exposant sub super*/ /* Centrage vertical d'une image baseline, middle, top, bottom ... */ border-style: solid; /* Style de bordure none hidden solid dotted dashed double groove ridge inset outset */ /* border-top-style border-right-style border-bottom-style border-left-style */ border-width: 2px; /* Epaisseur de bordure thin medium thick valeur 4 prop avec top, right, bottom, left */ border-color: gray; /* Couleur de bordure transparent=invisible 4 prop avec top, right, bottom, left*/ border: 5px groove gray; /* Raccourci pour toutes les propriétés 4 prop avec top, right, bottom, left */ /* outline */ /* Idem border mais se superpose au bloc sans augmenter ses dimensions */ background-color: yellow; /* Couleur d'arrière-plan transparent ou nom/code couleur*/ border-radius: 5px 20px; /* Coins arrondis une valeur, ou rayon vertical / rayon horizontal*/ box-shadow: 2px 2px 2px green; /* Ombrage des blocs cf texte */ background-image: url(img/aaa.jpg); /* Affichage image arrière-plan */ background-repeat: repeat-y; /* Répétition image background repeat-x repeat-y no-repeat */ background-position: center top; /* Alignement image background horizontal vertical left center right top bottom valeur */ background-attachment: scroll; /* Fixation image background scroll local fixed */ background-origin: padding-box; /* Origine positionnement image background padding-box border-box content-box */ background-clip: padding-box; /* Etendue image background padding-box border-box content-box */ background-size: 100px 300px; /* Dimension image background Largeur Largeur et hauteur auto contain cover */ background: blue url(l.png) fixed; /* Raccourci pour toutes les propriétés Compliqué */ margin: 5px 5px 5px 10px; /* Marges auto rem em px % ... margin-left,right,top,bottom */ padding: 5px 5px 5px 10px; /* Marges intérieures auto rem em px % ... padding-left,right,top,bottom */ width: 300px; /* Largeur fixe d'un bloc auto taille relative : rem em % px taille fixe : pt pc cm... déconseillé */ height: 200px; /* Hauteur fixe .... */ box-sizing: border-box; /* Dimensions globales d'un bloc content-box padding-box border-box */ min-width: 50%; /* Largeur et hauteur minimum nombre en rem em % px ou % */ min-height: 50%; max-width: 50%; /* Largeur et hauteur maximum nombre en rem em % px ou % */ max-height: 50%; resize: both; /* Bloc de dimensions modifiables none both horizontal vertical */ display: block; /* Mode d'affichage d'un élément none block flex grid table ............ */ visibility: hidden; /* Affichage ou non d'un élément visible hidden collapse*/ overflow: scroll; /* Affichage des débordements visible hidden scroll auto*/ list-style-type: square; /* Type de liste à puces */ /* ... */ table-layout: fixed; /* Type de tableau */ /* ... */ position: absolute; /* Type de positionnement d'un Bloc static relative absolute fixed */ top: 5px; /* Décalages indiquant la position d'un bloc auto % valeur en rem em px */ bottom: 5px; left: 5px; right: 5px; z-index: 10; /* Niveau d'empilement des blocs nb entier >0, 0, <0 ssi bloc positionné */ float: left; /* Positionnement flottant d'un Bloc none left right */ clear: right; /* Pas d'élément flottant sur le coté none left right both */ column-count: 3; /* Multicolonnage */ /* ... */ /* ------------------------------------ FLEX ------------------------------------ */ display: flex; /* Type flexbox pour un élément flex inline-flex */ /* conteneurs flex */ flex-direction: row; /* Direction et axe principal des blocs row row-reverse column column-reverse */ flex-wrap: wrap; /* Comportement des items flex qui débordent du Conteneur no-wrap wrap wrap-reverse */ /* flex-flow = flex-direction + flex wrap */ justify-content: center; /* Alignement sur l'axe principal flex-start center flex-end space-between space-around space-evenly */ align-items: stretch; /* Alignement sur l'axe perpendiculaire stretch flex-start center flex-end baseline */ align-content: center; /* Répartition sur l'axe perpendiculaire stretch flex-start center flex-end space-between space-around space-evenly */ /* items flex */ align-self: flex-end; /* Alignement spécifique d'un Bloc auto stretch flex-start flex-end */ flex-grow: 1; /* Agrandissement auto des blocs 0 nb positif entier ou decimal */ flex-shrink: 1; /* Réduction auto des blocs 0 nb positif entier ou decimal */ flex-basis: 250px; /* Dimensions de base avant agrandissement ou réduction des blocs */ /* flex = flex-grow + flex-shrink + flex-basis */ order: 5; /* No d'ordre d'affichage */ /* ------------------------------------ GRID ------------------------------------ */ display: grid; /* Type grid pour un élément grid inline-grid */ grid-template-columns: 1fr 4fr; /* Définition des colonnes */ grid-template-rows: 1fr 4fr; /* Définition des rangées */ grid-template-areas: "b1 b1" "b2 b3"; /* Mise en page utilisant des noms de blocs */ /* ........................... */ }