df83288591
Navbar now applies a mobileNavOpen style when the mobile menu is open, improving mobile compatibility. User area elements are moved into the link group for better mobile layout, and several CSS adjustments were made for smoother transitions and consistent icon sizing.
454 lines
7.9 KiB
CSS
454 lines
7.9 KiB
CSS
.navbar {
|
|
width: 80%;
|
|
margin: auto;
|
|
padding: 0 2em;
|
|
background-color: var(--c-boxes);
|
|
color: white;
|
|
font-family: "Roboto Mono", monospace;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 50;
|
|
gap: 1rem;
|
|
border-bottom-left-radius: 2em;
|
|
border-bottom-right-radius: 2em;
|
|
|
|
--nav-margin-y: 1em;
|
|
opacity: 0.95;
|
|
|
|
transition: all 0.3s ease-in-out;
|
|
}
|
|
|
|
.mobileNavOpen{
|
|
border-radius: 0;
|
|
}
|
|
|
|
/* Brand */
|
|
.logo {
|
|
padding-right: 1em;
|
|
border-right: 0.2em solid var(--c-lines);
|
|
}
|
|
|
|
.logo a {
|
|
font-size: 1.8em;
|
|
font-weight: 700;
|
|
color: white;
|
|
text-decoration: none;
|
|
transition: text-shadow 0.25s ease-in-out;
|
|
}
|
|
|
|
.logo a:hover {
|
|
text-shadow: 0.25em 0.25em 0.2em var(--c-text);
|
|
}
|
|
|
|
/* Burger */
|
|
.burger {
|
|
display: none;
|
|
background: none;
|
|
border: none;
|
|
color: white;
|
|
font-size: 1.6em;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Links container */
|
|
.links {
|
|
display: flex;
|
|
gap: 1.6rem;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
width: -webkit-fill-available;
|
|
}
|
|
|
|
/* Simple link */
|
|
.linkSimple {
|
|
color: var(--c-text);
|
|
text-decoration: none;
|
|
font-size: 1.05em;
|
|
transition: transform 0.15s;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
|
|
/* TEXT SIZE UNIFICATION */
|
|
.linkSimple,
|
|
.user,
|
|
.linkButton {
|
|
font-size: 1.25em;
|
|
color: white;
|
|
}
|
|
|
|
.dropdown a {
|
|
font-size: 1.1em;
|
|
color: var(--c-text);
|
|
}
|
|
|
|
|
|
|
|
.linkSimple:hover {
|
|
transform: scale(1.08);
|
|
}
|
|
|
|
/* Link item with dropdown */
|
|
.linkItem {
|
|
position: relative;
|
|
}
|
|
|
|
/* Unified dropdown container */
|
|
.dropdownItem {
|
|
position: relative;
|
|
}
|
|
|
|
.linkButton {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
margin: var(--nav-margin-y) auto;
|
|
width: max-content;
|
|
}
|
|
|
|
.linkButton:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* chevron icons */
|
|
.chev {
|
|
margin-left: 0.25rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.chevSmall {
|
|
margin-left: 0.25rem;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
/* dropdown */
|
|
.dropdown {
|
|
position: absolute;
|
|
top: auto;
|
|
left: 0;
|
|
width: -moz-max-content;
|
|
width: max-content;
|
|
background-color: var(--c-background-light);
|
|
/* border: 1px solid var(--c-text); */
|
|
padding: 0.6rem;
|
|
/* border-radius: 0.45rem; */
|
|
border-bottom-left-radius: 1em;
|
|
border-bottom-right-radius: 1em;
|
|
display: none;
|
|
flex-direction: column;
|
|
gap: 0.35rem;
|
|
box-shadow: 0px 20px 24px 6px rgba(0, 0, 0, 0.35);
|
|
z-index: 49;
|
|
}
|
|
|
|
/* show dropdown on hover or keyboard focus within */
|
|
.linkItem:hover .dropdown,
|
|
.linkItem:focus-within .dropdown,
|
|
.dropdownItem:hover .dropdown,
|
|
.dropdownItem:focus-within .dropdown {
|
|
display: flex;
|
|
}
|
|
|
|
/* nested wrapper for submenu items */
|
|
.nestedWrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* nested toggle (button that opens nested submenu) */
|
|
.nestedToggle {
|
|
background: none;
|
|
border: none;
|
|
color: white !important;
|
|
text-align: left;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.45rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.nestedToggle:hover {
|
|
transform: scale(1.03);
|
|
}
|
|
|
|
/* Unified dropdown toggle */
|
|
.dropdownToggle {
|
|
background: none;
|
|
border: none;
|
|
color: white !important;
|
|
text-align: left;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.45rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.dropdownToggle:hover {
|
|
transform: scale(1.03);
|
|
}
|
|
|
|
/* nested submenu */
|
|
.nested {
|
|
margin-top: 0.25rem;
|
|
margin-left: 1.1rem;
|
|
display: none;
|
|
/* hidden until hover/focus within */
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
/* show nested submenu on hover/focus within */
|
|
.nestedWrapper:hover .nested,
|
|
.nestedWrapper:focus-within .nested {
|
|
display: flex;
|
|
}
|
|
|
|
/* Nested dropdown (dropdown inside dropdown) */
|
|
.dropdown .dropdown {
|
|
position: static;
|
|
border: none;
|
|
box-shadow: none;
|
|
padding-left: 0.2rem;
|
|
min-width: auto;
|
|
margin-left: 1.1rem;
|
|
}
|
|
|
|
/* links inside dropdown / nested */
|
|
.dropdown a,
|
|
.dropdown button {
|
|
color: white;
|
|
text-decoration: none;
|
|
background: none;
|
|
border: none;
|
|
padding: 0.35rem 0.25rem;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
transition: transform 0.12s;
|
|
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.dropdown a:hover,
|
|
.dropdown button:hover {
|
|
transform: scale(1.04);
|
|
}
|
|
|
|
/* small icons next to dropdown links */
|
|
.iconSmall {
|
|
margin-right: 0.45rem;
|
|
font-size: 0.95rem;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* User area */
|
|
.user {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.6rem;
|
|
height: -webkit-fill-available;
|
|
}
|
|
|
|
.loginBtn {
|
|
width: max-content;
|
|
background: none;
|
|
border: none;
|
|
border-radius: 0;
|
|
padding: 1em;
|
|
color: white;
|
|
font-size: 0.98rem;
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.45rem;
|
|
|
|
}
|
|
.loginBtn svg {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.loginBtn:hover {
|
|
background: var(--c-text);
|
|
transform: scale(1.03);
|
|
}
|
|
|
|
/* user dropdown */
|
|
.userWrapper {
|
|
height: -webkit-fill-available;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.userWrapper .dropdown{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
margin-top: 3.5em;
|
|
width: max-content;
|
|
border-top-right-radius: 1em;
|
|
}
|
|
.userWrapper .dropdown a, button{
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.userButton {
|
|
display: flex;
|
|
align-items: center;
|
|
width: max-content;
|
|
gap: 0.6rem;
|
|
background: none;
|
|
border: none;
|
|
color: white;
|
|
cursor: pointer;
|
|
font-size: 1rem;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.userIcon {
|
|
font-size: inherit;
|
|
}
|
|
|
|
.avatar {
|
|
width: 1.8rem;
|
|
height: 1.8rem;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.username {
|
|
font-weight: 600;
|
|
text-overflow: ellipsis;
|
|
max-width: max-content;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* logout button */
|
|
.logoutBtn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
background: none;
|
|
border: none;
|
|
color: white;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Responsive: mobile */
|
|
@media (max-width: 1010px) {
|
|
.navbar {
|
|
width: 100%;
|
|
}
|
|
|
|
.navbar .logo{
|
|
border: none;
|
|
}
|
|
|
|
.burger {
|
|
display: inline-block;
|
|
}
|
|
|
|
.burger svg {
|
|
width: auto;
|
|
}
|
|
|
|
.links {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 100%;
|
|
|
|
flex-direction: column;
|
|
gap: 0.6rem;
|
|
padding: 1rem 1.2rem;
|
|
display: none;
|
|
z-index: 40;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.03);
|
|
|
|
border-bottom-left-radius: 2em;
|
|
border-bottom-right-radius: 2em;
|
|
|
|
transition: all 0.5s ease-in-out;
|
|
max-height: 0;
|
|
|
|
display: flex;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
opacity: 0;
|
|
|
|
}
|
|
.links.show {
|
|
max-height: 100vh;
|
|
padding: 1rem 1.2rem;
|
|
background-color: var(--c-boxes);
|
|
opacity: 1;
|
|
}
|
|
|
|
|
|
.linkButton{
|
|
background-color: var(--c-background-light);
|
|
width: 100%;
|
|
align-items: center;
|
|
margin:auto;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 1em;
|
|
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
.linkButton:hover{
|
|
transform: none !important;
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
|
|
.linkSimple{
|
|
margin: var(--nav-margin-y) auto;
|
|
}
|
|
|
|
.dropdown {
|
|
position: relative;
|
|
top: 0;
|
|
left: 0;
|
|
border: none;
|
|
box-shadow: none;
|
|
padding-left: 0.2rem;
|
|
|
|
width: 100%;
|
|
align-items: center;
|
|
}
|
|
.dropdownItem{
|
|
width: 100%;
|
|
}
|
|
|
|
.nested {
|
|
margin-left: 0.6rem;
|
|
}
|
|
|
|
.dropdown .dropdown {
|
|
margin-left: 0.6rem;
|
|
}
|
|
|
|
.userButton .username{
|
|
display: none;
|
|
}
|
|
} |