67 lines
1.2 KiB
CSS
67 lines
1.2 KiB
CSS
.menu {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
|
|
gap: var(--size-s);
|
|
|
|
font-size: var(--font-size-second);
|
|
list-style: none;
|
|
|
|
/* NOT VERTICAL */
|
|
flex-direction: row;
|
|
}
|
|
|
|
.vertical {
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* MENU ITEM */
|
|
|
|
.menuItem {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
user-select: none;
|
|
background-color: var(--color-back-main);
|
|
border-radius: var(--radius-small);
|
|
transition: box-shadow 200ms ease-in, background-color 200ms ease-in;
|
|
/* padding: var(--size-s) var(--size-s); */
|
|
padding: 0 var(--size-s);
|
|
|
|
height: var(--size-l);
|
|
}
|
|
|
|
.menuItem.active {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.menuItem.active:hover {
|
|
box-shadow: var(--shadow);
|
|
color: var(--color-hover);
|
|
background-color: var(--color-hover-back);
|
|
}
|
|
|
|
.menuItem.active:hover a {
|
|
color: var(--color-hover);
|
|
}
|
|
|
|
.menuItem.current {
|
|
color: var(--color-text-opposite);
|
|
background-color: var(--color-back-opposite);
|
|
}
|
|
|
|
.menuItem a {
|
|
text-decoration: none;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
/* DARK THEME */
|
|
@media (prefers-color-scheme: dark) {
|
|
.menuItem.active:hover {
|
|
box-shadow: none;
|
|
background-color: var(--color-back);
|
|
}
|
|
}
|