/* * Legacy Classic — overrides, loaded LAST (after Bootstrap 5 + style.css). * * The theme now loads Bootstrap 5 (css/bootstrap5.min.css). Every shared app * template is authored in Bootstrap 5, so the forms (login, signup, members, * etc.) render natively and centered — no compatibility shim required. * * This file carries two things: * 1. A small Bootstrap-3 compatibility layer for the handful of legacy chrome * classes this theme's bespoke markup + style.css still rely on that BS5 * dropped (panel, navbar-inverse, visible-xs/hidden-xs, col-xs-*, * btn-default, btn-block, pull-*, input-group-btn, sr-only, center-block). * 2. The theme's own visual accents (signup CTA, legal pages, auth card, * sign-in code field, nav spacing). * * Everything is scoped to .theme-legacy-classic. */ /* ===================================================================== 1. Bootstrap 3 chrome compatibility (classes Bootstrap 5 removed) ===================================================================== */ /* Responsive visibility (BS3 .visible-xs / .hidden-xs) */ @media (max-width: 767.98px) { .theme-legacy-classic .hidden-xs { display: none !important; } } @media (min-width: 768px) { .theme-legacy-classic .visible-xs { display: none !important; } } /* BS3 .col-xs-12 (BS5 renamed to .col-12) */ .theme-legacy-classic .col-xs-12 { position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } /* Floats / centering helpers (BS3 .pull-* / .center-block) */ .theme-legacy-classic .pull-right { float: right !important; } .theme-legacy-classic .pull-left { float: left !important; } .theme-legacy-classic .center-block { display: block; margin-left: auto; margin-right: auto; } /* Screen-reader only (BS5 renamed .sr-only → .visually-hidden) */ .theme-legacy-classic .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Buttons (BS3 .btn-default, .btn-block) */ .theme-legacy-classic .btn-default { color: #333; background-color: #e7e7e7; border: 1px solid #adadad; } .theme-legacy-classic .btn-default:hover, .theme-legacy-classic .btn-default:focus { color: #333; background-color: #d4d4d4; border-color: #8c8c8c; } .theme-legacy-classic .btn-block { display: block; width: 100%; } /* Input-group button wrapper (BS3 .input-group-btn) */ .theme-legacy-classic .input-group-btn { display: flex; } .theme-legacy-classic .input-group-btn > .btn { height: 100%; border-top-left-radius: 0; border-bottom-left-radius: 0; } /* Thumbnails (BS3 .thumbnail — used by store/galleries) */ .theme-legacy-classic .thumbnail { display: block; padding: 4px; margin-bottom: 20px; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; transition: border .2s ease-in-out; } .theme-legacy-classic .thumbnail > img, .theme-legacy-classic .thumbnail a > img { display: block; max-width: 100%; height: auto; margin: 0 auto; } .theme-legacy-classic .thumbnail .caption { padding: 9px; color: #333; } /* Misc BS3 components BS5 dropped */ .theme-legacy-classic .btn-xs { padding: 1px 5px; font-size: 12px; line-height: 1.5; border-radius: 3px; } .theme-legacy-classic .well { min-height: 20px; padding: 19px; margin-bottom: 20px; background-color: #f5f5f5; border: 1px solid #e3e3e3; border-radius: 4px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05); } .theme-legacy-classic .page-header { padding-bottom: 9px; margin: 40px 0 20px; border-bottom: 1px solid #eee; } .theme-legacy-classic .control-label { font-weight: 600; margin-bottom: 5px; } .theme-legacy-classic .help-block { display: block; margin-top: 5px; margin-bottom: 10px; color: #737373; } /* Panels (BS3) — render like BS5 cards. style.css keeps the .panel-* skins. */ .theme-legacy-classic .panel { margin-bottom: 20px; background-color: #fff; border: 1px solid #ddd; border-radius: 6px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); } .theme-legacy-classic .panel-heading { padding: 10px 15px; border-bottom: 1px solid #ddd; border-top-left-radius: 5px; border-top-right-radius: 5px; } .theme-legacy-classic .panel-heading a { color: inherit; text-decoration: none; } .theme-legacy-classic .panel-title { margin: 0; font-size: 16px; } .theme-legacy-classic .panel-body { padding: 15px; } .theme-legacy-classic .panel-default > .panel-heading { background-color: #f5f5f5; color: #333; } .theme-legacy-classic .panel-success { border-color: #6B8E23; } .theme-legacy-classic .panel-success > .panel-heading { background-color: #6B8E23; color: #fff; border-color: #6B8E23; } .theme-legacy-classic .panel-warning { border-color: #faebcc; } .theme-legacy-classic .panel-warning > .panel-heading { background-color: #fcf8e3; color: #8a6d3b; border-color: #faebcc; } .theme-legacy-classic .panel-info { border-color: #bce8f1; } .theme-legacy-classic .panel-info > .panel-heading { background-color: #d9edf7; color: #31708f; border-color: #bce8f1; } /* Legacy layout wrapper alignment. In sym2's public layout the navbar, header band, content and footer are each their own .container-fluid, and the breakpoint files (style1600.css → 1%, style2000.css → 5%) give every .container-fluid the SAME side margins — so they all line up at one shared left/right inset (the "page wrapper" look). The dark navbar is therefore inset and aligned with the content, NOT full-bleed (its inner .container-fluid is the bar; My Account/Sign Up sit at that inset's right edge, aligning with the right rail). BS5 makes .container-fluid width:100%, which + side margins overflows a BLOCK container — so the block ones (header band, content, footer) auto-size to (viewport − margins). The navbar's .container-fluid is a FLEX item (child of ), so it flex-shrinks to (viewport − margins) by itself — leave its width alone so ms-auto can push the links to that inset's right edge. */ .theme-legacy-classic #headerContainer, .theme-legacy-classic .contentContainer, .theme-legacy-classic footer.container-fluid { width: auto; } /* Dark navbar (BS3 .navbar-inverse). .navbar-dark on the