/* ========================================================================= SKE VENUE REQUISITION — SHARED DESIGN SYSTEM ------------------------------------------------------------------------- Linked by ske-page.php on every page. Light is the default theme; dark is opt-in via [data-theme="dark"] on , toggled and persisted in JS. This file also overrides the Bootstrap classes the existing pages already use (.table, .btn-*, .form-control, .container), so legacy markup picks up the new look without being rewritten. ========================================================================= */ /* ============================ DESIGN TOKENS ============================ */ :root{ /* Height of the fixed SKE navbar from headers.php — measured at runtime. */ --nav-h:92px; /* ---- LIGHT (default) ---- */ --bg:#f4f6fa; --bg-2:#eef1f7; --surface:#ffffff; --surface-2:#f7f9fc; --border:#dde3ec; --border-soft:#e7ecf3; --text:#141a22; --text-dim:#55637a; --text-mute:#8593a8; --brand:#6366f1; --brand-2:#8b5cf6; --brand-soft:rgba(99,102,241,.10); --ok:#16a34a; --warn:#d97706; --danger:#dc2626; --info:#0284c7; --shadow:0 10px 30px rgba(19,29,47,.10); --shadow-sm:0 2px 10px rgba(19,29,47,.07); --r:14px; --r-sm:10px; --sidebar-w:250px; } /* --------------------------- STACKING ORDER ---------------------------- One place to reason about what covers what. The site navbar has to sit above the portal chrome, or its dropdowns open *behind* the sticky topbar. 1020 .topbar sticky page header 1025 .backdrop dim behind the mobile drawer 1030 .sidebar the drawer itself (above its own backdrop) 1040 .navbar.fixed-top site nav + its dropdown menus 1045 #ske-tooltip calendar hover card 1050 .modal-backdrop Bootstrap 1055 .modal Bootstrap — always on top Anything inside .sidebar (e.g. the rail tooltip) only competes with its own siblings, because .sidebar's z-index makes it a stacking context. */ [data-theme="dark"]{ --bg:#0f1216; --bg-2:#151a21; --surface:#1a2029; --surface-2:#212934; --border:#2a3440; --border-soft:#232c37; --text:#e8edf4; --text-dim:#9aa7b8; --text-mute:#6c7a8d; --brand-soft:rgba(99,102,241,.14); --ok:#22c55e; --warn:#f59e0b; --danger:#ef4444; --info:#38bdf8; --shadow:0 10px 30px rgba(0,0,0,.45); --shadow-sm:0 2px 10px rgba(0,0,0,.3); } /* ================================ BASE ================================= */ *{box-sizing:border-box} html{scroll-behavior:smooth;background:var(--bg)} body{ margin:0!important;padding:0!important; background:var(--bg);color:var(--text); font-family:'Inter','Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif; font-size:14.5px;line-height:1.55; transition:background .25s ease,color .25s ease; -webkit-font-smoothing:antialiased; } a{color:inherit;text-decoration:none} h1,h2,h3,h4,h5{color:var(--text);letter-spacing:-.2px} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px} ::-webkit-scrollbar-thumb:hover{background:var(--text-mute)} /* ============ SITE HEADER / FOOTER INTEROP (headers.php) ================ headers.php renders a Bootstrap 5 `.navbar.fixed-top` inside `.container`, and loads Bootstrap, jQuery, moment, FullCalendar, flatpickr and SweetAlert2 itself. It does NOT link this stylesheet — ske-page.php, login.php and forgot_password.php each link it after headers.php has run. Because the navbar is position:fixed it reserves NO vertical space, so every page must offset its own height. That is what --nav-h is for; it is measured at runtime and the shell keys all of its offsets off it. */ .navbar.fixed-top{ z-index:1040!important; /* see the stacking scale below */ background:var(--surface)!important; border-bottom:1px solid var(--border-soft); transition:background .25s ease,border-color .25s ease; padding-top:0!important;padding-bottom:0!important; } /* The wrapper around the navbar is a plain .container; let the bar span the full width so the STUDENT CENTER block can reach the corner. */ body > .container:first-of-type{max-width:100%!important;padding:0!important;margin:0!important} .navbar.fixed-top > .container-fluid.container{ max-width:1560px;position:static; padding-right:calc(var(--cta-size) + 16px); /* clears the square block */ min-height:var(--cta-size); } /* The stray at the end of headers.php. */ body > table{display:none} /* --- logo ---------------------------------------------------------------- */ .navbar.fixed-top .logo img{height:70px;width:auto;display:block;max-width:100%} /* (its dark-mode plate is defined once, further down) */ /* --- menu ---------------------------------------------------------------- */ .navbar.fixed-top .nav-link.txt,.navbar.fixed-top .nav-link{ color:var(--text)!important;font-weight:700;white-space:nowrap; } .navbar.fixed-top .nav-link:hover{color:var(--brand)!important} .navbar.fixed-top .xzz:hover{color:inherit} .navbar.fixed-top .dropdown-menu{ background:var(--surface);border:1px solid var(--border-soft); border-radius:0;box-shadow:0 14px 34px rgba(19,29,47,.13);padding:6px 0; } [data-theme="dark"] .navbar.fixed-top .dropdown-menu{box-shadow:0 14px 34px rgba(0,0,0,.5)} .navbar.fixed-top .dropdown-item{ color:var(--text)!important;font-weight:600;padding:10px 20px;white-space:normal; } .navbar.fixed-top .dropdown-item:hover{background:var(--brand-soft);color:var(--brand)!important} .navbar.fixed-top .navbar-toggler{ border:1px solid var(--border);border-radius:8px; } [data-theme="dark"] .navbar.fixed-top .navbar-toggler-icon{filter:invert(1) grayscale(1)} /* --- the cyan STUDENT CENTER square, pinned to the top-right corner ------ headers.php styles this inline as position:absolute with 30px/75px padding, which made it a wide rectangle overlapping the menu. These rules win over the inline styles and make it a true square in the corner. */ :root{--cta-size:120px} .navbar.fixed-top .student-center, .navbar.fixed-top a[href*="s_resource.php"]{ position:absolute!important;top:0!important;right:0!important; left:auto!important;bottom:auto!important; width:var(--cta-size)!important;height:var(--cta-size)!important; margin:0!important;padding:0 8px!important; display:flex!important;align-items:center;justify-content:center; background:#04eaff!important;color:#000!important; font-family:'Inter','Segoe UI',system-ui,Roboto,sans-serif;font-weight:700!important; font-size:14px!important;line-height:1.3;text-align:center!important; transition:.16s;z-index:4; } .navbar.fixed-top .student-center:hover, .navbar.fixed-top a[href*="s_resource.php"]:hover{background:#00d7f0!important;color:#000!important} @media (max-width:1400px){ .navbar.fixed-top .nav-link.txt{font-size:13px!important} .navbar.fixed-top .logo img{height:58px} } @media (max-width:1200px){ :root{--cta-size:104px} .navbar.fixed-top .nav-link.txt{font-size:12px!important} .navbar.fixed-top .logo img{height:50px} } @media (max-width:991.98px){ :root{--cta-size:92px} .navbar.fixed-top > .container-fluid.container{ padding-right:calc(var(--cta-size) + 60px);min-height:78px; } .navbar.fixed-top .navbar-collapse{ background:var(--surface);border-top:1px solid var(--border-soft); margin-top:8px;padding:6px 0 10px;max-height:70vh;overflow-y:auto; } /* headers.php hides .dropdown-menu and only reveals it on hover, which has no effect on touch. Let the collapsed menu show its children inline. */ .navbar.fixed-top .navbar-collapse .dropdown-menu{ display:block!important;position:static!important;transform:none!important; box-shadow:none;border:none;background:var(--surface-2);margin:0 0 6px; } .navbar.fixed-top .logo img{height:46px} } @media (max-width:480px){ :root{--cta-size:78px} .navbar.fixed-top .student-center, .navbar.fixed-top a[href*="s_resource.php"]{font-size:10.5px!important} } /* ================= LEAKS FROM headers.php's BARE SELECTORS ============== headers.php styles the raw element: nav { background-color:#fff; border-bottom:1px solid #ddd; } That is aimed at the site navigation, but it matches ANY — no page markup needed, and it keeps working if a column is ever added. */ @media (max-width:640px){ .content{padding:16px 12px 48px} .topbar{padding:10px 12px;gap:10px} .topbar h1{font-size:15px} .topbar p{font-size:11.5px} .sidebar{width:86vw;flex-basis:86vw;max-width:320px} .stats{grid-template-columns:1fr 1fr;gap:10px} .stat{padding:14px} .stat__val{font-size:22px} .stat__lbl{font-size:10.5px} .stat__ico{width:30px;height:30px} .stat__ico svg{width:15px;height:15px} .card{border-radius:12px;margin-bottom:14px} .card__head{padding:14px 16px} .card__body{padding:14px 16px} .toolbar{gap:10px} .toolbar .field{flex:1 1 100%;min-width:0} .toolbar .btn{width:100%} /* --- table → card --- */ .table-wrap{border:none;background:transparent;overflow:visible;max-height:none} .table-wrap thead{display:none} .table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap td{display:block;width:100%} .table-wrap tr{ background:var(--surface);border:1px solid var(--border); border-radius:12px;margin-bottom:12px;overflow:hidden; box-shadow:var(--shadow-sm); } .table-wrap td{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:9px 14px!important;text-align:right; border:none!important;border-bottom:1px solid var(--border-soft)!important; color:var(--text)!important;font-size:13px; } .table-wrap tr td:last-child{border-bottom:none!important} .table-wrap td::before{ content:attr(data-label); flex:0 0 42%;text-align:left; font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase; color:var(--text-mute); } /* Cells with no label (empty-state rows) stay full width. */ .table-wrap td[colspan]{display:block;text-align:center;padding:0!important} .table-wrap td[colspan]::before{content:none} .table-wrap td:empty{display:none} /* Action buttons fill the row they sit in. */ .table-wrap td .btn{width:auto;min-width:96px} .legend{gap:6px} .chip{font-size:11.5px;padding:5px 10px 5px 7px} /* Auth card edge-to-edge on small screens */ .auth{padding:calc(var(--nav-h) + 16px) 12px 40px} .auth__card{max-width:100%} .auth__head{padding:22px 20px 18px} .auth__body{padding:20px} .auth__logo{width:78px;height:78px} } @media (max-width:380px){ .stats{grid-template-columns:1fr} .table-wrap td{flex-direction:column;align-items:flex-start;text-align:left;gap:3px} .table-wrap td::before{flex:none} } /* Landscape phones: the fixed navbar eats most of a 380px-tall viewport. */ @media (max-height:480px) and (orientation:landscape){ .sidebar{overflow-y:auto} .auth{padding-top:calc(var(--nav-h) + 10px)} } /* =============================== PRINT ================================= */ @media print{ .sidebar,.topbar,.backdrop,nav.navbar,.no-print{display:none!important} .main{margin-left:0} .app{padding-top:0} .content{padding:0} .card{border:none;box-shadow:none} body{background:#fff;color:#000} }