/* ═══════════════════════════════════════════════════════════════ الهوية البصرية الموحدة — كلية الهندسة المعلوماتية، جامعة حمص ملف مشترك واحد لكل التطبيقات (يُعدَّل من مكان واحد فقط) يُحمَّل آخر فيتغلب على تنسيقات التطبيقات الفردية ═══════════════════════════════════════════════════════════════ */ /* ── 1) متغيرات الهوية (مرجع واحد) ── */ :root { --brand-forest: #054239; --brand-forest-hover: #002623; --brand-gold: #988561; --brand-gold-soft: #b9a779; --brand-gold-pale: #edebe0; --brand-ink: #161616; --brand-nav-grad: linear-gradient(135deg, var(--brand-forest), #0a5c4e); } [data-bs-theme="dark"] { --brand-forest: #428177; --brand-nav-grad: linear-gradient(135deg, #0c2f29, #08201c); } /* ── 2) الشريط العلوي الموحد لكل التطبيقات ── */ /* nav.navbar { border-bottom: 1px solid rgba(255,255,255,.14) !important; color: #fff; background: var(--brand-nav-grad) !important; } .navbar .navbar-brand, .navbar .navbar-brand .text-primary, .navbar .text-primary { color: #fff !important; } */ .navbar .navbar-brand .bi { color: var(--brand-gold-soft); } /* .navbar .btn-outline-secondary { --bs-btn-color: #fff; --bs-btn-border-color: rgba(255,255,255,.45); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: rgba(255,255,255,.14); --bs-btn-hover-border-color: rgba(255,255,255,.65); --bs-btn-active-color: #fff; --bs-btn-active-bg: rgba(255,255,255,.2); --bs-btn-active-border-color: rgba(255,255,255,.65); } .navbar .btn-outline-danger { --bs-btn-color: #ffe2e2; --bs-btn-border-color: rgba(255,150,150,.5); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: rgba(220,53,69,.45); --bs-btn-hover-border-color: rgba(255,150,150,.8); } */ .navbar .badge.text-bg-light { color: var(--brand-ink) !important; } .navbar .dropdown-menu { border: 1px solid rgba(0,0,0,.08); } /* ── 3) زر تبديل الوضع الليلي/النهاري (موحد) ── */ .theme-toggle { padding: 5px 10px; border: 1px solid var(--brand-gold); border-radius: 8px; font-size: 1rem; line-height: 1; color: var(--brand-gold); background: transparent; transition: all .3s; cursor: pointer; } .navbar .theme-toggle { border-color: var(--brand-gold-soft); color: var(--brand-gold-soft); } .theme-toggle:hover { color: var(--brand-gold-pale); background: var(--brand-gold); } [data-bs-theme="dark"] .theme-toggle:hover { color: #101512; } /* ── 4) خلفية الأصفار والواحدات (لكل التطبيقات) ── */ .binary-bg { position: fixed; top: 0; left: 0; z-index: -1; display: flex; overflow: hidden; flex-direction: column; flex-wrap: wrap; gap: 20px; width: 100%; height: 100%; padding: 20px; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 70%); mask-image: linear-gradient(to bottom, black 0%, transparent 70%); } .binary-bg span { font-family: "Consolas", monospace; font-size: 50px; font-weight: bold; color: var(--brand-forest); opacity: .07; text-shadow: 0 0 8px rgba(0,38,35,.3); transition: opacity .3s ease; } [data-bs-theme="dark"] .binary-bg span { color: var(--brand-gold); text-shadow: 0 0 10px rgba(194,171,120,.4); } /* ── 5) مكوّن التنقل الموحد (الخدمات ▾) ── */ .apps-menu { min-width: 290px; padding: 6px; font-family: 'Tajawal',sans-serif; } .apps-menu .apps-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; margin: 4px 4px 8px; color: #fff; background: linear-gradient(135deg, var(--brand-forest), #0a5c4e); } .apps-menu .apps-head .nm { display: flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 700; } .apps-menu .apps-head .nm .bi { color: var(--brand-gold-soft); } .apps-menu .apps-head .rl { padding: 2px 9px; border: 1px solid rgba(255,255,255,.3); border-radius: 20px; font-size: .7rem; white-space: nowrap; background: rgba(255,255,255,.16); } .apps-menu .app-item { display: flex; align-items: center; gap: 11px; padding: 8px 12px; border-radius: 10px; font-size: .88rem; font-weight: 500; color: inherit; } .apps-menu a.app-item:hover { background: var(--brand-gold-pale); } .apps-menu .app-item .ic { display: grid; flex: 0 0 32px; place-items: center; width: 32px; height: 32px; border-radius: 9px; font-size: .95rem; color: #fff; background: var(--c,#054239); } .apps-menu .app-item .txt { min-width: 0; line-height: 1.25; } .apps-menu .app-item .nm2 { display: block; } .apps-menu .app-item .sub { display: block; font-size: .7rem; font-weight: 400; color: #7d8783; } .apps-menu .app-item.active { background: var(--brand-gold-pale); cursor: default; } .apps-menu .app-item.active .nm2 { font-weight: 700; color: var(--brand-forest); } .apps-menu .here { padding: 2px 9px; border-radius: 20px; font-size: .66rem; font-weight: 700; white-space: nowrap; color: #fff; background: var(--brand-gold); margin-inline-start: auto; } .apps-menu a.apps-logout { color: #a13b3b; } .apps-menu a.apps-logout:hover { background: #f7e9e9; } [data-bs-theme="dark"] .apps-menu .app-item.active { background: #24312d; } [data-bs-theme="dark"] .apps-menu .app-item.active .nm2 { color: var(--brand-gold-soft); } [data-bs-theme="dark"] .apps-menu .app-item .sub { color: #8b968f; } [data-bs-theme="dark"] .apps-menu a.app-item:hover { background: #24312d; } [data-bs-theme="dark"] .apps-menu a.apps-logout:hover { background: #3a2626 !important; } /* ── 6) لمسات عامة موحدة ── */ body { transition: background-color .3s ease, color .3s ease; } ::selection { color: #fff; background: var(--brand-gold); } /* ── 7) التوستات الموحدة (طبقة الفورمات) ── */ .shared-toast{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px; font-family:'Tajawal',sans-serif;font-size:.9rem;font-weight:500;color:#fff; box-shadow:0 6px 20px rgba(0,0,0,.22);opacity:1;transition:opacity .3s,transform .3s;} .shared-toast-ok{background:var(--brand-forest);} [data-bs-theme="dark"] .shared-toast-ok{background:#0a5c4e;} .shared-toast-err{background:#a13b3b;} .shared-toast .bi{flex:0 0 auto;} /* ── 8) القائمة الجانبية الموحدة (الصفحات الداخلية) ── */ .app-sidebar{ position:fixed; top:0; inset-inline-start:0; width:68px; height:100vh; z-index:1040; padding:76px 8px 16px; overflow-y:auto; overflow-x:hidden; background:var(--brand-nav-grad, var(--brand-forest)); border-inline-end:1px solid rgba(255,255,255,.12); display:flex; flex-direction:column; gap:2px; scrollbar-width:thin; } .appnav-label{color:var(--brand-gold-soft); font-size:.62rem; font-weight:700; letter-spacing:.3px; padding:8px 6px 2px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .appnav-item{position:relative; display:flex; align-items:center; justify-content:center; width:48px; height:42px; margin:1px auto; border-radius:10px; color:rgba(255,255,255,.85); text-decoration:none; font-size:1.05rem; transition:background .2s;} .appnav-item:hover{background:rgba(255,255,255,.14); color:#fff;} .appnav-item.active{background:var(--brand-gold); color:#fff;} .appnav-item.active::before{content:''; position:absolute; inset-inline-start:-8px; top:8px; bottom:8px; width:3px; border-radius:3px; background:var(--brand-gold-soft);} .appnav-tip{display:none;} .appnav-sep{height:1px; background:rgba(255,255,255,.16); margin:6px 10px;} /* إزاحة المحتوى بوجود الشريط */ @media (min-width: 992px){ body:has(.app-sidebar) [data-pjax-root]{padding-inline-start:84px;} body:has(.app-sidebar) .top-bar{inset-inline-start:68px; width:calc(100% - 68px);} } /* الجوال/التابلت: شريط أفقي تحت الـnavbar */ @media (max-width: 991.98px){ .app-sidebar{position:static; width:auto; height:auto; flex-direction:row; flex-wrap:wrap; padding:6px 10px; overflow:visible; border-inline-end:none; border-bottom:1px solid rgba(255,255,255,.12);} .appnav-item{width:40px; height:36px; margin:0;} .appnav-label,.appnav-sep{display:none;} }