/* ==UserStyle==
@name           網頁XY卷軸美化
@namespace      https://greasyfork.org/zh-TW/users/4839
@version        1.7.3
@description    XY卷軸美化+自定義scrollbar better customize
@author         Leadra
@license MIT
@preprocessor   stylus
@var color      scroll_border               "卷軸框色"                            rgba(115, 100, 255, 1)
@var range     scroll_bordersize        "卷軸框"                       [2, 0, 5, 1, "px"]
@var color      scroll_background    "卷軸背景色"                        rgba(200, 200, 250)
@var color      scroll_move                  "卷軸移入背景色"              rgb(68, 136, 238,1)
@var color      scroll_bar                      "背景色"                                 rgba(0,0,0,0)
@var range     scroll_radius                "卷軸圓滑度"                       [5, 0, 15, 1, "px"]
@var range     scroll_wh                       "卷軸寬高"                           [10, 0, 20, 1, "px"]
==/UserStyle== */
//針對新版chrome在YT框架內優先設定
html {
scrollbar-color: auto !important;
scrollbar-width: auto !important;
}
::-webkit-scrollbar {
width: scroll_wh !important;
height: scroll_wh !important;
background: rgba(0, 0, 0, 0);
}
/*背景*/
::-webkit-scrollbar-track {
box-shadow: inset 0 0 0 5px scroll_bar;
}
/*卷軸*/
::-webkit-scrollbar-thumb {
border: scroll_bordersize solid scroll_border !important;//#48e
background: scroll_background !important;
border-radius: scroll_radius!important;
}
/*卷軸移入*/
::-webkit-scrollbar-thumb:hover {
background: scroll_move !important;
}
::-webkit-scrollbar-corner {
background: rgba(0, 0, 0, 0);
}
/*
chrome 在 121版 引入firefox的 scrollbar-width 特性 這個之前在Firefox才有
scrollbar-width 只有 auto, thin, none 三種選擇
範例:
scrollbar-color: var(--main-color, #c1c1c1) rgba(0, 0, 0, 0) !important;
scrollbar-width: auto ;
*/