/* Les couleurs se codent en 3 octets en hexadécimal ( base 16 : 0 1 2 3 4 5 6 7 8 9 A B C D E F ) Chaque octet est codé de 00 à FF Les octets sont placés dans l'ordre ROUGE, VERT, BLEU #000000 noir #FF0000 rouge #00FF00 vert #0000FF bleu #FFFFFF blanc mais aussi : #FFFF00 jaune #FF8000 orange #404040 gris sombre #808080 Gris moyen #C0C0C0 Gris clair et toutes les nuances soit 256 * 256 * 256 ... environ 16 millions de couleurs possibles les ordres : 3 types : xxxxx ( exemple : body , table, ...) correspondent aux balises html .xxxxx ( exemple : .error .table-responsive, ... ) correspondent à des classes affectées à des balises #xxxxx ( exemple : #entete, #mid ) Correspondnent aux balises html uniques et nommées A ces types de lien on paut ajouter (éparé par des espaces : a correspond aux paramètres à donner quand c'est un lien a:hover correspond aux paramètres à donner quand la souris passe au-dessus On peut aussi spécifier l'application de A, A:hover à une classe ou un élément d'une classe : exemples : #toto table tr td a:hover ==> ne s'applique qu"aux cellules des tables si on est dans l'élément #toto .tata table tr td a:hover ==> ne s'applique qu"aux cellules des tables si on est dans un éléments de classe tata 2 paramètres séparés par une virgule (exemple : tr, td ... le style affecté sera le même pour les 2 2 paramètres séparés par un blanc ( exemple : .error td ) le style ne sera affecté qu'aux éléments td de .error Pour la syntaxe, voyez les exemples */ /*============================================================================= ELEMENTS de base =============================================================================*/ body { color: #000000; background-color: #FFFFFF; } /* paramètres utilisés par défaut partout ou ils ne sont pas spécifiés */ h1 { color: #009834; } /* Gros titres verts centrés dans les pages */ h2 { color: #009834; } /* moyens titres verts centrés dans les pages */ h3 { color: #009834; } /* petits titres verts centrés dans les pages */ h4 { color: #FF4040; } /* Gros titres rouges centrés dans les pages */ h5 { color: #FF4040; } /* moyens titres rouges centrés dans les pages */ h6 { color: #FF4040; } /* petits titres rouges centrés dans les pages */ p { color: #000000; } /* style à donner par défaut à tous les paragraphes de texte */ a { color: #000000; } /* A : style à donner par défaut à tous les liens actifs */ /*============================================================================= ELEMENTS DESIGNES EXPLOITABLES PAR LE JAVASCRIPT ou le PHP =============================================================================*/ #top { background-color: #009834; } /* en tête de page lorsque la largeur est faible et que le menu doit être appelé en cliquant en haut à gauche */ #entete { background-color: #A0E0A0; } /* en tête de page (là ou il y a les boutons) par toutes les pages qui commencent par "pof" */ #bot { background-color: #009834; } /* bas de page (lien vers les développeurs du menu de gauche) */ #side { background-color: #009834; } /* toute la colonne de gauche (incluant le menu) en mode user */ #side_adm { background-color: #A04040; } /* toute la colonne de gauche (incluant le menu) en mode administrateur */ #pnl5 { background-color: #A0E0A0; } /* toute la zone (image glissante et menu déroulant) en haut en mode non connecté */ #pnl6 { color: #A0E0A0; } /* Ligne de bas de page lien zite+ */ #pnl6 a { color: #FFFFFF; } /* Ligne de bas de page lien zite+ */ #menul { background-color: #009834; } /* Colonne entière du Menu latéral gauche */ #menu_resp{ background-color: #A0E0A0; } /* menu lorsque la largeur est faible (téléphone) */ #pg_Lien_ZITEplus { background-color: #009834; } /* Page des liens avec les auteurs du site */ #pg_Lien_Zite_menu { background-color: #009834; } /* Page des liens avec les auteurs du site */ #pg_Lien_Zite_menu a { color:#FFFFFF; } /* Page des liens avec les auteurs du site : Couleur des liens actifs*/ #main { border-bottom 1px solid #008000 } /* trait de bas de page standard ZITE*/ #pofmain { border-bottom 1px solid #008000 } /* trait de bas de page de type POF-ZITE*/ /*============================================================================= ELEMENTS du menu déroulant mode non connecté =============================================================================*/ #menuh dt { background-color: #009834; } #menuh td, #menuh td a { background-color: #009834; color: #FFFFFF; } #menuh td:hover { background-color: #40FF6A color: #000000; } #menuh dt { color: #FFFFFF; } #menuh dl {background-color: #009834;} #menuh ul {background-color: #009834;} #menuh dt a:hover { background-color: #40FF6A; color: #000000; } #menuh li, #menuh li a { background-color: #009834; color: #FFFFFF; } #menuh li a:hover { background-color: #40FF6A; color: #000000; } /* Les contenu des pages des as de la page d'accueil */ #aspique { background-color:#D0D0D0; } #ascoeur { background-color:#FFC0B0; } #ascarreau { background-color:#FFD080; } #astrefle { background-color:#A0FFA0; } /*============================================================================= CLASSES =============================================================================*/ .entete { background-color: #A0E0A0; } /* en tête de page (là ou il y a les boutons) par toutes les pages qui commencent par "pof" */ .err_login { background-color: #ffC0C0; color: #800000; } /* Erreur de login */ .couche1 , .couche3 , .couche3 a { background-color: #009834; color: #FFFFFF; } /* cadre du bouton "espace adhetents*/ .couche1 a:hover, .couche3 a:hover { background-color: #40FF6A; color: #000000; } .couche3 a { background-color: #009834; color: #FFFFFF; } /* cadre du bouton "espace adhetents*/ .couche4 { background-color: #FFFFFF; color: #000000; } /* texte du bouton "Espaces adhérents*/ .bienvenue_l, .bienvenue, .bienvenue_l a, .bienvenue a{ background-color:#A0E0A0; color:#000000; }/* BIENVENUE : Fenêtre de login */ .bienvenue_l a:hover, .bienvenue a:hover{ color:#000000; background-color:#FFFFFF; } .bienvenue_l p, .bienvenue p{ color:#000000; } .logbuton { border: 2px solid #808080; } .logbuton:hover { color: #FFFFFF; background-color: #000000; } /* couleur du bouton de login */ /* ZUL ... et tout ce qui suit : Menu vertical hiérarchique */ .zul { color: #FFFFFF; } .zul a { color: #FFFFFF; } .zul a:hover { color:#000000; background-color: #A0E0A0; } .zli1 { color: #000000; } .zli2 { color: #000000; } .zli3 { color: #000000; } .zli4 { color: #000000; } .zon { background-color:#007227 ; } /* Couleur des entêtes et lignes de listes en table */ .headercolor { background-color: #009834; color: #FFFFFF; } .headercolor a {color: #FFFFFF; } .headcolor, .headcolor a { background-color: #B0B0B0; } .backcolor { background-color: #E8E8E8; } .headerblack { background-color: #009834; color: #FFFFFF; } /* ligne mois et année dans les plannings */ .evencolor { background-color: #F8F8F8; } /* Couleur des lignes paires */ .oddcolor { background-color: #D8D8D8; } /* Couleur des lignes impaires */ /* TABLE_ARRONDIE : tableau aux coins arrondis, fond et bordure vert charte graphique (ex: inscription tournoi) */ .table_arrondie { border: 2px solid #009834; background-color: #E8E8E8; } /* Couleurs par défaut de la table) */ .table_arrondie th { background-color: #009834; color: #FFFFFF;} /* Couleur de la ligne de tite de la table */ .table_arrondie th, .table_arrondie td { border: 1px solid #E8E8E8; } /* bordure de toutes les cellules */ //.table_arrondie tbody tr:nth-child(even) td { background-color: #B08080; } /* LISTE_ARRONDIE : couleurs de l'encadrement (voir structure dans standard.css) */ .liste_arrondie { border: 2px solid #009834; background-color: #E8E8E8; } .liste_arrondie th, .liste_arrondie td { border: 1px solid #E8E8E8; } .liste_arrondie th a { color: #FFFFFF;} .liste_arrondie th a:hover { color: #000000; background-color: #808080;} /* Planning : trait vert entre les jours et les semaines, comme les fiches et listes */ .table_responsive.liste_arrondie th, .table_responsive.liste_arrondie td { border: 1px solid #E8E8E8; } #inscription.table_responsive_list td:nth-child(1) { background-color: #009834; color: #FFFFFF;} .planning { border: 1px solid #B0B0B0; } .planningcolor { background-color: #E8E8E8; } /* Couleur du planning */ .plandate { background-color: #B0B0B0; color: #FFFFFF; border: 1px solid #B0B0B0;} /* Date dans le planning */ .liste_arrondie td .plaolor: #ffffff; ndate { border: 1px solid #B0B0B0;} /* Date dans le planning */ .plandate a:hover { background-color: #B0B0B0; color: #FFFFFF; } .freeday { background-color: #E8E8E8; } /* Jour de la semaine qui n'appartient pas au mois courant dans le planning */ .ferie { background-color: #D0D0D0; } /* Couleur de fond pour les jours déclarés fériés dane le planning */ .nouveau { background-color: #80FFA0; } /* NOUVEAU : déclaration de nouvel adhérent dans la liste des adhérents */ /* Définition des classes de couleur et boutons .... */ .yellow { background-color: #ffff80; color: #000000;} .aqua { background-color: #bbbbff; color: #000000;} .purple { background-color: #F0A0F0; color: #ffffff; } .grey { background-color: #D0D0D0; color: #ffffff; } .darkgrey { background-color: #808080; color: #ffffff; } .lime { background-color: #90ff90; color: #000000;} .orange { background-color: #ffcc00; color: #000000;} .vert { background-color: #80FF80; color: #000000;} .fushia { background-color: #ffa0a0; color: #000000;} .rose { background-color: #ffC0C0; color: #000000; border-bottom: 1px solid #ff8080; } .rouge { background-color: #ff0000; color: #ffffff; font-weight: bold; } .noir { background-color: #000000; color: #ffffff; font-weight: bold; } .mbleu { background-color: #EEEEFF; border: 1px solid #4040FF; } .brouge { background-color: #FFBBBB; border: 1px solid #FF2020; } .bvert { background-color: #AAFFAA; border: 1px solid #20CC20; } .bbleu { background-color: #CCCCFF; border: 1px solid #4040FF; } .borange { background-color: #FFDDAA; border: 1px solid #CC8000; } .bjaune { background-color: #FFFF80; border: 1px solid #808000; } .bgris:hover { background-color: #808080; color: #ffffff; } .brouge:hover { background-color: #800000; color: #ffffff; } .bvert:hover { background-color: #008000; color: #ffffff; } .bbleu:hover { background-color: #0000C0; color: #ffffff; } .borange:hover{ background-color: #806000; color: #ffffff; } .bjaune:hover { background-color: #808000; color: #ffffff; } /* Separateur entre enregistrements du tableau table_responsive_list en mode empile (< 1024px) */ @media screen and (max-width:1024px) { .table_responsive_list tr { border-bottom: 1px solid #A0E0A0; } }