README.md

Userstyles and UserScripts for SponsorBlock (by jiraph)

sponsorblock-simple-thumbnail-label

Styles the SponsorBlock thumbnail label to match YouTube's existing thumbnail badges.

• Colors will follow what you choose in SponsorBlock settings, and text will adapt to contrast with background color.
• Includes a settings menu if installed with Stylus.
  • Options for top left or bottom left corner, colored text/white text/colored background, all caps text, and show/hide logo.

[Install UserStyle]

Thanks to @virginviolet for fixing compatibility with Thumbnail Rating Bar for YouTube.

sponsorblock-color-coded-dropdown

Firefox Colored Background:	Firefox Colored Text:
Chrome Colored Background:	Chrome Colored Text:

Styles the dropdown list in the submission menu with each categories respective color.

• Colors will follow what you choose in SponsorBlock settings, and text color will adapt to contrast with background color.
• Includes a settings menu if installed with Stylus.
  • Choose between coloring the background, or coloring the text.
  • Option for bold text to make it more readable, and an option for extra-readable white text with black outline (outline does not work on Chrome).
  • Edit chapter color, since it does not have a color in the SponsorBlock settings.
  • Option to use unsubmitted category colors.

[Install as UserStyle] (Integrated settings menu)
[Install as UserScript] (Settings may be adjusted by un-commenting sections of code)

sponsorblock.colorcodeddropdown.user.css

/* ==UserStyle==
@name           SponsorBlock Color-Coded Dropdown
@description    Styles the dropdown list in the submission menu with each categories respective color.
@namespace      sponsorblock-color-coded-dropdown
@homepageURL    https://gist.github.com/jiraph/
@updateURL      https://gist.github.com/jiraph/e60d0a7ae7071f1f4ef060948d50a9a1/raw/sponsorblock.colorcodeddropdown.user.css
@author         jiraph
@version        1.3.0
@preprocessor   stylus
@var select color-style "Style" {
    'Color Background*'   :'color-background',
    'Color Text'          :'color-text',}
@var checkbox   outlineText     "Outline Text (Firefox Only)" 0
@var color      outlineColor    "Outline Color (Firefox Only)" #000000
@var checkbox   textBold        "Bold Text" 0
@var checkbox   lockedBold      "Bold Text When Locked (VIP Only)" 1
@var color      lockedColor     "Change Locked Color (VIP Only)" #ffc83d
@var color      chapterColor    "Set Chapter Color" #e93b3b
@var color      chapterText     "Set Chapter Text Color" #fff
@var checkbox   unsubmitted     "Use Unsubmitted Category Colors" 0
@var checkbox   flatStyle       "Flat Style Dropdown" 0
@var color      flatStyleColor  "Flat Dropdown Color" #333
==/UserStyle== */

