YouTube / The Way Bane Likes It by jordy3d

/* ==UserStyle==
@name         YouTube / The Way Bane Likes It
@version      20240228.01.04
@namespace    https://userstyles.world/user/jordy3d
@description  A bunch of minor modifications to YouTube that make it more in line with how I like it.
@author       jordy3d
@license      No License
==/UserStyle== */

@-moz-document domain("youtube.com") {
/*Changes*/

/*=====
  Dark Scrollbar
=====*/

::-webkit-scrollbar { width: 10px !important; }
::-webkit-scrollbar-track { background: #fff0; }
::-webkit-scrollbar-thumb { background: #222 !important; }
::-webkit-scrollbar-thumb:hover { background: #252525; }

/*=====
  Remove Feed Types
=====*/

[title="Shorts"] { display: none !important; } /*Shorts*/
[title="YouTube Music"] { display: none !important; } /*Music*/
[title="Library"] { display: none !important; } /*Library*/
[title="Downloads"] { display: none !important; } /*Downloads*/
[title="Your videos"] { display: none !important; } /*Your Videos*/

ytd-guide-entry-renderer:has(a[href*="youtubekids"]) { display: none; } /* YouTube Kids */


/*Mini Sidebar*/
ytd-mini-guide-entry-renderer:nth-child(2) { display: none; } /*Shorts*/
ytd-mini-guide-entry-renderer:nth-child(4) { display: none; } /*Originals*/
ytd-mini-guide-entry-renderer:nth-child(5) { display: none; } /*Music*/
ytd-mini-guide-entry-renderer:nth-child(6) { display: none; } /*Library*/
ytd-mini-guide-entry-renderer:nth-child(7) { display: none; } /*Downloads*/

/* Fewer subscriptions visible, only showing Live channels */
#sections > ytd-guide-section-renderer:nth-child(2) #items > :not([line-end-style="badge"])
{
  display: none;
}
#sections > ytd-guide-section-renderer:nth-child(2) h3 > * { font-size: 0 !important; }
#sections > ytd-guide-section-renderer:nth-child(2) h3 > *::after
{
  content: "Live Channels";
  font-size: 1.6rem !important;
}

/* Remove labels on video buttons */
#flexible-item-buttons .yt-spec-button-shape-next__button-text-content
{
  display: none;
}


/*=====
  Remove other features
=====*/

#header.ytd-rich-grid-renderer { display: none; } /*Topic Header Thing*/

#voice-search-button { display: none !important; } /*Search With Your Voice button*/

#sections > ytd-guide-section-renderer:nth-child(3) { display: none; } /*More from YouTube*/


/* #buttons.ytd-masthead > ytd-topbar-menu-button-renderer:nth-child(1) { display: none !important; } YouTube Upload button*/
#buttons.ytd-masthead > ytd-topbar-menu-button-renderer:nth-child(2) { display: none !important; } /* YouTube Apps button*/



/*Remove Rewind and Fast Forward circle thing*/
.ytp-doubletap-ui, .ytp-doubletap-ui-legacy { display: none; }


/*Remove buttons on video control bar thing*/
ytd-download-button-renderer { display: none; } /*Downloads*/
#top-level-buttons-computed > ytd-button-renderer:nth-child(5) { display: none; } /*Thanks*/


/*=====
  Fixes
=====*/

 /* I have no idea why I even NEED to do this. Some Results are just tiny otherwise. */
ytd-video-renderer[is-post-compact-video] ytd-thumbnail.ytd-video-renderer { height: 201px; }
ytd-video-renderer[is-post-compact-video] ytd-thumbnail.ytd-video-renderer { height: 72px !important; }

/*So... that Verified background looks gross. This is slightly better*/
ytd-author-comment-badge-renderer { background-color: #ff0000; padding: 0 10px; }
ytd-author-comment-badge-renderer:not([creator]) #icon.ytd-author-comment-badge-renderer
{
  fill: white;
  stroke: white;
  stroke-width: 3px;
}

ytd-watch-flexy[flexy][is-two-columns_] #columns.ytd-watch-flexy { padding-top: 0 !important; }

/*The little menu thing overlaps the video card window in a not-so-great way. This fixes that.*/
ytd-rich-grid-media ytd-menu-renderer.ytd-rich-grid-media:not([menu-active]).ytd-rich-grid-media:not(:focus-within)
{
  right: 0;
  width: 20px;
}

/*Minify the extra links at the bottom of the sidebar*/
#guide-links-primary.ytd-guide-renderer a { font-size: 8pt; line-height: 14px; }
#guide-links-secondary.ytd-guide-renderer a { font-size: 8pt; line-height: 14px; }
#guide-links-primary.ytd-guide-renderer { padding-top: 7px; }
#guide-links-secondary.ytd-guide-renderer { padding-top: 5px; }
#footer.ytd-guide-renderer > #copyright { padding-bottom: 0px; }

#guide-links-primary.ytd-guide-renderer, #guide-links-secondary.ytd-guide-renderer
{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/*Change User Avatar Icons to rounded squares rather than circles*/
yt-img-shadow.ytd-channel-avatar-editor { border-radius: 13%; }
#avatar, #avatar img { border-radius: 13% !important; }
button#avatar-btn yt-img-shadow { border-radius: 13%; }
#author-thumbnail.ytd-comment-renderer yt-img-shadow { border-radius: 13% !important; }
#author-thumbnail.ytd-comment-simplebox-renderer { border-radius: 13%; }
#author-thumbnail.ytd-post-renderer yt-img-shadow { border-radius: 13% !important; }
yt-img-shadow.ytd-guide-entry-renderer { border-radius: 13% !important; }
#author-thumbnail.ytd-backstage-post-renderer yt-img-shadow.ytd-backstage-post-renderer { border-radius: 13% !important; }
#author-thumbnail { border-radius: 13% !important; }

/*Compress Views/Title/Creator/Subs area
.title.ytd-video-primary-info-renderer,
#info.ytd-video-primary-info-renderer
{
  margin-left: 250px;
}
ytd-video-owner-renderer.ytd-video-secondary-info-renderer
{
  position: relative;
  top: -95px;
}
#sponsor-button.ytd-video-owner-renderer, #purchase-button.ytd-video-owner-renderer, #analytics-button.ytd-video-owner-renderer
{
  position: relative;
  top:95px;
}
*/

/*Re-order tags and title*/
#title.style-scope.ytd-watch-metadata { display: flex; flex-direction: column-reverse; }


/*Shift Context below title and description*/
#below
{
  display: flex;
  flex-direction: column;
}
#below > *              { order: 1; }
#below > #clarify-box   { order: 2; }
#below > #comments      { order: 3; }
ytd-watch-metadata.ytd-watch-flexy { margin-bottom: 0; }




/*Fix rounding on Live Chat "hide chat" button*/
#show-hide-button.ytd-live-chat-frame>ytd-toggle-button-renderer.ytd-live-chat-frame
{
  border-radius: 0 0 16px 16px !important;
}


/* Marked videos that have been clicked on */
#meta.ytd-rich-grid-media { overflow-x: visible; }
#video-title-link,
h3 .yt-simple-endpoint
{
  border-left: 2px solid var(--yt-spec-base-background) ;
  margin-left: -3px;
  padding: 2px;
  border-radius: 5px
}
#video-title-link:visited ,
h3 .yt-simple-endpoint:visited
{
  border-color: red;
}


}

@-moz-document regexp(".*(youtube\\.com/shorts).*") {
/*=====
  Shorts Plus
=====*/
ytd-shorts { justify-content: flex-start; margin-left: -31%; flex: 1 !important; }
tp-yt-iron-overlay-backdrop.opened { opacity: 0; pointer-events: none; display: none; }
tp-yt-paper-dialog
{
  position: absolute;
  
  left: unset !important;
  top: 55px !important;
  right: 10.5% !important;
  height: 990px;
  max-height: 580px !important;
  
  max-width: 450px !important;
  
  border-radius: 15px;
}

tp-yt-paper-dialog:has(yt-report-form-modal-renderer)
{
  max-height: 850px !important;
  max-width: 600px !important;
  
  right: unset !important;
  left: 50% !important;
  top: 50% !important;
  bottom:  unset !important;
  transform: translateX(-50%);
  
  zoom: .8;
  
}


ytd-engagement-panel-section-list-renderer[dialog]
{
  height: calc(100% - 20px) !important;
  max-height: 655px !important;
  
  max-width: 440px !important;
}
ytd-engagement-panel-section-list-renderer[dialog]::after
{
    content: "";
    display: block;
    height: 10px;
    width: 100%;
    position: absolute;
    bottom: 20px;
    background: linear-gradient(to top, #15151578, #0000);
}
ytd-reel-description-sheet-renderer[dialog]
{
  min-width: 10px;
  width: 88.5%;
}


.yt-spec-button-shape-next--size-l .yt-spec-button-shape-next__icon yt-icon
{
  width: 32px !important;
  height: 32px !important;
  left: -4px;
  top: -4px;
}


/* Slide Out Comments Keep Video Position */
ytd-reel-video-renderer[is-watch-while-mode]
{
  right: 0%;
}


}

@-moz-document domain("youtube.com") {
/*New look, tweaked*/

/*Unroond*/
ytd-thumbnail a.ytd-thumbnail, ytd-thumbnailbefore,

ytd-watch-metadata #description.ytd-watch-metadata,

.yt-spec-button-shape-next--size-maaaaaaaa,

ytd-searchbox #container.ytd-searchbox,
ytd-searchbox #search-icon-legacy.ytd-searchbox,

ytd-post-renderer,

ytd-mini-guide-entry-renderer,
ytd-guide-entry-renderer,

ytd-guide-entry-renderer #endpoint.yt-simple-endpoint.ytd-guide-entry-renderer:hover, 
ytd-guide-entry-renderer #endpoint.yt-simple-endpoint.ytd-guide-entry-renderer:focus
{
  border-radius: var(--yt-img-border-radius) !important;
}

yt-chip-cloud-chip-renderer
{
  border-radius: 100px !important;
}

/*Remove fucking ambient thing*/
#cinematics { display: none; }


/*Buttons*/
.yt-spec-button-shape-next--size-m div,
.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal,

.yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--text:hover
{
  background: #0000 !important;
}
.style-scope ytd-subscribe-button-renderer .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled
{
  background: red !important;
  color: white;
  border-radius: 100px;
}

.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filledgg
{
  background: #0000 !important;
}


/*Why was the title changed?*/
h1 .ytd-watch-metadata
{
  font-weight: 400;
  font-size: 18px;
  line-height: 2.6rem;
  font-family: "Roboto";
}

/*Shift Like/Dislike/Share toward the middle*/
ytd-watch-metadata[modern-metapanel-order] #owner.ytd-watch-metadata { min-width: 44% !important; }


/*Move the like/dislike and other action bar around to line it up with Return YouTube Dislike's bar*/
ytd-watch-metadata #actions.ytd-watch-metadata ytd-menu-renderer.ytd-watch-metadata { justify-content: space-evenly !important; }

ytd-watch-metadata #actions.ytd-watch-metadata ytd-menu-renderer.ytd-watch-metadata > * { margin: 0 auto 0 0; /*T R B L*/ }

ytd-watch-metadata #actions.ytd-watch-metadata ytd-menu-renderer.ytd-watch-metadata > :last-child { ...