125 lines
2.4 KiB
CSS
125 lines
2.4 KiB
CSS
:root {
|
|
--navbar-color-dropshadow: var(--drop-shadow);
|
|
--navbar-color: var(--color-primary);
|
|
--navbar-color-selected: var(--color-accent);
|
|
--navbar-padding: 2vh;
|
|
}
|
|
|
|
|
|
/* Navigation bar */
|
|
.navbar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.navbar,
|
|
.navbar * {
|
|
user-select: none;
|
|
}
|
|
|
|
.navbar > div:nth-child(1) {
|
|
display: none;
|
|
padding-top: var(--navbar-padding);
|
|
padding-bottom: var(--navbar-padding);
|
|
}
|
|
|
|
.navbar > div:nth-child(2) {
|
|
display: none;
|
|
}
|
|
|
|
.navbar > div:nth-child(3) {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.navbar > div:nth-child(3) > div {
|
|
flex: 1 1 auto;
|
|
overflow: hidden;
|
|
transition: box-shadow 250ms, z-index 250ms;
|
|
background-color: var(--navbar-color);
|
|
padding-top: var(--navbar-padding);
|
|
padding-bottom: var(--navbar-padding);
|
|
}
|
|
|
|
.navbar > div:nth-child(3) > div > div {
|
|
gap: 5px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.navbar > div:nth-child(3) > div:hover {
|
|
box-shadow: 0 0 11px var(--navbar-color-dropshadow);
|
|
z-index: 4;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.navbar > div:nth-child(3) > div.current {
|
|
background-color: var(--navbar-color-selected);
|
|
}
|
|
|
|
@media only screen and (orientation: landscape) {
|
|
.navbar > div:nth-child(3) > div:nth-child(1) {
|
|
border-bottom-left-radius: 10px;
|
|
}
|
|
|
|
.navbar > div:nth-child(3) > div:nth-last-child(1) {
|
|
border-bottom-right-radius: 10px;
|
|
}
|
|
|
|
.navbar > div:nth-child(3) > div.small {
|
|
flex-grow: 0;
|
|
width: 5%;
|
|
}
|
|
|
|
.navbar > div:nth-child(3) > div.small > div {
|
|
gap: 0;
|
|
}
|
|
}
|
|
|
|
@media only screen and (orientation: portrait) {
|
|
.navbar {
|
|
display: grid;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.navbar > div:nth-child(1) {
|
|
display: flex;
|
|
width: 100%;
|
|
height: auto;
|
|
justify-content: center;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
transition: box-shadow 250ms, z-index 250ms;
|
|
background-color: var(--navbar-color);
|
|
box-shadow: 0 0 11px var(--navbar-color-dropshadow);
|
|
z-index: 5;
|
|
cursor: pointer;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.navbar > div:nth-child(3) {
|
|
position: relative;
|
|
top: -100%;
|
|
flex-direction: column;
|
|
transition: top 0.5s;
|
|
overflow: hidden;
|
|
border-bottom-left-radius: 10px;
|
|
border-bottom-right-radius: 10px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.navbar > div:nth-child(2).open + div:nth-child(3) {
|
|
top: 0;
|
|
pointer-events: auto;
|
|
}
|
|
}
|