@-moz-document domain("youtube.com") {
    select[class="sponsorTimeEditSelector sponsorTimeCategories"] > option, select[class="sponsorTimeCategories sponsorTimeEditSelector"] > option {
        if textBold {
            font-weight: bold;
        }
        if outlineText {
            text-shadow: -1px 1px 0 outlineColor, 1px 1px 0 outlineColor,1px -1px 0 outlineColor,-1px -1px 0 outlineColor !important;
            if (color-style == 'color-background') {
                color: #fff !important;
            }
        }
    }
    body option[class="sponsorBlockLockedColor"] {
        color: lockedColor !important;
        if lockedBold {
            font-weight: bold;
        }
    }
    .sponsorTimeEditSelector {
        background-color: rgba(28, 28, 28, .9) !important;
        if unsubmitted {
            --sb-category-sponsor: var(--sb-category-preview-sponsor);
            --sb-category-selfpromo: var(--sb-category-preview-selfpromo);
            --sb-category-interaction: var(--sb-category-preview-interaction);
            --sb-category-intro: var(--sb-category-preview-intro);
            --sb-category-outro: var(--sb-category-preview-outro);
            --sb-category-preview: var(--sb-category-preview-preview);
            --sb-category-filler: var(--sb-category-preview-filler);
            --sb-category-music_offtopic: var(--sb-category-preview-music_offtopic);
        }
        if flatStyle {
            border: solid #0000 !important;
            border-radius: 6px;
            background-color: flatStyleColor !important;
        }
    }
    .sponsorTimeEditInput {
        if flatStyle {
        border: solid #0000 !important;
        border-radius: 6px;
        background-color: flatStyleColor !important;
        }
    }
    option[value="sponsor"] {
        if (color-style == 'color-text') {
            color: var(--sb-category-sponsor) !important;
            }
        if (color-style == 'color-background') {
            background-color: var(--sb-category-sponsor) !important;
            color: var(--sb-category-text-sponsor) !important;
            }
        }
    option[value="selfpromo"] {
        if (color-style == 'color-text') {
            color: var(--sb-category-selfpromo) !important;
        }
        if (color-style == 'color-background') {
            background-color: var(--sb-category-selfpromo) !important;
            color: var(--sb-category-text-selfpromo) !important;
        }
    }
    option[value="exclusive_access"] {
        if (color-style == 'color-text') {
            color: var(--sb-category-exclusive_access) !important;
        }
        if (color-style == 'color-background') {
            background-color: var(--sb-category-exclusive_access) !important;
            color: var(--sb-category-text-exclusive_access) !important;
        }
    }
    option[value="interaction"] {
        if (color-style == 'color-text') {
            color: var(--sb-category-interaction) !important;
        }
        if (color-style == 'color-background') {
            background-color: var(--sb-category-interaction) !important;
            color: var(--sb-category-text-interaction) !important;
        }
    }
    option[value="poi_highlight"] {
        if (color-style == 'color-text') {
            color: var(--sb-category-poi_highlight) !important;
        }
        if (color-style == 'color-background') {
            background-color: var(--sb-category-poi_highlight) !important;
            color: var(--sb-category-text-poi_highlight) !important;
        }
    }
    option[value="intro"] {
        if (color-style == 'color-text') {
            color: var(--sb-category-intro) !important;
        }
        if (color-style == 'color-background') {
            background-color: var(--sb-category-intro) !important;
            color: var(--sb-category-text-intro) !important;
        }
    }
    option[value="outro"] {
        if (color-style == 'color-text') {
            color: var(--sb-category-outro) !important;
        }
        if (color-style == 'color-background') {
            background-color: var(--sb-category-outro) !important;
            color: var(--sb-category-text-outro) !important;
        }
    }
    option[value="preview"] {
        if (color-style == 'color-text') {
            color: var(--sb-category-preview) !important;
        }
        if (color-style == 'color-background') {
            background-color: var(--sb-category-preview) !important;
            color: var(--sb-category-text-preview) !important;
        }
    }
    option[value="filler"] {
        if (color-style == 'color-text') {
            color: var(--sb-category-filler) !important;
        }
        if (color-style == 'color-background') {
            background-color: var(--sb-category-filler) !important;
            color: var(--sb-category-text-filler) !important;
        }
    }
    option[value="chapter"] {
        if (color-style == 'color-text') {
            color: chapterColor !important;
        }
        if (color-style == 'color-background') {
            background-color: chapterColor !important;
            color: chapterText !important;
        }
    }
    option[value="music_offtopic"] {
        if (color-style == 'color-text') {
            color: var(--sb-category-music_offtopic) !important;
        }
        if (color-style == 'color-background') {
            background-color: var(--sb-category-music_offtopic) !important;
            color: var(--sb-category-text-music_offtopic) !important;
        }
    }
}

sponsorblock.colorcodeddropdown.user.js

