tweak: add styles for slim scrollbar #69

2022-10-21T01:33:33+08:00

andatoshiki commented

2022-10-21 01:33:33 +08:00

(Migrated from github.com)

Override default scrollbar styles of the traditional windows ver. via custom/css shown in the image below (also available through your README file),

into a slimmer version of the scrollbar with more coloured or more "vueified" element since the framework of this note site is based off vue/vitepress, image displayed below, both vertical and horizontal scrollbar included for this tweak.

Both scrollbars of different orientations are fixed with the width of 3px based on the similar look on the scrollbar of the TOC section, as well the colour is default to #42b883 as a regard to the vue regulation (not necessarily but yes a primary color pulled directly off from your site), as you may see in the extra css PRed into the file.

Other settings such as background scroll track colours alongside the on hover colour are also customizable based off personal preferences, comments are added.

Note that only accept this PR if you feel it fits your flavor of choice, great looking customization on vitepress! I'll definitely take this as a template for my future projects, thanks! :)

Override default scrollbar styles of the traditional windows ver. via `custom/css` shown in the image below (also available through your `README` file), ![image](https://user-images.githubusercontent.com/101481353/196998209-fe8afaea-e8cc-4ece-8591-d8ca329c8b38.png) into a slimmer version of the scrollbar with more coloured or more "vueified" element since the framework of this note site is based off vue/vitepress, image displayed below, both vertical and horizontal scrollbar included for this tweak. ![image](https://user-images.githubusercontent.com/101481353/197007689-85953aff-714b-4f18-bd21-ac6903875b40.png) Both scrollbars of different orientations are fixed with the width of 3px based on the similar look on the scrollbar of the TOC section, as well the colour is default to `#42b883` as a regard to the vue regulation (not necessarily but yes a primary color pulled directly off from your site), as you may see in the extra css PRed into the file. Other settings such as background scroll track colours alongside the on hover colour are also customizable based off personal preferences, comments are added. >Note that **only** accept this PR if you feel it fits your flavor of choice, great looking customization on vitepress! I'll definitely take this as a template for my future projects, thanks! :)

Charles7c (Migrated from github.com) reviewed 2022-10-22 15:23:35 +08:00

Charles7c (Migrated from github.com) left a comment

Thank you very much for your pr.

In my opinion, when reading on pc, the scroll bar exists for a long time, which may cause visual fatigue if it is too bright.

So, I tweaked your pr a little bit, and by the way, made the Firefox browser look the same.

You are welcome to submit more pr again.

firefox:

webkit:

Thank you very much for your pr. In my opinion, when reading on pc, the scroll bar exists for a long time, which may cause visual fatigue if it is too bright. So, I tweaked your pr a little bit, and by the way, made the Firefox browser look the same. You are welcome to submit more pr again. firefox: ![firefox](https://user-images.githubusercontent.com/25446948/197326014-e1e2a243-02ef-45c8-895b-fd4b3bd6f491.png) webkit: ![webkit](https://user-images.githubusercontent.com/25446948/197326070-4a0b1ce4-b203-4556-9b28-4c12b890209c.png)

This repo is archived. You cannot comment on pull requests.

1 Participants

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: Charles7c/vitepress-theme-blog-charles7c-s1#69