/* ========================================================================= APPLICATION SHELL ** GENERATED FILE ** ========================================================================= Regenerate with scratchpad/gen_shell.py. Do not hand-edit. The sidebar, topbar and page wrappers. This replaced the shell half of modernize/styles.css in phase 3. PROVENANCE These rules were EXTRACTED from the Modernize build rather than written fresh. That was the whole safety strategy for this phase: the geometry is a web of interacting widths, transforms and breakpoints, and an eyeballed reimplementation would look correct on the screens someone thought to check and be subtly wrong everywhere else. Taking the working geometry and changing only what had to change keeps every layout that depended on it -- /leases/dashboard in particular -- exactly where it was. WHAT CHANGED FROM THE ORIGINAL 1. The docking breakpoint is 1200px, not 1300px. Phase 0 made that decision and implemented it as an override layered on top; with the original gone there is nothing to override, so the value is simply correct here now. 2. The three raw colour literals became roles. Everything else already read var(--bs-*), which rq-bridge.css maps to our tokens -- which is why this file needed almost no recolouring. 3. Theme-customizer rules were dropped with the customizer itself. Everything here is layout. Colour comes from the token layers. ========================================================================= */ #main-wrapper {min-height:100vh} .page-wrapper .body-wrapper>.container-fluid,.page-wrapper .body-wrapper>.container-lg,.page-wrapper .body-wrapper>.container-md,.page-wrapper .body-wrapper>.container-sm,.page-wrapper .body-wrapper>.container-xl,.page-wrapper .body-wrapper>.container-xxl {transition:.2s ease-in;padding:0 24px} .body-wrapper {padding-top:calc(70px + 30px)} @media (min-width:1200px) { [data-layout=vertical] .topbar {width:calc(100% - 270px)} [data-layout=vertical] body .page-wrapper {margin-left:270px} [data-layout=vertical] body[data-sidebartype=mini-sidebar] .topbar {width:calc(100% - 87px)} [data-layout=vertical] body[data-sidebartype=mini-sidebar] .page-wrapper {margin-left:87px} [data-layout=vertical] body[data-sidebartype=mini-sidebar] .nav-small-cap {text-align:center} [data-layout=vertical] body[data-sidebartype=mini-sidebar] .nav-small-cap .nav-small-cap-icon {display:inline-block} [data-layout=vertical] body[data-sidebartype=mini-sidebar] .logo-img {width:40px;overflow:hidden} [data-layout=vertical] body[data-sidebartype=mini-sidebar] .sidebar-nav .has-arrow::after {display:none} [data-layout=vertical] body[data-sidebartype=mini-sidebar] .sidebar-nav .sidebar-list .sidebar-list-item {text-align:center} [data-layout=vertical] body[data-sidebartype=mini-sidebar] .left-sidebar {width:87px;box-shadow:0 10px 20px var(--rq-shadow-color)} [data-layout=vertical] body[data-sidebartype=mini-sidebar] .left-sidebar .scroll-sidebar {height:calc(100vh - 50px)} [data-layout=vertical] body[data-sidebartype=mini-sidebar] .left-sidebar .fixed-profile,[data-layout=vertical] body[data-sidebartype=mini-sidebar] .left-sidebar .hide-menu {display:none} [data-layout=vertical] body[data-sidebartype=mini-sidebar] .left-sidebar .sidebar-nav ul .sidebar-item .sidebar-link {padding:11px 9px} [data-layout=vertical] body[data-sidebartype=mini-sidebar] .left-sidebar:hover {width:270px;z-index:50} [data-layout=vertical] body[data-sidebartype=mini-sidebar] .left-sidebar:hover .logo-img {width:100%} [data-layout=vertical] body[data-sidebartype=mini-sidebar] .left-sidebar:hover .nav-small-cap {text-align:left} [data-layout=vertical] body[data-sidebartype=mini-sidebar] .left-sidebar:hover .nav-small-cap .nav-small-cap-icon {display:none} [data-layout=vertical] body[data-sidebartype=mini-sidebar] .left-sidebar:hover .fixed-profile,[data-layout=vertical] body[data-sidebartype=mini-sidebar] .left-sidebar:hover .hide-menu,[data-layout=vertical] body[data-sidebartype=mini-sidebar] .left-sidebar:hover .sidebar-nav .has-arrow::after {display:inline-block} [data-layout=vertical] body[data-sidebartype=mini-sidebar] .left-sidebar:hover .sidebar-nav ul .sidebar-item .sidebar-link {padding:11px 15px} [data-layout=vertical] body[data-sidebartype=mini-sidebar] .left-sidebar:hover .sidebar-nav .sidebar-list .sidebar-list-item {text-align:left} [data-layout=vertical] body[data-sidebartype=mini-sidebar] .left-sidebar:hover .logo-img {width:100%} } .with-vertical {display:block} .left-sidebar {width:270px;border-right:1px solid var(--bs-border-color);flex-shrink:0;background:var(--bs-body-bg);z-index:99;transition:.2s ease-in;position:fixed;left:0;right:0;height:100%} .left-sidebar .sidebartoggler {color:var(--bs-dark-text-emphasis)} .left-sidebar .scroll-sidebar {overflow-y:auto;padding:0 24px;height:calc(100vh - 175px);border-radius:7px} .left-sidebar .scroll-sidebar .simplebar-track.simplebar-horizontal {visibility:hidden!important} .brand-logo {min-height:70px;padding:0 24px} .sidebar-nav ul .sidebar-item .sidebar-link {display:flex;font-size:14px;white-space:nowrap;align-items:center;line-height:25px;position:relative;margin:0 0 2px;padding:10px;border-radius:7px;gap:15px;text-decoration:none;font-weight:400} .sidebar-nav ul .sidebar-item .sidebar-link span:first-child {display:flex} .sidebar-nav ul .sidebar-item .sidebar-link .ti {flex-shrink:0;font-size:21px} .sidebar-nav ul .sidebar-item .sidebar-link:hover {background:var(--bs-primary-bg-subtle);color:var(--bs-primary)} .sidebar-nav ul .sidebar-item .sidebar-link:hover.has-arrow::after {border-color:var(--bs-primary)} .sidebar-nav ul .sidebar-item .sidebar-link.active:hover.has-arrow::after {border-color:var(--bs-white)} .sidebar-nav ul .sidebar-item .link-disabled {opacity:.38} .sidebar-nav ul .sidebar-item .first-level .sidebar-item {transition:all .4s ease-in-out;border-bottom:0} .sidebar-nav ul .sidebar-item .first-level .sidebar-item .sidebar-link:hover {background-color:transparent;color:var(--bs-primary)} .sidebar-nav ul .sidebar-item .first-level .sidebar-item .sidebar-link.active.has-arrow::after {border-color:var(--bs-primary)} .sidebar-nav ul .sidebar-item .first-level .sidebar-item>.sidebar-link {padding:8px 10px;border-radius:7px;font-size:14px;gap:23px} .sidebar-nav ul .sidebar-item .first-level .sidebar-item>.sidebar-link .sidebar-icon {flex-shrink:0;margin-left:12px;margin-right:35px;width:14px;height:14px} .sidebar-nav ul .sidebar-item .first-level .sidebar-item:last-child {margin-bottom:16px} .sidebar-nav ul .sidebar-item .first-level .sidebar-link .ti {font-size:7px} .sidebar-nav ul .sidebar-item .first-level .sidebar-item .sidebar-link.active {background-color:transparent!important;color:var(--bs-primary)!important} .sidebar-nav ul .sidebar-item .two-level .sidebar-item .sidebar-link {padding:8px 10px 8px 45px} .sidebar-nav ul .sidebar-item .three-level .sidebar-item .sidebar-link {padding:8px 10px 8px 60px} .sidebar-nav ul .sidebar-item.selected>.sidebar-link,.sidebar-nav ul .sidebar-item.selected>.sidebar-link.active,.sidebar-nav ul .sidebar-item>.sidebar-link.active {background-color:var(--bs-primary);color:var(--bs-white)} .sidebar-nav ul .sidebar-item.selected .sidebar-link.has-arrow::after {border-color:var(--bs-white)} .sidebar-nav .sidebar-list .sidebar-list-item {padding:8px 0} .nav-small-cap {margin-top:24px;color:var(--bs-link-color);font-size:12px;font-weight:700;padding:3px 0;line-height:26px;text-transform:uppercase} .nav-small-cap .nav-small-cap-icon {display:none} @media (min-width:1200px) { [data-layout=vertical] [data-sidebartype=mini-sidebar] .left-sidebar {width:87px} [data-layout=vertical] [data-sidebartype=mini-sidebar] .left-sidebar:hover {width:270px;position:fixed;height:100vh} [data-layout=vertical] [data-sidebartype=mini-sidebar] .left-sidebar:hover .logo-part {width:auto;overflow:unset} [data-layout=vertical] [data-sidebartype=mini-sidebar] .left-sidebar .logo-part {width:34px;overflow:hidden} } @media (max-width:1199.98px) { .left-sidebar {width:270px;position:fixed;left:-270px;height:100%} #main-wrapper.show-sidebar .left-sidebar {left:0} } .sidebar-nav .has-arrow {position:relative} .sidebar-nav .has-arrow::after {position:absolute;content:"";width:7px;height:7px;border-width:1px 0 0 1px;border-style:solid;border-color:var(--bs-dark-text-emphasis);margin-left:10px;transform:rotate(135deg) translate(0,-50%);transform-origin:top;top:22px;right:15px;transition:all .3s ease-out} .sidebar-nav .has-arrow[aria-expanded=true]::after,.sidebar-nav li.active>.has-arrow::after,.sidebar-nav li>.has-arrow.active::after {top:18px;margin-top:1px;border-color:var(--bs-white);transform:rotate(-135deg) translate(0,-50%)} .topbar {position:fixed;top:0;width:100%;background:var(--bs-body-bg);z-index:9;padding:0 25px} .topbar .navbar {min-height:70px} .topbar .navbar .navbar-toggler:focus {box-shadow:none} .topbar .navbar .navbar-nav .dropdown-menu {position:absolute;min-width:200px} .topbar .navbar .navbar-nav .dropdown-menu .dropdown-item {border-radius:8px} @media (min-width:768px) { .topbar .navbar .navbar-nav .dropdown-menu.content-dd {width:360px} } .topbar .navbar .navbar-nav .nav-item.dropdown .dropdown-menu-end {right:0;left:auto;top:100%} .topbar .navbar .navbar-nav .nav-item.dropdown:hover .nav-link {color:var(--bs-primary)} .topbar .navbar .navbar-nav .nav-item.dropdown:hover .dropdown-menu {display:block} .topbar .navbar .navbar-nav .nav-item .nav-link {display:flex;align-items:center;line-height:70px;height:70px;padding:0 15px;font-size:14px;color:var(--bs-link-color)} .topbar .navbar .navbar-nav .nav-item .nav-link i {font-size:20px} .topbar .navbar .navbar-nav .nav-item .nav-link:hover {color:var(--bs-primary)} @media (min-width:992px) { .topbar .navbar .navbar-nav .nav-item .nav-link {line-height:36px;height:36px} } .topbar .navbar .navbar-nav.quick-links .nav-item .nav-link {line-height:70px;height:70px;position:relative;z-index:2} @media (min-width:992px) { .topbar .navbar .navbar-nav.quick-links .nav-item .nav-link {line-height:36px;height:36px} } .topbar .navbar .navbar-nav.quick-links .nav-item .nav-link:hover {transition:all .1s ease-in-out;color:var(--bs-primary)!important} @media (max-width:767.98px) { .topbar .navbar-nav .dropdown-menu {position:absolute;width:100%} .topbar .navbar-nav .nav-item.dropdown {position:static} } @media (max-width:991.98px) { .topbar .navbar .navbar-collapse {border-top:1px solid var(--bs-border-color)} } html[data-layout=horizontal] .topbar {z-index:99;box-shadow:0 10px 20px var(--rq-shadow-color)} html[data-layout=horizontal] .app-header .navbar {min-height:70px} @media (min-width:1200px) { html[data-layout=horizontal] .with-vertical {display:none} } html[data-layout=horizontal] .body-wrapper {padding-top:70px} html[data-layout=horizontal] .body-wrapper>.container-fluid,html[data-layout=horizontal] .body-wrapper>.container-lg,html[data-layout=horizontal] .body-wrapper>.container-md,html[data-layout=horizontal] .body-wrapper>.container-sm,html[data-layout=horizontal] .body-wrapper>.container-xl,html[data-layout=horizontal] .body-wrapper>.container-xxl {padding-top:115px!important;padding:15px} @media (min-width:992px) and (max-width:1199.98px) { html[data-layout=horizontal] .body-wrapper>.container-fluid,html[data-layout=horizontal] .body-wrapper>.container-lg,html[data-layout=horizontal] .body-wrapper>.container-md,html[data-layout=horizontal] .body-wrapper>.container-sm,html[data-layout=horizontal] .body-wrapper>.container-xl,html[data-layout=horizontal] .body-wrapper>.container-xxl {padding:20px 10px} } @media (min-width:1200px) { html[data-layout=horizontal][data-boxed-layout=full] .body-wrapper>.container-fluid,html[data-layout=horizontal][data-boxed-layout=full] .body-wrapper>.container-lg,html[data-layout=horizontal][data-boxed-layout=full] .body-wrapper>.container-md,html[data-layout=horizontal][data-boxed-layout=full] .body-wrapper>.container-sm,html[data-layout=horizontal][data-boxed-layout=full] .body-wrapper>.container-xl,html[data-layout=horizontal][data-boxed-layout=full] .body-wrapper>.container-xxl,html[data-layout=horizontal][data-boxed-layout=full] .navbar,html[data-layout=horizontal][data-boxed-layout=full] .scroll-sidebar {position:relative;max-width:100%;margin:0 auto} html[data-layout=horizontal][data-boxed-layout=boxed] .body-wrapper>.container-fluid,html[data-layout=horizontal][data-boxed-layout=boxed] .body-wrapper>.container-lg,html[data-layout=horizontal][data-boxed-layout=boxed] .body-wrapper>.container-md,html[data-layout=horizontal][data-boxed-layout=boxed] .body-wrapper>.container-sm,html[data-layout=horizontal][data-boxed-layout=boxed] .body-wrapper>.container-xl,html[data-layout=horizontal][data-boxed-layout=boxed] .body-wrapper>.container-xxl,html[data-layout=horizontal][data-boxed-layout=boxed] .navbar,html[data-layout=horizontal][data-boxed-layout=boxed] .scroll-sidebar {position:relative;max-width:1200px;margin:0 auto} } @media (min-width:1200px) { html[data-layout=horizontal] .app-header {transition:0s} html[data-layout=horizontal] .app-header .navbar {padding:0} html[data-layout=horizontal] .body-wrapper>.container-fluid,html[data-layout=horizontal] .body-wrapper>.container-lg,html[data-layout=horizontal] .body-wrapper>.container-md,html[data-layout=horizontal] .body-wrapper>.container-sm,html[data-layout=horizontal] .body-wrapper>.container-xl,html[data-layout=horizontal] .body-wrapper>.container-xxl,html[data-layout=horizontal] .navbar,html[data-layout=horizontal] .scroll-sidebar {position:relative;max-width:1200px;margin:0 auto} html[data-layout=horizontal] .sidebar-nav #sidebarnav {flex-wrap:wrap} html[data-layout=horizontal] .sidebar-nav #sidebarnav>.sidebar-item>.has-arrow:after {display:block} html[data-layout=horizontal] .left-sidebar {position:fixed;top:70px;width:100%;height:auto;padding-top:6px;z-index:45;transition:0s;border-bottom:1px solid var(--bs-border-color)} html[data-layout=horizontal] .left-sidebar .scroll-sidebar {height:65px;overflow-y:unset;padding:10px} html[data-layout=horizontal] .sidebar-nav #sidebarnav {display:flex;width:100%;margin:0;gap:3px} html[data-layout=horizontal] .sidebar-nav #sidebarnav>.sidebar-item {border-bottom:0} html[data-layout=horizontal] .sidebar-nav #sidebarnav>.sidebar-item:last-child {margin-right:0} html[data-layout=horizontal] .sidebar-nav #sidebarnav>.sidebar-item>.sidebar-link {margin:0;gap:10px;padding:5px 10px} html[data-layout=horizontal] .sidebar-nav #sidebarnav>.sidebar-item>.sidebar-link .ti {font-size:16px} html[data-layout=horizontal] .sidebar-nav #sidebarnav>.sidebar-item>.sidebar-link.has-arrow {padding-right:25px!important} html[data-layout=horizontal] .sidebar-nav #sidebarnav>.sidebar-item {position:relative;width:auto;margin-bottom:0;min-height:65px} html[data-layout=horizontal] .sidebar-nav #sidebarnav>.sidebar-item .first-level {padding:10px;border-radius:7px;animation:menuDropdownShow .3s ease-in-out;transition:background-color .3s} html[data-layout=horizontal] .sidebar-nav #sidebarnav>.sidebar-item .first-level .sidebar-item>.sidebar-link .sidebar-icon {margin-right:0;margin-left:0;flex-shrink:0} html[data-layout=horizontal] .sidebar-nav #sidebarnav>.sidebar-item .first-level .sidebar-item {position:relative} html[data-layout=horizontal] .sidebar-nav #sidebarnav>.sidebar-item .first-level .sidebar-item .sidebar-link {font-size:14px;gap:10px} html[data-layout=horizontal] .sidebar-nav #sidebarnav>.sidebar-item .first-level .sidebar-item .sidebar-link:hover {background-color:var(--rq-accent-soft);color:var(--bs-primary)} html[data-layout=horizontal] .sidebar-nav #sidebarnav>.sidebar-item .first-level .sidebar-item .sidebar-link .ti {font-size:16px} html[data-layout=horizontal] .sidebar-nav #sidebarnav>.sidebar-item .first-level .sidebar-item:last-child {margin-bottom:0} html[data-layout=horizontal] .sidebar-nav #sidebarnav>.sidebar-item>.has-arrow:after {transform:rotate(-135deg) translate(0,-50%);right:9px;top:15px} html[data-layout=horizontal] .sidebar-nav #sidebarnav>.sidebar-item:last-child>.first-level {right:0;left:auto} html[data-layout=horizontal] .sidebar-nav #sidebarnav>.sidebar-item>.two-column+.first-level {width:400px} html[data-layout=horizontal] .sidebar-nav #sidebarnav>.sidebar-item>.two-column+.first-level>.sidebar-item {float:left;vertical-align:top;width:50%} html[data-layout=horizontal] .sidebar-nav #sidebarnav>.sidebar-item ul {position:absolute;left:0;top:calc(65px - 10px);width:240px;padding-bottom:0;display:none;z-index:100;box-shadow:0 15px 30px var(--rq-shadow-color);background:var(--bs-body-bg);transition:cubic-bezier(.075,.82,.165,1)} html[data-layout=horizontal] .sidebar-nav #sidebarnav>.mega-dropdown {position:static} html[data-layout=horizontal] .sidebar-nav #sidebarnav>.mega-dropdown .first-level {width:100%} html[data-layout=horizontal] .sidebar-nav #sidebarnav>.mega-dropdown .first-level>li {width:25%;float:left} html[data-layout=horizontal] .sidebar-nav #sidebarnav>.sidebar-item:hover ul.first-level,html[data-layout=horizontal] .sidebar-nav #sidebarnav>.sidebar-item:hover ul.first-level.collapse {display:block} html[data-layout=horizontal] .sidebar-nav #sidebarnav>.sidebar-item ul.second-level {left:240px;top:0} html[data-layout=horizontal] .sidebar-nav #sidebarnav>.sidebar-item .first-level .right-side-dd ul.second-level,html[data-layout=horizontal] .sidebar-nav #sidebarnav>.sidebar-item:last-child>.first-level ul.second-level {right:240px;top:0;left:auto;border-radius:7px} html[data-layout=horizontal] .sidebar-nav #sidebarnav ul.first-level>.sidebar-item:hover ul.second-level {display:block} html[data-layout=horizontal] .sidebar-nav #sidebarnav .badge,html[data-layout=horizontal] .sidebar-nav #sidebarnav .nav-small-cap,html[data-layout=horizontal] .sidebar-nav #sidebarnav .sidebar-footer,html[data-layout=horizontal] .sidebar-nav #sidebarnav .user-pro {display:none} } @media (max-width:1199.98px) { html[data-layout=horizontal] .body-wrapper>.container-fluid,html[data-layout=horizontal] .body-wrapper>.container-lg,html[data-layout=horizontal] .body-wrapper>.container-md,html[data-layout=horizontal] .body-wrapper>.container-sm,html[data-layout=horizontal] .body-wrapper>.container-xl,html[data-layout=horizontal] .body-wrapper>.container-xxl {padding-top:30px!important} html[data-layout=horizontal].show-sidebar .left-sidebar {left:0} html[data-layout=horizontal] .left-sidebar .sidebar-nav .sidebar-item .collapse .sidebar-item .sidebar-link .ti {font-size:16px} html[data-layout=horizontal] .app-header .navbar .navbar-collapse {padding:0} } .nav-icon-hover-bg {width:40px;height:40px;margin:0 5px;display:flex;align-items:center;justify-content:center} .nav-icon-hover-bg:hover {background-color:var(--bs-primary-bg-subtle);color:var(--bs-primary)} .nav-icon-hover-bg:hover .nav-link {color:var(--bs-primary)!important} html[dir=rtl] .topbar .navbar .navbar-nav .nav-item.dropdown .dropdown-menu-end {right:auto;left:0} html[dir=rtl][data-layout=horizontal] .sidebar-nav #sidebarnav>.sidebar-item>.sidebar-link.has-arrow {padding-right:10px!important;padding-left:25px!important} html[dir=rtl][data-layout=horizontal] .sidebar-nav #sidebarnav>.sidebar-item>.sidebar-link.has-arrow::after {right:auto;left:9px} @media (min-width:1200px) { html[dir=rtl][data-layout=vertical] #main-wrapper .page-wrapper {margin-right:270px;margin-left:0} html[dir=rtl][data-layout=vertical] [data-sidebartype=mini-sidebar] #main-wrapper .page-wrapper {margin-right:87px} html[dir=rtl][data-layout=vertical] [data-sidebartype=mini-sidebar] .left-sidebar:hover .nav-small-cap {text-align:right} } @media (max-width:1199.98px) { html[dir=rtl] #main-wrapper.show-sidebar .left-sidebar {left:unset;right:0} html[dir=rtl] .left-sidebar {left:unset;right:-270px} } html[dir=rtl] .left-sidebar {border-left:1px solid var(--bs-border-color);border-right:0} html[dir=rtl] .brand-logo .logo-img {transform:rotateY(180deg);display:flex;justify-content:end} html[dir=rtl] .sidebar-nav .has-arrow::after {right:unset;left:15px;margin-left:0;margin-right:10px} .topbar-image {background-image:url(../images/frontend-pages/topbar-bg.png);background-size:cover;background-repeat:no-repeat} /* ========================================================================= HAND-WRITTEN ADDITIONS Kept in gen_shell.py so regenerating does not drop them. ========================================================================= */ /* Logo swap. Modernize did this in JavaScript — app.min.js hid .dark-logo or .light-logo depending on the stored theme. Moving it to CSS fixes a real flash: the images were both in the markup and both painted until the script ran, so every page load briefly showed two logos side by side. In CSS the right one is correct on the first frame. Missing this was the first thing to break when Modernize came out, and it was invisible in the CSS because the rule had never been in CSS. */ .dark-logo { display: none; } [data-bs-theme="dark"] .dark-logo { display: inline; } [data-bs-theme="dark"] .light-logo { display: none; } /* Same story for the theme toggle pair — the visible icon is the state you will switch TO. rq.shell.js keeps these in sync after a click; these rules get the first paint right. */ .sun { display: none; } [data-bs-theme="dark"] .sun { display: flex; } [data-bs-theme="dark"] .moon { display: none; } /* The preloader, hidden for good. Four layouts still render
with a spinner image. Modernize's theme.js hid it on DOMContentLoaded — which is to say it was never a loading indicator, just a flash of logo that got switched off as soon as scripts ran. Removing that script made it permanently visible: a stray icon in the top-left corner of every page. Hiding it in CSS rather than restoring the JS, because the honest fix is for it not to paint at all. The markup can come out of the layouts whenever someone is in there anyway. */ .preloader { display: none; }