/* ========================================================== Reusable Components — buttons, cards, tags, alerts, forms ========================================================== */ /* ---------------------------------------------------------- Design Tokens — mirrors includes/tailwind_config.php so the plain-CSS rules below (which can't read Tailwind's config) stay in sync with the single source of truth. ---------------------------------------------------------- */ :root { /* قنوات RGB (تُستهلَك في tailwind_config.php بصيغة rgb(var(--x) / )) */ --background-rgb: 19 19 19; --surface-rgb: 21 21 21; --surface-container-lowest-rgb: 14 14 14; --surface-container-low-rgb: 28 27 27; --surface-container-rgb: 32 31 31; --surface-container-high-rgb: 42 42 42; --surface-container-highest-rgb: 53 53 52; --card-bg-rgb: 27 27 27; --text-primary-rgb: 255 255 255; --text-secondary-rgb: 179 179 179; --text-muted-rgb: 124 124 124; --primary-rgb: 255 180 170; --primary-container-rgb: 229 9 20; --on-primary-rgb: 105 0 3; --border-muted-rgb: 42 42 42; --success-rgb: 34 197 94; --warning-rgb: 245 158 11; --error-rgb: 239 68 68; /* نسخ hex مشتقّة (تُستهلَك في قواعد CSS العادية أدناه) */ --background: rgb(var(--background-rgb)); --surface: rgb(var(--surface-rgb)); --surface-container-lowest: rgb(var(--surface-container-lowest-rgb)); --surface-container-low: rgb(var(--surface-container-low-rgb)); --surface-container: rgb(var(--surface-container-rgb)); --surface-container-high: rgb(var(--surface-container-high-rgb)); --surface-container-highest: rgb(var(--surface-container-highest-rgb)); --card-bg: rgb(var(--card-bg-rgb)); --text-primary: rgb(var(--text-primary-rgb)); --text-secondary: rgb(var(--text-secondary-rgb)); --text-muted: rgb(var(--text-muted-rgb)); --primary: rgb(var(--primary-rgb)); --primary-container: rgb(var(--primary-container-rgb)); --on-primary: rgb(var(--on-primary-rgb)); --tertiary: #A7C8FF; --border-muted: rgb(var(--border-muted-rgb)); --success: rgb(var(--success-rgb)); --warning: rgb(var(--warning-rgb)); --error: rgb(var(--error-rgb)); --radius: 4px; --radius-lg: 8px; --radius-xl: 12px; --radius-full: 9999px; --transition: 200ms cubic-bezier(.2, .8, .2, 1); --ease-standard: cubic-bezier(.2, .8, .2, 1); --ease-out-ios: cubic-bezier(.16, 1, .3, 1); --ease-in-ios: cubic-bezier(.4, 0, 1, 1); --shadow-elevation-1: 0 4px 12px rgba(0, 0, 0, .35); --shadow-lg: 0 12px 32px rgba(0, 0, 0, .5); } /* ---------------------------------------------------------- Light mode palette (Part 6). Applied when carries the `.light` class (toggled + persisted via assets/js/main.js). Only the color channels change; every component reads them via the CSS variables above, so nothing else needs to be rebuilt. Brand red + status colors stay identical for brand continuity. ---------------------------------------------------------- */ html.light { --background-rgb: 246 247 249; --surface-rgb: 255 255 255; --surface-container-lowest-rgb: 255 255 255; --surface-container-low-rgb: 241 242 244; --surface-container-rgb: 236 238 241; --surface-container-high-rgb: 226 229 233; --surface-container-highest-rgb: 215 219 224; --card-bg-rgb: 255 255 255; --text-primary-rgb: 22 24 29; --text-secondary-rgb: 74 80 89; --text-muted-rgb: 138 144 153; --primary-rgb: 192 0 12; --on-primary-rgb: 255 255 255; --border-muted-rgb: 226 229 233; --shadow-elevation-1: 0 4px 12px rgba(20, 22, 26, .08); --shadow-lg: 0 12px 32px rgba(20, 22, 26, .12); } /* Smooth, GPU-cheap cross-fade between themes (colors only). */ html.theme-ready body, html.theme-ready body * { transition: background-color .35s var(--ease-standard), border-color .35s var(--ease-standard), color .35s var(--ease-standard); } @media (prefers-reduced-motion: reduce) { html.theme-ready body, html.theme-ready body * { transition: none !important; } } /* Smooth, GPU-cheap cross-fade between themes (colors only). */ html.theme-ready body, html.theme-ready body * { transition: background-color .35s var(--ease-standard), border-color .35s var(--ease-standard), color .35s var(--ease-standard); } @media (prefers-reduced-motion: reduce) { html.theme-ready body, html.theme-ready body * { transition: none !important; } } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; border-radius: var(--radius-lg); font-family: inherit; font-weight: 600; font-size: .9rem; border: 1px solid transparent; cursor: pointer; user-select: none; transition: all var(--transition); text-decoration: none; } .btn-primary { background: var(--primary-container); color: #fff; } .btn-primary:hover { background: #c0000c; color: #fff; transform: translateY(-1px); } .btn-ghost { background: transparent; color: var(--text-primary); border-color: var(--border-muted); } .btn-ghost:hover { background: var(--surface-container); color: var(--primary); } .btn-outline { background: transparent; color: var(--primary); border-color: var(--primary); } .btn-outline:hover { background: var(--primary); color: var(--on-primary); } .btn-sm { padding: 6px 12px; font-size: .8rem; } .btn-lg { padding: 14px 24px; font-size: 1rem; } .btn-block { display: flex; width: 100%; } /* ---------------------------------------------------------- Register / primary auth submit button (register.php). Root cause of the old layout/spacing issues: the button was a raw utility stack (py-3 rounded-full font-bold) with no icon alignment, uneven optical padding and only an opacity hover — inconsistent with the design-system .btn family. This unifies it: proper flex alignment, balanced padding, clear typography, a lift + glow hover and an active press, fully responsive and RTL-safe (logical gap, no directional margins). ---------------------------------------------------------- */ .btn-register { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px 24px; border: 1px solid transparent; border-radius: var(--radius-full); background: var(--primary-container); color: #fff; font-family: inherit; font-weight: 700; font-size: 1rem; line-height: 1; letter-spacing: .2px; cursor: pointer; user-select: none; box-shadow: 0 4px 14px rgba(229, 9, 20, .22); transition: transform .25s var(--ease-out-ios), box-shadow .25s var(--ease-out-ios), background-color .2s ease; } .btn-register:hover { background: #c0000c; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(229, 9, 20, .34); } .btn-register:active { transform: translateY(0) scale(.99); box-shadow: 0 3px 10px rgba(229, 9, 20, .24); } .btn-register:focus-visible { outline: 2px solid var(--primary-container); outline-offset: 3px; } .btn-register .material-symbols-outlined { font-size: 20px; line-height: 1; } @media (prefers-reduced-motion: reduce) { .btn-register { transition: background-color .2s ease; } .btn-register:hover, .btn-register:active { transform: none; } } /* ---------------------------------------------------------- Nav auth buttons (login / register) — includes/site_nav.php. Root cause of the visual imbalance: the two pills used ad-hoc utility classes with different content widths, so "حساب جديد" wrapped to two lines while "دخول" stayed on one — mismatched heights. These share one base: identical height, padding, radius, single-line (no wrap), centered icon+label, with matching hover / active / focus states. RTL-safe (logical gap). ---------------------------------------------------------- */ .nav-auth-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 18px; border: 1px solid transparent; border-radius: var(--radius-full); font-family: inherit; font-weight: 700; font-size: .9rem; line-height: 1; white-space: nowrap; text-decoration: none; transition: transform .2s var(--ease-out-ios), background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease; } .nav-auth-btn .material-symbols-outlined { font-size: 18px; line-height: 1; } .nav-auth-btn--solid { background: var(--primary-container); color: #fff; box-shadow: 0 3px 10px rgba(229, 9, 20, .2); } .nav-auth-btn--solid:hover { background: #c0000c; color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(229, 9, 20, .3); } .nav-auth-btn--outline { background: transparent; color: var(--text-primary); border-color: var(--border-muted); } .nav-auth-btn--outline:hover { background: var(--surface-container-low); border-color: var(--primary-container); color: var(--text-primary); transform: translateY(-1px); } .nav-auth-btn:active { transform: translateY(0) scale(.97); } .nav-auth-btn:focus-visible { outline: 2px solid var(--primary-container); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .nav-auth-btn { transition: background-color .2s ease, border-color .2s ease, color .2s ease; } .nav-auth-btn:hover, .nav-auth-btn:active { transform: none; } } /* Tag / Chip */ .tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--radius-full); background: var(--surface-container); color: var(--text-secondary); font-size: .75rem; font-weight: 500; } .tag-primary { background: rgba(229, 9, 20, .12); color: var(--primary); } /* Article Card */ .article-card { background: var(--card-bg); border: 1px solid var(--border-muted); border-radius: var(--radius-xl); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--transition), border-color var(--transition); } .article-card:hover { transform: translateY(-4px); border-color: rgba(255, 180, 170, .25); } .article-card .thumb { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--surface-container); } /* contain (لا cover): تُعرض الصورة كاملة دون قصّ أي جزء منها. */ .article-card .thumb img { width: 100%; height: 100%; object-fit: contain; transition: transform .6s ease; } .article-card:hover .thumb img { transform: scale(1.05); } .article-card .thumb .tag { position: absolute; top: 12px; inset-inline-start: 12px; backdrop-filter: blur(8px); background: rgba(0, 0, 0, .55); color: #fff; } .article-card .body { padding: 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .article-card h3 { font-size: 1.1rem; line-height: 1.4; margin: 0; } .article-card h3 a { color: var(--text-primary); } .article-card h3 a:hover { color: var(--primary); } .article-card .excerpt { color: var(--text-secondary); font-size: .92rem; margin: 0; flex: 1; } .article-card .meta { display: flex; align-items: center; gap: 12px; color: var(--text-muted); font-size: .8rem; padding-top: 8px; border-top: 1px solid var(--border-muted); } .article-card .meta .material-symbols-outlined { font-size: 16px; } /* ---------------------------------------------------------- Media Frame — الإطار الموحّد لعرض وسائط المقالات المصدر الوحيد لسلوك "اعرض الصورة كاملة" في كل الموقع. القاعدة: object-fit: contain — الصورة تُحتوى بالكامل داخل الإطار مع الحفاظ على نسبة أبعادها، فلا يُقتطع أي جزء منها ولا تتشوّه، أياً كانت نسبتها (أفقية/طولية/مربّعة). أي فراغ متبقٍّ داخل الإطار يُملأ بخلفية محيّدة من نفس نظام الألوان (متغيّر CSS) فتتبع الوضع الداكن والفاتح تلقائياً. الإطار متماثل الاتجاه فيعمل في RTL و LTR بلا أي تغيير. ---------------------------------------------------------- */ .media-frame { position: relative; display: block; width: 100%; overflow: hidden; background: var(--surface-container); } /* pictureTag() قد يلفّ داخل لمصدر WebP — نضمن أن الغلاف يمتد بالكامل. */ .media-frame>picture { display: block; width: 100%; height: 100%; } .media-frame img { display: block; width: 100%; height: 100%; object-fit: contain; /* الصورة كاملة دائماً — لا قصّ ولا تشويه */ object-position: center; } /* النِسَب الجاهزة (لتوحيد ارتفاع البطاقات داخل الشبكات) */ .media-frame--video { aspect-ratio: 16 / 9; } .media-frame--card { aspect-ratio: 16 / 10; } .media-frame--square { aspect-ratio: 1 / 1; } /* إطار حرّ الارتفاع: يتبع نسبة الصورة نفسها فلا يظهر أي فراغ إطلاقاً. يُستخدم حيث لا حاجة لتوحيد الارتفاع (صورة المقال الرئيسية). */ .media-frame--natural { background: transparent; } .media-frame--natural img { height: auto; } /* تكبير لطيف عند المرور — يحفظ حِسّ الحركة الحالي في البطاقات. الحالة الأساسية تُظهر الصورة كاملة؛ التكبير تفاعل مؤقّت فقط. */ .media-frame--zoom img { transition: transform .6s var(--ease-standard); } .group:hover .media-frame--zoom img { transform: scale(1.05); } /* نسخة تُطبَّق مباشرةً على حين لا يوجد عنصر إطار منفصل. */ .media-fit { object-fit: contain; object-position: center; background: var(--surface-container); } @media (prefers-reduced-motion: reduce) { .media-frame--zoom img, .group:hover .media-frame--zoom img { transition: none !important; transform: none !important; } } /* Hero Article */ .hero-article { position: relative; border-radius: var(--radius-xl); overflow: hidden; min-height: 460px; display: grid; align-items: end; background: var(--surface-container); } /* contain (لا cover): صورة المقال المميّز تُعرض كاملة دون قصّ أي جزء منها. الخلفية الداكنة تملأ أي فراغ فيبقى الشكل السينمائي متناسقاً مع الهوية. */ .hero-article img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #0b0b0b; transition: transform .8s ease; } .hero-article:hover img { transform: scale(1.03); } .hero-article::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, .85) 100%); } .hero-article .content { position: relative; padding: 40px; max-width: 900px; display: flex; flex-direction: column; gap: 14px; } .hero-article h1 { font-size: clamp(1.6rem, 3.4vw, 2.8rem); color: #fff; margin: 0; line-height: 1.2; } .hero-article p { color: rgba(255, 255, 255, .85); margin: 0; font-size: 1.05rem; } .hero-article .meta { color: rgba(255, 255, 255, .75); font-size: .85rem; display: flex; gap: 14px; } /* Grid of cards */ .cards-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } /* Sidebar widgets */ .widget { background: var(--card-bg); border: 1px solid var(--border-muted); border-radius: var(--radius-xl); padding: 20px; margin-bottom: 24px; } .widget h4 { font-size: 1rem; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border-muted); } .widget ol { padding: 0; margin: 0; list-style: none; counter-reset: w; } .widget li { counter-increment: w; position: relative; padding: 10px 0 10px 0; padding-inline-start: 38px; border-bottom: 1px dashed var(--border-muted); } .widget li:last-child { border-bottom: 0; } .widget li::before { content: counter(w, decimal); position: absolute; inset-inline-start: 0; top: 10px; width: 28px; height: 28px; display: grid; place-items: center; background: var(--surface-container); color: var(--primary); border-radius: var(--radius-lg); font-weight: 700; font-size: .85rem; } .widget li a { color: var(--text-primary); font-size: .92rem; line-height: 1.5; } .widget li a:hover { color: var(--primary); } .widget li small { display: block; color: var(--text-muted); margin-top: 4px; } /* Forms */ .form-row { display: grid; gap: 6px; margin-bottom: 18px; } .form-row label { font-size: .9rem; color: var(--text-secondary); font-weight: 500; } .form-row input, .form-row select, .form-row textarea { width: 100%; padding: 12px 14px; border-radius: var(--radius-lg); background: var(--surface-container); border: 1px solid var(--border-muted); color: var(--text-primary); font-family: inherit; font-size: .95rem; outline: none; transition: border-color var(--transition); } .form-row textarea { min-height: 140px; resize: vertical; line-height: 1.7; } .form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-color: var(--primary); } .form-row .hint { font-size: .8rem; color: var(--text-muted); } /* ========================================================== Toast Notifications — unified feedback system Renders as a floating banner at the top of the viewport, iOS-notification style. Server-rendered via ui_alert()/ flash_render() (includes/ui_helpers.php) or created on the fly via window.AppToast.show() (assets/js/main.js). ========================================================== */ .app-toast-viewport { position: fixed; top: max(12px, env(safe-area-inset-top)); inset-inline: 0; margin-inline: auto; z-index: 1100; display: flex; flex-direction: column; gap: 10px; width: min(92vw, 420px); padding: 0 4px; pointer-events: none; } .app-toast { pointer-events: auto; position: relative; display: flex; align-items: flex-start; gap: 10px; background: rgba(24, 24, 24, .96); border: 1px solid var(--border-muted); border-radius: var(--radius-lg); padding: 14px; box-shadow: var(--shadow-lg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); opacity: 0; transform: translateY(-16px) scale(.97); transition: transform .38s var(--ease-out-ios), opacity .38s var(--ease-out-ios); will-change: transform, opacity; } .app-toast.is-visible { opacity: 1; transform: translateY(0) scale(1); } .app-toast.is-leaving { opacity: 0; transform: translateY(-10px) scale(.98); transition-duration: .26s; transition-timing-function: var(--ease-in-ios); } .app-toast-success { border-color: rgba(34, 197, 94, .35); } .app-toast-error { border-color: rgba(239, 68, 68, .4); } .app-toast-warning { border-color: rgba(245, 158, 11, .35); } .app-toast-info { border-color: rgba(167, 200, 255, .3); } .app-toast-icon { font-size: 22px; line-height: 1; margin-top: 1px; flex-shrink: 0; } .app-toast-success .app-toast-icon { color: var(--success); } .app-toast-error .app-toast-icon { color: var(--error); } .app-toast-warning .app-toast-icon { color: var(--warning); } .app-toast-info .app-toast-icon { color: var(--tertiary); } .app-toast-msg { flex: 1; margin: 0; font-size: .92rem; line-height: 1.6; color: var(--text-primary); } .app-toast-close { flex-shrink: 0; background: transparent; border: 0; color: var(--text-muted); cursor: pointer; display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--radius-full); transition: background .15s ease, color .15s ease; margin: -4px; } .app-toast-close:hover, .app-toast-close:focus-visible { background: var(--surface-container-high); color: var(--text-primary); } .app-toast-close .material-symbols-outlined { font-size: 16px; } /* ========================================================== Confirm Modal — replaces native confirm() for delete/leave- page style prompts. Triggered via data-confirm="..." on any , submit