usrspace-browser-addon/src/popup.css

@import url('extension.css') layer(extension);

@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: #15141a;
	--dark-color: #fbfbfe;
	--light-background: #ffffff;
	--dark-background: #42414d;
	--light-code-background: #f0f0f4;
	--dark-code-background: #2b2a33;

	--color: var(--light-color);
	--background: var(--light-background);
	--code-background: var(--light-code-background);
}

@media (prefers-color-scheme: dark) {
	:root {
		--color: var(--dark-color);
		--background: var(--dark-background);
		--code-background: var(--dark-code-background);
	}
}

body {
	inline-size: 360px;
	padding: 6px 12px;
	color: var(--color);
	background-color: var(--background);
	font-family: 'Nunito Sans', sans-serif;
}

section.no-padding {
	margin: 0 -12px -6px;
}

h2 {
	margin: 6px 0 4px;
}

summary {
	margin: 6px 12px;
	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;
	inline-size: 23px;
	margin-inline-end: 4px;
}

.link {
	cursor: pointer;
}

#state > svg,
#calendar > .calendar-entry > svg,
#calendar > .calendar-entry strong {
	margin-inline-end: 8px;
}

#calendar > .calendar-entry,
#calendar > .calendar-entry > div > div {
	display: flex;
}

#calendar address {
	display: inline;
}

#space-api {
	margin: 0;
	padding: 4px 8px 8px;
	block-size: 159px;
	overflow-block: scroll;
	scrollbar-gutter: stable;
	background-color: var(--code-background);
}

#space-api code {
	font-family: monospace;
	font-size: 10px;
	white-space: break-spaces;
}