From 0ed246d47d7c500ec8296fd2e495f51badbfd2af Mon Sep 17 00:00:00 2001 From: Aditya Telange <21258296+adityatelange@users.noreply.github.com> Date: Fri, 3 Jun 2022 18:32:09 +0530 Subject: [PATCH] Seperate scroll-bar customization into seperate stylesheet --- assets/css/common/post-single.css | 26 ------------ assets/css/core/reset.css | 26 ------------ assets/css/core/zmedia.css | 8 ---- assets/css/includes/scroll-bar.css | 63 ++++++++++++++++++++++++++++++ 4 files changed, 63 insertions(+), 60 deletions(-) create mode 100644 assets/css/includes/scroll-bar.css diff --git a/assets/css/common/post-single.css b/assets/css/common/post-single.css index 675bb684..2ceea084 100644 --- a/assets/css/common/post-single.css +++ b/assets/css/common/post-single.css @@ -189,10 +189,6 @@ margin-bottom: 0; } -.post-content .highlighttable td .highlight pre code::-webkit-scrollbar { - display: none; -} - .post-content code { margin: auto 4px; padding: 4px 6px; @@ -368,28 +364,6 @@ h6:hover .anchor { user-select: none; } -.post-content :not(table) ::-webkit-scrollbar-thumb { - border: 2px solid var(--hljs-bg); - background: rgb(113, 113, 117); -} - -.post-content :not(table) ::-webkit-scrollbar-thumb:hover { - background: rgb(163, 163, 165); -} - -.gist table::-webkit-scrollbar-thumb { - border: 2px solid rgb(255, 255, 255); - background: rgb(173, 173, 173); -} - -.gist table::-webkit-scrollbar-thumb:hover { - background: rgb(112, 112, 112); -} - -.post-content table::-webkit-scrollbar-thumb { - border-width: 2px; -} - .paginav { margin: 10px 0; display: flex; diff --git a/assets/css/core/reset.css b/assets/css/core/reset.css index d7bd2ecf..f509cf6e 100644 --- a/assets/css/core/reset.css +++ b/assets/css/core/reset.css @@ -114,29 +114,3 @@ img { display: block; max-width: 100%; } - -::-webkit-scrollbar-track { - background: 0 0; -} - -.list:not(.dark)::-webkit-scrollbar-track { - background: var(--code-bg); -} - -::-webkit-scrollbar-thumb { - background: var(--tertiary); - border: 5px solid var(--theme); - border-radius: var(--radius); -} - -.list:not(.dark)::-webkit-scrollbar-thumb { - border: 5px solid var(--code-bg); -} - -::-webkit-scrollbar-thumb:hover { - background: var(--secondary); -} - -::-webkit-scrollbar:not(.highlighttable, .highlight table, .gist .highlight) { - background: var(--theme); -} \ No newline at end of file diff --git a/assets/css/core/zmedia.css b/assets/css/core/zmedia.css index 1cc6c6e7..28884728 100644 --- a/assets/css/core/zmedia.css +++ b/assets/css/core/zmedia.css @@ -29,14 +29,6 @@ } } -@media screen and (min-width: 768px) { - /* reset */ - ::-webkit-scrollbar { - width: 19px; - height: 11px; - } -} - /* footer */ @media screen and (max-width: 900px) { .list .top-link { diff --git a/assets/css/includes/scroll-bar.css b/assets/css/includes/scroll-bar.css new file mode 100644 index 00000000..47405de2 --- /dev/null +++ b/assets/css/includes/scroll-bar.css @@ -0,0 +1,63 @@ +/* from reset */ +::-webkit-scrollbar-track { + background: 0 0; +} + +.list:not(.dark)::-webkit-scrollbar-track { + background: var(--code-bg); +} + +::-webkit-scrollbar-thumb { + background: var(--tertiary); + border: 5px solid var(--theme); + border-radius: var(--radius); +} + +.list:not(.dark)::-webkit-scrollbar-thumb { + border: 5px solid var(--code-bg); +} + +::-webkit-scrollbar-thumb:hover { + background: var(--secondary); +} + +::-webkit-scrollbar:not(.highlighttable, .highlight table, .gist .highlight) { + background: var(--theme); +} + +/* from post-single */ +.post-content .highlighttable td .highlight pre code::-webkit-scrollbar { + display: none; +} + +.post-content :not(table) ::-webkit-scrollbar-thumb { + border: 2px solid var(--hljs-bg); + background: rgb(113, 113, 117); +} + +.post-content :not(table) ::-webkit-scrollbar-thumb:hover { + background: rgb(163, 163, 165); +} + +.gist table::-webkit-scrollbar-thumb { + border: 2px solid rgb(255, 255, 255); + background: rgb(173, 173, 173); +} + +.gist table::-webkit-scrollbar-thumb:hover { + background: rgb(112, 112, 112); +} + +.post-content table::-webkit-scrollbar-thumb { + border-width: 2px; +} + +/* from zmedia */ +@media screen and (min-width: 768px) { + + /* reset */ + ::-webkit-scrollbar { + width: 19px; + height: 11px; + } +} \ No newline at end of file