/* ==UserStyle==
@name Youtube Redux Dark
@version 20240308.22.22
@namespace https://userstyles.world/user/thespikedballofdoom
@description Generally darker siteGreen/Red likes and dislikesMore accurate-to-old upper video info boxSeparated dark comments (borders)Darkening video progress bar (instead of normal lightening)Dark search resultsDarkened footers (really just logout buttons)Remember to install the addon.Some more previews (seriously guys add the option to have multiple images please)https://rdgb.net/i/TOTEp.pnghttps://rdgb.net/i/ntnE0.pnghttps://rdgb.net/i/9vNzd.pnghttps://rdgb.net/i/4U6w5.pnghttps://rdgb.net/i/nWmkz.pnghttps://rdgb.net/i/314Tw.pnghttps://rdgb.net/i/Kx3l4.pnghttps://rdgb.net/i/e2QJo.png
@author thespikedballofdoom
@license No License
==/UserStyle== */
@-moz-document domain("youtube.com") {
:root {
--RDBG:#0c0c0c
}
/*yay, it's being updated now 26.10.2023==========================================================*/
.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled {
color: #0f0f0f;
background-color: #191919;
border: 1px solid #3c3c3c;
border-radius:2px !important
}
/*ytd-watch-metadata alone should work but this avoids !important*/
#primary-inner ytd-watch-metadata, #secondary-redux-div{
background-color: var(--RDBG);
box-shadow:none !important;
padding-top:6px!important
}
/*raise title and by extension the rest of the video info up*/
#primary-inner ytd-watch-metadata #owner {
margin-top: 12px;
}
/*shape description like how it used to be*/
#description.ytd-watch-metadata{
border-radius:0;
border-top:10px solid black;
/*activate to show description editing area*/
/*background-color:#ff000008 !important;*/
margin:3px -4px 0px -16px;
padding:0px 4px 0 15px
}
#meta.ytd-watch-flexy paper-button#more, #meta.ytd-watch-flexy tp-yt-paper-button#more, #meta.ytd-watch-flexy paper-button#less, #meta.ytd-watch-flexy tp-yt-paper-button#less, tp-yt-paper-button#expand, tp-yt-paper-button#collapse {
width: 100%;
border-top: 1px solid #252525;
border-bottom:0 !important
}
/*make albums in description unrounded*/
.yt-video-attribute-view-model--image-large .yt-video-attribute-view-model__hero-section {
border-radius:0
}
/*unround chapters*/
ytd-macro-markers-list-item-renderer{
border-radius:0
}
/*temporary hopefully*/
ytd-comments-header-renderer[modern-typography] .count-text.ytd-comments-header-renderer{
font-size: 1.8rem;
font-weight: 400
}
/*================================================================================================*/
/*Deal with non extra layout changes. Note that this battles with line ~161 of youtube redux's CSS inject. We're choosing to edit redux instead now.*/
ytd-rich-section-renderer {
display:flex !important;
}
/*THIS IS THE BACK GROUND FOR THE HOLE SITE*/
html[dark] .ytd-app {
background:#000;
}
/*FIXES ISSUESWITH ELEMENTS BEING IN THE WRONG SPOT AND SIZE -------------------- */
/* https://github.com/omnidevZero/YouTubeRedux/issues/139 */
/* fix extra useless scrollbar appearing that penetrates fullscreen videos and can cause issues with normal scrolling */
/*
ytd-page-manager {
overflow-y: hidden;
}
*/
/*fix comment like counts being misalignd*/
#vote-count-middle.ytd-comment-action-buttons-renderer {
margin-bottom: 6px
}
/*Enable if your like buttons are kind of hanging off the bottom*/
html[dark] ytd-video-primary-info-renderer{
border-bottom:6px solid var(--RDBG) !important
}
ytd-video-primary-info-renderer{
padding: 8px 14px 0 14px !important
}
#meta.ytd-watch-flexy paper-button#more, #meta.ytd-watch-flexy tp-yt-paper-button#more, #meta.ytd-watch-flexy paper-button#less, #meta.ytd-watch-flexy tp-yt-paper-button#less, tp-yt-paper-button#expand, tp-yt-paper-button#collapse{
margin-top:0
}
/*I THINK THIS IS A NECESSARY FIX FOR PLAYLISTS, I REMEMBER IT WAS DRIFTING SO I MARGINED IT*/
#playlist > #container {
margin-left: 12px !important
}
#container.ytd-masthead{
max-height: 50px
}
/*DARK SEARCH*/
#search-form> ytd-watch, .gstl_50 *, .sbdd_c > *, [title="Search"], .secondary-header-contents{
background-color: #131313 !important
}
/*DARK EXPERIENCING INTERRUPTION SPAMMER TYPE TOASTS*/
html{
--yt-spec-snackbar-background-updated:#1e1e1e !important;
color:white
}
yt-notification-action-renderer[darker-dark-theme] tp-yt-paper-toast.yt-notification-action-renderer {
background-color: #1e1e1e;
color:white
}
yt-notification-action-renderer[ui-refresh] #text.yt-notification-action-renderer, yt-notification-action-renderer[ui-refresh] #sub-text.yt-notification-action-renderer {
color: var(--yt-spec-static-overlay-text-primary)
}
/*leftover*/ /*
#masthead-container.ytd-app::after {
border-bottom: .1px solid #212121
}
*/
#masthead-container.ytd-app #masthead:not([dark]){
border: none
}
.gsfs {
font-size: 1.6rem;
color: #ccc1c1;
}
.sbdd_b {
background: #000;
background-color: rgb(0, 0, 0);
border: 1px solid #00000078;
border-top-color: #0000;
border-top:none;
}
/*SQUARE PFPS SITE-WIDE*/
#avatar,
yt-img-shadow,
.ytg-thumbnail-0[avatar],
#author-photo,
#container,
img[is="yt-img"],
ytg-thumbnail[avatar] > div[id="image"]
{
border-radius: 0px !important;
}
html[dark] ytd-video-primary-info-renderer, html[dark] ytd-video-secondary-info-renderer {
background-color: var(--RDBG) !important;
box-shadow: none !important;
}
.ytd-watch-flexy {
border: inherit;
}
html[dark] #secondary-inner.ytd-watch-flexy #related {
background-color: var(--RDBG) !important;
box-shadow: none !important
}
html[dark] yt-chip-cloud-renderer, html[dark] #left-arrow-button.yt-chip-cloud-renderer, html[dark] #right-arrow-button.yt-chip-cloud-renderer {
background-color: var(--RDBG) !important;
box-shadow: none !important
}
html[dark] ytd-comments#comments {
background-color:#050505 !important;
box-shadow: none !important
}
ytd-comment-thread-renderer {
margin-bottom: 7px;
background: var(--RDBG);
padding: 15px;
margin-right: 15px; }
.style-scope .ytd-comment-thread-renderer {
margin-bottom: -15px;
}
.style-scope .ytd-comment-dialog-renderer {
margin-right: 15px;
}
html[dark] #reduxSubDiv > yt-formatted-string, html[dark] #reduxSubDiv #notification-preference-button {
background: #191919; }
html[dark] #contents.ytd-rich-grid-renderer, html[dark] #contents.ytd-section-list-renderer {
background: var(--RDBG) !important;
}
redux-playlist style-scope ytd-rich-grid-renderer {
display: none;
}
style-scope ytd-page-manager {
background:#000 !important
}
tp-yt-app-drawer.ytd-app:not([persistent]).ytd-app {
background: transparent;
}
ytd-metadata-row-header-renderer[has-divider-line] {
margin-top: 0;
border-top: 0;
}
tp-yt-paper-button {
border-radius:0
}
#container > #like-bar.ytd-sentiment-bar-renderer {
background: #175800 !important;
}
#container > #dislike-bar.ytd-sentiment-bar-renderer {
background: #910000 !important;
}
#container.ytd-sentiment-bar-renderer{
background: #910000 !important;
}
ytd-guide-renderer #sections {
background:var(--RDBG)
}
div#header.class #vote-count-middle ytd-comment-action-buttons-renderer {
color: #0e7713 !important;
}
#info.ytd-video-primary-info-renderer > #menu-container{
margin-right: 0px !important;
}
ytd-browse[page-subtype="channels"] {
background: #000;
}
style-scope ytd-watch-next-secondary-results-renderer:nth-child(2) {
background: red !important;
}
ytd-video-primary-info-renderer {
padding: 8px 0 0px 0;
}
/*STOLEN AND EDITED FROM THE LEGENDARY "Youtube - Dark Gray" THEME by justpickaname
https://userstyles.org/styles/101409/youtube-dark-grey*/
:root {
--dgyt-bg-color-dark:rgb(15, 15, 15);
--dgyt-bg-color-medium:rgb(24, 24, 24);
--dgyt-cell-bg-color:rgba(0, 0, 0, 0.2);
--dgyt-menu-bg-color:rgba(21, 21, 21, 0.8);
--dgyt-button-color:rgba(255, 255, 255, 0.1);
--dgyt-button-color-hover:rgba(255, 255, 255, 0.22);
--dgyt-border-color:rgba(0, 0, 0, 0.2);
--dgyt-text-main:rgb(192, 192, 192);
--dgyt-text-secondary:rgb(142, 142, 142);
--dgyt-text-highlight:rgb(255, 255, 255);
--dgyt-color-red:rgb(204, 24, 30);
--dgyt-color-blue:rgb(22, 122, 198);
--dgyt-color-yellow:rgb(245, 213, 98);
--dgyt-color-orange:rgb(255, 85, 0);
--dgyt-color-purple:rgb(156, 39, 176);
--dgyt-color-green:rgb(76, 175, 80)
}
.yt-uix-button, .yt-uix-button:hover, .guide-item, .guide-item:hover {
transition:background-color 0.3s!important
}
::-moz-selection {
background-color:rgb(22, 122, 198)!important;
color:rgb(255, 255, 255)!important
}
::selection {
background-color:rgb(22, 122, 198)!important;
color:rgb(255, 255, 255)!important
}
body {
color:rgb(192, 192, 192)!important
}
#body-container {
background:rgb(10, 10, 10)!important
}
a, a:hover {
color:rgb(22, 122, 198)
}
h1, h2, h3, h4, .playlist-videos-list .yt-ui-ellipsis, .yt-ui-ellipsis, .yt-lockup, .branded-page-module-title, .branded-page-module-title a, .yt-thumb {
background-color:transparent!important
}
#yt-masthead #logo-container .logo, #masthead-logo img, .footer-logo img, #footer-logo .footer-logo-icon {
background:no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1104.57" height="440.3"><path fill="%23b3b3b3" d="M198.82 357.05c-18.14-2.2-34.8-12.87-42.82-27.43-8.18-14.83-8.93-22.6-8.45-87.93.38-50.6.5-53.8 2.5-61.1 4.8-17.3 14.05-29.1 28.42-36.2 19.73-9.8 40.98-8.5 59.6 3.5 11.84 7.6 19.04 18.7 22.88 35.2 1.7 7.3 1.87 12.9 1.87 64 0 62.1-.3 65.7-6.67 79.2-6.13 12.9-20 24.4-34.45 28.4-6.36 1.7-17.43 2.8-22.88 2.1zm15.9-40.58c6.93-5.3 6.98-5.74 7.37-65.6.2-46.5.1-54.4-1.3-60.74-1.9-8.55-5.3-12.63-11.8-14.4-8.5-2.26-16.2 2.57-18.9 11.8-2.1 7.08-2.1 112.55 0 119.67 1.5 5.32 6.5 11.16 10.3 11.95 4.8 1.03 10.7-.1 14.1-2.68zm102.1 40.62c-10.06-1.4-15.93-5.3-19.95-13.2-5.06-10-5.05-10-5.05-109.6v-93h40.54l.43 85.7c.4 93.1.3 90.9 5.9 92.3 5.1 1.3 1...
