/* 09/02/2022 */ /* Sélectionne l'élément racine du document */ /* Pour un document HTML, c'est */ :root { --main-color: #FFFFFF; /*#291DC9;*/ /*#0A31E9;*/ --titre-color: #0A31E9; /* pour #titre */ --titre1: #9FF7FB; /* pour .titre */ --shadow_body: 1px 1px #C4D8F7; /*#EBF2FC;*/ --clair: #FFFFFF; --fonce: #000000; --en_avant: #FE5FA8; /* utilisé dans .important */ --bg_page:153deg, #0A31E9 0%, #738AF9 36%, #0A31E9 100%; --bg_page_fixe:#0A31E9; /* couleur si pas gradient) */ --motscles: #0080FF; /* menu */ --bg_menu_principal1:#1846FC; /* item : couleur foncée du gradient */ --bg_menu_principal2:#97BBFF; /* item : couleur claire du gradient */ --fond_sous_menu1: #A2A4F9; --fond_sous_menu2: #C5CEFC; --bg_sous_menu1:#D73E96; /* item : couleur foncée du gradient */ --bg_sous_menu2:#F4CEE4; /* item : couleur claire du gradient */ --fond-icon: #FF0000; /* fond icône sandwich */ /* bouton */ --bouton_bord: 2px solid #827E06; --fond_bouton: #ECF79D; /* #0EAFE4; /* #E210C2; */ --color_bouton: #4B5504; /* #095980; /*#7E0A6D; */ /* en rose : 0deg, #F59EE3 0%, #A30C8C 80%, #A30C8C 100% */ --bouton: 0deg, #ECF79D 0%, #827E06 50%, #827E06 100%; --bouton_hover: 0deg, #827E06 0%, #ECF79D 60%, #ECF79D 100%; /* Gros bouton : uniquement pour gestion base */ /* ****************************************** */ --g_bouton_bord: 2px solid #0662D0; --g_bouton_clair: #FFFFFF; --g_bouton_fonce: #0662D0; --g_bouton: 0deg, #9AB7FA 0%, #0662D0 80%, #0662D0 100%; --g_bouton_hover: 0deg, #0662D0 0%, #9AB7FA 40%, #9AB7FA 100%; --fond_g_bouton: #AAE4FB; --popup_close: #333333; --popup_close_hover: #FF0000; --lien_color: #F1A027; /*#0140E7;*/ --lien_hover_c: #FF0080; /* color */ --lien_hover_b: #F8E19C; /* fond */ --shadow_lien: 1px 1px #FFFFFF; } body { color: var(--main-color); /*background-color: var(--bg_page_fixe);*/ background: linear-gradient(var(--bg_page)); /*text-shadow: var(--shadow_body); mis en titre*/ } a { color: var(--lien_color); /*text-shadow: var(--shadow_lien);*/ } a:hover { color: var(--lien_hover_c); background-color:var(--lien_hover_b); } /* pour ne pas avoir couleur de fond sur une image lien */ .pas_hover:hover { background-color: transparent; } /* pour tous les */ #debut:hover { display: none; } table { border:#0080FF 4px solid; } .ligne1px { background-color: var(--main-color); } .ligne2px { background-color: var(--main-color); } .encadre { color: #1876A3; background-color: #FFF2ED;/*#C8E8F7;*/ border:4px solid #0088CC; text-shadow: none; } .cadre { /* pour encadrer du texte */ border: #3343D0 1px solid; background-color: #ADE2F1; } .conteneur { /* en gestion BD */ background-color: #86C8FF; } .important { color: var(--en_avant); font-weight: bold; } /* pour lecture d'une news */ input[type=submit] {background-color:#D570E7;color: #FFFFFF;} input[type=submit]:hover {background-color:#FFFFFF;color: #D570E7;} input[type=button] {background-color:#9F9F9F;color: #FFFFFF;} input[type=button]:hover {background-color:#AF22C8;color: #FFFFFF;} /*****************************************************/ /* -------------------- anim menu ------------------ */ /*****************************************************/ /* source : https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp */ /* La barre de navigation globale du menu */ #encadre_menu { background-color: var(--bg_menu_principal1); background: linear-gradient(0deg, var(--bg_menu_principal1), var(--bg_menu_principal2)); } /* Style the links inside the navigation bar */ .menu a, #encadre_menu .icon { color: var(--clair); } /* Style the dropdown button to fit inside the menu */ .dropdown .dropbtn { color: var(--clair); background-color: inherit; } /* Style the dropdown content (hidden by default) */ .dropdown-content { background-color: var(--fond_sous_menu1); background: linear-gradient(var(--fond_sous_menu1),var(--fond_sous_menu2)); } /* Style the links inside the dropdown */ .dropdown-content a { color: var(--fonce); } /* 'hover' sélection item menu principal */ /* ouvrant un sous-menu */ .menu .dropbtn:hover { color: var(--clair); background-color: var(--bg_menu_principal2); background: linear-gradient(0deg, var(--bg_menu_principal2), var(--bg_menu_principal1)); } /* 'hover' sélection item menu principal en lien direct */ /* ou lien direct (sélecteur '>') dans sous-menu */ .menu > a:hover, .menu .dropdown-content a:hover { color: var(--clair); background-color: var(--bg_sous_menu1); background: linear-gradient(0deg, var(--bg_sous_menu1), var(--bg_sous_menu2)); } /* bouton dans menu et dans agenda */ .bouton_menu { background-color: var(--fond_bouton); background: linear-gradient(var(--bouton)); } /* When the screen is less than 600px wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the menu (.icon) = même valeur que ligne 196 de base.css */ @media screen and (max-width: 600px) { #encadre_menu .icon { background-color:var(--fond-icon); } } /* --- je n'ajouterai pas de niveau de sous-menu en plus ---- */ /**************************/ /* ----- anim titre ----- */ /**************************/ #titre { color: var(--titre-color); text-shadow: var(--shadow_body); } .titre1 { /* comme en_gros, mais centré */ color: var(--titre1); } /*****************************************************/ /* --------------- anim mots-clés ------------------ */ /*****************************************************/ .motscles div { /* tous les enfants de 'motscles' */ color: var(--motscles); } @keyframes slide1{ 0% { opacity: 0; left:0em; color:var(--main-color); } 15%{ opacity: 1; color:var(--main-color); } 20%{ opacity: 1; color:var(--en_avant); } 50%{ opacity: 0; color:var(--main-color); } 100%{ opacity: 0; left:30em; color:var(--main-color); } } /*****************************/ /* ----- anim boutons ------ */ /*****************************/ .bouton { color: var(--clair); border: var(--bouton_bord); background-color: var(--fond_bouton); background: linear-gradient(var(--bouton)); border-radius: 10px; padding: 5px; } .bouton:hover { background-color: var(--clair); background: linear-gradient(var(--bouton_hover)); color: var(--color_bouton); } .g_bouton { color: var(--g_bouton_clair); border: var(--g_bouton_bord); background-color: var(--fond_g_bouton); background: linear-gradient(var(--g_bouton)); text-shadow:none; border-radius: 10px; padding: 5px; } .g_bouton:hover { background-color: var(--g_bouton_fonce); background: linear-gradient(var(--g_bouton_hover)); color: var(--g_bouton_fonce); } /****************************/ /* ------ anim popup ------ */ /****************************/ .overlay { background-color: rgba(100, 110, 5, 0.8); } .popup { background-color: var(--clair); color: var(titre-color); } .popup h3 { /* ne marche pas ! ! */ color: var(--main-color); } .popup .close { color: var(--popup_close); } .popup .close:hover { color: var(--popup_close_hover); } .content { /* color dans la popup */ color:#0000FF; }