// ==UserScript==
// @name         SponsorBlock Colored Category Dropdown
// @version      1.3.0
// @description  Styles the dropdown list in the submission menu with each categories respective color.
// @homepageURL  https://gist.github.com/jiraph/
// @author       jiraph
// @match        https://www.youtube.com/*
// @icon         https://sponsor.ajay.app/LogoSponsorBlockSimple256px.png
// @grant        GM_addStyle
// @updateURL    https://gist.github.com/jiraph/e60d0a7ae7071f1f4ef060948d50a9a1/raw/sponsorblock.colorcodeddropdown.user.js
// @downloadURL  https://gist.github.com/jiraph/e60d0a7ae7071f1f4ef060948d50a9a1/raw/sponsorblock.colorcodeddropdown.user.js
// ==/UserScript==

const css=`

/* EDIT CHAPTER COLOR */
    option[value="chapter"] {
        --chapterColor: #e93b3b;
        --chapterText:  #ffffff;
    }

/* TEXT OUTLINE (FIREFOX ONLY) (UN-COMMENT TO ENABLE) */
/*
    select[class="sponsorTimeEditSelector sponsorTimeCategories"] > option, select[class="sponsorTimeCategories sponsorTimeEditSelector"] > option {
        color: white !important;
        text-shadow: -1px 1px 0 black, 1px 1px 0 black,1px -1px 0 black,-1px -1px 0 black !important;
    }
*/

/* BOLD ALL TEXT (UN-COMMENT TO ENABLE) */
/*
    select[class="sponsorTimeEditSelector sponsorTimeCategories"] > option, select[class="sponsorTimeCategories sponsorTimeEditSelector"] > option {
        font-weight: bold !important;
    }
*/

/* BOLD LOCKED CATEGORIES (VIP ONLY) */
    body option[class="sponsorBlockLockedColor"] {
        color: #ffc83d !important;
        font-weight: bold !important;
    }

/* ~ CHOOSE COLORED BACKGROUND OR COLORED TEXT ~ */

/* COLORED BACKGROUND (COMMENT TO DISABLE) */
    option[value="sponsor"] {
        background-color: var(--sb-category-sponsor) !important;
        color: var(--sb-category-text-sponsor) !important;
        }
    option[value="selfpromo"] {
        background-color: var(--sb-category-selfpromo) !important;
        color: var(--sb-category-text-selfpromo) !important;
        }
    option[value="exclusive_access"] {
        background-color: var(--sb-category-exclusive_access) !important;
        color: var(--sb-category-text-exclusive_access) !important;
        }
    option[value="interaction"] {
        background-color: var(--sb-category-interaction) !important;
        color: var(--sb-category-text-interaction) !important;
        }
    option[value="poi_highlight"] {
        background-color: var(--sb-category-poi_highlight) !important;
        color: var(--sb-category-text-poi_highlight) !important;
        }
    option[value="intro"] {
        background-color: var(--sb-category-intro) !important;
        color: var(--sb-category-text-intro) !important;
        }
    option[value="outro"] {
        background-color: var(--sb-category-outro) !important;
        color: var(--sb-category-text-outro) !important;
        }
    option[value="preview"] {
        background-color: var(--sb-category-preview) !important;
        color: var(--sb-category-text-preview) !important;
        }
    option[value="filler"] {
        background-color: var(--sb-category-filler) !important;
        color: var(--sb-category-text-filler) !important;
        }
    option[value="chapter"] {
        background-color: var(--chapterColor) !important;
        color: var(--chapterText) !important;
        }
    option[value="music_offtopic"] {
        background-color: var(--sb-category-music_offtopic) !important;
        color: var(--sb-category-text-music_offtopic) !important;
        }

/* COLORED TEXT (UN-COMMENT TO ENABLE) */
    /*
    option[value="sponsor"] {
        color: var(--sb-category-sponsor) !important;
        }
    option[value="selfpromo"] {
        color: var(--sb-category-selfpromo) !important;
        }
    option[value="exclusive_access"] {
        color: var(--sb-category-exclusive_access) !important;
        }
    option[value="interaction"] {
        color: var(--sb-category-interaction) !important;
        }
    option[value="poi_highlight"] {
        color: var(--sb-category-poi_highlight) !important;
        }
    option[value="intro"] {
        color: var(--sb-category-intro) !important;
        }
    option[value="outro"] {
        color: var(--sb-category-outro) !important;
        }
    option[value="preview"] {
        color: var(--sb-category-preview) !important;
        }
    option[value="filler"] {
        color: var(--sb-category-filler) !important;
        }
    option[value="chapter"] {
        color: var(--chapterColor) !important;
        }
    option[value="music_offtopic"] {
        color: var(--sb-category-music_offtopic) !important;
        }
    */
`
GM_addStyle(css);

