blob: dc78c9f0ecc74ef580cb1082d95cb571c357430a (
plain) (
tree)
|
|
: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 */
|
