1337 lines
18 KiB
CSS
1337 lines
18 KiB
CSS
:root{
|
|
/* background */
|
|
--1d2021: #1d2021;
|
|
--282828: #282828;
|
|
--3c3836: #3c3836;
|
|
--504945: #504945;
|
|
|
|
/* font */
|
|
--928374: #928374;
|
|
--a89984: #a89984;
|
|
--bdae93: #bdae93;
|
|
--8ec07c: #8ec07c;
|
|
--ebdbb2: #ebdbb2;
|
|
|
|
/* code highlighter */
|
|
--comment: #9e8e73;
|
|
--default: #d4be98;
|
|
--keyword: #d8a657;
|
|
--string: #7daea7;
|
|
|
|
/* color codes for instance list */
|
|
--green: #b8bb26;
|
|
--yellow: #d8a657;
|
|
--red: #fb4934;
|
|
}
|
|
|
|
audio{
|
|
max-width:100%;
|
|
display:block;
|
|
}
|
|
|
|
.left audio{
|
|
margin-top:7px;
|
|
}
|
|
|
|
.right-wrapper audio{
|
|
margin-bottom:17px;
|
|
}
|
|
|
|
body,html{
|
|
padding:0;
|
|
margin:0;
|
|
}
|
|
|
|
body{
|
|
background:var(--1d2021);
|
|
color:var(--a89984);
|
|
font-size:16px;
|
|
box-sizing:border-box;
|
|
font-family:sans-serif;
|
|
padding:15px 7% 45px;
|
|
word-wrap:anywhere;
|
|
line-height:22px;
|
|
max-width:2000px;
|
|
}
|
|
|
|
h1,h2,h3,h4,h5,h6{
|
|
padding:0;
|
|
margin:0 0 7px 0;
|
|
line-height:initial;
|
|
color:var(--bdae93);
|
|
}
|
|
|
|
h3,h4,h5,h6{
|
|
margin-bottom:14px;
|
|
}
|
|
|
|
/*
|
|
Web styles
|
|
*/
|
|
#overflow{
|
|
overflow:hidden;
|
|
}
|
|
|
|
/* Searchbox */
|
|
.searchbox{
|
|
width:40%;
|
|
height:36px;
|
|
border:1px solid var(--504945);
|
|
background:var(--282828);
|
|
border-radius:2px;
|
|
margin-bottom:10px;
|
|
position:relative;
|
|
}
|
|
|
|
.searchbox .wrapper{
|
|
overflow:hidden;
|
|
}
|
|
|
|
.searchbox input[type="text"]{
|
|
width:100%;
|
|
padding-left:10px;
|
|
}
|
|
|
|
.searchbox input[type="text"]::placeholder{
|
|
color:var(--928374);
|
|
}
|
|
|
|
.searchbox input[type="submit"]{
|
|
float:right;
|
|
cursor:pointer;
|
|
padding:0 10px;
|
|
}
|
|
|
|
.searchbox input[type="submit"]:hover{
|
|
text-decoration:underline;
|
|
}
|
|
|
|
.searchbox input{
|
|
all:unset;
|
|
line-height:36px;
|
|
box-sizing:border-box;
|
|
height:36px;
|
|
color:var(--bdae93);
|
|
}
|
|
|
|
.searchbox:focus-within{
|
|
border:1px solid var(--928374);
|
|
}
|
|
|
|
.autocomplete{
|
|
display:none;
|
|
position:absolute;
|
|
top:35px;
|
|
left:-1px;
|
|
right:-1px;
|
|
background:var(--282828);
|
|
border:1px solid var(--928374);
|
|
border-top:none;
|
|
border-radius:0 0 2px 2px;
|
|
z-index:10;
|
|
overflow:hidden;
|
|
}
|
|
|
|
.autocomplete .entry{
|
|
overflow:hidden;
|
|
padding:4px 10px;
|
|
cursor:pointer;
|
|
outline:none;
|
|
user-select:none;
|
|
}
|
|
|
|
.autocomplete .entry:hover{
|
|
background:var(--3c3836);
|
|
}
|
|
|
|
.autocomplete .entry:focus{
|
|
background:var(--3c3836);
|
|
}
|
|
|
|
/* Tabs */
|
|
.tabs, .filters{
|
|
overflow:hidden;
|
|
overflow-x:auto;
|
|
white-space:nowrap;
|
|
}
|
|
|
|
.tabs{
|
|
padding-bottom:10px;
|
|
}
|
|
|
|
.tabs .tab{
|
|
text-decoration:none;
|
|
color:var(--bdae93);
|
|
padding:4px 10px;
|
|
display:inline-block;
|
|
}
|
|
|
|
.tabs .tab:hover{
|
|
text-decoration:underline;
|
|
}
|
|
|
|
.tabs .tab.selected{
|
|
border-bottom:2px solid var(--bdae93);
|
|
}
|
|
|
|
/* Filters */
|
|
.filters{
|
|
padding-bottom:15px;
|
|
margin-bottom:7px;
|
|
}
|
|
|
|
.filters .filter{
|
|
display:inline-block;
|
|
margin-right:7px;
|
|
vertical-align:bottom;
|
|
}
|
|
|
|
.filters .filter .title{
|
|
font-size:13px;
|
|
margin:0 4px;
|
|
}
|
|
|
|
.filters .filter input,
|
|
.filters .filter select{
|
|
all:unset;
|
|
display:block;
|
|
border:1px solid var(--504945);
|
|
border-radius:2px;
|
|
font-size:14px;
|
|
padding:0 4px;
|
|
width:127px;
|
|
height:24px;
|
|
}
|
|
|
|
|
|
/*
|
|
HOME
|
|
*/
|
|
.home{
|
|
min-height:100vh;
|
|
margin:0 auto;
|
|
display:table;
|
|
text-align:center;
|
|
}
|
|
|
|
.home .logo{
|
|
max-width:400px;
|
|
height:100px;
|
|
margin:0 auto 17px auto;
|
|
}
|
|
|
|
.home img{
|
|
line-height:100px;
|
|
font-size:60px;
|
|
text-align:center;
|
|
font-family:Times;
|
|
width:100%;
|
|
height:100%;
|
|
background:var(--282828);
|
|
display:block;
|
|
object-fit:contain;
|
|
}
|
|
|
|
.home #center{
|
|
display:table-cell;
|
|
vertical-align:middle;
|
|
width:500px;
|
|
}
|
|
|
|
.home .searchbox{
|
|
width:100%;
|
|
text-align:left;
|
|
margin-bottom:20px;
|
|
}
|
|
|
|
.home a{
|
|
color:inherit;
|
|
}
|
|
|
|
.home .subtext{
|
|
margin-top:17px;
|
|
line-height:16px;
|
|
font-size:12px;
|
|
}
|
|
|
|
|
|
/*
|
|
WEB
|
|
*/
|
|
|
|
/* Captcha */
|
|
.captcha-wrapper{
|
|
position:relative;
|
|
max-width:400px;
|
|
margin:17px auto 0;
|
|
border:1px solid var(--928374);
|
|
}
|
|
|
|
.captcha{
|
|
padding-bottom:100%;
|
|
padding-top:6.2%;
|
|
}
|
|
|
|
.captcha-wrapper img{
|
|
position:absolute;
|
|
top:0;
|
|
left:0;
|
|
width:100%;
|
|
height:100%;
|
|
}
|
|
|
|
.captcha-controls{
|
|
position:absolute;
|
|
top:0;
|
|
left:0;
|
|
bottom:0;
|
|
right:0;
|
|
top:6.3%;
|
|
}
|
|
|
|
.captcha-wrapper img{
|
|
display:block;
|
|
background:#282828;
|
|
}
|
|
|
|
.captcha-wrapper input{
|
|
display:none;
|
|
}
|
|
|
|
.captcha-wrapper label{
|
|
float:left;
|
|
width:25%;
|
|
height:25%;
|
|
position:relative;
|
|
cursor:pointer;
|
|
}
|
|
|
|
.captcha-wrapper label:hover{
|
|
background:rgba(255,255,255,0.2);
|
|
}
|
|
|
|
.captcha-wrapper input:checked + label{
|
|
background:rgba(0,0,0,0.5);
|
|
}
|
|
|
|
.captcha-wrapper input:checked + label:after{
|
|
content:"";
|
|
position:absolute;
|
|
left:39%;
|
|
top:29%;
|
|
width:20%;
|
|
height:30%;
|
|
transform:rotate(45deg);
|
|
border-right:7px solid var(--ebdbb2);
|
|
border-bottom:7px solid var(--ebdbb2);
|
|
box-sizing:border-box;
|
|
}
|
|
|
|
.captcha-submit{
|
|
float:right;
|
|
margin:12px 0 4px;
|
|
}
|
|
|
|
.web .left{
|
|
width:40%;
|
|
float:left;
|
|
}
|
|
|
|
/* infobox */
|
|
.infobox{
|
|
border:1px dashed var(--504945);
|
|
padding:10px;
|
|
margin-bottom:17px;
|
|
overflow:hidden;
|
|
}
|
|
|
|
.infobox .code{
|
|
white-space:initial;
|
|
}
|
|
|
|
.infobox ul{
|
|
padding-left:27px;
|
|
margin-bottom:0;
|
|
}
|
|
|
|
.infobox a{
|
|
color:var(--bdae93);
|
|
}
|
|
|
|
.infobox a:hover{
|
|
text-decoration:underline;
|
|
}
|
|
|
|
/* text-result */
|
|
.web .text-result{
|
|
margin-bottom:30px;
|
|
}
|
|
|
|
.web .description{
|
|
white-space:pre-line;
|
|
}
|
|
|
|
.web .type{
|
|
border:1px solid var(--928374);
|
|
background:var(--282828);
|
|
padding:0 4px;
|
|
border-radius:2px;
|
|
font-size:14px;
|
|
line-height:16px;
|
|
float:left;
|
|
margin:2px 7px 0 0;
|
|
}
|
|
|
|
.web .url{
|
|
position:relative;
|
|
}
|
|
|
|
.web .url .part{
|
|
font-size:15px;
|
|
text-decoration:none;
|
|
color:var(--928374);
|
|
}
|
|
|
|
.web .separator::before{
|
|
content:"/";
|
|
padding:0 4px;
|
|
color:var(--504945);
|
|
font-size:12px;
|
|
}
|
|
|
|
.web .part:hover{
|
|
text-decoration:underline;
|
|
}
|
|
|
|
.web .hover{
|
|
display:block;
|
|
text-decoration:none;
|
|
color:var(--a89984);
|
|
overflow:hidden;
|
|
clear:left;
|
|
padding-top:7px;
|
|
}
|
|
|
|
.web .text-result .title{
|
|
font-size:18px;
|
|
color:var(--bdae93);
|
|
margin-bottom:7px;
|
|
}
|
|
|
|
.web .text-result a:visited .title{
|
|
color:var(--928374) !important;
|
|
}
|
|
|
|
.theme-white .web .text-result a:visited .title{
|
|
color:#7c6f64 !important;
|
|
}
|
|
|
|
.web .text-result .hover:hover .title{
|
|
text-decoration:underline;
|
|
}
|
|
|
|
.web .text-result .author{
|
|
font-style:italic;
|
|
}
|
|
|
|
.web .text-result .greentext{
|
|
font-size:14px;
|
|
color:var(--8ec07c);
|
|
}
|
|
|
|
.web .right-right .text-result:last-child,
|
|
.web .right-left .text-result:last-child{
|
|
margin-bottom:0;
|
|
}
|
|
|
|
/* favicon */
|
|
.favicon{
|
|
all:unset;
|
|
float:left;
|
|
cursor:pointer;
|
|
}
|
|
|
|
.favicon-dropdown{
|
|
display:none;
|
|
position:absolute;
|
|
top:25px;
|
|
background:var(--282828);
|
|
border:1px solid var(--504945);
|
|
border-radius:2px;
|
|
z-index:3;
|
|
word-wrap:normal;
|
|
}
|
|
|
|
.favicon-dropdown::before{
|
|
content:"";
|
|
position:absolute;
|
|
top:-10px;
|
|
left:2px;
|
|
border:5px solid transparent;
|
|
border-bottom:5px solid var(--504945);
|
|
}
|
|
|
|
.favicon-dropdown a{
|
|
text-decoration:none;
|
|
color:var(--bdae93);
|
|
display:block;
|
|
padding:2px 7px 2px 5px;
|
|
font-size:13px;
|
|
}
|
|
|
|
.favicon-dropdown a:hover{
|
|
text-decoration:underline;
|
|
}
|
|
|
|
.favicon-dropdown:hover,
|
|
.favicon:focus + .favicon-dropdown,
|
|
.favicon-dropdown:focus-within{
|
|
display:block;
|
|
}
|
|
|
|
.web .favicon img,
|
|
.favicon-dropdown img{
|
|
margin:3px 7px 0 0;
|
|
width:16px;
|
|
height:16px;
|
|
font-size:12px;
|
|
line-height:16px;
|
|
text-align:center;
|
|
display:block;
|
|
text-align:left;
|
|
}
|
|
|
|
.favicon-dropdown img{
|
|
float:left;
|
|
margin:2px 7px 0 0;
|
|
}
|
|
|
|
/* thumbnails */
|
|
.thumb-wrap{
|
|
position:relative;
|
|
float:right;
|
|
width:160px;
|
|
height:90px;
|
|
background:var(--282828);
|
|
text-align:center;
|
|
line-height:87px;
|
|
border:1px solid var(--504945);
|
|
overflow:hidden;
|
|
margin-left:7px;
|
|
}
|
|
|
|
.duration{
|
|
position:absolute;
|
|
right:0;
|
|
bottom:0;
|
|
padding:1px 2px;
|
|
line-height:14px;
|
|
background:var(--3c3836);
|
|
font-size:12px;
|
|
border-left:1px solid var(--504945);
|
|
border-top:1px solid var(--504945);
|
|
font-family:monospace;
|
|
}
|
|
|
|
.web .text-result:hover .thumb-wrap .duration{
|
|
display:none;
|
|
}
|
|
|
|
.thumb-wrap .thumb{
|
|
max-width:100%;
|
|
max-height:100%;
|
|
text-align:left;
|
|
vertical-align:middle;
|
|
}
|
|
|
|
.thumb-wrap.portrait{
|
|
width:50px;
|
|
}
|
|
|
|
.thumb-wrap.square{
|
|
width:90px;
|
|
}
|
|
|
|
/* Next page */
|
|
.nextpage{
|
|
margin:0 0 30px;
|
|
text-align:center;
|
|
display:block;
|
|
padding:10px;
|
|
border:1px solid var(--504945);
|
|
border-radius:2px;
|
|
text-decoration:none;
|
|
color:var(--bdae93);
|
|
}
|
|
|
|
.nextpage:hover{
|
|
text-decoration:underline;
|
|
}
|
|
|
|
/* Right wrapper */
|
|
.web .right-wrapper{
|
|
width:60%;
|
|
float:right;
|
|
overflow:hidden;
|
|
padding-left:15px;
|
|
box-sizing:border-box;
|
|
}
|
|
|
|
.web .right-right,
|
|
.web .right-left{
|
|
float:right;
|
|
width:50%;
|
|
padding:0 15px;
|
|
box-sizing:border-box;
|
|
overflow:hidden;
|
|
min-height:1px;
|
|
}
|
|
|
|
.web .right-right{
|
|
padding-right:0;
|
|
}
|
|
|
|
/*
|
|
Tables
|
|
*/
|
|
table{
|
|
width:100%;
|
|
text-align:left;
|
|
border-collapse:collapse;
|
|
}
|
|
|
|
table td{
|
|
width:50%;
|
|
padding:0;
|
|
vertical-align:top;
|
|
}
|
|
|
|
table tr td:first-child{
|
|
padding-right:7px;
|
|
}
|
|
|
|
table a{
|
|
display:block;
|
|
text-decoration:none;
|
|
color:var(--a89984);
|
|
padding:0 10px 0 0;
|
|
}
|
|
|
|
table tr a:last-child{
|
|
padding-right:0;
|
|
}
|
|
|
|
/* Related */
|
|
.related{
|
|
margin-bottom:20px;
|
|
}
|
|
|
|
.related a{
|
|
padding-bottom:10px;
|
|
color:var(--bdae93);
|
|
}
|
|
|
|
.related a:hover{
|
|
text-decoration:underline;
|
|
}
|
|
|
|
/*
|
|
Answers
|
|
*/
|
|
.web .answer{
|
|
max-height:600px;
|
|
overflow:hidden;
|
|
padding-bottom:17px;
|
|
position:relative;
|
|
}
|
|
|
|
.web .answer::after{
|
|
content:"";
|
|
position:absolute;
|
|
bottom:0;
|
|
width:100%;
|
|
height:17px;
|
|
background:linear-gradient(transparent, var(--1d2021));
|
|
pointer-events:none;
|
|
}
|
|
|
|
.web .answer-title{
|
|
text-decoration:none;
|
|
color:var(--a89984);
|
|
}
|
|
|
|
.web .answer-title a:hover{
|
|
text-decoration:underline;
|
|
}
|
|
|
|
.web .spoiler:checked + .answer{
|
|
overflow:initial;
|
|
max-height:initial;
|
|
}
|
|
|
|
.web .spoiler{
|
|
display:none;
|
|
}
|
|
|
|
.web .spoiler-button{
|
|
display:block;
|
|
border:1px solid var(--504945);
|
|
border-radius:2px;
|
|
line-height:30px;
|
|
padding:0 7px;
|
|
text-align:center;
|
|
cursor:pointer;
|
|
}
|
|
|
|
.web .answer-wrapper{
|
|
margin-bottom:27px;
|
|
}
|
|
|
|
.web .spoiler-button:hover{
|
|
text-decoration:underline;
|
|
}
|
|
|
|
.web .spoiler-button::before{
|
|
content:"Show more";
|
|
}
|
|
|
|
.web .spoiler:checked + .answer + .spoiler-button::before{
|
|
content:"Show less";
|
|
}
|
|
|
|
/* Tables on left handside */
|
|
.web .info-table{
|
|
margin:10px 0;
|
|
font-size:15px;
|
|
color:var(--928374);
|
|
background:var(--282828);
|
|
border:1px dashed var(--504945);
|
|
}
|
|
|
|
.web .info-table td{
|
|
padding:4px 10px;
|
|
}
|
|
|
|
.web .info-table tr td:first-child{
|
|
width:1%;
|
|
white-space:nowrap;
|
|
padding-right:17px;
|
|
color:var(--a89984);
|
|
}
|
|
|
|
.web .info-table tr:nth-child(even){
|
|
background:var(--1d2021);
|
|
}
|
|
|
|
.web .sublinks{
|
|
padding:17px 10px 0;
|
|
font-size:15px;
|
|
color:var(--#928374);
|
|
}
|
|
|
|
.web .sublinks table td{
|
|
padding-bottom:17px;
|
|
}
|
|
|
|
.web .sublinks table tr:last-child td:last-child{
|
|
padding-bottom:0;
|
|
}
|
|
|
|
.web .sublinks a:hover .title{
|
|
text-decoration:underline;
|
|
}
|
|
|
|
/* Wikipedia head */
|
|
.web .wiki-head .photo{
|
|
float:right;
|
|
margin:0 1px 10px 10px;
|
|
}
|
|
.web .wiki-head .photo img{
|
|
display:block;
|
|
max-width:200px;
|
|
max-height:200px;
|
|
filter:drop-shadow(1px 0 0 var(--504945)) drop-shadow(-1px 0 0 var(--504945)) drop-shadow(0 -1px 0 var(--504945)) drop-shadow(0 1px 0 var(--504945));
|
|
}
|
|
|
|
.web .wiki-head .description{
|
|
clear:left;
|
|
padding-top:7px;
|
|
overflow:hidden;
|
|
}
|
|
|
|
.web .wiki-head table, .about table{
|
|
margin-top:17px;
|
|
border:1px dashed var(--504945);
|
|
}
|
|
|
|
.web .wiki-head td, .about table td{
|
|
padding:4px 7px;
|
|
vertical-align:middle;
|
|
}
|
|
|
|
.web .wiki-head tr td:first-child, .about table tr td:first-child{
|
|
width:30%;
|
|
min-width:150px;
|
|
}
|
|
|
|
.web .wiki-head tr:nth-child(odd), .about table tr:nth-child(odd){
|
|
background:var(--282828);
|
|
}
|
|
|
|
.web .wiki-head .socials{
|
|
overflow:hidden;
|
|
margin-top:17px;
|
|
}
|
|
|
|
.web .wiki-head .socials a{
|
|
width:74px;
|
|
height:80px;
|
|
padding-right:4px;
|
|
float:left;
|
|
color:var(--bdae93);
|
|
text-decoration:none;
|
|
display:table;
|
|
}
|
|
|
|
.web .wiki-head .socials a:hover .title{
|
|
text-decoration:underline;
|
|
}
|
|
|
|
.web .wiki-head .socials .center{
|
|
display:table-cell;
|
|
vertical-align:middle;
|
|
}
|
|
|
|
.web .wiki-head .socials img{
|
|
margin:0 auto;
|
|
display:block;
|
|
text-align:center;
|
|
width:36px;
|
|
height:36px;
|
|
line-height:36px;
|
|
}
|
|
|
|
.web .wiki-head .socials .title{
|
|
margin-top:7px;
|
|
text-align:center;
|
|
font-size:13px;
|
|
line-height:13px;
|
|
}
|
|
|
|
.web .fullimg{
|
|
display:block;
|
|
max-width:100%;
|
|
max-height:150px;
|
|
margin:7px 0 17px;
|
|
box-sizing:border-box;
|
|
border:1px solid var(--504945);
|
|
}
|
|
|
|
/*
|
|
Code tags
|
|
*/
|
|
.code{
|
|
white-space:pre;
|
|
font-family:monospace;
|
|
background:var(--3c3836);
|
|
color:var(--bdae93);
|
|
padding:7px;
|
|
margin:4px 0 13px 0;
|
|
overflow-x:auto;
|
|
border-radius:2px;
|
|
border:1px solid var(--504945);
|
|
}
|
|
|
|
.code-inline{
|
|
display:inline;
|
|
font-family:monospace;
|
|
background:var(--282828);
|
|
color:var(--bdae93);
|
|
border:1px solid var(--928374);
|
|
padding:0 4px;
|
|
border-radius:2px;
|
|
}
|
|
|
|
/* Wiki-head titles and quotes */
|
|
.web .wiki-head h2{
|
|
font-size:20px;
|
|
margin:20px 0 13px 0;
|
|
}
|
|
|
|
.web .wiki-head h2:first-child{
|
|
margin-top:10px;
|
|
}
|
|
|
|
.web .wiki-head a{
|
|
color:var(--bdae93);
|
|
}
|
|
|
|
.quote{
|
|
font-style:italic;
|
|
margin:10px 0 13px;
|
|
padding-left:10px;
|
|
border-left:1px solid #504945;
|
|
}
|
|
|
|
/*
|
|
Web images
|
|
*/
|
|
.web .images{
|
|
overflow:hidden;
|
|
margin:0 -5px;
|
|
font-size:0;
|
|
}
|
|
|
|
.web .images .duration{
|
|
display:none;
|
|
border:1px solid var(--504945);
|
|
right:5px;
|
|
bottom:5px;
|
|
}
|
|
|
|
.web .images .image:hover .duration{
|
|
display:block;
|
|
}
|
|
|
|
.web .images .image{
|
|
width:90px;
|
|
height:90px;
|
|
padding:5px;
|
|
position:relative;
|
|
line-height:90px;
|
|
display:inline-block;
|
|
text-align:center;
|
|
color:inherit;
|
|
}
|
|
|
|
.web .images .image img{
|
|
max-width:100%;
|
|
max-height:100%;
|
|
vertical-align:middle;
|
|
}
|
|
|
|
|
|
/*
|
|
Images tab
|
|
*/
|
|
|
|
#images{
|
|
overflow:hidden;
|
|
margin-bottom:10px;
|
|
}
|
|
|
|
#images .infobox{
|
|
width:40%;
|
|
box-sizing:border-box;
|
|
}
|
|
|
|
#images .image-wrapper{
|
|
line-height:15px;
|
|
width:20%;
|
|
float:left;
|
|
}
|
|
|
|
#images .image{
|
|
margin:0 auto;
|
|
width:250px;
|
|
max-width:100%;
|
|
padding:7px 7px 30px 7px;
|
|
box-sizing:border-box;
|
|
font-size:14px;
|
|
}
|
|
|
|
#images a{
|
|
color:inherit;
|
|
text-decoration:none;
|
|
display:block;
|
|
}
|
|
|
|
#images a:hover .title{
|
|
text-decoration:underline;
|
|
}
|
|
|
|
#images .thumb{
|
|
display:block;
|
|
height:180px;
|
|
margin-bottom:10px;
|
|
position:relative;
|
|
}
|
|
|
|
#images .duration{
|
|
display:block;
|
|
border:1px solid #504945;
|
|
}
|
|
|
|
#images .image:hover .duration{
|
|
display:none;
|
|
}
|
|
|
|
#images img{
|
|
width:100%;
|
|
height:100%;
|
|
object-fit:contain;
|
|
}
|
|
|
|
#images .image .title{
|
|
white-space:nowrap;
|
|
overflow:hidden;
|
|
margin-bottom:7px;
|
|
font-weight:bold;
|
|
}
|
|
|
|
#images .image .description{
|
|
overflow:hidden;
|
|
height:45px;
|
|
}
|
|
|
|
.nextpage.img{
|
|
width:50%;
|
|
margin:0 auto 50px;
|
|
}
|
|
|
|
#popup{
|
|
display:none;
|
|
position:fixed;
|
|
top:0;
|
|
left:0;
|
|
cursor:grab;
|
|
user-select:none;
|
|
pointer-events:none;
|
|
z-index:5;
|
|
}
|
|
|
|
#popup:active{
|
|
cursor:grabbing;
|
|
}
|
|
|
|
#popup-image{
|
|
border:1px solid var(--928374);
|
|
display:block;
|
|
margin:0 auto;
|
|
pointer-events:all;
|
|
width:100%;
|
|
height:100%;
|
|
object-fit:contain;
|
|
background:var(--282828);
|
|
}
|
|
|
|
#popup-status{
|
|
display:none;
|
|
position:fixed;
|
|
top:0;
|
|
left:0;
|
|
width:100%;
|
|
height:35px;
|
|
background:var(--1d2021);
|
|
border-bottom:1px solid var(--928374);
|
|
z-index:4;
|
|
}
|
|
|
|
#popup-bg{
|
|
background:var(--1d2021);
|
|
opacity:.5;
|
|
position:fixed;
|
|
top:0;
|
|
left:0;
|
|
width:100%;
|
|
height:100%;
|
|
display:none;
|
|
z-index:3;
|
|
}
|
|
|
|
#popup-status select{
|
|
display:block;
|
|
width:250px;
|
|
}
|
|
|
|
#popup-num,
|
|
#popup-title{
|
|
display:table-cell;
|
|
width:0;
|
|
word-wrap:normal;
|
|
padding:0 10px;
|
|
line-height:35px;
|
|
color:var(--ebdbb2);
|
|
text-decoration:none;
|
|
}
|
|
|
|
#popup-title:hover{
|
|
text-decoration:underline;
|
|
}
|
|
|
|
#popup-title{
|
|
width:initial;
|
|
overflow:hidden;
|
|
height:35px;
|
|
display:block;
|
|
}
|
|
|
|
#popup-num{
|
|
font-weight:bold;
|
|
}
|
|
|
|
#popup-dropdown{
|
|
display:table-cell;
|
|
vertical-align:middle;
|
|
width:0;
|
|
}
|
|
|
|
/*
|
|
Settings page
|
|
*/
|
|
.web .settings{
|
|
margin-top:17px;
|
|
border:1px dashed var(--504945);
|
|
padding:7px 10px 0;
|
|
}
|
|
|
|
.web .setting{
|
|
margin-bottom:17px;
|
|
}
|
|
|
|
.web .setting .title{
|
|
font-size:14px;
|
|
}
|
|
|
|
.web .settings-submit{
|
|
margin:17px 10px;
|
|
}
|
|
|
|
.web .settings-submit input{
|
|
float:right;
|
|
}
|
|
|
|
.web .settings-submit a{
|
|
margin-right:17px;
|
|
color:var(--bdae93);
|
|
}
|
|
|
|
/*
|
|
About page
|
|
*/
|
|
.about a{
|
|
color:var(--bdae93);
|
|
}
|
|
|
|
.about h1, .about h2{
|
|
margin-top:17px;
|
|
}
|
|
|
|
.about table{
|
|
margin-bottom:17px;
|
|
}
|
|
|
|
.about table a{
|
|
display:inline;
|
|
}
|
|
|
|
|
|
/*
|
|
Syntax highlight
|
|
*/
|
|
.c-comment{
|
|
color:var(--comment);
|
|
}
|
|
.c-default{
|
|
color:var(--default);
|
|
}
|
|
.c-html{
|
|
color:var(--html);
|
|
}
|
|
.c-keyword{
|
|
color:var(--keyword);
|
|
font-weight:bold;
|
|
}
|
|
.c-string{
|
|
color:var(--string);
|
|
}
|
|
|
|
/*
|
|
Instances page
|
|
*/
|
|
.instances table{
|
|
white-space:nowrap;
|
|
margin-top:17px;
|
|
}
|
|
|
|
.instances a{
|
|
color:var(--bdae93);
|
|
}
|
|
|
|
.instances tbody tr:nth-child(even){
|
|
background:var(--282828);
|
|
}
|
|
|
|
.instances thead{
|
|
outline:1px solid var(--928374);
|
|
outline-offset:-1px;
|
|
background:var(--3c3836);
|
|
user-select:none;
|
|
z-index:2;
|
|
position:sticky;
|
|
top:0;
|
|
}
|
|
|
|
.instances th{
|
|
cursor:row-resize;
|
|
}
|
|
|
|
.instances th:hover{
|
|
background:var(--504945);
|
|
}
|
|
|
|
.instances tbody{
|
|
outline:1px solid var(--504945);
|
|
outline-offset:-1px;
|
|
position:relative;
|
|
top:-1px;
|
|
}
|
|
|
|
.instances tbody tr:hover{
|
|
background:var(--3c3836);
|
|
cursor:pointer;
|
|
}
|
|
|
|
.instances .arrow{
|
|
display:inline-block;
|
|
position:relative;
|
|
top:6px;
|
|
margin-right:7px;
|
|
width:0;
|
|
height:0;
|
|
border:6px solid transparent;
|
|
border-top:10px solid var(--bdae93);
|
|
}
|
|
|
|
.instances .arrow.up{
|
|
top:0;
|
|
border:6px solid transparent;
|
|
border-bottom:10px solid var(--bdae93);
|
|
}
|
|
|
|
.instances th, .instances td{
|
|
padding:4px 7px;
|
|
width:0;
|
|
}
|
|
|
|
.instances .extend{
|
|
width:unset;
|
|
overflow:hidden;
|
|
max-width:200px;
|
|
}
|
|
|
|
.instances .popup-wrapper{
|
|
display:none;
|
|
position:fixed;
|
|
left:50%;
|
|
top:50%;
|
|
transform:translate(-50%, -50%);
|
|
width:800px;
|
|
max-width:100%;
|
|
max-height:100%;
|
|
overflow-x:auto;
|
|
padding:17px;
|
|
box-sizing:border-box;
|
|
pointer-events:none;
|
|
z-index:3;
|
|
}
|
|
|
|
.instances .popup{
|
|
border:1px solid var(--928374);
|
|
background:var(--282828);
|
|
padding:7px 10px;
|
|
pointer-events:initial;
|
|
}
|
|
|
|
.instances ul{
|
|
padding-left:20px;
|
|
}
|
|
|
|
|
|
/*
|
|
Responsive image
|
|
*/
|
|
@media only screen and (max-width: 1454px){ #images .image-wrapper{ width:25%; } }
|
|
@media only screen and (max-width: 1161px){ #images .image-wrapper{ width:33.3333%; } }
|
|
@media only screen and (max-width: 750px){ #images .image-wrapper{ width:50%; } }
|
|
@media only screen and (max-width: 450px){ #images .image-wrapper{ width:100%; } }
|
|
|
|
|
|
/*
|
|
Responsive design
|
|
*/
|
|
@media only screen and (max-width: 1550px){
|
|
|
|
.web .right-right,
|
|
.web .right-left{
|
|
float:none;
|
|
width:initial;
|
|
padding:0 0 0 15px;
|
|
}
|
|
|
|
.web .left,
|
|
.searchbox,
|
|
#images .infobox{
|
|
width:60%;
|
|
}
|
|
|
|
.web .right-wrapper{
|
|
width:40%;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 1000px){
|
|
|
|
.nextpage.img{
|
|
width:initial;
|
|
}
|
|
|
|
.web .right-right,
|
|
.web .right-left{
|
|
border:none;
|
|
padding:0;
|
|
}
|
|
|
|
.web .right-wrapper{
|
|
float:none;
|
|
padding:0;
|
|
width:initial;
|
|
}
|
|
|
|
.web .left,
|
|
.searchbox{
|
|
width:100%;
|
|
}
|
|
|
|
body:not(.instances) table td{
|
|
display:block;
|
|
width:100%;
|
|
}
|
|
|
|
table a{
|
|
padding:0;
|
|
}
|
|
|
|
.web.has-answer .left::before{
|
|
display:block;
|
|
content:"Results";
|
|
font-size:24px;
|
|
font-weight:bold;
|
|
margin-bottom:17px;
|
|
color:var(--bdae93);
|
|
}
|
|
|
|
.web .answer{
|
|
max-height:200px;
|
|
}
|
|
|
|
.web .wiki-head tr td:first-child,
|
|
.web .info-table tr td:first-child{
|
|
text-decoration:underline;
|
|
}
|
|
|
|
#images .infobox{
|
|
width:100%;
|
|
}
|
|
}
|