Skip to content

Instantly share code, notes, and snippets.

@kckarnige
Last active May 20, 2025 23:47
Show Gist options
  • Save kckarnige/d2d165fa796e7a84eab1717f89532627 to your computer and use it in GitHub Desktop.
Save kckarnige/d2d165fa796e7a84eab1717f89532627 to your computer and use it in GitHub Desktop.
A UserStyle for anyone using Tabview for YouTube: https://github.com/tabview-youtube/Tabview-YouTube-Totara/
/* ==UserStyle==
@name You(r)Tubular
@namespace github.com/kckarnige
@version 1.0.0
@description Makes the YouTube tabview UserScript fit in with YouTube's UI style.
@author KiCKTheBucket
==/UserStyle== */
@-moz-document domain("youtube.com") {
html[dark],
html[dark]>body {
color-scheme: dark;
}
[fill*="#FF0000"],
[fill*="#F00"],
[fill*="red"] {
fill: var(--yt-spec-static-brand-red) !important;
}
.ytp-settings-button.ytp-hd-quality-badge:after,
.ytp-settings-button.ytp-hdr-quality-badge:after,
.ytp-settings-button.ytp-4k-quality-badge:after,
.ytp-settings-button.ytp-5k-quality-badge:after,
.ytp-settings-button.ytp-8k-quality-badge:after,
.ytp-settings-button.ytp-3d-badge-grey:after,
.ytp-settings-button.ytp-3d-badge:after,
.ytp-swatch-background-color {
background-color: var(--yt-spec-static-brand-red);
}
ytd-watch-flexy:not([theater]):not([fullscreen]):not([no-top-margin]):not([reduced-top-margin]) #secondary.ytd-watch-flexy {
padding-top: 0px;
}
ytd-watch-flexy:not([theater]):not([fullscreen]):not([no-top-margin]):not([reduced-top-margin]) #primary.ytd-watch-flexy {
padding-top: 0px;
}
ytd-subscribe-button-renderer .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled {
color: var(--yt-spec-static-brand-white);
background-color: var(--yt-spec-static-brand-red);
}
ytd-subscribe-button-renderer .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled:hover {
color: var(--yt-spec-static-brand-white);
background-color: var(--yt-spec-brand-button-background);
}
/* Tab Stuff */
@supports (color: var(--tabview-tab-btn-define)) {
html {
--tyt-tab-btn-flex-grow: 1;
--tyt-tab-btn-flex-basis: 0%;
--tyt-tab-bar-color-1-def: var(--yt-brand-light-red);
--tyt-tab-bar-color-2-def: var(--yt-spec-static-brand-red);
--tyt-tab-bar-color-1: var(--main-color, var(--tyt-tab-bar-color-1-def));
--tyt-tab-bar-color-2: var(--main-color, var(--tyt-tab-bar-color-2-def));
}
ytd-watch-flexy #right-tabs .tab-btn {
background-color: var(--yt-spec-badge-chip-background);
}
ytd-watch-flexy #right-tabs .tab-content {
background-color: var(--yt-spec-badge-chip-background);
}
ytd-watch-flexy #right-tabs .tab-btn[tyt-tab-content].active {
font-weight: 500;
outline: 0;
--tyt-tab-btn-color: var(--yt-spec-text-primary);
background-color: var(--yt-spec-outline) !important;
border-bottom: 2px var(--tyt-tab-bar-color-1) solid;
border-bottom-color: var(--tyt-tab-bar-color-2);
}
#right-tabs #material-tabs,
ytd-watch-flexy #right-tabs .tab-content {
border: none;
}
ytd-watch-flexy #right-tabs .tab-btn[tyt-tab-content] {
background-color: var(--yt-spec-badge-chip-background) !important;
}
secondary-wrapper {
padding-top: 0px;
}
ytd-watch-flexy #right-tabs .tab-content {
border-radius: 0 0 12px 12px;
}
[tyt-tab^="#"] #right-tabs #material-tabs {
border-radius: 12px 12px 0 0;
}
[tyt-tab^="#"] #right-tabs #material-tabs {
border-radius: 12px 12px 0 0;
}
}
}
@kckarnige
Copy link
Author

Requirements

uBlock Origin (Recommended) - Firefox - Chrome

Tampermonkey - Firefox - Chrome

Stylus - Firefox - Chrome

Tabview YouTube - UserScript Install

-> UserStyle Install <-

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment