farpatch-ui/static/css/desktop.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-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;
}