在ytb上的搜索结果页用B站的样式 by 13422797310

/* ==UserStyle==
@name           Better layout of YouTube search results
@namespace      github.com/openstyles/stylus
@version        20240201-1525
@description    YouTubeの検索結果一覧ページのレイアウトを改善します。Improve the YouTube search results listing page.
@author         ichi (https://twitter.com/icchi_da4)
@preprocessor   stylus

@var number numberOfColumns "Maximum number of columns" [5, 1, 8, 1]

@var select progress "Playback bar below thumbnails"{"Enable":"block","Disable*":"none"}

@var select titleColor "Item's title color" {"blue*":"#069","black":"#222"}

==/UserStyle== */


@-moz-document url-prefix("https://www.youtube.com/results") {
    /* 指定搜索列表的宽度 */
    #header.ytd-search,
    ytd-two-column-search-results-renderer,
    #primary {
        max-width: (numberOfColumns * 275)px !important;
    }

    /* 在header下方添加间距 */
    #header.ytd-search {
        margin-bottom: 10px !important;
    }

    /* 将搜索结果并排排列，宽度设置为200px */
    #dismissible {
        display: inline-block !important;
        width: 250px;
    }

    ytd-video-renderer,
    ytd-radio-renderer,
    ytd-playlist-renderer,
    ytd-channel-renderer {
        display: inline-block !important;
        width: 240px !important;
        vertical-align: top;

        /* 为搜索结果中的元素指定边距 */
        margin-top: 0px !important;
        margin-right: 25px;
        margin-bottom: 5px !important;
    }

    /* 调整 “Maybe:（也许）”按钮的显示位置。 */
    yt-showing-results-for-renderer {
        display: block;
    }
    yt-search-query-correction{
        margin-top: 0;
        margin-bottom: 20px;
    }
    
    /* 可能："的字体大小规格。 */
    yt-search-query-correction yt-formatted-string {
        font-size: 20px !important;
    }
    
    yt-search-query-correction > a > yt-formatted-string {
        text-decoration: underline;
    } 
    yt-search-query-correction > a > yt-formatted-string:hover {
        text-decoration: none;
    }
    
    
    /* 
        以下是文本的中文（简体）翻译：
        广告、视频描述、“其他人还搜索”、“最新**短片”、删除右侧显示的项目
        注：原文本中的“**”被保留，如果需要更具体的翻译，请提供更多信息。
    */
    ytd-ad-slot-renderer,
    .metadata-snippet-container,
    .metadata-snippet-container-one-line,
    ytd-horizontal-card-list-renderer,
    #expandable-metadata,
    ytd-secondary-search-container-renderer,
    ytd-shelf-renderer,
    ytd-reel-shelf-renderer,
    ytd-search-pyv-renderer {
        display: none !important;
    }



    /* 频道显示相关 */
    /* 中心图标和文本 */
    #content-section {
        display: inline-block !important;
        text-align: center;
    }

    /* 将频道图标设为正方形 */
    #primary yt-img-shadow {
        border-radius: 0px;
    }

    /* 指定图标大小 */
    #primary #avatar,
    #primary #avatar-section {
        display: inline-block !important;
        margin-right: 0px !important;
        max-width: 139px !important;
        min-width: 139px !important;
    }

    /* 将通道名称的字体调小一点并居中。同时调整顶部和底部边距 */
    #channel-title {
        margin: 0 auto;
        font-size: 1.4rem !important;
        line-height: 2.0rem !important;
        font-weight: 500 !important;
        margin-top: 3px !important;
        margin-bottom: 0px !important;
    }

    /* 将鼠标悬停在频道名称上时显示下划线 */
    #channel-title:hover {
        text-decoration: underline solid;
    }

    /* 在图标和名称下方显示订阅者数量 */
    #subscribers {
        display: block;
    }

    /* 姓名和注册人数之间的“·”，频道描述，删除频道订阅按钮 */
    #dot,
    #description,
    #buttons.ytd-video-renderer,
    #buttons.ytd-channel-renderer {
        display: none !important;
    }


    #info-section {
        display: inline-block !important;
    }

    /* 删除通道信息的边距 */
    #info {
        padding: 0 !important;
    }



    
    /*===============
         视频展示
    ===============*/
    /* 将缩略图大小固定为 200 像素 */
    ytd-thumbnail,
    ytd-playlist-thumbnail {
        max-width: 425px !important;
        min-width: 245px !important;
    }

    /* 删除缩略图中的圆角 */
    #primary #thumbnail {
        border-radius: 0px;
    }


    /* 调整播放列表缩略图显示 */
    ytd-playlist-thumbnail {
        margin-top: 0 !important;
    }
    
    /* 是否在缩略图下方显示播放栏 */
    ytd-thumbnail-overlay-resume-playback-renderer {
        display: progress;
    }

    /* 删除视频标题右侧的边距 */
    .title-and-badge {
        margin-right: 0px !important;
    }

    /* 把视频标题的字体调小一点，粗一点 */
    #video-title {
        font-size: 1.5rem !important;
        line-height: 2.0rem !important;
        max-height: 8.0rem !important;
        -webkit-line-clamp: 4 !important;
        margin-bottom: 2px;
    }

    /* 在视频标题上方添加一点空格 */
    #video-title.ytd-video-renderer,
    #video-title.ytd-radio-renderer {
        padding-top: 5px;
    }

    /* 更改视频标题的字体颜色 */
    #video-title.ytd-video-renderer {
        color: titleColor;
        font-weight: bold !important;
    }

    /* 将鼠标悬停在视频或播放列表标题上时显示下划线 */
    #video-title.ytd-video-renderer:hover,
    #video-title.ytd-playlist-renderer:hover {
        text-decoration: underline solid;
    }

    /* 更改播放列表标题的粗细 */
    #video-title.ytd-playlist-renderer {
        font-weight: 500 !important;
    }

    /* 删除视频提交者标记上方的空白 */
    #channel-info {
        padding-top: 0px !important;
        padding-bottom: 3px !important;
        padding-right: 0px !important;
        padding-left: 0px !important;
    }

    /* 隐藏发布视频的频道的图标 */
    #channel-thumbnail.ytd-video-renderer {
        display: none;
    }

    /* 以黑色和下划线显示视频海报的频道名称.另外，当光标放在上面时，使下划线消失 */
    ytd-video-renderer a.yt-formatted-string {
        color: #000 !important;
        text-decoration: underline solid !important;
    }
    ytd-video-renderer a.yt-formatted-string:hover {
        text-decoration: none !important;
    }

    /* 隐藏正在首映的视频的描述 */
    #description-text {
        display: none !important;
    }

    /* 指定视频右下角“...”菜单的大小 */
    #menu {
        margin-top: 5px;
        width: 20px;
    }

    /* 删除视频下方的章节显示 */
    #list {
        display: none;
    }
}

