/* === LIGHT MODE MINT THEME: REFACTORED CSS === */
:root {
/* ==================================== */
/* COLOR PALETTE */
/* ==================================== */
--color-mint-accent: #00b894; /* Vibrant Mint (Primary CTAs, Links, Branding) */
--color-mint-soft: #dff9fb; /* Very Pale Mint (Hover states, subtle borders) */
--color-mint-bg-main: #AAF0C1; /* Main Page Background */
--color-mint-bg-header: #5fe88d; /* Top Bar, Sidebar, and Navigation Background */
--color-text-dark: #2d3436; /* Soft Charcoal (Primary Text) */
--color-text-secondary: #636e72; /* Secondary Text/Subtitles */
--color-grey-subscribed: #dfe6e9; /* Subscribed Button Background */
--color-white: #ffffff; /* General White (e.g., Menu background) */
/* ==================================== */
/* YOUTUBE OVERRIDES */
/* ==================================== */
/* --- Backgrounds --- */
--yt-spec-base-background: var(--color-mint-bg-main) !important;
--yt-spec-general-background-a: var(--color-mint-bg-main) !important;
--yt-spec-menu-background: var(--color-white) !important;
--yt-spec-inverted-background: var(--color-white) !important;
/* --- Text Colors --- */
--yt-spec-text-primary: var(--color-text-dark) !important;
--yt-spec-text-secondary: var(--color-text-secondary) !important;
--yt-spec-text-disabled: var(--color-text-secondary) !important;
/* --- Branding & Call to Action (Replacing Red) --- */
--yt-spec-static-brand-red: var(--color-mint-accent) !important;
--yt-spec-brand-background-solid: var(--color-mint-accent) !important;
--yt-spec-call-to-action: var(--color-mint-accent) !important;
--yt-spec-brand-text: var(--color-mint-accent) !important;
}
/* ==================================== */
/* LAYOUT & STRUCTURE */
/* ==================================== */
/* 1. Overall Page and Shorts Backgrounds */
#page-manager, /* NEWLY ADDED: Ensures the entire page wrapper has the mint background */
#reel-video-renderer
{
background-color: var(--color-mint-bg-main) !important;
border-bottom: 1px solid var(--color-mint-soft) !important;
}
/* 2. Header, Navigation, Sidebar (Top-level Structural Backgrounds) */
ytd-masthead, /* The Header/Search Bar */
#chips-content, /* The Navigation Bar/Chips */
#guide-inner-content /* The Side Bar */
{
background-color: var(--color-mint-bg-header) !important;
border-bottom: 1px solid var(--color-mint-soft) !important;
}
/* ==================================== */
/* INTERACTIVE ELEMENTS */
/* ==================================== */
/* 1. Video Player Scrubber / Progress Bar */
.ytp-play-progress,
.ytp-scrubber-button,
.ytp-swatch-background-color
{
background: var(--color-mint-accent) !important;
background-color: var(--color-mint-accent) !important; /* Added for ytp-swatch */
}
/* 2. Subscribe Button (Default State) */
ytd-subscribe-button-renderer paper-button {
background-color: var(--color-mint-accent) !important;
color: var(--color-white) !important;
border-radius: 18px !important; /* Rounded pill shape */
font-weight: 600 !important;
letter-spacing: 0.5px;
}
/* 2. Subscribe Button (Subscribed State - Greyed out) */
ytd-subscribe-button-renderer[subscribed] paper-button {
background-color: var(--color-grey-subscribed) !important;
color: var(--color-text-secondary) !important;
}
/* 3. Links and Hashtags */
a.yt-simple-endpoint.yt-formatted-string {
color: var(--color-mint-accent) !important;
}
/* 4. Like/Dislike Active State (Toggled Button) */
ytd-toggle-button-renderer.style-default-active[is-icon-button] {
color: var(--color-mint-accent) !important;
}
/* 5. Logo Adjustment (Greyscale Mint effect) */
#logo-icon {
/* Applies hue rotation and brightness boost to the logo, targeting the red */
filter: hue-rotate(140deg) brightness(1.2) !important;
}
Comments
0 B
|👍
/👎
0 B
|👍
/👎
0 B
|👍
/👎
0 B
|👍
/👎
0 B
|👍
/👎
0 B
|👍
/👎
0 B
|👍
/👎
0 B
|0 👍
/0 👎
0 B
|0 👍
/0 👎