/* * assets/css/desktop-base.css * ───────────────────────────────────────────────────────────────────────────── * Shared base styles for all desktop pages: * — CSS reset, body defaults, shared utilities * ───────────────────────────────────────────────────────────────────────────── * Load order: themes.css → desktop-base.css → topbar.css → [page].css * Font (Cairo) is loaded via in each page's . * ───────────────────────────────────────────────────────────────────────────── */ /* ═══ CSS reset ═════════════════════════════════════════════════════════════ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: 'Cairo', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; direction: rtl; overflow-x: hidden; line-height: 1.5; transition: background .25s, color .25s; } a { text-decoration: none; color: inherit; } button { font-family: 'Cairo', sans-serif; cursor: pointer; } img { max-width: 100%; display: block; } /* ═══ Page wrapper (offset for fixed topbar) ════════════════════════════════ */ .page-wrap { padding-top: var(--topbar-h); min-height: 100vh; } /* ═══ Max-width content container ══════════════════════════════════════════ */ .page-inner { max-width: var(--max-w); margin: 0 auto; padding: 28px 24px 60px; } /* ═══ Card ══════════════════════════════════════════════════════════════════ */ .d-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--rl); box-shadow: var(--sh1); overflow: hidden; } .d-card-head { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; font-size: .8rem; font-weight: 900; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; } .d-card-head i { color: var(--primary); font-size: .9rem; } .d-card-body { padding: 20px; } /* ═══ Section title / divider ═══════════════════════════════════════════════ */ .section-title { font-size: .75rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; display: flex; align-items: center; gap: 8px; margin-bottom: 14px; } .section-title::after { content: ''; flex: 1; height: 1px; background: var(--border); } .section-title i { color: var(--primary); font-size: .85rem; } /* ═══ Badge ═════════════════════════════════════════════════════════════════ */ .d-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: .7rem; font-weight: 700; } /* ═══ Button variants ═══════════════════════════════════════════════════════ */ .btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 11px 24px; border-radius: 50px; background: linear-gradient(135deg,var(--primary),#818cf8); color: #fff; font-weight: 800; font-size: .9rem; border: none; font-family: 'Cairo', sans-serif; transition: transform .15s, box-shadow .15s; box-shadow: 0 4px 16px rgba(99,102,241,.3); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(99,102,241,.45); } .btn-primary:active { transform: scale(.97); } .btn-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 9px 20px; border-radius: 50px; background: transparent; border: 1.5px solid var(--border); color: var(--muted); font-weight: 700; font-size: .88rem; font-family: 'Cairo', sans-serif; transition: border-color .18s, color .18s; } .btn-ghost:hover { border-color: var(--primary); color: var(--primary); } /* ═══ Toast notification ════════════════════════════════════════════════════ */ .d-toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(14px); background: var(--card); color: var(--text); border: 1px solid var(--border); padding: 11px 24px; border-radius: 50px; font-size: .85rem; font-weight: 600; white-space: nowrap; z-index: 9999; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; display: flex; align-items: center; gap: 9px; max-width: 90vw; box-shadow: var(--sh2); } .d-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); } .d-toast.ok i { color: var(--green); } .d-toast.err i { color: var(--red); } /* ═══ Empty state ═══════════════════════════════════════════════════════════ */ .d-empty { text-align: center; padding: 80px 20px 40px; } .d-empty-icon { width: 100px; height: 100px; margin: 0 auto 24px; border-radius: 50%; background: rgba(165,180,252,.1); border: 2px solid rgba(165,180,252,.15); display: flex; align-items: center; justify-content: center; font-size: 2.8rem; } .d-empty h2 { font-size: 1.1rem; font-weight: 900; margin-bottom: 8px; } .d-empty p { font-size: .88rem; color: var(--muted); font-weight: 600; line-height: 1.7; margin-bottom: 28px; } /* ═══ Animations ════════════════════════════════════════════════════════════ */ @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes shimmer { to { background-position: -200% 0; } } .fade-up { animation: fadeUp .35s ease both; } /* ═══ Skeleton loader ═══════════════════════════════════════════════════════ */ .sk { background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.1) 50%, rgba(255,255,255,.05) 75% ); background-size: 200% 100%; animation: shimmer 1.3s infinite; border-radius: 8px; } [data-theme="light"] .sk { background: linear-gradient(90deg,#f0ebff 25%,#e8e0ff 50%,#f0ebff 75%); } [data-theme="purple"] .sk { background: linear-gradient(90deg, rgba(192,132,252,.06) 25%, rgba(192,132,252,.12) 50%, rgba(192,132,252,.06) 75% ); } /* ═══ Custom scrollbar ══════════════════════════════════════════════════════ */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--muted); } /* ═══ Responsive: hide sidebar on small screens ════════════════════════════ */ @media (max-width: 1100px) { .page-sidebar { display: none; } } @media (max-width: 768px) { .page-inner { padding: 16px 12px 40px; } }