Skip to content

YouTube スクロールバーのカスタマイズ by hori68

Write a review Install Get Stylus

Details

Authorhori68

LicenseCC-BY-4.0

CategoryYouTube

Created

Updated

Size3.5 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

スクロールバーの幅変更と上下矢印の表示機能があります。
インストールしただけでは何も変化しないでしょう。設定が必要です。

Notes

Google Chrome を初めとした Chromium 系ブラウザが対象になると思います。Firefoxは対象外です。
ガイドとは左側に常時表示、あるいは、左上の三をクリックした時に表示されるメニューのことです。
通知とは右上のベルを押した時の小ウィンドウのことです。

Source code

/* ==UserStyle==
@name           YouTube スクロールバーのカスタマイズ
@namespace      userstyles.world/user/hori68
@version        1.0
@description    スクロールバーの幅変更、上下矢印の表示
@author         hori68
@license        CC-BY-4.0
@preprocessor   stylus
@var range      m_wd     "メイン横幅"        [16, 10, 30, 2]
@var checkbox   m_bt     "メイン上下ボタン"  0
@var range      g_wd     "ガイド横幅"        [16, 10, 30, 2]
@var checkbox   g_bt     "ガイド上下ボタン"  0
@var range      n_wd     "通知横幅"          [8, 4, 20, 2]
@var checkbox   n_bt     "通知上下ボタン"    0
==/UserStyle== */

@-moz-document domain("youtube.com") {
    i = !important //
    /* 横幅処理 */
    body::-webkit-scrollbar {
        width: (m_wd)px i;
    }
    #guide-inner-content::-webkit-scrollbar {
        width: (g_wd)px i;
    }
    div#container.ytd-multi-page-menu-renderer::-webkit-scrollbar {
        width: (n_wd)px i;
    }

    /* 上下ボタン処理 */
    if m_bt{
        body::-webkit-scrollbar-button {
            border-style: solid i;
            &:single-button:vertical:decrement {
                border-width: 0px (m_wd/2)px (m_wd - 2)px (m_wd/2)px i;
                border-color: transparent transparent #555555 transparent i;
                &:hover{
                    border-color: transparent transparent #777777 transparent i;
                }
            }
            &:single-button:vertical:increment {
                border-width: (m_wd - 2)px (m_wd/2)px 0 (m_wd/2)px i;
                border-color: #555555 transparent transparent transparent i;
                &:hover{
                    border-color: #777777 transparent transparent transparent i;
                }
            }
        }
    }
    if g_bt{
        #guide-inner-content::-webkit-scrollbar-button {
            border-style: solid i;
            &:single-button:vertical:decrement {
                border-width: 0px (g_wd/2)px (g_wd - 2)px (g_wd/2)px i;
                border-color: transparent transparent #555555 transparent i;
                &:hover{
                    border-color: transparent transparent #777777 transparent i;
                }
            }
            &:single-button:vertical:increment {
                border-width: (g_wd - 2)px (g_wd/2)px 0 (g_wd/2)px i;
                border-color: #555555 transparent transparent transparent i;
                &:hover{
                    border-color: #777777 transparent transparent transparent i;
                }
            }
        }
    }
    if n_bt{
        div#container.ytd-multi-page-menu-renderer::-webkit-scrollbar-button {
            border-style: solid i;
            &:single-button:vertical:decrement {
                border-width: 0px (n_wd/2)px (n_wd - 2)px (n_wd/2)px i;
                border-color: transparent transparent #555555 transparent i;
                &:hover{
                    border-color: transparent transparent #777777 transparent i;
                }
            }
            &:single-button:vertical:increment {
                border-width: (n_wd - 2)px (n_wd/2)px 0 (n_wd/2)px i;
                border-color: #555555 transparent transparent transparent i;
                &:hover{
                    border-color: #777777 transparent transparent transparent i;
                }
            }
        }
    }
}

Reviews

No reviews yet.