Merge branch 'feature/use-default-scrollbar'
This commit is contained in:
commit
9f5e579596
4 changed files with 9 additions and 59 deletions
|
@ -48,8 +48,8 @@
|
||||||
|
|
||||||
const modeToggle = document.querySelector(".mode-toggle");
|
const modeToggle = document.querySelector(".mode-toggle");
|
||||||
|
|
||||||
if (modeToggle !== null) {
|
if (typeof modeToggle !== "undefined") {
|
||||||
modeToggle.addEventListener('click', reloadDisqus);
|
/* modeToggle.addEventListener('click', reloadDisqus); // not pretty for 'color-scheme' */
|
||||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', reloadDisqus);
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', reloadDisqus);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -43,45 +43,6 @@ body {
|
||||||
font-family: 'Source Sans Pro', 'Microsoft Yahei', sans-serif;
|
font-family: 'Source Sans Pro', 'Microsoft Yahei', sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- Scrollbar --- */
|
|
||||||
|
|
||||||
$scrollbar-size: 7px;
|
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
width: $scrollbar-size;
|
|
||||||
height: $scrollbar-size;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
|
||||||
@at-root body#{&} {
|
|
||||||
-webkit-box-shadow: inset 0 0 6px var(--scrollbar-track-bg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
background-color: var(--scrollbar-thumb-bg);
|
|
||||||
border-radius: calc(#{$scrollbar-size} / 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.highlight {
|
|
||||||
border-color: transparent;
|
|
||||||
transition: border-color 0.5s ease;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-color: var(--scrollbar-thumb-bg);
|
|
||||||
transition: border-color 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-scrollbar-thumb {
|
|
||||||
/* add border to act as background-color */
|
|
||||||
border-right-style: inset;
|
|
||||||
border-right-width: calc(100vw + 100vh);
|
|
||||||
border-color: inherit;
|
|
||||||
background-color: var(--highlight-bg-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Typography --- */
|
/* --- Typography --- */
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
|
@ -842,17 +803,8 @@ $sidebar-display: "sidebar-display";
|
||||||
i {
|
i {
|
||||||
line-height: 1.75rem; // default line-height in body
|
line-height: 1.75rem; // default line-height in body
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
|
||||||
|
|
||||||
#mode-toggle-wrapper {
|
|
||||||
@extend %icon;
|
|
||||||
|
|
||||||
i {
|
|
||||||
@extend %sidebar-links;
|
|
||||||
@extend %cursor-pointer;
|
@extend %cursor-pointer;
|
||||||
@extend %clickable-transition;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-border {
|
.icon-border {
|
||||||
|
@ -865,10 +817,6 @@ $sidebar-display: "sidebar-display";
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#mode-toggle-wrapper:hover > i {
|
|
||||||
color: var(--sidebar-active-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
} // .sidebar-bottom
|
} // .sidebar-bottom
|
||||||
|
|
||||||
} // #sidebar
|
} // #sidebar
|
||||||
|
|
|
@ -8,8 +8,6 @@
|
||||||
--mask-bg: rgb(68, 69, 70);
|
--mask-bg: rgb(68, 69, 70);
|
||||||
--main-wrapper-bg: rgb(27, 27, 30);
|
--main-wrapper-bg: rgb(27, 27, 30);
|
||||||
--main-border-color: rgb(44, 45, 45);
|
--main-border-color: rgb(44, 45, 45);
|
||||||
--scrollbar-track-bg: rgba(0, 0, 0, 0.3);
|
|
||||||
--scrollbar-thumb-bg: rgb(173 171 171 / 50%);
|
|
||||||
|
|
||||||
/* Common color */
|
/* Common color */
|
||||||
--text-color: rgb(175, 176, 177);
|
--text-color: rgb(175, 176, 177);
|
||||||
|
@ -143,4 +141,10 @@
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
color-scheme: dark;
|
||||||
|
|
||||||
|
#disqus_thread {
|
||||||
|
color-scheme: none;
|
||||||
|
}
|
||||||
|
|
||||||
} // dark-scheme
|
} // dark-scheme
|
||||||
|
|
|
@ -8,8 +8,6 @@
|
||||||
--mask-bg: #c1c3c5;
|
--mask-bg: #c1c3c5;
|
||||||
--main-wrapper-bg: white;
|
--main-wrapper-bg: white;
|
||||||
--main-border-color: #f3f3f3;
|
--main-border-color: #f3f3f3;
|
||||||
--scrollbar-track-bg: rgba(0, 0, 0, 0.3);
|
|
||||||
--scrollbar-thumb-bg: rgba(0, 0, 0, 0.3);
|
|
||||||
|
|
||||||
/* Common color */
|
/* Common color */
|
||||||
--text-color: #34343c;
|
--text-color: #34343c;
|
||||||
|
|
Loading…
Reference in a new issue