Skip to content

Instantly share code, notes, and snippets.

@jiraph
Last active November 4, 2023 01:15
Show Gist options
  • Save jiraph/e60d0a7ae7071f1f4ef060948d50a9a1 to your computer and use it in GitHub Desktop.
Save jiraph/e60d0a7ae7071f1f4ef060948d50a9a1 to your computer and use it in GitHub Desktop.

Userstyles and UserScripts for SponsorBlock (by jiraph)

sponsorblock-simple-thumbnail-label

simple-label-1 simple-label-2

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:
dropdown-firefox dropdown-firefox-text
Chrome Colored Background: Chrome Colored Text:
dropdown-chrome dropdown-chrome-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)

/* ==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;
}
}
}
// ==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);
/* ==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.9
@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: 12px !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: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;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment