Another super feature: auto dark mode!
This commit is contained in:
Cotes Chung
parent
1c2be0c243
commit
2386fe5bd8
13 changed files with 325 additions and 122 deletions
|
|
@ -5,7 +5,7 @@
|
|||
© 2017-2019 Cotes Chung
|
||||
MIT License
|
||||
-->
|
||||
<div id="topbar-wrapper" class="row justify-content-center bg-white topbar-down">
|
||||
<div id="topbar-wrapper" class="row justify-content-center topbar-down">
|
||||
<div id="topbar" class="col-11 d-flex h-100 align-items-center justify-content-between">
|
||||
<span id="breadcrumb">
|
||||
{% for item in page.breadcrumb %}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ layout: compress
|
|||
<div id="sidebar" class="d-flex flex-column">
|
||||
{% include sidebar.html %}
|
||||
</div>
|
||||
<div id="main-wrapper" class="bg-white">
|
||||
<div id="main-wrapper">
|
||||
{% include topbar.html %}
|
||||
<div id="main">
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ layout: default
|
|||
# MIT License
|
||||
---
|
||||
|
||||
<div class="row bg-white">
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-11 col-xl-8">
|
||||
<div id="page" class="post pb-5 pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4 pl-xl-3">
|
||||
{% if page.dynamic_title %}
|
||||
|
|
|
|||
53
assets/css/_dark/dark-main.scss
Normal file
53
assets/css/_dark/dark-main.scss
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
/*!
|
||||
* The main dark mode styles
|
||||
* v2.0
|
||||
* https://github.com/cotes2020/jekyll-theme-chirpy
|
||||
* © 2018-2019 Cotes Chung
|
||||
* MIT Licensed
|
||||
*/
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html {
|
||||
/* framework */
|
||||
--main-wrapper-bg: rgb(27, 27, 30);
|
||||
--topbar-wrapper-bg: rgb(39, 40, 43);
|
||||
--search-wrapper-bg: rgb(34, 34, 39);
|
||||
--search-icon: rgb(100, 102, 105);
|
||||
--input-focus-border: rgb(112, 114, 115);
|
||||
--footer-bg: rgb(31, 30, 30);
|
||||
--footer-border: rgb(44, 45, 45);
|
||||
--mask-bg: rgb(68, 69, 70);
|
||||
|
||||
/* sidebar */
|
||||
--nav-cursor: rgb(183, 182, 182);
|
||||
--sidebar-bg: radial-gradient(circle, #231c4c 0%, #1d1f27 100%);
|
||||
|
||||
/* common color */
|
||||
--text-color: rgb(175, 176, 177);
|
||||
--link-color: rgb(138, 180, 248);
|
||||
--main-border: rgb(63, 65, 68);
|
||||
--button-bg: rgb(39, 40, 33);
|
||||
--blockquote-border: rgb(93, 95, 82);
|
||||
--blockquote-text: rgb(96, 125, 139);
|
||||
|
||||
--card-bg: rgb(39, 40, 33);
|
||||
--card-header-bg: rgb(51, 50, 50);
|
||||
--relate-post-title: rgb(164, 175, 181);
|
||||
|
||||
/* posts */
|
||||
--toc-highlight: rgb(116, 178, 243);
|
||||
--tag-bg: rgb(41, 40, 40);
|
||||
--tag-hover: rgb(43, 56, 62);
|
||||
--tb-odd-bg: rgb(50, 51, 41); /* posts' table odd line */
|
||||
|
||||
/* tags */
|
||||
--tag-border: rgb(59, 79, 88);
|
||||
--tag-shadow: rgb(32, 33, 33);
|
||||
|
||||
/* categories */
|
||||
--categories-hover-bg: rgb(73, 75, 76);
|
||||
|
||||
/* archives */
|
||||
--timeline-node-bg: rgb(150, 152, 156);
|
||||
}
|
||||
}
|
||||
85
assets/css/_dark/dark-syntax.scss
Normal file
85
assets/css/_dark/dark-syntax.scss
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
/*!
|
||||
* The syntax dark mode styles
|
||||
* v2.0
|
||||
* https://github.com/cotes2020/jekyll-theme-chirpy
|
||||
* © 2018-2019 Cotes Chung
|
||||
* MIT Licensed
|
||||
*/
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html {
|
||||
/* syntax highlight colors from https://raw.githubusercontent.com/jwarby/pygments-css/master/monokai.css */
|
||||
--highlight-pre-bg: #272822;
|
||||
--highlight-hll-bg: #272822;
|
||||
--highlight-c: #75715e; /* Comment */
|
||||
--highlight-err: #960050; /* Error */
|
||||
--highlight-err-bg: #1e0010; /* Error background */
|
||||
--highlight-k: #66d9ef; /* Keyword */
|
||||
--highlight-l: #ae81ff; /* Literal */
|
||||
--highlight-n: #f8f8f2; /* Name */
|
||||
--highlight-o: #f92672; /* Operator */
|
||||
--highlight-p: #f8f8f2; /* Punctuation */
|
||||
--highlight-cm: #75715e; /* Comment.Multiline */
|
||||
--highlight-cp: #75715e; /* Comment.Preproc */
|
||||
--highlight-c1: #75715e; /* Comment.Single */
|
||||
--highlight-cs: #75715e; /* Comment.Special */
|
||||
--highlight-kc: #66d9ef; /* Keyword.Constant */
|
||||
--highlight-kd: #66d9ef; /* Keyword.Declaration */
|
||||
--highlight-kn: #f92672; /* Keyword.Namespace */
|
||||
--highlight-kp: #66d9ef; /* Keyword.Pseudo */
|
||||
--highlight-kr: #66d9ef; /* Keyword.Reserved */
|
||||
--highlight-kt: #66d9ef; /* Keyword.Type */
|
||||
--highlight-ld: #e6db74; /* Literal.Date */
|
||||
--highlight-m: #ae81ff; /* Literal.Number */
|
||||
--highlight-s: #e6db74; /* Literal.String */
|
||||
--highlight-na: #a6e22e; /* Name.Attribute */
|
||||
--highlight-nb: #f8f8f2; /* Name.Builtin */
|
||||
--highlight-nc: #a6e22e; /* Name.Class */
|
||||
--highlight-no: #66d9ef; /* Name.Constant */
|
||||
--highlight-nd: #a6e22e; /* Name.Decorator */
|
||||
--highlight-ni: #f8f8f2; /* Name.Entity */
|
||||
--highlight-ne: #a6e22e; /* Name.Exception */
|
||||
--highlight-nf: #a6e22e; /* Name.Function */
|
||||
--highlight-nl: #f8f8f2; /* Name.Label */
|
||||
--highlight-nn: #f8f8f2; /* Name.Namespace */
|
||||
--highlight-nx: #a6e22e; /* Name.Other */
|
||||
--highlight-py: #f8f8f2; /* Name.Property */
|
||||
--highlight-nt: #f92672; /* Name.Tag */
|
||||
--highlight-nv: #f8f8f2; /* Name.Variable */
|
||||
--highlight-ow: #f92672; /* Operator.Word */
|
||||
--highlight-w: #f8f8f2; /* Text.Whitespace */
|
||||
--highlight-mf: #ae81ff; /* Literal.Number.Float */
|
||||
--highlight-mh: #ae81ff; /* Literal.Number.Hex */
|
||||
--highlight-mi: #ae81ff; /* Literal.Number.Integer */
|
||||
--highlight-mo: #ae81ff; /* Literal.Number.Oct */
|
||||
--highlight-sb: #e6db74; /* Literal.String.Backtick */
|
||||
--highlight-sc: #e6db74; /* Literal.String.Char */
|
||||
--highlight-sd: #e6db74; /* Literal.String.Doc */
|
||||
--highlight-s2: #e6db74; /* Literal.String.Double */
|
||||
--highlight-se: #ae81ff; /* Literal.String.Escape */
|
||||
--highlight-sh: #e6db74; /* Literal.String.Heredoc */
|
||||
--highlight-si: #e6db74; /* Literal.String.Interpol */
|
||||
--highlight-sx: #e6db74; /* Literal.String.Other */
|
||||
--highlight-sr: #e6db74; /* Literal.String.Regex */
|
||||
--highlight-s1: #e6db74; /* Literal.String.Single */
|
||||
--highlight-ss: #e6db74; /* Literal.String.Symbol */
|
||||
--highlight-bp: #f8f8f2; /* Name.Builtin.Pseudo */
|
||||
--highlight-vc: #f8f8f2; /* Name.Variable.Class */
|
||||
--highlight-vg: #f8f8f2; /* Name.Variable.Global */
|
||||
--highlight-vi: #f8f8f2; /* Name.Variable.Instance */
|
||||
--highlight-il: #ae81ff; /* Literal.Number.Integer.Long */
|
||||
|
||||
// --highlight-gh: none; /* Generic Heading & Diff Header */
|
||||
--highlight-gu: #75715e; /* Generic.Subheading & Diff Unified/Comment? */
|
||||
--highlight-gd: #f92672; /* Generic.Deleted & Diff Deleted */
|
||||
|
||||
/* My styles */
|
||||
--highlight-lineno: #6c6c6d;
|
||||
--highlight-lineno-border: #3c4042;
|
||||
}
|
||||
|
||||
pre {
|
||||
color: #818c96; /* override Bootstrap */
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
}
|
||||
|
||||
#archives li:nth-child(odd) {
|
||||
background-color: #fff;
|
||||
background-color: var(--main-wrapper-bg, #fff);
|
||||
background-image: linear-gradient(to left, #fff, #fbfbfb, #fbfbfb, #fbfbfb, #fff);
|
||||
}
|
||||
|
||||
|
|
@ -56,8 +56,8 @@
|
|||
top: -26px;
|
||||
left: 63px;
|
||||
border: 3px solid;
|
||||
background-color: #ffffff;
|
||||
border-color: #c2c6cc;
|
||||
background-color: var(--main-border, #ffffff);
|
||||
border-color: var(--timeline-node-bg, #c2c6cc);
|
||||
box-shadow: 0 0 2px 0 #c2c6cc;
|
||||
z-index: 1;
|
||||
}
|
||||
|
|
@ -103,7 +103,7 @@
|
|||
float: left;
|
||||
top: 1.35rem;
|
||||
left: 69px;
|
||||
background-color: #c2c6cc;
|
||||
background-color: var(--timeline-node-bg, #c2c6cc);
|
||||
box-shadow: 0 0 3px 0 #c2c6cc;
|
||||
z-index: 1;
|
||||
}
|
||||
|
|
@ -117,7 +117,7 @@
|
|||
display: inline-block;
|
||||
float: left;
|
||||
position: relative;
|
||||
background-color: rgba(0, 0, 0, 0.075);
|
||||
background-color: var(--main-border, rgba(0, 0, 0, 0.075));
|
||||
}
|
||||
|
||||
#archives ul>li::after {
|
||||
|
|
@ -139,7 +139,6 @@
|
|||
}
|
||||
|
||||
@media all and (max-width: 576px) {
|
||||
|
||||
#archives {
|
||||
margin-top: -1rem;
|
||||
}
|
||||
|
|
@ -148,3 +147,10 @@
|
|||
letter-spacing: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
#archives li:nth-child(odd) {
|
||||
background-image: linear-gradient(to left,
|
||||
rgb(26, 26, 30), rgb(39, 39, 45), rgb(39, 39, 45), rgb(39, 39, 45), rgb(26, 26, 30));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@
|
|||
|
||||
@media (hover: hover) { // only works on desktop
|
||||
.category-trigger:hover {
|
||||
background-color: #e9ecef;
|
||||
background-color: var(--categories-hover-bg, #e9ecef);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -64,3 +64,21 @@
|
|||
-webkit-transform: rotate(-90deg); /* Safari 3-8 */
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.categories.card,
|
||||
.list-group-item {
|
||||
background-color: var(--card-bg);
|
||||
}
|
||||
|
||||
.categories .card-header {
|
||||
background-color: var(--card-header-bg);
|
||||
}
|
||||
|
||||
.categories .list-group-item {
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
padding-left: 2rem;
|
||||
border-color: var(--main-border);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@
|
|||
|
||||
.dash {
|
||||
margin: 0 .5rem .6rem .5rem;
|
||||
border-bottom: 2px dotted silver;
|
||||
border-bottom: 2px dotted var(--main-border, silver);
|
||||
}
|
||||
|
||||
@media all and (max-width: 576px) {
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
.post-preview .post-content {
|
||||
margin-top: .6rem;
|
||||
margin-bottom: .6rem;
|
||||
color: dimgray;
|
||||
color: var(--text-color, dimgray);
|
||||
}
|
||||
|
||||
/* Make preview shorter in Home page*/
|
||||
|
|
@ -67,19 +67,21 @@
|
|||
-webkit-box-align: center;
|
||||
align-items: center;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #f1f1f1;
|
||||
border: 1px solid var(--main-border, #f1f1f1);
|
||||
font-family: 'Lato', sans-serif;
|
||||
background-color: var(--button-bg);
|
||||
}
|
||||
|
||||
.page-item.active .page-link {
|
||||
background-color: #2a408e;
|
||||
box-shadow: 0 0 8px 0 #4b92d2 !important;
|
||||
color: #f8f8f8;
|
||||
box-shadow: 0 0 8px 0 var(--main-wrapper-bg, #4b92d2) !important;
|
||||
color: var(--text-color, #f8f8f8);
|
||||
}
|
||||
|
||||
.page-item.disabled .page-link {
|
||||
color: rgba(108, 117, 125, 0.57);
|
||||
border-color: #f1f1f1;
|
||||
border-color: var(--main-border, #f1f1f1);
|
||||
background-color: var(--button-bg);
|
||||
}
|
||||
|
||||
.page-item.disabled {
|
||||
|
|
@ -130,3 +132,10 @@
|
|||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.page-item.active .page-link {
|
||||
background-color: #203a96;
|
||||
border-color: #0252a9;
|
||||
}
|
||||
}
|
||||
|
|
@ -9,6 +9,7 @@
|
|||
*/
|
||||
|
||||
@import "_fonts";
|
||||
@import "_dark/dark-main";
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
|
|
@ -23,7 +24,7 @@ html {
|
|||
body {
|
||||
line-height: 1.75rem;
|
||||
background: #fafafa;
|
||||
color: #212529;
|
||||
color: var(--text-color, #212529);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-family: 'Source Sans Pro', 'Microsoft Yahei', sans-serif;
|
||||
}
|
||||
|
|
@ -43,7 +44,8 @@ body {
|
|||
-webkit-transition: transform 0.4s ease;
|
||||
transition: transform 0.4s ease;
|
||||
background: rgb(42, 30, 107);
|
||||
background: radial-gradient(circle, rgba(42, 30, 107, 1) 0%, rgba(35, 37, 46, 1) 100%);
|
||||
background: var(--sidebar-bg,
|
||||
radial-gradient(circle, rgba(42, 30, 107, 1) 0%, rgba(35, 37, 46, 1) 100%));
|
||||
}
|
||||
|
||||
#sidebar a {
|
||||
|
|
@ -122,7 +124,7 @@ body {
|
|||
position: relative;
|
||||
width: 3px;
|
||||
height: 26px;
|
||||
background: #fcfcfc;;
|
||||
background-color: var(--nav-cursor, #fcfcfc);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
|
@ -245,6 +247,7 @@ body {
|
|||
z-index: 50;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
|
||||
box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.05);
|
||||
background-color: var(--topbar-wrapper-bg, white);
|
||||
}
|
||||
|
||||
#topbar i { // icons
|
||||
|
|
@ -271,8 +274,8 @@ body {
|
|||
display: flex;
|
||||
width: 95%;
|
||||
border-radius: 1rem;
|
||||
border: 1px solid #fff;
|
||||
background: #f5f5f5;
|
||||
border: 1px solid var(--search-wrapper-bg, #fff);
|
||||
background: var(--search-wrapper-bg, #f5f5f5);
|
||||
padding: 0 .5rem;
|
||||
transition: background-color .15s ease-in-out,border-color .15s ease-in-out;
|
||||
}
|
||||
|
|
@ -280,7 +283,7 @@ body {
|
|||
#search-wrapper i {
|
||||
z-index: 2;
|
||||
font-size: .9rem;
|
||||
color: #c2c6cc;
|
||||
color: var(--search-icon, #c2c6cc);
|
||||
}
|
||||
|
||||
#search-wrapper .fa-times-circle { /* button 'clean up' */
|
||||
|
|
@ -298,6 +301,7 @@ body {
|
|||
border: 0;
|
||||
border-radius: 0;
|
||||
padding: .18rem .3rem;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
#search-input:focus {
|
||||
|
|
@ -318,7 +322,7 @@ body {
|
|||
display: inline-block;
|
||||
line-height: 1rem;
|
||||
font-size: 1rem;
|
||||
background: #f8f9fa;
|
||||
background: var(--tag-bg, #f8f9fa);
|
||||
border: none;
|
||||
padding: .5rem;
|
||||
margin: 0 1rem 1rem 0;
|
||||
|
|
@ -366,7 +370,7 @@ body {
|
|||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
font-family: sans-serif;
|
||||
color: rgb(78, 78, 78);
|
||||
color: var(--text-color, rgb(78, 78, 78));
|
||||
text-align: center;
|
||||
width: 70%;
|
||||
overflow: hidden;
|
||||
|
|
@ -384,7 +388,7 @@ body {
|
|||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: #c1c3c5;
|
||||
background: var(--mask-bg, #c1c3c5);
|
||||
opacity: 0.5;
|
||||
z-index: 1;
|
||||
}
|
||||
|
|
@ -396,6 +400,7 @@ body {
|
|||
/*--- main wrapper ---*/
|
||||
|
||||
#main-wrapper {
|
||||
background-color: var(--main-wrapper-bg, white);//rgb(27, 27, 30);
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
padding-bottom: 6rem; /* equals to or greatter than footer's height */
|
||||
|
|
@ -435,7 +440,8 @@ footer {
|
|||
padding: 1rem;
|
||||
font-size: 0.8rem;
|
||||
color: #7a7b7d;
|
||||
background: #f3f3f3;
|
||||
background-color: var(--footer-bg, #f3f3f3);
|
||||
border-top: 1px solid var(--footer-border, #f3f3f3);
|
||||
}
|
||||
|
||||
footer>div.d-flex {
|
||||
|
|
@ -512,7 +518,7 @@ footer .license a {
|
|||
line-height: 1rem;
|
||||
font-size: 0.85rem;
|
||||
background: none;
|
||||
border: 1px solid #e9ecef;
|
||||
border: 1px solid var(--main-border, #e9ecef);
|
||||
border-radius: .8rem;
|
||||
padding: .3rem .5rem;
|
||||
margin: 0 .35rem .5rem 0;
|
||||
|
|
@ -546,12 +552,12 @@ footer .license a {
|
|||
z-index: 1;
|
||||
cursor: pointer;
|
||||
position: fixed;
|
||||
background: #fff;
|
||||
background: var(--button-bg, #fff);
|
||||
color: #686868;
|
||||
height: 2.6em;
|
||||
width: 2.7em;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #f1f1f1;
|
||||
border: 1px solid var(--main-border, #f1f1f1);
|
||||
transition: 0.2s ease-out;
|
||||
-webkit-transition: 0.2s ease-out;
|
||||
}
|
||||
|
|
@ -591,13 +597,13 @@ h2, h3, h4 {
|
|||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 5px solid #eee;
|
||||
border-left: 5px solid var(--blockquote-border, #eee);
|
||||
padding-left: 1rem;
|
||||
color: #9a9a9a;
|
||||
color: var(--blockquote-text, #9a9a9a);
|
||||
}
|
||||
|
||||
.post-content blockquote a {
|
||||
color: #2a408e;
|
||||
color: var(--link-color, #2a408e);
|
||||
}
|
||||
|
||||
kbd {
|
||||
|
|
@ -655,8 +661,8 @@ a.reversefootnote {
|
|||
}
|
||||
|
||||
.post-content a {
|
||||
color: #2a408e;
|
||||
border-bottom: 1px dotted #c2c6cc;
|
||||
color: var(--link-color, #2a408e);
|
||||
border-bottom: 1px dotted var(--link-color, #c2c6cc);
|
||||
}
|
||||
|
||||
p>a, span>a,
|
||||
|
|
@ -667,7 +673,7 @@ p>a, span>a,
|
|||
#page-tag a,
|
||||
#archives a,
|
||||
#search-results a {
|
||||
color: #2a408e;
|
||||
color: var(--link-color, #2a408e);
|
||||
}
|
||||
|
||||
.categories a,
|
||||
|
|
@ -717,11 +723,11 @@ table thead {
|
|||
}
|
||||
|
||||
table thead+tbody tr {
|
||||
border-bottom: solid 1px rgba(210, 215, 217, 0.75);
|
||||
border-bottom: solid 1px var(--tb-odd-bg, rgba(210, 215, 217, 0.75));
|
||||
}
|
||||
|
||||
table thead+tbody tr:nth-child(2n + 1) {
|
||||
background-color: #f8f9fa;
|
||||
background-color: var(--tb-odd-bg, #f8f9fa);
|
||||
}
|
||||
|
||||
table thead th,
|
||||
|
|
@ -742,8 +748,8 @@ table tbody td {
|
|||
}
|
||||
|
||||
.post-meta a {
|
||||
color: #2a408e;
|
||||
border-bottom: 1px dotted #c2c6cc;
|
||||
color: var(--link-color, #2a408e);
|
||||
border-bottom: 1px dotted var(--link-color, #c2c6cc);
|
||||
}
|
||||
|
||||
.post-meta a:not(:last-child) {
|
||||
|
|
@ -762,7 +768,7 @@ table tbody td {
|
|||
display: inline-block;
|
||||
min-width: 2rem;
|
||||
text-align: center;
|
||||
background: rgba(0, 0, 0, 0.075);
|
||||
background: var(--tag-bg, rgba(0, 0, 0, 0.075));
|
||||
border-radius: .34rem;
|
||||
padding: 0 .4rem;
|
||||
margin: 0 .1rem;
|
||||
|
|
@ -772,7 +778,7 @@ table tbody td {
|
|||
|
||||
.tag:hover,
|
||||
.post-tag:hover {
|
||||
background: rgb(222, 226, 230);
|
||||
background: var(--tag-hover, rgb(222, 226, 230));
|
||||
transition: background 0.35s ease-in-out;
|
||||
}
|
||||
|
||||
|
|
@ -815,7 +821,7 @@ table tbody td {
|
|||
}
|
||||
|
||||
.btn-box-shadow {
|
||||
box-shadow: 0 0 8px 0 #eaeaea!important;
|
||||
box-shadow: 0 0 8px 0 var(--button-bg, #eaeaea) !important;
|
||||
}
|
||||
|
||||
.topbar-up {
|
||||
|
|
@ -843,7 +849,7 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
|||
|
||||
.input-focus {
|
||||
box-shadow: none;
|
||||
border-color: #e9ecef !important;
|
||||
border-color: var(--input-focus-border, #e9ecef) !important;
|
||||
background: center !important;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
|
||||
.post-tail {
|
||||
margin-top: 3.5rem;
|
||||
border-bottom: 1px double #e9ecef;
|
||||
border-bottom: 1px double var(--main-border, #e9ecef);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
|
|
@ -36,8 +36,8 @@
|
|||
.post-navigation .btn.disabled {
|
||||
width: 50%;
|
||||
position: relative;
|
||||
color: #2a408e;
|
||||
border-color: #e9ecef;
|
||||
color: var(--link-color, #2a408e);
|
||||
border-color: var(--main-border, #e9ecef);
|
||||
}
|
||||
|
||||
.post-navigation .btn:hover {
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
cursor: not-allowed;
|
||||
background: none;
|
||||
color: gray;
|
||||
border-color: #e9ecef;
|
||||
border-color: var(--main-border, #e9ecef);
|
||||
}
|
||||
|
||||
.post-navigation a.btn.btn-outline-primary.disabled:focus {
|
||||
|
|
@ -138,8 +138,9 @@
|
|||
}
|
||||
|
||||
#related-posts .card {
|
||||
border: 1px solid #f1f1f1;
|
||||
box-shadow: 0 0 5px 0 rgba(234, 234, 234, 0.7686274509803922);
|
||||
border: 1px solid var(--main-wrapper-bg, #f1f1f1);
|
||||
background-color: var(--card-bg);
|
||||
box-shadow: 0 0 5px 0 var(--main-wrapper-bg, rgba(234, 234, 234, 0.7686274509803922));
|
||||
-webkit-transition: all .3s ease-in-out;;
|
||||
-moz-transition: all .3s ease-in-out;;
|
||||
transition: all .3s ease-in-out;
|
||||
|
|
@ -152,7 +153,7 @@
|
|||
}
|
||||
|
||||
#related-posts .card h3 {
|
||||
color: #353a3d;
|
||||
color: var(--relate-post-title, #353a3d);
|
||||
}
|
||||
|
||||
#related-posts .timeago {
|
||||
|
|
@ -194,7 +195,6 @@
|
|||
min-height: 2rem;
|
||||
}
|
||||
|
||||
|
||||
@media all and (max-width: 768px) {
|
||||
.post img {
|
||||
max-width: calc(100% + 1rem);
|
||||
|
|
@ -266,3 +266,15 @@
|
|||
margin-right: calc((100% - 1150px) / 8 + 300px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
nav[data-toggle=toc] .nav-link.active,
|
||||
nav[data-toggle=toc] .nav-link.active:focus,
|
||||
nav[data-toggle=toc] .nav-link.active:hover,
|
||||
nav[data-toggle=toc] .nav>li>a:focus,
|
||||
nav[data-toggle=toc] .nav>li>a:hover {
|
||||
/* Override BS */
|
||||
color: var(--toc-highlight)!important;
|
||||
border-left-color: var(--toc-highlight)!important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,68 +8,71 @@
|
|||
* MIT Licensed
|
||||
*/
|
||||
|
||||
/* https://raw.githubusercontent.com/jwarby/pygments-css/master/github.css */
|
||||
.highlight .hll { background-color: #ffffcc }
|
||||
.highlight .c { color: #999988; font-style: italic } /* Comment */
|
||||
.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
|
||||
.highlight .k { color: #000000; font-weight: bold } /* Keyword */
|
||||
.highlight .o { color: #000000; font-weight: bold } /* Operator */
|
||||
.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
|
||||
.highlight .cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */
|
||||
.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
|
||||
.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
|
||||
.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
|
||||
.highlight .ge { color: #000000; font-style: italic } /* Generic.Emph */
|
||||
.highlight .gr { color: #aa0000 } /* Generic.Error */
|
||||
.highlight .gh { color: #999999 } /* Generic.Heading */
|
||||
.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
|
||||
.highlight .go { color: #888888 } /* Generic.Output */
|
||||
.highlight .gp { color: #555555 } /* Generic.Prompt */
|
||||
@import "_dark/dark-syntax";
|
||||
|
||||
/* the fallback color from https://raw.githubusercontent.com/jwarby/pygments-css/master/github.css */
|
||||
.highlight pre { background-color: var(--highlight-pre-bg) }
|
||||
.highlight .hll { background-color: var(--highlight-hll-bg, #ffffcc) }
|
||||
.highlight .c { color: var(--highlight-c, #999988); font-style: italic } /* Comment */
|
||||
.highlight .err { color: var(--highlight-err, #a61717); background-color: var(--highlight-err-bg, #e3d2d2) } /* Error */
|
||||
.highlight .k { color: var(--highlight-k, #000000); font-weight: bold } /* Keyword */
|
||||
.highlight .o { color: var(--highlight-o, #000000); font-weight: bold } /* Operator */
|
||||
.highlight .cm { color: var(--highlight-cm, #999988); font-style: italic } /* Comment.Multiline */
|
||||
.highlight .cp { color: var(--highlight-cp, #999999); font-weight: bold; font-style: italic } /* Comment.Preproc */
|
||||
.highlight .c1 { color: var(--highlight-c1, #999988); font-style: italic } /* Comment.Single */
|
||||
.highlight .cs { color: var(--highlight-cs, #999999); font-weight: bold; font-style: italic } /* Comment.Special */
|
||||
.highlight .gd { color: var(--highlight-gd, #000000); background-color: var(#ffdddd) } /* Generic.Deleted */
|
||||
.highlight .ge { color: var(--highlight-ge, #000000); font-style: italic } /* Generic.Emph */
|
||||
.highlight .gr { color: var(--highlight-gr, #aa0000) } /* Generic.Error */
|
||||
.highlight .gh { color: var(--highlight-gh, #999999) } /* Generic.Heading */
|
||||
.highlight .gi { color: var(--highlight-gi, #000000); background-color: #ddffdd } /* Generic.Inserted */
|
||||
.highlight .go { color: var(#888888) } /* Generic.Output */
|
||||
.highlight .gp { color: var(#555555) } /* Generic.Prompt */
|
||||
.highlight .gs { font-weight: bold } /* Generic.Strong */
|
||||
.highlight .gu { color: #aaaaaa } /* Generic.Subheading */
|
||||
.highlight .gt { color: #aa0000 } /* Generic.Traceback */
|
||||
.highlight .kc { color: #000000; font-weight: bold } /* Keyword.Constant */
|
||||
.highlight .kd { color: #000000; font-weight: bold } /* Keyword.Declaration */
|
||||
.highlight .kn { color: #000000; font-weight: bold } /* Keyword.Namespace */
|
||||
.highlight .kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */
|
||||
.highlight .kr { color: #000000; font-weight: bold } /* Keyword.Reserved */
|
||||
.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
|
||||
.highlight .m { color: #009999 } /* Literal.Number */
|
||||
.highlight .s { color: #d01040 } /* Literal.String */
|
||||
.highlight .na { color: #008080 } /* Name.Attribute */
|
||||
.highlight .nb { color: #0086B3 } /* Name.Builtin */
|
||||
.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
|
||||
.highlight .no { color: #008080 } /* Name.Constant */
|
||||
.highlight .nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */
|
||||
.highlight .ni { color: #800080 } /* Name.Entity */
|
||||
.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */
|
||||
.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */
|
||||
.highlight .nl { color: #990000; font-weight: bold } /* Name.Label */
|
||||
.highlight .nn { color: #555555 } /* Name.Namespace */
|
||||
.highlight .nt { color: #000080 } /* Name.Tag */
|
||||
.highlight .nv { color: #008080 } /* Name.Variable */
|
||||
.highlight .ow { color: #000000; font-weight: bold } /* Operator.Word */
|
||||
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
|
||||
.highlight .mf { color: #009999 } /* Literal.Number.Float */
|
||||
.highlight .mh { color: #009999 } /* Literal.Number.Hex */
|
||||
.highlight .mi { color: #009999 } /* Literal.Number.Integer */
|
||||
.highlight .mo { color: #009999 } /* Literal.Number.Oct */
|
||||
.highlight .sb { color: #d01040 } /* Literal.String.Backtick */
|
||||
.highlight .sc { color: #d01040 } /* Literal.String.Char */
|
||||
.highlight .sd { color: #d01040 } /* Literal.String.Doc */
|
||||
.highlight .s2 { color: #d01040 } /* Literal.String.Double */
|
||||
.highlight .se { color: #d01040 } /* Literal.String.Escape */
|
||||
.highlight .sh { color: #d01040 } /* Literal.String.Heredoc */
|
||||
.highlight .si { color: #d01040 } /* Literal.String.Interpol */
|
||||
.highlight .sx { color: #d01040 } /* Literal.String.Other */
|
||||
.highlight .sr { color: #009926 } /* Literal.String.Regex */
|
||||
.highlight .s1 { color: #d01040 } /* Literal.String.Single */
|
||||
.highlight .ss { color: #990073 } /* Literal.String.Symbol */
|
||||
.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
|
||||
.highlight .vc { color: #008080 } /* Name.Variable.Class */
|
||||
.highlight .vg { color: #008080 } /* Name.Variable.Global */
|
||||
.highlight .vi { color: #008080 } /* Name.Variable.Instance */
|
||||
.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
|
||||
.highlight .gu { color: var(--highlight-gu, #aaaaaa) } /* Generic.Subheading */
|
||||
.highlight .gt { color: var(--highlight-gt, #aa0000) } /* Generic.Traceback */
|
||||
.highlight .kc { color: var(--highlight-kc, #000000); font-weight: bold } /* Keyword.Constant */
|
||||
.highlight .kd { color: var(--highlight-kd, #000000); font-weight: bold } /* Keyword.Declaration */
|
||||
.highlight .kn { color: var(--highlight-kn, #000000); font-weight: bold } /* Keyword.Namespace */
|
||||
.highlight .kp { color: var(--highlight-kp, #000000); font-weight: bold } /* Keyword.Pseudo */
|
||||
.highlight .kr { color: var(--highlight-kr, #000000); font-weight: bold } /* Keyword.Reserved */
|
||||
.highlight .kt { color: var(--highlight-kt, #445588); font-weight: bold } /* Keyword.Type */
|
||||
.highlight .m { color: var(--highlight-m, #009999) } /* Literal.Number */
|
||||
.highlight .s { color: var(--highlight-s, #d01040) } /* Literal.String */
|
||||
.highlight .na { color: var(--highlight-na, #008080) } /* Name.Attribute */
|
||||
.highlight .nb { color: var(--highlight-nb, #0086B3) } /* Name.Builtin */
|
||||
.highlight .nc { color: var(--highlight-nc, #445588); font-weight: bold } /* Name.Class */
|
||||
.highlight .no { color: var(--highlight-no, #008080) } /* Name.Constant */
|
||||
.highlight .nd { color: var(--highlight-nd, #3c5d5d); font-weight: bold } /* Name.Decorator */
|
||||
.highlight .ni { color: var(--highlight-ni, #800080) } /* Name.Entity */
|
||||
.highlight .ne { color: var(--highlight-ne, #990000); font-weight: bold } /* Name.Exception */
|
||||
.highlight .nf { color: var(--highlight-nf, #990000); font-weight: bold } /* Name.Function */
|
||||
.highlight .nl { color: var(--highlight-nl, #990000); font-weight: bold } /* Name.Label */
|
||||
.highlight .nn { color: var(--highlight-nn, #555555) } /* Name.Namespace */
|
||||
.highlight .nt { color: var(--highlight-nt, #000080) } /* Name.Tag */
|
||||
.highlight .nv { color: var(--highlight-nv, #008080) } /* Name.Variable */
|
||||
.highlight .ow { color: var(--highlight-ow, #000000); font-weight: bold } /* Operator.Word */
|
||||
.highlight .w { color: var(--highlight-w, #bbbbbb) } /* Text.Whitespace */
|
||||
.highlight .mf { color: var(--highlight-mf, #009999) } /* Literal.Number.Float */
|
||||
.highlight .mh { color: var(--highlight-mh, #009999) } /* Literal.Number.Hex */
|
||||
.highlight .mi { color: var(--highlight-mi, #009999) } /* Literal.Number.Integer */
|
||||
.highlight .mo { color: var(--highlight-mo, #009999) } /* Literal.Number.Oct */
|
||||
.highlight .sb { color: var(--highlight-sb, #d01040) } /* Literal.String.Backtick */
|
||||
.highlight .sc { color: var(--highlight-sc, #d01040) } /* Literal.String.Char */
|
||||
.highlight .sd { color: var(--highlight-sd, #d01040) } /* Literal.String.Doc */
|
||||
.highlight .s2 { color: var(--highlight-s2, #d01040) } /* Literal.String.Double */
|
||||
.highlight .se { color: var(--highlight-se, #d01040) } /* Literal.String.Escape */
|
||||
.highlight .sh { color: var(--highlight-sh, #d01040) } /* Literal.String.Heredoc */
|
||||
.highlight .si { color: var(--highlight-si, #d01040) } /* Literal.String.Interpol */
|
||||
.highlight .sx { color: var(--highlight-sx, #d01040) } /* Literal.String.Other */
|
||||
.highlight .sr { color: var(--highlight-sr, #009926) } /* Literal.String.Regex */
|
||||
.highlight .s1 { color: var(--highlight-s1, #d01040) } /* Literal.String.Single */
|
||||
.highlight .ss { color: var(--highlight-ss, #990073) } /* Literal.String.Symbol */
|
||||
.highlight .bp { color: var(--highlight-bp, #999999) } /* Name.Builtin.Pseudo */
|
||||
.highlight .vc { color: var(--highlight-vc, #008080) } /* Name.Variable.Class */
|
||||
.highlight .vg { color: var(--highlight-vg, #008080) } /* Name.Variable.Global */
|
||||
.highlight .vi { color: var(--highlight-vi, #008080) } /* Name.Variable.Instance */
|
||||
.highlight .il { color: var(--highlight-il, #009999) } /* Literal.Number.Integer.Long */
|
||||
|
||||
|
||||
/*-- Codes Snippet --*/
|
||||
|
|
@ -77,14 +80,11 @@
|
|||
div.highlight,
|
||||
figure.highlight,
|
||||
.highlighter-rouge {
|
||||
background: #f7f7f7;
|
||||
background: var(--highlight-pre-bg, #f7f7f7)
|
||||
}
|
||||
|
||||
.highlight {
|
||||
overflow: auto;
|
||||
-moz-box-shadow: inset 0 0 2px #c2c6cc;
|
||||
-webkit-box-shadow: inset 0 0 2px #c2c6cc;
|
||||
box-shadow: inset 0 0 2px #c2c6cc;
|
||||
}
|
||||
|
||||
.highlight .lineno {
|
||||
|
|
@ -92,8 +92,8 @@ figure.highlight,
|
|||
padding: 0 .5rem;
|
||||
min-width: 2.2rem;
|
||||
text-align: right;
|
||||
color: #c2c6cc;
|
||||
border-right: 1px solid #e9ecef;
|
||||
color: var(--highlight-lineno, #c2c6cc);
|
||||
border-right: 1px solid var(--highlight-lineno-border, #e9ecef);
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
|
|
@ -125,7 +125,6 @@ figure.highlight,
|
|||
|
||||
/* Override BS Inline-code style */
|
||||
.highlighter-rouge {
|
||||
color: black;
|
||||
margin-bottom: 1.2em;
|
||||
}
|
||||
|
||||
|
|
@ -140,7 +139,6 @@ code.highlighter-rouge {
|
|||
padding: 2px 4px;
|
||||
margin: 0 .3rem;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
td.rouge-code {
|
||||
|
|
@ -166,3 +164,19 @@ div.language-console.highlighter-rouge td.rouge-code,
|
|||
div.language-terminal.highlighter-rouge td.rouge-code {
|
||||
padding: .8rem 1rem;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
.highlight {
|
||||
-moz-box-shadow: inset 0 0 2px #c2c6cc;
|
||||
-webkit-box-shadow: inset 0 0 2px #c2c6cc;
|
||||
box-shadow: inset 0 0 2px #c2c6cc;
|
||||
}
|
||||
|
||||
.highlighter-rouge {
|
||||
color: black;
|
||||
}
|
||||
|
||||
code.highlighter-rouge {
|
||||
border: 1px solid #e9ecef;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@
|
|||
margin-right: .8rem;
|
||||
line-height: 3rem;
|
||||
letter-spacing: 0;
|
||||
border: 1px solid #dee2e6 !important;
|
||||
box-shadow: 0 0 3px 0 #e9ecef;
|
||||
border: 1px solid var(--tag-border, #dee2e6) !important;
|
||||
box-shadow: 0 0 3px 0 var(--tag-shadow, #e9ecef);
|
||||
}
|
||||
|
||||
.tag span {
|
||||
|
|
|
|||
Loading…
Reference in a new issue