148 lines
2.2 KiB
SCSS
148 lines
2.2 KiB
SCSS
main.layout {
|
|
height: 100%;
|
|
display: flex;
|
|
|
|
> .right-content {
|
|
overflow: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
.menu {
|
|
&.as-popup {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
z-index: 10;
|
|
}
|
|
|
|
color: var(--box-fg-color);
|
|
width: 15rem;
|
|
transition: left 0.1s, margin-left 0.1s;
|
|
display: flex;
|
|
|
|
.inner {
|
|
background-color: var(--box-bg-color);
|
|
flex: 1;
|
|
border-right: 1px solid var(--box-border-color);
|
|
}
|
|
|
|
.shadow {
|
|
width: 8px;
|
|
background: var(--menu-shadow);
|
|
flex-shrink: 0;
|
|
flex-grow: 0;
|
|
}
|
|
|
|
.menu-close {
|
|
font-size: 150%;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.menu-header {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 1rem;
|
|
padding: 1rem 1rem;
|
|
border-bottom: 1px solid var(--box-border-color);
|
|
|
|
h2 {
|
|
font-size: 125%;
|
|
padding: 0;
|
|
margin: 0;
|
|
margin-left: 1rem;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
|
|
nav {
|
|
padding: 0em 0rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-size: 115%;
|
|
|
|
a {
|
|
text-decoration: none;
|
|
padding: 0.4rem 1rem;
|
|
display: flex;
|
|
color: var(--box-fg-color);
|
|
|
|
&.current {
|
|
background-color: var(--box-border-color);
|
|
}
|
|
|
|
&:hover {
|
|
background-color: var(--box-border-color);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.menu-overlay {
|
|
background-color: var(--modal-overlay-bg-color);
|
|
z-index: 1;
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
header.header {
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
border-bottom: 1px solid var(--box-border-color);
|
|
|
|
> .inner {
|
|
display: flex;
|
|
padding: 0.5rem 0.5rem 0.5rem 0;
|
|
height: 2.2rem;
|
|
background-color: var(--header-bg-color);
|
|
align-items: center;
|
|
|
|
> .menu-button {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 125%;
|
|
cursor: pointer;
|
|
padding: 0 0.75rem;
|
|
}
|
|
}
|
|
|
|
> .shadow {
|
|
position: absolute;
|
|
background: var(--header-shadow);
|
|
width: 100%;
|
|
height: 8px;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
|
|
section.content {
|
|
flex: 1;
|
|
overflow: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
@media only screen and (max-width: 800px) {
|
|
header.header {
|
|
> .inner > .menu-button {
|
|
font-size: 175%;
|
|
}
|
|
|
|
.dashboard-head {
|
|
> button,
|
|
.filter-button {
|
|
font-size: 150%;
|
|
}
|
|
}
|
|
}
|
|
}
|