/* ==UserStyle== @name YouTube OG Xbox Dashboard - Crimson Edition @namespace human-raccoon.com @version 20260407 @description YouTube but it's a "visceral red" 2001 Xbox dashboard ==/UserStyle== */ @-moz-document domain("youtube.com"), regexp("http(s?)://[^/]*\\.youtube(\\.com)?(\\.[a-z][a-z])?/.*"), regexp("http(s?)://youtube(\\.com)?(\\.[a-z][a-z])?/.*") { @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500&family=Rajdhani:wght@400;500&display=swap'); /* ========================= GLOBAL XBOX VARIABLES (RED) ========================= */ html, body, ytd-app { --xbox-bg-dark: #140b0b; --xbox-bg-mid: #261313; --xbox-panel: #331c1c; --xbox-glow: #ff3a3a; --xbox-glow-soft: #ff9a9a; --xbox-text: #ffc1c1; background: radial-gradient(circle at center, #351616 0%, #140b0b 60%) !important; color: var(--xbox-text) !important; } /* ========================= BACKGROUND WALLPAPER ========================= */ html, body, ytd-app { background: url("https://human-raccoon.com/elements/1XwBF.jpg") top center / cover no-repeat fixed !important; background-color: rgba(0,0,0,0.65) !important; background-blend-mode: overlay; } /* ========================= MASTHEAD ========================= */ #container.ytd-masthead { background: linear-gradient(to bottom, #3b1f1f 0%, #261313 100%) !important; box-shadow: inset 0 0 20px rgba(255,58,58,0.2), 0 0 15px rgba(255,58,58,0.3); border-bottom: 1px solid rgba(255,58,58,0.3); } /* ========================= SEARCH BAR ========================= */ #container.ytd-searchbox { background: var(--xbox-panel) !important; border-radius: 30px !important; box-shadow: inset 0 0 10px rgba(255,58,58,0.2), 0 0 10px rgba(255,58,58,0.15); border: 1px solid rgba(255,58,58,0.3) !important; } #search-icon-legacy { background: radial-gradient(circle, var(--xbox-glow) 0%, #6b1f1f 100%) !important; border-radius: 50% !important; box-shadow: 0 0 12px var(--xbox-glow); } /* ========================= VIDEO CARDS ========================= */ ytd-rich-item-renderer, ytd-video-renderer { background: var(--xbox-panel) !important; border-radius: 20px !important; box-shadow: inset 0 0 20px rgba(255,58,58,0.1), 0 0 15px rgba(255,58,58,0.15); transition: all 0.25s ease; } ytd-rich-item-renderer:hover, ytd-video-renderer:hover { box-shadow: inset 0 0 25px rgba(255,58,58,0.3), 0 0 25px rgba(255,58,58,0.6); transform: scale(1.02); } /* ========================= SIDEBAR ========================= */ #guide-content { background: linear-gradient(to bottom, #261313, #140b0b) !important; box-shadow: inset 0 0 30px rgba(255,58,58,0.1); } ytd-guide-entry-renderer:hover { background: rgba(255,58,58,0.1) !important; box-shadow: 0 0 12px rgba(255,58,58,0.4); } /* ========================= PLAYER BORDER & PROGRESS ========================= */ #ytd-player { border-radius: 25px !important; box-shadow: 0 0 30px rgba(255,58,58,0.4), inset 0 0 15px rgba(255,58,58,0.2); } .ytp-play-progress { background: var(--xbox-glow) !important; box-shadow: 0 0 10px var(--xbox-glow); } /* ========================= GLOBAL TEXT & TYPOGRAPHY ========================= */ * { font-family: 'Rajdhani', sans-serif !important; text-shadow: 0 0 6px rgba(255,58,58,0.4); } h1, h2, h3, #guide-content, #container.ytd-masthead { font-family: 'Orbitron', sans-serif !important; font-weight: 500 !important; letter-spacing: 1px; } /* UI Transparency & Glassmorphism */ ytd-rich-item-renderer, ytd-video-renderer, #guide-content, #container.ytd-searchbox { backdrop-filter: blur(6px); background: linear-gradient(145deg, rgba(80,40,40,0.6), rgba(30,15,15,0.8)) !important; border: 1px solid rgba(255,58,58,0.25) !important; box-shadow: inset 0 0 30px rgba(255,58,58,0.15), 0 0 25px rgba(255,58,58,0.2), 0 10px 30px rgba(0,0,0,0.6); } /* HOVER ENERGY */ ytd-rich-item-renderer:hover, ytd-video-renderer:hover { transform: scale(1.03) translateY(-3px); box-shadow: inset 0 0 40px rgba(255,58,58,0.4), 0 0 40px rgba(255,58,58,0.8), 0 15px 40px rgba(0,0,0,0.8); } /* PLAYER GLOW */ #ytd-player::before { content: ""; position: absolute; inset: -8px; border-radius: 35px; pointer-events: none; background: radial-gradient(circle, rgba(255,58,58,0.3), transparent 70%); filter: blur(20px); z-index: -1; } /* SEARCH CORE GLOW ANIMATION */ @keyframes xboxCore { 0% { box-shadow: 0 0 10px #ff3a3a; } 100% { box-shadow: 0 0 25px #ff3a3a; } } #search-icon-legacy { animation: xboxCore 3s ease-in-out infinite alternate; } /* SIDEBAR ACTIVE NODE */ ytd-guide-entry-renderer[active] { background: rgba(255,58,58,0.15) !important; box-shadow: inset 0 0 15px rgba(255,58,58,0.4), 0 0 20px rgba(255,58,58,0.6); } /* ========================= TRANSPARENT TOP BAR ========================= */ #masthead-container.ytd-app { background: transparent !important; } #container.ytd-masthead { /* Changing solid color to a semi-transparent dark red tint */ background: linear-gradient( to bottom, rgba(31, 15, 15, 0.4) 0%, rgba(19, 11, 11, 0.1) 100% ) !important; /* Adding blur so the background "shimmers" through the bar */ backdrop-filter: blur(2px) !important; -webkit-backdrop-filter: blur(2px) !important; /* Keeping your visceral red border and glow */ border-bottom: 1px solid rgba(255, 58, 58, 0.4) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important; } /* Make sure the background doesn't stay white/black behind the transparent bar */ ytd-masthead { background: transparent !important; } /* ========================= GRID ALIGNMENT & SHELF REMOVAL ========================= */ /* 1. Hide the "Most Relevant", "Shorts", and "Latest" shelves that break the grid */ ytd-rich-shelf-renderer, ytd-shelf-renderer, #title-container.ytd-rich-shelf-renderer { display: none !important; } /* 2. Force the grid to behave as a single continuous flow */ ytd-rich-grid-renderer { --ytd-rich-grid-items-per-row: 3 !important; --ytd-rich-grid-posts-per-row: 3 !important; } /* 3. Remove row-based grouping so items fill gaps automatically */ #contents.ytd-rich-grid-renderer { display: flex !important; flex-wrap: wrap !important; justify-content: flex-start !important; padding-top: 24px !important; } /* 4. Standardize card sizing and remove "reflow" logic */ ytd-rich-item-renderer { margin: 0 8px 32px 8px !important; width: calc(20% - 16px) !important; /* 25% for 4 columns */ } /* 5. Fix for the "ghost" placeholders and hidden spacers */ #contentWrapper.ytd-rich-grid-renderer, ytd-rich-grid-row, #contents.ytd-rich-grid-row { display: contents !important; } }