Add for dark mode
This commit is contained in:
Visman
parent
eb3c6256da
commit
2e8ec1e4fe
1 changed files with 78 additions and 16 deletions
|
|
@ -1,3 +1,65 @@
|
|||
:root {
|
||||
--c-fprimary: hsl(0, 0%, 20%);
|
||||
--bg-fprimary: hsl(60, 9%, 98%);
|
||||
--br-fprimary: hsl(34, 50%, 45%);
|
||||
--bg-like-br1: hsl(34, 50%, 45%);
|
||||
--c-a-and-btn: hsl(34, 100%, 17%);
|
||||
--bg-fh1: hsl(28, 42%, 79%);
|
||||
--br-fh1: hsl(34, 100%, 25%);
|
||||
--bg-active: hsl(34, 100%, 25%);
|
||||
--c-icon-sub: hsl(34, 100%, 25%);
|
||||
--bg-focus: hsl(34, 44%, 69%);
|
||||
--bg-post-h: hsl(34, 44%, 69%);
|
||||
--bg-post-b: hsl(44, 88%, 97%);
|
||||
--bg-fann: hsl(44, 88%, 97%);
|
||||
--bg-submenu: hsl(36, 100%, 90%);
|
||||
--c-active: hsl(49, 60%, 93%);
|
||||
--bg-btn: hsl(49, 60%, 93%);
|
||||
--bg-like-nav: hsl(49, 60%, 93%);
|
||||
--c-light: hsl(49, 60%, 93%);
|
||||
--c-tsticky: hsl(357, 100%, 42%);
|
||||
--c-faggr: hsl(357, 100%, 42%);
|
||||
--c-faggr-pr: hsl(0, 0%, 20%);
|
||||
--bg-faggr: hsl(0, 100%, 86%);
|
||||
--c-tclosed: hsl(213, 9%, 80%);
|
||||
--c-tpoll: hsl(36, 100%, 31%);
|
||||
--c-req: hsl(0, 100%, 50%);
|
||||
--bg-bbcode: hsl(0, 0%, 100%);
|
||||
--br-bbcode: hsl(0, 0%, 75%);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--c-fprimary: hsl(0, 0%, 20%);
|
||||
--bg-fprimary: hsl(34, 40%, 58%);
|
||||
--br-fprimary: hsl(34, 50%, 25%);
|
||||
--bg-like-br1: hsl(34, 50%, 45%);
|
||||
--c-a-and-btn: hsl(34, 100%, 15%);
|
||||
--bg-fh1: hsl(28, 42%, 79%);
|
||||
--br-fh1: hsl(34, 100%, 25%);
|
||||
--bg-active: hsl(34, 100%, 25%);
|
||||
--c-icon-sub: hsl(34, 100%, 25%);
|
||||
--bg-focus: hsl(34, 80%, 59%);
|
||||
--bg-post-h: hsl(34, 44%, 69%);
|
||||
--bg-post-b: hsl(36, 48%, 67%);
|
||||
--bg-fann: hsl(36, 48%, 67%);
|
||||
--bg-submenu: hsl(36, 50%, 60%);
|
||||
--c-active: hsl(28, 50%, 73%);
|
||||
--bg-btn: hsl(28, 50%, 73%);
|
||||
--bg-like-nav: hsl(28, 50%, 73%);
|
||||
--c-light: hsl(28, 50%, 73%);
|
||||
--c-tsticky: hsl(357, 100%, 42%);
|
||||
--c-faggr: hsl(357, 100%, 42%);
|
||||
--c-faggr-pr: hsl(0, 0%, 20%);
|
||||
--bg-faggr: hsl(0, 100%, 86%);
|
||||
--c-tclosed: hsl(0, 0%, 32%);
|
||||
--c-tpoll: hsl(136, 50%, 31%);
|
||||
--c-req: hsl(0, 100%, 50%);
|
||||
--bg-bbcode: hsl(0, 0%, 70%);
|
||||
--br-bbcode: hsl(0, 0%, 15%);
|
||||
}
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
a,
|
||||
|
|
@ -93,8 +155,8 @@ video {
|
|||
}
|
||||
|
||||
body {
|
||||
color: #333333;
|
||||
background-color: #FEFAEF;
|
||||
color: var(--c-fprimary);
|
||||
background-color: var(--bg-post-b); /*var(--bg-fprimary);*/
|
||||
font-family: -apple-system, system-ui, sans-serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
|
|
@ -146,8 +208,8 @@ code {
|
|||
white-space: pre;
|
||||
margin: 0 0.625rem;
|
||||
padding: 0.625rem;
|
||||
background-color: #FFFFFF;
|
||||
border: 0.0625rem solid #C0C0C0;
|
||||
background-color: var(--bg-bbcode);
|
||||
border: 0.0625rem solid var(--br-bbcode);
|
||||
overflow: auto;
|
||||
max-height: 45rem;
|
||||
min-height: 2rem;
|
||||
|
|
@ -155,42 +217,42 @@ code {
|
|||
}
|
||||
|
||||
blockquote {
|
||||
border-inline-start: 0.1875rem solid #AA7939;
|
||||
border-top: 0.0625rem solid #AA7939;
|
||||
border-inline-start: 0.1875rem solid var(--br-fprimary);
|
||||
border-top: 0.0625rem solid var(--br-fprimary);
|
||||
padding: 0.625rem;
|
||||
}
|
||||
|
||||
blockquote cite {
|
||||
display: block;
|
||||
padding: 0.625rem;
|
||||
background-color: #F8F4E3 /*#D3B58D*/;
|
||||
background-color: var(--bg-like-nav);
|
||||
margin: -0.625rem -0.625rem 0.625rem -0.625rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #583200;
|
||||
color: var(--c-a-and-btn);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover, a:focus {
|
||||
background-color: #D3B58D;
|
||||
background-color: var(--bg-focus);
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border: 0.0625rem solid #333333;
|
||||
border: 0.0625rem solid var(--c-fprimary);
|
||||
}
|
||||
|
||||
td, th {
|
||||
border: 0.0625rem solid #333333;
|
||||
border: 0.0625rem solid var(--c-fprimary);
|
||||
empty-cells: show;
|
||||
padding: 0.3125rem;
|
||||
min-width: 1rem;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #D3B58D;
|
||||
background-color: var(--bg-post-h);
|
||||
}
|
||||
|
||||
b,
|
||||
|
|
@ -217,8 +279,8 @@ img {
|
|||
}
|
||||
|
||||
span.f-bb-mono {
|
||||
border: 0.0625rem solid #C0C0C0;
|
||||
background-color: #FFFFFF;
|
||||
border: 0.0625rem solid var(--br-bbcode);
|
||||
background-color: var(--bg-bbcode);
|
||||
padding: 0 0.25rem;
|
||||
font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
|
||||
}
|
||||
|
|
@ -242,11 +304,11 @@ details[open] > summary::after {
|
|||
|
||||
div.f-bb-s-body {
|
||||
padding: 0.625rem;
|
||||
border-inline-start: 0.1875rem solid #AA7939;
|
||||
border-inline-start: 0.1875rem solid var(--br-fprimary);
|
||||
}
|
||||
|
||||
span.f-bb-hashtag {
|
||||
color: #583200;
|
||||
color: var(--c-a-and-btn);
|
||||
border-bottom-style: dashed;
|
||||
border-bottom-width: 0.0625rem;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue