☰

YT 簡化-控制項+按鈕

youtube YT簡化-控制項+按鈕+進度條修改

נכון ליום 28-01-2024. ראה הגרסה האחרונה.

/* ==UserStyle==
@name  YT 簡化-控制項+按鈕
@description  youtube YT簡化-控制項+按鈕+進度條修改
@namespace    1
@author       leadra
@preprocessor stylus
@version     1.4.2
@license      MIT

@var checkbox   ctrl_thin                               "控制項簡化"                                                         1
@var checkbox   hide_mplayer                    "按鈕隱藏:迷你+劇院+全螢幕"                         1
@var checkbox   hide_ctrl                              "控制列隱藏-移入才顯示"                                  1
@var checkbox   title_h                                   "影片標題+按鈕上下間距"                                  1
@var checkbox   hide_ad                               "影片列表-廣告隱藏"                                            1
@var checkbox   ad_resume                         "影片列表-看過影片變暗"                                  0
@var checkbox   hide_chat_head               "即時通訊鈕緊縮"                                                1
@var checkbox   noround_livechat            "去除圓角-聊天室+影片"                                  0
@var checkbox   noround_btn                     "去除圓角-按鈕"                                                   0
@var checkbox   music_section                   " 隱藏頻道音樂遊戲資訊🎵🎮"                    0
@var checkbox   progress_bar                     "進度條自定義"                                                   1
@var number      progress_bar_size           "進度條圖片大小"                         [80, 0, 200, 10, "px"]
@var text               progress_url                      "進度條URL"             "url(https://cdn.discordapp.com/attachments/1061231391083352116/1179802999648944209/kurara.gif)"
//https://cdn.discordapp.com/attachments/1061231391083352116/1179802999648944209/kurara.gif
//https://cdn.discordapp.com/attachments/1061231391083352116/1115256873764003920/tank_png2.png
@var checkbox   no-tab                                  "----------Tabview(腳本)---------按鈕極小化"                        1
@var checkbox   times_watched                 ">>>觀看次數位置上移"                                  0

==/UserStyle== */
/*參考[CSS]
隱藏控制項(滑鼠移入才會顯示
https://greasyfork.org/zh-TW/scripts/446045
隱藏進度條(滑鼠移入才會顯示
https://greasyfork.org/zh-TW/scripts/437994
播放器簡化
https://greasyfork.org/zh-TW/scripts/445999
YT網頁版面調整
https://github.com/sapondanaisriwan/AdashimaaTube
進度條突出顯示
https://greasyfork.org/zh-TW/scripts/402635
YT主題:皮卡丘介面
https://userstyles.org/styles/194352/poketube
Movie電影廣告消除
https://greasyfork.org/zh-TW/scripts/468212
YT所有頁面:看過影片變暗
https://greasyfork.org/zh-TW/scripts/419722
*/
@-moz-document url-prefix("https://www.youtube.com/watch?v=") {
/*顯示隱藏即時通訊鈕-高度調整*/
if hide_chat_head{    
#show-hide-button > .ytd-live-chat-frame.style-scope{
        display:block;
        height:35px;//@var number     chat_head_height                          "即時通訊鈕height(15=無)"                         [35, 15, 55, 5, "px"]
        opacity:0.5;
        padding:0px!important;
        margin: -10px 0px -10px 0px!important;
        //height: calc(100vh *0.02) ; 
     }}
//即時通訊+訂閱按鈕感應區域.yt-spec-touch-feedback-shape--touch-response .yt-spec-touch-feedback-shape__fill {width:300px!important;}
#button-text-content.yt-spec-button-shape-next{width:300px;}
//去除圓角-聊天室+影片
if noround_livechat {
    ytd-live-chat-frame#chat.ytd-watch-flexy{
        border-radius: 0px;
        }
    ytd-watch-flexy[rounded-player-large]:not([fullscreen]):not([theater]) #ytd-player.ytd-watch-flexy {
        border-radius: 0px !important;
}}
//去除圓角-按鈕
if noround_btn {
    html .yt-spec-button-shape-next--size-m,
    html .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--segmented-start,
    html .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-button.yt-spec-button-shape-next--segmented-end{
        border-radius:0;
        }}
     