@-moz-document url-prefix("https://www.youtube.com/feed/history") {

    html {
        --ytd-grid-6-columns-width: 100%;
    }
    
    
    /* 履歴表示の幅を調整 */
    #page-header,
    ytd-two-column-browse-results-renderer {
        max-width: none !important;
        width: 100% !important;
    }
    
    /* "再生履歴" の位置を調整 */
    #page-header {
        padding-left: 50px !important;
    }
    
    /* 缩小右侧菜单的宽度。 */
    #secondary {
        width: 300px !important;
    }
    
    /* 指定查看历史列表的显示宽度 */
    #primary {
        padding-left: 50px !important;
        padding-right: 300px !important;
        max-width: (numberOfColumns * 225)px !important;
    }
    
    /* 日付ごとに罫線 */
    #primary #contents {
        padding-bottom: 60px;
        border-bottom: solid 1px;
    }
    
    /* 検索結果を横並び、幅を200pxにする */
    #dismissible {
        display: inline-block !important;
        width: 200px;
    }

    ytd-video-renderer {
        display: inline-block !important;
        width: 200px !important;
        vertical-align: top;

        /* 検索結果の要素の余白指定 */
        margin-right: 25px;
        margin-bottom: 25px;
    }
    
        /* 動画の表示 */
    /* サムネイルのサイズを200px固定に */
    ytd-thumbnail {
        width: 200px !important;
        height: 112px !important;
    }

    /* サムネイルの角丸を削除 */
    #primary #thumbnail {
        border-radius: 0px;
    }


    /* 再生リストのサムネイルの表示を調整 */
    ytd-playlist-thumbnail {
        margin-top: 0 !important;
    }
    
    /* サムネイル下の再生バーを表示するかどうか */
    ytd-thumbnail-overlay-resume-playback-renderer {
        display: progress;
    }

    /* 動画タイトル右の余白を削除 */
    .title-and-badge {
        margin-right: 0px !important;
    }

    /* 動画タイトルのフォントを少し小さく、太くする */
    #video-title {
        font-size: 1.4rem !important;
        line-height: 2.0rem !important;
        max-height: 8.0rem !important;
        -webkit-line-clamp: 4 !important;
        margin-bottom: 2px;
    }

    /* 動画タイトルの上に少し余白を追加 */
    #video-title.ytd-video-renderer {
        padding-top: 5px;
    }

    /* 動画タイトルの文字色を変更 */
    #video-title.ytd-video-renderer {
        color: titleColor;
        font-weight: bold !important;
    }

    /* 動画、再生リストのタイトルにカーソルを合わせた時に下線を表示 */
    #video-title.ytd-video-renderer:hover {
        text-decoration: underline solid;
    }
    
    /* チャンネル名、視聴回数の表示の幅指定 */
    ytd-video-meta-block {
        width: 176px;
    }

    /* 動画投稿者のチャンネル名を黒にして下線を表示する
       また、カーソルを乗せた時に下線が消えるようにする */
    ytd-video-renderer a.yt-formatted-string {
        color: #000 !important;
        text-decoration: underline solid !important;
    }
    ytd-video-renderer a.yt-formatted-string:hover {
        text-decoration: none !important;
    }

    /* プレミア公開中の動画の説明文を非表示 */
    #description-text {
        display: none !important;
    }
    
    /* 動画右下のメニューの幅指定 */
    #menu,
    ytd-video-renderer ytd-menu-renderer
    #top-level-buttons-computed,
    #flexible-item-buttons,
    ytd-video-renderer button {
        width: 24px !important;
    }
    
    /* 動画右下のメニューを縦並びにする */
    ytd-video-renderer ytd-menu-renderer {
        display: inline-block !important;
        margin-top: 0 !important;
    }
        
    /* 動画右下の"..."メニューのサイズ指定 */
    ytd-video-renderer yt-icon-button {
        margin: 0 !important;
    }
    
    /* 「再生履歴から削除」ボタンの幅調整 */
    ytd-video-renderer .tp-yt-paper-tooltip[style-target="tooltip"] {
        width: calc(100% + 40px);
        margin-left: -20px;
        margin-right: -20px;
    }
    
    /* 履歴削除のメッセージに枠線を付ける */
    #text.ytd-notification-multi-action-renderer {
        padding: 1px;
        margin-top: 3px;
        border: solid 2px var(--yt-spec-text-secondary);
    }
    
    /* 横のメニューのアイテムの余白を狭くする */
    tp-yt-paper-input-container {
        padding: 0;
    }
    #secondary ytd-button-renderer {
        margin: 0 !important;
    }
    ytd-compact-link-renderer {
        --paper-item-min-height: 30px;
    }
}...