4get/static/style.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%;
}
}