/** * Bezel Layout Design * Shared bezel (rounded frame) styling for all admin/portal pages. * Black outer shell with white content area and rounded corners. * * Usage: * Place after launchpad-admin.css in the . */ /* ======================================== OUTER SHELL - BLACK BEZEL FRAME ======================================== */ html body .wrapper, body .wrapper, .wrapper { background: #000000 !important; } html body .content-page, body .content-page, .content-page { background: #000000 !important; padding-right: 10px !important; } html body header, body header, header { position: sticky !important; top: 0 !important; background: #000000 !important; z-index: 1005 !important; padding-top: 10px !important; padding-right: 0 !important; margin-right: 0 !important; } /* ======================================== TOPBAR - WHITE WITH ROUNDED TOP CORNERS ======================================== */ html body .topbar, body .topbar, .topbar { transition: all .3s ease-in-out; height: var(--bs-topbar-height, 70px); background: #ffffff !important; margin-right: 0 !important; border-bottom: 0 !important; border-top-left-radius: 15px !important; border-top-right-radius: 15px !important; box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .05) !important; } /* ======================================== CONTENT AREA - WHITE WITH ROUNDED BOTTOM ======================================== */ html body .page-content, body .page-content, .page-content { background: #ffffff !important; border-radius: 0 0 15px 15px !important; margin-right: 0 !important; } /* .content is the flex column container — keep flex behaviour, just add visuals */ .content { background: #fff; border-radius: 0 0 15px 15px; } /* ======================================== SIDEBAR - BLACK TO MATCH BEZEL ======================================== */ .main-nav .scrollbar, .main-nav .scrollbar[data-simplebar] { background-color: #000000 !important; } .main-nav .logo-box, .main-nav .scrollbar { background-color: #000000 !important; } .main-nav .logo-box, div.main-nav div.logo-box, .logo-box { border-bottom: 0 !important; border-bottom-width: 0 !important; border-bottom-style: none !important; } /* ======================================== MOBILE - Full width, no side gaps ======================================== */ @media (max-width: 767px) { html body .content-page, body .content-page, .content-page { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; width: 100% !important; } html body .page-content, body .page-content, .page-content, html[data-menu-size] .page-content, html[data-menu-size="sm-hover"] .page-content, html[data-menu-size="sm-hover-active"] .page-content, html[data-menu-size="hidden"] .page-content { margin-left: 0 !important; max-width: 100% !important; width: 100% !important; border-left: none !important; } }