Use CSS variables for colors
This commit is contained in:
parent
d387f29d7d
commit
0e1559f2a2
GPG Key ID:
18089E4E3CCF1D3A
|
|
@ -2,6 +2,55 @@
|
|||
* https://github.com/BBaoVanC/bobatheme.
|
||||
*/
|
||||
|
||||
:root {
|
||||
--background: #111;
|
||||
--background-2: #222;
|
||||
--background-3: #282828;
|
||||
--background-4: #333;
|
||||
--background-5: #444;
|
||||
--text-normal: #d3d3d3;
|
||||
--link-color: #4da6ff;
|
||||
--figure-border: #1b5b9b;
|
||||
|
||||
--pagination-active-hover-text: black;
|
||||
--pagination-active-background: #163b64;
|
||||
--pagination-active-hover-background: #286ab2;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--background: #eee;
|
||||
--background-2: #ddd;
|
||||
--background-3: #d8d8d8;
|
||||
--background-4: #bbb;
|
||||
--background-5: #aaa;
|
||||
--text-normal: #000;
|
||||
--link-color: #0057bf;
|
||||
--figure-border: #2e7bc9;
|
||||
|
||||
--pagination-active-hover-text: white;
|
||||
--pagination-active-background: #3977bd;
|
||||
--pagination-active-hover-background: #154172;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
:root {
|
||||
--background: #fff;
|
||||
--background-2: #ddd;
|
||||
--background-3: #d8d8d8;
|
||||
--background-4: #bbb;
|
||||
--background-5: #aaa;
|
||||
--text-normal: #000;
|
||||
--link-color: #0057bf;
|
||||
--figure-border: #2e7bc9;
|
||||
|
||||
--pagination-active-hover-text: white;
|
||||
--pagination-active-background: #3977bd;
|
||||
--pagination-active-hover-background: #154172;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Post layout (in list pages) */
|
||||
.list-page-content {
|
||||
|
|
@ -26,7 +75,7 @@
|
|||
padding-right: 24px;
|
||||
padding-bottom: 24px;
|
||||
border-radius: 12px;
|
||||
background-color: #222;
|
||||
background-color: var(--background-2);
|
||||
}
|
||||
|
||||
.post-title {
|
||||
|
|
@ -76,14 +125,14 @@
|
|||
}
|
||||
|
||||
.tag-list a {
|
||||
background-color: #222;
|
||||
background-color: var(--background-2);
|
||||
padding: 8px 12px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.tag-list a:hover {
|
||||
text-decoration: none;
|
||||
background-color: #333;
|
||||
background-color: var(--background-4);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -95,7 +144,7 @@
|
|||
flex-flow: row wrap;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
background-color: #111;
|
||||
background-color: var(--background);
|
||||
padding: 8px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
|
@ -115,14 +164,13 @@
|
|||
}
|
||||
|
||||
.section {
|
||||
background-color: #222;
|
||||
background-color: var(--background-2);
|
||||
border-radius: 12px;
|
||||
padding: 1px 25px;
|
||||
}
|
||||
|
||||
.section:hover {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
background-color: var(--background-4);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
|
|
@ -166,14 +214,14 @@
|
|||
|
||||
/* Content formatting */
|
||||
.series-box {
|
||||
background-color: #222;
|
||||
background-color: var(--background-2);
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.table-of-contents {
|
||||
background-color: #222;
|
||||
background-color: var(--background-2);
|
||||
padding: 8px 20px;
|
||||
border-radius: 8px;
|
||||
margin: 10px 0;
|
||||
|
|
@ -204,7 +252,7 @@ footer {
|
|||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
flex-direction: row;
|
||||
background-color: #222;
|
||||
background-color: var(--background-2);
|
||||
border-radius: 8px;
|
||||
margin-top: 5px;
|
||||
padding: 4px;
|
||||
|
|
@ -228,7 +276,7 @@ footer {
|
|||
.navbar-item:hover,
|
||||
.langpicker summary:hover,
|
||||
.langpicker[open] summary {
|
||||
background-color: #444;
|
||||
background-color: var(--background-5);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -252,8 +300,8 @@ footer {
|
|||
position: absolute;
|
||||
margin-top: 8px;
|
||||
right: 0;
|
||||
background-color: #222;
|
||||
border: 2px solid #333;
|
||||
background-color: var(--background-2);
|
||||
border: 2px solid var(--background-4);
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
list-style: none;
|
||||
|
|
@ -272,8 +320,8 @@ footer {
|
|||
|
||||
/* Basic elements */
|
||||
body {
|
||||
background-color: #111;
|
||||
color: lightgray;
|
||||
background-color: var(--background);
|
||||
color: var(--text-normal);
|
||||
font-family: "Open Sans", "Noto Sans", sans-serif;
|
||||
margin: auto;
|
||||
max-width: 720px;
|
||||
|
|
@ -288,13 +336,13 @@ video {
|
|||
.post-media > figure.border img,
|
||||
.post-media > figure.border video {
|
||||
padding: 5px;
|
||||
border: 7px solid #1b5b9b;
|
||||
border: 7px solid var(--figure-border);
|
||||
}
|
||||
|
||||
figure.border img,
|
||||
figure.border video {
|
||||
padding: 5px;
|
||||
border: 2px solid #1b5b9b;
|
||||
border: 2px solid var(--figure-border);
|
||||
}
|
||||
|
||||
figure {
|
||||
|
|
@ -309,14 +357,14 @@ figcaption {
|
|||
}
|
||||
|
||||
aside {
|
||||
background-color: #222;
|
||||
background-color: var(--background-2);
|
||||
padding: 12px 16px;
|
||||
margin: 16px 0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #4da6ff;
|
||||
color: var(--link-color);
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
|
|
@ -325,12 +373,12 @@ a:hover {
|
|||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 5px solid #333;
|
||||
border-left: 5px solid var(--background-4);
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-color: #444;
|
||||
border-color: var(--background-5);
|
||||
}
|
||||
|
||||
* {
|
||||
|
|
@ -350,7 +398,7 @@ hr {
|
|||
}
|
||||
|
||||
:not(pre) > code {
|
||||
background-color: #282828;
|
||||
background-color: var(--background-3);
|
||||
padding: 2px 4px;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
|
@ -369,7 +417,7 @@ code {
|
|||
.icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: lightgray;
|
||||
color: var(--text-normal);
|
||||
text-align: center;
|
||||
display: inline;
|
||||
vertical-align: middle;
|
||||
|
|
@ -396,17 +444,17 @@ h1 svg.icon {
|
|||
.page-link {
|
||||
padding: 8px 16px;
|
||||
border-radius: 5px;
|
||||
color: lightgray;
|
||||
color: var(--text-normal);
|
||||
}
|
||||
|
||||
.page-item.active .page-link {
|
||||
background-color: #163b64;
|
||||
background-color: var(--pagination-active-background);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.page-item.active .page-link:hover {
|
||||
background-color: #2b72c0;
|
||||
color: white;
|
||||
background-color: var(--pagination-active-hover-background);
|
||||
color: var(--pagination-active-hover-text);
|
||||
}
|
||||
|
||||
.page-link:hover {
|
||||
|
|
@ -414,8 +462,7 @@ h1 svg.icon {
|
|||
}
|
||||
|
||||
:not(li.disabled) > .page-link:hover {
|
||||
background-color: #444;
|
||||
color: white;
|
||||
background-color: var(--background-5);
|
||||
}
|
||||
|
||||
li.disabled {
|
||||
|
|
@ -463,12 +510,12 @@ li.disabled > .page-link:hover {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
color: inherit;
|
||||
background-color: #222;
|
||||
background-color: var(--background-2);
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.prevnext > a:hover {
|
||||
background-color: #333;
|
||||
background-color: var(--background-4);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -500,90 +547,10 @@ li.disabled > .page-link:hover {
|
|||
/* Light mode */
|
||||
@media print, (prefers-color-scheme: light) {
|
||||
/* Basic elements */
|
||||
body {
|
||||
background-color: #eee;
|
||||
color: black;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #0057bf;
|
||||
}
|
||||
|
||||
.icon {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.post-media > figure.border img,
|
||||
.post-media > figure.border video,
|
||||
figure.border img,
|
||||
figure.border video {
|
||||
border-color: #2e7bc9;
|
||||
}
|
||||
|
||||
aside,
|
||||
:not(pre) > code {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-color: #ccc;
|
||||
}
|
||||
|
||||
|
||||
.topbar,
|
||||
.section,
|
||||
.tag-list a,
|
||||
.page-list li,
|
||||
.series-taxonomy li,
|
||||
.series-box,
|
||||
.prevnext > *,
|
||||
.table-of-contents {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
.section:hover {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.section:hover,
|
||||
.tag-list a:hover,
|
||||
.navbar-item:hover,
|
||||
.langpicker summary:hover,
|
||||
.langpicker[open] summary,
|
||||
.prevnext > a:hover {
|
||||
background-color: #bbb;
|
||||
}
|
||||
|
||||
.langpicker .languages {
|
||||
background-color: #bbb;
|
||||
border-color: #999;
|
||||
}
|
||||
|
||||
.series-pages ul {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
|
||||
/* Pagination */
|
||||
.page-link {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.page-item.active .page-link {
|
||||
background-color: #3977bd;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.page-item.active .page-link:hover {
|
||||
background-color: #154172;
|
||||
color: white;
|
||||
}
|
||||
|
||||
:not(li.disabled) > .page-link:hover {
|
||||
background-color: #bbb;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
li.disabled {
|
||||
opacity: .25;
|
||||
}
|
||||
|
|
@ -607,7 +574,6 @@ li.disabled > .page-link:hover {
|
|||
}
|
||||
|
||||
body {
|
||||
background-color: white;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue