forked from React-Group/interstellar_ai
104 lines
No EOL
2 KiB
CSS
104 lines
No EOL
2 KiB
CSS
header{
|
|
position: relative;
|
|
padding: 0 20px;
|
|
width: 100%;
|
|
height: 10dvh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1em;
|
|
z-index: 999;
|
|
}
|
|
|
|
.hamburger{
|
|
position: absolute;
|
|
left: 5vw;
|
|
display: none;
|
|
flex-direction: column;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.hamburger span{
|
|
width: 25px;
|
|
height: 3px;
|
|
background-color: white;
|
|
margin: 4px;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.hamburger.open span:nth-child(1){
|
|
transform: rotate(45deg) translate(5px, 10px);
|
|
}
|
|
.hamburger.open span:nth-child(2){
|
|
opacity: 0;
|
|
}
|
|
.hamburger.open span:nth-child(3){
|
|
transform: rotate(-45deg) translate(5px, -10px);
|
|
}
|
|
|
|
|
|
|
|
.nav-links{
|
|
position: absolute;
|
|
left: 1vw;
|
|
display: flex;
|
|
gap: 0.5vw;
|
|
width:max-content;
|
|
height: 100%;
|
|
align-items: center;
|
|
}
|
|
|
|
.nav-btn{
|
|
background-color: var(--input-button-color);
|
|
border: none;
|
|
font-size: 0.9em;
|
|
height: 50%;
|
|
border-radius: 5px;
|
|
padding: 2px 15px;
|
|
font-family: var(--font-family);
|
|
}
|
|
|
|
.nav-btn:hover{
|
|
background-color: var(--input-button-hover-color);
|
|
}
|
|
|
|
.header-logo{
|
|
width: 250px;
|
|
height: 5vh;
|
|
background-image: url(../../public/img/logo.png);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
background-color: transparent;
|
|
border: none;
|
|
}
|
|
|
|
.login-button-container{
|
|
position: absolute;
|
|
top: 0.1vh;
|
|
right: 1vw;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.header-login-button{
|
|
height: 100%;
|
|
width:max-content;
|
|
font-size: var(--font-size);
|
|
padding: 0.5vw 1vw;
|
|
background-color: var(--input-button-color);
|
|
color: var(--text-color);
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s;
|
|
font-family: var(--font-family);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.header-login-button:hover {
|
|
background-color: var(--input-button-hover-color);
|
|
} |