/* ========================================================================== Bootstrap 3 defaults — what BS3 gave every design for free and BS5 changed. Loaded right after bootstrap.min.css, BEFORE the template's own CSS, so the template's rules win over these exactly as they won over Bootstrap 3. Neutral: the same file for every template. Do not add template fixes here. ========================================================================== */ /* Type defaults BS3 supplied: 14px/1.42857 body, 1.1 headings at fixed sizes (BS5: 1.5 body, 1.2 headings, fluid h1-h3 below 1200px). If v1 set its own body size it wins — style.css loads before this file only for the vendor defaults it never restated. */ body { line-height: 1.42857143; color: #333; } /* BS3 body #333; BS5 paints #212529 (styleway: every unstyled text node 33,37,41) */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { line-height: 1.1; margin-bottom: 10px; } h1, h2, h3 { margin-top: 20px; } h4, h5, h6 { margin-top: 10px; } h1, .h1 { font-size: 36px; } h2, .h2 { font-size: 30px; } h3, .h3 { font-size: 24px; } h4, .h4 { font-size: 18px; } h5, .h5 { font-size: 14px; } h6, .h6 { font-size: 12px; } p { margin: 0 0 10px; } a { text-decoration: none; } a { color: #337ab7; } a:hover, a:focus { color: #23527c; } /* BS3's link colours — BS5's #0d6efd showed wherever v1 never set its own (bayhome's photo captions; never name that feature here: publish2's detector greps the zip for it); before v1's css, so v1's rules still win */ label { font-weight: 700; margin-bottom: 5px; } hr { margin: 20px auto; border: 0; border-top: 1px solid #eee; opacity: 1; } /* BS3 + UA: 20px top/bottom, auto sides (a narrow divider centres), fully opaque; BS5's reboot gives 1rem 0 at .25 opacity (foodeque's 404 divider went left and faint) */ button, input, optgroup, select, textarea { color: inherit; } /* BS3's normalize.css: fields and buttons took their parent's colour; BS5 leaves the UA's black (foodeque's white newsletter "Submit" on a dark band went black) */ blockquote { padding: 10px 20px; margin: 0 0 20px; font-size: 14px; border-left: 5px solid #eee; } .alert { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; } .alert-success { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; } .alert-info { color: #31708f; background-color: #d9edf7; border-color: #bce8f1; } .alert-warning { color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc; } .alert-danger { color: #a94442; background-color: #f2dede; border-color: #ebccd1; } .alert a, .alert-link { font-weight: 700; } .alert-success a { color: #2b542c; } .alert-info a { color: #245269; } .alert-warning a { color: #66512c; } .alert-danger a { color: #843534; } /* BS3's alert palette; BS5 repainted all four (behumanity's icons page callout: #0a3622 for #3c763d) */ .text-success { color: #3c763d !important; } .text-info { color: #31708f !important; } .text-warning { color: #8a6d3b !important; } .text-danger { color: #a94442 !important; } .text-muted { color: #777 !important; } .text-primary { color: #337ab7 !important; } /* BS5 paints these with !important */ code { padding: 2px 4px; font-size: 90%; color: #c7254e; background-color: #f9f2f4; border-radius: 4px; } kbd { padding: 2px 4px; font-size: 90%; color: #fff; background-color: #333; border-radius: 3px; } pre { display: block; padding: 9.5px; margin: 0 0 10px; font-size: 13px; line-height: 1.42857143; color: #333; word-break: break-all; word-wrap: break-word; background-color: #f5f5f5; border: 1px solid #ccc; border-radius: 4px; } pre code { padding: 0; font-size: inherit; color: inherit; white-space: pre-wrap; background-color: transparent; border-radius: 0; } /* BS3 fixed 13px pre / 90% code; BS5's .875em on a 10px body is 8.75px (behumanity's typography page) */ /* Container: BS3's fixed 750/970/1170 one tier up (col-md(992) -> col-lg), 15px gutters (BS5: 12px — every column was 3px narrower and 3px right). */ .container, .container-fluid { padding-left: 15px; padding-right: 15px; max-width: 100%; } .row { --bs-gutter-x: 30px; } @media (min-width: 768px) { .container { max-width: 750px; } } @media (min-width: 992px) { .container { max-width: 970px; } } @media (min-width: 1200px) { .container { max-width: 1170px; } } /* Grid children BS5 pads that BS3 did not, and column hosts that are not .row. */ .row > :where(:not([class^="col-"]):not([class*=" col-"]):not(.tv-colhost):not(.container):not(.container-fluid)) { padding-left: 0; padding-right: 0; } /* a .container inside a .row keeps its own gutter (flowerspetal: container-fluid > row > container); ^/space anchors so a template's own "tv-eng-col-text" (cunsultix) is not taken for a column */ .tv-colhost { display: flex; flex-wrap: wrap; } /* a COLUMN that directly holds columns (no .row between): BS3 floated them side by side inside it; BS5 needs a flex parent, or they stack (biteonbite: blog list's col-lg-9 > col-lg-6 cards, the post meta's col-lg-12 > col-lg-8 + col-lg-4). Anything else in that column keeps a full line, as it did above/below the floats. Zero-specificity host, so v1's own display wins. */ :where([class^="col-"], [class*=" col-"]):has(> [class^="col-"], > [class*=" col-"]) { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; } :where([class^="col-"], [class*=" col-"]):has(> [class^="col-"], > [class*=" col-"]) > :where(:not([class^="col-"]):not([class*=" col-"])) { flex: 0 0 100%; max-width: 100%; } /* a tab pane that hosts columns: BS5's ".tab-content > .active { display: block }" (0,2,0) beat the host's flex and stacked them (biteonbite's menu_tab: two dish lists per tab) */ .tab-content > .tab-pane.tv-colhost.active { display: flex; } /* BS3's .list-group-item took its parent's colour and a 4px radius; BS5 forces the body colour (#212529) and 6px (biteonbite's menu lists) */ .list-group { --bs-list-group-color: inherit; --bs-list-group-border-radius: 4px; } .carousel-item.tv-colhost.active, .carousel-item.tv-colhost.carousel-item-next, .carousel-item.tv-colhost.carousel-item-prev { display: flex; } /* BS5's (0,2,0) .carousel-item.active { display: block } stacked a slide's columns (bayhome's three testimonials per slide, one per row) */ .carousel-item.tv-colhost { display: none; } .carousel-item.tv-colhost.active, .carousel-item.tv-colhost.carousel-item-next, .carousel-item.tv-colhost.carousel-item-prev { display: flex; } /* a slide that hosts columns: the host's flex (0,1,0, after bootstrap.css) showed every slide at once, and BS5's .carousel-item.active { display: block } (0,2,0) then stacked the active one's photo + quote (beautica's testimonials) */ .carousel-item.tv-colhost { clear: none; } /* BS5 slides items as floats side by side; the host's clear:both dropped the incoming slide BELOW the outgoing one — a white gap for the whole transition (bayhome's News & Events) */ .tv-colhost > :not([class*="col-"]):not(.row):not(.clearfix):not(script) { flex: 1 1 0; min-width: 0; } /* a non-column sibling beside a floated BS3 column took the rest of the line (wrap-d-style's cart: a col-sm-2 label + an input-group) */ @media (max-width: 767.98px) { .tv-colhost > :not([class*="col-"]):not(.row):not(.clearfix):not(script) { flex-basis: 100%; } } /* below the tier the label column is full width in BS3 too, so its sibling drops under it */ .tv-colhost > :is(h1, h2, h3, h4, h5, h6):not([class*="col-"]):not(.row):not(.clearfix):not(script) { flex-basis: 100%; } /* a heading before the columns was a BS3 block on its own line; as a flex:1 sibling it shared the line and pushed the columns right (elitecv's "Hobbies & Interests") */ .card.panel, .card.well { display: block; } /* BS3 .panel / .well were blocks; the map adds BS5's .card, a flex COLUMN — every child stretched to full width (elitecv's 109 hover-demo buttons, 1128px each) and a well's split from its sentence */ .text-left { text-align: left; } .text-right { text-align: right; } /* BS3's own, NOT !important: v1's responsive.css re-centres a .text-left box on phones (elitecv's .personal-info) — BS5's text-start/-end are !important, so the map no longer adds them */ .row, .tv-colhost { align-items: flex-start; } /* BS3 columns were floats: each as tall as its own content. BS5 stretches every column to the tallest in the row — wrap-d-style's bordered search box grew 16px to match the logo column */ :where(.row, .tv-colhost) > :where([class*="col-"]) { min-height: 1px; } /* zero specificity: v1's own min-height on a column must win (styleway's .feature-product-shop { min-height: 300px } lost to this at (0,2,0)) */ /* BS3: an empty column still measured 1px (wrap-d-style's pagination row keeps an empty half) */ :where(.row) > [class*="col-"] { position: relative; } /* BS3 made every .col-* a positioning context, at (0,1,0) like this; BS5 does not — v1's absolutely placed children then anchor to the next positioned ancestor (arenanion's timeline years: right:-14px on the column ended up at the section's edge) */ /* BS3 columns were floats, so .pull-right on a column put it at the row's RIGHT edge whatever its offset said (homeapart's hero caption: col-md-6 col-md-offset-4 pull-right sat at x=720 of 1170, not at the offset's 525). In a flex row the float is inert — push it with an auto margin. */ .row > .pull-right, .tv-colhost > .pull-right { margin-left: auto; } /* A BS3 .row was a plain block: an uncleared float before it (homeapart's .text-head { float: left; width: 100% } section titles) was ignored by the row box and its float columns simply dropped below. BS5's flex row is a block formatting context, so the browser squeezes it into whatever is left beside the float — three 91px columns in a 273px row at 768. Rows go below floats, as they did. */ .row, .tv-colhost { clear: both; } /* BS3 gave these a clearfix (.container:after { clear: both } etc.), so a floated child was CONTAINED: homeapart's section titles are float:left .text-head blocks inside a .container, which in BS3 was 90px tall and kept the yellow band below the title; BS5's container collapsed to 0 and the band rose up behind the heading. .row is left out: it is flex, its floats are already cleared above. */ .container::after, .container-fluid::after, .panel-body::after, .card-body::after { display: table; clear: both; content: ""; } /* table, as BS3: an empty BLOCK lets the last child's bottom margin collapse out (styleway's footer 20px short, a white band under it) */ :where(.container, .container-fluid):not(.navbar > *)::before { display: table; content: ""; } /* BS3's clearfix had a :before too — it stops a first child's top margin collapsing out through the container (styleway: .row.margin-top's 20px pushed the whole dark header down, a white strip above it) */ /* the flex ones (.nav, .navbar, .modal-footer, .btn-toolbar) are left alone: a pseudo would become a flex item */ /* …and below the breakpoint where its only width class applies, a floated column had NO width: it shrink-wrapped its content (the same caption at 768: 450px wide at the right, not the row's full 750). BS5 gives every row child 100%. */ @media (max-width: 991.98px) { .row > .pull-right[class*="col-lg-"]:not([class*="col-md-"]):not([class*="col-sm-"]):not([class*="col-1"]):not([class*="col-2"]):not([class*="col-3"]):not([class*="col-4"]):not([class*="col-5"]):not([class*="col-6"]):not([class*="col-7"]):not([class*="col-8"]):not([class*="col-9"]), .row > .pull-left[class*="col-lg-"]:not([class*="col-md-"]):not([class*="col-sm-"]):not([class*="col-1"]):not([class*="col-2"]):not([class*="col-3"]):not([class*="col-4"]):not([class*="col-5"]):not([class*="col-6"]):not([class*="col-7"]):not([class*="col-8"]):not([class*="col-9"]) { width: auto; max-width: 100%; } } @media (max-width: 767.98px) { .row > .pull-right[class*="col-md-"]:not([class*="col-sm-"]):not([class*="col-1"]):not([class*="col-2"]):not([class*="col-3"]):not([class*="col-4"]):not([class*="col-5"]):not([class*="col-6"]):not([class*="col-7"]):not([class*="col-8"]):not([class*="col-9"]), .row > .pull-left[class*="col-md-"]:not([class*="col-sm-"]):not([class*="col-1"]):not([class*="col-2"]):not([class*="col-3"]):not([class*="col-4"]):not([class*="col-5"]):not([class*="col-6"]):not([class*="col-7"]):not([class*="col-8"]):not([class*="col-9"]) { width: auto; max-width: 100%; } } @media (max-width: 767.98px) { .tv-colhost > label[class*="col-md-"]:not([class*="col-12"]) { width: auto; } } @media (max-width: 991.98px) { .tv-colhost > label[class*="col-lg-"]:not([class*="col-md-"]):not([class*="col-12"]) { width: auto; } } /* below its tier a BS3 label column was an inline-block at its own width, not a 100% block (wrap-d-style register form) */ .row > .tv-colhost:not(.container):not(.container-fluid):not([class*="col-"]):not(.owl-carousel):not([data-owl]) { display: contents; } /* never a carousel root: main.js builds its stage inside it, and with no box of its own every slide (clones too) spilled down the page — barbeard's price.html */ /* a wrapper between the row and its columns: BS3's floats slipped through it and lined up across the row (wrap-d-style's three offer banners, one wrapper each); as its own flex row each wrapper stacked its column. display:contents hands the columns to the row, as the floats did */ .tv-colhost:not(.container):not(.container-fluid):not([class*="col-"]) { padding-left: 0; padding-right: 0; } /* a .container that hosts columns directly keeps its gutter (flowerspetal single-blog: container > col-md-9); so does a COLUMN hosting columns — its gutter comes from the (0,1,0) column rule below, so v1's own padding on it still wins (styleway's header .bookings { padding: 36px 0 0 }) */ .tv-colhost.panel-body, .tv-colhost.card-body, .tv-colhost.well, .tv-colhost.panel-footer, .tv-colhost.card-footer { padding-left: 15px; padding-right: 15px; } /* a padded box that hosts columns keeps its padding (after the reset above) */ :where(.tv-colhost) > :where([class*="col-"]) { width: 100%; } /* zero specificity: col-lg-6 etc. still win the width */ :where(.tv-colhost) > [class*="col-"], :where(:not(.row):not(.tv-colhost)) > :is([class*="col-xs-"], [class*="col-sm-"], [class*="col-md-"], [class*="col-lg-"], [class*="col-xl-"], [class*="col-xxl-"], [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"]) { position: relative; flex-shrink: 0; max-width: 100%; padding-left: 15px; padding-right: 15px; } /* the second: a LONE column (no .row, no host — behumanity's donate message: .donation_field > .col-md-12 > textarea) — BS3 gave every .col-* its 15px gutter, BS5 only inside .row */ /* (0,1,0) — exactly BS3's own .col-* gutter rule: beats a "* { padding: 0 }" reset, loses to any template rule on the column (wrap-d-style's ".x > div > div { padding: 5px }" was losing at (0,2,0)) */ :where(.tv-colhost) > :where(:not([class*="col-"])) { width: 100%; } /* Components BS5 dropped or restyled. */ .form-group { margin-bottom: 15px; } .form-control { height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555; border: 1px solid #ccc; border-radius: 4px; box-shadow: inset 0 1px 1px rgba(0,0,0,.075); } textarea.form-control { height: auto; } .form-control::placeholder { color: #999; opacity: 1; } /* BS3's placeholder grey; BS5's is rgba(33,37,41,.75), which vanished on arenanion's maroon footer newsletter field */ /* BS3's carousel arrows: .carousel-control.left { left: 0 } / .carousel-control.right { right: 0; left: auto } at (0,2,0) — a template's own .carousel-control { left: 20px } (homeapart) applied to BOTH, and BS3's .right rule put the next arrow back on the right. BS5's .carousel-control-next { right: 0 } never says left: auto, so both arrows stacked on the left. */ .carousel-control.right, .carousel-control-next.right { left: auto; right: 0; } .img-responsive { display: block; max-width: 100%; height: auto; } /* BS3 .img-responsive was a BLOCK; BS5's .img-fluid stays inline, so v1's "margin: auto" centring went to 0 (styleway's product cards: image flush left, card 120px short) */ .carousel-control { font-size: 20px; } /* BS3 sized the arrow glyphs (and the sr text) at 20px; BS5 inherits 14px (styleway's Previous/Next) */ .carousel-caption { z-index: 10; bottom: 20px; padding-top: 20px; padding-bottom: 20px; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); } @media (min-width: 768px) { .carousel-caption { left: 20%; right: 20%; padding-bottom: 30px; } } /* BS3: 20px bottom + 20px paddings (BS5 1.25rem = 12.5px on a 10px root — sojournion's hero sat 7px high), 20% side insets from 768 (BS5 keeps 15% — behumanity's caption 504px wide vs v1's 432), a stacking level and the text shadow */ .carousel-indicators:has(> li) { display: block; position: absolute; bottom: 10px; left: 50%; right: auto; z-index: 15; width: 60%; padding-left: 0; margin: 0 0 10px -30%; text-align: center; list-style: none; } /* BS3 indicators were
  1. ; BS5 styles only button[data-bs-target], so v1's list rendered as "1. 2. 3." under the hero (behumanity) */ .carousel-indicators > li, .carousel-indicators li[data-bs-target] { display: inline-block; width: 10px; height: 10px; margin: 1px; text-indent: -999px; cursor: pointer; background-color: transparent; border: 1px solid #fff; border-radius: 10px; opacity: 1; box-sizing: border-box; flex: none; transition: none; } /* (0,2,1): BS5's .carousel-indicators [data-bs-target] (0,2,0) sets a 10px transparent top/bottom border and 3px height */ .carousel-indicators > li.active, .carousel-indicators li[data-bs-target].active { width: 12px; height: 12px; margin: 0; background-color: #fff; opacity: 1; } i.fas[class*="fa-"], i.fa-solid[class*="fa-"], span.fas[class*="fa-"] { font-weight: 900; } i.far[class*="fa-"], i.fa-regular[class*="fa-"], i.fab[class*="fa-"], i.fa-brands[class*="fa-"] { font-weight: 400; } /* (0,2,1): Font Awesome 4 ignored font-weight, so v1 CSS like sojournion's .contact-list i { font-weight: 400 } (0,1,1) was harmless; FA6 keys the solid set on weight 900 and drew boxes */ @media (min-width: 768px) { .carousel-indicators:has(> li) { bottom: 20px; } } /* BS3 lifted the dots to 20px from 768 up (sojournion's sat 10px low on tablet and desktop) */ .carousel-inner > .item > img, .carousel-inner > .item > a > img, .carousel-inner > .carousel-item > img, .carousel-inner > .carousel-item > a > img { display: block; max-width: 100%; height: auto; line-height: 1; } /* BS3 scaled a slide image with the viewport even when it carried height="550" (behumanity: v1 hero 370px tall at 768 and 188px at 390, v2 stayed 550px) */ .btn { font-size: 14px; line-height: 1.42857143; padding: 6px 12px; border-radius: 4px; color: inherit; white-space: nowrap; } /* nowrap: BS3's .btn never wrapped (holivilla's "Starting at $99.00" broke onto 2-3 lines). BS3's .btn set NO colour — a bare .btn took its parent's (homeapart: a{color:inherit} on a black hero = white text); BS5 paints body colour over it. The variants below restate BS3's own colours */ .btn:hover, .btn:focus { color: inherit; } /* BS5 repaints the colour on hover/focus at (0,2,0); a template's own .x:hover rule still wins, it loads later */ .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-primary:hover, .btn-success:hover, .btn-info:hover, .btn-warning:hover, .btn-danger:hover, .btn-primary:focus, .btn-success:focus, .btn-info:focus, .btn-warning:focus, .btn-danger:focus { color: #fff; } .progress { height: 20px; margin-bottom: 20px; background-color: #f5f5f5; border-radius: 4px; box-shadow: inset 0 1px 2px rgba(0,0,0,.1); } .progress-bar { background-color: #337ab7; font-size: 12px; line-height: 20px; } .media { display: flex; align-items: flex-start; margin-top: 15px; } .media:first-child { margin-top: 0; } .media-body { flex: 1; } .media-left, .media > .float-start { padding-right: 10px; } .media-heading { margin-top: 0; margin-bottom: 5px; } .pagination { display: inline-block; padding-left: 0; margin: 20px 0; border-radius: 4px; } .pagination > li { display: inline; } .pagination > li > a { position: relative; float: left; padding: 6px 12px; margin-left: -1px; line-height: 1.42857143; background-color: #fff; border: 1px solid #ddd; } .pagination > li:first-child > a { margin-left: 0; border-radius: 4px 0 0 4px; } .pagination > li:last-child > a { border-radius: 0 4px 4px 0; } .breadcrumb { padding: 8px 15px; margin-bottom: 20px; list-style: none; background-color: #f5f5f5; border-radius: 4px; } .breadcrumb > li { display: inline-block; } .breadcrumb > li + li::before { content: "/\00a0"; padding: 0 5px; color: #ccc; } .breadcrumb > .active { color: #777; } .list-inline { padding-left: 0; margin-left: -5px; list-style: none; } .list-inline > li { display: inline-block; padding-left: 5px; padding-right: 5px; } /* BS3 responsive utilities, verbatim: hidden-* only hides (the element keeps its own display elsewhere); visible-* forces block/inline/inline-block in its tier and hides everywhere else */ .visible-xs, .visible-sm, .visible-md, .visible-lg, .visible-xs-block, .visible-xs-inline, .visible-xs-inline-block, .visible-sm-block, .visible-sm-inline, .visible-sm-inline-block, .visible-md-block, .visible-md-inline, .visible-md-inline-block, .visible-lg-block, .visible-lg-inline, .visible-lg-inline-block { display: none !important; } @media (max-width: 767px) { .visible-xs, .visible-xs-block { display: block !important; } .visible-xs-inline { display: inline !important; } .visible-xs-inline-block { display: inline-block !important; } table.visible-xs { display: table !important; } tr.visible-xs { display: table-row !important; } th.visible-xs, td.visible-xs { display: table-cell !important; } .hidden-xs { display: none !important; } } @media (min-width: 768px) and (max-width: 991px) { .visible-sm, .visible-sm-block { display: block !important; } .visible-sm-inline { display: inline !important; } .visible-sm-inline-block { display: inline-block !important; } table.visible-sm { display: table !important; } tr.visible-sm { display: table-row !important; } th.visible-sm, td.visible-sm { display: table-cell !important; } .hidden-sm { display: none !important; } } @media (min-width: 992px) and (max-width: 1199px) { .visible-md, .visible-md-block { display: block !important; } .visible-md-inline { display: inline !important; } .visible-md-inline-block { display: inline-block !important; } table.visible-md { display: table !important; } tr.visible-md { display: table-row !important; } th.visible-md, td.visible-md { display: table-cell !important; } .hidden-md { display: none !important; } } @media (min-width: 1200px) { .visible-lg, .visible-lg-block { display: block !important; } .visible-lg-inline { display: inline !important; } .visible-lg-inline-block { display: inline-block !important; } table.visible-lg { display: table !important; } tr.visible-lg { display: table-row !important; } th.visible-lg, td.visible-lg { display: table-cell !important; } .hidden-lg { display: none !important; } } /* BS3 push/pull, exactly as BS3 drew them (position:relative + left), at BS3's own breakpoints — the class names stay as v1 wrote them (wrap-d-style's home swaps two halves with col-md-push-6 / col-md-pull-6) */ .col-xs-push-1 { position: relative; left: 8.333333%; } .col-xs-pull-1 { position: relative; left: -8.333333%; } .col-xs-push-2 { position: relative; left: 16.666667%; } .col-xs-pull-2 { position: relative; left: -16.666667%; } .col-xs-push-3 { position: relative; left: 25%; } .col-xs-pull-3 { position: relative; left: -25%; } .col-xs-push-4 { position: relative; left: 33.333333%; } .col-xs-pull-4 { position: relative; left: -33.333333%; } .col-xs-push-5 { position: relative; left: 41.666667%; } .col-xs-pull-5 { position: relative; left: -41.666667%; } .col-xs-push-6 { position: relative; left: 50%; } .col-xs-pull-6 { position: relative; left: -50%; } .col-xs-push-7 { position: relative; left: 58.333333%; } .col-xs-pull-7 { position: relative; left: -58.333333%; } .col-xs-push-8 { position: relative; left: 66.666667%; } .col-xs-pull-8 { position: relative; left: -66.666667%; } .col-xs-push-9 { position: relative; left: 75%; } .col-xs-pull-9 { position: relative; left: -75%; } .col-xs-push-10 { position: relative; left: 83.333333%; } .col-xs-pull-10 { position: relative; left: -83.333333%; } .col-xs-push-11 { position: relative; left: 91.666667%; } .col-xs-pull-11 { position: relative; left: -91.666667%; } .col-xs-push-0, .col-xs-pull-0 { left: auto; } @media (min-width: 768px) { .col-sm-push-1 { position: relative; left: 8.333333%; } .col-sm-pull-1 { position: relative; left: -8.333333%; } .col-sm-push-2 { position: relative; left: 16.666667%; } .col-sm-pull-2 { position: relative; left: -16.666667%; } .col-sm-push-3 { position: relative; left: 25%; } .col-sm-pull-3 { position: relative; left: -25%; } .col-sm-push-4 { position: relative; left: 33.333333%; } .col-sm-pull-4 { position: relative; left: -33.333333%; } .col-sm-push-5 { position: relative; left: 41.666667%; } .col-sm-pull-5 { position: relative; left: -41.666667%; } .col-sm-push-6 { position: relative; left: 50%; } .col-sm-pull-6 { position: relative; left: -50%; } .col-sm-push-7 { position: relative; left: 58.333333%; } .col-sm-pull-7 { position: relative; left: -58.333333%; } .col-sm-push-8 { position: relative; left: 66.666667%; } .col-sm-pull-8 { position: relative; left: -66.666667%; } .col-sm-push-9 { position: relative; left: 75%; } .col-sm-pull-9 { position: relative; left: -75%; } .col-sm-push-10 { position: relative; left: 83.333333%; } .col-sm-pull-10 { position: relative; left: -83.333333%; } .col-sm-push-11 { position: relative; left: 91.666667%; } .col-sm-pull-11 { position: relative; left: -91.666667%; } .col-sm-push-0, .col-sm-pull-0 { left: auto; } } @media (min-width: 992px) { .col-md-push-1 { position: relative; left: 8.333333%; } .col-md-pull-1 { position: relative; left: -8.333333%; } .col-md-push-2 { position: relative; left: 16.666667%; } .col-md-pull-2 { position: relative; left: -16.666667%; } .col-md-push-3 { position: relative; left: 25%; } .col-md-pull-3 { position: relative; left: -25%; } .col-md-push-4 { position: relative; left: 33.333333%; } .col-md-pull-4 { position: relative; left: -33.333333%; } .col-md-push-5 { position: relative; left: 41.666667%; } .col-md-pull-5 { position: relative; left: -41.666667%; } .col-md-push-6 { position: relative; left: 50%; } .col-md-pull-6 { position: relative; left: -50%; } .col-md-push-7 { position: relative; left: 58.333333%; } .col-md-pull-7 { position: relative; left: -58.333333%; } .col-md-push-8 { position: relative; left: 66.666667%; } .col-md-pull-8 { position: relative; left: -66.666667%; } .col-md-push-9 { position: relative; left: 75%; } .col-md-pull-9 { position: relative; left: -75%; } .col-md-push-10 { position: relative; left: 83.333333%; } .col-md-pull-10 { position: relative; left: -83.333333%; } .col-md-push-11 { position: relative; left: 91.666667%; } .col-md-pull-11 { position: relative; left: -91.666667%; } .col-md-push-0, .col-md-pull-0 { left: auto; } } @media (min-width: 1200px) { .col-lg-push-1 { position: relative; left: 8.333333%; } .col-lg-pull-1 { position: relative; left: -8.333333%; } .col-lg-push-2 { position: relative; left: 16.666667%; } .col-lg-pull-2 { position: relative; left: -16.666667%; } .col-lg-push-3 { position: relative; left: 25%; } .col-lg-pull-3 { position: relative; left: -25%; } .col-lg-push-4 { position: relative; left: 33.333333%; } .col-lg-pull-4 { position: relative; left: -33.333333%; } .col-lg-push-5 { position: relative; left: 41.666667%; } .col-lg-pull-5 { position: relative; left: -41.666667%; } .col-lg-push-6 { position: relative; left: 50%; } .col-lg-pull-6 { position: relative; left: -50%; } .col-lg-push-7 { position: relative; left: 58.333333%; } .col-lg-pull-7 { position: relative; left: -58.333333%; } .col-lg-push-8 { position: relative; left: 66.666667%; } .col-lg-pull-8 { position: relative; left: -66.666667%; } .col-lg-push-9 { position: relative; left: 75%; } .col-lg-pull-9 { position: relative; left: -75%; } .col-lg-push-10 { position: relative; left: 83.333333%; } .col-lg-pull-10 { position: relative; left: -83.333333%; } .col-lg-push-11 { position: relative; left: 91.666667%; } .col-lg-pull-11 { position: relative; left: -91.666667%; } .col-lg-push-0, .col-lg-pull-0 { left: auto; } } .owl-dots .owl-dot, .owl-nav button { background: transparent; border: 0; padding: 0; font: inherit; } h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-size: 65%; font-weight: 400; line-height: 1; color: #777; } .checkbox, .radio { position: relative; display: block; margin-top: 10px; margin-bottom: 10px; } .checkbox label, .radio label { min-height: 20px; padding-left: 20px; margin-bottom: 0; font-weight: 400; cursor: pointer; } .checkbox input[type="checkbox"], .radio input[type="radio"] { position: absolute; margin-left: -20px; margin-top: 4px; } .checkbox-inline, .radio-inline { position: relative; display: inline-block; padding-left: 20px; margin-bottom: 0; font-weight: 400; vertical-align: middle; cursor: pointer; } .checkbox-inline input[type="checkbox"], .radio-inline input[type="radio"] { position: absolute; margin-left: -20px; margin-top: 4px; } .checkbox-inline + .checkbox-inline, .radio-inline + .radio-inline { margin-top: 0; margin-left: 10px; } .table { --bs-table-bg: transparent; margin-bottom: 20px; } .table > :not(caption) > * > * { padding: 8px; line-height: 1.42857143; vertical-align: top; border-top: 1px solid #ddd; border-bottom: 0; color: inherit; } /* color: BS3 cells inherited; BS5 paints each cell, so v1's white header row (colour on the ) went black on charcoal (styleway's cart) */ .table > thead:first-child > tr:first-child > th, .table > thead:first-child > tr:first-child > td { border-top: 0; } /* BS3 */ .table > thead > tr > th { vertical-align: bottom; border-bottom: 2px solid #ddd; } .btn-lg { padding: 10px 16px; font-size: 18px; line-height: 1.3333333; border-radius: 6px; } .btn-sm, .btn-group-sm > .btn { padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px; } .btn-xs, .btn-group-xs > .btn { padding: 1px 5px; font-size: 12px; line-height: 1.5; border-radius: 3px; } /* map.mjs turns btn-xs into "btn-sm btn-xs"; BS3's extra-small size must win over the .btn-sm above (foodeque's buttons page) */ .btn-link { text-decoration: none; background-color: transparent; border-color: transparent; border-radius: 0; font-weight: 400; } /* BS3 set these on .btn-link itself; BS5 only through .btn — a bare "btn-link dropdown-toggle" (wrap-d-style's language/currency) showed the UA's grey button face */ .btn-link:hover, .btn-link:focus { text-decoration: underline; } /* BS3: plain, underlined only on hover (BS5 underlines always) */ .input-group { flex-wrap: nowrap; } /* BS3 input groups were a table: one line, always (BS5 wraps — wrap-d-style's search button dropped under its field) */ .input-group > .input-group-addon, .input-group > .input-group-btn { flex: 0 0 auto; width: auto; display: flex; } /* as a flex item inside BS5 input-group the 1% table width shrank it to a sliver */ .input-group-addon { display: table-cell; width: 1%; padding: 6px 12px; font-size: 14px; font-weight: 400; line-height: 1; color: #555; text-align: center; white-space: nowrap; vertical-align: middle; background-color: #eee; border: 1px solid #ccc; border-radius: 4px; } .input-group-addon:first-child { border-right: 0; } .input-group-addon:last-child { border-left: 0; } .input-group-sm > .input-group-addon { padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px; } .input-group-lg > .input-group-addon { padding: 10px 16px; font-size: 18px; line-height: 1.3333333; border-radius: 6px; } /* BS3 addon (BS5 has none) */ .form-horizontal .form-group { margin-left: -15px; margin-right: -15px; } @media (min-width: 768px) { .form-horizontal .control-label { padding-top: 7px; margin-bottom: 0; text-align: right; } } .form-horizontal .radio, .form-horizontal .checkbox { min-height: 27px; } .form-horizontal .radio, .form-horizontal .checkbox, .form-horizontal .radio-inline, .form-horizontal .checkbox-inline { padding-top: 7px; margin-top: 0; margin-bottom: 0; } /* BS3: the inline choices sit level with the control-label (styleway register's Yes/No) */ /* BS3 horizontal forms: the group is the row, the label column right-aligned */ /* BS3 panels + list groups (v1 tokens kept beside card/card-*): the pieces BS5 draws differently */ .card.panel, .card-body.panel-body, .card-header.panel-heading, .card-footer.panel-footer, .card.well { color: inherit; } /* a BS3 panel / well inherited the body colour; BS5's .card paints its own (wrap-d-style's grey form labels went near-black inside the cart panels) */ .panel { margin-bottom: 20px; background-color: #fff; border: 1px solid transparent; border-radius: 4px; box-shadow: 0 1px 1px rgba(0, 0, 0, .05); } .panel-default { border-color: #ddd; } .panel-default > .panel-heading { color: #333; background-color: #f5f5f5; border-color: #ddd; } .panel-heading { padding: 10px 15px; border-bottom: 1px solid transparent; border-radius: 3px 3px 0 0; } .panel-body { padding: 15px; } .panel-title { margin: 0; font-size: 16px; color: inherit; } .panel-title > a { color: inherit; } .panel-group .panel { margin-bottom: 0; border-radius: 4px; } .panel-group .panel + .panel { margin-top: 5px; } .panel-group .panel-heading + .panel-collapse > .panel-body { border-top: 1px solid #ddd; } .list-group-item { position: relative; display: block; padding: 10px 15px; margin-bottom: -1px; background-color: #fff; border: 1px solid #ddd; } a.list-group-item, button.list-group-item { color: #555; } a.list-group-item:hover, a.list-group-item:focus { color: #555; text-decoration: none; background-color: #f5f5f5; } .list-group-item.active, .list-group-item.active:hover { color: #fff; background-color: #337ab7; border-color: #337ab7; } /* BS3 .nav / .nav-tabs / .nav-pills: block list items with 10px 15px links (BS5 styles .nav-link only, which BS3 markup never carries — wrap-d-style's product tabs lost their padding, border and active state) */ .nav { padding-left: 0; margin-bottom: 0; list-style: none; } .nav > li { position: relative; display: block; } .nav > li > a { position: relative; display: block; padding: 10px 15px; } .nav > li > a:hover, .nav > li > a:focus { text-decoration: none; background-color: #eee; } .nav-justified { display: block; width: 100%; flex: 1 1 auto; } .nav-justified > li { float: none; } .nav-justified > li > a { text-align: center; margin-bottom: 5px; } @media (min-width: 768px) { .nav-justified > li { display: table-cell; width: 1%; } .nav-justified > li > a { margin-bottom: 0; } } /* BS3: centred links, and from 768 every li a table-cell of equal width (flex: 1 1 0 is the same spread in BS5's flex .nav). BS5's .nav-justified keys on .nav-item, which a v1 li never carries (behumanity's menu: 166px v1 cells vs 89px auto) */ .nav-tabs { border-bottom: 1px solid #ddd; } .nav-tabs > li { float: left; margin-bottom: -1px; } .nav-tabs > li > a { margin-right: 2px; line-height: 1.42857143; border: 1px solid transparent; border-radius: 4px 4px 0 0; } .nav-tabs > li > a:hover { border-color: #eee #eee #ddd; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { color: #555; cursor: default; background-color: #fff; border: 1px solid #ddd; border-bottom-color: transparent; } .nav-pills > li { float: left; } .nav-pills > li > a { border-radius: 4px; } .nav-pills > li + li { margin-left: 2px; } .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus { color: #fff; background-color: #337ab7; } .nav-stacked > li { float: none; } .nav-stacked > li + li { margin-top: 2px; margin-left: 0; } .thumbnail { display: block; padding: 4px; margin-bottom: 20px; line-height: 1.42857143; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; transition: border .2s ease-in-out; } .thumbnail > img, .thumbnail a > img { display: block; max-width: 100%; height: auto; margin-left: auto; margin-right: auto; } a.thumbnail:hover, a.thumbnail:focus, a.thumbnail.active { border-color: #337ab7; } .thumbnail .caption { padding: 9px; color: #333; } /* BS3 .thumbnail: the image inside is capped to the box (wrap-d-style's photo thumbs ran at natural size without it) */ .input-group-btn { position: relative; display: table-cell; width: 1%; white-space: nowrap; vertical-align: middle; font-size: 0; } .input-group-btn > .btn { position: relative; } .input-group-btn:last-child > .btn { margin-left: -1px; } /* BS3: a button cell beside its field even when a wrapper div sits between them (wrap-d-style's #searchbox) */ .input-group .form-control { position: relative; z-index: 2; float: left; width: 100%; margin-bottom: 0; } /* BS3 floated the field; an absolutely placed button beside it (wrap-d-style's search) then sits on the same line */ .navbar-collapse { padding-left: 15px; padding-right: 15px; } .navbar > .container .navbar-collapse, .navbar > .container-fluid .navbar-collapse { margin-left: -15px; margin-right: -15px; } /* BS3 */ @media (min-width: 768px) { .navbar > .container .navbar-collapse, .navbar > .container-fluid .navbar-collapse { margin-left: 0; margin-right: 0; } .navbar-fixed-top .navbar-collapse, .navbar.fixed-top .navbar-collapse, .navbar-static-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse, .navbar.fixed-bottom .navbar-collapse { padding-left: 0; padding-right: 0; } } /* BS3: no collapse padding inside a fixed/static navbar once un-collapsed (behumanity: menu 15px in from v1's) */ /* BS3 reset the bleed once the bar un-collapsed (homeapart: menu 15px left of v1) */ .btn-group-lg > .btn { padding: 10px 16px; font-size: 18px; line-height: 1.3333333; border-radius: 6px; } .btn-group > .btn:not(:first-child) { margin-left: -1px; } .table-bordered, .table-bordered > :not(caption) > * > * { border: 1px solid #ddd; } .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: #f9f9f9; --bs-table-accent-bg: transparent; } .btn-secondary { color: #333; background-color: #fff; border-color: #ccc; } /* BS3 .btn-default (port maps it here) */ .btn-secondary:hover, .btn-secondary:focus { color: #333; background-color: #e6e6e6; border-color: #adadad; } /* BS3 .close (BS5 dropped it for .btn-close): a v1 "button.close" got the UA button's padding + 2px border, so a template's 28x28 close square pushed its × off-centre (holivilla's video popup, owner note) */ .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; } button.close { -webkit-appearance: none; appearance: none; padding: 0; cursor: pointer; background: transparent; border: 0; } /* BS3 selects: a "select.form-control" kept the browser's arrow (BS5's .form-control sets appearance:none — no arrow at all), and a multiple/size select grew to its rows (BS5 fixed it to one control height) — holivilla form-fields.html */ select.form-control:not(.form-select):not([multiple]):not([size]) { -webkit-appearance: menulist; appearance: auto; } /* not .form-select: BS5 draws its own chevron there — both showed (holivilla QA) */ .panel-group { margin-bottom: 20px; } /* BS3 .panel-group spacing — a heading after an accordion touched its last panel (holivilla accordions.html) */ select[multiple].form-control, select[size].form-control { height: auto; } /* BS3 .modal-dialog: 600px from 768 (900 .modal-lg / 300 .modal-sm from 992); BS5's max-width:500px also capped a template's own width */ @media (min-width: 576px) { .modal-dialog { max-width: none; margin: 10px; } } @media (min-width: 768px) { .modal-dialog { width: 600px; margin: 30px auto; } .modal-sm { width: 300px; } } @media (min-width: 992px) { .modal-lg { width: 900px; } } .btn-primary { background-color: #337ab7; border-color: #2e6da4; } .btn-primary:hover { background-color: #286090; border-color: #204d74; } .btn-success { background-color: #5cb85c; border-color: #4cae4c; } .btn-info { background-color: #5bc0de; border-color: #46b8da; } .btn-warning { color: #fff; background-color: #f0ad4e; border-color: #eea236; } .btn-danger { background-color: #d9534f; border-color: #d43f3a; } /* Bootstrap 3's stock navbar (.navbar-default): the light grey bar with a #e7e7e7 border and #777 links that many templates never restyled. */ .navbar { min-height: 50px; margin-bottom: 20px; border: 1px solid transparent; padding-top: 0; padding-bottom: 0; } /* BS5 added .5rem top/bottom padding to .navbar itself; BS3 never had any — all of it came from .navbar-header/.container */ @media (min-width: 768px) { .navbar { border-radius: 4px; } } .navbar-fixed-top, .navbar-fixed-bottom { border-radius: 0; } /* BS3 zeroed the corner radius back out on an edge-to-edge navbar; BS5 dropped both classes (and the rule with them) */ .navbar-fixed-top, .navbar.fixed-top { border-width: 0 0 1px; } .navbar-fixed-bottom, .navbar.fixed-bottom { border-width: 1px 0 0; } /* BS3 kept only the edge that faces the page on a fixed navbar (behumanity: 1px top border and a 373px container at 375) */ .navbar-default { background-color: #f8f8f8; border-color: #e7e7e7; } .navbar > .container, .navbar > .container-fluid { padding-left: 15px; padding-right: 15px; flex-wrap: wrap; } /* BS5 strips the gutter inside a collapsed navbar; a .row in there then overflows 15px */ .navbar > .container > .row, .navbar > .container-fluid > .row { flex: 1 1 auto; width: calc(100% + var(--bs-gutter-x)); } /* width: the row keeps BS3's -15px margins, so 100% left it 30px short of BS3's row (arenanion: every nav column 5px narrower, 1140 vs 1170) */ /* a v1 navbar built the old way — .container > .row > .col-md-4/.col-md-8 instead of .navbar-header/.navbar-collapse — sits a block-level BS3 .row inside BS5's own flex .container (justify-content:space-between); as a flex ITEM with no width the row shrinks to its content instead of filling it, so every column's percentage is now off a smaller number */ .navbar-brand { height: 50px; padding: 15px; font-size: 18px; line-height: 20px; margin-right: 0; } /* margin-right: BS5 adds 1rem that BS3 never had — barbeard's logo + menu came to 734px in a 720px container at 768 and the menu wrapped to a second line. BS3 pinned the brand box to 50px (sojournion: padding 0 + line-height 34 gave a 34px box, 12px too low). BS5's own .navbar-brand: 5px top/bottom padding only, no left/right, no line-height pin — a template that never restyled the brand (or a wrapper div around the logo) sees a shorter navbar and a tighter click target */ .navbar-default .navbar-brand { color: #777; } @media (min-width: 768px) { .navbar-right { margin-right: -15px; } } /* BS3: a right-floated menu ends flush with the container edge, not its padding (sojournion's links sat 15px left of v1) */ /* BS3's expanded .navbar-collapse was a full-width block UNDER the floated header, so its left padding hid behind the logo and the menu had the whole row minus the logo. As a flex item beside the header it needs its padding back and may shrink — barbeard at 768: logo 129 + menu 589 fit v1's 720px row, but + 15px padding the collapse wrapped to a second line (navbar 113px tall, v1 71) */ @media (min-width: 768px) { .navbar-expand-md > .container > .navbar-collapse, .navbar-expand-md > .container-fluid > .navbar-collapse { flex: 1 1 0; min-width: 0; padding-left: 0; } } @media (min-width: 992px) { .navbar-expand-lg > .container > .navbar-collapse, .navbar-expand-lg > .container-fluid > .navbar-collapse { flex: 1 1 0; min-width: 0; padding-left: 0; } } /* selectors written EXACTLY as Bootstrap 3 wrote them (element a, not .nav-link): the template's own ".navbar-default .navbar-nav > li > a" must beat these by source order, and a class token here would out-rank it */ .navbar-default .navbar-nav > li > a { color: #777; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #333; background-color: transparent; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .show > a { color: #555; background-color: #e7e7e7; } /* BS3 3.3: the current page's (and an open dropdown's) link sits on #e7e7e7 — barbeard's "Pages" on price.html; navFor marks the
  2. */ /* BS3's link padding (15px expanded, 10px 15px collapsed) through BS5's OWN variables, never a padding rule: a (0,3,0) "padding: 15px" here beat v1's ".navbar-default .navbar-nav > li > a" (0,2,2) on all four sides — barbeard's 30px 14px 8px links came out 15px all round, the navbar 8px short. Top/bottom now resolve at BS5's .nav-link (0,1,0), so any v1 rule wins; left/right still come from BS5's own (0,3,0) expand rule, which no default can undercut — restate v1's side padding in the template's shim when it differs from 15px. */ .navbar .navbar-nav { --bs-nav-link-padding-x: 15px; --bs-nav-link-padding-y: 10px; } .navbar { --bs-navbar-nav-link-padding-x: 15px; } @media (min-width: 768px) { .navbar-expand-md .navbar-nav { --bs-nav-link-padding-y: 15px; } } @media (min-width: 992px) { .navbar-expand-lg .navbar-nav { --bs-nav-link-padding-y: 15px; } } .navbar-nav .nav-link { line-height: 20px; } /* (0,2,0): below any v1 "> li > a" rule */ [class*="navbar-expand"]:not(.navbar) { --bs-navbar-nav-link-padding-x: 15px; } [class*="navbar-expand"]:not(.navbar) .navbar-nav { --bs-nav-link-padding-x: 15px; --bs-nav-link-padding-y: 10px; } /* the same variables for a v1 menu with no .navbar class (styleway: