usrspace-browser-addon/src/popup.css

@font-face {
	font-family: 'Nunito Sans';
	font-style: normal;
	font-weight: normal;
	src: url('font/Nunito-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'Nunito Sans';
	font-style: normal;
	font-weight: bold;
	src: url('font/Nunito-Bold.ttf') format('truetype');
}
@font-face {
	font-family: 'Nunito Sans';
	font-style: italic;
	font-weight: normal;
	src: url('font/Nunito-Italic.ttf') format('truetype');
}

:root {
	--light-blue: #2aa1bf;
	--dark-blue: #095c81;
	--light-color: #0c0c0c;
	--dark-color: #ffffff;
	--light-background: #f9f9f9;
	--dark-background: #4a4a4a;
	--light-code-background: #ebebeb;
	--dark-code-background: #383838;
}

body {
	width: 360px;
	padding: 6px 12px;
	color: var(--light-color);
	background-color: var(--light-background);
	font-family: 'Nunito Sans';
}
@media (prefers-color-scheme: dark) {
	body {
		color: var(--dark-color);
		background-color: var(--dark-background);
	}
}

section.no-padding {
	margin: 0 -12px -6px;
}
h2 {
	margin: 6px 0 4px;
}
summary {
	margin: 6px 12px 6px;
	cursor: pointer;
}
summary > h2 {
	margin: 0;
	display: inline-block;
}
time {
	font-style: italic;
}
svg {
	vertical-align: text-bottom;
}

.panel-section-list {
	margin: 0 -12px;
}
.panel-list-item > .icon {
	text-align: center;
	width: 23px;
	margin-right: 4px;
}
.link {
	cursor: pointer;
}

#state > svg,
#calendar > .calendar-entry > svg,
#calendar > .calendar-entry strong {
	margin-right: 8px;
}
#calendar > .calendar-entry {
	display: flex;
}
#calendar address {
	display: inline;
}

#space-api {
	margin: 0;
	padding: 0 8px;
	height: 122px;
	overflow-x: hidden;
	overflow-y: scroll;
	background-color: var(--light-code-background);
}
@media (prefers-color-scheme: dark) {
	#space-api {
		background-color: var(--dark-code-background);
	}
}
#space-api code {
	font-family: monospace;
	font-size: 10px;
}