path: root/src/css.css

:root {	/* most of the styles are used on http://sijanec.eu, so there are some excess colours */
	--bgc1: black;
	--bgc2: #111;
	--bgc3: #222;
	--fgc1: white;
	--fgc2: lightgray;
	--fgc3: lightblue;
	--fglinkc: #ae5;
	--fglinkvisitedc: #0cd;
	--fglinkhoverc: cyan;
	--fglinkactivec: #eff;
	--fgchilite: red;
	--fgdecorc: yellow;
	--fgcodec: #aed;
	--bgcodec: var(--bgc2);
	--bgclight: darkgray;
	--scheme-name: dark;
}

@media (prefers-color-scheme: light) {
	:root {
		--bgc1: white;
		--bgc2: lightgray;
		--bgc3: darkgray;
		--fgc1: black;
		--fgc2: gray;
		--fgc3: darkred;
		--fglinkc: blue;
		--fglinkvisitedc: purple;
		--fglinkhoverc: darkblue;
		--fglinkactivec: cyan;
		--fgchilite: red;
		--fgdecorc: darkmagenta;
		--fgcodec: var(--bgc1);
		--bgcodec: var(--fgc1);
		--bgclight: darkgray;
		--scheme-name: light;
	}
}

input, textarea, button {
	background: var(--bgc2);
	color: var(--fgc1);
}

a {
	text-decoration: underline;
	cursor: pointer;
	color: var(--fglinkc);
}

a:visited {
	color: var(--fglinkvisitedc);
}

a:hover {
	color: var(--fglinkhoverc);
}

a:active {
	color: var(--fglinkactivec);
}


@media screen and (min-width: 1000px) {
	body {
		margin-left: 10%;
		margin-right: 10%;
	}
}

body {
	background-color: var(--bgc1);
	color: var(--fgc1);
	scrollbar-color: var(--scheme-name);
}

code {
	color: var(--fgcodec);
	background-color: var(--bgcodec);
}
input[type=text], button {
	height: 1cm;
	font-size: large;
}
.result:hover {
	background: var(--bgc2);
}
.container {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: stretch;
}
input[name=q] {
	flex-grow: 4;
	width: 100%;
}
button {
	flex-basis: 12.5%;
}
.SC_LOG_ERROR {
	color: red;
}
.SC_LOG_WARNING {
	color: orange;
}
.SC_LOG_INFO {
	color: lightgreen;
}
.SC_LOG_DEBUG {
	color: magenta;
}
.breadcrumb {
	color: var(--fgc2);
	font-size: small; /* small is relative to parent (h4) size */
}
.result h4 {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: 0.314159265358em;
}
.result p {
	margin-top: 0.314159265358em;
}
.result img {
	height: 10em;
}
button::after {
	content: attr(value);
}
button span { /* rationale: links browser does not support CSS and emojis, therefore it'll show */
	display: none; /* basic default text instead of emojis. */
} /* if browser does not support ::after, content or attr, but supports other CSS, button is blank */