460 lines
8.3 KiB
CSS
460 lines
8.3 KiB
CSS
html, body {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #111;
|
|
}
|
|
|
|
body {
|
|
font: normal 12px/1.6667 "-apple-system", BlinkMacSystemFont,
|
|
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
|
|
"Fira Sans", "Droid Sans", "Helvetica Neue", "Arial",
|
|
sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-size: 14px;
|
|
overflow-x: hidden;
|
|
overscroll-behavior: none;
|
|
}
|
|
|
|
#root { background: #f6f6f6; color: #333; }
|
|
#root.dark { background: #2a2a2a; color: #bbb; }
|
|
|
|
.hasCols { display: flex; flex-flow: row nowrap; }
|
|
.hasRows { display: flex; flex-flow: column nowrap; }
|
|
.hasCols > div { flex: 1; }
|
|
.hasRows > div { flex: 1; }
|
|
|
|
/* global styles */
|
|
h1, h2, h3 { margin: 0; }
|
|
a { text-decoration: none; }
|
|
a:visited, a { color: #67e; font-weight: bold; }
|
|
a:hover, a:active { color: #56a; }
|
|
.dark a:visited, .dark a { color: #88c; font-weight: bold; }
|
|
.dark a:hover, .dark a:active { color: #56a; }
|
|
|
|
ul {
|
|
margin-block-start: 0;
|
|
margin-block-end: 0;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.hi { font-size: 20px; margin-right: 10px; }
|
|
.dark .hi { filter: saturate(0); }
|
|
.nav { margin-top: 10px; }
|
|
.instructions { max-width: 1000px; margin-top: 20px; }
|
|
pre { font-size: 12px; margin: 0; }
|
|
.hide { display: none; }
|
|
|
|
code { background: #eee; }
|
|
.dark code { background: #444; }
|
|
|
|
img.icon {
|
|
width: 1.1em;
|
|
height: 1.1em;
|
|
margin-right: 8px;
|
|
opacity: 0.8;
|
|
vertical-align: text-bottom;
|
|
}
|
|
.dark img.icon {
|
|
filter: invert(1);
|
|
}
|
|
|
|
/* forms */
|
|
textarea,
|
|
input[type=text] {
|
|
background-color: #fff;
|
|
color: #333;
|
|
border: 1px solid #ccc;
|
|
padding: 5px;
|
|
border-radius: 4px;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.dark textarea,
|
|
.dark input[type=text],
|
|
.dark input[type=checkbox] {
|
|
background-color: #666;
|
|
color: #ddd;
|
|
border: 1px solid #777;
|
|
}
|
|
|
|
button {
|
|
border: 1px solid #ccc;
|
|
padding: 5px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
.dark button {
|
|
background-color: #393939;
|
|
color: #aaa;
|
|
border: 1px solid #666;
|
|
}
|
|
button:hover {
|
|
background-color: #ececec;
|
|
}
|
|
.dark button:hover {
|
|
background-color: #777;
|
|
}
|
|
button:focus,
|
|
button.active {
|
|
background: #7092ff;
|
|
}
|
|
|
|
textarea:focus,
|
|
input:focus {
|
|
background-color: #f1f1f1;
|
|
}
|
|
|
|
|
|
/* Sections */
|
|
#header {
|
|
display: flex;
|
|
align-items: start;
|
|
padding: 5px 20px;
|
|
background: #111;
|
|
color: #ddd;
|
|
font-weight: bold;
|
|
flex-direction: column;
|
|
}
|
|
#header a:visited, #header a { color: #aaf; }
|
|
#header a:hover, #header a:active { color: #ccf; }
|
|
|
|
#title img.icon {
|
|
filter: invert(1);
|
|
opacity: 1;
|
|
padding-right: 10px;
|
|
}
|
|
#treeswitcher {
|
|
flex: 0 1 auto;
|
|
padding: 1em 0;
|
|
}
|
|
#treeswitcher ul {
|
|
flex: 1;
|
|
display: inline;
|
|
padding: 0;
|
|
}
|
|
#treeswitcher li {
|
|
display: inline;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
#darkmode {
|
|
flex: 0 0 120px;
|
|
padding: 1em 0;
|
|
flex: 0 0 90px;
|
|
padding: 5px 10px;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
font-size: 16px;
|
|
}
|
|
#darkmode > svg {
|
|
margin: 0 5px;
|
|
}
|
|
|
|
@media screen and (min-width: 614px) {
|
|
div#header {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
div#darkmode {
|
|
display: flex;
|
|
padding: 0 28px;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
#darkmode > svg.fa-sun { color: gold; }
|
|
.dark #darkmode > svg.fa-sun { color: unset; }
|
|
#darkmode > svg.fa-moon { color: unset; }
|
|
.dark #darkmode > svg.fa-moon { color: #88c; }
|
|
|
|
#octocat { flex: 0 0 40px; }
|
|
#octocat a:visited, #octocat a { color: #fff; }
|
|
#octocat a:hover, #octocat a:active { color: #ddd; }
|
|
|
|
#content { padding: 0 20px 60px 20px; }
|
|
#footer {
|
|
background: #111;
|
|
padding: 20px;
|
|
color: #aaa;
|
|
font-size: 12px;
|
|
}
|
|
@media (min-width: 640px) {
|
|
div#treeswitcher {
|
|
padding: 0em 1em;
|
|
}
|
|
div#darkmode {
|
|
padding: 0em 1em;
|
|
}
|
|
}
|
|
|
|
|
|
/* Filters */
|
|
.filters {
|
|
display: flex;
|
|
margin: 2em 0;
|
|
padding: 0.4em 0.8em;
|
|
flex-direction: column;
|
|
max-width: auto;
|
|
border-radius: 4px;
|
|
border: 1px solid #ccc;
|
|
background: #f6f6f6;
|
|
}
|
|
.filters > * {
|
|
margin: 0;
|
|
padding: 0.6em 0.8em;
|
|
}
|
|
.dark .filters {
|
|
background: #464646;
|
|
border: 1px solid #222;
|
|
}
|
|
.filters.active {
|
|
background: #eef;
|
|
border: 1px solid #bbe;
|
|
}
|
|
.dark .filters.active {
|
|
background: #464666;
|
|
border: 1px solid #556;
|
|
}
|
|
.filters .filterby {
|
|
margin: 0;
|
|
font-weight: bold;
|
|
}
|
|
.filters .field label { margin-right: 0.5em; }
|
|
.filters .field { margin: 0; }
|
|
.filters .field button.clearFilters { margin: 0 !important; }
|
|
|
|
@media (min-width: 640px) {
|
|
.filters {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* Overview Page */
|
|
div.container {
|
|
margin-top: 20px;
|
|
columns: auto 275px;
|
|
}
|
|
div.category {
|
|
padding: 2px 5px;
|
|
}
|
|
|
|
|
|
/* Category Pages */
|
|
.logo {
|
|
max-width: 75px !important;
|
|
max-height: 75px !important;
|
|
vertical-align: middle !important;
|
|
text-align: center;
|
|
}
|
|
.dark img.logo {
|
|
filter: contrast(0.7);
|
|
}
|
|
|
|
table.summary {
|
|
width: 96%;
|
|
border: 1px solid #000;
|
|
text-align: left;
|
|
border-collapse: collapse;
|
|
margin-top: 20px;
|
|
}
|
|
.dark table.summary {
|
|
border: 1px solid #555;
|
|
}
|
|
table.summary th {
|
|
position: sticky;
|
|
top: -1px;
|
|
background: #ddd;
|
|
border: 1px solid #000;
|
|
padding: 3px 10px;
|
|
font-size: 15px;
|
|
font-weight: bold;
|
|
color: #000;
|
|
z-index: 1; /* stay on top when scrolling */
|
|
}
|
|
.dark table.summary th {
|
|
background: #1a1a1a;
|
|
color: #999;
|
|
border: 1px solid #555;
|
|
}
|
|
|
|
tbody tr.selected {
|
|
background-color: #ffe;
|
|
}
|
|
.dark tbody tr.selected {
|
|
background-color: #3a3a30;
|
|
}
|
|
|
|
tbody td {
|
|
font-size: 13px;
|
|
max-height: 100px;
|
|
border: 1px solid #000;
|
|
padding: 5px 10px;
|
|
vertical-align: top;
|
|
}
|
|
.dark tbody td {
|
|
border: 1px solid #555;
|
|
}
|
|
|
|
tbody h3.slug::before {
|
|
display: block;
|
|
content: " ";
|
|
margin-top: -84px;
|
|
height: 84px;
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
}
|
|
tbody .anchor {
|
|
margin: 0 5px;
|
|
}
|
|
tbody .nsikey,
|
|
tbody .locations,
|
|
tbody .sociallinks,
|
|
tbody .viewlink {
|
|
padding-top: 10px;
|
|
}
|
|
tbody td.namesuggest {
|
|
max-width: 280px;
|
|
}
|
|
tbody .nsikey {
|
|
overflow-x: auto;
|
|
}
|
|
tbody .locations {
|
|
overflow-x: auto;
|
|
font-size: 12px;
|
|
}
|
|
tbody .locations code {
|
|
background: unset;
|
|
font-size: 12px;
|
|
}
|
|
tbody td.tags {
|
|
max-width: 280px;
|
|
overflow-x: auto;
|
|
}
|
|
tbody pre.tags {
|
|
font-size: 10px;
|
|
}
|
|
tbody td.wikidata {
|
|
max-width: 320px;
|
|
}
|
|
tbody td.wikidata div.viewlink {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.sociallinks svg.fa-instagram,
|
|
.sociallinks svg.fa-vk {
|
|
color: white;
|
|
background: black;
|
|
border-radius: 3px;
|
|
height: 0.895em;
|
|
margin-bottom: 0.03em;
|
|
width: 0.95em;
|
|
}
|
|
|
|
/* invert certain social icons so they match the others */
|
|
.sociallinks a svg.fa-instagram,
|
|
.sociallinks a svg.fa-vk,
|
|
.sociallinks a:visited svg.fa-instagram,
|
|
.sociallinks a:visited svg.fa-vk {
|
|
color: white;
|
|
background: #67e;
|
|
}
|
|
.dark .sociallinks a svg.fa-instagram,
|
|
.dark .sociallinks a svg.fa-vk,
|
|
.dark .sociallinks a:visited svg.fa-instagram,
|
|
.dark .sociallinks a:visited svg.fa-vk {
|
|
color: #2a2a2a;
|
|
background: #88c;
|
|
}
|
|
|
|
/* SSL lock / unlock icons */
|
|
.viewlink svg.fa-lock { margin-left: 0.3em; color: green; background: white; }
|
|
.viewlink svg.fa-unlock { margin-left: 0.3em; color: red; background: white; }
|
|
.dark .viewlink svg.fa-lock { margin-left: 0.3em; color: green; background: #2a2a2a; }
|
|
.dark .viewlink svg.fa-unlock { margin-left: 0.3em; color: red; background: #2a2a2a; }
|
|
|
|
.sociallinks a:hover svg.fa-instagram,
|
|
.sociallinks a:hover svg.fa-vk {
|
|
color: white;
|
|
background: #56a;
|
|
}
|
|
.dark .sociallinks a:hover svg.fa-instagram,
|
|
.dark .sociallinks a:hover svg.fa-vk {
|
|
color: #2a2a2a;
|
|
background: #56a;
|
|
}
|
|
.sociallinks a {
|
|
margin: 0 2px;
|
|
}
|
|
|
|
|
|
/* slider/switch */
|
|
|
|
/* The switch - the box around the slider */
|
|
.switch {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 50px;
|
|
height: 10px;
|
|
margin-bottom: 3px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* Hide default HTML checkbox */
|
|
.switch input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
/* The slider */
|
|
.slider {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: #aaa;
|
|
-webkit-transition: .4s;
|
|
transition: .4s;
|
|
}
|
|
|
|
.slider:before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 20px;
|
|
width: 20px;
|
|
left: 2px;
|
|
bottom: -5px;
|
|
background-color: #ddd;
|
|
-webkit-transition: .4s;
|
|
transition: .4s;
|
|
}
|
|
|
|
input:checked + .slider {
|
|
background-color: #aaa;
|
|
}
|
|
|
|
input:focus + .slider {
|
|
box-shadow: 0 0 1px #0053ba;
|
|
}
|
|
|
|
input:checked + .slider:before {
|
|
-webkit-transform: translateX(26px);
|
|
-ms-transform: translateX(26px);
|
|
transform: translateX(26px);
|
|
}
|
|
|
|
/* Rounded sliders */
|
|
.slider.round {
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.slider.round:before {
|
|
border-radius: 50%;
|
|
}
|
|
|