Youtube: Adjust Video Thumbnail

A new userstyle
換行
/* ==UserStyle==
@name           Youtube: Adjust Video Thumbnail
@namespace      github.com/openstyles/stylus
@version        0.0.3
@description    A new userstyle
@author         CY Fung
@license        MIT
@preprocessor   stylus
@var range      v-outer-bottom       "outer-bottom"            [16, 0, 32, 2, 'px']
@var select     v-object-fit         "object-fit" {
  "contain":                            "contain",
  "cover":                              "cover",
  "none":                               "none"
}
@var select     v-object-position     "object-position" {
  "top":                                "top",
  "center":                             "center",
  "bottom":                             "bottom"
}
@var range     v-inner-bottom        "inner-bottom"            [-0, -16, -0, 2, 'px']
@var range     v-font-size           "font-size"               [8, 6, 12, 0.5, 'pt']
@var range     v-line-height         "line-height"             [1.25, 1.00, 1.85, 0.05, '']
@var checkbox  v-border-mode         "border-mode"             1
@var range     v-progressbar-bottom  "progressbar-bottom"      [17, -8, 26, 1, 'px']
==/UserStyle== */

@-moz-document domain("youtube.com") {
    :root {
        --vt-outer-bottom: v-outer-bottom;
        --vt-object-fit: v-object-fit;
        --vt-object-position: v-object-position;
        --vt-inner-bottom: v-inner-bottom;
        --vt-font-size: v-font-size;
        --vt-line-height: v-line-height;
    }
    ytd-watch-next-secondary-results-renderer yt-thumbnail-view-model:not([class*="-collection-thumbnail"]){
        overflow: visible !important;
        padding-bottom: var(--vt-outer-bottom) !important;
        img[src] {
            object-fit: var(--vt-object-fit);
            object-position: var(--vt-object-position);
        }
        if v-border-mode {
            border: 4px solid transparent;
            background-color: var(--vt-thumbnail-bgcolor);
        }

        yt-thumbnail-overlay-badge-view-model, yt-thumbnail-bottom-overlay-view-model {
            margin: 0 !important;
            padding: 0 !important;
            margin-bottom: var(--vt-inner-bottom) !important;
            * {
                font-size: var(--vt-font-size) !important;
            }
            badge-shape {
                margin: 0 !important;
                line-height: var(--vt-line-height) !important;
            }
        }
        yt-thumbnail-badge-view-model {
            margin: 0 !important;
            padding: 0 !important;
        }
        .ytThumbnailBottomOverlayViewModelHostContainer[class] {
            right: 0px;
            left: 0px;
        }
        yt-thumbnail-overlay-progress-bar-view-model[class] {
            margin-top: 2px;
        }
        .ytThumbnailOverlayProgressBarHostWatchedProgressBar[class],
        .ytThumbnailOverlayProgressBarHostUseLegacyBar[class] {            
            margin-bottom: v-progressbar-bottom;
            box-sizing: border-box;
        }
    }
    if v-border-mode {
        
        yt-thumbnail-view-model {
            --vt-thumbnail-bgcolor: rgba(127, 127, 127, 0.33);
        }
        
        yt-thumbnail-view-model:has([class*="-live"]) {
            --vt-thumbnail-bgcolor: rgba(225,0,45,0.9);
        }
        
         ytd-watch-next-secondary-results-renderer yt-thumbnail-view-model:has(yt-thumbnail-hover-overlay-toggle-actions-view-model) {
            --vt-thumbnail-bgcolor: transparent;
         }
        
        
        /*
        
        ytd-watch-next-secondary-results-renderer yt-thumbnail-view-model:has([class*="-live"]) {
            border-color: rgba(225,0,45,0.9);
            
            --vt-outer-bottom: 0;
            --vt-inner-bottom: 0;
            --vt-object-position: center;
            
        }
        */
        /*
        ytd-watch-next-secondary-results-renderer yt-thumbnail-view-model [class*="-live"] {
            display: none;
        }
        */
    }
}
欢迎访问Greasy Fork镜像
