summaryrefslogtreecommitdiff
path: root/static/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'static/style.css')
-rw-r--r--static/style.css139
1 files changed, 77 insertions, 62 deletions
diff --git a/static/style.css b/static/style.css
index 6276417..3777699 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,14 +1,9 @@
:root{
/* background */
- --1d2021: #1d2021;
- --282828: #282828;
--3c3836: #3c3836;
--504945: #504945;
/* font */
- --928374: #928374;
- --a89984: #a89984;
- --bdae93: #bdae93;
--8ec07c: #8ec07c;
--ebdbb2: #ebdbb2;
@@ -24,6 +19,26 @@
--red: #fb4934;
}
+@media (prefers-color-scheme: light) {
+ :root{
+ --background: white;
+ --body: black;
+ --url: grey;
+ --deeper: #DDD;
+ --heading-and-links: #316568;
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ :root{
+ --background: black;
+ --body: #AAA;
+ --url: #999;
+ --deeper: #282828;
+ --heading-and-links: #91a5a8;
+ }
+}
+
audio{
max-width:100%;
display:block;
@@ -43,8 +58,8 @@ body,html{
}
body{
- background:var(--1d2021);
- color:var(--a89984);
+ background:var(--background);
+ color:var(--body);
font-size:16px;
box-sizing:border-box;
font-family:sans-serif;
@@ -64,7 +79,7 @@ body{
}
.navigation a{
- color:var(--bdae93);
+ color:var(--heading-and-links);
text-decoration:none;
}
@@ -83,7 +98,7 @@ h1,h2,h3,h4,h5,h6{
padding:0;
margin:0 0 7px 0;
line-height:initial;
- color:var(--bdae93);
+ color:var(--heading-and-links);
}
h3,h4,h5,h6{
@@ -102,7 +117,7 @@ h3,h4,h5,h6{
width:40%;
height:36px;
border:1px solid var(--504945);
- background:var(--282828);
+ background:var(--deeper);
border-radius:2px;
margin-bottom:10px;
position:relative;
@@ -118,7 +133,7 @@ h3,h4,h5,h6{
}
.searchbox input[type="text"]::placeholder{
- color:var(--928374);
+ color:var(--url);
}
.searchbox input[type="submit"]{
@@ -136,11 +151,11 @@ h3,h4,h5,h6{
line-height:36px;
box-sizing:border-box;
height:36px;
- color:var(--bdae93);
+ color:var(--heading-and-links);
}
.searchbox:focus-within{
- border:1px solid var(--928374);
+ border:1px solid var(--url);
}
.autocomplete{
@@ -149,8 +164,8 @@ h3,h4,h5,h6{
top:35px;
left:-1px;
right:-1px;
- background:var(--282828);
- border:1px solid var(--928374);
+ background:var(--deeper);
+ border:1px solid var(--url);
border-top:none;
border-radius:0 0 2px 2px;
z-index:10;
@@ -186,7 +201,7 @@ h3,h4,h5,h6{
.tabs .tab{
text-decoration:none;
- color:var(--bdae93);
+ color:var(--heading-and-links);
padding:4px 10px;
display:inline-block;
}
@@ -196,7 +211,7 @@ h3,h4,h5,h6{
}
.tabs .tab.selected{
- border-bottom:2px solid var(--bdae93);
+ border-bottom:2px solid var(--heading-and-links);
}
/* Filters */
@@ -258,7 +273,7 @@ h3,h4,h5,h6{
font-family:Times;
width:100%;
height:100%;
- background:var(--282828);
+ background: transparent !important;
display:block;
object-fit:contain;
}
@@ -295,7 +310,7 @@ h3,h4,h5,h6{
position:relative;
max-width:400px;
margin:17px auto 0;
- border:1px solid var(--928374);
+ border:1px solid var(--url);
}
.captcha{
@@ -386,7 +401,7 @@ h3,h4,h5,h6{
}
.infobox a{
- color:var(--bdae93);
+ color:var(--heading-and-links);
}
.infobox a:hover{
@@ -403,8 +418,8 @@ h3,h4,h5,h6{
}
.web .type{
- border:1px solid var(--928374);
- background:var(--282828);
+ border:1px solid var(--url);
+ background:var(--deeper);
padding:0 4px;
border-radius:2px;
font-size:14px;
@@ -420,7 +435,7 @@ h3,h4,h5,h6{
.web .url .part{
font-size:15px;
text-decoration:none;
- color:var(--928374);
+ color:var(--url);
}
.web .separator::before{
@@ -437,7 +452,7 @@ h3,h4,h5,h6{
.web .hover{
display:block;
text-decoration:none;
- color:var(--a89984);
+ color:var(--body);
overflow:hidden;
clear:left;
padding-top:7px;
@@ -445,12 +460,12 @@ h3,h4,h5,h6{
.web .text-result .title{
font-size:18px;
- color:var(--bdae93);
+ color:var(--heading-and-links);
margin-bottom:7px;
}
.web .text-result a:visited .title{
- color:var(--928374) !important;
+ color:var(--heading-and-links) !important;
}
.theme-white .web .text-result a:visited .title{
@@ -486,7 +501,7 @@ h3,h4,h5,h6{
display:none;
position:absolute;
top:25px;
- background:var(--282828);
+ background:var(--deeper);
border:1px solid var(--504945);
border-radius:2px;
z-index:3;
@@ -504,7 +519,7 @@ h3,h4,h5,h6{
.favicon-dropdown a{
text-decoration:none;
- color:var(--bdae93);
+ color:var(--heading-and-links);
display:block;
padding:2px 7px 2px 5px;
font-size:13px;
@@ -544,7 +559,7 @@ h3,h4,h5,h6{
float:right;
width:160px;
height:90px;
- background:var(--282828);
+ background:var(--deeper);
border:1px solid var(--504945);
margin-left:7px;
}
@@ -590,7 +605,7 @@ h3,h4,h5,h6{
border:1px solid var(--504945);
border-radius:2px;
text-decoration:none;
- color:var(--bdae93);
+ color:var(--heading-and-links);
}
.nextpage:hover{
@@ -642,7 +657,7 @@ table tr td:first-child{
table a{
display:block;
text-decoration:none;
- color:var(--a89984);
+ color:var(--body);
padding:0 10px 0 0;
}
@@ -657,7 +672,7 @@ table tr a:last-child{
.related a{
padding-bottom:10px;
- color:var(--bdae93);
+ color:var(--heading-and-links);
}
.related a:hover{
@@ -680,13 +695,13 @@ table tr a:last-child{
bottom:0;
width:100%;
height:17px;
- background:linear-gradient(transparent, var(--1d2021));
+ background:linear-gradient(transparent, var(--background));
pointer-events:none;
}
.web .answer-title{
text-decoration:none;
- color:var(--a89984);
+ color:var(--body);
}
.web .answer-title a:hover{
@@ -732,8 +747,8 @@ table tr a:last-child{
.web .info-table{
margin:10px 0;
font-size:15px;
- color:var(--928374);
- background:var(--282828);
+ color:var(--url);
+ background:var(--deeper);
border:1px dashed var(--504945);
}
@@ -745,17 +760,17 @@ table tr a:last-child{
width:1%;
white-space:nowrap;
padding-right:17px;
- color:var(--a89984);
+ color:var(--body);
}
.web .info-table tr:nth-child(even){
- background:var(--1d2021);
+ background:var(--background);
}
.web .sublinks{
padding:17px 10px 0;
font-size:15px;
- color:var(--#928374);
+ color:var(--#url);
}
.web .sublinks table td{
@@ -791,7 +806,7 @@ table tr a:last-child{
.web .wiki-head table, .about table{
margin-top:17px;
border:1px dashed var(--504945);
- background:var(--1d2021);
+ background:var(--background);
}
.web .wiki-head table td{
@@ -809,7 +824,7 @@ table tr a:last-child{
}
.web .wiki-head tr:nth-child(odd), .about table tr:nth-child(odd){
- background:var(--282828);
+ background:var(--deeper);
}
.web .wiki-head .socials{
@@ -822,7 +837,7 @@ table tr a:last-child{
height:80px;
padding-right:4px;
float:left;
- color:var(--bdae93);
+ color:var(--heading-and-links);
text-decoration:none;
display:table;
}
@@ -868,7 +883,7 @@ table tr a:last-child{
white-space:pre;
font-family:monospace;
background:var(--3c3836);
- color:var(--bdae93);
+ color:var(--heading-and-links);
padding:7px;
margin:4px 0 13px 0;
overflow-x:auto;
@@ -879,9 +894,9 @@ table tr a:last-child{
.code-inline{
display:inline;
font-family:monospace;
- background:var(--282828);
- color:var(--bdae93);
- border:1px solid var(--928374);
+ background:var(--deeper);
+ color:var(--heading-and-links);
+ border:1px solid var(--url);
padding:0 4px;
border-radius:2px;
}
@@ -897,7 +912,7 @@ table tr a:last-child{
}
.web .wiki-head a{
- color:var(--bdae93);
+ color:var(--heading-and-links);
}
.quote{
@@ -1039,14 +1054,14 @@ table tr a:last-child{
}
#popup-image{
- border:1px solid var(--928374);
+ border:1px solid var(--url);
display:block;
margin:0 auto;
pointer-events:all;
width:100%;
height:100%;
object-fit:contain;
- background:var(--282828);
+ background:var(--deeper);
}
#popup-status{
@@ -1056,13 +1071,13 @@ table tr a:last-child{
left:0;
width:100%;
height:35px;
- background:var(--1d2021);
- border-bottom:1px solid var(--928374);
+ background:var(--background);
+ border-bottom:1px solid var(--url);
z-index:4;
}
#popup-bg{
- background:var(--1d2021);
+ background:var(--background);
opacity:.5;
position:fixed;
top:0;
@@ -1137,14 +1152,14 @@ table tr a:last-child{
.web .settings-submit a{
margin-right:17px;
- color:var(--bdae93);
+ color:var(--heading-and-links);
}
/*
About page
*/
.about a{
- color:var(--bdae93);
+ color:var(--heading-and-links);
}
.about h1, .about h2{
@@ -1189,15 +1204,15 @@ table tr a:last-child{
}
.instances a{
- color:var(--bdae93);
+ color:var(--heading-and-links);
}
.instances tbody tr:nth-child(even){
- background:var(--282828);
+ background:var(--deeper);
}
.instances thead{
- outline:1px solid var(--928374);
+ outline:1px solid var(--url);
outline-offset:-1px;
background:var(--3c3836);
user-select:none;
@@ -1234,13 +1249,13 @@ table tr a:last-child{
width:0;
height:0;
border:6px solid transparent;
- border-top:10px solid var(--bdae93);
+ border-top:10px solid var(--heading-and-links);
}
.instances .arrow.up{
top:0;
border:6px solid transparent;
- border-bottom:10px solid var(--bdae93);
+ border-bottom:10px solid var(--heading-and-links);
}
.instances th, .instances td{
@@ -1271,8 +1286,8 @@ table tr a:last-child{
}
.instances .popup{
- border:1px solid var(--928374);
- background:var(--282828);
+ border:1px solid var(--url);
+ background:var(--deeper);
padding:7px 10px;
pointer-events:initial;
}
@@ -1366,7 +1381,7 @@ table tr a:last-child{
font-size:24px;
font-weight:bold;
margin-bottom:17px;
- color:var(--bdae93);
+ color:var(--heading-and-links);
}
.web .answer{
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-16 14:44:59 +0000