/* ========================================================================= ZimBoost brand theme - logged-in console ------------------------------------------------------------------------- WhatsApp light UI + Zimbabwe flag accents. The rule this file follows -------------------------- The interface is ~90% white and light grey. Colour is an accent, never a surface: green for the active menu row and primary buttons, gold for promos/warnings, red for errors. There are no dark bands - not the sidebar, not the top navbar, not the page header. The flag appears exactly once per screen, as a 3px rule along the top of the page header. Shape, spacing, radii, transitions and the component structure are shared with the public pages (dist/css/zimboost-public.css); the palette is not - the marketing pages keep their dark hero, the app does not. Scope ----- Every rule is under `.zb-theme`, which layouts/app.blade.php puts on when the user is NOT a super admin - so the central console keeps the stock WhatsJet look and the Super Admin's configurable Bootstrap colours. Why the !important flags ------------------------ layouts/app.blade.php loads this file BEFORE the generated `custom-styles.css`, which writes `!important` on `.card`, `.btn.btn-*`, `#navbar-main`, `html > body` and friends from the app colour settings. Plain rules here would simply lose. So the brand rules that must win are written one class more specific AND marked `!important` - e.g. `.zb-theme .btn.btn-primary` (0,3,0) beats `.btn.btn-primary` (0,2,0). Only colour/surface rules do this; layout, spacing and motion do not need it. Dark app theme -------------- Every rule below is written against the custom properties, so switching themes is a token swap: `.lw-app-theme-dark` re-points them to WhatsApp's own dark surfaces (#111b21 / #202c33 / #2a3942). Nothing else in this file needs a dark variant. No external requests: no @import, no webfonts, no background images. ========================================================================= */ .zb-theme { /* ---- accents ---- WhatsApp green carries the primary actions; the flag colours are accents only and are never used as a background. */ --zb-green: #25d366; --zb-green-600: #20bd5c; --zb-green-700: #1ea952; --zb-green-050: #e7fce8; /* Green TEXT on a white/tinted surface only. #25d366 on white is 1.98:1 and #1ea952 is 3.07:1 - both below the 4.5:1 small text needs, and this app is read on cheap phone screens in bright sun. So green *fills* use the ramp above (white label on a large solid block, the way WhatsApp does it) and green *lettering* uses this darker step: 5.4:1 on white, 5.0:1 on the --zb-green-050 active row. */ --zb-green-ink: #0f7b3d; --zb-gold: #fcd116; --zb-gold-600: #dcb600; --zb-gold-050: #fff8e0; --zb-red: #ce1126; --zb-red-600: #a80e1f; --zb-red-050: #fdecee; /* ---- WhatsApp-style neutrals (these carry the UI) ---- */ --zb-black: #111b21; --zb-ink: #111b21; --zb-ink-soft: #3b4a54; --zb-muted: #667781; --zb-border: #d1d7db; --zb-border-soft: #e9edef; --zb-body: #f0f2f5; --zb-surface: #ffffff; --zb-surface-2: #ffffff; /* the one step that recedes behind white: table headers, chat list header, modal footers - WhatsApp's own secondary surface */ --zb-nav: #e9edef; /* light mode sidebar/header */ --zb-sidebar: #ffffff; --zb-sidebar-ink: #111b21; /* ---- shape & motion (unchanged - these were working) ---- */ --zb-r-sm: 10px; --zb-r: 14px; --zb-r-lg: 20px; --zb-r-pill: 999px; /* flattened towards WhatsApp, which uses very little elevation */ --zb-shadow-xs: 0 1px 2px rgba(11, 20, 26, .06); --zb-shadow-sm: 0 1px 3px rgba(11, 20, 26, .08); --zb-shadow-md: 0 2px 6px rgba(11, 20, 26, .08); --zb-shadow-lg: 0 8px 24px rgba(11, 20, 26, .16); --zb-t: 180ms cubic-bezier(.2, .8, .2, 1); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* body wins over custom-styles' `html > body` - (0,1,1) beats (0,0,2) */ body.zb-theme { background-color: var(--zb-body) !important; color: var(--zb-ink); } /* ---------- dark app theme ---------- Only the tokens move; every rule below is written against them, so dark mode is WhatsApp's own dark palette (#111b21 / #202c33 / #2a3942) with the same shape, spacing and motion as light. Green *lettering* goes light here, since --zb-green-ink is tuned for white backgrounds. */ .zb-theme.lw-app-theme-dark { --zb-ink: #e9edef; --zb-ink-soft: #d1d7db; --zb-muted: #8696a0; --zb-border: #2a3942; --zb-border-soft: #222e35; --zb-body: #111b21; --zb-surface: #202c33; --zb-surface-2: #202c33; --zb-nav: #202c33; --zb-sidebar: #111b21; --zb-sidebar-ink: #e9edef; --zb-green-050: rgba(37, 211, 102, .16); --zb-green-ink: #6ee7a0; --zb-gold-050: rgba(252, 209, 22, .14); --zb-red-050: rgba(206, 17, 38, .18); --zb-shadow-xs: 0 1px 2px rgba(0, 0, 0, .4); --zb-shadow-sm: 0 1px 3px rgba(0, 0, 0, .45); --zb-shadow-md: 0 2px 6px rgba(0, 0, 0, .5); --zb-shadow-lg: 0 8px 24px rgba(0, 0, 0, .6); } @media (prefers-color-scheme: dark) { /* "System default" loads dark-theme.css behind this same query */ .zb-theme.lw-app-theme-system_default { --zb-ink: #e9edef; --zb-ink-soft: #d1d7db; --zb-muted: #8696a0; --zb-border: #2a3942; --zb-border-soft: #222e35; --zb-body: #111b21; --zb-surface: #202c33; --zb-surface-2: #202c33; --zb-nav: #202c33; --zb-sidebar: #111b21; --zb-sidebar-ink: #e9edef; --zb-green-050: rgba(37, 211, 102, .16); --zb-green-ink: #6ee7a0; --zb-gold-050: rgba(252, 209, 22, .14); --zb-red-050: rgba(206, 17, 38, .18); } } /* ========================================================================= Typography ========================================================================= */ .zb-theme h1, .zb-theme h2, .zb-theme h3, .zb-theme h4, .zb-theme h5, .zb-theme h6 { color: var(--zb-ink); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; } .zb-theme a { color: var(--zb-green-ink); transition: color var(--zb-t); } .zb-theme a:hover { color: var(--zb-green-ink); text-decoration: underline; } .zb-theme .text-muted { color: var(--zb-muted) !important; } .zb-theme small, .zb-theme .text-sm { color: var(--zb-muted); } /* keyboard users get a visible, on-brand focus ring everywhere */ .zb-theme :focus-visible { outline: 3px solid rgba(37, 211, 102, .45); outline-offset: 2px; border-radius: 6px; } /* ========================================================================= Page header block ========================================================================= */ /* Argon's gradient bands are neutralised rather than recoloured: a full-width green block is exactly the "flag as background" this theme avoids, and `.header-body` is a plain container on the stat-card headers. */ .zb-theme .header.bg-gradient-success, .zb-theme .header-body, .zb-theme .bg-gradient-success, .zb-theme .bg-gradient-primary { background: transparent !important; } /* White, not a dark band. Only the background is claimed here - each screen keeps its own Bootstrap spacing classes (pb-0 / pb-5 / pb-8 / py-lg-8 are all in use, and several pair with an mt--4/mt--5 pull-up that expects that exact height). Forcing a padding here would collapse the header under those pulled-up cards. */ .zb-theme .main-content > .header { position: relative; background: var(--zb-surface) !important; border-bottom: 1px solid var(--zb-border); color: var(--zb-ink); } /* The one place the flag appears: a 3px rule at the TOP edge, as a brand signature. Pinned to the top rather than the bottom because the bottom of the header is exactly where the mt--4/mt--5 pull-up cards land. */ .zb-theme .main-content > .header::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--zb-green) 0%, var(--zb-green) 42%, var(--zb-gold) 42%, var(--zb-gold) 71%, var(--zb-red) 71%); } .zb-theme .main-content > .header .lw-page-title, .zb-theme .main-content > .header h1, .zb-theme .main-content > .header h2 { color: var(--zb-ink) !important; font-size: clamp(1.4rem, 3vw, 1.9rem) !important; font-weight: 700; letter-spacing: -.02em; } .zb-theme .main-content > .header p { color: var(--zb-muted); font-size: .93rem; margin-bottom: 0; } /* ========================================================================= Sidebar ========================================================================= */ .zb-theme .navbar.lw-sidebar-container, .zb-theme .sidenav, .zb-theme .navbar-vertical { background-color: var(--zb-sidebar) !important; border-right: 1px solid var(--zb-border) !important; box-shadow: none !important; } .zb-theme .navbar.lw-sidebar-container .navbar-collapse, .zb-theme .navbar-vertical .navbar-collapse { background-color: transparent !important; } .zb-theme .navbar-vertical .navbar-brand, .zb-theme .sidenav .navbar-brand { padding: 20px 16px; } .zb-theme .navbar.lw-sidebar-container.navbar-light .navbar-nav .nav-link, .zb-theme .navbar-vertical .nav-link, .zb-theme .sidenav .nav-link { display: flex; align-items: center; margin: 2px 12px; padding: 10px 14px !important; border-radius: var(--zb-r-sm); color: var(--zb-sidebar-ink) !important; font-size: .9rem; font-weight: 500; transition: background-color var(--zb-t), color var(--zb-t), transform var(--zb-t); } .zb-theme .navbar.lw-sidebar-container.navbar-light .navbar-nav .nav-link .fa, .zb-theme .navbar-vertical .nav-link i, .zb-theme .sidenav .nav-link i { width: 18px; margin-right: 12px; color: var(--zb-muted) !important; text-align: center; transition: color var(--zb-t); } /* The hover/active states repeat the long `.navbar.lw-sidebar-container.navbar-light .navbar-nav` prefix on purpose: custom-styles.css paints every sidebar link with the configured text colour at (0,5,0) !important, and a short `.zb-theme .navbar-vertical .nav-link` (0,4,0) would silently lose to it. */ .zb-theme .navbar.lw-sidebar-container.navbar-light .navbar-nav .nav-link:hover, .zb-theme .navbar-vertical .nav-link:hover, .zb-theme .sidenav .nav-link:hover { background-color: #f5f6f6; color: var(--zb-ink) !important; transform: none; } .zb-theme .navbar.lw-sidebar-container.navbar-light .navbar-nav .nav-link:hover .fa, .zb-theme .navbar-vertical .nav-link:hover i, .zb-theme .sidenav .nav-link:hover i { color: var(--zb-ink-soft) !important; } /* the selected row, WhatsApp Web's active-chat treatment: soft green tint, green lettering, no elevation */ .zb-theme .navbar.lw-sidebar-container.navbar-light .navbar-nav .nav-link.active, .zb-theme .navbar-vertical .nav-link.active, .zb-theme .sidenav .nav-link.active { background-color: var(--zb-green-050) !important; color: var(--zb-green-ink) !important; box-shadow: none !important; font-weight: 600; transform: none; } .zb-theme .navbar.lw-sidebar-container.navbar-light .navbar-nav .nav-link.active .fa, .zb-theme .navbar-vertical .nav-link.active i, .zb-theme .sidenav .nav-link.active i { color: var(--zb-green-ink) !important; } .zb-theme .lw-expandable-nav .nav-link { font-size: .84rem; } .zb-theme .navbar-vertical hr, .zb-theme .sidenav hr { border-color: var(--zb-border-soft); } .zb-theme .navbar-vertical .navbar-heading, .zb-theme .sidenav .navbar-heading { padding: 16px 26px 6px; color: var(--zb-muted) !important; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } /* The sidebar's flag stripe is gone on purpose: the 1px border-right now does the separating, and the flag rule at the top of the page header is the one place the three colours appear. Two flag marks on one screen reads as a poster rather than a product. */ /* the green pill already says "active" - Argon's extra left indicator bar on top of it is redundant */ .zb-theme .navbar-vertical .navbar-nav .nav-link.active:before, .zb-theme .sidenav .navbar-nav .nav-link.active:before { display: none !important; } /* ------------------------------------------------------------------------- Mobile: the collapse is a floating panel, and it needs its own surface. Below 768px Argon's `.navbar-vertical.navbar-expand-md .navbar-collapse` rules do not apply (they live inside a min-width:768px query). All that paints the open menu is `.navbar-collapse.show`, which Argon gives `background:#fff` at (0,2,0) with NO !important - so the transparent rule above, at (0,4,0) !important, was winning and leaving the panel with no background at all. The links then floated unreadably over the page content. Restored here at a specificity that beats both that rule and custom-styles.css's `.navbar-collapse { background-color: ... !important }`. ------------------------------------------------------------------------- */ @media (max-width: 767.98px) { /* the sidebar is a full-width top bar down here, so its right-hand divider belongs along the bottom instead */ .zb-theme .navbar.lw-sidebar-container, .zb-theme .navbar-vertical, .zb-theme .sidenav { border-right: 0 !important; border-bottom: 1px solid var(--zb-border) !important; } .zb-theme .navbar.lw-sidebar-container .navbar-collapse.show, .zb-theme .navbar.lw-sidebar-container .navbar-collapse.collapsing, .zb-theme .navbar-vertical .navbar-collapse.show, .zb-theme .navbar-vertical .navbar-collapse.collapsing, .zb-theme .sidenav .navbar-collapse.show, .zb-theme .sidenav .navbar-collapse.collapsing { background-color: var(--zb-surface) !important; border: 1px solid var(--zb-border-soft) !important; border-radius: var(--zb-r) !important; box-shadow: var(--zb-shadow-lg) !important; } /* the panel's own header row: logo on the left, X on the right */ .zb-theme .navbar-collapse-header { margin-bottom: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--zb-border-soft); } .zb-theme .navbar-collapse-header .collapse-brand img { max-height: 32px; width: auto; } /* the X is two rotated bars - keep them dark on the now-white panel */ .zb-theme .navbar-collapse .navbar-toggler span { background: var(--zb-ink) !important; } /* links get a touch-sized hit area on a phone */ .zb-theme .navbar-vertical .navbar-collapse.show .nav-link, .zb-theme .navbar.lw-sidebar-container .navbar-collapse.show .nav-link { padding: 12px 14px !important; margin: 2px 0; } } /* ========================================================================= Top navbar - white, sitting above the white page header, separated by a hairline. It is a SIBLING of the header inside .main-content, not a layer over it, so it needs its own surface. ========================================================================= */ .zb-theme #navbar-main, .zb-theme .navbar-top { background-color: var(--zb-surface) !important; background-image: none !important; border-bottom: 1px solid var(--zb-border) !important; box-shadow: 0 1px 2px rgba(11, 20, 26, .04) !important; } .zb-theme .navbar-top .nav-link, .zb-theme .navbar-top .navbar-brand, .zb-theme .navbar-top .h3, .zb-theme .navbar-top .h4, .zb-theme .navbar-top .text-white { color: var(--zb-ink) !important; } .zb-theme .navbar-top .nav-link { border-radius: var(--zb-r-sm); padding: 8px 12px; transition: background-color var(--zb-t); } .zb-theme .navbar-top .nav-link i { color: var(--zb-muted); } .zb-theme .navbar-top .nav-link:hover { background-color: #f5f6f6; } .zb-theme .navbar-top .nav-link:hover i { color: var(--zb-ink-soft); } /* ========================================================================= Cards & surfaces ========================================================================= */ /* Barely elevated, like WhatsApp: a hairline border does the separating and the shadow is only a hint. */ .zb-theme .card { background-color: var(--zb-surface) !important; border: 1px solid var(--zb-border-soft) !important; border-radius: var(--zb-r) !important; box-shadow: var(--zb-shadow-xs) !important; transition: box-shadow var(--zb-t), border-color var(--zb-t); } /* Shadow-only hover on purpose: a translate lift on every card makes a dense console jitter as the cursor crosses tables. The lift is kept for the things that are actually clickable (marketplace cards, further down). */ .zb-theme .card:hover { box-shadow: var(--zb-shadow-md) !important; } .zb-theme .card-header { background-color: transparent !important; border-bottom: 1px solid var(--zb-border) !important; border-radius: var(--zb-r) var(--zb-r) 0 0 !important; padding: 18px 22px; color: var(--zb-ink); font-weight: 600; } .zb-theme .card-header.border-0 { border-bottom: 0 !important; padding-bottom: 6px; } .zb-theme .card-header h1, .zb-theme .card-header h2, .zb-theme .card-header h3, .zb-theme .card-header h4 { margin-bottom: 0; font-size: 1.1rem; } .zb-theme .card-body { padding: 22px; } .zb-theme .card.shadow, .zb-theme .shadow { box-shadow: var(--zb-shadow-sm) !important; } .zb-theme .card.bg-white { background-color: var(--zb-surface) !important; } .zb-theme fieldset:not(.filepond--file-wrapper) { background-color: var(--zb-surface) !important; border: 1px solid var(--zb-border) !important; border-radius: var(--zb-r) !important; padding: 18px 22px; } .zb-theme .card-body fieldset:not(.filepond--file-wrapper) legend { background-color: var(--zb-nav) !important; border: 1px solid var(--zb-border) !important; border-radius: var(--zb-r-pill) !important; padding: 5px 16px; color: var(--zb-ink) !important; font-size: .8rem; font-weight: 700; letter-spacing: .03em; cursor: pointer; } /* ========================================================================= Buttons ========================================================================= */ .zb-theme .btn { border-radius: var(--zb-r-sm) !important; padding: 10px 20px; font-size: .9rem; font-weight: 600; letter-spacing: 0; box-shadow: none; transition: transform var(--zb-t), box-shadow var(--zb-t), background-color var(--zb-t), border-color var(--zb-t), color var(--zb-t); } .zb-theme .btn:hover { transform: translateY(-2px); } .zb-theme .btn:active { transform: translateY(0); } .zb-theme .btn.btn-sm { padding: 7px 14px; font-size: .82rem; } .zb-theme .btn.btn-lg { padding: 14px 28px; font-size: 1rem; border-radius: var(--zb-r) !important; } .zb-theme .btn.btn-primary, .zb-theme .btn.btn-success { background-color: var(--zb-green) !important; border-color: var(--zb-green) !important; color: #fff !important; box-shadow: 0 6px 16px rgba(37, 211, 102, .28); } .zb-theme .btn.btn-primary:hover, .zb-theme .btn.btn-primary:focus, .zb-theme .btn.btn-success:hover, .zb-theme .btn.btn-success:focus { background-color: var(--zb-green-ink) !important; border-color: var(--zb-green-ink) !important; color: #fff !important; box-shadow: 0 10px 24px rgba(37, 211, 102, .34); } .zb-theme .btn.btn-warning { background-color: var(--zb-gold) !important; border-color: var(--zb-gold) !important; color: var(--zb-ink) !important; box-shadow: 0 6px 16px rgba(252, 209, 22, .3); } .zb-theme .btn.btn-warning:hover, .zb-theme .btn.btn-warning:focus { background-color: var(--zb-gold-600) !important; border-color: var(--zb-gold-600) !important; color: var(--zb-ink) !important; } .zb-theme .btn.btn-danger { background-color: var(--zb-red) !important; border-color: var(--zb-red) !important; color: #fff !important; } .zb-theme .btn.btn-danger:hover, .zb-theme .btn.btn-danger:focus { background-color: var(--zb-red-600) !important; border-color: var(--zb-red-600) !important; color: #fff !important; } .zb-theme .btn.btn-dark { background-color: var(--zb-ink) !important; border-color: var(--zb-ink) !important; color: #fff !important; } .zb-theme .btn.btn-dark:hover { background-color: #000 !important; border-color: #000 !important; color: #fff !important; } /* Secondary is the "Close"/"Cancel" button next to a green primary. A black block there competes with the primary for attention - it should recede. */ .zb-theme .btn.btn-secondary { background-color: var(--zb-surface) !important; border-color: var(--zb-border) !important; color: var(--zb-ink-soft) !important; } .zb-theme .btn.btn-secondary:hover { background-color: #f5f6f6 !important; border-color: var(--zb-border) !important; color: var(--zb-ink) !important; } .zb-theme .btn.btn-default, .zb-theme .btn.btn-light { background-color: var(--zb-surface) !important; border-color: var(--zb-border) !important; color: var(--zb-ink) !important; box-shadow: var(--zb-shadow-xs); } .zb-theme .btn.btn-default:hover, .zb-theme .btn.btn-light:hover { border-color: var(--zb-green) !important; color: var(--zb-green-ink) !important; } .zb-theme .btn.btn-outline-primary, .zb-theme .btn.btn-outline-success { background-color: transparent !important; border-color: var(--zb-green) !important; color: var(--zb-green-ink) !important; } .zb-theme .btn.btn-outline-primary:hover, .zb-theme .btn.btn-outline-success:hover { background-color: var(--zb-green) !important; border-color: var(--zb-green) !important; color: #fff !important; } .zb-theme .btn.btn-outline-danger { background-color: transparent !important; border-color: var(--zb-red) !important; color: var(--zb-red) !important; } .zb-theme .btn.btn-outline-danger:hover { background-color: var(--zb-red) !important; color: #fff !important; } .zb-theme .btn.btn-link { box-shadow: none; color: var(--zb-green-ink) !important; } .zb-theme .btn.btn-link:hover { transform: none; text-decoration: underline; } .zb-theme .btn:disabled, .zb-theme .btn.disabled { opacity: .55; transform: none !important; box-shadow: none !important; } /* circular icon buttons keep their own shape - the generic radius/padding above would turn them into ovals */ .zb-theme .btn.rounded-circle { border-radius: 50% !important; padding: 10px; line-height: 1; } /* ========================================================================= Forms ========================================================================= */ .zb-theme label, .zb-theme .form-control-label { margin-bottom: 6px; color: var(--zb-ink); font-size: .84rem; font-weight: 600; } .zb-theme .form-control, .zb-theme .custom-select, .zb-theme textarea.form-control { background-color: var(--zb-surface-2); border: 1px solid var(--zb-border); border-radius: var(--zb-r-sm); padding: 11px 15px; height: auto; color: var(--zb-ink); font-size: .92rem; box-shadow: none; transition: border-color var(--zb-t), box-shadow var(--zb-t), background-color var(--zb-t); } .zb-theme .form-control:focus, .zb-theme .custom-select:focus { background-color: var(--zb-surface); border-color: var(--zb-green); box-shadow: 0 0 0 4px rgba(37, 211, 102, .18); color: var(--zb-ink); } .zb-theme .form-control::placeholder { color: var(--zb-muted); opacity: .8; } .zb-theme .form-control.is-invalid, .zb-theme .form-control.lw-is-invalid { border-color: var(--zb-red); box-shadow: 0 0 0 4px rgba(206, 17, 38, .1); } .zb-theme .invalid-feedback, .zb-theme .lw-invalid-feedback { color: var(--zb-red); font-size: .8rem; } .zb-theme .form-text, .zb-theme .help-text { color: var(--zb-muted); font-size: .8rem; } .zb-theme .input-group-text { background-color: var(--zb-surface-2); border: 1px solid var(--zb-border); border-radius: var(--zb-r-sm); color: var(--zb-muted); } .zb-theme .input-group > .form-control:not(:last-child), .zb-theme .input-group > .input-group-prepend > .input-group-text { border-top-right-radius: 0; border-bottom-right-radius: 0; } .zb-theme .input-group > .form-control:not(:first-child), .zb-theme .input-group > .input-group-append > .input-group-text { border-top-left-radius: 0; border-bottom-left-radius: 0; } /* ---------- Selectize ---------- */ .zb-theme .selectize-input { background: var(--zb-surface-2) !important; border: 1px solid var(--zb-border) !important; border-radius: var(--zb-r-sm) !important; padding: 10px 15px !important; color: var(--zb-ink); box-shadow: none !important; transition: border-color var(--zb-t), box-shadow var(--zb-t); } .zb-theme .selectize-input.focus { background: var(--zb-surface) !important; border-color: var(--zb-green) !important; box-shadow: 0 0 0 4px rgba(37, 211, 102, .18) !important; } .zb-theme .selectize-dropdown { background: var(--zb-surface); border: 1px solid var(--zb-border); border-radius: var(--zb-r-sm); box-shadow: var(--zb-shadow-md); color: var(--zb-ink); overflow: hidden; } .zb-theme .selectize-dropdown .active { background: var(--zb-green-050); color: var(--zb-green-ink); } .zb-theme .selectize-input .item { background: var(--zb-green-050) !important; border-radius: var(--zb-r-pill); color: var(--zb-green-ink) !important; padding: 2px 10px; } /* ---------- Switchery ---------- */ .zb-theme .switchery { border-radius: var(--zb-r-pill); } .zb-theme .switchery-small { height: 22px; width: 38px; } /* ---------- FilePond ---------- */ .zb-theme .filepond--panel-root { background-color: var(--zb-surface-2); border: 1px dashed var(--zb-border); border-radius: var(--zb-r) !important; } .zb-theme .filepond--drop-label { color: var(--zb-muted); } .zb-theme .filepond--label-action { text-decoration-color: var(--zb-green); color: var(--zb-green-ink); } .zb-theme .filepond--item-panel { background-color: var(--zb-green-ink); border-radius: var(--zb-r-sm); } /* ========================================================================= Tables ========================================================================= */ .zb-theme .table { color: var(--zb-ink); margin-bottom: 0; } .zb-theme .table thead th, .zb-theme .table .thead-light th { background-color: var(--zb-nav) !important; border-top: 0 !important; border-bottom: 1px solid var(--zb-border) !important; padding: 13px 18px; color: var(--zb-muted) !important; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; } .zb-theme .table td { padding: 14px 18px; border-top: 1px solid var(--zb-border-soft); color: var(--zb-ink-soft); font-size: .9rem; vertical-align: middle; } /* Neutral grey on hover, not a green tint - green is reserved for the selected state, the way WhatsApp Web separates "cursor is over this row" from "this is the open chat". */ .zb-theme .table tbody tr { transition: background-color var(--zb-t); } .zb-theme .table tbody tr:hover { background-color: #f5f6f6; } .zb-theme .table.table-striped tbody tr:nth-of-type(odd) { background-color: transparent; } .zb-theme .table.table-striped tbody tr:nth-of-type(odd):hover { background-color: #f5f6f6; } .zb-theme .table-responsive { border-radius: var(--zb-r-sm); } /* ---------- DataTables chrome ---------- */ .zb-theme .dataTables_wrapper { padding-top: 4px; } .zb-theme .dataTables_filter input, .zb-theme .dataTables_length select { background-color: var(--zb-surface-2); border: 1px solid var(--zb-border) !important; border-radius: var(--zb-r-sm) !important; padding: 8px 14px !important; color: var(--zb-ink); font-size: .88rem; transition: border-color var(--zb-t), box-shadow var(--zb-t); } .zb-theme .dataTables_filter input:focus, .zb-theme .dataTables_length select:focus { outline: none; background-color: var(--zb-surface); border-color: var(--zb-green) !important; box-shadow: 0 0 0 4px rgba(37, 211, 102, .18); } .zb-theme .dataTables_filter label, .zb-theme .dataTables_length label, .zb-theme .dataTables_info { color: var(--zb-muted) !important; font-size: .84rem; font-weight: 500; } .zb-theme table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before, .zb-theme table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before { background-color: var(--zb-green) !important; border-color: var(--zb-surface) !important; box-shadow: none; } .zb-theme table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before { background-color: var(--zb-red) !important; } /* ========================================================================= Pagination - same shape as the public marketplace's ========================================================================= */ .zb-theme .page-item { margin: 0 3px; } .zb-theme .page-link, .zb-theme .paginate_button { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 12px; background-color: var(--zb-surface) !important; border: 1px solid var(--zb-border) !important; border-radius: var(--zb-r-sm) !important; color: var(--zb-ink-soft) !important; font-size: .86rem; font-weight: 600; box-shadow: none; transition: transform var(--zb-t), border-color var(--zb-t), color var(--zb-t), background-color var(--zb-t); } .zb-theme .page-link:hover, .zb-theme .paginate_button:hover { transform: translateY(-1px); border-color: var(--zb-green) !important; color: var(--zb-green-ink) !important; } .zb-theme .page-item.active .page-link, .zb-theme .paginate_button.current { background-color: var(--zb-green) !important; border-color: var(--zb-green) !important; color: #fff !important; box-shadow: 0 6px 16px rgba(37, 211, 102, .28); } .zb-theme .page-item.disabled .page-link, .zb-theme .paginate_button.disabled { background-color: var(--zb-nav) !important; color: var(--zb-muted) !important; opacity: .6; } /* ========================================================================= Badges / alerts / progress / list groups ========================================================================= */ .zb-theme .badge { padding: 5px 11px; border-radius: var(--zb-r-pill); font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .zb-theme .badge.badge-success, .zb-theme .badge.badge-primary { background-color: var(--zb-green) !important; color: #fff !important; } .zb-theme .badge.badge-warning { background-color: var(--zb-gold) !important; color: var(--zb-ink) !important; } .zb-theme .badge.badge-danger { background-color: var(--zb-red) !important; color: #fff !important; } .zb-theme .badge.badge-info { background-color: var(--zb-ink) !important; color: #fff !important; } .zb-theme .badge.badge-secondary, .zb-theme .badge.badge-light { background-color: var(--zb-border-soft) !important; color: var(--zb-muted) !important; } .zb-theme .alert { border: 1px solid transparent; border-radius: var(--zb-r); padding: 14px 18px; font-size: .9rem; box-shadow: none; } .zb-theme .alert.alert-success { background-color: var(--zb-green-050) !important; border-color: rgba(37, 211, 102, .35) !important; color: var(--zb-green-ink) !important; } .zb-theme .alert.alert-warning { background-color: var(--zb-gold-050) !important; border-color: rgba(252, 209, 22, .5) !important; color: #6b5200 !important; } .zb-theme .alert.alert-danger { background-color: var(--zb-red-050) !important; border-color: rgba(206, 17, 38, .28) !important; color: var(--zb-red-600) !important; } .zb-theme .alert.alert-danger a, .zb-theme .alert.alert-danger .text-white { color: var(--zb-red-600) !important; } .zb-theme .alert.alert-warning a, .zb-theme .alert.alert-warning .text-white { color: #6b5200 !important; } .zb-theme .progress { height: 8px; background-color: var(--zb-border-soft); border-radius: var(--zb-r-pill); box-shadow: none; } .zb-theme .progress-bar { background-color: var(--zb-green); border-radius: var(--zb-r-pill); } .zb-theme .list-group-item { background-color: var(--zb-surface); border-color: var(--zb-border); color: var(--zb-ink-soft); } /* ========================================================================= Modals / dialogs / toasts ========================================================================= */ .zb-theme .modal-content { background-color: var(--zb-surface); border: 0; border-radius: var(--zb-r-lg); box-shadow: var(--zb-shadow-lg); overflow: hidden; } /* Header kept light rather than the near-black it was: a black bar at the top of every dialog is the same "forced darkness" as the sidebar and page header. The modal's shape, radius, padding and shadow are unchanged. */ .zb-theme .modal-header { background-color: var(--zb-surface); border-bottom: 1px solid var(--zb-border-soft); padding: 18px 24px; color: var(--zb-ink); } .zb-theme .modal-header .modal-title { color: var(--zb-ink); font-size: 1.05rem; font-weight: 600; } .zb-theme .modal-header .close { color: var(--zb-muted); opacity: .9; text-shadow: none; transition: color var(--zb-t); } .zb-theme .modal-header .close:hover { color: var(--zb-ink); opacity: 1; } .zb-theme .modal-body { padding: 24px; } .zb-theme .modal-footer { background-color: var(--zb-nav); border-top: 1px solid var(--zb-border); padding: 16px 24px; } .zb-theme .modal-backdrop.show { opacity: .6; } .zb-theme div:where(.swal2-container) div:where(.swal2-popup) { background-color: var(--zb-surface) !important; border: 0 !important; border-radius: var(--zb-r-lg) !important; box-shadow: var(--zb-shadow-lg); color: var(--zb-ink); } .zb-theme div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm { background-color: var(--zb-green) !important; border-radius: var(--zb-r-sm) !important; font-weight: 600; } .zb-theme div:where(.swal2-container) button:where(.swal2-styled).swal2-cancel { background-color: var(--zb-nav) !important; border-radius: var(--zb-r-sm) !important; color: var(--zb-ink-soft) !important; font-weight: 600; } .zb-theme .mdtoast { border-radius: var(--zb-r-sm); font-weight: 500; } .zb-theme .mdtoast.mdt--success, .zb-theme .mdtoast.mdt--primary { background-color: var(--zb-green) !important; } .zb-theme .mdtoast.mdt--danger, .zb-theme .mdtoast.mdt--error { background-color: var(--zb-red) !important; } .zb-theme .mdtoast.mdt--warning { background-color: var(--zb-gold) !important; color: var(--zb-ink) !important; } /* ========================================================================= Dropdowns & tabs ========================================================================= */ .zb-theme .dropdown-menu { background-color: var(--zb-surface); border: 1px solid var(--zb-border); border-radius: var(--zb-r); padding: 8px; box-shadow: var(--zb-shadow-md); } .zb-theme .dropdown-item { border-radius: var(--zb-r-sm); padding: 9px 14px; color: var(--zb-ink-soft); font-size: .89rem; font-weight: 500; transition: background-color var(--zb-t), color var(--zb-t); } .zb-theme .dropdown-item:hover, .zb-theme .dropdown-item:focus { background-color: #f5f6f6 !important; color: var(--zb-ink) !important; } .zb-theme .dropdown-item.active, .zb-theme .dropdown-menu .active a.dropdown-item { background-color: var(--zb-green-050) !important; color: var(--zb-green-ink) !important; } .zb-theme .dropdown-item:before { display: none; } .zb-theme .dropdown-header.noti-title { padding: 8px 14px; color: var(--zb-muted); } .zb-theme .dropdown-divider { border-color: var(--zb-border); } .zb-theme .nav-tabs { border-bottom: 1px solid var(--zb-border); } .zb-theme .nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 11px 18px; background-color: transparent !important; color: var(--zb-muted) !important; font-size: .9rem; font-weight: 600; transition: color var(--zb-t), border-color var(--zb-t); } .zb-theme .nav-tabs .nav-link:hover { color: var(--zb-ink) !important; } .zb-theme .nav-tabs .nav-link.active { background-color: transparent !important; border-bottom-color: var(--zb-green) !important; color: var(--zb-green-ink) !important; } .zb-theme .nav-pills .nav-link.active { background-color: var(--zb-green) !important; border-radius: var(--zb-r-sm); color: #fff !important; } /* ========================================================================= Marketplace cards in the console - the one place the full hover lift is kept, because these cards are genuinely clickable (see resources/views/marketplace/section.blade.php) ========================================================================= */ .zb-theme .lw-mp-card { background-color: var(--zb-surface); border-color: var(--zb-border); border-radius: var(--zb-r); box-shadow: var(--zb-shadow-xs); } .zb-theme .lw-mp-card:hover { box-shadow: var(--zb-shadow-md); } .zb-theme .lw-mp-badge-featured { background-color: var(--zb-green); } .zb-theme .lw-mp-badge-promo { background-color: var(--zb-gold); color: var(--zb-ink); } .zb-theme .lw-mp-badge-hot { background-color: var(--zb-red); } .zb-theme .lw-mp-name { color: var(--zb-ink); } .zb-theme .lw-mp-desc { color: var(--zb-muted); } .zb-theme .lw-mp-price { color: var(--zb-ink); } .zb-theme .lw-mp-category { color: var(--zb-green-ink); } /* ========================================================================= WhatsApp Web clone - the vendor chat screen ------------------------------------------------------------------------- Two jobs in this section: 1. LAYOUT - hold the flex chain together so the message list scrolls inside its own box and the compose bar stays pinned. Every height here comes from flex, never from a viewport calculation. 2. SKIN - make it read like WhatsApp Web: chat-list rows with avatar + preview + time, pill search, bubble tails, day separators, the #efeae2 wallpaper, and the grey compose tray. What it has to fight -------------------- `dist/css/whatsapp-chat.css` loads BEFORE this file and sizes the chat with fixed viewport arithmetic that does not survive a real screen: .conversation-container height: calc(100vh - 380px) .lw-contact-list-block (>=768px) height: calc(90vh - 100px); overflow:hidden .conversation-compose height: 50px .emojionearea width: 300px; margin-left: 25px and it forces `display: block !important` on both side rails at >=768px. Hence the !important flags and the long `.card.lw-whatsapp-chat-block-container` prefixes below - they exist to out-specify that sheet, not by preference. The DOM is not what it looks like --------------------------------- Verified against a running instance, not read off the Blade: .page > .marvel-device > .screen > .screen-container > .chat#lwChatWindowBox >

<-- UNCLASSED, no id. Sole child of #lwChatWindowBox. > .user-bar > .conversation > .conversation-container#lwConversionChatContainer > <-- x-show wrapper; the SPAN is the flex item, not the form > form.conversation-compose That unclassed div (a leftover wrapper around a commented-out `