add optional light color theme to style.css #51
1 changed files with 61 additions and 11 deletions
|
@ -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 {
|
||||
color: #bdc7b8;
|
||||
font: calc(0.40rem + 1vmin) monospace;
|
||||
|
@ -10,7 +60,7 @@ body {
|
|||
margin-left: auto;
|
||||
min-width: 33rem;
|
||||
max-width: 53rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 53rem) {
|
||||
body {
|
||||
|
@ -29,7 +79,7 @@ a.no-shadow {
|
|||
|
||||
a:hover, a:active, a:visited {
|
||||
color: #b5bd68;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
margin: 0 1em;
|
||||
|
@ -176,7 +226,7 @@ select {
|
|||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
background-image: url(/static/dropdown-handle.png);
|
||||
background-image: url(/static/dropdown-handle.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom 0.65em right 0.8em;
|
||||
background-size: 0.5em;
|
||||
|
@ -215,7 +265,7 @@ input[type=submit], select {
|
|||
|
||||
input[type=submit].form-submit-link {
|
||||
border: none;
|
||||
background-color: initial;
|
||||
background-color: #0000 !important;
|
||||
color: #6CF;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
@ -242,14 +292,14 @@ ul li, ol li {
|
|||
margin-left: 1.2rem;
|
||||
}
|
||||
|
||||
.long-form p,
|
||||
.long-form p,
|
||||
.long-form li,
|
||||
.long-form blockquote {
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
|
||||
.long-form p .code,
|
||||
.long-form p .code,
|
||||
.long-form li .code,
|
||||
.long-form blockquote .code
|
||||
{
|
||||
|
@ -313,7 +363,7 @@ th {
|
|||
}
|
||||
td {
|
||||
font: calc(0.35rem + 0.95vmin) monospace;
|
||||
border-bottom: 2px dotted #777e7355;
|
||||
border-bottom: 2px dotted #777e7388;
|
||||
padding-top: 0.4rem;
|
||||
padding-bottom: 0.4rem;
|
||||
}
|
||||
|
@ -412,14 +462,14 @@ footer {
|
|||
|
||||
form.megaphone {
|
||||
margin-top: 1rem;
|
||||
width: 640px;
|
||||
width: 640px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
form.megaphone input[type=text],
|
||||
form.megaphone textarea {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
form.megaphone textarea {
|
||||
height: 360px;
|
||||
}
|
||||
height: 360px;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue