:root { --msb-bg: #fafafa; --msb-fg: #111; --msb-muted: #6b6b6b; --msb-border: #e2e2e2; --msb-accent: #111; --msb-radius: 14px; /* Platform-wide theme (Settings > Branding & Login > Platform Appearance) -- these get overridden per-request by an inline :root block from MSB_Settings::platform_theme_css(); the fallbacks below match the plugin's original built-in look, and are what's used until an admin customizes them. Scoped to this stylesheet only, which is never loaded on a customer's own built site -- see that class's docblock for why. */ --msb-font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --msb-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --msb-btn-radius: 10px; --msb-btn-pad-y: 11px; --msb-btn-pad-x: 16px; --msb-page-width-wide: 1160px; --msb-header-width: none; } * { box-sizing: border-box; } body.msb-frontend { margin: 0; font-family: var(--msb-font-body); background: var(--msb-bg); color: var(--msb-fg); -webkit-font-smoothing: antialiased; } body.msb-frontend h1, body.msb-frontend h2, body.msb-frontend h3 { font-family: var(--msb-font-heading); } .msb-topbar { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid var(--msb-border); } .msb-topbar-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 14px 16px; width: 100%; max-width: var(--msb-header-width, none); margin: 0 auto; box-sizing: border-box; } .msb-topbar h1 { font-size: 17px; margin: 0; } .msb-topbar-logo { display: flex; align-items: center; text-decoration: none; } .msb-topbar-textlogo { font-size: 17px; font-weight: 700; color: var(--msb-fg); } .msb-topbar-links { display: flex; align-items: center; gap: 16px; } .msb-topbar-links a { color: var(--msb-muted); text-decoration: none; font-size: 14px; } .msb-topbar-links a.msb-nav-active { color: var(--msb-fg); font-weight: 600; } .msb-topbar-user { color: var(--msb-fg); font-size: 13px; font-weight: 600; } .msb-topbar-cta { background: var(--msb-accent); color: #fff !important; padding: 6px 12px; border-radius: 8px; } /* v7.14.0 (Screenshot_9): each desktop nav item is now an icon + label pair, so the item itself has to be a flex box with its own internal gap -- the 16px below is the space BETWEEN items, and the 7px inside .msb-nav-common a is the space between an item's icon and its text. Without the padding, 16px of tracking measured from the icon edge reads visually tighter than 16px between two plain words did. */ .msb-nav-common { display: flex; align-items: center; gap: 16px; } /* v7.17.0 (Screenshot 18): 7px between an item's icon and its own label read as too loose once every desktop nav item became an icon+label pair -- this wrapper is already desktop-only (see msb-nav-desktop-only above), so tightening it here doesn't touch the mobile menu at all. */ .msb-nav-common a { display: inline-flex; align-items: center; gap: 4px; padding: 6px 2px; border-radius: 6px; white-space: nowrap; transition: color .15s ease; } .msb-nav-common a .msb-user-dropdown-icon { margin-right: 0; opacity: .6; flex: 0 0 auto; } .msb-nav-common a:hover { color: var(--msb-fg); } .msb-nav-common a:hover .msb-user-dropdown-icon { opacity: .9; } .msb-nav-common a.msb-nav-active .msb-user-dropdown-icon { opacity: 1; } .msb-mobile-menu-trigger { background: none; border: none; cursor: pointer; padding: 6px; color: var(--msb-fg); display: none; } .msb-mobile-menu-panel { display: none; position: absolute; right: 16px; top: calc(100% + 4px); background: #fff; border: 1px solid var(--msb-border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); min-width: 200px; overflow: hidden; z-index: 40; } .msb-mobile-menu-panel.msb-mobile-menu-open { display: block; } .msb-mobile-menu-panel a { display: block; padding: 12px 16px; font-size: 14px; text-decoration: none; color: var(--msb-fg); border-bottom: 1px solid var(--msb-border); } .msb-mobile-menu-panel a:last-child { border-bottom: none; } .msb-mobile-menu-panel a:hover { background: var(--msb-bg-alt, #f7f4f2); } @media (max-width: 780px) { .msb-nav-desktop-only { display: none !important; } .msb-mobile-menu-trigger { display: inline-flex; align-items: center; justify-content: center; } /* Only the avatar link and the hamburger button are visible in .msb-topbar-links at this width -- set the gap between them precisely to 10px, and drop the avatar's own extra right-margin so it doesn't stack on top of that gap. Both stay right-aligned exactly as before; only the spacing between the two changes. */ .msb-topbar-links { gap: 10px; } .msb-mobile-avatar { margin-right: 0; } } @media (min-width: 781px) { .msb-nav-mobile-only { display: none !important; } } .msb-user-menu { position: relative; } .msb-user-trigger { background: none; border: none; font-size: 14px; font-weight: 600; color: var(--msb-fg); cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 4px 0; } .msb-user-trigger-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .msb-user-caret { font-size: 10px; opacity: .6; } .msb-avatar-img { border-radius: 50%; object-fit: cover; display: block; flex-shrink: 0; } .msb-avatar-fallback { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--msb-fg); color: #fff; font-weight: 700; flex-shrink: 0; } .msb-mobile-avatar { display: inline-flex; align-items: center; margin-right: 4px; } .msb-user-dropdown { display: none; position: absolute; right: 0; top: calc(100% + 8px); background: #fff; border: 1px solid var(--msb-border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); min-width: 210px; overflow: hidden; z-index: 40; } .msb-user-menu-open .msb-user-dropdown { display: block; } .msb-user-dropdown a { display: block; padding: 10px 14px; font-size: 14px; text-decoration: none; color: var(--msb-fg); border-bottom: 1px solid var(--msb-border); } .msb-user-dropdown a:last-child { border-bottom: none; } .msb-user-dropdown a:hover { background: var(--msb-bg-alt, #f7f4f2); } .msb-user-dropdown-icon { display: inline-block; vertical-align: -2px; margin-right: 8px; opacity: .75; } .msb-user-plan-badge { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--msb-border); background: var(--msb-bg-alt, #f7f4f2); } /* v7.9.6 (Screenshot_10): nowrap + a wider dropdown (170px -> 210px) so "Free Plan" never breaks onto two lines just because the Upgrade pill on the same row was squeezing it. */ .msb-user-plan-label { font-size: 13px; font-weight: 600; color: var(--msb-fg); white-space: nowrap; } /* v7.9.4 (Screenshot_6): the label + crown are wrapped in their own link straight to My Profile's Plan tab -- qualified with the parent class (not just "a") so it doesn't inherit .msb-user-dropdown a's block/border-bottom/hover-background styling meant for the full-width menu rows below it; this is an inline label sitting inside the badge row, not one of those rows itself. */ .msb-user-plan-badge a.msb-user-plan-link { display: inline-flex; align-items: center; gap: 5px; border-bottom: none; padding: 0; color: var(--msb-fg); text-decoration: none; } .msb-user-plan-badge a.msb-user-plan-link:hover { text-decoration: underline; background: none; } .msb-user-plan-crown { display: inline-block; flex-shrink: 0; } /* v7.9.1 fix: .msb-user-dropdown a's own color rule above (higher specificity: one class + tag vs. this single class) was winning over this pill's white text, making it read as black-on-black until :hover's lighter background accidentally revealed it. Qualifying the selector with .msb-user-dropdown a.msb-user-plan-upgrade matches that specificity so white always wins, in both states. */ .msb-user-dropdown a.msb-user-plan-upgrade { font-size: 12px; font-weight: 700; color: #fff !important; background: var(--msb-primary, #141414); padding: 4px 10px; border-radius: 999px; text-decoration: none; flex-shrink: 0; border-bottom: none; display: inline-block; } .msb-user-dropdown a.msb-user-plan-upgrade:hover { opacity: .85; background: var(--msb-primary, #141414); color: #fff !important; } .msb-container { padding: 16px; max-width: 640px; margin: 0 auto; padding-bottom: 96px; } .msb-container-wide { max-width: var(--msb-page-width-wide); } /* v7.56.6-v7.57.0: Manage Site page (#msb-manage-app) -- Leads + Domain tabs, reached via the Manage icon on each My Sites card. */ .msb-manage-back-link { display: inline-block; margin-bottom: 12px; font-size: 13px; font-weight: 600; color: inherit; text-decoration: none; opacity: .7; } .msb-manage-back-link:hover { opacity: 1; } .msb-manage-title { font-size: 22px; font-weight: 700; margin: 0 0 18px; } .msb-manage-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--msb-border); margin-bottom: 24px; } .msb-manage-tab-btn { background: none; border: none; padding: 10px 2px; font-size: 14px; font-weight: 600; color: #888; cursor: pointer; border-bottom: 2px solid transparent; } .msb-manage-tab-btn-active { color: #141414; border-bottom-color: #141414; } .msb-manage-tab-body { max-width: 680px; } /* v7.57.0: Leads tab toolbar + list -- was inline-styled (see Screenshot_23), rebuilt as real classes with consistent spacing so the filter/search/export row and each submission card have proper breathing room instead of everything jammed edge-to-edge. */ .msb-leads-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; } .msb-leads-toolbar select, .msb-leads-toolbar input[type="search"] { padding: 9px 10px; border: 1px solid var(--msb-border); border-radius: 8px; font-size: 13px; background: #fff; } /* v7.59.18 (Screenshot_58, direct request): the native dropdown arrow was sitting flush against the box's own right edge/border with no breathing room -- extra right padding just for the select (the search input doesn't have this arrow, so it keeps the plain 10px). */ .msb-leads-toolbar select { padding-right: 28px; } .msb-leads-toolbar select { flex: 1; min-width: 140px; } .msb-leads-toolbar input[type="search"] { flex: 2; min-width: 180px; } .msb-leads-toolbar .msb-btn { flex-shrink: 0; } .msb-lead-card { border: 1px solid var(--msb-border); border-radius: 12px; padding: 16px; margin-bottom: 12px; } .msb-lead-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .msb-lead-card-name { font-size: 15px; font-weight: 700; } .msb-lead-card-meta { font-size: 12px; color: #888; margin-top: 3px; } .msb-lead-source-badge { font-weight: 600; } .msb-lead-details { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--msb-border); font-size: 13px; line-height: 1.7; } .msb-lead-field strong { font-weight: 600; margin-right: 4px; } .msb-leads-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; font-size: 12px; color: #888; } .msb-leads-footer-actions { display: flex; gap: 8px; } /* v7.57.0: Domain tab's own sub-navigation (My Domain / Search & Buy / Manage DNS) -- a smaller, secondary pill row nested under the Leads/Domain top-level tabs above, per direct request for a clean dedicated place for domain search, purchase and DNS management. */ .msb-domain-subtabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; } .msb-domain-subtab-btn { background: #f4f2ef; border: 1px solid transparent; border-radius: 999px; padding: 7px 14px; font-size: 12.5px; font-weight: 600; color: #666; cursor: pointer; } .msb-domain-subtab-btn-active { background: #141414; color: #fff; } .msb-domain-subtab-btn:disabled { opacity: .45; cursor: not-allowed; } .msb-domain-section-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: #888; margin: 0 0 14px; } .msb-domain-field-row { margin-bottom: 14px; } .msb-domain-field-row label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; } .msb-domain-field-row input, .msb-domain-field-row select { width: 100%; padding: 9px 10px; border: 1px solid var(--msb-border); border-radius: 8px; font-size: 14px; box-sizing: border-box; } .msb-domain-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; } @media (max-width: 480px) { .msb-domain-field-grid { grid-template-columns: 1fr; } } .msb-domain-search-bar { display: flex; gap: 8px; margin-bottom: 18px; } .msb-domain-search-bar input { flex: 1; padding: 10px 12px; border: 1px solid var(--msb-border); border-radius: 8px; font-size: 14px; } .msb-domain-search-results { display: flex; flex-direction: column; gap: 10px; } .msb-domain-search-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--msb-border); border-radius: 10px; flex-wrap: wrap; } .msb-domain-search-row-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; } /* v7.59.3 (live-reported, Screenshot_17/18): name.com's own reason a domain isn't available (e.g. "Domain not available", registry- specific restrictions) surfaced right under the Taken pill, instead of a bare status with no explanation -- see resultRowHtml()'s own comment for why this matters (an "Environment: Test/OTE Sandbox" mismatch is the single most common cause of this looking wrong). */ .msb-domain-search-row-error { flex-basis: 100%; font-size: 12px; color: #a35a00; } .msb-domain-search-row-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .msb-domain-search-price { font-weight: 700; font-size: 14px; } .msb-domain-suggestions-title { font-size: 12.5px; font-weight: 700; color: #888; margin: 22px 0 10px; text-transform: uppercase; letter-spacing: .02em; } .msb-domain-purchase-status { border: 1px solid var(--msb-border); border-radius: 10px; padding: 14px 16px; margin-bottom: 18px; } .msb-domain-purchase-status-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } .msb-dns-table { width: 100%; border-collapse: collapse; font-size: 13px; } .msb-dns-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .02em; color: #888; padding: 0 8px 8px 0; } .msb-dns-table td { padding: 10px 8px 10px 0; border-top: 1px solid var(--msb-border); vertical-align: middle; } .msb-dns-table code { background: #f4f2ef; padding: 2px 6px; border-radius: 4px; } .msb-dns-add-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; align-items: flex-end; } .msb-dns-add-row > div { display: flex; flex-direction: column; gap: 4px; } .msb-dns-add-row label { font-size: 11.5px; font-weight: 600; color: #888; } .msb-dns-add-row input, .msb-dns-add-row select { padding: 8px 9px; border: 1px solid var(--msb-border); border-radius: 7px; font-size: 13px; } /* v7.59.0: My Profile > Domains -- reuses most Domain-tab classes above as-is; this just styles the inline site-picker and bare, unstyled inputs the tab first shipped with. v7.59.23 (direct request): compacted -- this form's own .msb-settings-form flex gap (10px) PLUS every child's own margin (a 14px-top section title, 14px-bottom fields, 18px hint) was compounding into enough total height that Save Access Settings needed a scroll to reach. Tightened every one of those individually rather than fighting the base .msb-settings-form gap globally (which other, unrelated tabs still rely on as-is), and the days field now sits on ONE row with its own label instead of stacked on two, since a 3-character number input never needed a full-width line to itself. v7.59.26 (Screenshot_72, direct request): compacted further -- the form's own 6px flex gap was STACKING on top of each field's own margin-bottom (8px), so the actual visible gap between a field and the next line was their sum (14px), not just the smaller of the two. Cut each field's own margin-bottom down to 2px so the flex gap does most of the work and the two no longer double up. */ .msb-access-control-form { gap: 6px; } .msb-access-control-form .msb-section-title { margin: 8px 0 2px; } .msb-access-control-form .msb-access-field { margin-bottom: 2px; } .msb-access-control-form .msb-access-field label { display: block; font-size: 13px; font-weight: 600; color: var(--msb-fg); margin-bottom: 5px; } .msb-access-control-form .msb-access-field-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 2px; } .msb-access-control-form .msb-access-field-row label { font-size: 13px; font-weight: 600; color: var(--msb-fg); } .msb-access-password-wrap { position: relative; } .msb-access-password-wrap input { width: 100%; box-sizing: border-box; padding: 10px 40px 10px 12px; border: 1px solid var(--msb-border); border-radius: 8px; font-size: 14px; } .msb-access-password-toggle { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: none; border: none; border-radius: 6px; cursor: pointer; color: var(--msb-muted); padding: 0; } .msb-access-password-toggle:hover { background: #f4f4f5; color: var(--msb-fg); } .msb-access-password-toggle svg { width: 18px; height: 18px; } .msb-access-days-input { width: 80px; flex-shrink: 0; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--msb-border); border-radius: 8px; font-size: 14px; text-align: center; } .msb-access-control-form .msb-access-subtext { margin: 4px 0 0; } .msb-access-control-form .msb-settings-divider { margin: 6px 0; } /* v7.59.26 (Screenshot_76, direct request): the status note ("This site is currently Public/Private...") was inheriting the same 12px as every other small hint in this tab -- bumped a touch so it reads comfortably across two lines instead of being cramped small text. */ .msb-access-control-form .msb-access-status-note { font-size: 13px; line-height: 1.5; } /* Overrides the generic ".msb-sheet select" rule below (width:100%, bigger padding) which has higher specificity than a single class and was silently winning over every size tweak here -- that's the actual reason this dropdown kept overflowing no matter how its own padding was adjusted. Two classes beats one class + one element, so this wins reliably regardless of where in the sheet it's rendered. */ .msb-sheet .msb-page-status-select { width: auto; font-size: 12px; padding: 12px 6px; border-radius: 6px; border: 1px solid var(--msb-border); background: #fff; color: #1a1a1a; flex-shrink: 0; cursor: pointer; box-sizing: border-box; } /* ---- Editor: full-width live preview is the entire interface now -- there's no Content panel at all. Every edit happens by tapping directly on a section in the preview, which opens a popup covering everything in that section. Settings (fonts/colors/backgrounds/ width/widgets) is reached via a small floating button, on every screen size. ---- */ .msb-editor-full { max-width: 1300px; margin: 0 auto; padding: 20px 16px 100px; } .msb-preview-wrap iframe { height: 80vh; } @media (max-width: 899px) { .msb-preview-wrap iframe { height: calc(100vh - 220px); } } /* ---- Editor screen locked to 100vh (Screenshot_19): the whole page never scrolls -- only the preview area does, internally. Topbar and the fixed bottom bar keep their natural heights; everything between them is one flex column that fills exactly the space left over, so there is never a page-scroll gap below the bottom bar or an over-tall iframe pushing the page past one screen. Scoped to the editor only. ---- */ body.msb-editor-page { height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; } body.msb-editor-page .msb-topbar { flex: 0 0 auto; } body.msb-editor-page #msb-editor-app { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } body.msb-editor-page .msb-editor-full { /* width:100% is required here -- without it, a flex item with auto left/right margins (used below to center it under the old max-width cap) shrinks to its CONTENT's intrinsic width instead of stretching to fill the row, which is what made the live preview render as a narrow ~300px column with huge empty gutters on either side, on both mobile and desktop. The max-width cap itself is also dropped per request -- the preview now fills the entire available area on every screen size instead of capping at 1300px on wide desktops. */ flex: 1 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column; padding: 5px; overflow: hidden; } @media (min-width: 900px) { body.msb-editor-page .msb-editor-full { padding: 10px; } } body.msb-editor-page .msb-preview-wrap { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; margin-bottom: 0; } body.msb-editor-page .msb-preview-wrap iframe { height: 100%; min-height: 100%; } body.msb-editor-page .msb-bottom-bar { position: relative; flex: 0 0 auto; } /* ---- Page switcher dropdown, centered in the bottom bar (only shown once a site has more than one page) ---- */ .msb-page-switch-wrap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5; /* Doesn't take part in the bar's own flex layout -- the bar itself is always a positioned element (fixed by default, relative in the 100vh editor layout) -- so this sits dead-center regardless of how wide the icon groups on either side are. */ } .msb-page-switch-btn { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--msb-border); border-radius: 8px; background: var(--msb-bg-alt, #f7f4f2); font-size: 13px; font-weight: 600; cursor: pointer; color: inherit; } .msb-page-switch-btn svg { width: 16px; height: 16px; flex-shrink: 0; opacity: .6; } .msb-page-switch-home { font-weight: 400; color: var(--msb-muted); } .msb-page-switch-menu { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 30; min-width: 220px; max-height: 320px; overflow-y: auto; background: #fff; border: 1px solid var(--msb-border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 6px; } .msb-page-switch-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 10px; border: none; background: none; border-radius: 8px; cursor: pointer; font-size: 13px; color: inherit; text-align: left; } .msb-page-switch-item:hover { background: var(--msb-bg-alt, #f7f4f2); } /* On a narrow/mobile screen there's no room to sit inline between the two icon groups, so it floats just above the bar instead, still centered. */ @media (max-width: 600px) { .msb-page-switch-wrap { position: fixed; left: 50%; top: auto; bottom: calc(85px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); } } /* ---- v7.40.0 (Screenshot_39): reverted back to floating -- the v7.39.0 full-width strip this replaced ate a whole extra row of vertical space that used to belong to the live preview. This row is now zero-height (position:relative + height:0) and the pill itself is absolutely positioned to float 10px above wherever .msb-bottom-bar (the very next element in the DOM) actually starts -- so it takes no layout space of its own at all, exactly like the original floating pill did, while still landing precisely above the icon row regardless of how tall that row is at a given breakpoint (no guessed pixel offset to keep in sync with the icon-size media queries below). */ .msb-bar-page-switch-row { display: none; } body.msb-editor-page .msb-bar-page-switch-row { display: block; position: relative; height: 0; flex: 0 0 auto; z-index: 25; } @media (min-width: 1280px) { body.msb-editor-page .msb-bar-page-switch-row { display: none; } } body.msb-editor-page .msb-bar-page-switch-row .msb-page-switch-wrap { position: absolute; bottom: 10px; left: 50%; top: auto; transform: translateX(-50%); width: auto; max-width: calc(100vw - 32px); } body.msb-editor-page .msb-bar-page-switch-row .msb-page-switch-btn { width: auto; } body.msb-editor-page .msb-bar-page-switch-row .msb-page-switch-menu { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); width: max-content; min-width: 220px; max-width: calc(100vw - 32px); } .msb-field-row .preview { display: flex; align-items: center; gap: 6px; } .msb-edit-icon { font-size: 13px; opacity: 0.6; } .msb-settings-form { display: flex; flex-direction: column; gap: 10px; } .msb-settings-form label { font-size: 13px; font-weight: 600; display: block; } .msb-settings-form input[type="text"], .msb-settings-form input[type="email"], .msb-settings-form select { width: 100%; padding: 9px 10px; border: 1px solid var(--msb-border); border-radius: 8px; font-size: 14px; margin-top: 4px; } .msb-settings-hint { font-size: 12px; color: var(--msb-muted); margin: -4px 0 0; line-height: 1.5; } .msb-settings-form .msb-section-title { margin: 14px 0 4px; } .msb-page-name-url-row { display: flex; gap: 10px; } /* v7.9.8 (Screenshot_28/29): Domain tab clean-up. Own gap + its own hint spacing (not the -4px "pull up under a label" rule above, which was written for label+input pairs, not hint+button pairs) so notes and controls don't crowd each other. */ .msb-settings-divider { border: none; border-top: 1px solid var(--msb-border); margin: 4px 0 2px; } .msb-domain-panel { display: flex; flex-direction: column; gap: 12px; } .msb-domain-panel .msb-settings-hint { margin: 0; } .msb-domain-input-row input[type="text"] { width: 100%; padding: 9px 10px; border: 1px solid var(--msb-border); border-radius: 8px; font-size: 14px; } /* v7.59.1 (direct request, Screenshot_10): "My Domain" (a connected domain's status/DNS/verify/remove view) redesigned as one clean bordered card with real breathing room, instead of the previous tightly-packed name+pills+boxes with no card/wrapper at all -- pills especially had almost no gap and no wrapping room, causing the cramped look in that screenshot. */ .msb-domain-card { border: 1px solid var(--msb-border); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 16px; } .msb-domain-current-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 16px; } .msb-domain-current-row strong { font-size: 17px; } .msb-domain-current-row .msb-status-pill { margin: 0; } .msb-domain-dns-group { display: flex; flex-direction: column; gap: 10px; } .msb-domain-dns-box { background: var(--msb-bg-alt, #f6f5f3); border: 1px solid var(--msb-border); border-radius: 10px; padding: 14px 16px; font-size: 13.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; line-height: 1.6; } .msb-domain-dns-box code { background: transparent; padding: 0; } /* v7.10.19 (Screenshot_14): "currently set to" box sits above the "change to" target box -- same shape, color-coded by whether the live lookup already matches the required target so the customer can tell at a glance whether they still need to act. */ .msb-domain-dns-current { border-style: dashed; } .msb-domain-dns-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; opacity: .75; } .msb-domain-dns-current-none { background: transparent; color: var(--msb-muted); } .msb-domain-dns-current-mismatch { background: #fff8e6; border-color: #f0d38a; color: #8a6100; } .msb-domain-dns-current-match { background: #eafaf0; border-color: #a6e6c1; color: #14622f; } .msb-domain-dns-check { font-weight: 700; } .msb-domain-action-row { display: flex; gap: 10px; margin-top: 4px; } .msb-domain-action-row .msb-btn { flex: 1; } /* Remove is destructive but shouldn't shout as loud as Verify -- quiet outline/red-text treatment instead of a second identical black bar. */ .msb-btn-outline-danger { background: #fff; color: #c62828; border-color: #f0c3c3; } .msb-btn-outline-danger:hover { background: #fdf0f0; border-color: #e39b9b; } .msb-page-name-url-row label { flex: 1; min-width: 0; } @media (max-width: 600px) { .msb-page-name-url-row { flex-direction: column; gap: 10px; } } .msb-panel-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--msb-border); margin-bottom: 18px; overflow-x: auto; } .msb-panel-tab { background: none; border: none; padding: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--msb-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; flex-shrink: 0; } .msb-panel-tab-active { color: var(--msb-fg); border-bottom-color: var(--msb-fg); } /* Screenshot_5 (direct request): the Site Settings tab row (also shared by the Home/Pages sheet and the image/icon pickers, all via the same .msb-panel-tabs/.msb-panel-tab base) used a flat 24px gap at every width -- fine on the 1280px+ desktop panel where there's plenty of room, but on a phone-width sheet 4 longer labels (Integrations/Domain/Access/Backups) could outrun the available width and need a horizontal scroll to reach the last one. Tightened progressively below the desktop-panel breakpoint so the row keeps fitting without scrolling even on the narrowest phones; unchanged at 1280px+. */ @media (max-width: 1279px) { .msb-panel-tabs { gap: 18px; } } @media (max-width: 480px) { .msb-panel-tabs { gap: 13px; } .msb-panel-tab { font-size: 13px; } } @media (max-width: 360px) { .msb-panel-tabs { gap: 10px; } .msb-panel-tab { font-size: 12px; } } /* v7.19.11 (Screenshots 32/33): was var(--msb-muted), a mid grey that sat almost invisibly against the panel -- easy to miss the one signal telling you your change was actually saved. Pure black, since this is transient text that only appears while something is happening. */ .msb-save-status { margin-left: auto; align-self: center; font-size: 12px; color: #000; font-weight: 600; padding-bottom: 10px; } /* ---- SEO tab: horizontal page-select row (v7.5.6) -- replaces the old dropdown. Wraps to a new line while it fits; once there are more pages than comfortably fit (5+), it switches to a single scrollable/swipeable row instead of wrapping or shrinking each tab. ---- */ .msb-seo-page-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .msb-seo-page-tabs-swipe { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .msb-seo-page-tabs-swipe::-webkit-scrollbar { display: none; } .msb-seo-page-tab { flex-shrink: 0; background: var(--msb-bg-alt, #f2f0ee); border: 1px solid transparent; border-radius: 20px; padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--msb-muted); cursor: pointer; white-space: nowrap; } .msb-seo-page-tab-active { background: var(--msb-fg); color: var(--msb-bg); } /* ---- Customization sub-tabs (Colors/Typography/Buttons/Layout) ---- */ .msb-subtabs { display: flex; gap: 6px; margin-bottom: 16px; background: var(--msb-bg-alt, #f2f0ee); border-radius: 8px; padding: 3px; } .msb-subtab { flex: 1; background: none; border: none; padding: 7px 4px; font-size: 12px; font-weight: 600; color: var(--msb-muted); cursor: pointer; border-radius: 6px; } .msb-subtab-active { background: #fff; color: var(--msb-fg); box-shadow: 0 1px 3px rgba(0,0,0,.1); } .msb-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } /* Base Font Size / Desktop Scale / Mobile Scale (v7.5.7) -- one clean row on a normal panel width; falls back to two columns only if the panel itself is ever squeezed narrower than the fields can read. */ .msb-three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; } @media (max-width: 360px) { .msb-three-col { grid-template-columns: 1fr 1fr; } } /* ---- HSL color picker -- v7.77.3: Hue/Saturation/Lightness sliders removed (direct request), HEX row + drag-square swatch only remains */ .msb-hsl-picker { margin-bottom: 14px; } .msb-hsl-row { margin-bottom: 10px; } .msb-hsl-row label { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; margin-bottom: 4px; } .msb-hsl-hex-row { display: flex; gap: 8px; align-items: center; } .msb-hsl-hex { flex: 1; padding: 8px 10px; border: 1px solid var(--msb-border); border-radius: 8px; font-family: monospace; font-size: 13px; } .msb-color-swatch, .msb-hsl-swatch-btn { width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--msb-border); flex-shrink: 0; padding: 0; cursor: pointer; background-clip: padding-box; } /* ---- Custom color picker popover (v6.35.0) -- replaces native everywhere so mobile never hands off to the buggy OS/WebView color picker. ---- */ .msb-color-popover { z-index: 100000; background: #fff; border: 1px solid var(--msb-border); border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.18); padding: 12px; } .msb-cp-square { position: relative; width: 200px; height: 130px; border-radius: 8px; overflow: hidden; touch-action: none; cursor: crosshair; margin-bottom: 10px; } .msb-cp-square-thumb { position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.3); transform: translate(-7px, -7px); pointer-events: none; } .msb-cp-hue { position: relative; width: 200px; height: 14px; border-radius: 999px; margin-bottom: 12px; touch-action: none; cursor: pointer; background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); } .msb-cp-hue-thumb { position: absolute; top: -2px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.3); transform: translateX(-9px); pointer-events: none; } .msb-cp-live-hex { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .msb-cp-live-hex-swatch { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--msb-border); flex-shrink: 0; } .msb-cp-live-hex-value { font-family: monospace; font-size: 13px; font-weight: 600; letter-spacing: .02em; } /* Anchored (desktop) positioning is set inline via JS; this variant overrides it to center the picker on screen instead, used on a narrow/mobile viewport where anchoring next to the swatch can push the picker off-screen or under a thumb. */ .msb-cp-centered { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); max-height: calc(100vh - 32px); overflow-y: auto; } .msb-cp-mode-toggle { display: flex; gap: 4px; margin-bottom: 8px; } .msb-cp-mode-toggle button { flex: 1; padding: 5px 0; font-size: 11px; font-weight: 700; border: 1px solid var(--msb-border); border-radius: 6px; background: #fff; cursor: pointer; } .msb-cp-mode-toggle button.msb-cp-mode-active { background: #1a1a1a; color: #fff; border-color: #1a1a1a; } .msb-cp-mode-body input[type="text"] { width: 100%; padding: 8px 10px; border: 1px solid var(--msb-border); border-radius: 8px; font-family: monospace; font-size: 13px; } .msb-cp-mode-body { display: flex; gap: 6px; } .msb-cp-mode-body .msb-cp-hex-input { flex: 1; } .msb-cp-num { flex: 1; text-align: center; font-size: 10px; color: var(--msb-muted); } .msb-cp-num span { display: block; margin-bottom: 2px; font-weight: 700; } .msb-cp-num input { width: 100%; padding: 6px 2px; text-align: center; border: 1px solid var(--msb-border); border-radius: 6px; font-size: 12px; } /* ---- Harmony presets ---- */ .msb-harmony-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 14px; } .msb-harmony-btn { padding: 9px 6px; font-size: 12px; font-weight: 600; border: 1px solid var(--msb-border); border-radius: 8px; background: #fff; cursor: pointer; } .msb-harmony-btn-active { background: var(--msb-fg); color: #fff; border-color: var(--msb-fg); } /* ---- Secondary color roles ---- */ .msb-role-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--msb-border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; font-size: 13px; } .msb-role-toggle { flex-shrink: 0; width: 38px; height: 22px; } /* ---- Palette swatch cards ---- */ .msb-swatch-rows { margin-top: 4px; } .msb-swatch-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 10px; } .msb-swatch-card { border: 1px solid var(--msb-border); border-radius: 10px; overflow: hidden; background: #fff; } .msb-swatch-fill { height: 46px; } .msb-swatch-meta { padding: 8px 10px; font-size: 11px; line-height: 1.4; } .msb-swatch-meta code { font-size: 10px; color: var(--msb-muted); } /* ---- Fluid typography scale table ---- */ .msb-type-scale-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 12px; } .msb-type-scale-table th { text-align: left; color: var(--msb-muted); font-weight: 600; padding: 6px 4px; border-bottom: 1px solid var(--msb-border); } .msb-type-scale-table td { padding: 8px 4px; border-bottom: 1px solid var(--msb-border); vertical-align: middle; } /* ---- Preset row buttons (button size / corner radius) ---- */ /* v7.19.14: .msb-preset-row removed -- the Buttons tab's Size/Corners rows were its only users and now use .msb-segmented instead. The .msb-preset-btn rules below stay: the Layout tab's preloader Text/Logo/GIF row still uses them (inside .msb-preloader-other-row, which supplies its own flex container). */ .msb-preset-btn { padding: 8px 14px; font-size: 13px; font-weight: 600; border: 1px solid var(--msb-border); border-radius: 8px; background: #fff; cursor: pointer; } .msb-preset-btn-active { background: var(--msb-fg); color: #fff; border-color: var(--msb-fg); } /* ---- Button/tag live preview ---- */ /* v7.19.14: .msb-btn-preview-group / -row removed -- replaced by .msb-btn-stage, which frames the preview instead of letting it float loose at the top of the tab. */ .msb-btn-preview { font-family: inherit; text-transform: uppercase; letter-spacing: .02em; transition: background .15s ease, border-radius .15s ease, padding .15s ease; } .msb-btn-outline-preview { display: inline-block; padding: var(--msb-btn-py) var(--msb-btn-px); font-size: var(--msb-btn-fs); border-radius: var(--msb-btn-radius); border: 2px solid; text-decoration: none; font-weight: 600; background: transparent; } .msb-tag { display: inline-block; padding: 4px 12px; font-size: 12px; font-weight: 700; } .msb-preview-wrap { border: 1px solid var(--msb-border); border-radius: var(--msb-radius); overflow: hidden; margin-bottom: 8px; background: #fff; /* v7.19.10: anchors the double-buffered preview iframe below. */ position: relative; } .msb-preview-wrap iframe { width: 100%; border: 0; display: block; } /* v7.19.10 (Screenshot_26): the incoming half of the double-buffered preview swap -- see refreshPreviewNow() in frontend.js. Stacked exactly over the visible preview at the same size (so it lays out and paints identically, and is ready the instant it's promoted) but fully invisible and inert until then, so the customer never sees a blank frame mid-reload. */ .msb-preview-buffer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; border: 0; } .msb-layout-options { display: flex; flex-direction: column; gap: 10px; } @media (min-width: 560px) { .msb-layout-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } } .msb-layout-option { width: 100%; text-align: left; padding: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--msb-border); background: #fff; } .msb-layout-option-active { border-color: var(--msb-fg); border-width: 2px; } /* v7.70.0 (direct feedback: "how can we make this noticeable" -- see planLockCtaHtml()'s own doc comment in frontend.js for the full before/after): a thin accent-colored left edge, so a locked design reads as different from an ordinary one at a glance while scanning down the list, before the eye even reaches the CTA button on the right. Quiet on purpose -- the button below carries the real attention-grabbing weight, this is just a secondary cue. */ .msb-layout-option-locked { border-left: 3px solid var(--msb-accent, #111); } .msb-layout-option-clickable, .msb-library-card-clickable { cursor: pointer; transition: box-shadow .15s ease, transform .15s ease; } .msb-layout-option-clickable:hover, .msb-library-card-clickable:hover { box-shadow: 0 0 0 2px var(--msb-accent, #111); } .msb-layout-option-clickable:active, .msb-library-card-clickable:active { transform: scale(.98); } .msb-layout-option-clickable.msb-applying, .msb-library-card-clickable.msb-applying { opacity: .5; pointer-events: none; } /* v7.45.2 (Screenshot_17): min-height dropped from 40px to a 1px placeholder -- this only ever matters for the instant before the thumbnail's iframe finishes loading and scaleThumbDynamic() sets a real, content-hugging height; keeping a 40px floor here meant a short section (like a slim header) could still show extra empty space if that JS measurement landed anywhere below 40px. */ .msb-layout-option-thumb { display: block; position: relative; width: 100%; min-height: 1px; overflow: hidden; background: var(--msb-bg-alt, #f0eeec); } .msb-layout-option-thumb iframe { position: absolute; top: 0; left: 0; border: 0; pointer-events: none; } .msb-layout-option-toprow { display: flex; align-items: center; gap: 8px; padding: 10px 14px; } .msb-layout-option-name { flex: 1 1 auto; min-width: 0; font-size: 12.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .msb-layout-option-current { flex: 0 0 auto; text-align: right; font-size: 12px; font-weight: 700; color: var(--msb-muted); text-transform: uppercase; letter-spacing: .04em; } /* v7.77.0 (Motion Style -- Change Layout only, see openLayoutVariationSheet() in frontend.js for why Add Section deliberately does NOT get this filter). Three tiers, deliberately distinct colors AND shapes (never color alone -- see the ICON_MOTION_* comment in frontend.js): a calm blue for Subtle (the platform's own accent-adjacent blue, not the muted gray a "just inactive" affordance would suggest), teal for Interactive, violet for Immersive -- close in spirit to how the rest of this plugin uses --msb-accent for its own single brand color, but this is a genuinely 3-way categorical distinction, not a brand/neutral one, so it earns its own small palette here rather than reusing --msb-accent three times over. v7.77.2 (Screenshot_59/60/61, direct report): three real polish fixes. (1) The label and pill row were one inline flex row -- on any category name long enough (or on mobile's narrower width) the row wrapped mid-sentence, reading as clumsy/broken. Stacked instead: label on its own row, pills on a second row below, on every viewport -- no breakpoint-specific override needed since a column layout degrades identically at any width. (2) The active/selected chip previously used a neutral dark border+gray fill (the same "just a toggle" treatment every other filter chip in this plugin uses) -- changed to the Subtle tier's own blue as a universal "this is selected" indicator regardless of WHICH tier is active, a deliberate second meaning for that one color (Subtle's identity AND the platform's own selection color), confirmed unambiguous since only one chip is ever active at a time. (3) Labels and chip text rendered in whichever custom Google Font the SITE ITSELF uses (an editor-chrome element with no font-family of its own inherits `body`'s, which --msb-font-body overrides per-site) -- confirmed via the reported screenshot's own cursive/script rendering matching that site's brand headline font exactly. This is admin/editor CHROME, never part of the rendered page -- explicitly pinned to the same fixed system-UI stack --msb-font-body itself defaults to, so it reads identically regardless of which customer's site is open. v7.81.3 (Screenshot_1/2/3, direct report): the active/selected chip's hardcoded Subtle-blue fill (see v7.77.2 note above) is superseded -- swapped to var(--msb-accent), the same platform-primary color the Publish button itself uses, so the "this is selected" affordance now reads as platform-brand rather than a borrowed tier color. Active chip text and icon recolored to solid white for contrast against that fill (all three tier-specific icon colors -- blue/teal/violet -- collapse to white only while active; each tier's own color still shows on its icon while inactive, unchanged). Label/icon weight dropped from 500 (600 active) to 100 (thin) throughout, and justify-content:center added alongside the existing align-items so icon+label center both vertically and horizontally inside the pill at every size, including the 560px mobile compaction below. v7.81.4 (Screenshot_5, direct report): the 100 weight above read too thin/light in practice -- moved up to 400 (regular) for both the inactive and active chip state, everything else from v7.81.3 (color, centering) left as-is. */ .msb-motion-filter-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 4px 0 10px; } .msb-motion-filter-label { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--msb-muted); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .msb-info-dot { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--msb-muted); color: var(--msb-muted); font-size: 9.5px; font-weight: 700; font-style: italic; cursor: help; flex-shrink: 0; font-family: Georgia, serif; } .msb-motion-filter { display: flex; gap: 6px; flex-wrap: wrap; width: 100%; } .msb-motion-chip { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--msb-border); background: #fff; color: var(--msb-fg); font-size: 12.5px; font-weight: 400; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; line-height: 1; cursor: pointer; transition: background .12s ease, border-color .12s ease, color .12s ease; } .msb-motion-chip svg { width: 13px; height: 13px; flex-shrink: 0; display: block; } .msb-motion-chip-active { background: var(--msb-accent, #ff6a2b); border-color: var(--msb-accent, #ff6a2b); color: #fff; font-weight: 400; } .msb-motion-chip[data-motion="subtle"] svg { color: #3B6FE0; } .msb-motion-chip[data-motion="interactive"] svg { color: #0E8F7D; } .msb-motion-chip[data-motion="immersive"] svg { color: #6D4AFF; } .msb-motion-chip[data-motion="all"] svg { color: var(--msb-muted); } .msb-motion-chip-active svg, .msb-motion-chip-active[data-motion="all"] svg, .msb-motion-chip-active[data-motion="subtle"] svg, .msb-motion-chip-active[data-motion="interactive"] svg, .msb-motion-chip-active[data-motion="immersive"] svg { color: #fff; } /* v7.77.3 (Screenshot_62, direct report): on a real phone width the 4 pills wrapped ("Immersive" alone on its own second line) -- desktop was already fine, left untouched. Compacted specifically at this file's own established 480px editor-chrome mobile breakpoint (ยง42 of the Section Block Rulebook records 390px as the real preview width this needs to fit): smaller horizontal padding, smaller icon, smaller (still regular-weight) font -- shaves enough width off all 4 pills combined that they now sit on one row with room to spare, confirmed against the reported "All / Subtle / Interactive / Immersive" set. v7.77.4 (Screenshot_64, direct report): still wrapped after the first pass -- that round under-shrank for a real device's actual width. Recalculated against "Interactive" (the longest label) with real margin, and widened the breakpoint from 480px to 560px in case a real device's reported CSS width sits between the two. white-space:nowrap added so a label can never wrap INSIDE its own pill either, isolating "which pill drops to row 2" as the only possible wrap behavior. */ @media (max-width: 560px) { .msb-motion-chip { padding: 4px 6px; font-size: 10px; gap: 3px; white-space: nowrap; } .msb-motion-chip svg { width: 9px; height: 9px; } .msb-motion-filter { gap: 4px; } } /* v7.77.2: Change Layout cards only now (Add Section's own copy was removed per direct instruction -- see openSectionLibrarySheet() in frontend.js). Also doubles as this session's active-filter legend. v7.81.4 (Screenshot_5, direct report): weight dropped from 700 to 100 (thin) to match the filter chips above it, and icon+label now explicitly centered on both axes (justify-content added alongside the existing align-items, plus line-height:1 and a blocked-out SVG) so the thin weight doesn't read as vertically off inside the pill. */ .msb-motion-badge { position: absolute; top: 8px; left: 8px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.94); font-size: 10.5px; font-weight: 100; line-height: 1; box-shadow: 0 1px 3px rgba(0,0,0,.12); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .msb-motion-badge svg { width: 11px; height: 11px; flex-shrink: 0; display: block; } /* v7.81.5 (Screenshot_6, direct report): with line-height:1 alone (v7.81.4) the raw text node's line box still used the thin-weight font's own ascent/descent split -- asymmetric enough at 100 weight to leave visibly more room below "Subtle" than above it even though the badge's own padding is symmetric (3px top/bottom). Text is now wrapped in its own span forced to the exact same box height as the icon (11px, same as .msb-motion-badge svg above) so flex align-items:center centers two equal-height children instead of an icon against a taller, unevenly-leaded text line box -- the remaining top/bottom gap around both is then purely the badge's own symmetric padding, pixel-even on both sides. v7.81.6 (direct follow-up, same report thread): even-centered still read 2px shy underneath in practice -- added margin-bottom:2px to the label span only (icon and the filter-chip row above both untouched, per direct instruction). */ .msb-motion-badge-label { display: block; height: 11px; line-height: 11px; margin-bottom: 2px; } .msb-motion-badge-subtle { color: #3B6FE0; } .msb-motion-badge-interactive { color: #0E8F7D; } .msb-motion-badge-immersive { color: #6D4AFF; } .msb-section-title { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--msb-muted); margin: 20px 0 8px; } .msb-section-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 20px 0 8px; } .msb-section-title-row .msb-section-title { margin: 0; } .msb-mode-toggle { display: inline-flex; align-items: center; gap: 2px; background: #f0f0f0; border-radius: 10px; padding: 3px; flex-shrink: 0; } .msb-mode-btn { width: 34px; height: 30px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; border-radius: 8px; cursor: pointer; color: #8a8a8a; padding: 0; } .msb-mode-btn svg { width: 16px; height: 16px; } .msb-mode-btn-active { background: #fff; color: #4b3fd6; box-shadow: 0 1px 3px rgba(0,0,0,.15); } /* ---- Manage Sections ---- */ .msb-manage-sections-list { display: flex; flex-direction: column; gap: 6px; } .msb-manage-section-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .msb-icon-btn { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--msb-border); background: #fff; border-radius: 50%; font-size: 15px; line-height: 1; color: var(--msb-muted); cursor: pointer; padding: 0; } .msb-icon-btn:hover { color: #c0392b; border-color: #c0392b; } /* v7.45.0 (Screenshot_7/8): a lighter-weight variant of .msb-icon-btn -- no circle outline/fill, no red hover -- for actions that sit inside an already-bordered row (Manage Sections) and don't need their own visual weight competing with it. Each specific action below tunes color/size on top of this shared reset. */ .msb-icon-btn-ghost { width: auto; height: auto; border: none; background: transparent; border-radius: 8px; padding: 6px; color: var(--msb-muted); } .msb-icon-btn-ghost svg { width: 16px; height: 16px; display: block; } .msb-icon-btn-ghost:hover { background: var(--msb-bg-alt, #f2efec); border-color: transparent; color: var(--msb-fg, #141414); } /* Rename: same ghost treatment as Visibility/Remove, sitting first in the actions group (Screenshot_13) rather than inline next to the name -- keeps all three per-section actions scannable as one row group instead of splitting rename off on its own. */ .msb-rename-section-btn { opacity: .7; } .msb-rename-section-btn:hover { opacity: 1; } /* Visibility: an eye that fills with the editor's own brand accent while the section is live, and greys out to a slashed eye once hidden -- the same show/hide visual language as a password field's reveal toggle, so "on" vs "off" reads at a glance without needing a text label. */ .msb-section-visibility-btn { color: #b9b3ac; } .msb-section-visibility-btn-active { color: var(--msb-accent); } .msb-section-visibility-btn:hover { background: var(--msb-bg-alt, #f2efec); color: var(--msb-accent); } .msb-section-visibility-btn-active:hover { color: var(--msb-accent); filter: brightness(.85); } /* Remove stays the one destructive action in this row -- red only on hover, so it doesn't visually compete with Hide/Show at rest. */ .msb-remove-section-btn:hover { background: #fdecea; color: #c0392b; } /* v7.45.4 (Screenshot_22): Save/Cancel pair that briefly replaces the Rename/Visibility/Remove trio while a name is being edited in place. Save is filled solid with the brand accent so it's unmistakably the affirmative action; Cancel stays a plain ghost icon like its usual neighbours. */ .msb-rename-save-btn-active { color: #fff; background: var(--msb-accent); border-radius: 50%; } .msb-rename-save-btn-active:hover { background: var(--msb-accent); filter: brightness(1.08); color: #fff; } .msb-rename-cancel-btn:hover { background: #fdecea; color: #c0392b; } /* ---- Section-popup action list (Change Layout / Add Section Below / Hide) ---- */ .msb-action-group { border: 1px solid var(--msb-border); border-radius: 12px; overflow: hidden; background: #fff; } .msb-action-row { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; padding: 13px 14px; background: #fff; border: none; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--msb-fg, #141414); text-align: left; font-family: inherit; -webkit-appearance: none; appearance: none; } .msb-action-group .msb-action-row + .msb-action-row { border-top: 1px solid var(--msb-border); } .msb-action-row:active { background: #f7f7f7; } .msb-action-icon { flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; color: var(--msb-muted); } .msb-action-icon svg { width: 18px; height: 18px; } .msb-action-label { flex: 1; min-width: 0; } .msb-action-chevron { flex-shrink: 0; color: var(--msb-muted); display: flex; } .msb-action-chevron svg { width: 16px; height: 16px; } .msb-action-row-danger { border: 1px solid #f3d4d0; border-radius: 12px; color: #c0392b; } .msb-action-row-danger .msb-action-icon { color: #c0392b; } .msb-action-row-danger:active { background: #fdf3f2; } /* v7.16.0 (Screenshot 17): Hide This Section + Remove This Section side by side on one row, instead of Remove stacking as a whole separate row underneath. Only used when both buttons are present -- a lone Hide button (Header/Footer, which never gets a Remove option) still renders full-width via the plain .msb-action-group rules above. */ .msb-action-group-row { display: flex; gap: 10px; border: none; background: transparent; overflow: visible; } .msb-action-group-row .msb-action-row { width: auto; flex: 1 1 0; min-width: 0; justify-content: center; text-align: center; } /* v7.17.0 (Screenshot 19): a `border-top:none` on the adjacent-sibling button used to sit here, copied from the vertically-STACKED group pattern above (where it kills a doubled divider line between two full-width rows sharing one outer box). It doesn't apply to this side-by-side row at all -- each button here draws its own complete, independent border via .msb-action-row-danger below -- so it was silently stripping just the Remove button's top edge for no reason. Removed; both buttons keep their full border on all four sides. */ .msb-action-row-half .msb-action-label { flex: none; } /* v7.19.6 (Screenshot_21): these two were squeezed into half a phone width each, with the icon crowding a wrapping label and a 13px tap target. Tighter internal gap, a guaranteed 44px touch height, no wrapping, and a slightly softer fill so they read as a related pair of secondary actions rather than two alarming outlined boxes. */ .msb-action-group-row .msb-action-row-danger { gap: 7px; padding: 11px 10px; min-height: 44px; background: #fdf7f6; font-size: 13.5px; white-space: nowrap; } .msb-action-group-row .msb-action-icon { width: 18px; height: 18px; } .msb-action-group-row .msb-action-icon svg { width: 16px; height: 16px; } /* v7.45.5 (Screenshot_23): Hide Section + Remove Section now stay side by side at every mobile width instead of stacking into two full rows below 420px -- shrinking the icon, text, and padding here keeps both comfortably tappable and non-overlapping without needing the extra vertical space stacking used to buy. */ @media (max-width: 420px) { .msb-action-group-row .msb-action-row-danger { gap: 5px; padding: 9px 6px; min-height: 40px; font-size: 11.5px; } .msb-action-group-row .msb-action-icon { width: 15px; height: 15px; } .msb-action-group-row .msb-action-icon svg { width: 14px; height: 14px; } } .msb-manage-section-row { display: flex; align-items: center; gap: 10px; cursor: default; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .msb-manage-section-label { flex: 1; min-width: 0; display: flex; align-items: center; } /* v7.45.3 (Screenshot_21): the name area is a real click target now -- tapping it jumps the live preview straight to that section (see scrollPreviewToSection() in frontend.js). Cursor + a subtle hover/ focus color shift on the text itself is the only visual change so it still reads as part of the row, not a separate button. */ .msb-manage-section-label-clickable { cursor: pointer; border-radius: 6px; margin: -4px -6px; padding: 4px 6px; } .msb-manage-section-label-clickable:hover strong, .msb-manage-section-label-clickable:focus-visible strong { color: var(--msb-accent); } .msb-manage-section-label-clickable:hover, .msb-manage-section-label-clickable:focus-visible { background: var(--msb-bg-alt, #f2efec); outline: none; } /* v7.45.4 (Screenshot_22): while a name is being edited in place, the label no longer acts as a nav/click target -- no pointer cursor, no hover tint -- since it now contains a real text input instead of the clickable name text. */ .msb-manage-section-label-editing { cursor: default; background: transparent; margin: -4px -6px; padding: 4px 6px; } .msb-manage-section-label-editing:hover, .msb-manage-section-label-editing:focus-visible { background: transparent; } .msb-manage-section-rename-input { width: 100%; box-sizing: border-box; padding: 3px 6px; margin: -3px -6px; border: 1px solid var(--msb-accent); border-radius: 6px; background: #fff; font-family: inherit; font-size: 14px; font-weight: 500; color: var(--msb-fg, #141414); outline: none; } /* v7.41.1 (Screenshot_43/44): a long section-block name used to wrap onto 2-3 lines, making every row a different height and the whole list feel cluttered. Single line + ellipsis, and a lighter weight (500, not 's default 700) for a cleaner, more minimal look -- the row is still a single flex line at a predictable height regardless of name length. */ .msb-manage-section-label strong { display: block; font-weight: 500; font-size: 14px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; } .msb-drag-handle { cursor: grab; color: var(--msb-muted); flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .msb-drag-handle svg { width: 20px; height: 20px; pointer-events: none; } .msb-drag-handle-locked { cursor: default; opacity: .55; } @media (max-width: 600px) { .msb-manage-section-row .msb-manage-section-label strong { font-size: 13px; } } .msb-row-dragging { position: relative; cursor: grabbing; box-shadow: 0 4px 14px rgba(0,0,0,.15); background: #fff; } .msb-rename-section-btn { color: var(--msb-muted); } /* ---- Pages tab (Task 21) ---- */ .msb-page-list { display: flex; flex-direction: column; gap: 6px; } .msb-page-home-badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; background: #eef2ff; color: #3355dd; margin-left: 6px; vertical-align: middle; } .msb-page-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--msb-border); border-radius: 10px; background: #fff; } .msb-page-row-active { border-color: var(--msb-primary, #0B5FFF); background: var(--msb-bg-alt, #f7f9ff); } .msb-page-row-main { flex: 1; min-width: 0; cursor: pointer; display: flex; align-items: center; flex-wrap: wrap; } .msb-page-row-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } /* ---- Menu item editor rows (Task 21) ---- */ .msb-menu-item-row { border: 1px solid var(--msb-border); border-radius: 10px; padding: 10px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 8px; } .msb-menu-item-row-top { display: flex; align-items: center; gap: 8px; } .msb-menu-item-label { flex: 1 1 45%; min-width: 0; padding: 8px 10px; border: 1px solid var(--msb-border); border-radius: 8px; font-size: 13px; box-sizing: border-box; } .msb-menu-item-link { flex: 1 1 45%; min-width: 0; padding: 8px 10px; border: 1px solid var(--msb-border); border-radius: 8px; font-size: 13px; box-sizing: border-box; } .msb-menu-item-url { width: 100%; padding: 8px 10px; border: 1px solid var(--msb-border); border-radius: 8px; font-size: 13px; box-sizing: border-box; } .msb-menu-item-remove { flex-shrink: 0; margin-left: 0; } .msb-hidden { display: none !important; } /* v7.12.0: a top-level item's group -- its own row, an indented list of Sub-item rows (if any), and the "+ Add Sub-item" control, all inside one bordered card so a dropdown's items visually belong to their parent instead of reading as separate top-level entries. */ .msb-menu-item-group { border: 1px solid var(--msb-border); border-radius: 12px; padding: 10px; margin-bottom: 10px; background: var(--msb-bg-alt, #fafafa); } .msb-menu-item-group .msb-menu-item-row { margin-bottom: 0; background: #fff; } .msb-menu-children { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 0 20px; padding-left: 12px; border-left: 2px solid var(--msb-border); } .msb-menu-item-row-child { background: #fff; } .msb-add-submenu-item { margin-top: 8px; font-size: 12px; padding: 6px 10px; } .msb-mi-label, .msb-mi-url { width: 100%; padding: 8px 10px; border: 1px solid var(--msb-border); border-radius: 8px; font-size: 13px; box-sizing: border-box; } .msb-mi-type, .msb-mi-page { padding: 8px 6px; border: 1px solid var(--msb-border); border-radius: 8px; font-size: 13px; box-sizing: border-box; } .msb-rename-section-btn:hover { color: var(--msb-fg, #141414); border-color: var(--msb-fg, #141414); } /* Belt-and-braces: while a row is being dragged, suppress text selection site-wide. This is what actually stops Android's long-press "Copy / Share / Select all / Web search" bar from hijacking the gesture -- touch-action and user-select on the handle alone weren't reliably enough on every device. */ body.msb-dragging-no-select { -webkit-user-select: none; user-select: none; } /* ---- Section Library picker ---- */ .msb-library-controls { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; } .msb-library-controls input[type="text"] { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--msb-border); border-radius: 8px; font-size: 14px; } .msb-library-cats { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; cursor: grab; user-select: none; } .msb-library-cats:active { cursor: grabbing; } .msb-library-cats .msb-filter-chip { flex-shrink: 0; } .msb-filter-chip { background: #fff; border: 1px solid var(--msb-border); border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 600; color: var(--msb-muted); cursor: pointer; text-transform: capitalize; } .msb-filter-chip-active { background: var(--msb-fg, #141414); color: #fff; border-color: var(--msb-fg, #141414); } .msb-library-grid { column-count: 1; column-gap: 12px; } @media (min-width: 480px) { .msb-library-grid { column-count: 2; } } .msb-library-card { border: 1px solid var(--msb-border); border-radius: 10px; overflow: hidden; background: #fff; break-inside: avoid; margin-bottom: 12px; } /* v7.45.2 (Screenshot_17): same 1px placeholder-only floor as .msb-layout-option-thumb above, for the same reason -- the Add New Section library grid uses the same scaleThumbDynamic() sizing. */ .msb-library-card-thumb { display: block; position: relative; width: 100%; min-height: 1px; overflow: hidden; background: var(--msb-bg-alt, #f0eeec); } .msb-library-card-thumb iframe { position: absolute; top: 0; left: 0; border: 0; pointer-events: none; } .msb-library-card-body { padding: 10px; display: flex; flex-direction: column; gap: 4px; } .msb-library-card-toprow { display: flex; align-items: center; gap: 8px; } .msb-library-card-title { flex: 1 1 auto; min-width: 0; font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .msb-insert-link { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; flex: 0 0 auto; white-space: nowrap; box-sizing: border-box; background: none; border: none; cursor: pointer; font-family: inherit; padding: 0; font-size: 11.5px; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; color: #2563eb; } .msb-insert-link:hover { color: #1d4fd1; } .msb-insert-link:disabled { opacity: .4; cursor: default; } .msb-insert-icon { display: flex; flex-shrink: 0; } .msb-insert-icon svg { width: 14px; height: 14px; } /* v7.76.0 (Screenshot_11, direct request): the editor's own right- click/long-press context menu, floated over the whole editor at a fixed screen position (see showFloatingPreviewMenu() in frontend.js) -- also doubles as the hover "+" insert zone's small Add/Paste chooser. */ .msb-context-menu { position: fixed; z-index: 9999; min-width: 190px; background: #fff; border: 1px solid var(--msb-border); border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,0.18); padding: 6px; font-family: inherit; } .msb-context-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: none; border-radius: 6px; cursor: pointer; padding: 8px 10px; font-size: 13px; font-weight: 500; color: #141414; } .msb-context-menu-item:hover { background: var(--msb-bg-alt, #f0eeec); } .msb-context-menu-item:disabled { opacity: .4; cursor: default; } .msb-context-menu-item:disabled:hover { background: none; } .msb-context-menu-icon { display: flex; flex-shrink: 0; color: #666; } .msb-context-menu-icon svg { width: 16px; height: 16px; } /* v7.76.4 (Screenshot_26, direct request): a destructive item (Remove Section) in red icon + red text, same #b32d2e danger red already used elsewhere in the admin/editor (e.g. .msb-set-default-block family), with its own small top divider so it reads as separated from the safe actions above it rather than just another row. */ .msb-context-menu-item-danger { color: #b32d2e; margin-top: 4px; padding-top: 9px; border-top: 1px solid var(--msb-border, #eee); } .msb-context-menu-item-danger .msb-context-menu-icon { color: #b32d2e; } .msb-context-menu-item-danger:hover { background: rgba(179,45,46,0.08); } /* v7.70.0: planLockCtaHtml()'s own button (Section Blocks' "Choose a Layout" panel) -- a solid pill BUTTON rather than a plain underlined link, so the one row in the list that's actually an upgrade opportunity doesn't blend in at the same visual weight as every ordinary "Apply Layout" text link around it. v7.72.0 (direct follow-up, matching the same request already applied to Templates' own "Upgrade to use" in v7.71.0): background fixed to black rather than var(--msb-accent) -- the platform's own branded color is already used elsewhere on this exact panel (every OTHER thumbnail's own content, plus the accent left-edge on this same locked row), so a fixed black keeps "this needs an upgrade" a single, consistent, unmistakable color across the whole product, never confusable with the platform's ordinary accent color. */ .msb-plan-lock-cta { display: inline-flex; align-items: center; justify-content: center; gap: 5px; flex: 0 0 auto; white-space: nowrap; box-sizing: border-box; background: #111; color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .01em; text-decoration: none; border-radius: 999px; padding: 6px 14px 6px 10px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16); transition: filter .12s ease, box-shadow .12s ease, transform .1s ease; } .msb-plan-lock-cta:hover { filter: brightness(1.3); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22); } .msb-plan-lock-cta:active { transform: scale(.97); } .msb-plan-lock-cta-icon { display: flex; flex-shrink: 0; } .msb-plan-lock-cta-icon svg { width: 12px; height: 12px; } /* ---- Floating "Use This Template" CTA on the standalone template-preview page ---- */ #msb-template-use-cta { position: fixed; z-index: 9999; right: 20px; bottom: 20px; } .msb-template-cta-btn { display: inline-flex; align-items: center; gap: 8px; background: #141414; color: #fff; border: none; border-radius: 999px; padding: 15px 26px; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.28); transition: transform .15s ease, box-shadow .15s ease; } .msb-template-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.32); } @media (max-width: 640px) { #msb-template-use-cta { left: 16px; right: 16px; bottom: 16px; } .msb-template-cta-btn { width: 100%; justify-content: center; } } .msb-field-row { display: flex; align-items: center; justify-content: space-between; background: #fff; border: 1px solid var(--msb-border); border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; } .msb-field-row .label { font-size: 14px; font-weight: 500; } .msb-field-row .preview { font-size: 12px; color: var(--msb-muted); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .msb-inline-field { margin-bottom: 14px; } /* v7.59.39: 2-column row for adjacent Image/Logo/Icon fields (see groupAdjacentPhotoFieldsHtml() in frontend.js) -- a photo thumbnail is capped at 140px (.msb-photo-box below) regardless of the column width it's given, so two side by side wastes far less space than stacking them full-width one per row. Each child .msb-inline-field keeps its own margin-bottom for the row-to-row gap; min-width:0 keeps a long label from forcing the row wider than its parent. */ .msb-inline-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .msb-inline-field-row .msb-inline-field { min-width: 0; margin-bottom: 0; } .msb-link-label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; } .msb-link-label-row label { margin-bottom: 0; } .msb-link-field .msb-link-type-select { padding: 6px 8px; font-size: 10.4px; font-weight: 600; border: 1px solid var(--msb-border); border-radius: 8px; background: #fff; color: var(--msb-fg, #141414); cursor: pointer; width: auto; max-width: 160px; flex-shrink: 0; } .msb-link-raw-input { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--msb-border); border-radius: 8px; font-size: 14px; font-family: inherit; } .msb-link-page-select { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--msb-border); border-radius: 8px; font-size: 14px; font-family: inherit; background: #fff; cursor: pointer; } /* v7.17.11: video field's URL/Upload source select -- same visual treatment as the link field's type select right above, since it sits in the same label-row position. */ .msb-video-field .msb-video-source-select { padding: 6px 8px; font-size: 10.4px; font-weight: 600; border: 1px solid var(--msb-border); border-radius: 8px; background: #fff; color: var(--msb-fg, #141414); cursor: pointer; width: auto; max-width: 180px; flex-shrink: 0; } .msb-video-uploaded-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--msb-border); border-radius: 8px; background: #fafafa; } .msb-video-uploaded-url { font-size: 13px; color: var(--msb-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .msb-video-reupload-btn { flex-shrink: 0; padding: 6px 12px; font-size: 12.5px; } .msb-inline-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; } .msb-inline-field .msb-inline-input, .msb-inline-field input[type="text"], .msb-inline-field input[type="url"] { width: 100%; padding: 10px 12px; border: 1px solid var(--msb-border); border-radius: 8px; font-size: 14px; } .msb-inline-toggle label { display: flex; align-items: center; gap: 8px; font-weight: 500; } /* v7.15.1: unified "photo box" used for EVERY image field across the editor (single section image fields, SEO meta image, repeater item photos) -- one square box, image filling it edge-to-edge, a single round upload-icon button overlaid directly ON the image's own bottom-right corner. No separate "beside" button, and no remove/ clear control anywhere: an image field can only ever be swapped for another image, never emptied, because an emptied image broke the section's layout. */ .msb-photo-box { position: relative; width: 100%; max-width: 140px; aspect-ratio: 1 / 1; border-radius: 10px; border: 1px solid var(--msb-border); overflow: hidden; background: var(--msb-bg-alt, #f7f4f2); } .msb-photo-box img { width: 100%; height: 100%; object-fit: cover; display: block; } .msb-photo-upload-btn { position: absolute; right: 6px; bottom: 6px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--msb-border); background: #fff; color: var(--msb-fg); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; box-shadow: 0 1px 3px rgba(0,0,0,.2); line-height: 0; } /* svg display:block + no line-height keeps the icon glyph itself dead-center in the circle -- an inline svg has baseline spacing that throws flex centering off by a couple px otherwise. */ .msb-photo-upload-btn svg { width: 15px; height: 15px; display: block; } .msb-photo-upload-btn:hover { background: var(--msb-bg-alt, #f7f4f2); } .msb-repeater-item-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .msb-repeater-item-index { font-size: 12px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: .03em; } /* v7.15.1: repeater item 2-column layout (photo column ~30% / content fields ~70%) with Move Up / Move Down / Duplicate / Remove actions. Move Up/Down replaced v7.15.0's drag handle, which didn't reliably detect a drop target once items had multiple stacked fields of uneven height. */ .msb-repeater-item { position: relative; } .msb-repeater-item-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; } .msb-repeater-item-body { display: flex; gap: 12px; align-items: flex-start; } .msb-repeater-item-photo-col { flex: 0 0 30%; max-width: 130px; } .msb-repeater-item-fields-col { flex: 1 1 auto; min-width: 0; } .msb-repeater-photo-field { margin-bottom: 6px; } .msb-repeater-photo-field label { display: block; font-size: 11px; color: #888; margin-bottom: 4px; } .msb-repeater-photo-field .msb-photo-box { max-width: none; } /* v7.51.0: an icon field's own preview box -- object-fit:contain instead of the photo box's cover (a Lucide/custom icon is a small stroke shape with a lot of transparent padding around it; cover would crop straight into the glyph itself) plus a little internal padding so the icon doesn't touch the box's own edges. */ .msb-icon-box img { object-fit: contain; padding: 18%; box-sizing: border-box; } .msb-icon-btn[disabled] { opacity: .3; cursor: default; pointer-events: none; } .msb-bottom-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: #fff; border-top: 1px solid var(--msb-border); /* v7.39.0: safety net for the narrowest devices (see the tiered shrink rules below) -- scrolls instead of clipping if a real viewport somehow still can't fit everything. */ overflow-x: auto; } /* v7.41.2 (Screenshot_46): every icon (Branding, Navigation, Settings, Sections, Responsive, View Live) now lives in ONE group with ONE gap value -- previously split across two separate flex groups with their own, different gaps (a tight 2-4px one for the left 4 icons, the bar's own wider 8px for the right 2), which is exactly what read as uneven spacing. Update/Publish sits in the same row and flow, growing to fill the remaining width at narrow sizes (see the max-width:600px rule below) rather than being a second, separately- justified group. */ .msb-bottom-bar-group { display: flex; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0; width: 100%; } .msb-bar-icon-btn { flex: 0 0 auto !important; width: 44px; height: 44px; padding: 0 !important; display: flex; align-items: center; justify-content: center; } .msb-bar-icon-btn svg { width: 20px; height: 20px; } /* v7.59.26 (Screenshot_75, direct request): Branding/Navigation/ Settings/Sections carry a small label under their icon now, same idea as the desktop panel's own .msb-panel-icon-btn row -- fixed 44x44 square swapped for an auto-height column so the label has room underneath, without changing the icon's own drawn size. Share/ Live/Update are untouched (still plain icon-only or, for Update, its own full-width split button). */ .msb-bar-icon-btn-labeled { width: auto; min-width: 46px; height: auto; flex-direction: column; gap: 3px; padding: 4px 4px 3px !important; } .msb-bar-icon-btn-label { font-size: 9.5px; font-weight: 500; line-height: 1; color: var(--msb-muted); white-space: nowrap; } .msb-bar-icon-btn-labeled:hover .msb-bar-icon-btn-label { color: var(--msb-accent); } .msb-publish-btn-grow { font-size: 14px; padding-left: 18px; padding-right: 18px; height: 44px; flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; } /* v7.59.24 (Screenshot_70, direct request): the small state label after "Update"/"Publish" ("Update Draft", "Update Private", etc) -- .msb-publish-btn-grow's own flex:1 1 auto already lets the button grow past its old fixed content width to fit this extra text (rather than needing an explicit min-width bump), so the only CSS this itself needs is to read as visually secondary to the main word: smaller, a touch translucent, normal weight against the main label's bold. */ .msb-publish-btn-sublabel { font-size: 12px; font-weight: 400; opacity: .85; } /* Update/Publish visibly distinguishes "changes waiting to go live" (highlighted, the normal accent color) from "already live, nothing new to push" (quiet grey) -- see updatePublishBtnLook() in frontend.js. */ .msb-btn-dirty { background: var(--msb-accent); border-color: var(--msb-accent); color: #fff; } .msb-btn-clean { background: #eee; border-color: #eee; color: #888; } @media (max-width: 480px) { .msb-bar-icon-btn:not(.msb-bar-icon-btn-labeled) { width: 38px; height: 38px; } .msb-bar-icon-btn svg { width: 18px; height: 18px; } .msb-bar-icon-btn-label { font-size: 9px; } .msb-bottom-bar-group { gap: 6px; } /* Screenshot_2 (direct request): below the "Update"/"Draft" sits too wide on a phone-width bottom bar -- the sublabel drops under the main label instead of running after it on the same line, so the split button reads as two short stacked lines instead of one wide one. Height/padding switch to auto so the extra line has room without the button growing wider. */ .msb-publish-btn-grow { flex-direction: column; gap: 1px; height: auto; min-height: 44px; padding-top: 6px; padding-bottom: 6px; line-height: 1.15; } .msb-publish-btn-sublabel { display: block; font-size: 10.5px; } } @media (max-width: 380px) { /* height stays auto (set in the 480px tier above) so the stacked Update/Draft two-line label still has room at this narrower tier. */ .msb-publish-btn-grow { font-size: 12.5px; padding-left: 10px; padding-right: 10px; min-height: 40px; } .msb-bar-icon-btn:not(.msb-bar-icon-btn-labeled) { width: 34px; height: 34px; } .msb-bar-icon-btn svg { width: 17px; height: 17px; } .msb-bar-icon-btn-labeled { min-width: 38px; } .msb-bar-icon-btn-label { font-size: 8.5px; } .msb-bottom-bar { padding-left: 10px; padding-right: 10px; } .msb-bottom-bar-group { gap: 4px; } } @media (max-width: 340px) { .msb-bar-icon-btn:not(.msb-bar-icon-btn-labeled) { width: 30px; height: 30px; } .msb-bar-icon-btn svg { width: 15px; height: 15px; } .msb-bar-icon-btn-labeled { min-width: 34px; } .msb-bar-icon-btn-label { display: none; } /* No room left for labels at all at this width -- icons alone. */ .msb-publish-btn-grow { padding-left: 6px; padding-right: 6px; font-size: 11px; } } /* On mobile, Share now lives as a floating button on the Preview page itself (native share sheet -- WhatsApp, Mail, Messages, etc.) instead of here, so it's removed from the bottom bar to make room. Desktop keeps Share in the bottom bar exactly as before -- this only hides it below the same width the breakpoint-preview page treats as mobile. */ @media (max-width: 600px) { #msb-share-btn { display: none; } } /* Subtle, minimal motion on every plugin button -- a slight lift on hover and a slight press-down on active, tinted with the platform's own Primary Color (--msb-accent) rather than a generic gray, so it reads as an intentional part of this UI rather than a browser default. Purely visual -- no layout shift, since transform doesn't affect box size. */ .msb-btn { transition: transform .1s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease; } .msb-btn:hover { border-color: var(--msb-accent); box-shadow: 0 2px 8px rgba(0,0,0,.08); transform: translateY(-1px); } .msb-btn:active { transform: translateY(0); box-shadow: none; } .msb-btn-primary:hover, .msb-btn-dirty:hover { filter: brightness(1.08); border-color: var(--msb-accent); } .msb-btn-clean:hover { border-color: #ddd; filter: none; box-shadow: none; transform: none; } .msb-bar-icon-btn:hover { border-color: var(--msb-accent); color: var(--msb-accent); } .msb-bar-icon-btn-active { border-color: var(--msb-accent); color: var(--msb-accent); background: var(--msb-bg-alt, #f7f4f2); } /* ---- Edit sheet: centered modal on every screen size ---- */ .msb-sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; } .msb-sheet { background: #fff; width: 100%; max-width: 420px; border-radius: 16px; max-height: 85vh; overflow: hidden; padding: 0; display: flex; flex-direction: column; } @media (min-width: 900px) { .msb-sheet { width: 50vw; max-width: 640px; } } .msb-sheet-head { display: flex; align-items: center; gap: 8px; margin-bottom: 0; flex-shrink: 0; padding: 18px 18px 14px; border-bottom: 1px solid var(--msb-border); } .msb-sheet-body { overflow-y: auto; overflow-x: hidden; flex: 1; min-height: 0; padding: 14px 18px; } .msb-sheet-head-icon-btn { display: flex; flex-direction: column; align-items: center; gap: 1px; flex-shrink: 0; background: none; border: none; cursor: pointer; color: var(--msb-fg, #141414); padding: 2px 4px; } .msb-sheet-head-icon-btn svg { width: 18px; height: 18px; } .msb-sheet-head-icon-btn span { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; } .msb-sheet-head-icon-btn:active { opacity: .6; } .msb-sheet-head h2 { flex: 1; min-width: 0; margin: 0; font-size: 14px; font-weight: 600; color: var(--msb-accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .msb-sheet-back-btn { display: flex; align-items: center; gap: 3px; flex-shrink: 0; background: none; border: none; cursor: pointer; padding: 4px 2px 4px 0; font-size: 14px; font-weight: 600; color: var(--msb-fg, #141414); } .msb-sheet-back-btn svg { width: 18px; height: 18px; } .msb-sheet-close-icon { background: none; border: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--msb-muted); padding: 4px 6px; margin: -4px -6px -4px 0; border-radius: 8px; flex-shrink: 0; } .msb-sheet-close-icon:hover { background: var(--msb-bg-alt, #f7f4f2); color: var(--msb-fg); } .msb-sheet textarea, .msb-sheet input[type="text"], .msb-sheet input[type="url"], .msb-sheet input[type="email"], .msb-sheet select { width: 100%; padding: 10px 12px; border: 1px solid var(--msb-border); border-radius: 8px; font-size: 14px; } .msb-sheet-actions { display: flex; gap: 8px; margin-top: 0; flex-shrink: 0; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--msb-border); } .msb-sheet-actions .msb-btn { flex: 1; } /* "New Site" popup (dashboard hero CTA): wider than the default sheet since it holds a template grid, not a single field/form. */ .msb-newsite-sheet { max-width: 480px; } @media (min-width: 900px) { .msb-newsite-sheet { width: 90vw; max-width: 900px; } } /* v7.40.0 (Screenshot_36): Leads popup, opened from a site card on My Sites -- wide enough for the source-filter/search/export toolbar to sit on one line rather than default-sheet width forcing an early wrap. */ .msb-leads-popup-sheet { max-width: 480px; } @media (min-width: 900px) { .msb-leads-popup-sheet { width: 70vw; max-width: 720px; } } .msb-newsite-search { margin-bottom: 16px; } .msb-newsite-grid { margin-top: 4px; } .msb-richtext-toolbar { display: flex; gap: 6px; margin-bottom: 8px; } .msb-richtext-toolbar button { width: 32px; height: 32px; border-radius: 6px; border: 1px solid var(--msb-border); background: #fff; cursor: pointer; } .msb-richtext-area { min-height: 90px; border: 1px solid var(--msb-border); border-radius: 8px; padding: 10px 12px; font-size: 14px; } .msb-richtext-area a { color: #1a6fd4; text-decoration: underline; } .msb-richtext-toolbar button u { text-decoration: underline; } /* Compact color grid used in Site Settings -- several colors per row instead of a full-width bar each */ .msb-color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; margin-bottom: 16px; } .msb-color-field label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; } .msb-color-field-inputs { display: flex; align-items: stretch; border: 1px solid var(--msb-border); border-radius: 8px; overflow: hidden; background: #fff; } .msb-color-field-inputs .msb-color-swatch { width: 38px; height: 38px; padding: 0; margin: 0; border: none; border-right: 1px solid var(--msb-border); flex-shrink: 0; cursor: pointer; border-radius: 0; } .msb-color-hex { border: none !important; padding: 0 8px !important; font-size: 12px !important; width: 100% !important; font-family: monospace; height: 38px; } /* v7.50.12: confirmed real, live-reported issue -- the "currently selected image" preview shown inside the upload dropzone (Your Uploads tab) was taking up too much vertical space, pushing the rest of the panel (Media Library grid, search) further down before any scrolling. Reduced 25% on desktop (200px -> 150px) and, since a phone/tablet screen has far less vertical room to spare in the first place, a further cut down to 50% of the ORIGINAL height (100px) under the same 900px breakpoint already used elsewhere in this file for tablet-and-narrower tweaks -- tablet and mobile share one value here since both were asked for the same 50% reduction. Only the height is capped; max-width/object-fit are unchanged, so the image still displays at its full natural width up to 200px, just shorter. */ .msb-upload-preview { max-width: 200px; width: 100%; height: auto; max-height: 150px; object-fit: contain; border-radius: 8px; margin-bottom: 10px; display: block; background: var(--msb-bg-alt, #f0eeec); } @media (max-width: 900px) { .msb-upload-preview { max-height: 100px; } } /* ---- Site Logo + Favicon, side by side (v7.5.6) ---- */ /* ---- Site Logo / Favicon tiles (v7.19.5, Screenshot_16) ---- Two identical, equally sized cards rather than the old mismatched thumb-plus-stretched-button pair. Deliberately NOT inside any desktop-only media query: this is the same on phone, tablet and desktop. See brandTileHtml() in frontend.js. ---- */ .msb-brand-icons-row { display: flex; gap: 12px; align-items: stretch; } .msb-brand-icon-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 12px 10px; border: 1px solid var(--msb-border); border-radius: 10px; background: #fff; } .msb-brand-tile-head { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 10px; } .msb-brand-tile-label { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--msb-muted, #6b6b6b); } .msb-brand-tile { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: repeating-conic-gradient(#f0f0f0 0% 25%, #fafafa 0% 50%) 50% / 10px 10px; border: 1px solid var(--msb-border); } .msb-brand-tile img { max-width: 78%; max-height: 78%; object-fit: contain; display: block; } .msb-brand-tile-empty { background: #fafafa; border-style: dashed; color: #c2c2c2; } .msb-brand-tile-empty svg { width: 24px; height: 24px; } .msb-brand-tile-empty img { opacity: .45; } /* v7.45.5 (Screenshot_24): the preview tile is a real click target now, same action as the "Upload"/"Replace" text below it -- a subtle hover/ focus ring makes that discoverable without changing the tile's actual size or look at rest. */ .msb-brand-tile-clickable { cursor: pointer; } .msb-brand-tile-clickable:hover, .msb-brand-tile-clickable:focus-visible { border-color: var(--msb-accent); outline: none; } .msb-brand-tile-clickable.msb-brand-tile-empty:hover, .msb-brand-tile-clickable.msb-brand-tile-empty:focus-visible { background: var(--msb-bg-alt, #f2efec); color: var(--msb-accent); } .msb-brand-tile-actions { display: flex; align-items: center; gap: 4px; margin-top: 10px; } .msb-brand-tile-action { background: none; border: 0; padding: 4px 6px; cursor: pointer; border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--msb-fg, #141414); font-family: inherit; } .msb-brand-tile-action:hover { background: var(--msb-bg-alt, #f7f4f2); } .msb-brand-tile-action-remove { color: #c14b4b; } .msb-brand-tile-action-remove:hover { background: #fdeeee; } .msb-brand-tile-actions .msb-brand-tile-action + .msb-brand-tile-action { border-left: 1px solid var(--msb-border); border-radius: 0 6px 6px 0; } .msb-brand-tile-status { font-size: 11px; color: #888; margin: 4px 0 0; text-align: center; min-height: 0; } .msb-brand-tile-status:empty { display: none; } /* v7.19.5: these used to stack on a phone, because the old logo row was too wide to sit next to anything. The tiles are compact and equal now, so two of them fit comfortably side by side even on a 320px screen -- which keeps the "two matching cards" reading identical at every width instead of turning into a tall stack on mobile only. */ @media (max-width: 480px) { .msb-brand-icons-row { gap: 8px; } .msb-brand-icon-col { padding: 10px 6px; } } .msb-logo-row { display: flex; align-items: center; gap: 10px; } .msb-logo-thumb { flex-shrink: 0; width: 52px; height: 52px; border-radius: 8px; background: repeating-conic-gradient(#eee 0% 25%, #f7f7f7 0% 50%) 50% / 12px 12px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .msb-logo-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; } .msb-logo-thumb-placeholder { opacity: .5; border: 1px dashed #ccc; background: #fafafa; } /* v7.59.39: the thumbnail is now a real click target in the Edit Header popup too (matching Site Settings > Branding > Colors' own .msb-brand-tile-clickable, v7.45.5) -- same cursor/hover/focus affordance so it visibly reads as clickable, not just decorative. */ .msb-logo-thumb-clickable { cursor: pointer; transition: opacity .15s ease, box-shadow .15s ease; } .msb-logo-thumb-clickable:hover { opacity: .85; } .msb-logo-thumb-clickable:focus-visible { outline: 2px solid var(--msb-role-buttons, #0B5FFF); outline-offset: 2px; } .msb-logo-thumb-placeholder.msb-logo-thumb-clickable:hover { opacity: .8; border-color: #999; } .msb-logo-row .msb-btn { flex: 1; } .msb-logo-size-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: #666; } .msb-logo-size-row input[type="range"] { flex: 1; } .msb-logo-size-row span:last-child { flex-shrink: 0; width: 40px; text-align: right; font-variant-numeric: tabular-nums; } .msb-info-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #e2e2e2; color: #666; font-size: 11px; font-style: italic; font-family: Georgia, serif; cursor: help; flex-shrink: 0; } .msb-spacing-preview { margin-top: 12px; padding: 12px 14px; border-radius: 8px; background: var(--msb-bg-alt, #f7f4f2); } .msb-spacing-preview-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #666; margin-bottom: 6px; } .msb-spacing-preview-row:last-child { margin-bottom: 0; } .msb-spacing-preview-label { flex: 0 0 110px; } .msb-spacing-preview-track { flex: 1; height: 8px; background: #e4e0db; border-radius: 4px; overflow: hidden; } .msb-spacing-preview-bar { height: 100%; background: var(--msb-primary, #0B5FFF); border-radius: 4px; transition: width .15s ease; } .msb-spacing-preview-val { flex: 0 0 40px; text-align: right; font-variant-numeric: tabular-nums; } /* ---- In-app toast (replaces native alert) ---- */ .msb-toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%) translateY(20px); background: #1a1a1a; color: #fff; padding: 12px 20px; border-radius: 10px; font-size: 14px; max-width: 90vw; text-align: center; z-index: 200; opacity: 0; transition: opacity .2s ease, transform .2s ease; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.25); } .msb-toast-show { opacity: 1; transform: translateX(-50%) translateY(0); } .msb-toast-error { background: #7a1f1f; } .msb-toast-success { background: #1f5e3a; } /* ---- In-app confirm/prompt (replaces native confirm/prompt) ---- */ .msb-confirm-sheet { padding: 28px 24px 24px; text-align: center; } .msb-confirm-icon { width: 44px; height: 44px; margin: 0 auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #eef2ff; color: #4f5bd5; } .msb-confirm-icon svg { width: 22px; height: 22px; } .msb-confirm-icon-warn { background: #fdeeee; color: #d64545; } .msb-confirm-sheet p { margin: 0 0 14px; font-size: 15px; } .msb-confirm-sheet input[type="text"] { width: 100%; padding: 10px 12px; border: 1px solid var(--msb-border); border-radius: 8px; font-size: 14px; margin-bottom: 4px; text-align: left; } .msb-btn-danger { background: #d64545; border-color: #d64545; color: #fff; } .msb-btn-danger[disabled] { background: #f0c4c4; border-color: #f0c4c4; color: #fff; cursor: not-allowed; } .msb-media-grid { display: flex; flex-wrap: wrap; gap: 8px; max-height: 220px; overflow-y: auto; } .msb-media-thumb-wrap { position: relative; flex-shrink: 0; } .msb-media-thumb { max-width: 100px; width: auto; height: auto; max-height: 100px; object-fit: contain; border-radius: 6px; cursor: pointer; border: 2px solid transparent; background: var(--msb-bg-alt, #f0eeec); display: block; transition: border-color .12s ease, transform .12s ease; } .msb-media-thumb:hover { border-color: var(--msb-primary, #111); transform: scale(1.03); } /* v7.17.12: video item in the shared image+video gallery -- object-fit on a