pro/2022_WEBSITE_kosmopolit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

rectfication de toutes les navabr pour toutes les langues

Browse Source
This commit is contained in:
ethylotest
2021-04-07 02:00:11 +02:00
parent c1515e51f4
commit 512c6ae214
49 changed files with 1050 additions and 354 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
styles/nav.css
View File

@@ -56,63 +56,36 @@ body#body_navbar {
/*---------------------------------------------*/
/*DROPDOWN*/
/*LANGUAGE*/
/*
.dropdown
.drop_title .drop
.drop_items
.drop
.drop
nav_right
language selected
language
language inactive
*/
.navbar .nav_right .dropdown {
position: relative;
height: 100%;
flex-direction: column;
}
.navbar .nav_right .dropdown .drop {
.navbar .nav_right .language {
position: relative;
padding: 0px 10px;
}
.navbar .nav_right .dropdown .drop_title {
background-color: var(--color-back-dark);
pointer-events: none;
}
.navbar .nav_right .dropdown .drop_title:focus {
background-color: var(--color-back-base);
}
/* the items that drop horizontally to the left*/
.navbar .nav_right .dropdown .drop_items {
position: absolute;
top: 0px;
right: 100%;
height: 100%;
width: auto;
background-color: var(--color-back-base);
flex-direction: row;
}
/* horizontal space between flag and name*/
.navbar .nav_right .dropdown .drop > * {
.navbar .nav_right .language > * {
margin: auto 3px;
}
/*flag size*/
.navbar .nav_right .dropdown img.flag {
.navbar .nav_right .language img.flag {
height: 12px;
}
/*flag size*/
.navbar .nav_right .dropdown .drop p {
/*text size*/
.navbar .nav_right .language p {
font-size: 1.6em;
}
/*a rectangle cover the div when focus, so you can click on it to unfocus*/
.navbar .nav_right .dropdown:focus-within:after {
content: "";
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
/*selected language*/
.navbar .language.selected {
background-color: var(--color-back-dark);
pointer-events: none;
}
/*inactive language*/
.navbar a.drop.inactive {
.navbar .language.inactive {
pointer-events: none;
filter: grayscale(100%);
}