/*---------------------------------------------*/ /*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; flex-direction: row; margin: auto; height: 100%; } /* 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 a > * { /*to center vertically the text*/ height: auto; } .navbar .nav_left img { height: calc(100% - 4px); } .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: 0px; } /*---------------------------------------------*/ /*LANGUAGE*/ /* nav_right language selected language language inactive */ .navbar .nav_right .language { position: relative; padding: 0px 10px; } /* horizontal space between flag and name*/ .navbar .nav_right .language > * { margin: auto 3px; } /*flag size*/ .navbar .nav_right .language img.flag { height: 12px; } /*text size*/ .navbar .nav_right .language p { font-size: 1.6em; } /*selected language*/ .navbar .language.selected { background-color: var(--color-back-dark); pointer-events: none; } /*inactive language*/ .navbar .language.inactive { pointer-events: none; filter: grayscale(100%); } /*menu burger responsive*/ nav.navbar input#burger { display: none; } nav.navbar .burger { margin: 0px; }