A theme for the Matrix client Cinny

cinny-theme.css

:root {
	--navigation-sidebar-width: calc(64px + var(--border-width));
	--navigation-drawer-width: calc(250px + var(--border-width));
	--navigation-width: calc(var(--navigation-sidebar-width) + var(--navigation-drawer-width));
}

.system-theme, .dark-theme, ._15q3ngn1 {
	--bg-surface: #1F1933;
	--bg-surface-transparent: hsla(208, 8%, 20%, 0);
	--bg-surface-low: #1A152B;
	--bg-surface-low-transparent: hsla(208, 8%, 16%, 0);
	--bg-surface-extra-low: rgba(9, 5, 20, 0.8);
	--bg-surface-extra-low-transparent: hsla(208, 8%, 14%, 0);
	--bg-surface-hover: rgba(255, 255, 255, 3%);
	--bg-surface-active: rgba(255, 255, 255, 5%);
	--bg-surface-border: rgba(0, 0, 0, 20%);
	--bg-primary: rgb(42, 98, 166);
	--bg-primary-hover: rgba(42, 98, 166, 80%);
	--bg-primary-active: rgba(42, 98, 166, 70%);
	--bg-primary-border: rgba(42, 98, 166, 38%);
	--bg-tooltip: #000;
	--bg-badge: hsl(0, 0%, 75%);
	--bg-ping: hsla(137deg, 100%, 38%, 40%);
	--bg-ping-hover: hsla(137deg, 100%, 38%, 50%);
	--bg-divider: rgba(64,54,97, 0.4);
	--tc-surface-high: rgba(255, 255, 255, 98%);
	--tc-surface-normal: rgba(255, 255, 255, 94%);
	--tc-surface-normal-low: rgba(255, 255, 255, 60%);
	--tc-surface-low: rgba(255, 255, 255, 58%);
	--tc-primary-high: #ffffff;
	--tc-primary-normal: rgba(255, 255, 255, .68);
	--tc-primary-low: rgba(255, 255, 255, .4);
	--tc-code: #e565b1;
	--tc-link: hsl(213deg 94% 73%);
	--tc-badge: black;
	--ic-surface-high: rgb(255, 255, 255);
	--ic-surface-normal: rgba(255, 255, 255, 84%);
	--ic-surface-low: rgba(255, 255, 255, 64%);
	--ic-primary-normal: #ffffff;
	--bg-overlay: rgba(0, 0, 0, 60%);
	--bg-overlay-low: rgba(0, 0, 0, 80%);
	--bs-popup: 0 0 16px rgba(0, 0, 0, 25%);
	--bs-surface-border: inset 0 0 0 1px var(--bg-surface-border);
	--bs-surface-outline: 0 0 0 2px var(--bg-surface-border);
	--bs-primary-border: inset 0 0 0 1px var(--bg-primary-border);
	--bs-primary-outline: 0 0 0 2px var(--bg-primary-border);
	--fs-h1: 35.6px;
	--fs-h2: 23.6px;
	--fs-s1: 17.6px;
	--fs-b1: 14.6px;
	--ls-b1: .14px;
	--fs-b2: 13.2px;
	--fs-b3: 11.2px;
	--fw-normal: 350;
	--font-primary: "DM Sans", "Roboto", sans-serif;
	--font-secondary: "DM Sans", "InterVariable", "Roboto", sans-serif;
/* 	--oq6d07a: var(--bg-surface-active); */
	--oq6d071: var(--bg-surface);
	--oq6d075: var(--bg-surface);
	--oq6d078: var(--bg-surface-border);
	--oq6d07a: transparent;
	--oq6d07p: #fff;
	--oq6d07b: var(--bg-surface-hover);
	--oq6d07c: var(--bg-surface-active);
	--oq6d077: var(--bg-surface-active);
	--oq6d07d: transparent;
}

body {
	background-color: rgba(9, 5, 20, 1);
}

.navigation {
	gap: 4px;
	background-color: transparent;
}

.navigation .sidebar {
	width: 72px;
}

.room {
	gap: 4px;
}

.navigation .drawer, .navigation .sidebar, .room .room-view, .room .people-drawer {
	border-right: 0;
	border-left: 0;
	border-radius: 8px;
	background-color: var(--bg-surface);
}

.room-view__sticky {
	border-radius: 0 0 8px 8px;
}

.client-container {
	padding: 4px;
	gap: 4px;
}

.room-category .room-selector {
	margin-right: auto;
}

.people-drawer__content .segmented-controls {
	margin-right: var(--sp-extra-tight);
}

.avatar-container.avatar-container__normal.noselect {
	background-color: rgba(64,54,97, 0.4);
}

.avatar-container .avatar__border--active {
	box-shadow: none;
}

.sidebar-divider {
	background-color: var(--bg-divider);
}

.divider--positive {
	--local-divider-color: var(--bg-divider);
}

.divider--positive .divider__text {
	background-color: var(--bg-divider);
	color: #fff;
}

.navigation .sidebar .scrollable-content::after {
	display: none;
}

.coabsl0 {
	background-color: var(--bg-surface-active);
	border: 1px solid var(--bg-surface-border);
}

._1glssn50 {
	background: none;
}

._1fptcza3 {
	background-color: var(--bg-surface);
}