CCCPaste

LIGHT MODE MINT STYLISH THEME

/* === LIGHT MODE MINT THEME === */

:root {
/* --- COLOR PALETTE VARIABLES --- */
--mint-accent: #00b894; /* Vibrant Mint (Buttons/Links) */
--mint-soft: #dff9fb; /* Very Pale Mint (Hover states) */
--mint-bg: #AAF0C1; /* Main Background (Mint) */
--mint-top: #5fe88d; /* Main Topbar (Caribbean Green Pearl) */
--dark-text: #2d3436; /* Soft Charcoal (Text) */

/* --- YOUTUBE OVERRIDES --- */

/* Backgrounds */
--yt-spec-base-background: var(--mint-bg) !important;
--yt-spec-general-background-a: var(--mint-bg) !important;
--yt-spec-menu-background: #ffffff !important;

/* Text */
--yt-spec-text-primary: var(--dark-text) !important;
--yt-spec-text-secondary: #636e72 !important;

/* Branding (Replacing the Red) */
--yt-spec-static-brand-red: var(--mint-accent) !important;
--yt-spec-brand-background-solid: var(--mint-accent) !important;
--yt-spec-call-to-action: var(--mint-accent) !important;
}

/* === SPECIFIC ELEMENT TWEAKS === */

/* 1. The Header/Search Bar */
ytd-masthead {
background-color: var(--mint-top) !important;
border-bottom: 1px solid #e0f2f1 !important;
}

/* 2. The Video Progress Bar (Scrubber) */
.ytp-play-progress, .ytp-scrubber-button {
background: var(--mint-accent) !important;
}
.ytp-swatch-background-color {
background-color: var(--mint-accent) !important;
}

/* 3. The Subscribe Button */
ytd-subscribe-button-renderer paper-button {
background-color: var(--mint-accent) !important;
color: white !important;
border-radius: 18px !important; /* Rounded pill shape */
font-weight: 600 !important;
letter-spacing: 0.5px;
}
/* Subscribed State (Greyed out) */
ytd-subscribe-button-renderer[subscribed] paper-button {
background-color: #dfe6e9 !important;
color: #636e72 !important;
}

/* 4. Links and Hashtags */
a.yt-simple-endpoint.yt-formatted-string {
color: var(--mint-accent) !important;
}

/* 5. Like/Dislike Active State */
ytd-toggle-button-renderer.style-default-active[is-icon-button] {
color: var(--mint-accent) !important;
}

/* 6. Logo Adjustment (Greyscale Mint) */
#logo-icon {
filter: hue-rotate(140deg) brightness(1.2) !important;
}