/* Feuille css pour la barre générale de Khaganat et son footer */ /* violet khaganat : #8530bf */ .khnav_gen { margin-top: 0; padding-top: 0; display:flex; justify-content: space-between; align-items: center; z-index: 800; background-color: white; color: #8530bf; border-bottom: 2px solid #8530bf; } .khnav_mobile, .khnav_input_mobile, .khnav_gen label { display:none; } /* Partie toujours visible, sur la ligne principale */ .khnav_nav1, .khnav_connect { list-style: none; display:inline-flex; padding: 0 1em; margin: 0; line-height: 3em; z-index: 800; } .khnav_dropdown { margin: 0 0.3em; min-width: 6.6em; } .khnav_dropdown:hover, .khnav_dropdown:focus { background-color: #8530bf; color: white; } .khnav_dropdown .khnav_dropdown-toggle { padding: 0 0.3em 0 1em; } .khnav_dropdown ul { /*display:none; Pas accessible !!! */ clip: rect(0, 0, 0, 0); /* Déprécié mais ici pour les anciens navigateurs */ clip-path: ellipse(0px 0px at 0% 0%); } .khnav_dropdown:hover ul, .khnav_dropdown:focus ul { display:block; clip: initial; clip-path: initial; } .khnav_dropdown-toggle { } .khnav_fleche { display: inline-block; border-top: 4px solid #000000; border-right: 4px solid transparent; border-left: 4px solid transparent; content: ""; margin: 0 0.5em; } /* Logo, au milieu (sauf sur mobile */ .khnav_logo { position:absolute; top: 0; width: 100%; } .khnav_logo_container { display: flex; margin: 0 auto; justify-content: center; height: 3.5em; } .khnav_logo_bg { background-color: #8530bf; color:white; display: flex; align-items: center; } .khnav_logo_bg:after { border-right: 2em solid transparent; border-top: 3.5em solid #8530bf; margin-right: -2em; content: " "; } .khnav_logo_bg:before { border-left: 2rem solid transparent; border-top: 3.5rem solid #8530bf; margin-left: -2em; content: " "; } .khnav_logo_bg img { max-width: 2em; margin: 0; padding:0; padding-bottom: 0.3em; vertical-align: inherit; } /*e éléments sur la droite */ /*.khnav_connect { padding: 0 1em; border: 1px solid #8530bf; }*/ /* Dans les menus déroulants */ .khnav_dropdown-menu { display: flex; flex-direction:column; padding:0; list-style: none; position: absolute; z-index: 800; margin:0; line-height: 1.5em; } .khnav_biseaubottom { border-style : solid; border-color : white transparent transparent transparent; border-width : 0.5em; padding: 0; background-color: transparent !important; } .khnav_dropdown-menu hr { border: solid #9073ff ; margin:0; border-width: 0 0 1px; } .khnav_dropdown-menu li { margin: 0; background-color: white; } .khnav_dropdown-menu li a { display:block; padding: 0.1em 1em; } .khnav_dropdown-menu li a:hover, .khnav_dropdown-menu li a:focus { background-color: #8530bf; color: white; } /* Partie "description" des items de menus */ .khnav_dropdown-menu li a aside { position: absolute; left: 100%; top: 0; width:20em; border: 1px solid #9073ff; /*Cacher*/ clip: rect(0, 0, 0, 0); /* Déprécié mais ici pour les anciens navigateurs */ clip-path: ellipse(0px 0px at 0% 0%); } .khnav_dropdown-menu li a:hover aside, .khnav_dropdown-menu li a:focus aside { display:block; /* Montrer */ clip: initial; clip-path: initial; } .khnav_dropdown-menu li a:hover aside h3, .khnav_dropdown-menu li a:focus aside h3 { text-align: center; margin:0; background-color: #8530bf; color: white; padding: 0.5em; } .khnav_dropdown-menu li a:hover aside div, .khnav_dropdown-menu li a:focus aside div { margin:0; background-color: white; color: #2d1040; padding: 0.5em; } .khnav_dropdown-menu img { max-width: 1.5em; } /* Pied de page */ #khfooter_bottom { /*position: absolute;*/ bottom: 0; width: 100%; } .khfooter { padding: 0; display: flex; margin: 0 auto; justify-content: center; } .khfooter a { color:#8530bf; padding: 0 0.75em; } .khfooter div { background-color: white; color: #8530bf; line-height: 2.5em; display: flex; align-items: center; } .khfooter div img { max-height: 1.25em; padding: 0.5em; } .khfooter:after { border-right: 2.5em solid transparent; border-bottom: 2.5em solid white; margin-right: -2.5em; content: " "; } .khfooter:before { border-left: 2.5rem solid transparent; border-bottom: 2.5rem solid white; margin-left: -2.5em; content: " "; } /* Accessibilité */ /* lien d'évitement ; pour accessibilité */ .khnav_skip, .khnav_skip a { position: absolute; clip: rect(0, 0, 0, 0); /* Déprécié mais ici pour les anciens navigateurs */ clip-path: ellipse(0px 0px at 0% 0%); }