/* ============================================================ CloudPanel BS5 Theme — cp-theme.css ============================================================ Replaces avant.css + avant-bootstrap-overrides.css. Loaded AFTER bootstrap.min.css (BS5) and BEFORE modern.css. Brand customization is expressed as Bootstrap 5 CSS custom properties; the file only contains hand-written rules for layout primitives BS5 has no opinion about (left sidebar, login-split, secure-email portal). Section map: 1. Brand tokens — non-BS5-vendored CSS custom properties 2. BS5 variable overrides (:root) 3. Component-level BS5 var overrides (.btn, .alert, .card, …) 4. Sidebar / leftbar layout shell 5. Page heading, breadcrumb tweaks 6. Login split-screen 7. Secure email portal 8. Error pages Anything specific to a single page lives in that page's own CSS file (login.css → modern.css §7, secure-email.css, error-page.css). This file is global only. ============================================================ */ /* ============================================================ 1. Brand tokens ============================================================ Match the values modern.css already uses, so the BS5 cutover doesn't shift visible button / link / navbar colors. */ :root { /* Teal — primary action color (buttons, links, focus rings) */ --brand-teal: #32c5d2; --brand-teal-2: #28aab8; --brand-teal-deep: #1c8a95; --brand-teal-soft: #d6f3f6; /* Navy — navbar gradient + accent surfaces */ --brand-navy: #2e5dac; --brand-navy-2: #254a8a; --brand-navy-deep: #1c3a6f; /* Sidebar surface */ --sb-bg: #5e6878; --sb-bg-2: #4e5666; /* Status palette */ --st-success: #527f26; --st-success-bg: #ebf6e1; --st-warn: #927608; --st-warn-bg: #fcf3d0; --st-danger: #a81515; --st-danger-bg: #fdf2f2; --st-info: #157890; --st-info-bg: #ddf4fa; /* CloudPanel functional palette — drives dashboard tile colors, metric stripes, status pills, sparklines. */ --cp-tile-info: #4f8edc; --cp-tile-orange: #f4813a; --cp-tile-success: #85c744; --cp-tile-magenta: #b5468f; --cp-tile-midnight: #2a3f5c; --cp-tile-green: #14eb60; --cp-tile-purple: #8064a1; --cp-tile-red: #c0504e; --cp-accent-cyan: #2bbce0; /* Surfaces & lines — generic aliases consumed throughout the legacy modern.css ruleset. Mirror the BS5 vars where applicable so the two namespaces stay in sync. */ --bg: #f6f7fa; --bg-2: #ffffff; --bg-3: #fbfbfd; --fg: #1d2128; --fg-2: #3a4150; --fg-muted: #8a93a4; --line: #e6e8ee; --line-2: #eef0f4; --hover: #f1f3f7; /* Geometry */ --r-card: 6px; --r-input: 5px; --r-pill: 999px; --gap: 16px; } /* ============================================================ 1b. Base layout — body padding for fixed navbar + typography ============================================================ The fixed-top navbar is 64px tall; without padding-top the leftbar and page content tuck under it. Typography helpers `.mono / .muted / .eyebrow` are referenced by dashboard widgets folded in below. */ body { padding-top: 64px; } /* BS5 ships `a { text-decoration: underline }` by default — BS3 didn't, so CloudPanel's previous look had no link underlines. Restore the BS3-like behaviour: underline on hover only. Anchors that legitimately need a permanent underline can opt back in with `text-decoration: underline` inline or via a utility class. */ a { text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4, h5, h6 { font-family: "Open Sans", system-ui, sans-serif; letter-spacing: -0.01em; color: var(--fg); } .mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } .muted { color: var(--fg-muted); } .eyebrow { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); } /* ============================================================ 2. BS5 variable overrides ============================================================ Drives every component that consumes the standard --bs-* tokens (buttons, links, alerts, badges, borders, focus rings, form controls, navbar, modal, dropdown). */ :root, [data-bs-theme="light"] { /* Theme colors */ --bs-primary: #32c5d2; --bs-primary-rgb: 50, 197, 210; --bs-secondary: #6c757d; --bs-secondary-rgb: 108, 117, 125; --bs-success: #527f26; --bs-success-rgb: 82, 127, 38; --bs-info: #157890; --bs-info-rgb: 21, 120, 144; --bs-warning: #927608; --bs-warning-rgb: 146, 118, 8; --bs-danger: #a81515; --bs-danger-rgb: 168, 21, 21; /* Body / surface */ --bs-body-bg: #f6f7fa; --bs-body-bg-rgb: 246, 247, 250; --bs-body-color: #1d2128; --bs-body-color-rgb: 29, 33, 40; --bs-emphasis-color: #000; --bs-secondary-color: rgba(29, 33, 40, 0.6); --bs-secondary-bg: #eef0f4; --bs-tertiary-bg: #fbfbfd; --bs-tertiary-color: rgba(29, 33, 40, 0.45); /* Borders */ --bs-border-color: #e6e8ee; --bs-border-color-translucent: rgba(0, 0, 0, 0.08); --bs-border-radius: 5px; --bs-border-radius-sm: 3px; --bs-border-radius-lg: 6px; --bs-border-radius-xl: 8px; /* Links */ --bs-link-color: #1c8a95; --bs-link-color-rgb: 28, 138, 149; --bs-link-hover-color: #28aab8; --bs-link-hover-color-rgb: 40, 170, 184; /* Typography */ --bs-font-sans-serif: "Open Sans", "Segoe UI", system-ui, -apple-system, "Droid Sans", Tahoma, Arial, sans-serif; --bs-body-font-family: var(--bs-font-sans-serif); --bs-body-font-size: 13px; --bs-body-line-height: 1.45; --bs-body-font-weight: 400; --bs-heading-color: #1d2128; /* Focus ring */ --bs-focus-ring-color: rgba(50, 197, 210, 0.25); } /* ============================================================ 3. Component-level BS5 var overrides ============================================================ Most components pick up the brand colors via --bs-primary etc. above. These are the targeted nudges where BS5's default visual doesn't match what we want. */ /* Cards — flatter, light header rather than BS5's neutral-grey */ .card { --bs-card-border-color: var(--bs-border-color); --bs-card-border-radius: 6px; --bs-card-cap-bg: #fbfbfd; --bs-card-cap-color: #1d2128; --bs-card-cap-padding-y: 0.65rem; --bs-card-cap-padding-x: 1rem; --bs-card-spacer-y: 1rem; --bs-card-spacer-x: 1rem; } .card > .card-header { font-weight: 600; font-size: 13px; text-transform: none; border-bottom: 1px solid var(--bs-border-color); } /* `.card.border-primary` was originally a primary-vs-default distinction (teal-soft header for primary cards, white for default). Reverted to the BS5 default look across all cards for consistency — every card renders with a white header (var(--bg-2)) and the standard border color (var(--bs-border-color)). The .border-primary class is a no-op now; views can keep it on their markup harmlessly. */ /* Buttons — keep Avant's tighter padding */ .btn { --bs-btn-padding-y: 0.4rem; --bs-btn-padding-x: 0.85rem; --bs-btn-font-size: 13px; --bs-btn-border-radius: 5px; --bs-btn-line-height: 1.45; } .btn-sm { --bs-btn-padding-y: 0.25rem; --bs-btn-padding-x: 0.6rem; --bs-btn-font-size: 12px; --bs-btn-border-radius: 4px; } .btn-primary { --bs-btn-color: #fff; --bs-btn-bg: var(--brand-teal); --bs-btn-border-color: var(--brand-teal); --bs-btn-hover-bg: var(--brand-teal-2); --bs-btn-hover-border-color: var(--brand-teal-2); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--brand-teal-deep); --bs-btn-active-border-color: var(--brand-teal-deep); --bs-btn-disabled-bg: var(--brand-teal); --bs-btn-disabled-border-color: var(--brand-teal); } .btn-secondary { --bs-btn-color: #1d2128; --bs-btn-bg: #fff; --bs-btn-border-color: #c2c6cf; --bs-btn-hover-bg: #f1f3f7; --bs-btn-hover-border-color: #a1a8b3; --bs-btn-hover-color: #1d2128; --bs-btn-active-bg: #e6e8ee; --bs-btn-active-border-color: #8c94a0; } /* Forms — line-up with our 13px body type */ .form-control, .form-select { --bs-border-color: #d4d7de; font-size: 13px; padding: 0.45rem 0.7rem; border-radius: 5px; } .form-control:focus, .form-select:focus { border-color: var(--brand-teal); box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color); } .form-label, .col-form-label { font-weight: 600; font-size: 13px; color: var(--bs-body-color); } .form-text { font-size: 12px; color: var(--bs-tertiary-color); } /* Badges — bring back something close to BS3 .label proportions */ .badge { --bs-badge-padding-x: 0.55em; --bs-badge-padding-y: 0.32em; --bs-badge-font-size: 0.78em; --bs-badge-font-weight: 600; --bs-badge-border-radius: 3px; } /* Alerts — subtler tint than BS5 default */ .alert { --bs-alert-padding-x: 1rem; --bs-alert-padding-y: 0.7rem; --bs-alert-margin-bottom: 1rem; --bs-alert-border-radius: 5px; } .alert-success { --bs-alert-color: var(--st-success); --bs-alert-bg: var(--st-success-bg); --bs-alert-border-color: rgba(82,127,38,0.2); } .alert-info { --bs-alert-color: var(--st-info); --bs-alert-bg: var(--st-info-bg); --bs-alert-border-color: rgba(21,120,144,0.2); } .alert-warning { --bs-alert-color: var(--st-warn); --bs-alert-bg: var(--st-warn-bg); --bs-alert-border-color: rgba(146,118,8,0.2); } .alert-danger { --bs-alert-color: var(--st-danger); --bs-alert-bg: var(--st-danger-bg); --bs-alert-border-color: rgba(168,21,21,0.2); } /* Modals — keep Avant's 5px radius and a hair softer backdrop */ .modal { --bs-modal-border-radius: 6px; --bs-modal-header-padding-y: 0.85rem; --bs-modal-header-padding-x: 1rem; --bs-modal-padding: 1rem; } .modal-backdrop.show { opacity: 0.55; } /* Force the modal-header to its BS5 default flex layout: title left, close button right. Some legacy rule we haven't located is competing with the auto margin on .btn-close — these explicit declarations re-establish the contract. */ .modal-header { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; } .modal-header .btn-close { margin-left: auto !important; margin-right: calc(-0.5 * var(--bs-modal-header-padding-x, 1rem)) !important; order: 99; } /* BS5's `.modal-title` defaults to `font-size: 1.25rem` (~20 px) which reads larger than the BS3/Avant pattern. Trim to match the card-header size so modals and cards feel like the same surface family. */ .modal-title { font-size: 16px; font-weight: 600; line-height: 1.4; order: 0; } /* Tooltips / popovers — readable on both light + dark surfaces */ .tooltip { --bs-tooltip-bg: #333; --bs-tooltip-color: #fff; --bs-tooltip-font-size: 12px; --bs-tooltip-padding-x: 0.6rem; --bs-tooltip-padding-y: 0.35rem; } /* Dropdowns — match BS3 spacing density */ .dropdown-menu { --bs-dropdown-font-size: 13px; --bs-dropdown-padding-y: 0.4rem; --bs-dropdown-item-padding-y: 0.4rem; --bs-dropdown-item-padding-x: 1rem; --bs-dropdown-border-radius: 5px; box-shadow: 0 6px 20px rgba(0,0,0,0.08); } /* Force dropdown menus inside the navbar to position absolutely. BS5's default makes `.navbar-nav .dropdown-menu` static (it's the collapsed-on-mobile pattern); without a `.navbar-expand-*` class on our
, that static positioning persists at all sizes, so opening the user-toolbar dropdown injects the menu into the navbar flow and grows its height. */ header.navbar .navbar-nav .dropdown-menu, nav.navbar .navbar-nav .dropdown-menu { position: absolute; } /* Tables — Avant-density default. Striping disabled (transparent stripe color) so DataTables stay all-white with only the hover highlight visually distinguishing rows. To re-enable, change --bs-table-striped-bg to e.g. rgba(0,0,0,0.02). */ .table { --bs-table-bg: transparent; --bs-table-color: var(--bs-body-color); --bs-table-border-color: var(--bs-border-color); --bs-table-striped-bg: transparent; font-size: 13px; } .table > thead { background: #f6f7fa; font-weight: 600; } /* Pagination — teal accent for the active page */ .pagination { --bs-pagination-color: #1d2128; --bs-pagination-bg: #fff; --bs-pagination-border-color: var(--bs-border-color); --bs-pagination-hover-color: var(--brand-teal-deep); --bs-pagination-hover-bg: var(--brand-teal-soft); --bs-pagination-active-bg: var(--brand-teal); --bs-pagination-active-border-color: var(--brand-teal); --bs-pagination-disabled-bg: #fff; --bs-pagination-disabled-color: var(--bs-tertiary-color); --bs-pagination-disabled-border-color: var(--bs-border-color); --bs-pagination-font-size: 13px; } /* Breadcrumb */ .breadcrumb { --bs-breadcrumb-divider-color: var(--bs-tertiary-color); --bs-breadcrumb-item-active-color: var(--bs-body-color); --bs-breadcrumb-font-size: 13px; --bs-breadcrumb-margin-bottom: 0.5rem; --bs-breadcrumb-padding-x: 0; --bs-breadcrumb-padding-y: 0; --bs-breadcrumb-bg: transparent; } /* List group — override BS5's default `--bs-list-group-bg: var( --bs-body-bg)` (which inherits our page-grey #f6f7fa) so items render on white instead of blending into the page background. */ .list-group { --bs-list-group-bg: var(--bg-2); } /* Tabs */ .nav-tabs { --bs-nav-tabs-border-color: var(--bs-border-color); --bs-nav-tabs-link-active-color: var(--brand-teal-deep); --bs-nav-tabs-link-active-border-color: var(--bs-border-color) var(--bs-border-color) #fff; --bs-nav-tabs-link-hover-border-color: transparent transparent var(--brand-teal); font-size: 13px; font-weight: 600; } /* ============================================================ 4. Sidebar / leftbar layout shell ============================================================ BS5 has no opinion about left rails. The sidebar markup (#page-leftbar > ul.acc-menu) is preserved from the existing _LeftMenu.cshtml partial; this block re-establishes the steel surface and item styling on top of BS5. The mobile collapse logic and menu interactions live in cloudpanel.js. */ #page-container { background: linear-gradient(to right, var(--sb-bg) 0, var(--sb-bg) 280px, var(--bs-body-bg) 280px, var(--bs-body-bg) 100%); min-height: calc(100vh - 64px); position: relative; overflow: hidden; } body.collapse-leftbar #page-container { background: linear-gradient(to right, var(--sb-bg) 0, var(--sb-bg) 68px, var(--bs-body-bg) 68px, var(--bs-body-bg) 100%); } @media (max-width: 767px) { #page-container, body.collapse-leftbar #page-container { background: var(--bs-body-bg); } } #page-leftbar { width: 280px; float: left; background: transparent; color: rgba(255,255,255,0.85); font-size: 13px; padding-top: 8px; transition: width 0.2s ease; } body.collapse-leftbar #page-leftbar { width: 68px; } #page-leftbar ul.acc-menu, #page-leftbar ul.acc-menu ul { list-style: none; margin: 0; padding: 0; } #page-leftbar ul.acc-menu > li > a { display: flex; align-items: center; gap: 12px; padding: 10px 8px; color: rgba(255,255,255,0.85); text-decoration: none; border-left: 3px solid transparent; } #page-leftbar ul.acc-menu > li > a:hover, #page-leftbar ul.acc-menu > li.active > a { background: var(--sb-bg-2); border-left-color: var(--brand-teal); color: #fff; } #page-leftbar ul.acc-menu > li > a > i { font-size: 18px; width: 22px; text-align: center; flex-shrink: 0; } #page-leftbar ul.acc-menu ul { background: var(--sb-bg-2); display: none; } /* DO NOT add `#page-leftbar ul.acc-menu li.open > ul { display: block }`. application.js drives the open/close animation via jQuery slideToggle, which manages inline style="display:block|none". A CSS rule keyed on `.open` would flash the menu visible the instant addClass('open') runs, making slideToggle interpret the click as a "currently visible → animate closed" gesture. The `.open` class still controls the chevron flip and active-item highlight; opening/closing is JS-only. */ #page-leftbar ul.acc-menu ul li a { display: block; padding: 6px 16px 6px 44px; color: rgba(255,255,255,0.7); text-decoration: none; font-size: 12.5px; line-height: 22px; } #page-leftbar ul.acc-menu ul li a:hover { background: rgba(0,0,0,0.15); color: #fff; } /* Third-level submenu (e.g. Microsoft Exchange ▸ Global Policies ▸ ActiveSync). Without this, every nested-ul descendant matches the `.acc-menu ul li a` rule above and sits at 44 px padding — flush with its grandparent's siblings, so when "Global Policies" is open you can't tell whether ActiveSync belongs to Global Policies or to Microsoft Exchange directly. The deeper indent + slightly darker tint on the inner