/** * Pink58 White Label Theme Presets * Predefined color schemes for white-label instances * Apply theme via data-theme attribute on element */ /* ======================================== Default Theme (Purple) - Pink58 Branding ======================================== */ :root, [data-theme="purple"] { --color-primary: #667eea; --color-primary-dark: #5a67d8; --color-primary-light: #7c8ef2; --color-secondary: #764ba2; --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --primary-gradient-hover: linear-gradient(135deg, #5a67d8 0%, #6b4190 100%); --accent-color: #667eea; --glow-color: rgba(102, 126, 234, 0.4); --primary-rgb: 102, 126, 234; } /* ======================================== Blue Theme - Corporate/Tech ======================================== */ [data-theme="blue"] { --color-primary: #3B82F6; --color-primary-dark: #2563EB; --color-primary-light: #60A5FA; --color-secondary: #1D4ED8; --primary-gradient: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%); --primary-gradient-hover: linear-gradient(135deg, #2563EB 0%, #1E40AF 100%); --accent-color: #3B82F6; --glow-color: rgba(59, 130, 246, 0.4); --primary-rgb: 59, 130, 246; } /* ======================================== Green Theme - Finance/Growth ======================================== */ [data-theme="green"] { --color-primary: #10B981; --color-primary-dark: #059669; --color-primary-light: #34D399; --color-secondary: #047857; --primary-gradient: linear-gradient(135deg, #10B981 0%, #047857 100%); --primary-gradient-hover: linear-gradient(135deg, #059669 0%, #065F46 100%); --accent-color: #10B981; --glow-color: rgba(16, 185, 129, 0.4); --primary-rgb: 16, 185, 129; } /* ======================================== Orange Theme - Energy/Warmth ======================================== */ [data-theme="orange"] { --color-primary: #F59E0B; --color-primary-dark: #D97706; --color-primary-light: #FBBF24; --color-secondary: #B45309; --primary-gradient: linear-gradient(135deg, #F59E0B 0%, #B45309 100%); --primary-gradient-hover: linear-gradient(135deg, #D97706 0%, #92400E 100%); --accent-color: #F59E0B; --glow-color: rgba(245, 158, 11, 0.4); --primary-rgb: 245, 158, 11; } /* ======================================== Red Theme - Bold/Action ======================================== */ [data-theme="red"] { --color-primary: #EF4444; --color-primary-dark: #DC2626; --color-primary-light: #F87171; --color-secondary: #B91C1C; --primary-gradient: linear-gradient(135deg, #EF4444 0%, #B91C1C 100%); --primary-gradient-hover: linear-gradient(135deg, #DC2626 0%, #991B1B 100%); --accent-color: #EF4444; --glow-color: rgba(239, 68, 68, 0.4); --primary-rgb: 239, 68, 68; } /* ======================================== Teal Theme - Fresh/Modern ======================================== */ [data-theme="teal"] { --color-primary: #14B8A6; --color-primary-dark: #0D9488; --color-primary-light: #2DD4BF; --color-secondary: #0F766E; --primary-gradient: linear-gradient(135deg, #14B8A6 0%, #0F766E 100%); --primary-gradient-hover: linear-gradient(135deg, #0D9488 0%, #115E59 100%); --accent-color: #14B8A6; --glow-color: rgba(20, 184, 166, 0.4); --primary-rgb: 20, 184, 166; } /* ======================================== Pink Theme - Creative/Fun ======================================== */ [data-theme="pink"] { --color-primary: #EC4899; --color-primary-dark: #DB2777; --color-primary-light: #F472B6; --color-secondary: #BE185D; --primary-gradient: linear-gradient(135deg, #EC4899 0%, #BE185D 100%); --primary-gradient-hover: linear-gradient(135deg, #DB2777 0%, #9D174D 100%); --accent-color: #EC4899; --glow-color: rgba(236, 72, 153, 0.4); --primary-rgb: 236, 72, 153; } /* ======================================== Indigo Theme - Professional ======================================== */ [data-theme="indigo"] { --color-primary: #6366F1; --color-primary-dark: #4F46E5; --color-primary-light: #818CF8; --color-secondary: #4338CA; --primary-gradient: linear-gradient(135deg, #6366F1 0%, #4338CA 100%); --primary-gradient-hover: linear-gradient(135deg, #4F46E5 0%, #3730A3 100%); --accent-color: #6366F1; --glow-color: rgba(99, 102, 241, 0.4); } /* ======================================== Theme-Aware Component Overrides ======================================== */ /* Buttons using primary gradient */ [data-theme] .btn-primary, [data-theme] .submit-btn, [data-theme] .login-button, [data-theme] .register-button { background: var(--primary-gradient); } [data-theme] .btn-primary:hover, [data-theme] .submit-btn:hover, [data-theme] .login-button:hover, [data-theme] .register-button:hover { background: var(--primary-gradient-hover); } /* Links and accents */ [data-theme] a:not(.btn) { color: var(--color-primary); } [data-theme] a:not(.btn):hover { color: var(--color-primary-dark); } /* Focus states */ [data-theme] input:focus, [data-theme] select:focus, [data-theme] textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--glow-color); } /* Background gradients for body */ [data-theme].gradient-bg, [data-theme] body.gradient-bg { background: var(--primary-gradient); background-attachment: fixed; } /* Navigation active states */ [data-theme] .nav-item.active, [data-theme] .nav-link.active { color: var(--color-primary); border-color: var(--color-primary); } /* Status indicators using theme colors */ [data-theme] .badge-primary, [data-theme] .tag-primary { background: var(--color-primary); } /* Progress bars */ [data-theme] .progress-bar { background: var(--primary-gradient); } /* Cards with accent borders */ [data-theme] .card-accent { border-left-color: var(--color-primary); } /* Selection highlight */ [data-theme] ::selection { background: var(--color-primary-light); color: white; } /* ======================================== DARK MODE SUPPORT Apply via data-mode="dark" on ======================================== */ /* Dark Mode Base Variables */ [data-mode="dark"], [data-mode="dark"] body { /* Backgrounds */ --bg-primary: #0f172a; --bg-secondary: #1e293b; --bg-tertiary: #334155; /* Text */ --text-primary: #f1f5f9; --text-secondary: #cbd5e1; --text-muted: #94a3b8; /* Borders */ --border-light: #334155; --border-medium: rgba(255, 255, 255, 0.1); /* Glass effect for dark mode */ --glass-bg: rgba(30, 41, 59, 0.9); --glass-border: rgba(255, 255, 255, 0.1); /* Shadows */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.5); --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.6); /* Override any hardcoded backgrounds */ background: #0f172a !important; color: #f1f5f9; } /* Dark mode body styling */ [data-mode="dark"] body { background: #0f172a !important; color: var(--text-primary); } /* Dark mode page backgrounds */ [data-mode="dark"] .page-background::before, [data-mode="dark"] .page-background::after { opacity: 0.15; } /* Dark mode cards - comprehensive */ [data-mode="dark"] .glass-card, [data-mode="dark"] .stat-card, [data-mode="dark"] .card, [data-mode="dark"] .campaign-card, [data-mode="dark"] .creator-card, [data-mode="dark"] .submission-card, [data-mode="dark"] .metric-card, [data-mode="dark"] .info-card, [data-mode="dark"] .analytics-card, [data-mode="dark"] .payout-card, [data-mode="dark"] .content-card, [data-mode="dark"] [class*="-card"] { background: rgba(30, 41, 59, 0.9) !important; border-color: rgba(255, 255, 255, 0.1) !important; color: var(--text-primary); } /* Dark mode stat values */ [data-mode="dark"] .stat-value, [data-mode="dark"] .metric-value, [data-mode="dark"] .stat-number, [data-mode="dark"] h1, [data-mode="dark"] h2, [data-mode="dark"] h3, [data-mode="dark"] h4 { color: var(--text-primary) !important; } /* Dark mode labels and muted text */ [data-mode="dark"] .stat-label, [data-mode="dark"] .metric-label, [data-mode="dark"] .card-subtitle, [data-mode="dark"] .text-muted, [data-mode="dark"] .text-secondary, [data-mode="dark"] small, [data-mode="dark"] label { color: var(--text-secondary) !important; } /* Dark mode containers and sections */ [data-mode="dark"] .dashboard-container, [data-mode="dark"] .main-content, [data-mode="dark"] .content-area, [data-mode="dark"] .page-content, [data-mode="dark"] main { background: transparent; } /* Dark mode inputs */ [data-mode="dark"] input, [data-mode="dark"] select, [data-mode="dark"] textarea, [data-mode="dark"] .form-control, [data-mode="dark"] .form-input { background: #1e293b !important; color: #f1f5f9 !important; border-color: #334155 !important; } [data-mode="dark"] input::placeholder, [data-mode="dark"] textarea::placeholder { color: #94a3b8 !important; } /* Dark mode tables */ [data-mode="dark"] table, [data-mode="dark"] .data-table { background: #1e293b; } [data-mode="dark"] th { background: #334155 !important; color: #f1f5f9 !important; border-color: #334155 !important; } [data-mode="dark"] td { border-color: #334155 !important; color: #cbd5e1; background: transparent; } [data-mode="dark"] tr:hover td { background: rgba(51, 65, 85, 0.5); } [data-mode="dark"] tbody tr { border-color: #334155 !important; } /* Dark mode modals */ [data-mode="dark"] .modal-content, [data-mode="dark"] .modal, [data-mode="dark"] .modal-body, [data-mode="dark"] .modal-header, [data-mode="dark"] .modal-footer, [data-mode="dark"] .popup, [data-mode="dark"] .dialog { background: #1e293b !important; border-color: #334155 !important; color: #f1f5f9; } /* Dark mode modal overlay */ [data-mode="dark"] .modal-overlay, [data-mode="dark"] .modal-backdrop { background: rgba(0, 0, 0, 0.7); } /* Dark mode navigation */ [data-mode="dark"] .nav-tabs, [data-mode="dark"] nav, [data-mode="dark"] .navbar, [data-mode="dark"] .sidebar { background: rgba(30, 41, 59, 0.95) !important; border-color: #334155 !important; } [data-mode="dark"] .nav-tab, [data-mode="dark"] .nav-link, [data-mode="dark"] .nav-item { color: #cbd5e1 !important; } [data-mode="dark"] .nav-tab:hover, [data-mode="dark"] .nav-link:hover, [data-mode="dark"] .nav-item:hover { color: #f1f5f9 !important; background: rgba(51, 65, 85, 0.5); } [data-mode="dark"] .nav-tab.active, [data-mode="dark"] .nav-link.active, [data-mode="dark"] .nav-item.active { color: var(--color-primary) !important; } /* Dark mode header */ [data-mode="dark"] .dashboard-header, [data-mode="dark"] header { background: transparent; } [data-mode="dark"] .header-title { -webkit-text-fill-color: var(--text-primary); color: var(--text-primary); } /* Dark mode buttons - secondary */ [data-mode="dark"] .btn-secondary, [data-mode="dark"] .btn-outline { background: #334155 !important; border-color: #475569 !important; color: #f1f5f9 !important; } [data-mode="dark"] .btn-secondary:hover, [data-mode="dark"] .btn-outline:hover { background: #475569 !important; } /* Dark mode badges */ [data-mode="dark"] .badge, [data-mode="dark"] .tag, [data-mode="dark"] .chip { background: #334155; color: #f1f5f9; } /* Keep colored badges visible */ [data-mode="dark"] .badge-success, [data-mode="dark"] .badge-approved { background: rgba(16, 185, 129, 0.2) !important; color: #34d399 !important; } [data-mode="dark"] .badge-warning, [data-mode="dark"] .badge-pending { background: rgba(245, 158, 11, 0.2) !important; color: #fbbf24 !important; } [data-mode="dark"] .badge-danger, [data-mode="dark"] .badge-error { background: rgba(239, 68, 68, 0.2) !important; color: #f87171 !important; } [data-mode="dark"] .badge-info { background: rgba(59, 130, 246, 0.2) !important; color: #60a5fa !important; } /* Dark mode dropdowns */ [data-mode="dark"] .dropdown-menu, [data-mode="dark"] .select-dropdown, [data-mode="dark"] .profile-dropdown-menu, [data-mode="dark"] .context-menu { background: #1e293b !important; border-color: #334155 !important; } [data-mode="dark"] .dropdown-item, [data-mode="dark"] .dropdown-option { color: #cbd5e1; } [data-mode="dark"] .dropdown-item:hover, [data-mode="dark"] .dropdown-option:hover { background: #334155; color: #f1f5f9; } /* Dark mode user profile */ [data-mode="dark"] .user-profile-dropdown, [data-mode="dark"] .user-profile-trigger { background: transparent; } [data-mode="dark"] .user-info, [data-mode="dark"] .user-name { color: #f1f5f9; } /* Dark mode tooltips */ [data-mode="dark"] .tooltip, [data-mode="dark"] [data-tooltip]::after { background: #334155; color: #f1f5f9; } /* Dark mode charts and analytics */ [data-mode="dark"] .chart-container, [data-mode="dark"] .analytics-container { background: transparent; } /* Dark mode dividers */ [data-mode="dark"] hr, [data-mode="dark"] .divider, [data-mode="dark"] .dropdown-divider { border-color: #334155 !important; } /* Dark mode scrollbars */ [data-mode="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } [data-mode="dark"] ::-webkit-scrollbar-track { background: #1e293b; } [data-mode="dark"] ::-webkit-scrollbar-thumb { background: #475569; border-radius: 4px; } [data-mode="dark"] ::-webkit-scrollbar-thumb:hover { background: #64748b; } /* Dark mode empty states */ [data-mode="dark"] .empty-state, [data-mode="dark"] .no-data { color: #94a3b8; } /* Dark mode skeleton/loading */ [data-mode="dark"] .skeleton, [data-mode="dark"] .loading-placeholder { background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%); } /* Dark mode icons */ [data-mode="dark"] .icon, [data-mode="dark"] i.fas, [data-mode="dark"] i.far, [data-mode="dark"] i.fab { color: inherit; } /* Dark mode links */ [data-mode="dark"] a:not(.btn) { color: var(--color-primary-light, #818cf8); } /* Override white backgrounds everywhere */ [data-mode="dark"] [style*="background: white"], [data-mode="dark"] [style*="background:#fff"], [data-mode="dark"] [style*="background: #fff"], [data-mode="dark"] [style*="background-color: white"], [data-mode="dark"] [style*="background-color:#fff"], [data-mode="dark"] [style*="background-color: #fff"] { background: #1e293b !important; } /* Dark mode for specific campaign card elements */ [data-mode="dark"] .campaign-stats, [data-mode="dark"] .campaign-info, [data-mode="dark"] .campaign-meta { color: var(--text-secondary); } [data-mode="dark"] .campaign-name, [data-mode="dark"] .campaign-title, [data-mode="dark"] .creator-name { color: var(--text-primary) !important; } /* Dark mode stat boxes inside cards */ [data-mode="dark"] .stat-box, [data-mode="dark"] .mini-stat { background: rgba(51, 65, 85, 0.5) !important; border-color: rgba(255, 255, 255, 0.05) !important; } /* Dark mode progress bars */ [data-mode="dark"] .progress-track, [data-mode="dark"] .progress-bg { background: #334155; } /* ======================================== COMPREHENSIVE DARK MODE OVERRIDES Catch all remaining hardcoded colors ======================================== */ /* Force dark backgrounds on common elements */ [data-mode="dark"] .section, [data-mode="dark"] .container, [data-mode="dark"] .wrapper, [data-mode="dark"] .box, [data-mode="dark"] .panel, [data-mode="dark"] .form-group, [data-mode="dark"] .form-section, [data-mode="dark"] .filter-bar, [data-mode="dark"] .filters-bar, [data-mode="dark"] .action-bar, [data-mode="dark"] .toolbar { background: transparent; } /* Override hardcoded white/light backgrounds */ [data-mode="dark"] .profile-header, [data-mode="dark"] .social-accounts-section, [data-mode="dark"] .payment-section, [data-mode="dark"] .earnings-section, [data-mode="dark"] .performance-section, [data-mode="dark"] .submissions-section, [data-mode="dark"] .settings-section, [data-mode="dark"] .chart-section, [data-mode="dark"] .analytics-section { background: rgba(30, 41, 59, 0.9) !important; border-color: #334155 !important; } /* Dark mode for any element with white background class */ [data-mode="dark"] .bg-white, [data-mode="dark"] .background-white { background: #1e293b !important; } /* Force text colors for headings */ [data-mode="dark"] [style*="color: #000"], [data-mode="dark"] [style*="color:#000"], [data-mode="dark"] [style*="color: #111"], [data-mode="dark"] [style*="color:#111"], [data-mode="dark"] [style*="color: black"], [data-mode="dark"] [style*="color:black"] { color: #f1f5f9 !important; } /* Clipper-specific dark mode overrides */ [data-mode="dark"] .clipper-card, [data-mode="dark"] .clipper-section, [data-mode="dark"] .clipper-box { background: rgba(30, 41, 59, 0.9) !important; border-color: #334155 !important; } /* Account cards and social media connections */ [data-mode="dark"] .account-card, [data-mode="dark"] .social-card, [data-mode="dark"] .connection-card, [data-mode="dark"] .platform-card { background: #1e293b !important; border-color: #334155 !important; } [data-mode="dark"] .account-name, [data-mode="dark"] .social-handle, [data-mode="dark"] .platform-name { color: #f1f5f9 !important; } [data-mode="dark"] .account-type, [data-mode="dark"] .social-stats, [data-mode="dark"] .connection-info { color: #94a3b8 !important; } /* Payment method cards */ [data-mode="dark"] .payment-card, [data-mode="dark"] .payment-method-card, [data-mode="dark"] .payout-card { background: #1e293b !important; border-color: #334155 !important; } /* Warning banners */ [data-mode="dark"] .warning-banner, [data-mode="dark"] .alert-warning { background: rgba(245, 158, 11, 0.15) !important; border-color: rgba(245, 158, 11, 0.3) !important; } [data-mode="dark"] .success-banner, [data-mode="dark"] .alert-success { background: rgba(16, 185, 129, 0.15) !important; border-color: rgba(16, 185, 129, 0.3) !important; } [data-mode="dark"] .error-banner, [data-mode="dark"] .alert-error, [data-mode="dark"] .alert-danger { background: rgba(239, 68, 68, 0.15) !important; border-color: rgba(239, 68, 68, 0.3) !important; } /* Filter dropdowns and selects */ [data-mode="dark"] .filter-select, [data-mode="dark"] .filter-dropdown, [data-mode="dark"] .period-select { background: #1e293b !important; border-color: #334155 !important; color: #f1f5f9 !important; } /* Submission cards and grids */ [data-mode="dark"] .submission-card, [data-mode="dark"] .submission-item, [data-mode="dark"] .grid-item { background: rgba(30, 41, 59, 0.9) !important; border-color: #334155 !important; } /* Creator/user cards */ [data-mode="dark"] .creator-card, [data-mode="dark"] .user-card, [data-mode="dark"] .member-card { background: rgba(30, 41, 59, 0.9) !important; border-color: #334155 !important; } /* Statistics and metrics */ [data-mode="dark"] .stat-value, [data-mode="dark"] .metric-value, [data-mode="dark"] .number-value, [data-mode="dark"] .count-value { color: #f1f5f9 !important; } [data-mode="dark"] .stat-label, [data-mode="dark"] .metric-label, [data-mode="dark"] .stat-description { color: #94a3b8 !important; } /* White-label specific overrides */ [data-mode="dark"] .brand-logo, [data-mode="dark"] .white-label-logo { filter: brightness(0.9); } /* Ensure all form elements are dark */ [data-mode="dark"] input[type="text"], [data-mode="dark"] input[type="email"], [data-mode="dark"] input[type="password"], [data-mode="dark"] input[type="number"], [data-mode="dark"] input[type="url"], [data-mode="dark"] input[type="search"], [data-mode="dark"] input[type="date"], [data-mode="dark"] select, [data-mode="dark"] textarea { background: #1e293b !important; border-color: #334155 !important; color: #f1f5f9 !important; } /* Popups and dialogs */ [data-mode="dark"] .popup, [data-mode="dark"] .dialog, [data-mode="dark"] .lightbox, [data-mode="dark"] .overlay-content { background: #1e293b !important; border-color: #334155 !important; } /* Tab content */ [data-mode="dark"] .tab-content, [data-mode="dark"] .tab-pane, [data-mode="dark"] .tabs-content { background: transparent; } /* List items */ [data-mode="dark"] .list-item, [data-mode="dark"] .list-row, [data-mode="dark"] li.item { border-color: #334155 !important; } [data-mode="dark"] .list-item:hover, [data-mode="dark"] .list-row:hover { background: rgba(51, 65, 85, 0.5) !important; }