summaryrefslogtreecommitdiff
path: root/static/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'static/style.css')
-rw-r--r--static/style.css1176
1 files changed, 1176 insertions, 0 deletions
diff --git a/static/style.css b/static/style.css
new file mode 100644
index 0000000..c7cacfe
--- /dev/null
+++ b/static/style.css
@@ -0,0 +1,1176 @@
+
+/*
+ Global styles
+*/
+: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;
+}
+
+.theme-white{
+ /* background */
+ --1d2021: #bdae93;
+ --282828: #a89984;
+ --3c3836: #a89984;
+ --504945: #504945;
+
+ /* font */
+ --928374: #1d2021;
+ --a89984: #282828;
+ --bdae93: #3c3836;
+ --8ec07c: #52520e;
+ --ebdbb2: #1d2021;
+
+ /* code highlighter */
+ --comment: #6a4400;
+ --default: #d4be98;
+ --keyword: #4a4706;
+ --string: #076678;
+}
+
+.theme-white .autocomplete .entry:hover{
+ background:#928374;
+}
+
+audio{
+ max-width:100%;
+}
+
+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(--504945);
+ border-top:none;
+ border-radius:0 0 2px 2px;
+ z-index:10;
+}
+
+.autocomplete .entry{
+ overflow:hidden;
+ padding:4px 10px;
+ cursor:pointer;
+}
+
+.autocomplete .entry:hover{
+ background:var(--3c3836);
+}
+
+.autocomplete .title{
+ float:left;
+}
+
+.autocomplete .subtext{
+ float:right;
+ font-size:14px;
+ color:var(--928374);
+ margin-left:7px;
+}
+
+/* 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
+*/
+
+/* Left wrapper */
+.web .left{
+ width:40%;
+ float:left;
+}
+
+/* infobox */
+.infobox{
+ border:1px dashed var(--504945);
+ padding:10px;
+ margin-bottom:17px;
+}
+
+.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;
+ 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;
+}
+
+#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);
+}
+
+#popup-bg{
+ background:var(--1d2021);
+ opacity:.5;
+ position:fixed;
+ top:0;
+ left:0;
+ width:100%;
+ height:100%;
+ display:none;
+}
+
+#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);
+}
+
+/*
+ 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%;
+ }
+
+ 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%;
+ }
+}
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-16 14:45:00 +0000