130 lines
2.2 KiB
CSS
130 lines
2.2 KiB
CSS
|
/*
|
||
|
|
Based on base16 architecture for building themes
|
||
|
|
https://github.com/chriskempson/base16
|
||
|
|
*/
|
||
|
|
:root {
|
||
|
|
--base00: #282c34; /* Default Background */
|
||
|
|
--base01: #353b45; /* Lighter Background */
|
||
|
|
--base02: #3e4451; /* Selection Background */
|
||
|
|
--base03: #545862; /* Comments, Invisibles, Line Highlighting */
|
||
|
|
--base04: #565c64; /* Dark Foreground (Used for status bars) */
|
||
|
|
--base05: #abb2bf; /* Default Foreground, Caret, Delimiters, Operators */
|
||
|
|
--base06: #b6bdca; /* Light Foreground (Not often used) */
|
||
|
|
--base07: #c8ccd4; /* Light Background (Not often used) */
|
||
|
|
--base08: #e06c75; /* Red */
|
||
|
|
--base09: #d19a66; /* Orange */
|
||
|
|
--base0A: #e5c07b; /* Yellow */
|
||
|
|
--base0B: #98c379; /* Green */
|
||
|
|
--base0C: #56b6c2; /* Aqua */
|
||
|
|
--base0D: #61afef; /* Blue */
|
||
|
|
--base0E: #c678dd; /* Purple */
|
||
|
|
--base0F: #be5046; /* Dark red */
|
||
|
|
}
|
||
|
|
|
||
|
|
* {
|
||
|
|
font-family: Verdana;
|
||
|
|
font-size: 16px;
|
||
|
|
color: var(--base05);
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
html {
|
||
|
|
height: 100%
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
background-color: var(--base00);
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
flex-wrap: nowrap;
|
||
|
|
flex-direction: column;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
a {
|
||
|
|
text-decoration: none;
|
||
|
|
color: var(--base0D);
|
||
|
|
}
|
||
|
|
|
||
|
|
svg, img, object {
|
||
|
|
vertical-align: middle;
|
||
|
|
width: 1.5em;
|
||
|
|
height: 1.5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
header {
|
||
|
|
flex-grow: 0;
|
||
|
|
background-color: var(--base01);
|
||
|
|
border-bottom: 1px solid var(--base02);
|
||
|
|
padding: .5em;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
main {
|
||
|
|
flex-grow: 1;
|
||
|
|
padding-left: 1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
footer {
|
||
|
|
background-color: var(--base01);
|
||
|
|
border-top: 1px solid var(--base02);
|
||
|
|
padding: .5em;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
margin-top: 1em;
|
||
|
|
font-size: 150%;
|
||
|
|
margin-bottom: 0.5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
ul {
|
||
|
|
list-style-type: none;
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
li {
|
||
|
|
padding: 1em;
|
||
|
|
min-width: 12em;
|
||
|
|
}
|
||
|
|
|
||
|
|
li:hover {
|
||
|
|
background-color: var(--base01);
|
||
|
|
}
|
||
|
|
|
||
|
|
li > a {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
li > a > object {
|
||
|
|
margin-right: 0.5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
li > a > span {
|
||
|
|
color: var(--base03);
|
||
|
|
font-size: 75%;
|
||
|
|
display: block;
|
||
|
|
text-align: left;
|
||
|
|
margin-left: 3em;
|
||
|
|
}
|
||
|
|
|
||
|
|
form {
|
||
|
|
width: calc(100% - 1em);
|
||
|
|
}
|
||
|
|
|
||
|
|
form > input {
|
||
|
|
width: calc(100% - 2em);
|
||
|
|
padding: .5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* SVG styles */
|
||
|
|
path.red {fill: var(--base08);}
|
||
|
|
path.orange {fill: var(--base09);}
|
||
|
|
path.yellow {fill: var(--base0A);}
|
||
|
|
path.green {fill: var(--base0B);}
|
||
|
|
path.aqua {fill: var(--base0C);}
|
||
|
|
path.blue {fill: var(--base0D);}
|
||
|
|
path.purple {fill: var(--base0E);}
|