/* =========================================================================== smmxstar — طبقة الهوية --------------------------------------------------------------------------- الثيم مبنيّ على نفس ترميز smmxbost، وورقة التصميم الأصلية لا تكتب اللون الأساسي إلا مرّة واحدة في :root ثم تستعمله ١٢٣ مرة عبر var(--main-color). لذلك تُعاد صياغة الهوية هنا من المتغيّرات وحدها، ولا يُلمس أي انتقاء في الورقة الأصلية — فلا شيء ينكسر إن حُدِّثت لاحقًا. تُحمَّل هذه الورقة آخر ورقة في ، فتغلب على ما قبلها عند تساوي الأولوية. وقواعد الوضع الداكن مكتوبة تحت html.dark لا :root، لأن الأصل يعرّف الوضع الداكن بنفس المُنتقي — و:root وحده كان سيخسر أمامه. الهوية: سماء ليل + نجمة ذهبية. الأزرق الملكي هو اللون العامل (يقرأ عليه النص الأبيض والأسود معًا)، والذهبي لمسة لا خلفية أزرار — فالنص الأبيض على الذهب لا يُقرأ، وهذا هو السبب الوحيد في ألا يكون الذهب هو اللون الأساسي. =========================================================================== */ :root { --main-color: #2f6bff; --main-opacity: #2f6bff1f; --secondary-color: #eef3ff; --bg-color: #ffffff; --border-color: #c3d1ee; --text-main: #0b1220; --shadow-color: #0b122014; --card-bg: #f5f8ff; --td-color: rgba(11, 18, 32, .04); --place-color: #55647f; /* خاصّة بهذا الثيم — لا تعرّفها الورقة الأصلية */ --sx-gold: #f0b429; --sx-gold-soft: #f0b4291f; /* الذهب لا يُقرأ كنصّ على أرضية فاتحة (١٫٧٥:١) — للرقم كهرمانيّه الغامق */ --sx-amount: #8a6300; --sx-sky-1: #f7f9ff; --sx-sky-2: #eaf0ff; --sx-ring: #2f6bff33; } html.dark { --main-color: #4577ec; --main-opacity: #4577ec26; --secondary-color: #ffffff0a; --bg-color: #070b18; --border-color: #202a45; --text-main: #f4f7ff; --shadow-color: #00000073; --card-bg: #0e1428; --td-color: rgba(255, 255, 255, .04); --place-color: #93a1c0; --sx-gold: #f5c451; --sx-gold-soft: #f5c45126; --sx-amount: #f5c451; --sx-sky-1: #0a1024; --sx-sky-2: #070b18; --sx-ring: #4577ec40; } /* --- سماء الليل: تدرّج ثابت خلف الصفحة كلّها، ونجوم من نقاط لا من صور --- */ html.dark body { background-color: var(--bg-color); background-image: radial-gradient(1200px 620px at 82% -8%, #12224d 0%, transparent 62%), radial-gradient(900px 520px at 6% 4%, #0f1a3a 0%, transparent 58%), radial-gradient(1.4px 1.4px at 18% 22%, #ffffff5c 50%, transparent 51%), radial-gradient(1.4px 1.4px at 63% 12%, #ffffff47 50%, transparent 51%), radial-gradient(1.2px 1.2px at 88% 34%, #ffffff3d 50%, transparent 51%), radial-gradient(1.2px 1.2px at 34% 58%, #ffffff2e 50%, transparent 51%), radial-gradient(1.6px 1.6px at 74% 72%, #ffffff33 50%, transparent 51%); background-attachment: fixed; background-repeat: no-repeat; } body { background-color: var(--bg-color); background-image: radial-gradient(1100px 560px at 84% -10%, var(--sx-sky-2) 0%, transparent 60%); background-attachment: fixed; background-repeat: no-repeat; } /* --- الشريط الجانبي: يُقرأ كسماء، وحدّه الداخلي خيط ذهبي خافت --- */ .main-wrapper .sidebar { background-image: linear-gradient(180deg, var(--sx-sky-1) 0%, var(--bg-color) 55%); } html.dark .main-wrapper .sidebar { background-image: linear-gradient(180deg, #101a38 0%, #070b18 58%), radial-gradient(1.3px 1.3px at 26% 16%, #ffffff40 50%, transparent 51%), radial-gradient(1.1px 1.1px at 72% 40%, #ffffff33 50%, transparent 51%); } /* --- عنصر القائمة المختار: شريط ذهبي يفصل المختار عمّا حوله --- ‎.nav-mob‎ يحمل الصنف ‎nav-menu‎ نفسه وهو شقيق الشريط الجانبي لا ابنه، فلولا حصر القاعدة في ‎.sidebar‎ لظهر الشريط عموديًا على حافة زرّ شريط الجوال السفلي — وهو اتجاه لا معنى له في شريط أفقي. لذلك قاعدتان لا واحدة. */ .main-wrapper .sidebar .nav-menu li.active > a { position: relative; box-shadow: 0 8px 22px var(--sx-ring); } .main-wrapper .sidebar .nav-menu li.active > a::before { content: ""; position: absolute; inset-inline-start: 0; top: 22%; bottom: 22%; width: 3px; border-radius: 3px; background: var(--sx-gold); } .main-wrapper .nav-mob li.active > a { position: relative; } .main-wrapper .nav-mob li.active > a::before { content: ""; position: absolute; top: 0; inset-inline-start: 50%; transform: translateX(50%); width: 26px; height: 3px; border-radius: 3px; background: var(--sx-gold); } [dir="ltr"] .main-wrapper .nav-mob li.active > a::before { transform: translateX(-50%); } /* --- النجمة: الشارات والمستوى والرصيد تأخذ الذهب، والأزرار لا تأخذه --- */ .main-boxes .level-badge, .sidebar-body .level { background: var(--sx-gold) !important; color: #1c1400 !important; box-shadow: 0 4px 14px var(--sx-gold-soft); } .page-header .header-right .balance-box { border: 1px solid var(--sx-gold-soft); background-color: var(--bg-color); background-image: linear-gradient(135deg, var(--sx-gold-soft), transparent 60%); } .page-header .header-right .balance-box .balance-amount, .balance-amount { color: var(--sx-amount); } /* --- الهالة خلف الصورة الرمزية: ذهبية بدل زرقاء، فهي أوضح ما يُرى --- */ .sidebar-body .user-box .user-avatar .glow { background: var(--sx-gold) !important; } /* --- تليين الحوافّ: أوسع قليلًا من الأصل ليقرأ الثيم أهدأ --- */ .page-content .card, .main-boxes > div, .page-header .header-right .balance-box { border-radius: 18px; } /* --- حلقة التركيز: مطلوبة للوصولية، والأصل لا يعرّفها --- */ .page-content a:focus-visible, .page-content button:focus-visible, .page-content input:focus-visible, .page-content select:focus-visible, .page-content textarea:focus-visible, .sidebar a:focus-visible, .page-header button:focus-visible { outline: 2px solid var(--sx-gold); outline-offset: 2px; } /* --- الخلفية الثابتة تُثقل التمرير على الأجهزة اللمسية --- */ @media (hover: none), (max-width: 767px) { body, html.dark body { background-attachment: scroll; } }