"Ultimate YouTube Enhancement Suite: Custom captions, UI/UX improvements, ad removal, dark mode tweaks, and performance optimizations."
YouTube Ultimate Enhancement Suite by sid254
Details
Authorsid254
LicenseMIT
Categoryyoutube.com
Created
Updated
Code size12 kB
Code checksume8c165a4
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
YouTube Captions Ultimate Enhancement Suite - Userstyle
Version: 2.2.0
Author: sid254(GitHub)
License: MIT
Homepage: https://userstyles.world/style/21342/youtube-ultimate-enhancement-suite
Important Note: Due to character limits on UserStyles.world, the version hosted there might be truncated or slightly older. For the full, latest, and recommended version of the code, please refer to:
- [Link to GitHub Gist/Repo or Pastebin where you host the full code - REQUIRED]
(You'll need to create a Gist, repo, or Pastebin link and put it here)
Description
This userstyle provides fine-grained control over your YouTube desktop experience, focusing primarily on fully customizable closed captions, while also offering numerous UI, performance, and layout enhancements. Take back control of your viewing experience!
Default Caption Style (Fully Customizable):
- Font: Bold Arial
- Size: 122%
- Color: White Text
- Outline: Thin Black Outline
- Background: None
Other Features:
- UI Cleanup (Ads, Promotions)
- Enhanced Theater Mode
- Hidden Endscreen Cards/Annotations
- Cleaner Player Controls
- Optimized Comments & Description Layout
- Optional Performance Tweaks
- Deeper Dark Mode
- Improved Accessibility Focus
Installation
- Install the Stylus Browser Extension (Chrome, Firefox, Opera, Edge).
- Install the full code from the link provided in the Important Note above.
- How: Copy the entire code from the source linked above. Open Stylus > Manage > Write new style. Paste the code. Ensure it "Applies to"
Domain: youtube.com. Save it (e.g., name it "YouTube Captions Ultimate Enhancement Suite"). - (Alternatively, if using the potentially truncated UserStyles.world version): Click the "Install Style" button on the Homepage Link. Be aware this might lack some features or recent fixes due to length limits.
- How: Copy the entire code from the source linked above. Open Stylus > Manage > Write new style. Paste the code. Ensure it "Applies to"
Granular Customization (Edit Variables)
This style offers significant control via CSS variables found near the top of the code. Edit these lines to tailor the experience precisely to your liking!
-
Open Stylus > Manage.
-
Find "YouTube Captions Ultimate Enhancement Suite" and click "Edit" (pencil icon).
-
Locate the
/* CUSTOMIZATION VARIABLES */section. -
Modify the values on the specified lines:
Caption Appearance:
- Line 17:
--yt-caption-size:- Change font size (Default:122%). Ex:100%,150%,24px. - Line 18:
--yt-caption-text-color:- Change text color (Default:white). Ex:#FFFF00(Yellow),aqua. - Line 19:
--yt-caption-font-family:- Change font (Default:"Arial", sans-serif). Ex:"Roboto", sans-serif,"Verdana", sans-serif. (Note: Font must be installed on your system or be a common web font). - Line 21:
--yt-caption-text-shadow:- Change text outline/shadow (Default: Thin Black Outline). For no outline, change the multi-line value tonone;. For a different outline, adjust pixel offsets and color (e.g.,1px 1px 1px #FFFFFFfor a thin white outline). - Line 26:
--yt-caption-bottom-position:- Change distance from bottom (Default:5%). Ex:3%(Lower),10%(Higher).
Caption Font Weight (Bold/Normal):
- The default style uses Bold text. This is set directly in the CSS rules (around Lines 55 & 78). To make text normal weight, find
font-weight: bold !important;in those sections and change it tofont-weight: normal !important;.
Optional Caption Background/Highlight (Disabled by Default):
- Line 29:
--yt-caption-background:- To add a background box, remove the/*and*/around this line and the correspondingbackground-colorrule around Line 80. Adjustrgbavalue for color/opacity. - Line 30:
--yt-caption-highlight:- To add a highlight to active segments (like default YT), remove/*and*/around this line and the.ytp-caption-segment:not(:empty)rule block around Line 118.
General UI:
- Line 34:
--yt-content-width:- Max width for comments/description (Default:1100px). - Line 35:
--yt-theater-mode-height:- Player height in theater mode (Default:85vh). - Line 36:
--yt-scrollbar-width:- Custom scrollbar width (Default:10px). - Line 37:
--yt-scrollbar-color:- Custom scrollbar color (Default:rgba(255, 255, 255, 0.25)).
Theme & Accessibility:
- Line 40/41:
--yt-dark-bg/--yt-darker-bg- Adjust dark mode background colors. - Line 42:
--yt-accent:- Change focus ring color (Default:#ff4444).
- Line 17:
-
Save the changes in Stylus.
-
Refresh any open YouTube tabs to see your customizations!
Optional Features (Enable/Disable by Commenting)
Besides variables, you can toggle larger features by commenting out CSS blocks (/* ... */).
- Reduced Animations: Search for
/* ===== PERFORMANCE OPTIMIZATIONS ===== */. The thumbnail hover effects are disabled by default. More aggressive global animation reduction is commented out – uncomment cautiously. - Specific Element Hiding: Don't want endscreen cards hidden? Find
.ytp-ce-element, ...around Line 128 and comment out that rule block. Similarly for ads/promotions around Line 145.
Known Issues & Maintenance
- UserStyles.world Character Limit: The version on UserStyles may be incomplete. Always grab the full code from the link provided at the top of this README.
- YouTube Updates: YouTube changes break things! Selectors (especially for captions and ads) will need updating over time. Learning basic browser inspection (Right-click > Inspect) helps fix this.
- Ad Blocking: CSS hides ads, it doesn't block them like uBlock Origin. Use alongside a dedicated blocker for best results.
- Conflicts: May clash with other YT styles/extensions. Test by disabling others if issues occur.
Contributing / Feedback
Found a bug or have suggestions? Please reach out via Github: (sid254)
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name YouTube Captions Ultimate Enhancement Suite
@namespace github.com/openstyles/stylus
@version 2.2.1
@description Comprehensive YouTube enhancement: Fixes caption size (Default: Bold White Arial 122% w/ Outline), improves UI, optimizes performance. Fully customizable via CSS variables. CSSLint Clean.
@author sid254
@homepageURL https://userstyles.world/style/21342/youtube-ultimate-enhancement-suite
@license MIT
==/UserStyle== */
@-moz-document domain("youtube.com") {
/* CUSTOMIZATION VARIABLES - Edit these for granular control! (Line numbers approx) */
:root {
/* --- Core Caption Styling --- */
--yt-caption-size: 122%; /* (Line 17) Font size. Examples: 100%, 150%, 22px */
--yt-caption-text-color: white; /* (Line 18) Text color. Examples: white, #FFFF00 (Yellow), #00FF00 (Green) */
--yt-caption-font-family: "Arial", sans-serif; /* (Line 19) Font. Examples: "Roboto", "Verdana", "Tahoma", sans-serif */
/* (Line 21) Text outline/shadow. Set to 'none' for no outline. */
--yt-caption-text-shadow:
-1px -1px 1px #000000,
1px -1px 1px #000000,
-1px 1px 1px #000000,
1px 1px 1px #000000;
--yt-caption-bottom-position: 5%; /* (Line 26) Distance from bottom edge. Examples: 3%, 10%, 15% */
/* --- Optional Caption Styling (If re-enabling background/highlight) --- */
/* --yt-caption-background: rgba(0, 0, 0, 0.75); */ /* (Line 29 - Currently Disabled) Background box color */
/* --yt-caption-highlight: rgba(255, 255, 0, 0.15); */ /* (Line 30 - Currently Disabled) Highlight for active segment */
/* --- General UI Customization --- */
--yt-content-width: 1100px; /* (Line 34) Max width for comments, description */
--yt-theater-mode-height: 85vh; /* (Line 35) Player height in theater mode */
--yt-scrollbar-width: 10px; /* (Line 36) Width of custom scrollbars */
--yt-scrollbar-color: rgba(255, 255, 255, 0.25); /* (Line 37) Color of scrollbar thumb */
/* --- Color Scheme & Accessibility --- */
--yt-dark-bg: #0f0f0f; /* (Line 40) Dark mode main background */
--yt-darker-bg: #000000; /* (Line 41) Dark mode header/menus background */
--yt-accent: #ff4444; /* (Line 42) Accent color for focus rings */
}
/* ===== CORE CAPTION SYSTEM OVERHAUL ===== */
/* --- Container Styling & Positioning --- */
.ytp-caption-window-container,
.caption-window,
.ytp-caption-window,
.caption-window.ytp-caption-window-bottom {
font-size: var(--yt-caption-size) !important;
font-family: var(--yt-caption-font-family) !important;
font-weight: bold !important; /* Edit here to change weight */
line-height: 1.3em !important;
bottom: var(--yt-caption-bottom-position) !important;
transform: none !important;
max-width: 85% !important;
margin: 0 auto !important;
pointer-events: none !important;
z-index: 2147483647 !important;
background: none !important;
border: none !important;
text-align: center;
}
/* --- Text Segment Styling --- */
.ytp-caption-segment,
.captions-text,
.captions-text > span,
.caption-visual-line,
.ytp-caption-segment > span,
.caption-window span {
font-size: 1em !important; /* Inherit from container */
font-weight: inherit !important; /* Inherit from container (bold) */
line-height: inherit !important; /* Inherit from container */
color: var(--yt-caption-text-color) !important;
text-shadow: var(--yt-caption-text-shadow) !important;
/* Ensure clean text style & satisfy CSSLint */
background: none !important; /* Use shorthand only */
/* Removed background-color, padding, margin for display:inline compatibility */
border-radius: 0 !important;
display: inline !important; /* Ensure text flows naturally */
box-shadow: none !important;
border: none !important;
/* Essential overrides */
transform: none !important;
pointer-events: auto !important;
transition: none !important;
animation: none !important;
}
/* --- HTML5 Player & WebVTT Specifics --- */
.html5-video-player .captions-text,
.html5-video-player[caption-display-style] .captions-text,
video::-webkit-media-text-track-display,
video::-webkit-media-text-track-container,
video::cue,
.html5-video-container::cue {
font-size: var(--yt-caption-size) !important;
font-family: var(--yt-caption-font-family) !important;
font-weight: bold !important; /* Apply bold here too */
color: var(--yt-caption-text-color) !important;
text-shadow: var(--yt-caption-text-shadow) !important;
background: none !important; /* Use shorthand only */
/* Removed background-color */
transform: none !important;
line-height: 1.3em !important;
padding: 0 !important; /* Keep padding reset for ::cue */
outline: none !important;
}
/* --- REMOVED Optional Highlight --- */
/* (Highlight rule is intentionally removed/commented out) */
/* ===== VIDEO PLAYER ENHANCEMENTS ===== */
/* (Enhancements like Theater Mode, Endscreen removal etc. remain unchanged below) */
/* Enhanced Theater Mode */
.ytd-watch-flexy[theater] #player-theater-container.ytd-watch-flexy { min-height: var(--yt-theater-mode-height) !important; max-height: calc(100vh - 56px) !important; }
/* Remove Endscreen Elements & Annotations */
.ytp-ce-element, .ytp-ce-covering-overlay, .ytp-ce-element-shadow, .ytp-ce-covering-image, .ytp-ce-expanding-image, .ytp-ce-element.ytp-ce-channel, .ytp-ce-element.ytp-ce-video, .ytp-ce-element.ytp-ce-playlist, .ytp-iv-player-content, .annotation { display: none !important; }
/* Clean Player Controls Background */
.ytp-chrome-controls { background: linear-gradient(to top, rgba(0,0,0,0.7), transparent) !important; padding-top: 10px !important; }
/* Enlarge Volume Controls Area */
.ytp-volume-panel { width: 80px !important; } .ytp-volume-slider { width: 60px !important; }
/* ===== UI IMPROVEMENTS ===== */
/* (UI improvements like Ad Hiding, Scrollbars, Comments etc. remain unchanged below) */
/* Hide Promotional/Ad Content */
ytd-promoted-sparkles-web-renderer, ytd-promoted-video-renderer, ytd-display-ad-renderer, ytd-ad-slot-renderer, ytd-in-feed-ad-layout-renderer, ytd-banner-promo-renderer, ytd-statement-banner-renderer, ytd-video-masthead-ad-v3-renderer, ytd-engagement-panel-section-list-renderer[visibility="ENGAGEMENT_PANEL_VISIBILITY_EXPANDED"][data-panel-identifier="shopping-engagement-panel"], .ytd-rich-section-renderer[is-storefronts-engagement-panel], yt-mealbar-promo-renderer, ytd-merch-shelf-renderer, .ytd-watch-metadata iron-overlay-backdrop, .masthead-ad, #masthead-ad { display: none !important; }
/* Enhanced Scrollbars */
::-webkit-scrollbar { width: var(--yt-scrollbar-width) !important; background-color: transparent !important; } ::-webkit-scrollbar-thumb { background-color: var(--yt-scrollbar-color) !important; border-radius: calc(var(--yt-scrollbar-width) / 2) !important; border: 2px solid transparent; background-clip: content-box; } #guide-inner-content::-webkit-scrollbar, ytd-browse[page-subtype="subscriptions"] #contents::-webkit-scrollbar { width: var(--yt-scrollbar-width) !important; } #guide-inner-content::-webkit-scrollbar-thumb, ytd-browse[page-subtype="subscriptions"] #contents::-webkit-scrollbar-thumb { background-color: var(--yt-scrollbar-color) !important; border-radius: calc(var(--yt-scrollbar-width) / 2) !important; border: 2px solid transparent; background-clip: content-box; }
/* Cleaned Up Comments Section Layout */
ytd-comments #sections > *.ytd-comments { max-width: var(--yt-content-width) !important; margin-left: auto !important; margin-right: auto !important; } ytd-comment-thread-renderer { background-color: rgba(255, 255, 255, 0.02); border-radius: 8px !important; margin-bottom: 12px !important; padding: 12px 16px !important; transition: background-color 0.2s ease-in-out !important; } ytd-comment-thread-renderer:hover { background-color: rgba(255, 255, 255, 0.04) !important; } ytd-comment-renderer #content { padding: 0 !important; }
/* Clean Sidebar */
ytd-watch-next-secondary-results-renderer { max-width: 420px !important; margin-left: 24px !important; } #primary.ytd-watch-flexy { max-width: calc(100% - 444px) !important; }
/* Enhanced Video Description Box */
#description.ytd-watch-metadata, #info.ytd-watch-metadata { max-width: var(--yt-content-width) !important; margin: 16px auto !important; padding: 16px !important; border-radius: 8px !important; background-color: rgba(255, 255, 255, 0.03) !important; }
/* Video cards grid improvements */
ytd-rich-grid-renderer { --ytd-rich-grid-items-per-row: auto !important; margin: 0 auto !important; max-width: 95vw !important; }
/* ===== PERFORMANCE OPTIMIZATIONS ===== */
/* (Performance tweaks remain unchanged below) */
ytd-thumbnail:hover::before, ytd-thumbnail-overlay-toggle-button-renderer, ytd-thumbnail-overlay-now-playing-renderer, ytd-thumbnail-overlay-loading-preview-renderer, ytd-thumbnail-overlay-inline-unplayable-renderer { opacity: 1 !important; transition: none !important; animation: none !important; } ytd-thumbnail:hover { transform: none !important; } ytd-rich-item-renderer:hover { transform: none !important; }
/* ===== DARK MODE ENHANCEMENTS ===== */
/*...