/* ========================================================= العد التنازلي الدراسي نظام مستقل لكل منطقة يدعم الوضع الفاتح والداكن + التصميم المتجاوب الكامل ========================================================= */ .saudi-school-widget { /* ============ الوضع الفاتح (افتراضي) ============ */ --w-primary: #047857; --w-primary-hover: #065f46; --w-bg: #ffffff; --w-card-bg: #f8fafc; --w-unit-bg: #ffffff; --w-btn-bg: #f1f5f9; --w-btn-bg-hover: #e9eef3; --w-text: #1e293b; --w-muted: #64748b; --w-border: #e2e8f0; --w-hover-border: #cbd5e1; --w-soft-green: #ecfdf5; --w-shadow: rgba(15, 23, 42, 0.05); --w-shadow-hover: rgba(15, 23, 42, 0.08); /* يخبر المتصفح أن العنصر يدعم الوضعين، لعناصر التحكم الأصلية */ color-scheme: light dark; /* يجعل عناصر الودجيت الداخلية تستجيب لعرض الودجيت نفسه (وليس فقط لعرض الشاشة) — مهم عند تضمينه بعمود جانبي ضيق */ container-type: inline-size; container-name: saudi-school-widget; width: 100%; max-width: 500px; margin: 20px auto 0; padding: 10px; background: var(--w-bg); border: 1px solid var(--w-border); border-radius: 14px; box-shadow: 0 5px 18px var(--w-shadow); direction: rtl; font-family: 'Tajawal', 'Cairo', sans-serif; color: var(--w-text); box-sizing: border-box; transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .saudi-school-widget *, .saudi-school-widget *::before, .saudi-school-widget *::after { box-sizing: border-box; } /* ========================================================= الوضع الداكن — تلقائي حسب إعدادات النظام/المتصفح ========================================================= */ @media (prefers-color-scheme: dark) { /* :not([data-theme="light"]) يسمح بإجبار الوضع الفاتح يدويًا حتى لو كان نظام المستخدم داكنًا */ .saudi-school-widget:not([data-theme="light"]) { --w-primary: #34d399; --w-primary-hover: #6ee7b7; --w-bg: #0f172a; --w-card-bg: #1b263b; --w-unit-bg: #24324d; --w-btn-bg: #1e2a42; --w-btn-bg-hover: #2a3a58; --w-text: #f1f5f9; --w-muted: #94a3b8; --w-border: #2d3b52; --w-hover-border: #435a7a; --w-soft-green: rgba(52, 211, 153, 0.15); --w-shadow: rgba(0, 0, 0, 0.45); --w-shadow-hover: rgba(0, 0, 0, 0.55); } } /* ========================================================= الوضع الداكن — تفعيل يدوي من الموقع المضيف يدعم أشهر الطرق الشائعة لتبديل الوضع الداكن: class="dark" على /, أو data-theme="dark" ========================================================= */ html.dark .saudi-school-widget, body.dark .saudi-school-widget, html[data-theme="dark"] .saudi-school-widget, body[data-theme="dark"] .saudi-school-widget, .saudi-school-widget[data-theme="dark"] { --w-primary: #34d399; --w-primary-hover: #6ee7b7; --w-bg: #0f172a; --w-card-bg: #1b263b; --w-unit-bg: #24324d; --w-btn-bg: #1e2a42; --w-btn-bg-hover: #2a3a58; --w-text: #f1f5f9; --w-muted: #94a3b8; --w-border: #2d3b52; --w-hover-border: #435a7a; --w-soft-green: rgba(52, 211, 153, 0.15); --w-shadow: rgba(0, 0, 0, 0.45); --w-shadow-hover: rgba(0, 0, 0, 0.55); } /* ========================================================= الرأس ========================================================= */ .saudi-school-widget .widget-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; padding-bottom: 8px; border-bottom: 1px solid var(--w-border); } .saudi-school-widget .icon-title { display: flex; align-items: center; gap: 6px; min-width: 0; } .saudi-school-widget .badge-icon { flex-shrink: 0; font-size: 17px; line-height: 1; } .saudi-school-widget .widget-header h3 { margin: 0; color: var(--w-text); font-size: 0.91rem; font-weight: 800; line-height: 1.3; } .saudi-school-widget .academic-tag { flex-shrink: 0; padding: 3px 7px; background: var(--w-soft-green); color: var(--w-primary); border-radius: 20px; font-size: 0.61rem; font-weight: 800; white-space: nowrap; transition: background-color 0.3s ease, color 0.3s ease; } /* ========================================================= البطاقتان الرئيسيتان ========================================================= */ .saudi-school-widget .primary-events-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; width: 100%; } /* ========================================================= بطاقة المنطقة ========================================================= */ .saudi-school-widget .primary-event-card { width: 100%; min-width: 0; padding: 9px 7px; background: var(--w-card-bg); border: 1px solid var(--w-border); border-radius: 9px; text-align: center; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.3s ease; } .saudi-school-widget .primary-event-card:hover { transform: translateY(-1px); border-color: var(--w-hover-border); box-shadow: 0 5px 14px var(--w-shadow-hover); } .saudi-school-widget .primary-event-card:hover .time-unit span { color: var(--w-primary-hover); } /* ========================================================= معلومات الحدث ========================================================= */ .saudi-school-widget .event-details { margin-bottom: 7px; } .saudi-school-widget .event-name { display: block; margin: 0 0 3px; color: var(--w-text); font-size: 0.85rem; font-weight: 800; line-height: 1.45; } .saudi-school-widget .hijri-date { display: block; color: var(--w-muted); font-size: 0.66rem; line-height: 1.4; } /* ========================================================= العد التنازلي ========================================================= */ .saudi-school-widget .countdown-timer { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; width: 100%; direction: ltr; } /* ========================================================= وحدات الوقت ========================================================= */ .saudi-school-widget .time-unit { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px 2px; background: var(--w-unit-bg); border: 1px solid var(--w-border); border-radius: 5px; line-height: 1; transition: background-color 0.3s ease, border-color 0.3s ease; } .saudi-school-widget .time-unit span { display: block; color: var(--w-primary); font-size: 0.84rem; font-weight: 900; line-height: 1.15; } .saudi-school-widget .time-unit small { display: block; margin-top: 2px; color: var(--w-muted); font-size: 0.55rem; line-height: 1.1; } /* ========================================================= حالة انتهاء العداد ========================================================= */ .saudi-school-widget .countdown-timer.expired { display: flex; align-items: center; justify-content: center; min-height: 35px; padding: 7px; background: var(--w-soft-green); border-radius: 6px; color: var(--w-primary); font-size: 0.67rem; font-weight: 800; direction: rtl; } /* ========================================================= زر الإجازات لكل منطقة ========================================================= */ .saudi-school-widget .toggle-holidays-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 7px; padding: 8px 7px; background: var(--w-btn-bg); border: 1px solid var(--w-border); border-radius: 6px; color: var(--w-text); font-family: inherit; font-size: 0.67rem; font-weight: 800; cursor: pointer; /* حد أدنى ألطف لمساحة اللمس على الجوال */ min-height: 36px; transition: background-color 0.2s ease, border-color 0.2s ease; } .saudi-school-widget .toggle-holidays-btn:hover { background: var(--w-btn-bg-hover); border-color: var(--w-hover-border); } .saudi-school-widget .toggle-holidays-btn:focus-visible { outline: 2px solid var(--w-primary); outline-offset: 2px; } .saudi-school-widget .arrow-icon { display: inline-block; font-size: 0.55rem; transition: transform 0.3s ease; } .saudi-school-widget .toggle-holidays-btn[aria-expanded="true"] .arrow-icon { transform: rotate(180deg); } /* ========================================================= قائمة الإجازات ========================================================= */ .saudi-school-widget .holidays-dropdown-wrapper { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.35s ease, opacity 0.25s ease; } .saudi-school-widget .holidays-dropdown-wrapper.expanded { grid-template-rows: 1fr; opacity: 1; } .saudi-school-widget .holidays-inner { min-height: 0; overflow: hidden; } .saudi-school-widget .holidays-container { display: flex; flex-direction: column; gap: 5px; padding-top: 0; transition: padding-top 0.35s ease; } .saudi-school-widget .holidays-dropdown-wrapper.expanded .holidays-container { padding-top: 6px; } .saudi-school-widget .holidays-empty { padding: 10px 7px; background: var(--w-card-bg); border: 1px dashed var(--w-border); border-radius: 6px; color: var(--w-muted); font-size: 0.62rem; font-weight: 700; text-align: center; } /* ========================================================= عنصر الإجازة ========================================================= */ .saudi-school-widget .holiday-item { display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 6px 7px; background: var(--w-unit-bg); border: 1px solid var(--w-border); border-radius: 6px; transition: background-color 0.3s ease, border-color 0.3s ease; } .saudi-school-widget .holiday-info { min-width: 0; } .saudi-school-widget .holiday-info span { display: block; } .saudi-school-widget .holiday-name { color: var(--w-text); font-size: 0.66rem; font-weight: 800; line-height: 1.35; } .saudi-school-widget .holiday-date { margin-top: 2px; color: var(--w-muted); font-size: 0.55rem; line-height: 1.3; } .saudi-school-widget .holiday-countdown { flex-shrink: 0; color: var(--w-primary); font-size: 0.58rem; font-weight: 800; text-align: left; white-space: nowrap; } /* ========================================================= عنوان المنطقة ========================================================= */ .saudi-school-widget .region-header { text-align: center; margin-bottom: 7px; } .saudi-school-widget .region-title { color: var(--w-text); font-size: 0.78rem; font-weight: 900; line-height: 1.3; } .saudi-school-widget .region-cities { margin-top: 2px; color: var(--w-muted); font-size: 0.53rem; line-height: 1.35; } /* ========================================================= الشاشات الصغيرة (فيوبورت) — لضبط إطار الودجيت نفسه (لا يمكن للودجيت الاستعلام عن حجمه الذاتي عبر container query) ========================================================= */ @media (max-width: 500px) { .saudi-school-widget { padding: 8px; border-radius: 11px; } .saudi-school-widget .widget-header { margin-bottom: 7px; padding-bottom: 7px; } .saudi-school-widget .widget-header h3 { font-size: 0.78rem; } .saudi-school-widget .badge-icon { font-size: 15px; } .saudi-school-widget .academic-tag { padding: 2px 6px; font-size: 0.53rem; } } /* ========================================================= استعلامات الحاوية (Container Queries) --------------------------------------------------------- تجعل بطاقات المناطق تتجاوب مع عرض الودجيت الفعلي أينما وُضع (شريط جانبي ضيق، تطبيق جوال، iframe... إلخ) وليس فقط عرض الشاشة. عند عرض ضيق جدًا تتحول الشبكة إلى عمود واحد بدل تصغير الخط لدرجة يصعب قراءتها. ========================================================= */ @container saudi-school-widget (max-width: 460px) { .saudi-school-widget .primary-events-grid { gap: 5px; } .saudi-school-widget .primary-event-card { padding: 7px 5px; border-radius: 8px; } .saudi-school-widget .event-name { font-size: 0.68rem; } .saudi-school-widget .hijri-date { font-size: 0.56rem; } .saudi-school-widget .time-unit { padding: 3px 1px; } .saudi-school-widget .time-unit span { font-size: 0.72rem; } .saudi-school-widget .time-unit small { font-size: 0.46rem; } .saudi-school-widget .toggle-holidays-btn { padding: 7px 8px; font-size: 0.6rem; } } @container saudi-school-widget (max-width: 380px) { /* عمود واحد بدل التصغير المتواصل للخط */ .saudi-school-widget .primary-events-grid { grid-template-columns: 1fr; gap: 8px; } .saudi-school-widget .primary-event-card { padding: 12px 14px; } .saudi-school-widget .event-name { font-size: 0.88rem; } .saudi-school-widget .hijri-date { font-size: 0.72rem; } .saudi-school-widget .time-unit span { font-size: 1rem; } .saudi-school-widget .time-unit small { font-size: 0.62rem; } .saudi-school-widget .toggle-holidays-btn { font-size: 0.72rem; padding: 10px 12px; } .saudi-school-widget .region-title { font-size: 0.9rem; } .saudi-school-widget .region-cities { font-size: 0.62rem; } } /* ========================================================= نسخة احتياطية للمتصفحات القديمة التي لا تدعم Container Queries (نفس القواعد أعلاه، لكن بالاعتماد على عرض الشاشة) ========================================================= */ @supports not (container-type: inline-size) { @media (max-width: 460px) { .saudi-school-widget .primary-events-grid { gap: 5px; } .saudi-school-widget .primary-event-card { padding: 7px 5px; border-radius: 8px; } .saudi-school-widget .event-name { font-size: 0.68rem; } .saudi-school-widget .hijri-date { font-size: 0.56rem; } .saudi-school-widget .time-unit { padding: 3px 1px; } .saudi-school-widget .time-unit span { font-size: 0.72rem; } .saudi-school-widget .time-unit small { font-size: 0.46rem; } .saudi-school-widget .toggle-holidays-btn { padding: 7px 8px; font-size: 0.6rem; } } @media (max-width: 380px) { .saudi-school-widget .primary-events-grid { grid-template-columns: 1fr; gap: 8px; } .saudi-school-widget .primary-event-card { padding: 12px 14px; } .saudi-school-widget .event-name { font-size: 0.88rem; } .saudi-school-widget .hijri-date { font-size: 0.72rem; } .saudi-school-widget .time-unit span { font-size: 1rem; } .saudi-school-widget .time-unit small { font-size: 0.62rem; } .saudi-school-widget .toggle-holidays-btn { font-size: 0.72rem; padding: 10px 12px; } .saudi-school-widget .region-title { font-size: 0.9rem; } .saudi-school-widget .region-cities { font-size: 0.62rem; } } } /* ========================================================= احترام تفضيل تقليل الحركة ========================================================= */ @media (prefers-reduced-motion: reduce) { .saudi-school-widget, .saudi-school-widget * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }