Sync/hugo-theme-stack
1
0
Fork 1
mirror of https://github.com/CaiJimmy/hugo-theme-stack.git synced 2025-04-29 03:53:30 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: change horizontal scrollbar styles

Browse Source 
Change the horizontal scrollbar styles in Archives page following the
dark and light themes styles.  This horizontal scrollbar is at the top
of the Archives page. When I visit this page, the scrollbar stole my
attention. Unfortunately, it's the client (our browser) who decides its
styles;  this change is introduced to avoid that situation.

Co-authored-by: Miguel Angel <man98@me.com>
This commit is contained in:
k 2021-05-20 10:45:07 -05:00
parent 325303a7f8
commit 0210219983
2 changed files with 28 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
assets/scss/partials/layout/list.scss
View File

@ -52,6 +52,29 @@
margin-bottom: var(--section-separation);
overflow-x: auto;
/* scrollbar styles for Firefox */
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
/* scrollbar styles for Chromium */
&::-webkit-scrollbar {
height: 7px;
border-radius: 10px;
}
&::-webkit-scrollbar-thumb, &::-webkit-scrollbar-track {
border-radius: 10px;
}
&::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-thumb);
}
&::-webkit-scrollbar-track {
background-color: var(--scrollbar-track);
}
/**/
.article-list--tile {
display: flex;
padding-bottom: 15px;

5
assets/scss/variables.scss
View File

@ -36,12 +36,17 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
--section-separation: 40px;
--scrollbar-thumb: hsl(0, 0%, 85%);
--scrollbar-track: var(--body-background);
[data-scheme="dark"] {
--body-background: #303030;
--accent-color: #ecf0f1;
--accent-color-darker: #bdc3c7;
--accent-color-text: #000;
--body-text-color: rgba(255, 255, 255, 0.7);
--scrollbar-thumb: #424242;
--scrollbar-track: var(--body-background);
}
}