193 lines
2.9 KiB
CSS
193 lines
2.9 KiB
CSS
:root {
|
|
--surface1: lch(90 0 0);
|
|
--surface2: lch(100 0 0);
|
|
--surface3: lch(98 0 0);
|
|
--surface4: lch(85 0 0);
|
|
|
|
--text1: lch(20 0 0);
|
|
--text2: lch(40 0 0);
|
|
|
|
--thumb-highlight-color: lch(0 0 0 / 20%);
|
|
|
|
--space-xxs: .25rem;
|
|
--space-sm: 1rem;
|
|
--space-md: 0.5rem;
|
|
--dashboard-value-offset: 5rem;
|
|
--space-xl: 3rem;
|
|
--space-xxl: 4rem;
|
|
|
|
--dashboard-section-width: 45ch;
|
|
|
|
--isLTR: 1;
|
|
--isRTL: -1;
|
|
|
|
&:dir(rtl) {
|
|
--isLTR: -1;
|
|
--isRTL: 1;
|
|
}
|
|
|
|
/* @media (prefers-color-scheme: dark) {
|
|
& {
|
|
--surface1: lch(10 0 0);
|
|
--surface2: lch(15 0 0);
|
|
--surface3: lch(20 0 0);
|
|
--surface4: lch(25 0 0);
|
|
|
|
--text1: lch(95 0 0);
|
|
--text2: lch(75 0 0);
|
|
|
|
--thumb-highlight-color: lch(100 0 0 / 20%);
|
|
}
|
|
} */
|
|
}
|
|
|
|
|
|
body {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
main {
|
|
padding: 0rem;
|
|
/* SIDEBAR WIDTH */
|
|
margin-left: 10rem;
|
|
height: 100dvh;
|
|
transition: margin-left 500ms ease;
|
|
|
|
}
|
|
|
|
.main-sidebar-rail {
|
|
margin-left: 4rem;
|
|
transition: margin-left 500ms ease;
|
|
}
|
|
|
|
.main-content {
|
|
display: none;
|
|
height: 100dvh;
|
|
}
|
|
|
|
.main-content-active {
|
|
display: block;
|
|
}
|
|
|
|
.sidenav {
|
|
position: fixed;
|
|
/* SIDEBAR WIDTH */
|
|
width: 10rem;
|
|
left: 0;
|
|
background-color: white;
|
|
height: 100dvh;
|
|
transition: width 500ms ease;
|
|
overflow: overlay;
|
|
}
|
|
|
|
.sidenav-rail {
|
|
width: 4rem;
|
|
transition: width 500ms ease;
|
|
}
|
|
|
|
.sidenav-nav {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100dvh;
|
|
}
|
|
|
|
.sidenav-item {
|
|
width: 100%;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sidenav-item-active {
|
|
width: 100%;
|
|
background-color: #eee;
|
|
}
|
|
|
|
.sidenav-link {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 4rem;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.link-text {
|
|
margin-left: 0.5rem;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.icon {
|
|
margin: 0 0.5rem;
|
|
}
|
|
|
|
.sidenav-item-filler {
|
|
height: 100%;
|
|
}
|
|
|
|
.terminal {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Dashboard Settings */
|
|
.dashboard-section {
|
|
display: grid;
|
|
gap: var(--space-md);
|
|
}
|
|
|
|
.dashboard-section-header {
|
|
display: grid;
|
|
gap: var(--space-xxs);
|
|
}
|
|
|
|
.dashboard-view {
|
|
max-width: 89dvw;
|
|
padding: 1rem;
|
|
display: grid;
|
|
gap: var(--space-xl) var(--space-xxl);
|
|
--repeat: auto-fit;
|
|
grid-template-columns:
|
|
repeat(var(--repeat), minmax(min(10ch, 100%), var(--dashboard-section-width)));
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
|
|
@media (orientation: landscape) and (width >=640px) {
|
|
& {
|
|
--repeat: 2;
|
|
}
|
|
}
|
|
}
|
|
|
|
.dashboard-item {
|
|
background: var(--surface3);
|
|
transition: background .2s ease;
|
|
|
|
display: grid;
|
|
grid-template-columns: var(--dashboard-value-offset) 1fr;
|
|
gap: var(--space-md);
|
|
|
|
padding-block: var(--space-sm);
|
|
padding-inline: var(--space-md);
|
|
}
|
|
|
|
.dashboard-section {
|
|
border: 1px solid var(--surface4);
|
|
background: var(--surface4);
|
|
padding: 0;
|
|
margin: 0;
|
|
display: grid;
|
|
gap: 1px;
|
|
border-radius: var(--space-sm);
|
|
overflow: hidden;
|
|
transition: box-shadow 0.3s ease;
|
|
}
|
|
|
|
.dashboard-section-title {
|
|
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
|
padding: 0.5rem;
|
|
margin: 0;
|
|
}
|