//控制項簡化:保留音量信息
if ctrl_thin{
.ytp-bezel,//中間LOGO信息
.ytp-doubletap-ui-legacy,//左右側前進、後退信息
.ytp-doubletap-ui,//去除縮略圖上的鼠標播放提醒信息
.ytp-gradient-top,//上邊漸進黑
//.ytp-gradient-bottom,//下邊漸進黑
.ytp-chrome-top,//全螢幕上方標題
.ytp-pip-button.ytp-button,//子母畫面
//.ytp-size-button.ytp-button,//劇院模式
//.ytp-miniplayer-button.ytp-button,//迷你
//.ytp-autonav-toggle-button,//自動播放(背景元素無法去除)
//.c4-player-container.c4-flexible-player-container,
ytd-thumbnail-overlay-loading-preview-renderer{
display:none !important;
}}
//.ytp-pip-button{display:unset!important;}

/*控制項隱藏-移入顯示+控制列黑底*/
if hide_ctrl{
.ytp-gradient-bottom,.ytp-chrome-bottom {opacity:0;}
.ytp-chrome-bottom:hover  {opacity:1;background:rgba(0, 0, 0, .4);}
        }
/*按鈕隱藏>迷你+劇院+全螢幕*/        
if hide_mplayer{.ytp-size-button.ytp-button,.ytp-miniplayer-button.ytp-button,.ytp-fullscreen-button.ytp-button{display:none !important;}}
/*影片列表-廣告隱藏*/
if hide_ad{
    //影片列表-電影購買[https://greasyfork.org/zh-TW/scripts/468212]
    ytd-watch-next-secondary-results-renderer.ytd-watch-flexy ytd-compact-movie-renderer.style-scope.ytd-item-section-renderer {display: none;}
    #offer-module.ytd-watch-next-secondary-results-renderer {display: none;}
    //影片列表-廣告
    td-promoted-sparkles-web-renderer{display: none;}
    ytd-ad-slot-renderer{display: none;}
                    }
/*影片列表-看過影片變暗[腳本版https://greasyfork.org/zh-TW/scripts/419722]*/
if ad_resume{
//#progress.ytd-thumbnail-overlay-resume-playback-renderer {bottom: 0px; position: absolute;z-index:1;background: rgba(0, 0, 0, .5);min-height: 95px;}
ytd-thumbnail-overlay-resume-playback-renderer::after {
    background: rgba(0, 0, 0, .5);
    content: "看過";    //text-align:center;
    font-size:20px;
    display: block;
    bottom: 0;
    height: 95px;
    width: 100%;
    position: absolute;
    z-index: 10;
    }}
                        
/*影片標題+按鈕上下間距*/
if title_h{
    /*標題上空白*/
body ytd-watch-flexy[cinematics-enabled] #below.ytd-watch-flexy{letter-spacing:-0px;margin: -0px 0px -0px 0px!important;}//margin: -0px 0px -0px 0px!important;
    /*標題*/
#below h1.ytd-watch-metadata ,yt-formatted-string[data-title-details]{line-height:1em;}

    /*頻道名稱上下方空白*/
.style-scope.ytd-watch-metadata{margin: -0px 0px -0px 0px!important;}
#top-row.ytd-watch-metadata{margin: -0px 0px -3px 0px!important;}
    /*會員專屬標題*/
.badge-style-type-members-only.ytd-badge-supported-renderer {margin: -0px 0px -60px 140px;position: relative ;    z-index: -10;}
    //標題列-頻道名稱
    .style-scope.ytd-video-owner-renderer{
            padding:0px 0px;
margin: 0px 0px 0px -0px!important;
max-width: 300px!important;
line-height:1em!important;
        }
    .ytd-channel-name{padding:0px 0px 0px 0px;margin: 0px 0px 0px -0px;}
//#upload-info.ytd-video-owner-renderer{padding:0;margin: -0px 0px -0px -0px!important;}
    //頻道訂閱數
    #owner-sub-count.ytd-video-owner-renderer{
        font-size: 16px;
        line-height:1em!important;
    }
    //觀看次數文字
    #info-container.ytd-watch-info-text{
    margin: 0px 0px 0px 10px;
    font-size:16px;
    }
                }
