Youtube - Dark X by Saadski

/* ==UserStyle==
@name         Youtube - Dark X
@version      20241213.06.28
@namespace    https://userstyles.world/user/Saadski
@description  Dark theme for Youtube.
@author       Saadski
@license      No License
==/UserStyle== */

@-moz-document domain("youtube.com") {
/* Youtube - Dark X */
/* Presets */
:root
{
    --dark0: rgb(33, 33, 33);
    --dark: rgb(28, 28, 28);
    --dark1: rgb(27, 27, 27);
    --darker: rgb(18, 18, 18);
    --darker2: rgb(12, 12, 12);
    --darker3: rgb(8, 8, 8);
    --bw: rgb(67, 67, 67);
    --light: rgb(193, 193, 193);
    --lighter: rgb(233, 233, 233);
    --accent: rgb(95, 95, 95);
    --shadow: rgba(0, 0, 0, 0.07);
    --tp: #fff0;
    --ol: #090909F2;
    --red: rgb(255, 0, 0);
    --yt-spec-suggested-action: #26385061 !important;
    --yt-spec-text-primary: var(--light) !important;
}

html[dark],
[dark],
*
{
    --yt-spec-base-background: var(--darker2);
    --yt-spec-raised-background: var(--darker);
    --yt-spec-menu-background: var(--darker);
    --yt-spec-inverted-background: var(--darker);
    --yt-spec-additive-background: var(--darker);
    --yt-spec-outline: rgba(255, 255, 255, 0.2);
    --yt-spec-shadow: rgba(0, 0, 0, 0.25);
    --yt-spec-text-primary: var(--accent) !important;
    --yt-spec-text-secondary: var(--bw);
    --yt-spec-text-disabled: #717171;
    --yt-spec-text-primary-inverse: var(--bw);
    --yt-spec-call-to-action: var(--accent);
    --yt-spec-call-to-action-inverse: #065fd4;
    --yt-spec-suggested-action: #2638503D;
    --yt-spec-suggested-action-inverse: #def1ff;
    --yt-spec-icon-active-other: #fff;
    --yt-spec-icon-inactive: #909090;
    --yt-spec-icon-disabled: #606060;
    --yt-spec-button-chip-background-hover: rgba(49, 49, 49, .15);
    --yt-spec-touch-response: var(--dark);
    --yt-spec-touch-response-inverse: #000;
    --yt-spec-brand-icon-active: #fff;
    --yt-spec-brand-icon-inactive: #909090;
    --yt-spec-brand-button-background: #c00;
    --yt-spec-brand-link-text: #ff4e45;
    --yt-spec-error-indicator: #ff8983;
    --yt-spec-themed-blue: var(--accent);
    --yt-spec-themed-green: #2ba640;
    --yt-spec-ad-indicator: #00aaa7;
    --yt-spec-themed-overlay-background: rgba(0, 0, 0, 0.8);
    --yt-spec-commerce-badge-background: #002d08;
    --yt-spec-static-brand-red: #f00;
    --yt-spec-static-brand-white: var(--light);
    --yt-spec-static-brand-black: #212121;
    --yt-spec-static-clear-color: rgba(255, 255, 255, 0);
    --yt-spec-static-clear-black: rgba(0, 0, 0, 0);
    --yt-spec-static-ad-yellow: #fbc02d;
    --yt-spec-static-grey: #606060;
    --yt-spec-static-overlay-background-solid: #000;
    --yt-spec-static-overlay-background-heavy: rgba(0, 0, 0, 0.8);
    --yt-spec-static-overlay-background-medium: rgba(0, 0, 0, 0.6);
    --yt-spec-static-overlay-background-medium-light: rgba(0, 0, 0, 0.3);
    --yt-spec-static-overlay-background-light: rgba(0, 0, 0, 0.1);
    --yt-spec-static-overlay-text-primary: #fff;
    --yt-spec-static-overlay-text-primary-inverse: #030303;
    --yt-spec-static-overlay-text-secondary: rgba(255, 255, 255, 0.7);
    --yt-spec-static-overlay-text-disabled: rgba(255, 255, 255, 0.3);
    --yt-spec-static-overlay-call-to-action: #3ea6ff;
    --yt-spec-static-overlay-icon-active-other: var(--dark0);
    --yt-spec-static-overlay-icon-inactive: rgba(255, 255, 255, 0.7);
    --yt-spec-static-overlay-icon-disabled: rgba(255, 255, 255, 0.3);
    --yt-spec-static-overlay-button-primary: rgba(255, 255, 255, 0.3);
    --yt-spec-static-overlay-button-secondary: rgba(255, 255, 255, 0.1);
    --yt-spec-static-overlay-touch-response: #fff;
    --yt-spec-static-overlay-touch-response-inverse: #000;
    --yt-spec-static-overlay-background-brand: rgba(204, 0, 0, 0.9);
    --yt-spec-assistive-feed-themed-gradient-1: #005446;
    --yt-spec-assistive-feed-themed-gradient-2: #39003f;
    --yt-spec-assistive-feed-themed-gradient-3: #590000;
    --yt-spec-discover-red: #ff4e45;
    --yt-spec-discover-green: #a4ffa4;
    --yt-spec-discover-blue: #6ea2ff;
    --yt-spec-brand-background-solid: var(--tp);
    --yt-spec-brand-background-primary: var(--darker);
    --yt-spec-brand-background-secondary: var(--tp);
    --yt-spec-general-background-a: #181818;
    --yt-spec-general-background-b: #0f0f0f;
    --yt-spec-general-background-c: #030303;
    --yt-spec-error-background: #f9f9f9;
    --yt-spec-10-percent-layer: rgba(108, 108, 108, .1);
    --yt-spec-snackbar-background: #030303;
    --yt-spec-snackbar-background-updated: #f9f9f9;
    --yt-spec-badge-chip-background: var(--darker);
    --yt-spec-verified-badge-background: var(--darker);
    --yt-spec-call-to-action-faded: rgba(62, 166, 255, 0.3);
    --yt-spec-call-to-action-hover: #6ebcff;
    --yt-spec-brand-button-background-hover: #990412;
    --yt-spec-brand-link-text-faded: rgba(255, 78, 69, 0.3);
    --yt-spec-filled-button-focus-outline: rgba(255, 255, 255, 0.7);
    --yt-spec-static-overlay-button-hover: rgba(255, 255, 255, 0.5);
    --yt-spec-mono-filled-hover: var(--darker);
    --yt-spec-commerce-filled-hover: #65b8ff;
    --yt-spec-mono-tonal-hover: rgba(255, 255, 255, 0.2);
    --yt-spec-commerce-tonal-hover: #515561;
    --yt-spec-static-overlay-filled-hover: #e6e6e6;
    --yt-spec-static-overlay-tonal-hover: rgba(255, 255, 255, 0.2);
    --yt-spec-paper-tab-ink: rgba(255, 255, 255, 0.3);
    --yt-spec-filled-button-text: #030303;
    --yt-spec-selected-nav-text: #fff;
    --yt-lightsource-section2-color: background: var(--darker2);
    --yt-basic-background-color: rgba(136, 136, 136, 1.000);
    --yt-basic-foreground-title-color: rgba(255, 255, 255, 1.000);
    --ytd-author-comment-badge-background-color: #6B0C0C;
    --ytd-author-comment-badge-name-color: #ffffff;
    --ytd-author-comment-badge-icon-color: #ffffff;
}

.yt-lp-faq-section-view-model
{
    --premium-yt-spec-base-background: #c33535;
    --premium-yt-spec-raised-background: #6d2c2c;
    --premium-yt-spec-additive-background: var(--darker2);
    --premium-yt-spec-outline: rgba(255, 255, 255, 0.2);
    --premium-yt-spec-static-brand-white: #fff;
    --premium-yt-spec-static-overlay-text-primary: #fff;
    --premium-yt-spec-text-primary: #f1f1f1;
    --premium-yt-spec-text-secondary: #aaa;
    --premium-yt-spec-button-chip-background-hover: rgba(255, 255, 255, 0.2);
    background-color: var(--premium-yt-spec-additive-background);
}

html[dark]
{
    --yt-live-chat-background-color: var(--yt-spec-base-background);
    --yt-live-chat-action-panel-background-color: var(--yt-spec-base-background);
    --yt-live-chat-action-panel-background-color-transparent: rgba( 40, 40, 40, 0.8);
    --yt-live-chat-secondary-background-color: #282828;
    --yt-live-chat-toast-text-color: var(--yt-spec-static-brand-white);
    --yt-live-chat-toast-background-color: #323232;
    --yt-live-chat-mode-change-background-color: #333;
    --yt-live-chat-primary-text-color: var(--yt-spec-static-brand-white);
    --yt-live-chat-secondary-text-color: rgba(255, 255, 255, 0.7);
    --yt-live-chat-tertiary-text-color: rgba(255, 255, 255, 0.54);
    --yt-live-chat-text-input-field-inactive-underline-color: #666;
    --yt-live-chat-text-input-field-placeholder-color: #666;
    --yt-live-chat-icon-button-color: var(--yt-live-chat-primary-text-color);
    --yt-live-chat-enabled-send-button-color: #fff;
    --yt-live-chat-disabled-icon-button-color: rgba(255, 255, 255, 0.3);
    --yt-live-chat-picker-button-color: var(--yt-live-chat-tertiary-text-color);
    --yt-live-chat-picker-button-active-color: var(--yt-spec-static-brand-white);
    --yt-live-chat-picker-button-disabled-color: var(--yt-live-chat-disabled-icon-button-color);
    --yt-live-chat-picker-button-hover-color: rgba(255, 255, 255, 0.74);
    --yt-live-chat-mention-background-color: #ff5722;
    --yt-live-chat-mention-text-color: #fff;
    --yt-live-chat-deleted-message-color: rgba(255, 255, 255, 0.5);
    --yt-live-chat-deleted-message-bar-color: rgba(255, 255, 255, 0.5);
    --yt-live-chat-error-message-color: var(--yt-spec-brand-link-text);
    --yt-live-chat-reconnect-message-color: #fff;
    --yt-live-chat-disabled-button-background-color: #444;
    --yt-live-chat-disabled-button-text-color: var(--yt-live-chat-secondary-text-color);
    --yt-live-chat-sub-panel-background-color: var(--yt-spec-base-background);
    --yt-live-chat-sub-panel-background-color-transparent: var(--yt-spec-base-background);
    --yt-live-chat-header-background-color: var(--yt-spec-base-background);
    --yt-live-chat-header-button-color: var(--yt-live-chat-secondary-text-color);
    --yt-live-chat-moderator-color: #5e84f1;
    --yt-live-chat-owner-color: #ffd600;
    --yt-live-chat-message-highlight-background-color: var(--yt-spec-raised-background);
    --yt-live-chat-author-chip-owner-text-color: var(--yt-deprecated-luna-black);
    --yt-live-chat-author-chip-verified-background-color: var(--yt-spec-grey-5);
    --yt-live-chat-author-chip-verified-text-color: var(--yt-spec-white-4);
    --yt-live-chat-sponsor-color: #2ba640;
    --yt-live-chat-overlay-color: rgba(0, 0, 0, 0.5);
    --yt-live-chat-dialog-background-color: #424242;
    --yt-live-chat-dialog-text-color: var(--yt-spec-static-brand-white);
    --yt-live-chat-button-default-text-color: var(--yt-spec-static-brand-white);
    --yt-live-chat-button-default-background-color: var(--yt-deprecated-white-opacity-lighten-4);
    --yt-live-chat-button-dark-text-color: var(--yt-spec-static-brand-white);
    --yt-live-chat-button-dark-background-color: var(--yt-deprecated-white-opacity-lighten-4);
    --yt-emoji-picker-variant-selector-bg-color: #2f2f2f;
    --yt-live-chat-moderation-mode-hover-background-color: rgba( 255, 255, 255, 0.3);
    --yt-live-chat-additional-inline-action-button-color: var(--yt-grey);
    --yt-live-chat-additional-inline-action-button-background-color: var(--yt-deprecated-opalescence-soft-grey-opacity-lighten-1);
    --yt-live-chat-additional-inline-action-button-background-color-hover: var(--yt-deprecated-op...