fossil_style.css

fossil_style.css

:root {
	--background-0: hsl(0, 0%, 12%);
	--background-1: hsl(0, 0%, 18%);
	--background-2: hsl(0, 0%, 23%);

	--foreground-2: hsl(0, 0%, 50%);
	--foreground-1: hsl(0, 0%, 75%);
	--foreground-0: hsl(0, 0%, 95%);

	--background-code: hsl(0, 0%, 10%);
	--foreground-code: hsl(46, 65%, 93%);

	--accent-0: #6db7e8;
	--accent-1: #7ac9be;

	--contrast-0: #E89E6D;
	--contrast-1: #FFDAC2;
}

body {
	font-family: 'Roboto Slab', serif;
	margin-left: auto;
	margin-right: auto;
	width: clamp(600px, 100%, 1200px);
	background-color: var(--background-0);
	color: var(--foreground-0);
}

.content {
	margin: 0.8rem 1.5rem;
}

header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	background-color: var(--background-1);
	padding: 0.4rem 2rem;
}

header .logo {
	font-size: 1.3rem;
	color: var(--accent-1);
}

header .status {
	font-size: 0.85rem;
}

header .title {
	flex: 2;
	font-size: 1.3rem;
	text-align: center;
}

div.logo>img,
div.logo>br {
	display: none;
}

nav.mainmenu {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: stretch;
	background-color: var(--background-1);
	padding: 0.2rem 2rem;
	margin-bottom: 0.2rem;
}

nav.mainmenu a {
	flex: 1;
	padding: 0.2rem 0.35rem;
	text-align: center;
	border-style: solid;
	border-color: var(--foreground-2);
	border-width: 0 1px;
	margin-left: -1px;
}

select {
	background-color: var(--background-1);
	font-family: inherit;
	color: inherit;
	font-size: 0.85rem;
	padding: 0.1rem;
}

input {
	background: var(--background-1);
	font-family: monospace;
	color: inherit;
	font-size: 0.85rem;
	border: solid var(--foreground-2) 1px;
	padding: 0.2rem;
	margin: 0.05rem 0.3rem;
}

textarea {
	background-color: var(--background-1);
	color: var(--foreground-0);
}

option {
	background: var(--background-1);
	color: inherit;
}

option:hover, option:focus {
	background: var(--background-2);
	color: var(--contrast-0);
}

.submenu {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0.3rem;
	margin: 0.4rem;
	border-radius: 0.1rem;
	background-color: var(--background-2);
}

.submenu * {
	margin-left: 0.5rem;
	margin-right: 0.5rem;
}

td {
	padding: 0.4rem !important;
}

a {
	color: var(--accent-0);
}

a, a:visited {
	text-decoration: none;
}

a:hover {
	color: var(--contrast-0);
}

pre,
code {
	font-size: 0.95rem;
	font-family: 'Iosevka', monospace;
	tab-size: 4;
}

footer {
	color: var(--foreground-2);
	font-weight: lighter;
	font-size: 0.8rem;
	margin: 1rem;
}

blockquote.file-content {
	background-color: var(--background-code);
	color: var(--foreground-code);

	border-style: solid;
	border-width: 2px;
	border-radius: 6px;
	border-color: var(--foreground-2);

	padding-top: 0;
	padding-bottom: 0;
	padding-left: 1rem;
	padding-right: 1rem;
	overflow-x: scroll;
}

.timelineModernCell,
.timelineVerboseCell,
.timelineClassicCell,
.timelineCompactCell,
.timelineColumnarCell,
.timelineDetailCell {
	background: var(--background-1) !important;
	border-radius: 4px !important;
	color: var(--foreground-0);
}

.tl-line, tl-arrow {
	color: var(--foreground-0);
}