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

menu entierement en ligne pour iframe et ajout liens vers revues litterall

Browse Source
This commit is contained in:
ethylotest
2021-03-26 18:49:10 +01:00
parent b0bd0673fc
commit 1effbad549
15 changed files with 388 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
styles/nav.css
View File

@@ -1,11 +1,19 @@
/*---------------------------------------------*/
/*NAVBAR*/
nav iframe {
width: 100%;
}
body#body_navbar {
background-color: transparent;
overflow: hidden;
}
.navbar {
flex-direction: row;
/*we have to set the height to use the height % for childs elements*/
height: var(--nav-height);
background-color: var(--color-back-base);
border-bottom: 1px solid var(--color-lines-4);
}
.navbar * {
display: flex;
@@ -24,16 +32,19 @@
padding-left: 40px;
padding-right: 40px;
}
.navbar a p {
.navbar a > * {
/*to center vertically the text*/
height: auto;
}
.navbar .nav_left img {
height: calc(100% - 4px);
}
.navbar a:not(#nav_logo):hover, nav a:not(#nav_logo):focus {
.navbar a:hover, .navbar a:focus {
background-color: var(--color-back-dark);
}
.navbar a#nav_logo:hover, .navbar a#nav_logo:focus {
background-color: var(--color-back-base);
}
/* nav_right is used for actions such as connection, search or language*/
.navbar .nav_right {
margin-right: 2px;
@@ -61,16 +72,31 @@
.navbar .nav_right .dropdown .drop {
position: relative;
padding: 0px 20px;
}
.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: 100%;
left: 0px;
top: 0px;
right: 100%;
height: 100%;
flex-direction: column;
width: auto;
background-color: var(--color-back-base);
flex-direction: row;
display: none;
}
/* create a gaz on the rest of the navbar when language menu drop*/
.navbar .nav_right .dropdown .drop_items::before {
content: "";
position: absolute;
top: 0px;
right: 100%;
width: 100vw;
height: 100%;
background-color: rgba(240,240,240,0.5);
}
/* horizontal space between flag and name*/
.navbar .nav_right .dropdown .drop > * {
margin: auto 3px;