mirror of
https://github.com/BBaoVanC/bobatheme.git
synced 2024-12-22 04:13:17 -06:00
Overhaul color scheme
This commit is contained in:
parent
833edacc1f
commit
9c3a076e96
GPG Key ID:
18089E4E3CCF1D3A
@ -2,40 +2,51 @@
|
||||
* https://github.com/BBaoVanC/bobatheme.
|
||||
*/
|
||||
|
||||
/* color notes:
|
||||
*
|
||||
* lightness (dark):
|
||||
* background-0: 5
|
||||
* background-1: 12.5
|
||||
* background-2: 20
|
||||
* background-highlight: 27.5
|
||||
* text-0: 92.5
|
||||
* text-1: 85
|
||||
*/
|
||||
|
||||
:root {
|
||||
--background-0: #111111;
|
||||
--background-1: #212121;
|
||||
--background-2: #303030;
|
||||
--background-highlight: #414141;
|
||||
--background-0: #111111; /* lch(5, 0, X) */
|
||||
--background-1: #212121; /* lch(12.5, 0, X) */
|
||||
--background-2: #303030; /* lch(20, 0, X) */
|
||||
--background-3: #414141; /* lch(27.5, 0, X) */
|
||||
|
||||
--background-accent-red: #2d1411; /* lch(10, 15, 30) */
|
||||
--background-accent-orange: #291705; /* lch(10, 15, 60) */
|
||||
--background-accent-yellow: #2b2510; /* lch(15, 15, 90) */
|
||||
--background-accent-lime: #202813; /* lch(15, 15, 120) */
|
||||
--background-accent-green: #092010; /* lch(10, 15, 150) */
|
||||
--background-accent-turquoise: #062b25; /* lch(15, 15, 180) */
|
||||
--background-accent-teal: #002b30; /* lch(15, 15, 210) */
|
||||
--background-accent-cerulean: #022331; /* lch(12, 15, 240) */
|
||||
--background-accent-blue: #101c30; /* lch(10, 15, 270) */
|
||||
--background-accent-purple: #1e182d; /* lch(10, 15, 300) */
|
||||
--background-accent-pink: #291526; /* lch(10, 15, 330) */
|
||||
--background-pink-1: #331821; /* lch(12.5, 15, 0) */
|
||||
--background-red-1: #331917; /* lch(12.5, 15, 30) */
|
||||
--background-orange-1: #2e1c0e; /* lch(12.5, 15, 60) */
|
||||
--background-yellow-1: #262008; /* lch(12.5, 15, 90) */
|
||||
--background-lime-1: #1b230c; /* lch(12.5, 15, 120) */
|
||||
--background-green-1: #0e2516; /* lch(12.5, 15, 150) */
|
||||
--background-turquoise-1: #012620; /* lch(12.5, 15, 180) */
|
||||
--background-teal-1: #00262b; /* lch(12.5, 15, 210) -- out of sRGB */
|
||||
--background-cerulean-1: #032432; /* lch(12.5, 15, 240) */
|
||||
--background-blue-1: #152135; /* lch(12.5, 15, 270) */
|
||||
--background-purple-1: #241d33; /* lch(12.5, 15, 300) */
|
||||
--background-magenta-1: #2e1a2b; /* lch(12.5, 15, 330) */
|
||||
|
||||
--background-accent: var(--background-accent-blue);
|
||||
--background-pink-2: #4b2431; /* lch(20, 20, 0) */
|
||||
--background-red-2: #4a2623; /* lch(20, 20, 30) */
|
||||
--background-orange-2: #432a17; /* lch(20, 20, 60) */
|
||||
--background-yellow-2: #373012; /* lch(20, 20, 90) */
|
||||
--background-lime-2: #283416; /* lch(20, 20, 120) */
|
||||
--background-green-2: #163721; /* lch(20, 20, 150) */
|
||||
--background-turquoise-2: #003830; /* lch(20, 20, 180) -- out of sRGB */
|
||||
--background-teal-2: #00373e; /* lch(20, 20, 210) -- out of sRGB */
|
||||
--background-cerulean-2: #013549; /* lch(20, 20, 240) */
|
||||
--background-blue-2: #1f314e; /* lch(20, 20, 270) */
|
||||
--background-purple-2: #352c4a; /* lch(20, 20, 300) */
|
||||
--background-magenta-2: #43263f; /* lch(20, 20, 330) */
|
||||
|
||||
--background-accent-1: var(--background-blue-1);
|
||||
--background-accent-2: var(--background-blue-2);
|
||||
|
||||
--text-0: #d4d4d4; /* lch(85, 0, X) */
|
||||
--text-1: #d4d4d4; /* lch(85, 0, X) */
|
||||
--text-2: #d4d4d4; /* lch(85, 0, X) */
|
||||
--text-3: #e9e9e9; /* lch(92.5, 0, X) */
|
||||
|
||||
--text-gray-0: #ababab; /* lch(70, 0, X) */
|
||||
--text-gray-1: #919191; /* lch(60, 0, X) */
|
||||
|
||||
--link-0: #3a94fb; /* lch(60, 60, 270) */
|
||||
|
||||
--text-0: #e9e9e9;
|
||||
--text-1: #d4d4d4;
|
||||
--link-color: #3a94fb; /* lch(60, 60, 270) */
|
||||
--figure-border: #1f5593; /* lch(35, 40, 270) */
|
||||
|
||||
--pagination-active-hover-text: black;
|
||||
@ -45,28 +56,50 @@
|
||||
|
||||
@media print, (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--background-0: #f1f1f1;
|
||||
--background-1: #dbdbdb;
|
||||
--background-2: #c6c6c6;
|
||||
--background-highlight: #c6c6c6;
|
||||
--background-0: #f1f1f1; /* lch(95, 0, X) */
|
||||
--background-1: #dbdbdb; /* lch(87.5, 0, X) */
|
||||
--background-2: #c6c6c6; /* lch(80, 0, X) */
|
||||
--background-3: #b2b2b2; /* lch(72.5, 0, X) */
|
||||
|
||||
--background-accent-red: #f1cbc7; /* lch(85, 15, 30); */
|
||||
--background-accent-orange: #f8ddca; /* lch(90, 15, 60); */
|
||||
--background-accent-yellow: #f0e1b2; /* lch(90, 25, 90); */
|
||||
--background-accent-lime: #dce6c9; /* lch(90, 15, 120); */
|
||||
--background-accent-green: #cdead3; /* lch(90, 15, 150); */
|
||||
--background-accent-turquoise: #c3ebe2; /* lch(90, 15, 180); */
|
||||
--background-accent-teal: #c1eaf0; /* lch(90, 15, 210); */
|
||||
--background-accent-cerulean: #c8e7fb; /* lch(90, 15, 240); */
|
||||
--background-accent-blue: #d7e3ff; /* lch(90, 15, 270); */
|
||||
--background-accent-purple: #e8defb; /* lch(90, 15, 300); */
|
||||
--background-accent-pink: #f6daf1; /* lch(90, 15, 330); */
|
||||
--background-pink-1: #f7d1dc; /* lch(87.5, 15, 0) */
|
||||
--background-red-1: #f8d2ce; /* lch(87.5, 15, 30) */
|
||||
--background-orange-1: #f1d6c3; /* lch(87.5, 15, 60) */
|
||||
--background-yellow-1: #e4dbbf; /* lch(87.5, 15, 90) */
|
||||
--background-lime-1: #d5dfc2; /* lch(87.5, 15, 120) */
|
||||
--background-green-1: #c6e3cc; /* lch(87.5, 15, 150) */
|
||||
--background-turquoise-1: #bce4db; /* lch(87.5, 15, 180) */
|
||||
--background-teal-1: #bae3e9; /* lch(87.5, 15, 210) */
|
||||
--background-cerulean-1: #c2e0f4; /* lch(87.5, 15, 240) */
|
||||
--background-blue-1: #d0dcf8; /* lch(87.5, 15, 270) */
|
||||
--background-purple-1: #e1d7f4; /* lch(87.5, 15, 300) */
|
||||
--background-magenta-1: #efd3ea; /* lch(87.5, 15, 330) */
|
||||
|
||||
--background-accent: var(--background-accent-blue);
|
||||
--background-pink-2: #fbb1c8; /* lch(80, 30, 0) */
|
||||
--background-red-2: #fbb4ac; /* lch(80, 30, 30) */
|
||||
--background-orange-2: #eebc97; /* lch(80, 30, 60) */
|
||||
--background-yellow-2: #d6c58e; /* lch(80, 30, 90) */
|
||||
--background-lime-2: #b8ce95; /* lch(80, 30, 120) */
|
||||
--background-green-2: #9ad4a9; /* lch(80, 30, 150) */
|
||||
--background-turquoise-2: #81d6c5; /* lch(80, 30, 180) */
|
||||
--background-teal-2: #7ad5e1; /* lch(80, 30, 210) */
|
||||
--background-cerulean-2: #8cd0f6; /* lch(80, 30, 240) */
|
||||
--background-blue-2: #adc8fe; /* lch(80, 30, 270) */
|
||||
--background-purple-2: #d0bef7; /* lch(80, 30, 300) */
|
||||
--background-magenta-2: #ecb5e3; /* lch(80, 30, 330) */
|
||||
|
||||
--background-accent-1: var(--background-blue-1);
|
||||
--background-accent-2: var(--background-blue-2);
|
||||
|
||||
--text-0: #262626; /* lch(15, 0, X) */
|
||||
--text-1: #262626; /* lch(15, 0, X) */
|
||||
--text-2: #262626; /* lch(15, 0, X) */
|
||||
--text-3: #171717; /* lch(72.5, 0, X) */
|
||||
|
||||
--text-gray-0: #474747; /* lch(30, 0, X) */
|
||||
--text-gray-1: #5e5e5e; /* lch(40, 0, X) */
|
||||
|
||||
--link-0: #2061a8; /* lch(40, 45, 270) */
|
||||
|
||||
--text-0: #171717;
|
||||
--text-1: #262626;
|
||||
--link-color: #2061a8; /* lch(40, 45, 270) */
|
||||
--figure-border: #367acd; /* lch(50, 50, 270) */
|
||||
|
||||
--pagination-active-hover-text: white;
|
||||
@ -111,6 +144,7 @@
|
||||
padding-bottom: 24px;
|
||||
border-radius: 12px;
|
||||
background-color: var(--background-1);
|
||||
color: var(--text-1);
|
||||
}
|
||||
|
||||
.post-series-position {
|
||||
@ -182,6 +216,7 @@
|
||||
|
||||
.taxonomy-list li {
|
||||
background-color: var(--background-1);
|
||||
color: var(--text-1);
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
@ -215,6 +250,7 @@
|
||||
flex-flow: row wrap;
|
||||
list-style: none;
|
||||
background-color: var(--background-0);
|
||||
color: var(--text-0);
|
||||
padding: 8px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
@ -235,12 +271,14 @@
|
||||
|
||||
.section {
|
||||
background-color: var(--background-1);
|
||||
color: var(--text-1);
|
||||
border-radius: 12px;
|
||||
padding: 1px 25px;
|
||||
}
|
||||
|
||||
.section:hover {
|
||||
background-color: var(--background-2);
|
||||
color: var(--text-2);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
@ -285,6 +323,7 @@ h1.header {
|
||||
/* Content formatting */
|
||||
.series-box {
|
||||
background-color: var(--background-1);
|
||||
color: var(--text-1);
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
margin: 15px 0;
|
||||
@ -292,6 +331,7 @@ h1.header {
|
||||
|
||||
.table-of-contents {
|
||||
background-color: var(--background-1);
|
||||
color: var(--text-1);
|
||||
padding: 8px 20px;
|
||||
border-radius: 8px;
|
||||
margin: 10px 0;
|
||||
@ -364,6 +404,7 @@ h1.header {
|
||||
/* Social media share buttons */
|
||||
.share-buttons {
|
||||
background: var(--background-1);
|
||||
color: var(--text-1);
|
||||
margin: 25px 0;
|
||||
padding: 8px 0;
|
||||
border-radius: 8px;
|
||||
@ -375,6 +416,7 @@ h1.header {
|
||||
.share-buttons button,
|
||||
.share-buttons a {
|
||||
background-color: var(--background-2);
|
||||
color: var(--text-2);
|
||||
padding: 4px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
@ -400,6 +442,7 @@ h1.header {
|
||||
/* See also formating */
|
||||
.see-also {
|
||||
background-color: var(--background-1);
|
||||
color: var(--text-1);
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
margin: 10px 0;
|
||||
@ -417,6 +460,7 @@ h1.header {
|
||||
bottom: 25px;
|
||||
right: 25px;
|
||||
background-color: var(--background-1);
|
||||
color: var(--text-1);
|
||||
border-radius: 100%;
|
||||
padding: 12px;
|
||||
display: none;
|
||||
@ -430,6 +474,7 @@ h1.header {
|
||||
flex-wrap: nowrap;
|
||||
flex-direction: row;
|
||||
background-color: var(--background-1);
|
||||
color: var(--text-1);
|
||||
border-radius: 8px;
|
||||
margin-top: 5px;
|
||||
padding: 4px;
|
||||
@ -451,10 +496,15 @@ h1.header {
|
||||
.navbar-item:hover,
|
||||
.langpicker summary:hover,
|
||||
.langpicker[open] summary {
|
||||
background-color: var(--background-highlight);
|
||||
background-color: var(--background-3);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.langpicker summary:hover,
|
||||
.langpicker[open] summary {
|
||||
color: var(--text-3);
|
||||
}
|
||||
|
||||
.topbar .active {
|
||||
font-weight: bold;
|
||||
}
|
||||
@ -476,6 +526,7 @@ h1.header {
|
||||
margin-top: 8px;
|
||||
right: 0;
|
||||
background-color: var(--background-1);
|
||||
color: var(--text-1);
|
||||
border: 2px solid var(--background-2);
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
@ -506,7 +557,7 @@ html {
|
||||
|
||||
body {
|
||||
background-color: var(--background-0);
|
||||
color: var(--text-1);
|
||||
color: var(--text-0);
|
||||
font-family: "Open Sans", "Noto Sans", sans-serif;
|
||||
margin: 20px;
|
||||
max-width: 720px;
|
||||
@ -556,7 +607,7 @@ figcaption {
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
color: var(--link-0);
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
@ -570,7 +621,7 @@ blockquote {
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 1px solid var(--background-highlight);
|
||||
border: 1px solid var(--background-3);
|
||||
}
|
||||
|
||||
table.markdown {
|
||||
@ -580,6 +631,7 @@ table.markdown {
|
||||
|
||||
.markdown thead {
|
||||
background-color: var(--background-2);
|
||||
color: var(--text-2);
|
||||
}
|
||||
|
||||
.markdown th,
|
||||
@ -589,9 +641,11 @@ table.markdown {
|
||||
|
||||
.markdown tbody tr:nth-child(odd) {
|
||||
background-color: var(--background-0);
|
||||
color: var(--text-0);
|
||||
}
|
||||
.markdown tbody tr:nth-child(even) {
|
||||
background-color: var(--background-1);
|
||||
color: var(--text-1);
|
||||
}
|
||||
|
||||
* {
|
||||
@ -612,6 +666,7 @@ table.markdown {
|
||||
|
||||
:not(pre) > code {
|
||||
background-color: var(--background-2);
|
||||
color: var(--text-2);
|
||||
padding: 2px 4px;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
@ -631,6 +686,7 @@ aside {
|
||||
padding: 8px 16px;
|
||||
margin: 16px 0;
|
||||
border-radius: 8px;
|
||||
color: var(--text-1);
|
||||
}
|
||||
|
||||
.aside-title {
|
||||
@ -647,19 +703,19 @@ aside {
|
||||
}
|
||||
|
||||
aside.note {
|
||||
background-color: var(--background-accent-blue);
|
||||
background-color: var(--background-blue-1);
|
||||
}
|
||||
aside.info {
|
||||
background-color: var(--background-accent-green);
|
||||
background-color: var(--background-green-1);
|
||||
}
|
||||
aside.tip {
|
||||
background-color: var(--background-accent-teal);
|
||||
background-color: var(--background-teal-1);
|
||||
}
|
||||
aside.warning {
|
||||
background-color: var(--background-accent-yellow);
|
||||
background-color: var(--background-yellow-1);
|
||||
}
|
||||
aside.example {
|
||||
background-color: var(--background-accent-purple);
|
||||
background-color: var(--background-purple-1);
|
||||
}
|
||||
aside.quote {
|
||||
background-color: var(--background-1);
|
||||
@ -716,7 +772,7 @@ h1 svg.icon {
|
||||
}
|
||||
|
||||
:not(li.disabled) > .page-link:hover {
|
||||
background-color: var(--background-highlight);
|
||||
background-color: var(--background-3);
|
||||
}
|
||||
|
||||
li.disabled {
|
||||
@ -763,11 +819,13 @@ li.disabled > .page-link:hover {
|
||||
flex-direction: column;
|
||||
color: inherit;
|
||||
background-color: var(--background-1);
|
||||
color: var(--text-1);
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.prevnext > a:hover {
|
||||
background-color: var(--background-2);
|
||||
color: var(--text-2);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@ -799,11 +857,6 @@ li.disabled > .page-link:hover {
|
||||
/* Light mode */
|
||||
@media print,
|
||||
(prefers-color-scheme: light) {
|
||||
/* Basic elements */
|
||||
.section:hover {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
li.disabled {
|
||||
opacity: .25;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user