sponsorblock.simplethumbnaillabels.user.css

/* ==UserStyle==
@name           SponsorBlock Simple Thumbnail Label
@description    Styles the SponsorBlock thumbnail label to match YouTube's existing badges.
@namespace      sponsorblock-simple-thumbnail-label
@homepageURL    https://gist.github.com/jiraph/
@updateURL      https://gist.github.com/jiraph/e60d0a7ae7071f1f4ef060948d50a9a1/raw/sponsorblock.simplethumbnaillabels.user.css
@author         jiraph
@version        1.0.10
@preprocessor   stylus
@var select corner "Position" {
    'Bottom Left*'      :'bottomleft',
    'Top Left'          :'topleft',}
@var select labelStyle 'Style' {
    'Colored Text*'     :'textcolor',
    'Colored Background':'bgcolor',
    'White Text'        :'textwhite',}
@var color      customEA    "Custom Exclusive Access Text Color" #01e1bc
@var checkbox   customEAon  "Enable Custom Exclusive Access Text Color" 1
@var checkbox   hideLogo    "Hide SponsorBlock Logo" 0
@var checkbox   allCaps     "All Caps Label" 0
==/UserStyle== */
@-moz-document domain("youtube.com") {
    .sponsorThumbnailLabel {
        bottom: var(--ytrb-bar-height, 0) !important;
        if (corner == 'bottomleft'){
        top: auto !important;
        }
        left: 0;
        border-radius: 4px !important;
        opacity: 1 !important;
        margin: 4px 50px 4px 4px !important;
        height: 14px !important;
        max-width: calc(100% - 60px);
        padding: 3px 4px !important;
        font-weight: var(--yt-badge-font-weight,500);
        line-height: var(--yt-badge-line-height-size,1.2rem);
        align-items: center;
        white-space: nowrap !important;
        z-index: 0 !important;
        pointer-events: none;
        if (labelStyle == 'textwhite') {
        --category-text-color: white !important;
        }
        if (labelStyle == 'bgcolor') {
            background-color: var(--category-color);
        } else if (labelStyle == 'textcolor' || labelStyle == 'textwhite') {
            background-color: var(--yt-spec-static-overlay-background-heavy)!important;
            box-shadow: none !important;
            if (labelStyle == 'textcolor') {
            --sb-category-preview-selfpromo: var(--sb-category-selfpromo);
            --sb-category-preview-sponsor: var(--sb-category-sponsor);
            } if customEAon {
            --sb-category-preview-exclusive_access: customEA
            }
        }
    }
    ytd-thumbnail.ytd-rich-grid-media > .sponsorThumbnailLabel {
        margin: 8px 50px 8px 8px !important;
    }
    ytd-thumbnail:hover .sponsorThumbnailLabel {
        opacity: 0 !important;
        transition: opacity .6s .2s;
    }
    .sponsorThumbnailLabel svg {
        height: 1em !important;
        min-width: 1em !important;
        margin: 0 0.4em 0 0.1em;
        fill: var(--category-text-color, #fff);
        if hideLogo {
            display: none !important;
        }
        if (labelStyle == 'textcolor'){
            fill: var(--category-color) !important;
        }
    }
    .sponsorThumbnailLabel span{
        display: inline !important;
        overflow: hidden !important;
        max-height: 1.2rem;
        font-size: var(--yt-badge-font-size,1.2rem) !important;
        padding-left: 0px !important;
        if (labelStyle == 'textcolor'){
            color: var(--category-color) !important;
        }
        if allCaps {
            text-transform: uppercase;
        }
    }
}