/* ===================================================================== panel-ui.css -- admin + seller panel chrome (navbar + sidebar). WHY A SEPARATE FILE, not edits to custom.css: custom.css is shared by admin, seller AND delivery_boy. This work covers admin + seller only, so a separate, independently-versioned file keeps the delivery panel byte-identical and means custom.css?v=5 needs no bump. Same precedent as panel-auth.css (the login pages). SCOPING: every rule is under body.sn-panel, which only admin/template.php and seller/template.php emit. The login pages have their own with sn-auth-page and NO sn-panel -- and note seller/login.php loads admin/include-head.php, so this file DOES reach both login pages. The body scope is the only thing keeping them untouched. Do not remove it. COLOURS: the panel had zero access to the brand colours it configures -- the red came from AdminLTE's navbar-red (#dc3545, Bootstrap danger, not a brand colour). include-head.php now emits --primary-color/--secondary-color/ --font-color and the tokens below bridge onto them, mirroring spornation.css:10-20 so the panel and the storefront stay one system. The var() fallbacks mean a page that misses the emitter still looks right. Never use raw brand hex below. LOAD ORDER: linked last in include-head.php (after custom.css and tagify.min.css) so it wins ties; !important only where it has to beat an existing !important or a utility class baked into markup/JS. ===================================================================== */ body.sn-panel { --sn-accent: var(--primary-color, #e31b23); --sn-ink: var(--secondary-color, #1a1a1a); --sn-on-accent: var(--font-color, #ffffff); --sn-border: #eaeaea; --sn-well: #f5f5f6; --sn-muted: #6b7280; --sn-pill-bg: #f6f6f6; --sn-pill-bg-h: #ececec; } /* ===================================================================== NAVBAR ===================================================================== */ /* The storefront bar (.sn-bar) is a LIGHT surface with a border, the accent reserved for active states, badges and the CTA -- it is not an accent-filled bar. Mirroring that is truer to the storefront AND contrast-safe whatever primary the admin picks (the stored default is a light salmon, on which white text would be unreadable). HEIGHT IS LOCKED AT 3.5rem + 1px. AdminLTE sizes the fixed layout around that exact value (the sidebar is calc(100vh - (3.5rem + 1px)) tall). If this bar grows, the chrome desyncs. The explicit height is deliberate hardening: nothing placed inside can push the bar taller. Do not change z-index either (custom.css lifts the bootstrap-table toolbar dropdown to 1040 to clear it). */ body.sn-panel .main-header.sn-panel-navbar { height: calc(3.5rem + 1px); min-height: calc(3.5rem + 1px); padding: 0 1rem; background: #fff; border-bottom: 1px solid var(--sn-border); box-shadow: 0 1px 3px rgba(0, 0, 0, .04); } /* The markup carried text-white everywhere (it was a red bar), AND custom.js injects the notification bell with text-white + fa-2x baked into the HTML string it writes. Editing that JS would force a custom.js?v= bump across all three panels, so neutralise both from CSS instead. */ body.sn-panel .main-header .text-white, body.sn-panel .main-header .nav-link { color: var(--sn-ink) !important; } body.sn-panel .main-header .navbar-nav > .nav-item > .nav-link { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 .5rem; border-radius: 10px; transition: background-color .15s ease, color .15s ease; } body.sn-panel .main-header .navbar-nav > .nav-item > .nav-link:hover, body.sn-panel .main-header .navbar-nav > .nav-item > .nav-link:focus { background: var(--sn-pill-bg); color: var(--sn-ink) !important; } /* fa-2x on the injected bell is far too large for a 56px bar. */ body.sn-panel .main-header .fa-bell { font-size: 1.15rem !important; } body.sn-panel .main-header .navbar-badge { background-color: var(--sn-accent) !important; color: var(--sn-on-accent) !important; font-size: .6rem; padding: 2px 5px; } /* Notification bell (admin only -- the seller panel has none). custom.js shows/hides #list itself with jQuery .toggle(); it is not a Bootstrap dropdown. All the wrapper needs is to be a positioned ancestor, so the list opens directly under the bell instead of against the right edge of the bar. */ body.sn-panel .main-header .sn-panel-noti { position: relative; } body.sn-panel .main-header #list { top: calc(100% + .55rem); max-height: 70vh; overflow-y: auto; } /* Dropdown, mirroring .sn-nav .dropdown-menu in spornation.css. */ body.sn-panel .main-header .dropdown-menu { border: 1px solid var(--sn-border); border-radius: 14px; padding: .4rem; box-shadow: 0 12px 34px rgba(0, 0, 0, .08); } body.sn-panel .main-header .dropdown-item { border-radius: 10px; padding: .5rem .75rem; font-weight: 600; color: var(--sn-ink); } body.sn-panel .main-header .dropdown-item:hover, body.sn-panel .main-header .dropdown-item:focus { background: var(--sn-pill-bg); color: var(--sn-ink); } /* These icons were text-white on a white menu, i.e. invisible. The markup no longer sets text-white on them; this gives them the accent. */ body.sn-panel .main-header .dropdown-item i { color: var(--sn-accent); } body.sn-panel .main-header .dropdown-header { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--sn-muted); } /* Signed-in pill in the bar: avatar + name. */ body.sn-panel .sn-panel-user { display: inline-flex; align-items: center; gap: .5rem; max-width: 230px; height: auto !important; padding: .2rem .7rem .2rem .2rem !important; border-radius: 999px !important; background: var(--sn-pill-bg); color: var(--sn-ink) !important; text-decoration: none; transition: background-color .15s ease; } body.sn-panel .sn-panel-user:hover, body.sn-panel .sn-panel-user:focus { background: var(--sn-pill-bg-h) !important; color: var(--sn-ink) !important; text-decoration: none; } body.sn-panel .sn-panel-user .sn-panel-avatar { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; background: var(--sn-well); } body.sn-panel .sn-panel-user .sn-panel-user-name { font-size: .82rem; font-weight: 700; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* The name is the first thing to go when the bar gets tight -- the avatar alone still identifies the session. */ @media (max-width: 575.98px) { body.sn-panel .sn-panel-user .sn-panel-user-name { display: none; } body.sn-panel .sn-panel-user { padding: .2rem !important; } } /* ---------- Language switch, centred in the bar ---------- Absolutely positioned against .main-header (Bootstrap's .navbar is position:relative, so it is the containing block), which centres it on the bar itself however wide the left and right clusters are. .main-header already starts after the sidebar on desktop, so this is the centre of the content area. Below 768px there is no room to float it over the middle without colliding with the account pill, so it rejoins the flow just before the right-hand cluster. */ body.sn-panel .main-header .sn-panel-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; } @media (max-width: 767.98px) { body.sn-panel .main-header .sn-panel-center { position: static; transform: none; margin-left: auto; } body.sn-panel .main-header .sn-panel-center + .navbar-nav.ml-auto { margin-left: .25rem !important; } } /* The widget renders "Powered by " as a bare text node beside the select. custom.css only makes that text transparent, so it still takes width -- which would push the visible select off centre. font-size:0 collapses it; the select gets its size back explicitly (rem, so it is unaffected by the parent's 0). */ body.sn-panel .main-header .goog-te-gadget { font-size: 0; line-height: 1; white-space: nowrap; } body.sn-panel .main-header .goog-te-gadget > span { display: none; } /* custom.css paints the select #dc3545 at a fixed 150px with 10px padding and a Verdana font-family !important. Bring it onto the token palette as a pill. */ body.sn-panel .main-header .goog-te-combo { width: auto; margin: 0 !important; padding: 6px 12px; font-size: .82rem; font-weight: 600; font-family: inherit !important; color: var(--sn-ink) !important; background: var(--sn-pill-bg); border: 1px solid var(--sn-border); border-radius: 999px; cursor: pointer; } body.sn-panel .main-header .goog-te-combo:hover { background: var(--sn-pill-bg-h); } /* ===================================================================== SIDEBAR ===================================================================== */ /* `sidebar-light` in the markup is a DEAD class -- AdminLTE only ships .sidebar-light- variants -- so the sidebar has no skin at all and these plain rules win with no specificity fight. ⚠️ NO BORDER on .main-sidebar. It is width:250px and border-box, and a 1px border shrinks its content box to 249px while .brand-link is a hard width:250px (.layout-fixed .brand-link). .main-sidebar has overflow-y:hidden, which forces overflow-x to AUTO -- so that single pixel spawned a native horizontal scrollbar across the bottom of the sidebar, covering the last menu items. The elevation-2 shadow already separates it from the content. overflow-x:hidden makes any future pixel of overflow harmless instead of a scrollbar. DO NOT set .main-sidebar width or hover behaviour here. custom.css carries the Session 85 fix that pins the collapsed rail to 4.6rem on hover so it never overlays content, and this file loads after it. */ body.sn-panel .main-sidebar { background: #fff; overflow-x: hidden; } /* ⚠️ The brand link is pinned to exactly the navbar's height. AdminLTE sizes the sidebar as calc(100vh - (3.5rem + 1px)) on the assumption the brand link is that tall, but custom.css pads it to ~81px (25px + a 30px line + 26px). The sidebar therefore ran ~24px past the bottom of the viewport, and .main-sidebar's overflow-y:hidden clipped its last items so they could never be scrolled into view. Matching the heights fixes that with no height override at all, and puts the brand's bottom border on the same line as the navbar's. */ body.sn-panel .brand-link { display: flex; align-items: center; height: calc(3.5rem + 1px); padding-top: 0; padding-bottom: 0; overflow: hidden; border-bottom: 1px solid var(--sn-border); } body.sn-panel .brand-link .brand-image { float: none; flex: 0 0 auto; max-height: 34px; margin-top: 0; } body.sn-panel .brand-link .brand-text { color: var(--sn-ink); font-weight: 800; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; } /* Every top-level sidebar icon is hardcoded `text-red` (#dc3545) across a 1037-line file. One scoped override beats find/replacing all of them, and scoping to .main-sidebar leaves page content that uses .text-red alone. */ body.sn-panel .main-sidebar .text-red { color: var(--sn-accent) !important; } body.sn-panel .nav-sidebar .nav-link { color: var(--sn-ink); transition: background-color .15s ease, color .15s ease; } /* nav-flat pulls the list flush to both sidebar edges (margin: -.25rem -.5rem) and gives its links border-radius:0, so they are full-bleed strips. Inset them into rounded pills like the storefront -- but ONLY while the sidebar is expanded. The collapsed 4.6rem rail keeps AdminLTE's geometry, or the icons drift off centre. (On mobile, opening the drawer removes sidebar-collapse, so the drawer gets pills.) */ body.sn-panel:not(.sidebar-collapse) .nav-sidebar .nav-link { margin: 1px .5rem; border-radius: 10px; } body.sn-panel .nav-sidebar .nav-link:hover { background: var(--sn-pill-bg); } /* ⚠️ Tree children. AdminLTE's nav-flat draws `border-left: .2rem solid` on every child link, with NO colour, so it takes the dark text colour. Its only colour rule targets [class*=sidebar-light-], which the markup's dead `sidebar-light` class never matches. Once the links were rounded, that dark line curled into a black bracket beside every child. Make it transparent -- it still reserves its .2rem, so AdminLTE's icon offsets are unchanged. !important because AdminLTE's selector is (0,6,0). Never mark an active child with a left border or an inset shadow either: on a rounded pill it curls into the same bracket. */ body.sn-panel .nav-sidebar .nav-treeview .nav-link, body.sn-panel .nav-sidebar .nav-treeview .nav-treeview { border-left-color: transparent !important; } body.sn-panel .nav-sidebar .nav-treeview .nav-link { font-size: .92rem; } /* AdminLTE fills the active top-level item (blue by default); recolour it to the accent and flip its icon so it stays legible on the fill. */ body.sn-panel .nav-sidebar > .nav-item > .nav-link.active { background: var(--sn-accent); color: var(--sn-on-accent); box-shadow: none; } body.sn-panel .nav-sidebar > .nav-item > .nav-link.active i, body.sn-panel .nav-sidebar > .nav-item > .nav-link.active .text-red { color: var(--sn-on-accent) !important; } body.sn-panel .nav-treeview .nav-link.active { background: var(--sn-pill-bg); color: var(--sn-ink); font-weight: 700; } body.sn-panel .nav-treeview .nav-link.active i { color: var(--sn-accent) !important; } /* Signed-in box under the brand -- a link to the profile page. */ body.sn-panel .sn-panel-userbox { display: flex; align-items: center; gap: .6rem; margin: .6rem 0 .5rem; padding: .55rem .65rem; border-radius: 12px; background: var(--sn-well); color: var(--sn-ink); text-decoration: none; transition: background-color .15s ease; } body.sn-panel .sn-panel-userbox:hover, body.sn-panel .sn-panel-userbox:focus { background: var(--sn-pill-bg-h); color: var(--sn-ink); text-decoration: none; } body.sn-panel .sn-panel-userbox .sn-pu-avatar { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; background: #fff; } body.sn-panel .sn-panel-userbox .sn-pu-meta { min-width: 0; } body.sn-panel .sn-panel-userbox .sn-pu-name { display: block; color: var(--sn-ink); font-weight: 700; font-size: .85rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.sn-panel .sn-panel-userbox .sn-pu-role { display: inline-block; margin-top: 3px; padding: 2px 7px; border-radius: 999px; background: #fff; color: var(--sn-accent); font-size: .58rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } /* Collapsed rail: drop the text and card, centre a smaller avatar -- the same way AdminLTE hides .brand-text and .nav-link p. sidebar-collapse lands on , which is also where sn-panel lives, hence the chained selector. The rail's content width is 4.6rem minus .sidebar's .5rem padding each side (~57px), so the box must add no horizontal padding or it overflows into a scrollbar. */ body.sn-panel.sidebar-collapse .sn-panel-userbox { justify-content: center; padding: .35rem 0; background: transparent; } body.sn-panel.sidebar-collapse .sn-panel-userbox .sn-pu-meta { display: none; } body.sn-panel.sidebar-collapse .sn-panel-userbox .sn-pu-avatar { width: 34px; height: 34px; }