cyberia/capsul-flask
9
6
Fork 8
Code Issues 21 Pull requests 5 Projects Releases Wiki Activity

add optional light color theme to style.css #51

Open
reese wants to merge 3 commits from reese/capsul-flask:main into main
pull from: reese/capsul-flask:main
merge into: cyberia:main
Conversation 0 Commits 3 Files changed 1 +61 -11
1 changed files with 61 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
capsulflask/static/style.css
View file

@ -1,3 +1,53 @@
@media (prefers-color-scheme: light) {
.yellow {
color: rgba(221, 169, 56, 1) !important;
}
html {
color: #241e1e !important;
background-color: #eaeed9 !important;
}
a {
color:#2ea1d2 !important;
text-shadow: 1px 1px 0px #0001 !important;
}
input[type=submit].form-submit-link {
color:#2ea1d2 !important;
}
a:hover, a:active, a:visited {
color: #94a12d !important;
}
h1, h2, h3, h4, h5 {
text-shadow: 2px 2px 0px #0001 !important;
}
main {
border-color: #777e73 !important;
}
input, select, textarea {
color: #241e1e !important;
background-color: #fff3 !important;
}
thead {
background: #dbe5d6 !important;
}
th {
border-color: #eaf4e5 !important;
}
.code {
background: #fff3 !important;
}
.metric img, .metrics img {
filter: brightness(50%) saturate(250%);
}
}
html { html {
color: #bdc7b8; color: #bdc7b8;
font: calc(0.40rem + 1vmin) monospace; font: calc(0.40rem + 1vmin) monospace;
@ -10,7 +60,7 @@ body {
margin-left: auto; margin-left: auto;
min-width: 33rem; min-width: 33rem;
max-width: 53rem; max-width: 53rem;
} }
@media only screen and (max-width: 53rem) { @media only screen and (max-width: 53rem) {
body { body {
@ -29,7 +79,7 @@ a.no-shadow {
a:hover, a:active, a:visited { a:hover, a:active, a:visited {
color: #b5bd68; color: #b5bd68;
} }
.nav-links a { .nav-links a {
margin: 0 1em; margin: 0 1em;
@ -176,7 +226,7 @@ select {
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
background-image: url(/static/dropdown-handle.png); background-image: url(/static/dropdown-handle.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: bottom 0.65em right 0.8em; background-position: bottom 0.65em right 0.8em;
background-size: 0.5em; background-size: 0.5em;
@ -215,7 +265,7 @@ input[type=submit], select {
input[type=submit].form-submit-link { input[type=submit].form-submit-link {
border: none; border: none;
background-color: initial; background-color: #0000 !important;
color: #6CF; color: #6CF;
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -242,14 +292,14 @@ ul li, ol li {
margin-left: 1.2rem; margin-left: 1.2rem;
} }
.long-form p, .long-form p,
.long-form li, .long-form li,
.long-form blockquote { .long-form blockquote {
line-height: 2em; line-height: 2em;
} }
.long-form p .code, .long-form p .code,
.long-form li .code, .long-form li .code,
.long-form blockquote .code .long-form blockquote .code
{ {
@ -313,7 +363,7 @@ th {
} }
td { td {
font: calc(0.35rem + 0.95vmin) monospace; font: calc(0.35rem + 0.95vmin) monospace;
border-bottom: 2px dotted #777e7355; border-bottom: 2px dotted #777e7388;
padding-top: 0.4rem; padding-top: 0.4rem;
padding-bottom: 0.4rem; padding-bottom: 0.4rem;
} }
@ -412,14 +462,14 @@ footer {
form.megaphone { form.megaphone {
margin-top: 1rem; margin-top: 1rem;
width: 640px; width: 640px;
max-width: 100%; max-width: 100%;
} }
form.megaphone input[type=text], form.megaphone input[type=text],
form.megaphone textarea { form.megaphone textarea {
width: 100%; width: 100%;
} }
form.megaphone textarea { form.megaphone textarea {
height: 360px; height: 360px;
} }