rautafarmi/css/style.css

/* colorscheme independent rules */
body {
	font-family: monospace;
	margin: 0;
	padding: 0;
	padding-bottom: 5px;
	width: 70%;
	margin: auto;
	box-shadow: 0px 0px 15px #000000;
}
@media screen and (max-width: 1200px) {
	body {
		width: 80%;
	}
}
@media screen and (max-width: 900px) {
	body {
		width: 100%;
	}
}
img.image {
	max-width: 100%;
}
table, th, td {
	font-size: 10pt;
	margin: auto;
}
input {
	font-family: monospace;
}
.navbar {
	padding: 3px;
	font-size: 15pt;
}
.logotable {
	border: 0px;
}
span.message {
	white-space: pre-line;
	text-overflow: ellipsis;
	overflow-wrap: break-word;
	max-width: 100%;
}
hr {
	border: 0px none #000000;
	border-top: 1px solid #EEEEEE;
	margin: 5px;
}
div.message {
	margin: 5px;
	padding: 5px;
	width: fit-content;
	max-width: 100%;
	display: block;
}
.center {
	margin: auto;
}
.text-center {
	text-align: center !important;
}
a {
	text-decoration: none;
	transition: 0.1s;
}
.navbar {
	border: 0;
	position: -webkit-sticky; /* safari */
	position: sticky;
	top: 0;
	box-shadow: 0px 0px 5px #000000;
	height: fit-content;
	padding: 0;
}
.navbutton {
	border-top: 0px;
	border-bottom: 0px;
	height: 100%;
	padding: 5px;
	padding-top: 0px;
	padding-bottom: 0px;
	transition: 0.1s;
	vertical-align: middle;
}

/* light theme fallback */
html {
	background-color: #c0c0c0;
}
body {
	background-color: #D0D0D0;
}
table, th, td {
	border: 1px solid #000000;
	background-color: #EEEEEE;
}
.navbar {
	border-bottom: 1px solid #000000;
	background-color: #EEEEEE;
}
.navbutton {
	color: #000000;
	border: 1px solid #000000;
}
.navbutton:hover {
	color: #ffffff;
	background-color: #000000;
}
.navbutton:first-of-type:not(#floatright) {
	border-left: 1px solid #000000;
	border-right: 0px;
}
.navbutton:last-of-type#floatright {
	border-left: 0px solid #000000;
	border-right: 1px solid #000000;
}
.logotable {
	background-color: #D0D0D0;
}

span.id {
	color: #2c49c9;
}
span.name{
	color: #1c8757;
}
span.date {
	color: #727272;
}
a.sharebutton {
	color: #727272;
}
a.sharebutton:hover {
	color: #000000;
}
span.you {
	color: #373737;
}
span.message {
	color: #000000;
}
div.message {
	background-color: #EEEEEE;
	border: 1px solid #000000;
}
textarea, input {
	background-color: #ffffff;
	border: 1px solid #000000;
	color: #000000;
}

/* dark theme */
@media (prefers-color-scheme: dark) {
	html {
		background-color: #101010;
	}
	body {
		background-color: #141414;
		color: #ffffff;
	}
	a {
		color: #4fb1dc;
	}
	a:hover {
		color: #89cff0;
	}
	table, th, td {
		border: 1px solid #111111;
		background-color: #1f1f1f;
	}
	.navbar {
		border-bottom: 1px solid #111111;
		background-color: #1f1f1f;
	}
	.navbutton {
		color: #ffffff;
		border: 1px solid #111111;
	}
	.navbutton:hover {
		color: #000000;
		background-color: #ffffff;
	}
	.navbutton:first-of-type:not(#floatright) {
		border-left: 1px solid #111111;
		border-right: 0px;
	}
	.navbutton:last-of-type#floatright {
		border-left: 0px solid #111111;
		border-right: 1px solid #111111;
	}
	.logotable {
		background-color: #00000000;
	}
	
	span.id {
		color: #1f8fb9;
	}
	span.name{
		color: #55bb84;
	}
	span.date {
		color: #727272;
	}
	a.sharebutton {
		color: #727272;
	}
	a.sharebutton:hover {
		color: #ffffff;
	}
	span.you {
		color: #c0c0c0;
	}
	span.message {
		color: #ffffff;
	}
	div.message {
		background-color: #1f1f1f;
		border: 1px solid #111111;
	}
	textarea, input {
		background-color: #1f1f1f;
		border: 1px solid #111111;
		color: #ffffff;
	}
}