From f1ed4198a3508ccc063986c683199f3329e53c9e Mon Sep 17 00:00:00 2001 From: lolcat Date: Tue, 7 Nov 2023 09:38:31 -0500 Subject: [PATCH] add themes --- static/themes/gentoo.css | 20 + static/themes/gore's shitty theme.css | 1126 +++++++++++++++++++++++++ 2 files changed, 1146 insertions(+) create mode 100644 static/themes/gentoo.css create mode 100644 static/themes/gore's shitty theme.css diff --git a/static/themes/gentoo.css b/static/themes/gentoo.css new file mode 100644 index 0000000..b727108 --- /dev/null +++ b/static/themes/gentoo.css @@ -0,0 +1,20 @@ +:root{ + /* background */ + --1d2021: #21222d; + --282828: #393657; + --3c3836: #27273c; + --504945: #aa85e1; + + /* font */ + --928374: #906be3; + --a89984: #9794ac; + --bdae93: #cec0f2; + --8ec07c: #5db6e1; + --ebdbb2: #b194f5; + + /* code highlighter */ + --comment: #a0c0a4; + --default: #f00; + --keyword: #9376e4; + --string: #ecd78f; +} diff --git a/static/themes/gore's shitty theme.css b/static/themes/gore's shitty theme.css new file mode 100644 index 0000000..230a412 --- /dev/null +++ b/static/themes/gore's shitty theme.css @@ -0,0 +1,1126 @@ +:root{ + --1d2021: #1d2021; + --282828: #282828; + --3c3836: #3c3836; + --504945: #504945; + + /* font */ + --928374: #928374; + --a89984: #c9c5bf; + --bdae93: #bdae93; + --8ec07c: #8ec07c; + --ebdbb2: #ebdbb2; +} + +.theme-white{ + --1d2021: #bdae93; + --282828: #a89984; + --3c3836: #a89984; + --504945: #504945; + + /* font */ + --928374: #1d2021; + --a89984: #282828; + --bdae93: #3c3836; + --8ec07c: #52520e; + --ebdbb2: #1d2021; +} + +.theme-white .autocomplete .entry:hover{ + background:#928374; +} + +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 4% 40px; + 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; + border-left: 1px solid var(--504945); + background: #723c0b; +} + +.searchbox input[type="submit"]:hover{ + text-decoration:underline; +} + +.searchbox input{ + all:unset; + line-height:36px; + box-sizing:border-box; + height:36px; +} + +.searchbox:focus-within{ + border:1px solid #ee8a9c; +} + +.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:0px; +} + +.tabs .tab{ + text-decoration:none; + color:#d3d0c1; + padding:0px 10px; + display:inline-block; +} + +.tabs .tab:hover{ + text-decoration:underline; +} + +.tabs .tab.selected{ + border-bottom:2px solid #fc92a5; +} + +/* Filters */ +.filters{ + padding-bottom:12px; + padding-top:7px; + margin-bottom:7px; + background-color:#232525 +} + +.filters .filter{ + display:inline-block; + margin-right:7px; +} + +.filters .filter .title{ + font-size:13px; +} + +.filters .filter input, +.filters .filter select{ + all:unset; + display:block; + border:1px solid var(--504945); + border-radius:2px; + font-size:14px; + padding:0 2px; + width:127px; + height:22px; +} + + +/* + 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 */ +.web .infobox{ + border:1px dashed var(--504945); + padding:10px; + margin-bottom:17px; +} + +.web .infobox .code{ + white-space:initial; +} + +.web .infobox ul{ + padding-left:27px; + margin-bottom:0; +} + +.web .infobox a{ + color:var(--bdae93); +} + +.web .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:#90c186; +} + +.web .separator::before{ + content:"/"; + padding:0 4px; + color:#5ab442; + 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:3px; +} + +.web .text-result .title{ + font-size:18px; + color:#81b5f4; + margin-bottom:5px; +} + +.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(--bdae93); +} + +.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:#d3d0c1; + 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;; + 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; + 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 .text-result .sublinks:last-child{ + padding-bottom:0; +} + +.web .sublinks a:hover .title{ + text-decoration:underline; +} + +/* Wikipedia head */ +.wiki-head{ + padding:5px; + background-color: #322f2b +} + +.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{ + line-height:15px; + overflow:hidden; + margin-bottom:10px; +} + +#images .image-wrapper{ + 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; + color:var(--bdae93); +} + +#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-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:#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; +} + +/* + 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:25%; } } +@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{ + 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; + } +} + + .type{ + color:var(--bdae93); + }