/* ============================================================ ONE WAY · DASHBOARD SKIN v3 (2026-05-20) Targets dashboard-pro.css `.pro-*` classes EXACTAMENTE. Override agresivo: neutraliza los gradients tutifruti y alinea con paleta Geist indigo del inicio. Carga DESPUÉS de style.css, oneway-navbar.css, dashboard-pro.css, oneway-overrides.css (el último link en ). ============================================================ */ /* ─── TOKEN REWRITE: kill the rainbow at the source ─── */ :root { /* Original (kept for reference): --pro-grad-1: blue→purple→pink ← welcome banner --pro-grad-warn: amber→red ← Warns btn --pro-grad-strike: red→darkred --pro-grad-bl: black→darkred --pro-grad-clan: green→blue ← Clanes btn Below: neutralize to semantic surface accents. */ --pro-grad-1: linear-gradient(135deg, rgba(91, 140, 255, 0.14) 0%, rgba(111, 224, 255, 0.06) 100%) !important; --pro-grad-2: linear-gradient(135deg, rgba(91, 140, 255, 0.18) 0%, rgba(91, 140, 255, 0.06) 100%) !important; --pro-grad-warn: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.04)) !important; --pro-grad-strike: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(239, 68, 68, 0.04)) !important; --pro-grad-bl: linear-gradient(135deg, rgba(239, 68, 68, 0.14), rgba(239, 68, 68, 0.04)) !important; --pro-grad-clan: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(34, 197, 94, 0.04)) !important; --pro-grad-success: linear-gradient(135deg, rgba(34, 197, 94, 0.14), rgba(34, 197, 94, 0.04)) !important; /* Token primarios (forzar paleta inicio aunque alguien los redefina) */ --primary: #5B8CFF !important; --primary-rgb: 91, 140, 255 !important; --secondary: #6FE0FF !important; --accent: #6FE0FF !important; } /* ─── WELCOME BANNER (pro-hero) ─── */ .pro-hero { background: linear-gradient(135deg, rgba(91, 140, 255, 0.12) 0%, rgba(111, 224, 255, 0.04) 70%) !important; border: 1px solid rgba(91, 140, 255, 0.18) !important; border-radius: 18px !important; box-shadow: 0 8px 24px -10px rgba(91, 140, 255, 0.20) !important; } .pro-hero::before, .pro-hero::after { /* Si tiene blob morado/pink decorativo, escóndelo */ display: none !important; } .pro-hero-title { background: linear-gradient(135deg, #FFFFFF 0%, #C7D2FE 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; font-weight: 800 !important; letter-spacing: -0.03em !important; } .pro-hero-sub, .pro-hero-subtitle, .pro-hero-description { color: rgba(255, 255, 255, 0.75) !important; } /* Welcome pills (GLOBAL ADMIN / @user / ID / BANNER ACTIVO) */ .pro-hero-pill, .pro-pill, .pro-badge, .pro-hero [class*="pill"], .pro-hero [class*="badge"] { background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; color: rgba(255, 255, 255, 0.85) !important; border-radius: 999px !important; padding: 5px 12px !important; font-size: 12px !important; font-weight: 600 !important; font-family: 'JetBrains Mono', ui-monospace, monospace !important; letter-spacing: 0.02em !important; text-transform: none !important; } /* ─── STAT CARDS (608 / 380 / 0 / 0 / 13 / 44) ─── */ .pro-stat, .pro-stat-card { background: rgba(15, 17, 22, 0.78) !important; border: 1px solid rgba(255, 255, 255, 0.07) !important; border-radius: 16px !important; padding: 20px !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease !important; box-shadow: none !important; } .pro-stat:hover, .pro-stat-card:hover { border-color: rgba(255, 255, 255, 0.14) !important; transform: translateY(-2px) !important; box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.5) !important; } .pro-stat::before, .pro-stat-card::before, .pro-stat::after, .pro-stat-card::after { display: none !important; } .pro-stat-icon { width: 42px !important; height: 42px !important; border-radius: 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 18px !important; background: rgba(91, 140, 255, 0.10) !important; border: 1px solid rgba(91, 140, 255, 0.18) !important; color: #6FE0FF !important; margin-bottom: 12px !important; background-image: none !important; } .pro-stat-value, .pro-stat .value, .pro-stat-card .value { background: linear-gradient(135deg, #FFFFFF 0%, #C7D2FE 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; font-size: 32px !important; font-weight: 800 !important; letter-spacing: -0.03em !important; font-variant-numeric: tabular-nums !important; } .pro-stat-label, .pro-stat .label { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.10em !important; text-transform: uppercase !important; color: rgba(255, 255, 255, 0.50) !important; margin-top: 4px !important; } .pro-stat-sub, .pro-stat-hint, .pro-stat .sub { font-size: 12.5px !important; color: rgba(255, 255, 255, 0.55) !important; font-weight: 500 !important; margin-top: 4px !important; } /* ─── ACCIONES RÁPIDAS — kill the rainbow ─── */ .pro-actions, .pro-actions-card, .pro-quick-actions { background: rgba(15, 17, 22, 0.78) !important; border: 1px solid rgba(255, 255, 255, 0.07) !important; border-radius: 18px !important; padding: 20px !important; } .pro-actions-title, .pro-actions h2, .pro-actions h3 { font-size: 16px !important; font-weight: 700 !important; letter-spacing: -0.01em !important; color: #F4F5F7 !important; margin-bottom: 14px !important; } /* The big colored buttons → uniform surface + semantic left border */ .pro-btn, .pro-action-btn, .pro-btn-warn, .pro-btn-strike, .pro-btn-bl, .pro-btn-clan, .pro-btn-search, .pro-btn-users, .pro-btn-primary { background: rgba(26, 30, 40, 0.85) !important; background-image: none !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-left: 3px solid rgba(255, 255, 255, 0.15) !important; color: #F4F5F7 !important; border-radius: 12px !important; padding: 14px 18px !important; font-weight: 600 !important; font-size: 14px !important; letter-spacing: -0.005em !important; text-shadow: none !important; box-shadow: none !important; transition: all .15s ease !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important; text-align: left !important; cursor: pointer !important; } .pro-btn:hover, .pro-action-btn:hover, .pro-btn-warn:hover, .pro-btn-strike:hover, .pro-btn-bl:hover, .pro-btn-clan:hover, .pro-btn-search:hover, .pro-btn-users:hover, .pro-btn-primary:hover { background: rgba(35, 40, 52, 0.95) !important; border-color: rgba(255, 255, 255, 0.14) !important; transform: translateY(-1px) !important; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.5) !important; } /* Semantic left-border per action */ .pro-btn-warn { border-left-color: #F59E0B !important; } .pro-btn-strike { border-left-color: #F59E0B !important; } .pro-btn-bl, .pro-btn-blacklist { border-left-color: #EF4444 !important; } .pro-btn-clan, .pro-btn-clanes { border-left-color: #22C55E !important; } .pro-btn-search, .pro-btn-users { border-left-color: #5B8CFF !important; } /* Icons inside the action buttons */ .pro-btn > span:first-child, .pro-action-btn > span:first-child, .pro-btn-warn > span:first-child, .pro-btn-strike > span:first-child, .pro-btn-bl > span:first-child, .pro-btn-clan > span:first-child, .pro-btn-search > span:first-child, .pro-btn-users > span:first-child { display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 16px !important; width: 24px !important; height: 24px !important; flex-shrink: 0 !important; } /* ─── ANY ELEMENT using a `--pro-grad-*` var → kill the rainbow ─── */ /* Catches dynamically-built elements that inline the gradient via var() */ [style*="--pro-grad-1"], [style*="--pro-grad-warn"], [style*="--pro-grad-strike"], [style*="--pro-grad-bl"], [style*="--pro-grad-clan"] { /* var() ya está reescrita arriba, esto está acá por seguridad */ } /* Kill inline tutifruti gradients */ [style*="linear-gradient(135deg, #5865F2"][style*="#EC4899"], [style*="linear-gradient(135deg, #F59E0B"][style*="#EF4444"], [style*="linear-gradient(135deg, #EF4444"][style*="#B91C1C"], [style*="linear-gradient(135deg, #18181B"][style*="#7F1D1D"], [style*="linear-gradient(135deg, #10B981"][style*="#5865F2"] { background: var(--surface-2, rgba(26, 30, 40, 0.85)) !important; background-image: none !important; } /* ─── SIDEBAR / PANEL ─── */ .sidebar, aside.sidebar, .pro-sidebar, [class*="dashboard-sidebar"] { background: rgba(15, 17, 22, 0.86) !important; border-right: 1px solid rgba(255, 255, 255, 0.07) !important; backdrop-filter: blur(16px) saturate(140%) !important; -webkit-backdrop-filter: blur(16px) saturate(140%) !important; padding: 20px 16px !important; } .sidebar h2, .sidebar h3, .sidebar-title, .pro-sidebar-title { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: rgba(255, 255, 255, 0.45) !important; margin-bottom: 16px !important; } /* Profile row in sidebar (ijezko + power icon) */ .sidebar-profile, .sidebar .profile-row, .sidebar .user-row { display: flex !important; align-items: center !important; gap: 12px !important; padding: 12px !important; background: rgba(26, 30, 40, 0.8) !important; border: 1px solid rgba(255, 255, 255, 0.07) !important; border-radius: 14px !important; transition: border-color .2s ease !important; } .sidebar-profile:hover { border-color: rgba(91, 140, 255, 0.25) !important; } .sidebar-profile-name, .sidebar .username { font-weight: 600 !important; color: #F4F5F7 !important; font-size: 14px !important; } .sidebar-profile-role, .sidebar .role { font-size: 11.5px !important; color: rgba(255, 255, 255, 0.50) !important; font-family: 'JetBrains Mono', ui-monospace, monospace !important; letter-spacing: 0.02em !important; } /* Power off button */ .sidebar .logout-btn, .sidebar [class*="logout"], .sidebar [class*="power"] { background: transparent !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; color: rgba(255, 255, 255, 0.55) !important; border-radius: 10px !important; padding: 8px 10px !important; font-size: 14px !important; transition: all .15s ease !important; } .sidebar .logout-btn:hover, .sidebar [class*="logout"]:hover { background: rgba(239, 68, 68, 0.14) !important; color: #EF4444 !important; border-color: rgba(239, 68, 68, 0.3) !important; } /* Server selector slots (top-navbar + sidebar) */ #guild-selector-header, #ow-guild-selector-slot, .guild-selector, [class*="server-select"], [class*="guild-select"] { position: relative !important; } #guild-selector-header #btn-guild-sel, #ow-guild-selector-slot #btn-guild-sel { background: rgba(26, 30, 40, 0.85) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; border-radius: 12px !important; padding: 9px 14px !important; color: #F4F5F7 !important; cursor: pointer !important; transition: all .15s ease !important; min-width: 200px !important; } #guild-selector-header #btn-guild-sel:hover, #ow-guild-selector-slot #btn-guild-sel:hover { border-color: rgba(91, 140, 255, 0.45) !important; background: rgba(35, 40, 52, 0.95) !important; } #guild-dropdown-menu { background: rgba(15, 17, 22, 0.96) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; backdrop-filter: blur(18px) saturate(160%) !important; -webkit-backdrop-filter: blur(18px) saturate(160%) !important; } .guild-drop-item:hover { background: rgba(91, 140, 255, 0.10) !important; } /* ─── Sidebar nav items ─── */ .sidebar-nav { display: flex !important; flex-direction: column !important; gap: 2px !important; padding: 8px 0 !important; } .sidebar-nav .nav-item, .sidebar .nav-item { display: flex !important; align-items: center !important; gap: 12px !important; padding: 10px 14px !important; border-radius: 10px !important; color: rgba(255, 255, 255, 0.72) !important; font-size: 13.5px !important; font-weight: 500 !important; cursor: pointer !important; transition: all .15s ease !important; border: 1px solid transparent !important; background: transparent !important; } .sidebar-nav .nav-item:hover, .sidebar .nav-item:hover { background: rgba(91, 140, 255, 0.10) !important; color: #F4F5F7 !important; border-color: rgba(91, 140, 255, 0.18) !important; transform: translateX(2px) !important; } .sidebar-nav .nav-item.active, .sidebar .nav-item.active { background: rgba(91, 140, 255, 0.16) !important; color: #FFFFFF !important; border-color: rgba(91, 140, 255, 0.32) !important; font-weight: 600 !important; } .sidebar-nav .nav-item.active::before, .sidebar .nav-item.active::before { content: '' !important; position: absolute !important; left: 0 !important; top: 25% !important; bottom: 25% !important; width: 3px !important; background: #5B8CFF !important; border-radius: 0 3px 3px 0 !important; } .sidebar-nav .nav-item-icon, .sidebar .nav-item-icon { font-size: 16px !important; display: inline-flex !important; width: 22px !important; flex-shrink: 0 !important; justify-content: center !important; } .sidebar-nav .nav-item-text, .sidebar .nav-item-text { flex: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .sidebar.collapsed .nav-item-text, .sidebar.collapsed .sidebar-user-info, .sidebar.collapsed .sidebar-brand { display: none !important; } .sidebar.collapsed .nav-item { justify-content: center !important; padding: 10px !important; } /* Sidebar header (PANEL + toggle) */ .sidebar-header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 4px 8px 14px !important; margin-bottom: 6px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; } .sidebar-brand { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: rgba(255, 255, 255, 0.45) !important; } .sidebar-toggle { background: transparent !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; color: rgba(255, 255, 255, 0.65) !important; border-radius: 8px !important; padding: 4px 8px !important; font-size: 13px !important; cursor: pointer !important; } .sidebar-toggle:hover { border-color: rgba(91, 140, 255, 0.35) !important; color: #F4F5F7 !important; } /* Sidebar user row (avatar + name + logout) */ .sidebar-user { display: flex !important; align-items: center !important; gap: 10px !important; padding: 10px 12px !important; margin-top: auto !important; background: rgba(26, 30, 40, 0.85) !important; border: 1px solid rgba(255, 255, 255, 0.07) !important; border-radius: 12px !important; } .sidebar-user-avatar { width: 36px !important; height: 36px !important; border-radius: 10px !important; object-fit: cover !important; flex-shrink: 0 !important; } .sidebar-user-info { flex: 1 !important; min-width: 0 !important; } .sidebar-user-name { font-size: 13px !important; font-weight: 600 !important; color: #F4F5F7 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .sidebar-user-role { font-size: 10.5px !important; color: rgba(255, 255, 255, 0.50) !important; font-family: 'JetBrains Mono', ui-monospace, monospace !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; } #btn-logout { background: transparent !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; color: rgba(255, 255, 255, 0.55) !important; border-radius: 8px !important; padding: 5px 9px !important; cursor: pointer !important; } #btn-logout:hover { background: rgba(239, 68, 68, 0.14) !important; color: #EF4444 !important; border-color: rgba(239, 68, 68, 0.30) !important; } /* ─── Top navbar — keep slightly transparent ─── */ .top-navbar { background: rgba(10, 12, 16, 0.78) !important; backdrop-filter: blur(20px) saturate(160%) !important; -webkit-backdrop-filter: blur(20px) saturate(160%) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important; } /* ─── Reciente / Activity card ─── */ .pro-recent, .pro-recent-card, .pro-activity, [class*="moderation-recent"] { background: rgba(15, 17, 22, 0.78) !important; border: 1px solid rgba(255, 255, 255, 0.07) !important; border-radius: 18px !important; backdrop-filter: blur(8px) !important; } /* ─── Generic buttons cleanup ─── */ .btn, .btn-pop, .btn-ios, .widget-btn { background-image: none !important; border-radius: 10px !important; font-weight: 600 !important; transition: all .15s ease !important; } .btn-primary, button.btn-primary { background: #FFFFFF !important; background-image: none !important; color: #08090C !important; border: 1px solid #FFFFFF !important; } .btn-primary:hover { filter: none !important; transform: translateY(-1px); box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.5); } .btn-ghost, button.btn-ghost { background: transparent !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; color: #F4F5F7 !important; } .btn-ghost:hover { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.20) !important; } /* ─── Aurora bg (subtle, no pink) ─── */ .bg-aurora { background: radial-gradient(900px 600px at 12% 8%, rgba(91, 140, 255, 0.08), transparent 60%), radial-gradient(700px 500px at 88% 92%, rgba(111, 224, 255, 0.05), transparent 65%) !important; opacity: 0.85 !important; } /* ─── Stagger animations on stat cards ─── */ @media (prefers-reduced-motion: no-preference) { .pro-stat, .pro-stat-card { animation: skinPop .55s cubic-bezier(.2,.7,.2,1) both; } .pro-stat:nth-child(1), .pro-stat-card:nth-child(1) { animation-delay: 0s; } .pro-stat:nth-child(2), .pro-stat-card:nth-child(2) { animation-delay: .06s; } .pro-stat:nth-child(3), .pro-stat-card:nth-child(3) { animation-delay: .12s; } .pro-stat:nth-child(4), .pro-stat-card:nth-child(4) { animation-delay: .18s; } .pro-stat:nth-child(5), .pro-stat-card:nth-child(5) { animation-delay: .24s; } .pro-stat:nth-child(6), .pro-stat-card:nth-child(6) { animation-delay: .30s; } } @keyframes skinPop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } [data-perf="lite"] .pro-stat, [data-perf="lite"] .pro-stat-card { animation: none !important; } /* ─── Mobile ─── */ @media (max-width: 768px) { .pro-hero { padding: 20px !important; } .pro-hero-title { font-size: 28px !important; } .pro-stat-value { font-size: 26px !important; } } /* End dashboard-skin.css v3 */