/*---------------------------------------------*/ /*NAVBAR*/ nav { border-bottom: 1px solid var(--color-lines-4); } nav iframe { width: 100%; } body#body_navbar { background-color: transparent; overflow: hidden; } .navbar, .i_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); } .navbar *, .i_navbar * { display: flex; flex-direction: row; margin: auto; height: 100%; } /*menu burger responsive*/ .navbar input#burger { display: none; } .navbar .burger { margin: 0px; } /*hover & focus*/ .navbar a:hover, .navbar a:focus, .i_navbar a:hover, .i_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); } .navbar a > *, .i_navbar a > * { /*to center vertically the text*/ height: auto; } /*---------------------------------------------*/ /*NAVIGATION LINKS*/ /* nav_left is used for links to pages*/ .navbar .nav_left { margin-left: 0px; } .navbar .nav_left a { padding: 0px 20px; } .navbar .nav_left #nav_logo { padding-left: 40px; padding-right: 40px; } .navbar .nav_left img { height: calc(100% - 4px); } /*---------------------------------------------*/ /*LANGUAGE*/ /* nav_right language selected language language inactive */ /* nav_right is used for actions such as connection, search or language*/ .nav_right, .i_nav_right { margin-right: 0px; } .i_nav_right .language { position: relative; padding: 0px 10px; margin: auto 0px auto auto; } /* horizontal space between flag and name*/ .i_nav_right .language > * { margin: auto 3px; } /*flag size*/ .i_nav_right .language img.flag { height: 12px; } /*text size*/ .i_navbar .nav_right .language p { font-size: 1.6em; } /*selected language*/ .i_nav_right .language.selected { background-color: var(--color-back-dark); pointer-events: none; } /*inactive language*/ .i_nav_right .language.inactive { pointer-events: none; filter: grayscale(100%); }