104 lines
1.7 KiB
CSS
104 lines
1.7 KiB
CSS
:root {
|
|
--bg: #161617;
|
|
--fg: #c9c7cd;
|
|
--bg-dark: #131314;
|
|
|
|
/* Normal */
|
|
--black: #27272a;
|
|
--red: #f5a191;
|
|
--green: #90b99f;
|
|
--yellow: #e6b99d;
|
|
--blue: #aca1cf;
|
|
--magenta: #e29eca;
|
|
--cyan: #ea83a5;
|
|
--white: #c1c0d4;
|
|
/* Bright */
|
|
--bright-black: #353539;
|
|
--bright-red: #ffae9f;
|
|
--bright-green: #9dc6ac;
|
|
--bright-yellow: #f0c5a9;
|
|
--bright-blue: #b9aeda;
|
|
--bright-magenta: #ecaad6;
|
|
--bright-cyan: #f591b2;
|
|
--bright-white: #cac9dd;
|
|
/* Grays */
|
|
--gray01: #1b1b1d;
|
|
--gray02: #2a2a2d;
|
|
--gray03: #3e3e43;
|
|
--gray04: #57575f;
|
|
--gray05: #757581;
|
|
--gray06: #9998a8;
|
|
--gray07: var(--white);
|
|
}
|
|
|
|
html, body {
|
|
background-color: var(--bg-dark);
|
|
max-width: 80ch;
|
|
max-height: 100%;
|
|
margin: auto;
|
|
}
|
|
|
|
@media (orientation: portrait) {
|
|
html, body {
|
|
max-width: 100% !important;
|
|
padding: 5px !important;
|
|
}
|
|
}
|
|
|
|
#font, p, ul, ol, h1, h2, h3, h4, h5, table {
|
|
font-family: sans-serif;
|
|
color: white;
|
|
}
|
|
pre {
|
|
color: white;
|
|
}
|
|
h1 {
|
|
font-size: 3em;
|
|
}
|
|
a {
|
|
font-family: sans-serif;
|
|
text-decoration: none;
|
|
color: var(--cyan);
|
|
}
|
|
a:hover, a:active {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
#search {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
#search-bar, #search-btn {
|
|
height: 2.25em;
|
|
background-color: var(--bg);
|
|
color: white;
|
|
padding: 0 15px;
|
|
border: none;
|
|
}
|
|
#search-bar {
|
|
width: 100%;
|
|
}
|
|
#search-bar:focus {
|
|
outline: none;
|
|
background-color: var(--gray01);
|
|
}
|
|
#search-btn {
|
|
background-color: var(--yellow);
|
|
color: var(--bg);
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
}
|
|
#search-btn:focus {
|
|
outline: none;
|
|
background-color: var(--bright-yellow);
|
|
}
|
|
}
|
|
#search-results {
|
|
height: 15lh;
|
|
margin-top: 0px;
|
|
margin-bottom: 0px;
|
|
padding: 15px;
|
|
overflow: scroll;
|
|
background-color: #111112;
|
|
}
|