farpatch-ui/static/css/desktop.css
Sean Cross 0a3b6fe96e convert webpack to typescript
This allows us to add a mock library for simulating the real device.

Signed-off-by: Sean Cross <sean@xobs.io>
2023-12-03 16:58:54 +08:00

194 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: 100vh;
transition: margin-left 500ms ease;
}
.main-sidebar-rail {
margin-left: 4rem;
transition: margin-left 500ms ease;
}
.main-content {
display: none;
height: 100vh;
}
.main-content-active {
display: block;
}
.sidenav {
position: fixed;
/* SIDEBAR WIDTH */
width: 10rem;
left: 0;
background-color: white;
height: 100vh;
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: 100vh;
}
.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: 89vw;
padding-left: 1rem;
padding-right: 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;
}