if times_watched {
//觀看次數區
#bottom-row.ytd-watch-metadata{
    margin: -5px 0px 0px 0px!important;
    max-width: 30%!important;
    position: relative;
    z-index:-0;
    left:500px;
    bottom:30px;
        }
//標題列右側
#actions-inner.ytd-watch-metadata{max-width: 80%;}
//標題列右側按鈕
    .yt-spec-button-shape-next__button-text-content{
    max-width:50px;
    margin: -0px -0px -0px -5px!important;
    } 
    .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {
        padding:0px 5px 0px 10px;margin: 0px 0px 0px -0px;}
//標題列按鈕
/*
.yt-spec-button-shape-next{
    //max-width:105px;
    margin: -0px -0px !important;
    position: relative;
    z-index:0;
    left:-0px;
    }*/
//標題列按鈕區
    //ytd-watch-metadata[larger-item-wrap] .item.ytd-watch-metadata{margin: -0px 0px 0px 0px!important;}
    //觀看次數區-前端
    /*#description-inner.ytd-watch-metadata{
    margin: -30px 0px 0px 380px!important;
    max-width: 20%!important;
    position: absolute;
    z-index:-10;
        }*/
}
//隱藏頻道音樂遊戲資訊
         ytd-video-description-infocards-section-renderer , ytd-horizontal-card-list-renderer.style-scope.ytd-structured-description-content-renderer , #contents.ytd-rich-metadata-row-renderer  {display: none if music_section;}
        //隱藏右邊欄位ytd-watch-flexy[cinematics-enabled] #secondary.ytd-watch-flexy {display: none if hideRightSideVideos;}position: absolute ;    z-index: 10;left:0;

/*炒飯進度條*/
if progress_bar{
    .ytp-scrubber-button,.ytp-play-progress {
        background: #ffe100a6;
        transform: rotate(0deg);
        filter: drop-shadow(0 0 1px gold) drop-shadow(0 0 2px gold) drop-shadow(0 0 3px gold);
    }
    /*控制項高亮*/
//.ytp-time-display span:hover {text-shadow: 0 0 1px whitesmoke, 0 0 2px black !important;filter: drop-shadow(0 0 3px gold) drop-shadow(0 0 5px gold) !important}
    .ytp-volume-panel:hover,
    .ytp-chrome-controls a:hover svg,
    .ytp-chrome-controls button:hover svg {
        filter: drop-shadow(0 0 1px black) drop-shadow(0 0 2px gold)  drop-shadow(0 0 5px gold) !important;
    }
    //進度條調整
.ytp-scrubber-pull-indicator {
    background-color: #fff0;
    height: progress_bar_size;
    width: progress_bar_size;
    background-image: progress_url;    //url(https://cdn.discordapp.com/attachments/1061231391083352116/1115256873764003920/tank_png2.png)
    background-repeat: no-repeat;
    background-position: center;
    background-size: progress_bar_size;
    bottom: 0px;
    left: progress_bar_size *-(6.5/10) ;
    transform: rotate(0deg);
	transform: scale(1.1);
	border-radius: 0px
    }}
/* 
@var checkbox   chat_height                          "聊天室延伸(tabview衝突)"                 0
@var number     chat_width                          "聊天室欄寬"                         [400, 300, 800, 10, "px"]
// 聊天室延伸(tabview腳本衝突)   チャット欄を画面一番下まで伸ばす
if chat_height { ytd-live-chat-frame#chat {height: calc(100vh *0.92) !important; //height: calc(100vh - 100px)}
    // chat欄位無邊界
    #columns {margin: -0px 0px  0px  0px  !important;   max-width: 100% !important;
        //影片上方空白消除
        & > #primary,& > #secondary{padding-top: 0!important;}
// chat聊天室欄寬
        & > #secondary {width: chat_width;}
                                }}
*/
//Tabview(腳本)按鈕極小化
if no-tab {
    ytd-watch-flexy #right-tabs .tab-btn[tyt-tab-content]{
    padding:0;
    font-size:18px;
    line-height:1em;
    }
                    }

}