/* =========================================================================================== Hot / Cold palette -- ONE source of truth, shared by the Game Card hot/cold gauge and the Hot/Cold RTP list widget so both read the same way: hot = red, cold = blue. The RTP widget predates the gauge and had borrowed Bootstrap's success/danger (hot = green, cold = red, the usual stock-ticker up/down convention) -- standardized here so a player doesn't see the two features disagree about what colour "hot" is. =========================================================================================== */ :root { --wb-hot-color: #E4362A; --wb-cold-color: #3B82C4; } .flex-1 { flex: 1 1 0%; } .flex-2 { flex: 2 2 0%; } .flex-3 { flex: 3 3 0%; } .flex-auto { flex: 1 1 auto; } .right-0 { right: 0 !important; } .mt-auto { margin-top: auto; } .custom-html-content p { margin-top: .5rem; margin-bottom: .5rem; } .custom-html-content tbody, .custom-html-content tfoot, .custom-html-content tr, .custom-html-content td, .custom-html-content th { border-style: solid; border-width: 1px; } /***** SPLASH *****/ .splash-container { align-items: center; background-color: var(--bs-body-bg); display: flex; height: 100vh; justify-content: center; overscroll-behavior: contain; position: fixed; width: 100vw; z-index: 999999999999999; } .splash-container .splash-logo { animation: heartbeat 1s infinite; height: auto; width: 150px; } /* Loading-screen logo follows the live theme (data-bs-theme on ), like the header logo. Default/light shows the light logo; dark theme swaps to the dark logo. */ .splash-logo-dark { display: none; } [data-bs-theme="dark"] .splash-logo-light { display: none; } [data-bs-theme="dark"] .splash-logo-dark { display: inline-block; } @keyframes heartbeat { 0% {transform: scale(1);} 10% {transform: scale(0.91);} 17% {transform: scale(0.98);} 33% {transform: scale(0.87);} 45% {transform: scale(1);} } /***** END: SPLASH *****/ /***** JACKPOT BOX *****/ .jackpot-box { --bs-card-bg: var(--bs-paper-bg); --bs-card-border-width: 0; --bs-card-border-color: var(--bs-border-color); --bs-card-box-shadow: var(--bs-box-shadow); display:flex; border-radius: 0.75rem; color: var(--bs-body-color); background-color : var(--bs-card-bg); border: var(--bs-card-border-width) solid var(--bs-card-border-color); box-shadow: var(--bs-card-box-shadow); height:149px; padding: 32px 0; flex-direction: column; justify-content: center; align-items: center; gap: 10px; flex-shrink: 0; position: relative; overflow: hidden; } .jackpot-box .title-text { text-align: center; font-size: 1.125rem; font-style: normal; font-weight: 600; line-height: normal; z-index: 1; } .jackpot-box .currency-text { font-size: 24px; font-style: normal; font-weight: 800; line-height: normal; letter-spacing: .96px; } .jackpot-box .amount-text { font-size: 48px; font-style: normal; font-weight: 900; line-height: normal; letter-spacing: 1.92px; } .jackpot-box .accent-title-text { position: absolute; right: -15px; opacity: .05; bottom: 4px; font-size: 100px; font-style: normal; font-weight: 700; line-height: 60px; text-transform: uppercase; } [data-skin=bordered] .jackpot-box { --bs-card-box-shadow: 0px 0px 0px var(--bs-border-width) var(--bs-card-border-color); --bs-card-hover-box-shadow: 0px 0px 0px var(--bs-border-width) var(--bs-card-border-color); } /***** END: JACKPOT *****/ /***** FLEXBOX 2B 4S *****/ .flexbox-catelog { flex: 1 1 0%; border-radius: 0.75rem; color: var(--bs-body-color); } .flexbox2B4S-small { height: 8rem; padding: 0.5rem; } .flexbox2B4S-small .img-icon { top: 5%; left: 50%; height: 70%; transform: translateX(-50%); max-width: 100%; } .flexbox2B4S-small .title-text { display: none; } .flexbox2B4S-small .desc-text { font-size: .875rem; line-height: 1.25rem; bottom: .2rem; display: block; text-align: center; width: 100%; position: absolute; } .flexbox2B4S-big { padding: 1.25rem; height: 16rem; } .flexbox2B4S-big .img-icon { top: 0; right: 0; height: 100%; max-width: 100%; } .flexbox2B4S-big .title-text { display: flex; font-size: 1.5rem; line-height: 2rem; font-weight: 800; margin-left: .125rem; } .flexbox2B4S-big .desc-text { display: none; } /* On Mobile */ @media (max-width: 575.98px) { .flexbox2B4S-small { height: 6rem; } .flexbox2B4S-small .desc-text { font-size: .775rem; line-height: 1.25rem; } .flexbox2B4S-big { height: 8rem; padding: 0.725rem; } .flexbox2B4S-big img { border-top-right-radius: 0.75rem; border-bottom-right-radius: 0.75rem; } .flexbox2B4S-big .title-text { font-size: .875rem; line-height: 1.25rem; } } /* On Desktop */ @media (min-width: 992px) { .flexbox-catelog img { border-top-right-radius: 0.75rem; border-bottom-right-radius: 0.75rem; } .flexbox2B4S-small { min-width: 40%; } .flexbox2B4S-small .img-icon { top: 0; right: 0; height: 100%; left: unset; transform: unset; } .flexbox2B4S-small.img-icon { min-width: 40%; } .flexbox2B4S-small .title-text { display: flex; font-size: 1.125rem; line-height: 1.75rem; font-weight: 800; margin-left: .25rem; } .flexbox2B4S-small .desc-text { display: none; } .flexbox2B4S-big { padding: 1.25rem; height: unset; } .flexbox2B4S-big .title-text { display: flex; font-size: 1.5rem; line-height: 2rem; font-weight: 800; margin-left: .125rem; } .flexbox2B4S-big .desc-text { display: block; font-weight: 600; text-align: left; margin-top: auto; margin-bottom: .375rem; max-width: 15rem; } } .flexbox-catelog { --bs-card-bg: var(--bs-paper-bg); --bs-card-border-width: 0; --bs-card-border-color: var(--bs-border-color); --bs-card-box-shadow: var(--bs-box-shadow); background-color : var(--bs-card-bg); border: var(--bs-card-border-width) solid var(--bs-card-border-color); box-shadow: var(--bs-card-box-shadow); } [data-skin=bordered] .flexbox-catelog { --bs-card-box-shadow: 0px 0px 0px var(--bs-border-width) var(--bs-card-border-color); --bs-card-hover-box-shadow: 0px 0px 0px var(--bs-border-width) var(--bs-card-border-color); } /***** END: FLEXBOX 2B 4S *****/ /***** RTP LIST *****/ .rtp-list { display: flex; flex-direction: column; gap: 1rem; } .rtp-list-item { display: flex; flex-direction: row; align-items: center; padding: 0.5rem; } .rtp-list-item .icon { height: 48px; width: 48px; min-width: 48px; overflow: hidden; border: 2px solid transparent; } .rtp-list-item .indicator { right: 8px; top: 8px; position: absolute; } .rtp-list-item .text-content { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .rtp-list-item .text-content span { width: 100%; overflow: inherit; text-overflow: inherit; } /* Hot/cold colour for this widget's grid layout -- dedicated classes rather than Bootstrap's border-success/text-bg-success/text-success (green) and border-danger/text-bg-danger/ text-danger (red) utilities the JS used to apply directly. Those utility classes are tied to --bs-success/--bs-danger, which mean actual success/error state everywhere else on the site (form validation, deposit status, banners) -- repurposing them for "hot" would have been a false semantic reuse, not just the wrong colour. Pulls from the shared --wb-hot-color/ --wb-cold-color tokens defined at the top of this file, same as the Game Card gauge. */ .wb-hc-hot { border-color: var(--wb-hot-color) !important; } .wb-hc-cold { border-color: var(--wb-cold-color) !important; } .wb-hc-badge.hot { background-color: var(--wb-hot-color) !important; } .wb-hc-badge.cold { background-color: var(--wb-cold-color) !important; } .wb-hc-spin.hot { color: var(--wb-hot-color) !important; } .wb-hc-spin.cold { color: var(--wb-cold-color) !important; } /***** END: RTP LIST *****/ /* * MISCELLANEOUS ******************************************************************************/ .menu-icon { font-size: 1.0rem !important; } .misc-wrapper { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; text-align: center; } .dropdown-phone-prefix { overflow-y:auto; max-height:30vh; max-width:20em; } .badge-user { display: inline-flex !important; justify-content: center !important; align-items: center !important; padding: 0.25rem !important; height: 1.25rem !important; font-size: 0.725rem !important; } .badge-user i { font-size: 0.725rem; block-size: 0.725rem; } .game-icon-image-wrapper { position: relative; width: 100%; /* Tile shape comes from the brand's chosen icon set, injected on as --wb-game-icon-ratio. One line covers every grid that uses this frame; the fallback keeps every existing brand square when nothing is set, which is what they all are today. */ aspect-ratio: var(--wb-game-icon-ratio, 1); overflow: hidden; display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center; background-color: rgba(127, 127, 127, .12); /* fallback fill when no blurhash is available yet */ } /* Small avatars stay square whatever the site's tile ratio is. A 26-30px chip in a bet list or a ticker has no business being 3:4 -- it is an identifying thumbnail, not artwork -- and those boxes are hard-sized in pixels, so a tall ratio would squash the image rather than reshape the box. A deliberate exception, not an oversight. */ .game-icon-image-wrapper.wb-tile-square { aspect-ratio: 1; } /* When the game tile sits flush at the top of a .card (the card uses p-0, so the wrapper reaches the card edge), the wrapper's square top corners cover the card's rounded top -- while the card body's transparent bottom lets the card's rounded bottom show through. That asymmetry (rounded bottom, square top) is fixed by matching the card's inner radius here. The wrapper already has overflow:hidden, so the image is clipped to the rounded corners. */ .card > a > .game-icon-image-wrapper, .card > .game-icon-image-wrapper { border-top-left-radius: var(--bs-card-inner-border-radius); border-top-right-radius: var(--bs-card-inner-border-radius); } /* When the tile is the whole card (no .card-body below it -- recentlyPlayedT1, and the dense variants of carouselGamesT2 / gameCategoryTabsT1) round the bottom too, otherwise the square bottom would cover the card's rounded bottom -- the same problem, just flipped. */ .card > a:last-child > .game-icon-image-wrapper, .card > .game-icon-image-wrapper:last-child { border-bottom-left-radius: var(--bs-card-inner-border-radius); border-bottom-right-radius: var(--bs-card-inner-border-radius); } .game-icon-image-wrapper img { display: block; width: 100%; height: 100%; /* contain, not width:100%/height:auto. Fitting to the WIDTH only works while the frame is never wider than the image is tall: in a 3:4 frame a square icon comes up short and letterboxes nicely, but in a 16:9 frame that same icon is TALLER than the frame and gets its top and bottom cropped off -- which on a game icon means slicing through the logo. `contain` fits inside whichever axis is tighter, so a default square icon letterboxes in every set shape and the blurhash background (see gameIconBg) fills the gap. Still never stretches, and still upscales a small icon to fill the frame the way width:100% did. */ object-fit: contain; } /* Game-icon hover effect (per-brand setting, Common Settings > Game Icon Card > Hover effect). Body carries wb-hover-{effect}; default (no class / "none") = no hover interaction at all. Covers every game-icon tile shape site-wide: the standard grid wrapper (.game-icon-image-wrapper) plus the bento (carouselGamesT3), featured (featuredGameT1) and jackpot (infoJackpotT2) tiles -- all already position:relative + overflow:hidden on their own tile element. Guarded behind (hover: hover) -- a touch device has no real hover, but mobile browsers SIMULATE :hover on the element you tapped and only clear it on the next tap elsewhere. Without this guard a player tapping a game to launch it would see that card left "stuck" mid-zoom/lift/pop, or with the overlay's play icon stuck visible, on top of double interaction (hover animation firing right before the tap's own navigation). (hover: hover) is true only for a real pointing device (mouse/ trackpad); a touch-only phone or tablet gets none of this block, at any screen width. A touch-capable laptop with a mouse attached still gets it, which is correct -- the mouse can hover. */ @media (hover: hover) and (pointer: fine) { body.wb-hover-zoom .game-icon-image-wrapper img, body.wb-hover-zoom .wb-bento-tile img.wb-bento-img, body.wb-hover-zoom .wb-featg-tile img, body.wb-hover-zoom .wb-jp2-tile img { transition: transform .3s ease; } body.wb-hover-zoom .game-icon-image-wrapper:hover img, body.wb-hover-zoom .wb-bento-tile:hover img.wb-bento-img, body.wb-hover-zoom .wb-featg-tile:hover img, body.wb-hover-zoom .wb-jp2-tile:hover img { transform: scale(1.06); } /* Lift + Pop move the WHOLE card (image, name, footer chips together), unlike Zoom/Overlay which stay image-only by request. The standard grid shape (.game-icon-image-wrapper) has real content below the image -- lifting only the image would leave the name/footer sitting still while the art moves away from it, which reads as broken. .wb-bento-tile/.wb-featg-tile/.wb-jp2-tile are already the WHOLE visual unit for their own layouts (the itself, nothing below it) -- kept exactly as before. :has() scopes this to "a .card that contains a game icon wrapper", not the bare .card selector -- .card is used all over the site (login, payment, dashboard) and must stay untouched anywhere this feature doesn't apply. No border-radius/background override here: the card already carries its own via Bootstrap's --bs-card-border-radius (which the style-preset system in style-presets.css swaps per brand -- glass/luxe/brutal/clay), so it stays correct under every preset for free. */ body.wb-hover-lift .card:has(> a > .game-icon-image-wrapper), body.wb-hover-lift .wb-bento-tile, body.wb-hover-lift .wb-featg-tile, body.wb-hover-lift .wb-jp2-tile { transition: transform .25s ease, box-shadow .25s ease; } body.wb-hover-lift .card:has(> a > .game-icon-image-wrapper):hover, body.wb-hover-lift .wb-bento-tile:hover, body.wb-hover-lift .wb-featg-tile:hover, body.wb-hover-lift .wb-jp2-tile:hover { transform: translateY(-5px); box-shadow: 0 10px 24px rgba(0,0,0,.18); } body.wb-hover-pop .card:has(> a > .game-icon-image-wrapper), body.wb-hover-pop .wb-bento-tile, body.wb-hover-pop .wb-featg-tile, body.wb-hover-pop .wb-jp2-tile { transition: transform .25s ease, box-shadow .25s ease; } body.wb-hover-pop .card:has(> a > .game-icon-image-wrapper):hover, body.wb-hover-pop .wb-bento-tile:hover, body.wb-hover-pop .wb-featg-tile:hover, body.wb-hover-pop .wb-jp2-tile:hover { transform: scale(1.09); box-shadow: 0 16px 34px rgba(0,0,0,.32); z-index: 3; position: relative; } body.wb-hover-overlay .game-icon-image-wrapper::after, body.wb-hover-overlay .wb-bento-tile::after, body.wb-hover-overlay .wb-featg-tile::after, body.wb-hover-overlay .wb-jp2-tile::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .25s ease; z-index: 4; pointer-events: none; border-radius: inherit; } body.wb-hover-overlay .game-icon-image-wrapper::before, body.wb-hover-overlay .wb-bento-tile::before, body.wb-hover-overlay .wb-featg-tile::before, body.wb-hover-overlay .wb-jp2-tile::before { content: '\25B6'; position: absolute; top: 50%; left: 50%; transform: translate(-46%, -50%) scale(.8); width: 2.4rem; height: 2.4rem; line-height: 2.4rem; text-align: center; font-size: 1rem; background: rgba(255,255,255,.92); color: #111; border-radius: 50%; opacity: 0; transition: opacity .25s ease, transform .25s ease; z-index: 5; pointer-events: none; } body.wb-hover-overlay .game-icon-image-wrapper:hover::after, body.wb-hover-overlay .wb-bento-tile:hover::after, body.wb-hover-overlay .wb-featg-tile:hover::after, body.wb-hover-overlay .wb-jp2-tile:hover::after { opacity: 1; } body.wb-hover-overlay .game-icon-image-wrapper:hover::before, body.wb-hover-overlay .wb-bento-tile:hover::before, body.wb-hover-overlay .wb-featg-tile:hover::before, body.wb-hover-overlay .wb-jp2-tile:hover::before { opacity: 1; transform: translate(-46%, -50%) scale(1); } } /* @media (hover: hover) and (pointer: fine) */ /* =========================================================================================== Game Card (per-brand setting, Common Settings > Game Card; per-component override available). Markup is produced by gameCard() in js/main.jsp -- these rules and that function are one unit. The model is chips vs strips: * CHIPS (provider logo, Hot/New badge, RTP, player count) go in one of 7 slots -- 4 image corners + footer left/centre/right. * STRIPS (game name, hot/cold gauge) are full-width by nature and take a line of their own. A slot row is a 3-column grid rather than a flex space-between, which is what makes "centre" genuinely centred no matter how wide the left and right groups are, and what makes two chips in one slot compress instead of overlap. Nothing here can produce a broken layout, which is the whole point of placing by slot rather than by free left/centre/right alignment. Sized off the CARD's own width, not the viewport: card width depends on the grid's own column count (an operator can set 8 columns on a wide desktop screen, same as a phone's 2-column grid), which a plain @media (max-width) breakpoint has no way to see -- it only knows the viewport. container-type below turns the card itself into a query container so @container rules further down can react to how narrow THIS card actually rendered, regardless of screen size. Reuses the same :has() scoping the hover effects use, for the same reason -- .card is used everywhere on the site and only the game-card shape should establish this container. */ .card:has(> a > .game-icon-image-wrapper) { container-type: inline-size; container-name: wbgc; } .wb-gc-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .3rem; } .wb-gc-row > .wb-gc-s { display: flex; align-items: center; gap: .3rem; min-width: 0; } /* Align the CONTENT inside a full-width cell, never the cell itself. justify-self would size each cell to its content, and a child with a percentage width (the provider logo below 576px is width:45%) would then resolve that percentage against a box sized by the child -- which collapses or overflows. Cells stay stretched; only their contents move. */ .wb-gc-row > .wb-gc-s.l { justify-content: flex-start; } .wb-gc-row > .wb-gc-s.c { justify-content: center; } .wb-gc-row > .wb-gc-s.r { justify-content: flex-end; } /* The footer row IS a Bootstrap .card-body -- the renderer emits `card-body px-2 py-1 wb-gc-row wb-gc-foot` together, so padding and card flex behaviour are exactly what every game card had before this panel existed. Only `display` is overridden, to the slot grid above; that works because custom.css loads after the theme, and px-2/py-1 keep winning on padding via !important. No rule of its own is needed here -- .wb-gc-foot is left as a hook for the GPA preview to match. */ /* Sizing for elements that live in a slot. The site-wide .game-icon-brand-image rule sizes the logo by PERCENTAGE on mobile, which only ever made sense when it was a direct child of a full-width flex row. In a slot it can land in any of seven places, including a small image corner, so inside a card row it is sized by height like every other chip. */ .wb-gc-row .game-icon-brand-image, .wb-gc-ov .game-icon-brand-image { height: 18px; width: auto; max-width: 100%; object-fit: contain; } /* Image overlay bands. The scrim is on the band itself, so it only appears when the band has something in it -- an empty corner leaves the artwork completely untouched. */ .wb-gc-ov { position: absolute; left: 0; right: 0; z-index: 3; padding: .35rem; display: grid; gap: .25rem; } /* No scrim on the top band: every element that can land there (logo, badge, RTP, count) is a self-contained pill or logo with its own background/contrast, unlike the bottom band which also carries the game NAME -- plain text laid directly on artwork, which does need the scrim to stay readable regardless of what is underneath it. */ .wb-gc-ov.t { top: 0; } .wb-gc-ov.b { bottom: 0; padding-top: 1.1rem; background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0)); } /* pushed up so the bottom chips clear the gauge when the gauge is on the image */ .wb-gc-ov.b.up { bottom: 8px; } .wb-gc-ov .wb-gc-rtp { background: rgba(0,0,0,.5); color: #fff; } .wb-gc-ov .wb-gc-cnt { color: rgba(255,255,255,.94); } /* Elements ------------------------------------------------------------------------------- */ .wb-gc-rtp { font-size: .7rem; font-weight: 600; line-height: 1; white-space: nowrap; padding: .18rem .3rem; border-radius: .25rem; color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .14); font-variant-numeric: tabular-nums; } .wb-gc-cnt { display: inline-flex; align-items: center; gap: .2rem; font-size: .7rem; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; } /* "live dot" count style -- a pulsing dot instead of the icon pill */ .wb-gc-cnt.dot > i { width: 6px; height: 6px; border-radius: 50%; background: var(--bs-success); flex: 0 0 6px; box-shadow: 0 0 0 2px rgba(var(--bs-success-rgb), .25); } .wb-gc-cnt.dot > b { color: var(--bs-success); font-weight: 600; } @media (prefers-reduced-motion: no-preference) { .wb-gc-cnt.dot > i { animation: wbGcPulse 1.8s ease-in-out infinite; } } @keyframes wbGcPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } .wb-gc-badge { display: inline-flex; align-items: center; line-height: 1; white-space: nowrap; font-size: .62rem; font-weight: 700; letter-spacing: .04em; padding: .2rem .35rem; border-radius: .25rem; color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); } .wb-gc-badge.hot { background: var(--bs-danger); } .wb-gc-badge.new { background: var(--bs-success); } /* An operator-uploaded badge, inside a FIXED render box. Without this cap one client uploading an oversized image would wreck every card on their site -- the upload dialog cannot stop them, so the renderer does. */ .wb-gc-badge-img { height: 20px; width: auto; max-width: 64px; object-fit: contain; display: block; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); } /* Strips --------------------------------------------------------------------------------- */ .wb-gc-nm { font-size: .8rem; font-weight: 500; padding: 0 .1rem; margin-top: .2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wb-gc-nm.c { text-align: center; } /* on the image the name sits inside the bottom band's scrim, so it needs no scrim of its own */ .wb-gc-ov .wb-gc-nm { margin-top: 0; color: #fff; font-weight: 700; font-size: .78rem; text-shadow: 0 1px 2px rgba(0,0,0,.45); } /* Cold/hot icons flank the bar in the footer placement (real horizontal room there); the on-image edge strip stays icon-less on purpose -- it is a thin, zero-padding sliver flush to the image's bottom corners, and a plain outline icon dropped straight onto arbitrary game art (no scrim behind it) is exactly the kind of element that can vanish against similarly-coloured artwork. Bar and glowing dot are shared between both placements. */ /* Bottom padding matters when the gauge is the LAST thing in the card -- with no chip placed in the footer row, the bar would otherwise sit flush against the card's own bottom edge. */ .wb-gc-heat { display: flex; align-items: center; gap: .3rem; padding: .3rem .35rem .3rem; } .wb-gc-heat-ic { flex: 0 0 auto; font-size: .625rem; line-height: 1; } .wb-gc-heat-ic.cold { color: var(--wb-cold-color); } .wb-gc-heat-ic.hot { color: var(--wb-hot-color); } /* Two more steps down as the card itself narrows -- a dense grid (many columns) can make cards this small even on a wide desktop screen, which is why this keys off the card's own width via the wbgc container above rather than the viewport. */ @container wbgc (max-width: 140px) { .wb-gc-heat-ic { font-size: .5rem; } } @container wbgc (max-width: 100px) { .wb-gc-heat-ic { font-size: .4375rem; } } /* Cold -> hot spectrum: blue, green, yellow, orange, red -- a real gradient rather than the original 3-stop version, closer to a standard heat scale. Thicker than before per request. */ .wb-gc-heat-track { position: relative; flex: 1 1 auto; height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--wb-cold-color) 0%, #4FCB98 30%, #F5D76E 55%, #F0805A 75%, var(--wb-hot-color) 100%); } .wb-gc-heat-mark { position: absolute; top: 50%; width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 2px solid var(--bs-body-bg); transform: translate(-50%, -50%); box-shadow: 0 1px 3px rgba(0,0,0,.45); transition: box-shadow .2s ease; } /* Glow tracks which end the marker is actually on: red near hot, blue near cold, no glow when the game is sitting at its own normal rate (the "Even" middle -- see wbGcHeatZone in main.jsp). */ .wb-gc-heat-mark.hot { box-shadow: 0 1px 3px rgba(0,0,0,.45), 0 0 0 5px color-mix(in srgb, var(--wb-hot-color) 28%, transparent), 0 0 10px 4px color-mix(in srgb, var(--wb-hot-color) 45%, transparent); } .wb-gc-heat-mark.cold { box-shadow: 0 1px 3px rgba(0,0,0,.45), 0 0 0 5px color-mix(in srgb, var(--wb-cold-color) 28%, transparent), 0 0 10px 4px color-mix(in srgb, var(--wb-cold-color) 45%, transparent); } /* same gauge flush to the image's bottom edge -- costs zero card height, which is why it is the default placement; square ends because it spans the full width of the frame */ .wb-gc-gauge-img { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; height: 8px; } .wb-gc-gauge-img .wb-gc-heat-track { border-radius: 0; height: 8px; } .wb-gc-gauge-img .wb-gc-heat-mark { width: 12px; height: 12px; border-color: rgba(0,0,0,.55); } /* Outside the card ------------------------------------------------------------------------ The eighth placement: outside-left/centre/right for chips, "Outside card" for the name and gauge strips. The renderer cannot literally emit this row outside the .card element -- it returns the card's inner html and every call site owns the wrapper -- so "outside" is done by ending the card's PANEL at the artwork instead. Same result an operator is asking for, with no change to eleven call sites and no extra wrapper div slipped into grids that are counting their own children. :has() rather than a class on .card for the same reason the hover effects use it: the renderer has no way to reach the wrapper it did not write. Same 2023+ baseline already relied on by those rules and by the wbgc container query above. The panel goes whenever ANYTHING is placed outside, even with the footer row also in use -- a panel that stops between two rows has no shape a card could take. Two rows then both read as outside content, still told apart by the footer keeping its card-body padding. */ .card:has(> .wb-gc-out) { background-color: transparent; border-color: transparent; box-shadow: none; } /* With no panel behind it the artwork IS the card, so it rounds on all four corners. The rules further up only round the bottom when the wrapper is the card's last child, and it stops being that as soon as an outside row follows it. */ .card:has(> .wb-gc-out) > a > .game-icon-image-wrapper, .card:has(> .wb-gc-out) > .game-icon-image-wrapper { border-radius: var(--bs-card-inner-border-radius); } /* Lines up with the artwork's own edges rather than the footer's px-2 -- this row is not in a card body and should not be inset as though it were. */ .wb-gc-out { padding: .3rem .1rem 0; } .wb-gc-out .wb-gc-nm { margin-top: 0; } .wb-gc-out .wb-gc-heat { padding-left: 0; padding-right: 0; } .wb-gc-out .wb-gc-out-row { padding: 0; } /* Mobile: a 2-up card is roughly 160px wide, so four chips will not fit. Rather than a second set of settings to keep in sync, elements drop by priority -- RTP first, then the count's text, then the name -- so one configuration degrades sensibly instead of overflowing. */ @media (max-width: 575.98px) { .wb-gc-ov { padding: .25rem; } .wb-gc-ov.b { padding-top: .8rem; } .wb-gc-row .game-icon-brand-image, .wb-gc-ov .game-icon-brand-image { height: 15px; width: auto; } .wb-gc-rtp { font-size: .62rem; padding: .15rem .22rem; } .wb-gc-cnt { font-size: .62rem; } .wb-gc-badge { font-size: .55rem; padding: .15rem .25rem; } .wb-gc-badge-img { height: 16px; max-width: 48px; } .wb-gc-nm, .wb-gc-ov .wb-gc-nm { font-size: .7rem; } } .game-icon-brand-image { height:18px; width:auto; } @media (max-width: 575.98px) { .game-icon-brand-image { height:auto; width:45%; } } /* Fixed box for provider logos in carouselProviderT1 -- without this the has no intrinsic size of its own, so it visibly resizes 3 times as it goes transparent-pixel -> blurhash (32x32 square) -> real logo (its own aspect ratio). object-fit:contain keeps both the blur and the real image correctly proportioned inside the same stable box, so only the blur/sharp crossfade is visible -- no size jump. */ .wb-provider-logo { height: 44px; width: auto; max-width: 100%; object-fit: contain; } .custom-option.custom-option-icon .custom-option-body .custom-option-title { display: block; color: var(--bs-heading-color); font-size: 0.875rem; font-weight: 600; margin-block-end: 0.5rem; } /* * CUSTOM SWIPER ******************************************************************************/ .swiper { width: 100%; height: 100%; /* height: 400px; */ } .swiper .swiper-slide { text-align: center; font-size: 1.5rem; /* background-color: #ecebed; */ background-position: center; background-size: cover; } #swiper-cbt1-gallery .gallery-top { width: 100%; aspect-ratio: 2000 / 525; } @media (max-width: 576px) { #swiper-cbt1-gallery .gallery-top { aspect-ratio: 1305 / 525; } } #swiper-cbt1-gallery.with-thumbs { height: 400px; } @media (max-width: 576px) { #swiper-cbt1-gallery.with-thumbs { height: 200px; } } #swiper-cbt1-gallery.with-thumbs .gallery-top { height: 80%; aspect-ratio: unset; } #swiper-cbt1-gallery .gallery-thumbs { height: 20%; box-sizing: border-box; padding: 10px 0; } #swiper-cbt1-gallery .gallery-thumbs .swiper-slide { width: 25%; height: 100%; opacity: 0.4; cursor: pointer; } #swiper-cbt1-gallery .gallery-thumbs .swiper-slide-thumb-active { opacity: 1; } .swiper-bigwin .swiper-slide { text-align: left; font-size: 0.8rem; color: var(--bs-card-color); } .swiper-games .swiper-slide { text-align: left; font-size: 1.0rem; color: var(--bs-card-color) !important; } /* * Game ******************************************************************************/ .game-content { height: calc(100vh - 9.5rem); padding: 1rem 1rem; position: relative; } .game-content-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: var(--bs-card-img-overlay-padding); border-radius: var(--bs-card-inner-border-radius); background-color: #000000db; background-size: cover; background-position: center; background-repeat: no-repeat; } /* * Chat Messenger ******************************************************************************/ .default-chat-box { z-index: 2147483000; position: fixed; bottom: 20px; right: 20px; transform-origin: right bottom; height: min(704px, 100% - 40px); min-height: 80px; width: 400px; max-height: 704px; box-shadow: rgba(0, 0, 0, 0.16) 0px 5px 40px; border-radius: 16px; overflow: hidden; background-color:#fff; } .default-chat-box.show { transition: width 200ms ease 0s, height 200ms ease 0s, max-height 200ms ease 0s, transform 300ms cubic-bezier(0, 1.2, 1, 1) 0s, opacity 83ms ease-out 0s; transform: scale(1); opacity: 1; pointer-events: all; } .default-chat-box.hide { transition: width 200ms ease 0s, height 200ms ease 0s, max-height 200ms ease 0s, transform 300ms cubic-bezier(0, 1.2, 1, 1) 0s, opacity 83ms ease-out 0s; transform: scale(0); opacity: 0; pointer-events: none; } .default-chat-box-header { position: absolute; height: 60px; min-height: 60px; width: 100%; padding: 20px; } /* * Mobile bottom tab bar ******************************************************************************/ .tabbar { height: 4.5rem; z-index: 110; box-sizing: content-box; padding-bottom: 0rem; position: fixed; bottom: 0; left: 0; border-top-left-radius: 1rem; border-top-right-radius: 1rem; background-color: var(--bs-navbar-bg) !important; } .btnTab { display: flex; flex: 1 1 0%; align-items: center; justify-content: center; height: 3rem; padding-left: .5rem; padding-right: .5rem; cursor: pointer; border-radius: 0.375rem; border: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; background: none; font-size: 0.75rem; line-height: 1rem; font-weight: 800; } /* * Mobile Box Back Button ******************************************************************************/ .btn-back { --bs-btn-back-color: #2f2b3d; --bs-btn-back-bg: url("data:image/svg+xml,"); --bs-btn-back-opacity: 0.5; --bs-btn-back-hover-opacity: 0.75; --bs-btn-back-focus-shadow: none; --bs-btn-back-focus-opacity: 0.75; --bs-btn-back-disabled-opacity: 0.25; --bs-btn-back-white-filter: invert(1) grayscale(100%) brightness(200%); box-sizing: content-box; width: 0.65rem; height: 0.65rem; padding: 0.25em 0.25em; color: var(--bs-btn-back-color); background: transparent var(--bs-btn-back-bg) center/0.65rem auto no-repeat; border: 0; border-radius: 0.375rem; opacity: var(--bs-btn-back-opacity); } .btn-back:hover { color: var(--bs-btn-back-color); text-decoration: none; opacity: var(--bs-btn-back-hover-opacity); } .btn-back:focus { outline: 0; box-shadow: var(--bs-btn-back-focus-shadow); opacity: var(--bs-btn-back-focus-opacity); } .btn-back:disabled, .btn-back.disabled { pointer-events: none; user-select: none; opacity: var(--bs-btn-back-disabled-opacity); } .btn-back-white { filter: var(--bs-btn-back-white-filter); } [data-bs-theme=dark] .btn-back { filter: var(--bs-btn-back-white-filter); } .modal-header .btn-back { padding: calc(var(--bs-modal-header-padding-y) * 0.5) calc(var(--bs-modal-header-padding-x) * 0.5); margin: calc(-0.5 * var(--bs-modal-header-padding-y)) calc(-0.5 * var(--bs-modal-header-padding-x)) calc(-0.5 * var(--bs-modal-header-padding-y)) auto; } .modal .btn-back { padding: 0.614rem; background-color: var(--bs-body-bg); background-image: none; box-shadow: var(--bs-box-shadow-xs); filter: none; opacity: 1; transform: translate(23px, -25px); border-radius: 0.25rem; transition: all 0.23s ease 0.1s; /* For hover effect of back btn */ } @media (prefers-reduced-motion: reduce) { .modal .btn-back { transition: none; } } .modal .btn-back:hover, .modal .btn-back:focus, .modal .btn-back:active { opacity: 1; outline: 0; transform: translate(20px, -20px); } :dir(rtl) .modal .btn-back:hover, :dir(rtl) .modal .btn-back:focus, :dir(rtl) .modal .btn-back:active { transform: translate(26px, -20px); } .modal .btn-back::before { display: block; background-color: var(--bs-secondary-color); block-size: 0.6875rem; content: ""; inline-size: 0.6875rem; mask-image: url("data:image/svg+xml,"); mask-repeat: no-repeat; mask-size: 100% 100%; } .modal .modal-header .btn-back { position: absolute; inset-block-start: 1.5rem; inset-inline-start: 0.8125rem; } .modal .modal-dialog-scrollable .btn-back, .modal .modal-fullscreen .btn-back, .modal.modal-top .btn-back { /* box-shadow: none; */ transform: translate(0, 0); } .modal .modal-dialog-scrollable .btn-back:hover, .modal .modal-fullscreen .btn-back:hover, .modal.modal-top .btn-back:hover { transform: translate(0, 0); } .modal-mobile-box .modal-body { background-color: var(--bs-body-bg); padding-left: 1rem; padding-right:1rem; padding-top:1rem; } .modal-mobile-box .modal-header { padding: 0; height:3.5rem; align-items: center; justify-content: center; } .modal-mobile-box .modal-title { margin: 0; display: flex; align-items: center; } .modal-mobile-box .card-header { padding: 1rem; padding-block-start: 1rem !important; } .modal-mobile-box .card-body { padding: 1rem; padding-block-start: 1rem !important; } .btn-menu-m { justify-content: space-between; } /* ── Mobile navigation stack (mobileBox) ────────────────────────────────────────────── Single-live-panel model: only the TOP screen is ever attached to #mobileBox-container, so there are never duplicate ids or coexisting fragment scripts. The panel is absolutely positioned (fills the box, scrolls on its own); padding moves off the container onto the panel (id selector beats the .modal-mobile-box .modal-body rule above). */ #mobileBox-container { position: relative; overflow: hidden; padding: 0; } .mobile-screen { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; /* long-text safety net: the stack never scrolls sideways */ -webkit-overflow-scrolling: touch; background-color: var(--bs-body-bg); padding: 1rem 1rem 1.5rem; } /* Long unbreakable strings (batch/promo names, dual-currency amounts, IPs, restriction lists) break instead of overflowing. Cards already ellipsize titles; this catches detail rows. */ .modal-mobile-box .mobile-screen .text-end, .modal-mobile-box .mobile-screen p { overflow-wrap: anywhere; } /* iOS-style push/pop slide. Two panels are attached only during a transition; the JS sets the start transform (no transition), forces a reflow, then enables .mb-anim + .mb-to so the slide animates. --enter = incoming from the right (push) / left (pop); --leave = the screen moving away. A soft left-edge shadow on the top-most moving panel sells the depth. */ .mobile-screen.mb-anim { transition: transform .32s cubic-bezier(0.32, 0.72, 0, 1); will-change: transform; } .mobile-screen.mb-enter { transform: translateX(100%); } /* push: incoming from right */ .mobile-screen.mb-leave-back { transform: translateX(0); } /* push: outgoing parks left */ .mobile-screen.mb-enter-back { transform: translateX(-30%); } /* pop: incoming from left */ .mobile-screen.mb-leave-fwd { transform: translateX(0); } /* pop: outgoing to the right */ .mobile-screen.mb-enter.mb-to, .mobile-screen.mb-enter-back.mb-to { transform: translateX(0); } .mobile-screen.mb-leave-back.mb-to { transform: translateX(-30%); } .mobile-screen.mb-leave-fwd.mb-to { transform: translateX(100%); } .mobile-screen.mb-top-shadow { box-shadow: -8px 0 24px rgba(0, 0, 0, .18); } @media (prefers-reduced-motion: reduce) { .mobile-screen.mb-anim { transition: none; } } /* ── Mobile "card table" ─────────────────────────────────────────────────────────────── Inside the mobile fullscreen box, a .mb-cardtable DataTable restacks each row into a card: the header row is hidden and every cell becomes a label→value line (label from data-label, set by mbCardTableRow). Scoped to .modal-mobile-box so DESKTOP keeps the real scrolling table. Avoids the horizontal-scroll / cramped-nowrap problem on narrow screens. */ .modal-mobile-box .mb-cardtable thead { display: none; } .modal-mobile-box .mb-cardtable, .modal-mobile-box .mb-cardtable tbody, .modal-mobile-box .mb-cardtable tr, .modal-mobile-box .mb-cardtable td { display: block; width: 100%; } .modal-mobile-box .mb-cardtable tr { border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .35rem .85rem; margin-bottom: .75rem; background: var(--bs-paper-bg, #fff); } .modal-mobile-box .mb-cardtable td { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .4rem 0; border: 0 !important; white-space: normal; text-align: right; min-width: 0; } .modal-mobile-box .mb-cardtable td::before { content: attr(data-label); font-weight: 600; color: var(--bs-secondary-color); text-align: left; flex-shrink: 0; } .modal-mobile-box .mb-cardtable td:last-child { justify-content: flex-end; padding-top: .6rem; } .modal-mobile-box .mb-cardtable td:last-child::before { content: none; } /* DataTables adds a sizing wrapper; keep it from forcing horizontal scroll in card mode */ .modal-mobile-box .mb-cardtable + .dataTables_scrollBody, .modal-mobile-box .dataTables_scrollBody .mb-cardtable { overflow: visible !important; } /* Rich mobile cards (transactions / bet-history / rollover): the page's DataTable createdRow rebuilds each row into a designed .mbcard. .mbcard-table just strips the table layout so the card fills the row full-width. Scoped to .modal-mobile-box → desktop keeps the real table. */ .modal-mobile-box .mbcard-table thead { display: none; } .modal-mobile-box .mbcard-table, .modal-mobile-box .mbcard-table tbody, .modal-mobile-box .mbcard-table tr, .modal-mobile-box .mbcard-table td { display: block; width: 100%; } .modal-mobile-box .mbcard-table td { padding: 0 !important; border: 0 !important; white-space: normal; } .modal-mobile-box .mbcard-table tr { background: transparent; } /* DataTables 2.x renders an empty top layout row (page-length + search, both disabled here) and an mt-2 above the table — dead gap on mobile. Drop the empty top row and the table row's top margin. */ .modal-mobile-box .dt-container > .row:first-child:not(.dt-layout-table) { display: none; } .modal-mobile-box .dt-container .dt-layout-table { margin-top: 0 !important; } .mbcard { display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem; margin-bottom: .5rem; border: 1px solid var(--bs-border-color); border-radius: .65rem; background: var(--bs-paper-bg, #fff); cursor: pointer; } .mbcard:active { background: var(--bs-secondary-bg, #f5f5f5); } .mbcard-icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: .5rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; } .mbcard-main { flex: 1 1 auto; min-width: 0; } .mbcard-l1 { display: flex; justify-content: space-between; align-items: center; gap: .5rem; } .mbcard-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .mbcard-status { flex-shrink: 0; font-size: 1.15rem; line-height: 1; display: inline-flex; } .mbcard-sub { font-size: .8rem; color: var(--bs-secondary-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: .05rem; } .mbcard-amt { font-weight: 700; margin-top: .2rem; } /* own line → long / FX / IDR amounts wrap here, never collide with the title */ .mbcard-amt .mbcard-fx { font-weight: 400; font-size: .85em; color: var(--bs-secondary-color); white-space: nowrap; } .mbcard-chev { color: var(--bs-secondary-color); flex-shrink: 0; align-self: center; } /* Claim variant: a column card (icon+title+amount row on top, progress/claim button below). */ .mbcard-claim { flex-direction: column; align-items: stretch; gap: 0; cursor: default; } .mbcard-claim .mbcard-row { display: flex; align-items: center; gap: .7rem; width: 100%; } .mbcard-claim .mbcard-extra { margin-top: .6rem; } /* ── Phase 4: touch-target sweep ───────────────────────────────────────────────────── Guarantee a ~40-44px tappable box for the small icon controls the mobile audit flagged, without visibly enlarging the glyphs (the hit area grows, not the icon). */ .modal-mobile-box .modal-header .btn-back { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; min-width: 0; min-height: 0; padding: 0; } .modal-mobile-box .modal-header .btn-back::before { block-size: 1.2rem; inline-size: 1.2rem; } /* larger, centered chevron */ .modal-mobile-box .input-group-text.cursor-pointer { min-width: 44px; justify-content: center; } .modal-mobile-box .btn-sm { min-height: 36px; } .mbcard-chev { font-size: 1.15rem; padding: .45rem; margin: -.35rem; } /* expand hit area, no layout shift */ #header-deposit-button > .btn { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; } /* Header: balance amount + deposit "+" joined into one connected pill. */ .header-balance-group { display: inline-flex; align-items: stretch; height: 38px; border: 1px solid var(--bs-border-color); border-radius: .5rem; overflow: hidden; } .header-balance-amt { display: inline-flex; align-items: center; padding: 0 .7rem; font-weight: 600; color: var(--bs-body-color); background: var(--bs-body-bg); white-space: nowrap; text-decoration: none; } .header-balance-plus { display: inline-flex; align-items: center; justify-content: center; width: 40px; background: var(--bs-primary); color: var(--bs-primary-contrast, #fff); text-decoration: none; font-size: 1.1rem; } .header-balance-plus:hover, .header-balance-plus:focus { color: var(--bs-primary-contrast, #fff); opacity: .92; } .header-balance-amt { max-width: 44vw; overflow: hidden; text-overflow: ellipsis; } /* long IDR balance never overflows the header */ /* Bell + avatar as pressable rounded-square buttons, same 38px height as the balance pill. */ .header-sq-btn { display: inline-flex !important; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0 !important; border-radius: .5rem; border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); color: var(--bs-body-color); position: relative; } .header-sq-btn > i { font-size: 1.2rem; } .header-sq-btn .avatar { width: 100%; height: 100%; } .header-sq-btn .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: .4rem !important; } .header-sq-btn .badge-notifications { top: -4px; right: -4px; } /* Avatar: fully rounded (circle), same 38px height — the bell stays a rounded square. */ #header-user .header-sq-btn { border-radius: 50%; } #header-user .header-sq-btn .avatar img { border-radius: 50% !important; } /* ── Phase 4: bottom-sheet primitive ───────────────────────────────────────────────── Slides up from the bottom for quick decisions / small inputs (OTP, pickers, info, bonus T&C) — the counterpart to the full-screen push. Dim backdrop, grabber, drag-to-dismiss. */ .mb-sheet-host { position: fixed; inset: 0; z-index: 1200; } /* above the fullscreen mobileBox modal (~1090) */ .mb-sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .25s ease; } .mb-sheet-host.mb-sheet-open .mb-sheet-backdrop { opacity: 1; } .mb-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; /* header fixed; only the body scrolls */ background: var(--bs-paper-bg, #fff); border-radius: 1.1rem 1.1rem 0 0; padding: 0 1.15rem calc(1.15rem + env(safe-area-inset-bottom, 0px)); transform: translateY(100%); transition: transform .3s cubic-bezier(.32,.72,0,1); box-shadow: 0 -8px 28px rgba(0,0,0,.16); color: var(--bs-body-color); } .mb-sheet-host.mb-sheet-open .mb-sheet { transform: translateY(0); } /* Fixed header (grabber + always-visible close × + title); the body scrolls below it. */ .mb-sheet-top { position: relative; flex-shrink: 0; min-height: 1.4rem; } .mb-sheet-grabber { width: 40px; height: 4px; border-radius: 2px; background: var(--bs-secondary-bg, #d5d5db); margin: .4rem auto .3rem; } .mb-sheet-close { position: absolute; top: -.1rem; right: -.3rem; border: 0; background: transparent; color: var(--bs-secondary-color); font-size: 1.7rem; line-height: 1; padding: .2rem .5rem; } .mb-sheet-header { flex-shrink: 0; padding: .1rem 0 .6rem; } .mb-sheet-title { font-weight: 600; margin: 0; } .mb-sheet-body { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overflow-wrap: anywhere; padding-bottom: .25rem; } /* Client-authored rich HTML (bonus/promo T&C from the localization editor) in a sheet: paragraphs and long strings wrap so the sheet never scrolls sideways, but a wide TABLE keeps its natural column widths and scrolls WITHIN its own container — only the table scrolls, never the whole sheet, and it never clamps into crushed columns. mbSheet.wrapTables() strips the editor's width / table-layout (the cause of the clamp) and tags each table .mb-rich-table. width:max-content → size to content (overflow → scroll) when wide; min-width:100% → fill the sheet when small; cell max-width caps a runaway long-text cell so it wraps instead of exploding. */ .mb-table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: .5rem; } .mb-rich-table { width: max-content; min-width: 100%; max-width: none; } .mb-rich-table td, .mb-rich-table th { max-width: 72vw; white-space: normal; overflow-wrap: anywhere; } /* Bare (unstyled) client tables get a sane default look; any client inline styles still win. */ .mb-rich-table:not([border]) td, .mb-rich-table:not([border]) th { padding: .4rem .6rem; border: 1px solid var(--bs-border-color, #d9dee3); } .mb-sheet-body img { max-width: 100%; height: auto; } /* A moved modal body brings its own close button — redundant in a sheet (grabber/backdrop/drag close it). */ .mb-sheet-body > .btn-close, .mb-sheet-body .modal-body > .btn-close { display: none; } @media (prefers-reduced-motion: reduce) { .mb-sheet-backdrop, .mb-sheet { transition: none; } } /* Skeleton placeholder shown inside a freshly-pushed panel while its fragment loads, so a push feels instant instead of blank. Grey shimmer reads correctly on light + dark themes. */ .mb-skeleton { padding: .25rem 0; } /* Modal close button: core.css's default .modal .btn-close carries transform: translate(23px,-25px) as a "floating chip" effect -- stacked on top of .modal-header .btn-close's own absolute positioning, it shoves the button up-right past the modal's rounded corner, outside the frame. The theme already ships a clean "inside the frame" variant for .modal-fullscreen / .modal-dialog-scrollable / .modal-top (zeroes the same transform) -- apply it to every modal so the close button sits inside the frame consistently everywhere, not just those types. */ .modal .btn-close { box-shadow: none; transform: translate(0, 0); } .modal .btn-close:hover, .modal .btn-close:focus, .modal .btn-close:active { transform: translate(0, 0); } .mb-sk-line, .mb-sk-card { border-radius: .375rem; background: linear-gradient(90deg, rgba(128,128,128,.15) 25%, rgba(128,128,128,.28) 37%, rgba(128,128,128,.15) 63%); background-size: 400% 100%; animation: mb-shimmer 1.4s ease infinite; } .mb-sk-line { height: .85rem; margin-bottom: .75rem; width: 100%; } .mb-sk-card { height: 120px; margin-bottom: 1rem; } @keyframes mb-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } } @media (prefers-reduced-motion: reduce) { .mb-sk-line, .mb-sk-card { animation: none; } } /* * demo.css * File include item demo only specific css only ******************************************************************************/ .app-brand-logo { display: none; flex-grow: 0; flex-shrink: 0; overflow: hidden; min-height: 1px; } @media (min-width: 1200px) { .layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas) .app-brand-logo { display: block; } } .menu .app-brand.demo { height: 64px; } .app-brand-logo.demo svg { width: 34px; height: 24px; } .app-brand-text.demo { font-size: 1.375rem; } /* Side-navbar layout: make the top scrim follow the operator's background colour. core.css paints this 4.75rem blur strip from rgba(var(--bs-body-bg-rgb), ..). The index shells override --bs-body-bg (a hex) but there is no way to derive the "r, g, b" triplet from it in EL, so --bs-body-bg-rgb keeps core.css's hard-coded stock value (248,247,250 light / 37,41,60 dark). The strip therefore stayed the default colour while the rest of the page changed -- and since it sits at z-index 1001 across the full width behind the navbar, that stale band is the first thing you look at, which is why the layout read as "not changing". Same selector as core.css, re-declared here (custom.css loads after it) with color-mix on the hex var directly, so no triplet is needed. Horizontal is untouched: core.css scopes the scrim to :not(.layout-horizontal). */ .layout-navbar-fixed .layout-wrapper:not(.layout-horizontal) .layout-page::before { background: linear-gradient(180deg, color-mix(in sRGB, var(--bs-body-bg) 70%, transparent) 44%, color-mix(in sRGB, var(--bs-body-bg) 43%, transparent) 73%, transparent); } /* ! For .layout-navbar-fixed added fix padding top to .layout-page */ /* Default navbar */ .layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page { padding-top: 64px !important; } .layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page { padding-top: 72px !important; } /* Horizontal layout: clear the fixed .menu-horizontal that sits under the navbar. core.css does this with an adjacent-sibling selector (.menu-horizontal + [class*=container-]). The nav mega-menu panel, its