Design fixes with Enchancer for Youtube addon
youtube.com - Design fixes by xcang
Details
Authorxcang
LicenseMIT
Categorywww.youtube.com
Created
Updated
Size19 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.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.com - Design fixes
@version 2024.08.21
@namespace github.com/openstyles/stylus
@description Design fixes with Enchancer for Youtube addon
@author X4
@license MIT
@var checkbox smaller_previews "Smaller previews" 0
@var checkbox wide_recommendations "Wide recommendations" 1
==/UserStyle== */
/* @preprocessor stylus */
@-moz-document domain("youtube.com") {
/* General styles */
/* Styled Scrollbar */
html {
scrollbar-color: var(--main-color) rgba(0, 0, 0, 0);
scrollbar-width: thin;
color-scheme: dark;
}
html:not([hide-scrollbar]) ::-webkit-scrollbar-thumb {
background: var(--main-color);
}
html:not([hide-scrollbar]) ::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0);
}
::-webkit-scrollbar-thumb {
background: var(--main-color);
}
body, #page-manager.ytd-app {
overflow-x: hidden !important;
}
/* Styled Search icon */
#search-icon-legacy.ytd-searchbox yt-icon.ytd-searchbox {
color: #ffffff !important;
}
/* Make video area styled for One Dark theme */
.html5-video-player.ytp-autonav-endscreen-cancelled-state {
background-color: transparent !important;
}
/* Subs fixes
.caption-window {
background-color: transparent !important;
} */
/* When menu is opened, blur background */
#scrim { /*.visible.app-drawer {*/
backdrop-filter: blur(5px);
background: #fff0;
}
/* Fix description date under video thumb for translation message on russian */
#meta.ytd-grid-video-renderer {
padding-right: 0px;
}
#metadata-line.ytd-grid-video-renderer, #metadata-line.ytd-video-meta-block {
max-height: calc(3 * var(--yt-thumbnail-attribution-line-height, 1.1rem)) !important;
line-height: 1.2 !important;
font-size: calc(var(--ytd-thumbnail-attribution_-_font-size) / 1.25) !important;
display: block;
/*letter-spacing: -0.2px;*/
word-break: break-all;
}
#metadata-line.ytd-grid-video-renderer span {
display: inline !important;
}
ytd-toggle-button-renderer.style-compact-gray[is-paper-button] tp-yt-paper-button.ytd-toggle-button-renderer {
padding: 0;
}
/* Make comments bold font more bolder */
.bold.yt-formatted-string {
font-weight: 700;
}
/* Hide controls */
/*.ytp-chrome-bottom .ytp-button,
.ytp-chrome-controls .ytp-button[aria-pressed=true],
.ytp-chrome-bottom .ytp-progress-bar-container,
.ytp-chrome-controls .ytp-time-display {
opacity: 0;
}
.ytp-chrome-controls .ytp-time-display {
transition: opacity .1s cubic-bezier(0.4,0.0,1,1);
}
.ytp-chrome-bottom .ytp-button:hover,
.ytp-chrome-controls .ytp-button[aria-pressed=true]:hover,
.ytp-chrome-bottom:hover .ytp-progress-bar-container,
.ytp-chrome-controls:hover .ytp-time-display {
opacity: 1;
}*/
:is(.ytp-chrome-bottom, .ytp-chrome-controls) :is(.ytp-button, .ytp-button[aria-pressed=true], .ytp-progress-bar-container, .ytp-time-display) {
opacity: 0;
}
.ytp-chrome-controls .ytp-time-display {
transition: opacity .1s cubic-bezier(0.4,0.0,1,1);
}
:is(.ytp-chrome-bottom, .ytp-chrome-controls) :is(.ytp-button, .ytp-button[aria-pressed=true]):hover,
:is(.ytp-chrome-bottom, .ytp-chrome-controls):hover :is(.ytp-progress-bar-container, .ytp-time-display) {
opacity: 1;
}
/* Remove padding from video to title */
html.efyt-control-bar-position-absolute ytd-watch-flexy[theater] #columns.ytd-watch-flexy/*, html.efyt-control-bar-position-absolute ytd-watch-flexy:not([theater]) #columns #primary #alerts.ytd-watch-flexy:not(:empty), html.efyt-control-bar-position-absolute ytd-watch-flexy:not([theater]) #columns #primary #messages.ytd-watch-flexy:not(:empty), html.efyt-control-bar-position-absolute ytd-watch-flexy:not([theater]) #columns #primary #clarify-box.ytd-watch-flexy:not(:empty), html.efyt-control-bar-position-absolute ytd-watch-flexy:not([theater]) #columns #primary #info.ytd-watch-flexy*/ {
padding-top: 0;
}
/* Remove height limit in notification comments */
.message.ytd-notification-renderer {
max-height: unset !important;
}
/* Make compact buttons for clip, share, save */
/*ytd-menu-renderer.ytd-video-primary-info-renderer ytd-button-renderer,
ytd-menu-renderer.ytd-video-primary-info-renderer ytd-toggle-button-renderer:not(:first-of-type),
ytd-menu-renderer.ytd-video-primary-info-renderer ytd-download-button-renderer {
position: relative;
}
ytd-menu-renderer.ytd-video-primary-info-renderer ytd-button-renderer yt-formatted-string.ytd-button-renderer,
ytd-menu-renderer.ytd-video-primary-info-renderer ytd-toggle-button-renderer:not(:first-of-type) yt-formatted-string.ytd-toggle-button-renderer,
ytd-menu-renderer.ytd-video-primary-info-renderer ytd-download-button-renderer yt-formatted-string.ytd-download-button-renderer {
display: none;
position: absolute;
top: -16px;
white-space: nowrap;
}
ytd-menu-renderer.ytd-video-primary-info-renderer ytd-button-renderer:hover yt-formatted-string.ytd-button-renderer,
ytd-menu-renderer.ytd-video-primary-info-renderer ytd-toggle-button-renderer:not(:first-of-type):hover yt-formatted-string.ytd-toggle-button-renderer,
ytd-menu-renderer.ytd-video-primary-info-renderer ytd-download-button-renderer:hover yt-formatted-string.ytd-download-button-renderer {
display: block;
background: var(--second-background);
}*/
#above-the-fold {
display: grid;
/*grid-template-columns: 1fr minmax(auto, 1.5fr);*/
/*grid-template-columns: 1fr max-content;*/
grid-template-columns: 1fr minmax(min-content, 800px);
grid-template-rows: auto auto;
container-type: inline-size;
container-name: title-description;
& #super-title.ytd-watch-metadata {
position: absolute;
top: -12px;
}
> #title {
> a:has(> yt-icon#super-title-icon) {
position: absolute;
top: -12px;
left: -16px;
}
& h1.ytd-watch-metadata {
max-height: unset !important;
display: block !important;
-webkit-box-orient: unset !important;
overflow: visible !important;
}
}
> #top-row.ytd-watch-metadata {
display: grid;
grid-template-columns: auto auto;
width: clamp(400px, 100%, 800px);
justify-content: end;
justify-self: end;
/* Sponsor button text to icon */
:is(#sponsor-button.ytd-video-owner-renderer:not(:empty), #purchase-button.ytd-video-owner-renderer:not(:empty), #analytics-button.ytd-video-owner-renderer:not(:empty)) button {
position: relative;
&::before {
content: "💰";
font-size: 20px;
padding: 0 5px;
}
> div {
display: none;
position: absolute;
top: -40px;
z-index: 2;
background-color: var(--yt-spec-badge-chip-background);
border-radius: 20px;
padding: 0 10px;
}
&:hover {
background-color: var(--yt-spec-10-percent-layer) !important;
> div {
display: block;
}
}
}
}
> #bottom-row {
grid-row: 3;
grid-column: 1 / 3;
}
}
@container title-description (width < 1000px) {
#above-the-fold {
/* grid-template-columns: 1fr minmax(min-content, 300px) !important; */
> #top-row {
grid-template-columns: 1fr !important;
grid-template-rows: auto auto !important;
}
}
}
@container title-description (width < 870px) {
#above-the-fold {
> #title {
grid-row: 1;
grid-column: 1 / -1;
}
> #top-row {
grid-row: 2;
grid-column: 1 / -1;
}
> #middle-row {
grid-row: 3;
grid-column: 1 / -1;
}
> #bottom-row {
grid-row: 4;
grid-column: 1 / -1;
}
}
}
/* Hide extra buttons when window width < 1300px */
@media screen (width < 1300px) {
ytd-menu-renderer:not([condensed]) .ytd-menu-renderer[button-renderer]+.ytd-menu-renderer[button-renderer],
.ytd-menu-renderer[button-renderer]+template.ytd-menu-renderer+#button.ytd-menu-renderer,
#flexible-item-buttons.ytd-menu-renderer:not(:empty)>.ytd-menu-renderer[button-renderer],
#top-level-buttons-computed.ytd-menu-renderer:not(:empty)+#flexible-item-buttons.ytd-menu-renderer+#button.ytd-menu-renderer,
ytd-menu-renderer[has-items] yt-button-shape.ytd-menu-renderer {
display: none !important;
}
}
#top-row ytd-menu-renderer[has-flexible-items] {
overflow-y: unset !important;
}
#actions #menu :is(ytd-button-renderer, yt-button-view-model) {
& .yt-spec-button-shape-next__button-text-content {
position: absolute;
top: calc(-100% - 5px);
white-space: nowrap;
background: var(--yt-spec-badge-chip-background);
border-radius: 20px;
padding: 0 10px;
pointer-events: none;
display: none;
}
& button:hover .yt-spec-button-shape-next__button-text-content {
display: flex;
}
& .yt-spec-button-shape-next__size-m.yt-spec-button-shape-next__icon-leading .yt-spec-button-shape-next__icon {
margin: 0 !important;
}
}
#top-row :is(#sponsor-button > ytd-button-renderer, ytd-subscribe-button-renderer) button > div > span {
position: absolute;
color: var(--main-text);
top: calc(-100% - 5px);
left: 50%;
translate: -50%;
white-space: nowrap;
background: var(--yt-spec-badge-chip-background);
border-radius: 20px;
padding: 0 10px;
pointer-events: none;
display: none;
}
#top-row :is(#sponsor-button > ytd-button-renderer, ytd-subscribe-button-renderer) button:hover > div > span {
display: block;
}
#top-row ytd-subscribe-button-renderer button.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled > div:first-of-type::before {
content: "🖤";
filter: contrast(.67) brightness(.6);
}
#top-row ytd-subscribe-button-renderer button.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal > div:first-of-type::before {
content: "💙";
filter: contrast(.67) brightness(1.12);
}
#top-row #sponsor-button > ytd-button-renderer button.yt-spec-button-shape-next--mono > div:first-of-type::before {
content: "💸";
filter: contrast(.67) brightness(.6);
}
#top-row #upload-info.ytd-video-owner-renderer {
margin-right: 12px;
}
/* Fix squash...