/* * bs5-compat.css - shared Bootstrap 3 -> 5 compatibility layer. Load it right after the Bootstrap 5.3 CSS in every * migrated header (docs/superpowers/specs/2026-09-29-bs5-migration-design.md). Promoted from the pilot's * css/crm/bs3-compat-v5.css (docs/perf/bs5-pilot.md); the block numbers are the pilot's, so the pilot doc still applies. * * Page markup is migrated to BS5 (e2e/scripts/bs5-convert.py). This file covers what the page does not own: * - angular-ui-bootstrap 2.5 templates ($uibModal, uib-datepicker-popup, uib-typeahead, uib-dropdown), * which were written for Bootstrap 3 and emit BS3 classes (.in, .open, .btn-default, .glyphicon, .pull-left); * - shared BS3-era templates reused unchanged (grid_settings_dropdown.html uses uib-dropdown); * - markup that page scripts build or toggle at run time with BS3 classes (glyphicons in loginaudit.js, * ceo_daily_summary.js, cases.js, ecom/orders.js, ecom/quotes.js; see block 4); * - global differences that would otherwise change every screen (font size, link underline, BS3 control sizes). * Everything above the "CRM theme" section is safe on every page (it only restores BS3 behaviour or matches BS3 classes). * The "CRM theme" section at the end ports crm.css rules and only applies on pages that load css/crm/crm.css. * Remove a block when no BS5 page emits the BS3 class any more. */ /* 1. $uibModal: ui-bootstrap marks an open window/backdrop with .in (BS3) instead of .show (BS5), and sets display:block inline. Without these the modal stays at opacity 0. */ .fade.in { opacity: 1; } .modal.fade.in .modal-dialog { transform: none; } .modal-backdrop.fade.in { opacity: var(--bs-backdrop-opacity, .5); } /* uib toggles body.modal-open; BS5 locks scrolling with inline styles and no longer styles this class. */ .modal-open { overflow: hidden; } .modal-open .modal { overflow-x: hidden; overflow-y: auto; } /* 2. uib-dropdown (grid-settings menu) opens by adding .open to the parent; BS5 shows menus with .show. */ .open > .dropdown-menu { display: block; } /* uib-typeahead popup is shown with ng-show only (never gets .show). ng-hide still wins (!important). */ ul[uib-typeahead-popup].dropdown-menu { display: block; } /* uib templates render BS3 menu items (li > a, no .dropdown-item). */ .dropdown-menu > li > a { display: block; padding: .25rem 1rem; clear: both; color: var(--bs-dropdown-link-color); white-space: nowrap; text-decoration: none; } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { color: var(--bs-dropdown-link-hover-color); background-color: var(--bs-dropdown-link-hover-bg); } .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover { color: var(--bs-dropdown-link-active-color); background-color: var(--bs-dropdown-link-active-bg); } /* 2c. (shared layer) BS3 placed every .dropdown-menu at top:100%/left:0 of its parent; BS5 leaves that to Popper, which uib does not use. A uib-dropdown menu (grid_settings_dropdown.html) would sit on top of its button. Zero specificity (:where), so page rules (crm.css .grid-settings-menu right:0), .dropdown-menu-end and uib's inline positions win. Also .btn-group: crm.css shows `.btn-group:hover > .dropdown-menu` without Popper, so the summernote toolbar menus (emails, emailtemplate) opened over their own button on hover and a click on the button hit the first menu item. */ :where(.open, .btn-group) > :where(.dropdown-menu) { top: 100%; left: 0; } /* 2b. (shared layer) BS3 .caret, still drawn by uib-dropdown toggles that are not .dropdown-toggle (the converter removes carets inside .dropdown-toggle, which BS5 draws with ::after). */ .caret { display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: 4px dashed; border-top: 4px solid \9; border-right: 4px solid transparent; border-left: 4px solid transparent; } /* 3. uib-datepicker header buttons use BS3 floats and .btn-default. */ .pull-left { float: left !important; } .pull-right { float: right !important; } .btn-default { --bs-btn-color: #333; --bs-btn-bg: #fff; --bs-btn-border-color: #ccc; --bs-btn-hover-color: #333; --bs-btn-hover-bg: #e6e6e6; --bs-btn-hover-border-color: #adadad; --bs-btn-active-color: #333; --bs-btn-active-bg: #e6e6e6; --bs-btn-active-border-color: #adadad; --bs-btn-disabled-color: #333; --bs-btn-disabled-bg: #fff; --bs-btn-disabled-border-color: #ccc; } /* 3b. (shared layer) BS3 helpers that page scripts toggle at run time (addClass/removeClass('hide')), so the converter keeps them in markup: BS5 dropped both. */ .hide, .hidden { display: none !important; } /* 3c. (shared layer) The jasny fileupload plug-in markup keeps BS3 .close on its remove link (data-dismiss="fileupload", plug-in owned, not converted). BS5 has no .close any more (its buttons are .btn-close). BS3 look: */ .close { float: right; font-size: 21px; font-weight: 700; line-height: 1; color: #000; text-shadow: 0 1px 0 #fff; opacity: .2; } .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; opacity: .5; } /* 4. BS5 ships no Glyphicons font. Map the icons emitted by uib templates (datepicker, timepicker) to Font Awesome 4.7, which the CRM header already loads. Page markup uses fa-* directly. (shared layer) Extended to every glyphicon that page scripts still write at run time (className strings, ng-class expressions) and every glyphicon in static/templates, so a page is not broken while its script is being migrated. Needs Font Awesome 4.7 on the page (ecom/header.html does not load it yet). Same table as GLYPH in e2e/scripts/bs5-convert.py. */ .glyphicon { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; -webkit-font-smoothing: antialiased; } .glyphicon-chevron-left:before { content: "\f053"; } .glyphicon-chevron-right:before { content: "\f054"; } .glyphicon-chevron-up:before { content: "\f077"; } .glyphicon-chevron-down:before { content: "\f078"; } .glyphicon-calendar:before { content: "\f073"; } .glyphicon-remove:before { content: "\f00d"; } .glyphicon-ok:before { content: "\f00c"; } .glyphicon-search:before { content: "\f002"; } .glyphicon-plus:before { content: "\f067"; } .glyphicon-minus:before { content: "\f068"; } .glyphicon-plus-sign:before { content: "\f055"; } .glyphicon-user:before { content: "\f007"; } .glyphicon-edit:before { content: "\f044"; } .glyphicon-pencil:before { content: "\f040"; } .glyphicon-floppy-disk:before { content: "\f0c7"; } .glyphicon-trash:before { content: "\f1f8"; } .glyphicon-refresh:before { content: "\f021"; } .glyphicon-map-marker:before { content: "\f041"; } .glyphicon-inbox:before { content: "\f01c"; } .glyphicon-bell:before { content: "\f0f3"; } .glyphicon-tag:before { content: "\f02b"; } .glyphicon-list-alt:before { content: "\f022"; } .glyphicon-info-sign:before { content: "\f05a"; } .glyphicon-import:before { content: "\f019"; } .glyphicon-duplicate:before { content: "\f24d"; } .glyphicon-cog:before { content: "\f013"; } .glyphicon-book:before { content: "\f02d"; } .glyphicon-warning-sign:before { content: "\f071"; } .glyphicon-time:before { content: "\f017"; } .glyphicon-random:before { content: "\f074"; } .glyphicon-lock:before { content: "\f023"; } .glyphicon-barcode:before { content: "\f02a"; } .glyphicon-home:before { content: "\f015"; } .glyphicon-ban-circle:before { content: "\f05e"; } .glyphicon-briefcase:before { content: "\f0b1"; } .glyphicon-dashboard:before { content: "\f0e4"; } .glyphicon-flag:before { content: "\f024"; } .glyphicon-ok-circle:before { content: "\f05d"; } .glyphicon-ok-sign:before { content: "\f058"; } .glyphicon-remove-circle:before { content: "\f05c"; } .glyphicon-send:before { content: "\f1d8"; } .glyphicon-shopping-cart:before { content: "\f07a"; } .glyphicon-usd:before { content: "\f155"; } .glyphicon-log-in:before { content: "\f090"; } .glyphicon-signal:before { content: "\f012"; } .glyphicon-stats:before { content: "\f080"; } /* glyphicon-spin is not a Bootstrap class: the templates that use it define it; FA's keyframes are the fallback. */ .glyphicon-spin { animation: fa-spin 2s infinite linear; } /* 5. Global look kept close to BS3: 14px body text (BS5: 16px) and 20px lines (BS5: 1.5) so dense CRM rows/headers still fit, BS3 link blue (#337ab7, BS5: #0d6efd), no underline on plain links (BS5 underlines every ), bold labels. html stays at 16px (BS3 set 10px): every BS5 rem size is right as it is; only the components below are resized. */ :root { --bs-body-font-size: .875rem; --bs-body-line-height: 1.42857143; --bs-link-color: #337ab7; --bs-link-color-rgb: 51, 122, 183; --bs-link-hover-color: #23527c; --bs-link-hover-color-rgb: 35, 82, 124; } a { text-decoration: none; } /* BS5 gives without href/class no colour (inherit); BS3 painted every blue (account name in the details card). */ a:not([href]):not([class]) { color: var(--bs-link-color); } a:not([href]):not([class]):hover { color: var(--bs-link-hover-color); } label { font-weight: 700; } /* BS3 bolded every (the CRM "click to open" fields) showed in link blue; BS5 does not. Element selectors (0,0,2), so .form-control and page colours still win, as they did over normalize. (Was a per-page rule in contacts, projects3, opportunities ...) */ a > input, a > textarea, a > select { color: inherit; } /* 5a. BS3 component sizes, in px (BS5 sizes them in rem against a 16px root: 38px inputs/buttons with 16px text, BS3 had 34px with 14px). Only size variables/properties are set, so BS5 colours and states still apply. */ h1, h2, h3, h4, h5, h6 { line-height: 1.1; } h1, h2, h3 { margin-top: 20px; margin-bottom: 10px; } h4, h5, h6 { margin-top: 10px; margin-bottom: 10px; } h1 { font-size: 36px; } h2 { font-size: 30px; } h3 { font-size: 24px; } h4 { font-size: 18px; } h5 { font-size: 14px; } h6 { font-size: 12px; } .modal-title, .dropdown-header, .popover-header { margin-top: 0; } /* (shared layer) BS3 .modal-header was a block, so a title alone in it was a full-width block and followed the header's text-align (deemsoft/global.css centres every .modal-header: the customerfeedback thank-you modal). BS5's header is flex and shrinks the title to its text at the left. Only a title with no sibling grows (a header with a close button keeps BS5's layout; see the zonos_ship_date_modal fix): no visual change where the header is left-aligned. */ .modal-header > .modal-title:only-child { flex: 1 1 auto; } /* The footer Terms/Privacy dialogs (and their page copies) centred their title in BS3 (global.css centres .modal-header; the BS3 close button floated). Their header also holds a .btn-close, so let the title take the free width. */ #terms .modal-title, #privacy .modal-title, #termsreg .modal-title, #privacyreg .modal-title, #placeorderterms .modal-title, #placeorderprivacy .modal-title { flex: 1 1 auto; } p { margin-bottom: 10px; } ul, ol { margin-bottom: 10px; } .btn { white-space: nowrap; } /* BS3 never wrapped button text */ .btn { --bs-btn-font-size: 14px; --bs-btn-line-height: 1.42857143; --bs-btn-padding-y: 6px; --bs-btn-padding-x: 12px; --bs-btn-border-radius: 4px; } .btn-lg, .btn-group-lg > .btn { --bs-btn-font-size: 18px; --bs-btn-line-height: 1.3333333; --bs-btn-padding-y: 10px; --bs-btn-padding-x: 16px; --bs-btn-border-radius: 6px; } .btn-sm, .btn-group-sm > .btn { --bs-btn-font-size: 12px; --bs-btn-line-height: 1.5; --bs-btn-padding-y: 5px; --bs-btn-padding-x: 10px; --bs-btn-border-radius: 3px; } /* BS5 dropped .btn-xs; the CRM toolbars (fixed 45px headers) use it everywhere. Same size as BS3. (shared layer) Kept in page markup too (bs5-convert.py COMPAT_KEPT): 22px grid-row buttons, the approved pilot look. */ .btn-xs { --bs-btn-padding-y: 1px; --bs-btn-padding-x: 5px; --bs-btn-font-size: 12px; --bs-btn-border-radius: 3px; --bs-btn-line-height: 1.5; } .form-control, .form-select, .input-group-text { font-size: 14px; line-height: 1.42857143; border-radius: 4px; } .form-control-sm, .form-select-sm, .input-group-sm > .form-control, .input-group-sm > .form-select, .input-group-sm > .input-group-text { font-size: 12px; line-height: 1.5; padding-top: 5px; padding-bottom: 5px; } /* crm.css styles every .fa as a 30x26px social-media badge (padding 4px, margin 5px 2px, 16px). The glyphicons that became fa-* sit inside buttons, where BS3 glyphicons had none of that. (Matches nothing extra where crm.css is absent.) */ .btn > .fa { padding: 0; margin: 0; width: auto; height: auto; font-size: inherit; } /* (shared layer) Every other icon converted from a glyphicon carries the marker .bs5-glyph (page groups 1-5, ~400 icons, all /). Give it the BS3 glyphicon box back: no crm.css badge padding/margin/size/hover fade, BS3's top:1px. Specificity 0,1,1 (element + class): beats crm.css .fa (0,1,0, loaded after this file) but not the pages' own icon rules (.package-header-left .fa, .kanban-card-sub .fa ... are 0,2,0 and later). crm.css .exp-glyphicon { padding-top:3px } (the section chevrons) is re-applied at 0,2,0. font-size: inherit (a BS3 glyphicon had none of its own) except where a page sizes the icon with a single class (getquote .iconscolor 14px, cases .kanban-loader-icon 16px): :where() keeps that exclusion at zero specificity. font-family: pages that load Font Awesome 5 after 4.7 (getquote, zonos_opportunities) would draw FA4-only codepoints (fa-pencil ...) blank; these icons use FA 4.7 names, so keep the FA 4.7 font (loaded by every module header). */ i.bs5-glyph, span.bs5-glyph { padding: 0; margin: 0; width: auto; height: auto; position: relative; top: 1px; font-family: FontAwesome; font-weight: normal; } i.bs5-glyph:where(:not(.iconscolor, .kanban-loader-icon)), span.bs5-glyph:where(:not(.iconscolor, .kanban-loader-icon)) { font-size: inherit; } i.bs5-glyph:hover, span.bs5-glyph:hover { opacity: 1; } .bs5-glyph.exp-glyphicon { padding-top: 3px; } /* BS3 dialogs: 600px from 768px up (BS5: 500px from 576px), .modal-lg 900px (BS5: 800px). */ @media (min-width: 768px) { .modal { --bs-modal-width: 600px; } } @media (min-width: 992px) { .modal-lg { --bs-modal-width: 900px; } } /* (shared layer) BS3 .checkbox/.radio (converted to .form-check): 10px above and below, labels not bold (block 5 bolds every label, BS3 did not bold these). */ .form-check { margin-top: 10px; margin-bottom: 10px; } .form-check-label, .form-check > label { font-weight: 400; margin-bottom: 0; } /* (shared layer) Custom checkboxes of css/ecom/regchechbox.css (label.reg_cust_check + span.checkmark) now sit in .form-check (BS3 .checkbox). BS3's `.checkbox label` beat .reg_cust_check (20px text indent, no bottom margin, 20px min height), .checkbox had no indent, and regchechbox.css zeroed .checkbox's bottom margin. Was a per-page rule in 13 templates (groups 1, 2, 5); now also covers the pages that had none (zonos_orders, leads accounts/contacts, register). */ .form-check:has(> .reg_cust_check) { padding-left: 0; min-height: 0; } :root:has(link[href*="regchechbox.css"]) .form-check:has(> .reg_cust_check) { margin-bottom: 0; } .form-check > .reg_cust_check { padding-left: 20px; margin-bottom: 0; min-height: 20px; } /* (shared layer) BS3 .label (dropped in BS5): the quote-summary rows (.label-value-row .label: zonos_orders/opportunities, the three quote-summary partials, getquote_new) rendered at 75% with BS3's padding; now they grew to 14px. The pages set colour and weight themselves (.label-value-row .label, 0,2,0). */ .label { display: inline; padding: .2em .6em .3em; font-size: 75%; font-weight: 700; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25em; } .label:empty { display: none; } /* (shared layer) BS3 .badge was a grey pill; BS5's has no background (white text on nothing). The converter leaves bare .badge alone because bg-* utilities are !important and would override the inline colours many badges carry. */ .badge:not([class*="bg-"]) { border-radius: 10px; } /* After-opt #2: the grey is a fallback only (zero specificity, as BS3's .badge 0,1,0 was before the page CSS). At 0,2,0 it beat page badge colours: the quote/RFQ activity user chips (.badge-crm etc., activity.css) turned grey with blue text. */ :where(.badge:not([class*="bg-"])) { background-color: #777; } /* 5c. Input groups: buttons sit directly in .input-group (no BS3 .input-group-btn wrapper), so BS5 makes them the input's height and joins the borders. The CRM form fields (.requiredField/.regularField in crm.css) pull themselves up with margin-top:-10px/margin-bottom:10px; move that margin to the group so the button follows. (Only matches crm.css/pms.css field classes, so it is inert elsewhere.) */ .input-group:has(> .requiredField, > .regularField) { flex-wrap: nowrap; margin-top: -5px; margin-bottom: 10px; } /* PDV-301: -5px/10px puts the field where BS3 drew it (5px above its row, 5px clear of the next field); -10px made the date fields touch the field above */ .input-group > .requiredField, .input-group > .regularField { margin-top: 0; margin-bottom: 0; flex: 1 1 auto; width: 1%; min-width: 0; } /* A value the uib datepicker popup cannot parse (ng-invalid-date): shown like BS5 .is-invalid. The model keeps its last valid date (bs5-compat.js restores it on blur). jQuery UI date inputs get .is-invalid from the page script. */ input[uib-datepicker-popup].ng-invalid-date.ng-dirty:not(:disabled) { /* after-opt: only once the user typed (an unparsable stored value showed red on load) */ border-color: var(--bs-form-invalid-border-color) !important; padding-right: calc(1.42857143em + .75rem); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right calc(.35714286em + .1875rem) center; background-size: calc(.71428571em + .375rem) calc(.71428571em + .375rem); } input[uib-datepicker-popup].ng-invalid-date.ng-dirty:not(:disabled):focus { box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .25); } /* 5b. BS3 made every .col-* position:relative; BS5 does not. CRM templates anchor absolutely positioned children to their column (e.g. the password eye icons in the New Account modal). */ .row > [class*="col-"] { position: relative; } /* BS3 gutters were 30px (15px column padding, 15px container padding); BS5 uses 24px. Keep BS3's so the page lines up with the BS3 one. The header navbar keeps BS5's (its layout was accepted as is). g-* / gx-* utilities still win. (shared layer) The pilot exempted only #account_dropdown (the CRM header); every BS5 navbar is exempted now, since all module headers get the same navbar-expand-lg port. */ .row, .container, .container-fluid { --bs-gutter-x: 30px; } .navbar > .container, .navbar > .container-fluid, #account_dropdown .container-fluid { --bs-gutter-x: 1.5rem; } .row.g-0, .row.gx-0 { --bs-gutter-x: 0; } .row.g-1, .row.gx-1 { --bs-gutter-x: .25rem; } .row.g-2, .row.gx-2 { --bs-gutter-x: .5rem; } .row.g-3, .row.gx-3 { --bs-gutter-x: 1rem; } .row.g-4, .row.gx-4 { --bs-gutter-x: 1.5rem; } .row.g-5, .row.gx-5 { --bs-gutter-x: 3rem; } /* (shared layer) BS3 .container widths: 750 / 970 / 1170px from 768 / 992 / 1200px, full width below 768px (BS5: 540 / 720 / 960 / 1140 / 1320px from 576 / 768 / 992 / 1200 / 1400px). The pages were laid out for BS3's (ecom pages, login and registration forms, facilityRegisterNew, facilityEvaluationForm). .container-fluid and .container-{bp} unchanged. */ @media (min-width: 576px) { .container { max-width: none; } } @media (min-width: 768px) { .container { max-width: 750px; } } @media (min-width: 992px) { .container { max-width: 970px; } } @media (min-width: 1200px) { .container { max-width: 1170px; } } /* BS3 set those as width, so a container with its own inline width (lead detail: style="width: 100%") used it. As a max-width they capped it and centred the lead detail with blank space left and right (Teams 2026-10-09). */ .container[style*="width"] { max-width: none; } /* 5d. (shared layer) Rows and columns laid out as in BS3. BS3: .row = -15px margins + clearfix, only its .col-* children floated with 15px padding; anything else in a row (plain
/
/
    , a nested .row) was an ordinary block spanning the row edge to edge. BS5: every child of a .row is a 100%-wide, non-shrinking flex item with the gutter padding (.row > *), and columns outside a .row neither float nor get padding. The page groups marked the spots (docs/perf/bs5-group-1.md .. -5.md, bs5-group-C.md); the rules live here. */ /* Plain (non-column) children of a .row: no gutter padding. BS5 pads them with calc(var(--bs-gutter-x) * .5), so the variable is zeroed on the child itself instead of overriding `padding`: a .btn / .form-control / .card sitting directly in a row keeps its own padding (bootstrap.css defines those after .row > *), page rules still win, and .container* / nested .row children keep BS3's 15px / their own gutter. (A
      directly in a row still gets padding-left 0 from .row > *; BS3 kept the browser's 40px: emailtemplates sets it inline.) */ .row > :where(:not(.row, .col, [class^="col-"], [class*=" col-"], .container, [class^="container-"], [class*=" container-"])) { --bs-gutter-x: 0; } /* A .row directly in a .row: BS3 gave it -15px margins again, so it was 30px wider than the outer row's content. BS5 sizes it as a column (100%, padded). Same specificity as BS5's .row > * and loaded later; page rules still win. */ .row > :where(.row:not(.col, [class^="col-"], [class*=" col-"])) { width: calc(100% + var(--bs-gutter-x)); max-width: none; padding-left: 0; padding-right: 0; } /* .bs3-row: a BS3 row whose children are not columns (toolbars, button bars, a heading/table/iframe in a row). Not a BS5 .row, so its buttons/labels/inline content stay inline; BS3's -15px margins and clearfix. */ .bs3-row { margin-left: -15px; margin-right: -15px; } .bs3-row::before, .bs3-row::after { content: " "; display: table; } .bs3-row::after { clear: both; } .row > .bs3-row { width: calc(100% + 30px); max-width: none; } /* The .bs3-br-row / .bs3-nocol-row / .bs5-card-hdr / .bs5-card-bare classes below replace :has() selectors (too slow on ui-grid pages); js/bs5/bs5-compat.js shim 7 sets them. */ /* .bs3-cols: an element that holds grid columns without being a .row (e.g. col-sm-2 + col-sm-10 inside a col-sm-10, or a plain
      //.form-row with columns). BS3 floated those columns side by side with 15px padding; BS5 stacks them. The BS5 col-* classes still give the widths (at BS5's breakpoints); float each column from the breakpoint where its width applies (below it, it is a full-width block, as in BS3). No clearfix, as BS3 (floats may continue into the next sibling, e.g. the getquote lead-time options). Zero specificity: .nopadding, utilities and page rules win. */ :where(.bs3-cols, .row.bs3-br-row) > :where(.col, [class^="col-"], [class*=" col-"]) { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; } :where(.bs3-cols, .row.bs3-br-row) > :where([class*="col-1"], [class*="col-2"], [class*="col-3"], [class*="col-4"], [class*="col-5"], [class*="col-6"], [class*="col-7"], [class*="col-8"], [class*="col-9"]) { float: left; } @media (min-width: 576px) { :where(.bs3-cols, .row.bs3-br-row) > :where([class*="col-sm-"]) { float: left; } } @media (min-width: 768px) { :where(.bs3-cols, .row.bs3-br-row) > :where([class*="col-md-"]) { float: left; } } @media (min-width: 992px) { :where(.bs3-cols, .row.bs3-br-row) > :where([class*="col-lg-"]) { float: left; } } @media (min-width: 1200px) { :where(.bs3-cols, .row.bs3-br-row) > :where([class*="col-xl-"]) { float: left; } } /* After-opt #9: a .row whose content starts with (or contains) a
      : in BS3 the
      was a 20px line above the floated columns (Order Information, quote/account detail cards). A
      in a BS5 flex row is dropped, so the first field row touched the card header and its -10px field margin pulled the white inputs over the header border. Such rows are laid out as BS3 did: block (clearfix) with the floated columns above (min-height 1px keeps an empty col-sm-1 spacer in place, as in BS3). */ .row:where(.bs3-br-row) { display: flow-root; } /* ================================================================================================================== * CRM theme (crm.css pages only: crm/header.html, crm/headerlead.html, logistics/header.html, facility/header.html). * Blocks 6 and 7 are theme, not compatibility: they port crm.css rules written for BS3 classes. The pilot applied them * to every element; on the shared layer they are scoped to pages that load css/crm/crm.css, because the ecom and * public pages never had crm.css (their panels kept BS3's 15px body padding and their menus are white). * Move them into crm.css once the CRM is fully on BS5. * ================================================================================================================== */ /* 6. crm.css styles .panel-body (padding 0) and BS3 .panel had a 20px bottom margin. Ported to the card markup; move into crm.css once the CRM is fully on BS5. (shared layer) The 20px margin was BS3 .panel's own, so it applies everywhere; the padding and panel-info colours are crm.css and are scoped. */ .card { margin-bottom: 20px; } :root:has(link[href*="css/crm/crm.css"]) .card-body { padding: 0; } /* crm.css zeroed every .panel-body, nested ones too */ /* Every CRM panel was .panel-info: light blue border, 10px 15px heading. crm.css paints .panel-heading #F3F2F2 with white text. */ :root:has(link[href*="css/crm/crm.css"]) .card { --bs-card-border-color: #bce8f1; --bs-card-border-radius: 4px; --bs-card-inner-border-radius: 3px; --bs-card-cap-bg: #F3F2F2; /* after-opt #23: no white cap text (crm.css white on #F3F2F2 was never readable; headings colour their own text, plain headers such as "Uploaded Files" went white) */ --bs-card-cap-padding-y: 10px; --bs-card-cap-padding-x: 15px; } :root:has(link[href*="css/crm/crm.css"]) .card > .card-header { border-bottom-color: #bce8f1; } /* (shared layer) Outside crm.css, a BS3 .panel-body had 15px padding and .panel-heading 10px 15px: keep those sizes. */ .card { --bs-card-spacer-y: 15px; --bs-card-spacer-x: 15px; --bs-card-cap-padding-y: 10px; --bs-card-cap-padding-x: 15px; } /* 7. CRM header theme: crm.css styles .navbar-default and `.navbar-nav > li > a`, which the BS5 navbar (.nav-link, .dropdown-item) no longer matches. Same colours, re-targeted; move into crm.css later. crmMain.js still marks the current tab by adding .active to the
    • , so style that too. (#account_dropdown is the navbar id of all four crm.css headers, so these rules are inert elsewhere.) */ #account_dropdown.navbar { background-color: #F6F6F6; box-shadow: 0 2px 10px rgb(0 0 0 / 25%); margin-bottom: 20px; padding: 0; } #account_dropdown .navbar-nav .nav-link { color: #000; padding: 10px 15px; line-height: 20px; } /* PDV-290: BS3 navbar links were 10px 15px (15px all round made the two-row header 50px taller) */ #account_dropdown .navbar-nav .nav-link:hover, #account_dropdown .navbar-nav .nav-link:focus, #account_dropdown .navbar-nav > .active > .nav-link { color: #F05B30; } #account_dropdown .navbar-nav > .active > .nav-link { background-color: #e7e7e7; } #account_dropdown .navbar-nav .nav-link.show { color: #F05B30; background-color: #000; } /* crm.css paints every .dropdown-menu black; give BS5 items the matching white/orange text. (shared layer) Scoped to crm.css pages: without crm.css the menu is white and white links would be invisible. */ :root:has(link[href*="css/crm/crm.css"]) .dropdown-menu { --bs-dropdown-link-color: #fff; --bs-dropdown-link-hover-color: #F05B30; --bs-dropdown-link-hover-bg: #000; --bs-dropdown-link-active-color: #F05B30; --bs-dropdown-link-active-bg: #000; --bs-dropdown-header-color: #999; --bs-dropdown-divider-bg: #444; } /* PDV-299: header Admin submenu toggle - orange while open, caret turns up */ #account_dropdown .admin-submenu-toggle.open { color: #F05B30; } #account_dropdown .admin-submenu-toggle.open .caret { border-top: 0; border-bottom: 4px solid; } /* 7b. (shared layer) crm.css styles tabs inside `.panel.with-nav-tabs.panel-info` (no tab-bar border, black tab text, #bce8f1 on hover, white active tab with a #a2c2e2 border). The converted markup is `.card.with-nav-tabs` (every one was panel-info) with `li.nav-item > a.nav-link(.active)`, which those rules no longer match. Same look through BS5's nav variables; :where() keeps the selectors at BS5's specificity, so pages with their own tab CSS (tasks, cases: `.card.with-nav-tabs .nav-tabs > li > a`) still win. */ :where(:root:has(link[href*="css/crm/crm.css"]) .card.with-nav-tabs) .nav-tabs { border-bottom: none; --bs-nav-link-color: #000; --bs-nav-link-hover-color: #000; --bs-nav-tabs-link-hover-border-color: transparent; --bs-nav-tabs-link-active-color: #000; --bs-nav-tabs-link-active-bg: #fff; --bs-nav-tabs-link-active-border-color: #a2c2e2; } :where(:root:has(link[href*="css/crm/crm.css"]) .card.with-nav-tabs .nav-tabs) .nav-link:where(:not(.active)):is(:hover, :focus) { background-color: #bce8f1; } /* ================================================================================================================== * ecom theme (pages that load css/ecom/ecom.css: ecom/header.html, ecom/loginheader.html and the ecom page templates). * ================================================================================================================== */ /* 8. (shared layer) ecom.css styles BS3 .navbar-default (black bar, square corners, bold white links, orange hover and active tab, black on hover) and .navbar-right (padding-top 20px). bs5-convert.py and the ecom headers map navbar-default to navbar-light and navbar-right to ms-auto, so the same colours are re-targeted here. BS3 navbar metrics: no padding on the bar, 15px link padding (50px bar), 20px margin below. The toggler gets a white icon on the black bar (BS5's navbar-light icon is dark). ecom.css's .dropdown-menu > li > a rules still match. */ :root:has(link[href*="css/ecom/ecom.css"]) .navbar.navbar-light { --bs-navbar-padding-y: 0; --bs-navbar-color: #fff; --bs-navbar-hover-color: #F05B30; --bs-navbar-active-color: #F05B30; --bs-navbar-brand-color: #fff; --bs-navbar-brand-hover-color: #fff; --bs-navbar-toggler-border-color: rgba(255, 255, 255, .3); --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); background-color: black; border: 1px solid black; border-radius: 0 !important; min-height: 50px; margin-bottom: 20px; } :root:has(link[href*="css/ecom/ecom.css"]) .navbar.navbar-light .navbar-nav > li > .nav-link { color: #fff; font-weight: bold; padding: 15px; line-height: 20px; } :root:has(link[href*="css/ecom/ecom.css"]) .navbar.navbar-light .navbar-nav > li > .nav-link:hover, :root:has(link[href*="css/ecom/ecom.css"]) .navbar.navbar-light .navbar-nav > li > .nav-link:focus, :root:has(link[href*="css/ecom/ecom.css"]) .navbar.navbar-light .navbar-nav > .active > .nav-link { color: #F05B30; background-color: black; } :root:has(link[href*="css/ecom/ecom.css"]) .navbar.navbar-light .navbar-nav > li > .nav-link.show { color: #F05B30; background-color: transparent; } :root:has(link[href*="css/ecom/ecom.css"]) .navbar.navbar-light .navbar-nav.ms-auto { padding-top: 20px; } /* ================================================================================================================== * 9. After-optimization bug round (docs/perf/after-opt-bugs.md, Teams "After Optimization Bugs", 2026-10-06). * ================================================================================================================== */ /* #1 The "Top" button (#scrollBtn) sits alone in a fixed .row (left 96%, top 82%, 10% wide). BS3 kept it an inline button; BS5's .row > * made it a 100%-wide, full-height flex item, so the label ran off screen and only a yellow block showed over the footer. */ .row > #scrollBtn { width: auto; max-width: none; flex: 0 0 auto; align-self: flex-start; } /* #3 (and the same pattern elsewhere) A .row with no grid column in it (buttons, text, a table, a heading straight in the row: "Create Shipment" under the zonos quote parts) was a plain block in BS3: inline children stayed inline and followed text-center/text-end, blocks spanned the row. BS5 turns every child into a 100%-wide flex item, so a lone button became a full-width bar. Lay such rows out as BS3 did (block + clearfix); their children lose BS5's width:100%. Same specificity as BS5's .row / .row > * (0,1,0), loaded after bootstrap.css; page rules and inline styles still win. Rows marked .bs3-row by the page groups are not .row and are unaffected. */ .row:where(.bs3-nocol-row) { display: flow-root; } .row:where(.bs3-nocol-row) > * { width: auto; max-width: none; } /* #9 "Buttons are changed" (Order Information toolbar, the yellow Top button of #1, every page): BS3's button palette. BS5 recoloured the contextual buttons (warning #ffc107 with dark text, primary #0d6efd ...) and the converter turned BS3 .btn-default into .btn-outline-secondary (grey text and border). Only BS5's colour variables are set, at the same specificity as bootstrap.css and after it, so page rules and inline styles keep winning as they did over BS3. */ .btn-primary { --bs-btn-color: #fff; --bs-btn-bg: #337ab7; --bs-btn-border-color: #2e6da4; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #286090; --bs-btn-hover-border-color: #204d74; --bs-btn-focus-shadow-rgb: 51, 122, 183; --bs-btn-active-color: #fff; --bs-btn-active-bg: #204d74; --bs-btn-active-border-color: #122b40; --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #337ab7; --bs-btn-disabled-border-color: #2e6da4; } .btn-success { --bs-btn-color: #fff; --bs-btn-bg: #5cb85c; --bs-btn-border-color: #4cae4c; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #449d44; --bs-btn-hover-border-color: #398439; --bs-btn-focus-shadow-rgb: 92, 184, 92; --bs-btn-active-color: #fff; --bs-btn-active-bg: #398439; --bs-btn-active-border-color: #255625; --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #5cb85c; --bs-btn-disabled-border-color: #4cae4c; } .btn-info { --bs-btn-color: #fff; --bs-btn-bg: #5bc0de; --bs-btn-border-color: #46b8da; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #31b0d5; --bs-btn-hover-border-color: #269abc; --bs-btn-focus-shadow-rgb: 91, 192, 222; --bs-btn-active-color: #fff; --bs-btn-active-bg: #269abc; --bs-btn-active-border-color: #1b6d85; --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #5bc0de; --bs-btn-disabled-border-color: #46b8da; } .btn-warning { --bs-btn-color: #fff; --bs-btn-bg: #f0ad4e; --bs-btn-border-color: #eea236; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #ec971f; --bs-btn-hover-border-color: #d58512; --bs-btn-focus-shadow-rgb: 240, 173, 78; --bs-btn-active-color: #fff; --bs-btn-active-bg: #d58512; --bs-btn-active-border-color: #985f0d; --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #f0ad4e; --bs-btn-disabled-border-color: #eea236; } .btn-danger { --bs-btn-color: #fff; --bs-btn-bg: #d9534f; --bs-btn-border-color: #d43f3a; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #c9302c; --bs-btn-hover-border-color: #ac2925; --bs-btn-focus-shadow-rgb: 217, 83, 79; --bs-btn-active-color: #fff; --bs-btn-active-bg: #ac2925; --bs-btn-active-border-color: #761c19; --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #d9534f; --bs-btn-disabled-border-color: #d43f3a; } /* BS3 .btn-default (white, dark text, light grey border). */ .btn-outline-secondary { --bs-btn-color: #333; --bs-btn-bg: #fff; --bs-btn-border-color: #ccc; --bs-btn-hover-color: #333; --bs-btn-hover-bg: #e6e6e6; --bs-btn-hover-border-color: #adadad; --bs-btn-focus-shadow-rgb: 204, 204, 204; --bs-btn-active-color: #333; --bs-btn-active-bg: #e6e6e6; --bs-btn-active-border-color: #adadad; --bs-btn-disabled-color: #333; --bs-btn-disabled-bg: #fff; --bs-btn-disabled-border-color: #ccc; } /* #10/#14 Custom checkboxes (label.reg_cust_check: NDA / Account Hold, Open Order, Invoiced, Paid, Paasport Notifications ...) showed the native box next to the dark checkmark. BS3's `.checkbox input[type=checkbox]` gave the input margin-left -20px (and 4px top), which put it under the checkmark at the label's padding edge; .form-check has no such rule, so the input sat 20px right of the checkmark (pages make read-only inputs opaque again). */ .form-check > .reg_cust_check > input[type="checkbox"], .form-check > .reg_cust_check > input[type="radio"] { margin: 4px 0 0 -20px; } /* #16 "divider line should be lighter": BS5 draws
      in the text colour at 25% opacity (a mid grey on the CRM's dark text); BS3 drew it #eee with 20px above and below. Element selector: page and inline hr styles still win. */ hr { margin: 20px 0; border: 0; border-top: 1px solid #eee; color: #eee; opacity: 1; } /* #8/#13/#25 "Alerts are too big / look zoomed": SweetAlert2 sizes its dialog in rem (.swal2-popup font-size 1rem, every other size in em). BS3 set html to 10px, so every Swal on the CRM was drawn at 10px; BS5 leaves html at 16px and the same dialog came out 1.6x larger (Confirm PO Update: 512x333 instead of 320x208). Pin the old 10px base. */ /* SweetAlert2 injects its own