New Youtube 2024 [Style Fixes] by drannex42

/* ==UserStyle==
@name         New Youtube 2024 [Style Fixes]
@version      20240612.18.04
@namespace    https://userstyles.world/user/@drannex42 (Macleod Sawyer)
@description  This fixes some strange style issues with the new youtube, I like the new layout, but it has some rough edges. This  cleans them up, fixes some of their stylings, colors, and gets de-bubbles everything.
@author       @drannex42 (Macleod Sawyer)
@license      MIT, do what you will.
==/UserStyle== */

@-moz-document domain("youtube.com") {
:root,
ytd-watch-grid[rounded-player-large][default-layout] #ytd-player.ytd-watch-grid, 
ytd-watch-grid[swatcheroo-split-scroll][default-two-column-layout] #secondary-inner.ytd-watch-grid, 
#container.ytd-searchbox,
ytd-thumbnail[size="large"] a.ytd-thumbnail, ytd-thumbnail[size="large"]::before,
#search-icon-legacy.ytd-searchbox {
    --border-radius: 0px;
    border-radius: var(--border-radius);
    --yt-img-border-radius: var(--border-radius);
}

#container.ytd-searchbox {
    box-shadow: none;
}

.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {
    background-color: transparent;
}

segmented-like-dislike-button-view-model .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal { 
    background: rgba(0,0,0,0.05);
}

html[dark] segmented-like-dislike-button-view-model .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal { 
    background: rgba(255,255,255,0.1);
}

ytd-watch-grid[default-two-column-layout] #menu.ytd-watch-metadata {
    width: 100%;
    background:var(--yt-spec-additive-background);
    width: calc(100% + 90px);
    margin: 0 -20px;
    padding: 15px;
    border: 1px solid var(--yt-spec-additive-background);
}

html[dark] ytd-watch-grid[default-two-column-layout] #menu.ytd-watch-metadata {
    border: none;
}

html[dark] ytd-watch-grid[swatcheroo-split-scroll][default-two-column-layout] #secondary-inner.ytd-watch-grid {
    border-color: var(--yt-spec-additive-background);
}


ytd-watch-grid[default-two-column-layout] ytd-comments-header-renderer[compact-header] #title.ytd-comments-header-renderer {
  margin: 25px 0;
  margin-top: -5px !important;
  position: relative;
  top: 0px;
}

ytd-watch-grid[default-two-column-layout] ytd-comments-header-renderer .style-scope.yt-formatted-string:first-of-type {
  font-weight: bold;
  font-size: 18px;
margin-right: 6px;
}

ytd-watch-grid[default-two-column-layout] #additional-section {
  position: absolute;
  right: 0;
}

ytd-watch-grid[default-two-column-layout] yt-dropdown-menu[modern-buttons] #label.yt-dropdown-menu, 
ytd-watch-grid[default-two-column-layout] yt-dropdown-menu[modern-buttons] #icon-label.yt-dropdown-menu {
  text-transform: unset;
  flex-direction: row-reverse;
}

ytd-watch-grid[default-two-column-layout] yt-dropdown-menu[icon-label] #label-icon.yt-dropdown-menu {
  margin-left: var(--ytd-margin-2x);
  margin-right: 0px;
}

#voice-search-button.ytd-masthead {
    border-radius: 0px;
    background: none;
}


ytd-watch-grid[default-two-column-layout] ytd-watch-metadata[title-headline-m] h1.ytd-watch-metadata {
  font-size: 1.95rem;
  line-height: 2.6rem;
  font-weight: 500;
}

ytd-watch-grid[default-two-column-layout] #owner.ytd-watch-metadata {
  margin-bottom: -7px !important;
  margin-top: 27px !important;
}

#masthead-container {
  opacity: 0.65;
}

#masthead-container:hover {
  opacity: 1;
}
}