Lighten the light mode color scheme
This commit is contained in:
parent
0bffb276fe
commit
fa0155de6f
7 changed files with 57 additions and 40 deletions
|
@ -650,21 +650,20 @@ $sidebar-display: "sidebar-display";
|
||||||
&:hover {
|
&:hover {
|
||||||
@include no-text-decoration;
|
@include no-text-decoration;
|
||||||
|
|
||||||
color: #fff;
|
color: var(--sidebar-hover-color) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#avatar {
|
#avatar {
|
||||||
&:hover > a {
|
|
||||||
border-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
> a {
|
> a {
|
||||||
|
&:hover {
|
||||||
|
border-color: white;
|
||||||
|
}
|
||||||
display: block;
|
display: block;
|
||||||
width: 6rem;
|
width: 6rem;
|
||||||
height: 6rem;
|
height: 6rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: 2px solid #b6b6b6;
|
border: 2px solid rgba(222, 222, 222, 0.7);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transform: translateZ(0); // fixed the zoom in Safari
|
transform: translateZ(0); // fixed the zoom in Safari
|
||||||
-webkit-transition: border-color 0.35s ease-in-out;
|
-webkit-transition: border-color 0.35s ease-in-out;
|
||||||
|
@ -690,15 +689,18 @@ $sidebar-display: "sidebar-display";
|
||||||
|
|
||||||
.site-title {
|
.site-title {
|
||||||
a {
|
a {
|
||||||
|
@extend %clickable-transition;
|
||||||
|
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
letter-spacing: 0.5px;
|
letter-spacing: 0.5px;
|
||||||
|
color: rgba(134, 133, 133, 99%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-subtitle {
|
.site-subtitle {
|
||||||
font-size: 95%;
|
font-size: 95%;
|
||||||
color: #828282;
|
color: var(--sidebar-muted-color);
|
||||||
line-height: 1.2rem;
|
line-height: 1.2rem;
|
||||||
word-spacing: 1px;
|
word-spacing: 1px;
|
||||||
margin: 0.5rem 1.5rem 0.5rem 1.5rem;
|
margin: 0.5rem 1.5rem 0.5rem 1.5rem;
|
||||||
|
@ -719,16 +721,16 @@ $sidebar-display: "sidebar-display";
|
||||||
text-align: center;
|
text-align: center;
|
||||||
display: table;
|
display: table;
|
||||||
height: $tab-height;
|
height: $tab-height;
|
||||||
&:hover {
|
|
||||||
.nav-link {
|
|
||||||
color: #f8f9facf;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.active {
|
&.active {
|
||||||
.nav-link {
|
.nav-link {
|
||||||
color: #fcfcfc;
|
color: var(--sidebar-active-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:not(.active) > a {
|
||||||
|
@extend %clickable-transition;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
|
@ -803,6 +805,7 @@ $sidebar-display: "sidebar-display";
|
||||||
|
|
||||||
a {
|
a {
|
||||||
@extend %icon;
|
@extend %icon;
|
||||||
|
@extend %clickable-transition;
|
||||||
}
|
}
|
||||||
|
|
||||||
#mode-toggle-wrapper {
|
#mode-toggle-wrapper {
|
||||||
|
@ -812,6 +815,7 @@ $sidebar-display: "sidebar-display";
|
||||||
@include sidebar-links;
|
@include sidebar-links;
|
||||||
|
|
||||||
@extend %cursor-pointer;
|
@extend %cursor-pointer;
|
||||||
|
@extend %clickable-transition;
|
||||||
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 1.05rem;
|
font-size: 1.05rem;
|
||||||
|
@ -823,7 +827,7 @@ $sidebar-display: "sidebar-display";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-border {
|
.icon-border {
|
||||||
background-color: #525354;
|
background-color: var(--sidebar-muted-color);
|
||||||
content: "";
|
content: "";
|
||||||
width: 3px;
|
width: 3px;
|
||||||
height: 3px;
|
height: 3px;
|
||||||
|
@ -834,7 +838,7 @@ $sidebar-display: "sidebar-display";
|
||||||
|
|
||||||
a:hover,
|
a:hover,
|
||||||
#mode-toggle-wrapper i:hover {
|
#mode-toggle-wrapper i:hover {
|
||||||
color: #fff;
|
color: var(--sidebar-hover-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
} // .sidebar-bottom
|
} // .sidebar-bottom
|
||||||
|
@ -875,7 +879,6 @@ $sidebar-display: "sidebar-display";
|
||||||
transition: top 0.2s ease-in-out;
|
transition: top 0.2s ease-in-out;
|
||||||
z-index: 50;
|
z-index: 50;
|
||||||
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
|
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);
|
background-color: var(--topbar-wrapper-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -913,7 +916,7 @@ $sidebar-display: "sidebar-display";
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 85%;
|
width: 85%;
|
||||||
border-radius: 1rem;
|
border-radius: 1rem;
|
||||||
border: 1px solid var(--search-wrapper-bg);
|
border: 1px solid var(--search-wrapper-border-color);
|
||||||
background: var(--search-wrapper-bg);
|
background: var(--search-wrapper-bg);
|
||||||
padding: 0 0.5rem;
|
padding: 0 0.5rem;
|
||||||
|
|
||||||
|
|
|
@ -35,6 +35,10 @@
|
||||||
border-bottom: 1px solid var(--link-underline-color);
|
border-bottom: 1px solid var(--link-underline-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
%clickable-transition {
|
||||||
|
transition: color 0.35s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
%no-bottom-border {
|
%no-bottom-border {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
|
@ -61,9 +65,8 @@
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin sidebar-links($color: rgba(255, 255, 255, 0.5)) {
|
@mixin sidebar-links {
|
||||||
color: $color;
|
color: rgba(117, 117, 117, 83%);
|
||||||
transition: color 0.35s ease-in-out;
|
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -14,7 +14,7 @@ $tab-count: 5 !default; // backward compatible (version <= 4.0.2)
|
||||||
$tab-height: 3.2rem !default;
|
$tab-height: 3.2rem !default;
|
||||||
$tab-cursor-height: 1.6rem !default;
|
$tab-cursor-height: 1.6rem !default;
|
||||||
|
|
||||||
$cursor-width: 3px !default; // the cursor width of the selected tab
|
$cursor-width: 2px !default; // the cursor width of the selected tab
|
||||||
|
|
||||||
/* other framework sizes */
|
/* other framework sizes */
|
||||||
|
|
||||||
|
|
|
@ -30,13 +30,17 @@
|
||||||
--checkbox-checked-color: var(--link-color);
|
--checkbox-checked-color: var(--link-color);
|
||||||
|
|
||||||
/* Sidebar */
|
/* Sidebar */
|
||||||
--nav-cursor-color: rgb(183, 182, 182);
|
|
||||||
--sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%);
|
--sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%);
|
||||||
|
--sidebar-muted-color: #6d6c6b;
|
||||||
|
--sidebar-hover-color: rgb(255 255 255 / 68%);
|
||||||
|
--sidebar-active-color: rgb(255 255 255 / 68%);
|
||||||
|
--nav-cursor-color: rgb(183, 182, 182);
|
||||||
|
|
||||||
/* Topbar */
|
/* Topbar */
|
||||||
--topbar-text-color: var(--text-color);
|
--topbar-text-color: var(--text-color);
|
||||||
--topbar-wrapper-bg: rgb(39, 40, 43);
|
--topbar-wrapper-bg: rgb(39, 40, 43);
|
||||||
--search-wrapper-bg: rgb(34, 34, 39);
|
--search-wrapper-bg: rgb(34, 34, 39);
|
||||||
|
--search-wrapper-border-color: rgb(34, 34, 39);
|
||||||
--search-icon-color: rgb(100, 102, 105);
|
--search-icon-color: rgb(100, 102, 105);
|
||||||
--input-focus-border-color: rgb(112, 114, 115);
|
--input-focus-border-color: rgb(112, 114, 115);
|
||||||
|
|
||||||
|
@ -44,11 +48,8 @@
|
||||||
--post-list-text-color: rgb(175, 176, 177);
|
--post-list-text-color: rgb(175, 176, 177);
|
||||||
--btn-patinator-text-color: var(--text-color);
|
--btn-patinator-text-color: var(--text-color);
|
||||||
--btn-paginator-hover-color: rgb(64, 65, 66);
|
--btn-paginator-hover-color: rgb(64, 65, 66);
|
||||||
--btn-active-bg: rgba(28, 52, 94, 1);
|
|
||||||
--btn-active-border-color: rgb(66, 94, 138);
|
|
||||||
--btn-text-color: var(--text-color);
|
|
||||||
--btn-paginator-border-color: var(--btn-border-color);
|
--btn-paginator-border-color: var(--btn-border-color);
|
||||||
--btn-paginator-shadow: var(--main-wrapper-bg);
|
--btn-text-color: var(--text-color);
|
||||||
--pin-bg: rgb(34 35 37);
|
--pin-bg: rgb(34 35 37);
|
||||||
--pin-color: inherit;
|
--pin-color: inherit;
|
||||||
|
|
||||||
|
@ -98,12 +99,13 @@
|
||||||
nav[data-toggle=toc] .nav-link.active,
|
nav[data-toggle=toc] .nav-link.active,
|
||||||
nav[data-toggle=toc] .nav-link.active:focus,
|
nav[data-toggle=toc] .nav-link.active:focus,
|
||||||
nav[data-toggle=toc] .nav-link.active:hover,
|
nav[data-toggle=toc] .nav-link.active:hover,
|
||||||
nav[data-toggle=toc] .nav > li > a:focus,
|
nav[data-toggle=toc] .nav>li>a:focus,
|
||||||
nav[data-toggle=toc] .nav > li > a:hover {
|
nav[data-toggle=toc] .nav>li>a:hover {
|
||||||
color: var(--toc-highlight) !important;
|
color: var(--toc-highlight) !important;
|
||||||
border-left-color: var(--toc-highlight) !important;
|
border-left-color: var(--toc-highlight) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* categories */
|
/* categories */
|
||||||
.categories.card,
|
.categories.card,
|
||||||
.list-group-item {
|
.list-group-item {
|
||||||
|
|
|
@ -28,13 +28,17 @@
|
||||||
--checkbox-checked-color: #07a8f7;
|
--checkbox-checked-color: #07a8f7;
|
||||||
|
|
||||||
/* Sidebar */
|
/* Sidebar */
|
||||||
--sidebar-bg: radial-gradient(circle, rgba(42, 30, 107, 1) 0%, rgba(35, 37, 46, 1) 100%);
|
--sidebar-bg: #eeeeee;
|
||||||
--nav-cursor-color: #fcfcfc;
|
--sidebar-muted-color: #a2a19f;
|
||||||
|
--sidebar-hover-color: #696868;
|
||||||
|
--sidebar-active-color: #455a64;
|
||||||
|
--nav-cursor-color: #455a64;
|
||||||
|
|
||||||
/* Topbar */
|
/* Topbar */
|
||||||
--topbar-text-color: rgb(78, 78, 78);
|
--topbar-text-color: rgb(78, 78, 78);
|
||||||
--topbar-wrapper-bg: white;
|
--topbar-wrapper-bg: white;
|
||||||
--search-wrapper-bg: #f5f5f5;
|
--search-wrapper-bg: rgb(245 245 245 / 50%);
|
||||||
|
--search-wrapper-border-color: rgb(245 245 245);
|
||||||
--search-tag-bg: #f8f9fa;
|
--search-tag-bg: #f8f9fa;
|
||||||
--search-icon-color: #c2c6cc;
|
--search-icon-color: #c2c6cc;
|
||||||
--input-focus-border-color: var(--btn-border-color);
|
--input-focus-border-color: var(--btn-border-color);
|
||||||
|
@ -42,12 +46,9 @@
|
||||||
/* Home page */
|
/* Home page */
|
||||||
--post-list-text-color: dimgray;
|
--post-list-text-color: dimgray;
|
||||||
--btn-patinator-text-color: #555555;
|
--btn-patinator-text-color: #555555;
|
||||||
--btn-paginator-hover-color: #e9ecef;
|
--btn-paginator-hover-color: var(--sidebar-bg);
|
||||||
--btn-active-bg: #2a408e;
|
--btn-paginator-border-color: var(--sidebar-bg);
|
||||||
--btn-active-border-color: #007bff;
|
--btn-text-color: #676666;
|
||||||
--btn-text-color: #f8f8f8;
|
|
||||||
--btn-paginator-border-color: #f1f1f1;
|
|
||||||
--btn-paginator-shadow: #4b92d2;
|
|
||||||
--pin-bg: #f5f5f5;
|
--pin-bg: #f5f5f5;
|
||||||
--pin-color: #999fa4;
|
--pin-color: #999fa4;
|
||||||
|
|
||||||
|
|
|
@ -28,9 +28,7 @@
|
||||||
}
|
}
|
||||||
&.active {
|
&.active {
|
||||||
.page-link {
|
.page-link {
|
||||||
background-color: var(--btn-active-bg);
|
background-color: var(--btn-paginator-hover-color);
|
||||||
border-color: var(--btn-active-border-color);
|
|
||||||
box-shadow: 0 0 8px 0 var(--btn-paginator-shadow) !important;
|
|
||||||
color: var(--btn-text-color);
|
color: var(--btn-text-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -143,12 +143,22 @@
|
||||||
line-height: 1rem;
|
line-height: 1rem;
|
||||||
padding-top: 0.5rem;
|
padding-top: 0.5rem;
|
||||||
padding-bottom: 0.5rem;
|
padding-bottom: 0.5rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
|
||||||
&.nav-link:not(.active) {
|
&.nav-link:not(.active) {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
nav[data-toggle=toc] {
|
||||||
|
.nav {
|
||||||
|
.nav > li > a.active {
|
||||||
|
font-weight: 600 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* --- Related Posts --- */
|
/* --- Related Posts --- */
|
||||||
|
|
||||||
#related-posts {
|
#related-posts {
|
||||||
|
|
Loading…
Reference in a new issue