/* ==UserStyle==
@name           YouTube - Customization
@description    Provides some extra customization options for YouTube.
@version        2026.06.04.16.02
@author         MetalTxus
@namespace      https://github.com/jesuscc1993/
@license        CC BY-SA 4.0
@preprocessor   stylus

@var color      sub-bg                        "Subtitle background color"               rgba(0, 0, 0, .72)
@var color      video-controls-bg             "Video controls background"               rgba(0, 0, 0, .3)
@var text       list-thumbnail-width          "List thumbnail width"                    100px
@var text       drawer-width                  "App drawer width"                        240px
@var text       grid-max-width                "Max grid width"                          1284px
@var text       sub-border-radius             "Subtitle border radius"                  0px
@var text       playlist-width                "Playlist width"                          unset
@var text       max-playlist-height           "Maximum playlist height"                 unset
@var text       progress-bar-thickness        "Progress bar thickness"                  unset
@var text       volume-bar-thickness          "Volume bar thickness"                    unset
@var text       video-controls-icons-scale    "Video controls icons scale"              1
@var text       items-per-grid-row            "Items per grid row"                      3
@var text       items-per-shelf-row           "Items per shelf row"                     5
@var checkbox   controls-gradient-bg          "Add back controls gradient bg"           0
@var checkbox   classic-progress-bar-colors   "Classic progress bar colors"             0
@var checkbox   disable-progress-bar-gradient "Disable progress bar gradient"           0
@var checkbox   reduced-sidebar-padding       "Reduce sidebar spacing"                  0
@var checkbox   reduced-grid-padding          "Reduce grid spacing"                     0
@var checkbox   reduced-controls-bar-height   "Reduce controls bar height"              0
@var checkbox   crop-fullscreen               "Crop fullscreen to cover the screen"     0
@var checkbox   gray-out-watched              "Gray out watched videos"                 0
@var checkbox   hide-watched                  "Hide watched videos"                     0
@var checkbox   hide-member-only              "Hide member only videos"                 0
@var checkbox   hide-channel-avatars          "Hide channel avatars in subscriptions"   0
@var checkbox   hide-overlay-channel-avatars  "Hide channel avatars in overlay"         0
@var checkbox   hide-shorts                   "Hide shorts"                             0

==/UserStyle== */
/*
  for 5 cols at 1920p:
    drawer-width: 190px
    grid-max-width: calc(100vw - 190px - 17px)
*/
@-moz-document domain("youtube.com") {
  thumbnail-aspect-ratio=9 / 16;

  :root {
    --list-thumbnail-height: list-thumbnail-width * thumbnail-aspect-ratio;
    --list-thumbnail-width: list-thumbnail-width;
  }

  html:not(.style-scope) {
    --ytd-grid-max-width: grid-max-width;
    --ytd-grid-6-columns-width: var(--ytd-grid-max-width);
  }

  ytd-tabbed-page-header.grid-6-columns #page-header.ytd-tabbed-page-header,
  ytd-tabbed-page-header.grid-6-columns[has-inset-banner] #page-header-banner.ytd-tabbed-page-header {
    padding-right: calc(50% - var(--ytd-grid-max-width) / 2);
    padding-left: calc(50% - var(--ytd-grid-max-width) / 2);
  }

  .html5-video-player .video-stream {
    max-width: 100%;
  }

  /* sidebar width */
  :root,
  ytd-app {
    --app-drawer-width: drawer-width;
  }

  ytd-guide-renderer.ytd-app {
    width: var(--app-drawer-width);
  }

  ytd-app[guide-persistent-and-visible] ytd-page-manager.ytd-app {
    margin-left: var(--app-drawer-width);
  }

  [page-subtype="channels"] ytd-shelf-renderer,
  [page-subtype="channels"] ytd-section-list-renderer {
    max-width: grid-max-width;
    margin: 0 auto;
  }

  /* hide weird extra space next to the sidebar */
  #contentContainer.tp-yt-app-drawer[swipe-open].tp-yt-app-drawer::after {
    display: none;
  }

  /* playlist sidebar */
  #thumbnail-container.ytd-playlist-panel-video-renderer,
  #thumbnail-container.ytd-playlist-panel-video-renderer > ytd-thumbnail.ytd-playlist-panel-video-renderer,
  #thumbnail-container.ytd-playlist-panel-video-renderer img.yt-img-shadow,
  ytd-thumbnail.ytd-playlist-video-renderer {
    max-height: none;
    max-width: none;
    height: var(--list-thumbnail-height);
    width: var(--list-thumbnail-width);
  }

  if (playlist-width != unset) {
    ytd-watch-flexy {
      --ytd-watch-flexy-sidebar-min-width: playlist-width !important;
      --ytd-watch-flexy-sidebar-width: playlist-width !important;
    }
  }

  if (max-playlist-height != unset) {
    ytd-watch-flexy {
      --ytd-watch-flexy-panel-max-height: max-playlist-height !important;
    }
  }

  /* captions */
  .ytp-caption-segment {
    background: sub-bg !important;
  }

  .caption-window[style*="background"] {
    background: sub-bg !important;
  }

  .caption-window[style*="background"] .ytp-caption-segment {
    background: transparent !important;
  }

  .ytp-caption-segment:first-child {
    border-top-left-radius: sub-border-radius;
    border-bottom-left-radius: sub-border-radius;
  }

  .ytp-caption-segment:last-child {
    border-top-right-radius: sub-border-radius;
    border-bottom-right-radius: sub-border-radius;
  }

  /* progress bar thickness */
  if (progress-bar-thickness != unset) {
    .html5-video-player,
    .ytp-delhi-modern {
      &:not(.ytp-player-minimized) .ytp-progress-bar-container {
        height: progress-bar-thickness;
      }

      .ytp-scrubber-container {
        top: (-6px + progress-bar-thickness / 2);
      }
      &.ytp-big-mode .ytp-scrubber-container {
        top: (-10px + progress-bar-thickness / 2);
      }
    }
  }

  /* volume bar thickness */
  if (volume-bar-thickness != unset) {
    .html5-video-player:not(.ytp-delhi-modern),
    .ytp-delhi-horizontal-volume-controls,
    .ytp-big-mode.ytp-delhi-horizontal-volume-controls {
      .ytp-volume-slider-handle::before,
      .ytp-volume-slider-handle::after {
        height: volume-bar-thickness;
        margin-top: (volume-bar-thickness * -0.5);
      }
    }
  }

  /* controls-gradient-bg */
  if (controls-gradient-bg) {
    .html5-video-player:not(.ytp-autohide):after {
      background: linear-gradient(0deg, #000d 0%, #0000 8%, #0000 92%, #000d 100%);
      content: "";
      display: block;
      height: 100%;
      pointer-events: none;
      position: absolute;
      width: 100%;
      z-index: 11;
    }
  }

  /* video controls bg */
  .ytPlayerOverlayVideoDetailsRendererHost,
  .ytPlayerQuickActionButtonsHost:not(:empty),
  .ytp-delhi-modern .ytp-chapter-title.ytp-button,
  .ytp-delhi-modern .ytp-chrome-controls .ytp-next-button:not(.ytp-miniplayer-button-container>*),
  .ytp-delhi-modern .ytp-chrome-controls .ytp-play-button,
  .ytp-delhi-modern .ytp-chrome-controls .ytp-prev-button:not(.ytp-miniplayer-button-container>*),
  .ytp-delhi-modern .ytp-chrome-controls .ytp-right-controls,
  .ytp-delhi-modern .ytp-playlist-menu-button,
  .ytp-delhi-modern .ytp-popup,
  .ytp-delhi-modern .ytp-time-wrapper:not(.ytp-miniplayer-ui *),
  .ytp-delhi-modern.ytp-delhi-horizontal-volume-controls .ytp-volume-area,
  .ytp-delhi-modern.ytp-delhi-modern-compact-controls .ytp-chrome-controls .ytp-play-button,
  .ytp-fullscreen-grid-expand-button {
    background: video-controls-bg;
  }

  /* video control icons scale */
  .ytp-chrome-controls svg {
    scale: video-controls-icons-scale;
  }

  /* classic progress bar colors */
  if (classic-progress-bar-colors) {
    .ytp-delhi-modern .ytp-progress-list {
      background: #fff3;
    }

    .ytp-delhi-modern .ytp-load-progress {
      background: #fff6;
    }
  }

  /* disable progress bar gradient */
  if (disable-progress-bar-gradient) {
    .ytp-play-progress,
    .ytThumbnailOverlayProgressBarHostWatchedProgressBarSegment,
    #progress.ytd-thumbnail-overlay-resume-playback-renderer {
      background: var(--yt-spec-static-brand-red, #f03);
    }
  }

  /* reduced sidebar padding */
  if (reduced-sidebar-padding) {
    #guide-inner-content {
      #sections.ytd-guide-renderer > ytd-guide-section-renderer.ytd-guide-renderer:not(:first-child),
      #sections.ytd-guide-renderer > ytd-guide-subscriptions-section-renderer.ytd-guide-renderer,
      #sections.ytd-guide-renderer > *.ytd-guide-renderer:first-child {
        padding: 8px;
      }

      yt-img-shadow.ytd-guide-entry-renderer,
      .guide-icon.ytd-guide-entry-renderer {
        margin-right: 8px;
      }

      #guide-section-title.ytd-guide-section-renderer {
        padding: 6px 6px 4px;
      }

      tp-yt-paper-item.ytd-guide-entry-renderer {
        padding: 0 6px;
      }
    }

    #guide-links-primary.ytd-guide-renderer,
    #guide-links-secondary.ytd-guide-renderer,
    #footer.ytd-guide-renderer > #copyright {
      padding-left: 16px;
      padding-right: 16px;
    }
  }

  /* reduced grid padding */
  if (reduced-grid-padding) {
    ytd-rich-item-renderer {
      margin-bottom: var(--ytd-rich-grid-item-margin);
    }
  }

  /* reduced controls bar height */
  if (reduced-controls-bar-height) {
    .ytp-delhi-modern {
      --yt-delhi-big-mode-bottom-controls-height: 72px !important;
      --yt-delhi-big-mode-pill-top-height: 8px !important;

      &.ytp-big-mode:not(.ytp-xsmall-width-mode) .ytp-chrome-controls .ytp-play-button,
      .ytp-delhi-modern.ytp-big-mode:not(.ytp-xsmall-width-mode) .ytp-chrome-controls .ytp-play-button-playlist {
        margin-top: 0;
      }

      .ytp-progress-bar {
        z-index: 60;
      }
    }
  }

  /* hide channel avatars */
  if (hide-channel-avatars) {
    #avatar-link.ytd-rich-grid-media {
      display: none;
    }

    [page-subtype="subscriptions"][role="main"] {
      ytd-item-section-renderer {
        border: none !important;

        .grid-subheader h2 {
          display: none !important;
        }

        &:not(:nth-child(1)) {
          #contents.ytd-shelf-renderer {
            margin-top: 0;
          }

          .grid-subheader {
            display: none;
          }
        }
      }

      .ytLockupMetadataViewModelStandard .ytLockupMetadataViewModelAvatar,
      .yt-lockup-metadata-view-model--standard .ytLockupMetadataViewModelAvatar {
        display: none;
      }
    }
  }

  /* hide overlay channel avatars */
  if (hide-overlay-channel-avatars) {
    .ytp-overlay-inline-container .iv-branding {
      display: none;
    }
  }

  /* gray out watched */
  if (gray-out-watched) {
    yt-lockup-view-model,
    ytd-grid-video-renderer,
    ytd-playlist-panel-video-renderer,
    ytd-playlist-video-renderer,
    ytd-rich-item-renderer,
    ytd-video-renderer {
      &:not(:has(yt-lockup-view-model)) {
        &:has(.ytd-thumbnail-overlay-resume-playback-renderer),
        &:has(.ytThumbnailOverlayProgressBarHost) {
          filter: grayscale(0.9) brightness(0.25);
        }
      }
    }
  }

  /* hide watched */
  if (hide-watched) {
    yt-lockup-view-model,
    ytd-grid-video-renderer,
    ytd-playlist-panel-video-renderer,
    ytd-playlist-video-renderer,
    ytd-rich-item-renderer,
    ytd-video-renderer {
      &:not(:has(yt-lockup-view-model)) {
        &:has(.ytd-thumbnail-overlay-resume-playback-renderer),
        &:has(.ytThumbnailOverlayProgressBarHost) {
          display: none;
        }
      }
    }
  }

  /* hide member only videos */
  if (hide-member-only) {
    .ytd-rich-grid-renderer > ytd-rich-item-renderer:has(.ytd-rich-grid-media > ytd-badge-supported-renderer:not([hidden])) {
      display: none;
    }
  }

  /* crop fullscreen */
  if (crop-fullscreen) {
    .html5-video-player.ytp-fullscreen:not(.ytp-branding-shown) .video-stream {
      width: 100vw !important;
      height: 100vh !important;
      left: 0 !important;
      top: 0 !important;
    }
  }

  /* items per grid row */
  if (items-per-grid-row != 3) {
    ytd-rich-grid-renderer {
      --ytd-rich-grid-items-per-row: items-per-grid-row !important;

      ytd-rich-item-renderer[rendered-from-rich-grid][is-in-first-column] {
        margin-left: calc(var(--ytd-rich-grid-item-margin)/2);
      }
    }
  }

  /* items per shelf row */
  if (items-per-shelf-row != 5) {
    ytd-rich-shelf-renderer {
      --ytd-rich-grid-items-per-row: items-per-shelf-row !important;
    }
  }

  /* hide shorts */
  if (hide-shorts) {
    grid-shelf-view-model,
    ytd-rich-section-renderer {
      &:has(ytm-shorts-lockup-view-model) {
        display: none !important;
      }
    }

    #sections ytd-guide-section-renderer:nth-child(1) > * > ytd-guide-entry-renderer:nth-child(2) {
      display: none !important;
    }
  }
}