/* ========================================================================= PORTAL THEMES — 10 roop, teen surface (home / user / admin) KAISE CHALTA HAI ---------------- par do class lagti hain, jaise: pp-theme pp-theme-ocean pp-surface-user Baaki sab kuch neeche ke CSS variables se hota hai. Koi blade dobara nahi likhi gayi, koi layout copy nahi hua — isliye koi bhi theme kisi page ko tod nahi sakta, aur naya theme jodna sirf ek block likhna hai. `pp-theme-classic` me KUCH BHI override nahi hai — wo bilkul wahi purana look hai. Isliye theme wapas Classic karte hi portal hubahu pehle jaisa. NOTE: `style.css` ke baad load hota hai, isliye yahan `!important` ki zarurat sirf wahan hai jahan style.css me khud `!important` laga hua hai. ========================================================================= */ /* ---------- har theme ke liye ek hi dhaancha ---------- */ .pp-theme { --pp-bg: #f4f7fb; --pp-surface: #ffffff; --pp-text: #1f2937; --pp-muted: #6b7280; --pp-line: #e5e7eb; --pp-accent: #3b82f6; --pp-accent-2: #2563eb; --pp-radius: 12px; --pp-radius-sm: 10px; --pp-shadow: 0 1px 3px rgba(0,0,0,.04); --pp-shadow-lg: 0 6px 12px rgba(0,0,0,.10); --pp-tile-bg: #ffffff; --pp-head-weight: 700; --pp-font: 'Segoe UI', system-ui, -apple-system, sans-serif; } /* ========================================================================= 1. CLASSIC — jaan-boojh kar KHALI. Yahi aaj ka look hai. ========================================================================= */ /* ========================================================================= 2. MIDNIGHT — poora dark ========================================================================= */ .pp-theme-midnight { --pp-bg: #0f172a; --pp-surface: #1e293b; --pp-text: #e2e8f0; --pp-muted: #94a3b8; --pp-line: #334155; --pp-accent: #6366f1; --pp-accent-2: #4f46e5; --pp-tile-bg: #1e293b; --pp-shadow: 0 1px 3px rgba(0,0,0,.4); --pp-shadow-lg: 0 8px 20px rgba(0,0,0,.5); } /* ========================================================================= 3. OCEAN — neela, kaanch jaisa ========================================================================= */ .pp-theme-ocean { --pp-bg: #ecfeff; --pp-surface: rgba(255,255,255,.78); --pp-text: #0f3d4c; --pp-muted: #5b8a97; --pp-line: #bae6fd; --pp-accent: #0ea5e9; --pp-accent-2: #0284c7; --pp-radius: 18px; --pp-radius-sm: 14px; --pp-tile-bg: rgba(255,255,255,.72); --pp-shadow: 0 4px 14px rgba(14,165,233,.10); --pp-shadow-lg: 0 10px 28px rgba(14,165,233,.20); } .pp-theme-ocean .card, .pp-theme-ocean .services-block, .pp-theme-ocean .service-tile-mini { backdrop-filter: blur(6px); } /* ========================================================================= 4. SUNSET — garam gradient ========================================================================= */ .pp-theme-sunset { --pp-bg: #fff7ed; --pp-surface: #ffffff; --pp-text: #431407; --pp-muted: #9a6b4f; --pp-line: #fed7aa; --pp-accent: #f97316; --pp-accent-2: #db2777; --pp-radius: 16px; --pp-shadow-lg: 0 10px 24px rgba(249,115,22,.22); } .pp-theme-sunset .services-block, .pp-theme-sunset .card { border-top: 3px solid transparent; border-image: linear-gradient(90deg,#f97316,#db2777) 1; } /* ========================================================================= 5. FOREST — hara, bilkul flat ========================================================================= */ .pp-theme-forest { --pp-bg: #f0fdf4; --pp-surface: #ffffff; --pp-text: #14532d; --pp-muted: #5f8f72; --pp-line: #bbf7d0; --pp-accent: #16a34a; --pp-accent-2: #15803d; --pp-radius: 8px; --pp-radius-sm: 6px; --pp-shadow: none; --pp-shadow-lg: none; } .pp-theme-forest .card, .pp-theme-forest .services-block, .pp-theme-forest .service-tile-mini { border: 1px solid var(--pp-line); } .pp-theme-forest .service-tile-mini:hover { transform: none; box-shadow: none; border-color: var(--pp-accent); } /* ========================================================================= 6. ROYAL — baingani, bhaari ========================================================================= */ .pp-theme-royal { --pp-bg: #faf5ff; --pp-surface: #ffffff; --pp-text: #2e1065; --pp-muted: #7c6b9a; --pp-line: #e9d5ff; --pp-accent: #7c3aed; --pp-accent-2: #6d28d9; --pp-radius: 16px; --pp-head-weight: 800; --pp-shadow: 0 4px 10px rgba(124,58,237,.10); --pp-shadow-lg: 0 14px 34px rgba(124,58,237,.26); } .pp-theme-royal .services-category, .pp-theme-royal .card-header { letter-spacing: .5px; } /* ========================================================================= 7. MONO — kaala-safed, nukeele kone ========================================================================= */ .pp-theme-mono { --pp-bg: #ffffff; --pp-surface: #ffffff; --pp-text: #111827; --pp-muted: #6b7280; --pp-line: #d1d5db; --pp-accent: #111827; --pp-accent-2: #374151; --pp-radius: 0px; --pp-radius-sm: 0px; --pp-shadow: none; --pp-shadow-lg: none; } .pp-theme-mono .card, .pp-theme-mono .services-block, .pp-theme-mono .service-tile-mini, .pp-theme-mono .stat-card, .pp-theme-mono .svc-tab { border: 1px solid var(--pp-line); border-radius: 0; } /* Rang wale gradient bhi kaale-safed — warna theme aadha-adhoora lagta hai. */ .pp-theme-mono .stat-card, .pp-theme-mono .svc-tab, .pp-theme-mono .service-icon-mini:not(.has-logo) { background: #111827 !important; } .pp-theme-mono .svc-tab:not(.active) { background: #6b7280 !important; } /* ========================================================================= 8. NEON — kaala + chamak ========================================================================= */ .pp-theme-neon { --pp-bg: #09090b; --pp-surface: #18181b; --pp-text: #f4f4f5; --pp-muted: #a1a1aa; --pp-line: #3f3f46; --pp-accent: #22d3ee; --pp-accent-2: #a855f7; --pp-radius: 14px; --pp-tile-bg: #18181b; --pp-shadow: 0 0 0 1px rgba(34,211,238,.16); --pp-shadow-lg: 0 0 22px rgba(34,211,238,.35); } .pp-theme-neon .service-tile-mini:hover { box-shadow: 0 0 20px rgba(34,211,238,.45); } .pp-theme-neon .services-category { color: var(--pp-accent); text-shadow: 0 0 10px rgba(34,211,238,.5); } /* ========================================================================= 9. PAPER — kaagaz jaisa ========================================================================= */ .pp-theme-paper { --pp-bg: #fdfaf3; --pp-surface: #fffdf7; --pp-text: #3f3020; --pp-muted: #8b7a63; --pp-line: #e7dcc7; --pp-accent: #b45309; --pp-accent-2: #92400e; --pp-radius: 4px; --pp-radius-sm: 4px; --pp-shadow: none; --pp-shadow-lg: 0 2px 6px rgba(120,90,40,.14); --pp-font: Georgia, 'Times New Roman', serif; } .pp-theme-paper .card, .pp-theme-paper .services-block, .pp-theme-paper .service-tile-mini { border: 1px solid var(--pp-line); } /* Form ke andar serif padhne me bura lagta hai — sirf headings par rakha. */ .pp-theme-paper input, .pp-theme-paper select, .pp-theme-paper textarea, .pp-theme-paper .btn { font-family: 'Segoe UI', system-ui, sans-serif; } /* ========================================================================= 10. COMPACT — sab kuch paas-paas ========================================================================= */ .pp-theme-compact { --pp-bg: #f8fafc; --pp-surface: #ffffff; --pp-text: #0f172a; --pp-muted: #64748b; --pp-line: #e2e8f0; --pp-accent: #2563eb; --pp-accent-2: #1d4ed8; --pp-radius: 8px; --pp-radius-sm: 6px; } .pp-theme-compact .services-block { padding: .7rem; } .pp-theme-compact .svc-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: .4rem; } .pp-theme-compact .service-tile-mini { padding: .5rem .25rem; } .pp-theme-compact .service-icon-mini { width: 34px; height: 34px; font-size: .9rem; margin-bottom: .3rem; } .pp-theme-compact .service-mini-name { font-size: .66rem; } .pp-theme-compact .stat-card { padding: .6rem .4rem; } .pp-theme-compact .stat-card h2 { font-size: 1.35rem; } .pp-theme-compact .svc-tabs { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .4rem; } .pp-theme-compact .svc-tab { padding: .5rem .6rem; } .pp-theme-compact .card-body { padding: .75rem; } /* ========================================================================= VARIABLES KO ASLI PAGE PAR LAGANA ------------------------------------------------------------------------- `.pp-theme-classic` par ye sab bhi lagta hai, par uske variables wahi hain jo style.css me pehle se the — isliye dikhne me koi fark nahi padta. ========================================================================= */ body.pp-theme { background: var(--pp-bg) !important; color: var(--pp-text); font-family: var(--pp-font); } .pp-theme.portal-body, .pp-theme.admin-body { background: var(--pp-bg) !important; } .pp-theme .card, .pp-theme .services-block, .pp-theme .sidebar, .pp-theme .table, .pp-theme .modal-content { background-color: var(--pp-surface); color: var(--pp-text); border-radius: var(--pp-radius); box-shadow: var(--pp-shadow); } .pp-theme .card { border-color: var(--pp-line); } .pp-theme .card-header { background-color: transparent; border-color: var(--pp-line); font-weight: var(--pp-head-weight); } .pp-theme .card-footer { background-color: transparent; border-color: var(--pp-line); } .pp-theme .service-tile-mini { background: var(--pp-tile-bg); border-color: var(--pp-line); color: var(--pp-text); border-radius: var(--pp-radius-sm); } .pp-theme .service-tile-mini:hover { box-shadow: var(--pp-shadow-lg); color: var(--pp-text); } .pp-theme .service-icon-mini { border-radius: var(--pp-radius-sm); } .pp-theme .service-mini-name { color: var(--pp-text); } .pp-theme .services-category { color: var(--pp-muted); } .pp-theme .stat-card, .pp-theme .svc-tab { border-radius: var(--pp-radius); } .pp-theme .text-muted { color: var(--pp-muted) !important; } .pp-theme .form-control, .pp-theme .form-select { background-color: var(--pp-surface); color: var(--pp-text); border-color: var(--pp-line); border-radius: var(--pp-radius-sm); } .pp-theme .form-control::placeholder { color: var(--pp-muted); } .pp-theme .table > :not(caption) > * > * { background-color: transparent; color: var(--pp-text); border-color: var(--pp-line); } .pp-theme .table-light > :not(caption) > * > * { background-color: rgba(125,125,125,.10); color: var(--pp-text); } .pp-theme hr { border-color: var(--pp-line); } .pp-theme .btn-primary { background: linear-gradient(135deg, var(--pp-accent), var(--pp-accent-2)); border: 0; } .pp-theme .menu-item { color: var(--pp-text); } .pp-theme .menu-item:hover, .pp-theme .menu-item.active { background: rgba(125,125,125,.14); color: var(--pp-text); } /* Dark themes — jahan style.css ne rang HARDCODE kiya hai, wahan hi hath lagana padta hai, warna kaale background par kaala text reh jaata hai. */ .pp-theme-midnight .bg-white, .pp-theme-neon .bg-white, .pp-theme-midnight .bg-light, .pp-theme-neon .bg-light { background-color: var(--pp-surface) !important; color: var(--pp-text) !important; } .pp-theme-midnight .text-dark, .pp-theme-neon .text-dark { color: var(--pp-text) !important; } .pp-theme-midnight .border, .pp-theme-neon .border { border-color: var(--pp-line) !important; } .pp-theme-midnight .badge.bg-light, .pp-theme-neon .badge.bg-light { background-color: rgba(255,255,255,.10) !important; color: var(--pp-text) !important; } .pp-theme-midnight .dropdown-menu, .pp-theme-neon .dropdown-menu { background-color: var(--pp-surface); border-color: var(--pp-line); } .pp-theme-midnight .dropdown-item, .pp-theme-neon .dropdown-item { color: var(--pp-text); } .pp-theme-midnight .dropdown-item:hover, .pp-theme-neon .dropdown-item:hover { background-color: rgba(255,255,255,.08); } .pp-theme-midnight .alert-light, .pp-theme-neon .alert-light { background-color: rgba(255,255,255,.06); color: var(--pp-text); border-color: var(--pp-line); } /* Admin ka topbar har theme ke accent par */ .pp-theme .admin-topbar { background: linear-gradient(135deg, var(--pp-accent), var(--pp-accent-2)) !important; } /* Theme picker ke card (admin screen) */ .pp-th-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: .75rem; } .pp-th-card { border: 2px solid #e5e7eb; border-radius: 12px; padding: 0; cursor: pointer; overflow: hidden; background: #fff; text-align: left; transition: all .15s ease; width: 100%; } .pp-th-card:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.12); } .pp-th-card.is-on { border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,.18); } .pp-th-prev { height: 66px; display: flex; align-items: center; justify-content: center; gap: 6px; } .pp-th-dot { width: 20px; height: 20px; border-radius: 6px; } .pp-th-bar { width: 44px; height: 8px; border-radius: 4px; opacity: .75; } .pp-th-body { padding: .5rem .6rem; } .pp-th-name { font-weight: 700; font-size: .85rem; color: #111827; } .pp-th-hint { font-size: .68rem; color: #6b7280; line-height: 1.3; }