css: merge light & dark into one file

[nano-editor.git] / style.css

@charset "utf-8";

/* Variables for light & dark modes. */

:root {
	--nano-content-bg-color: #fff;
	--nano-content-fg-color: #440077;
	--nano-inverted-bg-color: #407;
	--nano-inverted-fg-color: #fff;
	--nano-a-color: #407;
	--nano-a-visited-color: #51188E;
	--nano-a-active-color: #F00;
	--nano-a-inverted-color: #fff;
}

@media (prefers-color-scheme: dark) {
:root {
	--nano-content-bg-color: #111;
	--nano-content-fg-color: #cc88ff;
	--nano-inverted-bg-color: #9200ff;
	--nano-inverted-fg-color: #fff;
	--nano-a-color: #c8f;
	--nano-a-visited-color: #b7f;
	--nano-a-active-color: #F00;
	--nano-a-inverted-color: #fff;
}
}

body {
	color: var(--nano-content-fg-color);
	background-color: var(--nano-content-bg-color);
}
.inverted {
	color: var(--nano-inverted-fg-color);
	background-color: var(--nano-inverted-bg-color);
}

a {
	color: var(--nano-a-color);
}
a:visited {
	color: var(--nano-a-visited-color);
}
a:active {
	color: var(--nano-a-active-color);
}

.inverted a {
	color: var(--nano-a-inverted-color);
}

* {
	box-sizing: border-box;
}

.onecolumn {
	float: left;
	width: 45%;
	padding: 5%;
}