/** * Limitless Order Builder — Frontend styles (UI redesign rebuild) * * ARCHITECTURE * The file is organized as strictly-ordered "layers". Native @layer is NOT * used deliberately: unlayered author CSS (the Divi theme + WooCommerce) * would beat every @layer-scoped rule regardless of specificity, so the * layer system is emulated with file order instead. Within this file the * order below is the only cascade mechanism — never rely on appending * override passes. * * SPECIFICITY FLOOR: every selector anchors on #lgsb-uploader (the ID, not * the class). Divi + WooCommerce style product pages with deep class chains * (.woocommerce div.product p, form.cart select, …) that beat class-only * plugin selectors; the ID anchor outranks all of them without !important. * New rules MUST use the #lgsb-uploader prefix. * * 1. TOKENS — every design token (single source of truth) * 2. BASE — scoped resets + typography defaults * 3. COMPONENTS — buttons, cards, pills, inputs, alerts, skeleton, modal * 4. LAYOUT — builder grid, dropzones, panels, sidebar, pricing * 5. STATES — visibility matrix, dirty/locked/dragover/active * 6. RESPONSIVE — container queries + mobile bar + reduced motion * 7. THEME-COMBAT — the ONLY place !important is permitted; each rule * names the Divi/WooCommerce behavior it defeats * 8. CART/ORDER — classes rendered outside #lgsb-uploader * * JS ↔ CSS NAMING CONTRACT (do not rename without updating gang-sheet.js): * Root state classes on #lgsb-uploader: * lgsb-jobs-on lgsb-ws-open lgsb-has-files lgsb-order-dirty lgsb-locked * lgsb-choosing (entry-state layout chooser; template-rendered, JS-removed) * Behavioral classes JS selects/toggles: * lgsb-file-row lgsb-file-blocked lgsb-qty-input lgsb-qty-step * lgsb-qty-control lgsb-dim-input lgsb-dim-w lgsb-dim-h lgsb-dim-step * lgsb-dim-control lgsb-lock-btn lgsb-locked lgsb-unlocked * lgsb-remove-btn lgsb-move lgsb-move-select lgsb-actions-cell * lgsb-status-badge lgsb-status-review lgsb-dpi-pill lgsb-dpi-quality * lgsb-row-price lgsb-job-card lgsb-job-card-ungrouped lgsb-job-name * lgsb-job-drag lgsb-job-settings-btn lgsb-jobs-strip lgsb-jobs-arrow * lgsb-jobs-no-scroll lgsb-jobs-head-text lgsb-jobs-count lgsb-jobs-seeall * lgsb-jobs-add-btn lgsb-strip-dragging * lgsb-job-section lgsb-job-ungrouped lgsb-job-rows lgsb-job-active * lgsb-job-card-active lgsb-job-dragging * lgsb-jo-row lgsb-jo-row-active lgsb-jo-name lgsb-jo-count lgsb-jo-total * lgsb-job-drop-before lgsb-job-drop-after lgsb-jc-* lgsb-dragover * lgsb-cart-pending lgsb-add-to-cart-btn lgsb-modal-* lgsb-error-row * lgsb-skel-card lgsb-price-pending lgsb-select-btn lgsb-flash * lgsb-name-wrap lgsb-name-input lgsb-name-state lgsb-name-original * lgsb-name-saving lgsb-name-saved lgsb-name-error * lgsb-mode-chooser lgsb-mode-option lgsb-mode-pick * lgsb-mode-quick-only lgsb-mode-multi-only * lgsb-designs-toolbar lgsb-ws-header lgsb-ws-actions * lgsb-add-files-btn lgsb-toolbar-bulk (bulk bar host slots — the bar * carries data-scope-group, resolved by bulkScopeRows()) * CSS custom properties written by injectCssVars() (admin settings): * --lgsb-primary --lgsb-secondary --lgsb-card-bg --lgsb-light-bg * --lgsb-divider --lgsb-muted --lgsb-btn-bg --lgsb-btn-text * --lgsb-error --lgsb-success --lgsb-warning */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); /* ========================================================================= * 1. TOKENS * Scoped to #lgsb-uploader (not :root) so nothing leaks into the theme. * Admin-overridable primitives keep their historical names — injectCssVars() * writes them as inline styles, which beat these stylesheet defaults. * ========================================================================= */ #lgsb-uploader { /* --- Admin-overridable primitives (names locked by JS contract) --- */ --lgsb-primary: #007D91; --lgsb-secondary: #000000; --lgsb-card-bg: #ffffff; --lgsb-light-bg: #F5F7F8; --lgsb-divider: #E3E8EB; --lgsb-muted: #6B7680; --lgsb-btn-bg: #000000; --lgsb-btn-text: #ffffff; --lgsb-error: #B42318; --lgsb-success: #007A41; --lgsb-warning: #AD8629; /* --- Brand palette --- */ --lgsb-teal: var(--lgsb-primary); --lgsb-teal-soft: #EBF6F8; --lgsb-teal-mid: #8FC5CE; /* dividers on teal-soft surfaces (active job card) */ --lgsb-teal-dark: #055866; --lgsb-success-text: var(--lgsb-success); --lgsb-success-bg: #D0EDDB; --lgsb-success-soft: #F0F7F3; /* clean status card background */ --lgsb-success-border: #CBEDDC; /* clean status border + inner button */ --lgsb-warning-text: var(--lgsb-warning); --lgsb-warning-bg: #FFF4DA; --lgsb-warning-soft: #FDF8EC; /* job card "Needs Review" tint */ --lgsb-error-text: var(--lgsb-error); --lgsb-error-bg: #FBEAE8; --lgsb-error-soft: #FCF1F0; /* job card "Has Errors" tint */ --lgsb-error-border: #EEB4AE; --lgsb-ink: #111111; /* --- Neutrals --- */ --lgsb-text: #1F2933; --lgsb-text-muted: var(--lgsb-muted); --lgsb-border: var(--lgsb-divider); --lgsb-surface: var(--lgsb-card-bg); --lgsb-surface-dim: var(--lgsb-light-bg); --lgsb-zone-bg: #F2F2F2; /* grey backdrop behind the post-order zone */ /* --- Typography --- */ --lgsb-font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --lgsb-font-display: 56px; --lgsb-font-title-1: 18px; /* section titles (v2.58.0: 20 → 18 per mockups) */ --lgsb-font-title-2: 15px; --lgsb-font-title-3: 14px; --lgsb-font-body: 13px; --lgsb-font-body-sm: 12px; --lgsb-font-caption: 12px; /* helper/caption text — MUST equal body-sm so all subtext matches */ --lgsb-font-label: 10px; --lgsb-font-stat: 23px; --lgsb-font-button: 13px; --lgsb-font-pill: 11px; --lgsb-font-summary-title: 26px; /* ORDER SUMMARY header — deliberately larger than title-1 */ /* Weights reduced one step across the board (v2.19.3) to match the mocks — "bold" surfaces render at 600, "semibold" at 500. */ --lgsb-weight-regular: 400; --lgsb-weight-medium: 500; --lgsb-weight-semibold: 500; --lgsb-weight-bold: 600; --lgsb-leading-tight: 1.2; --lgsb-leading-body: 1.5; --lgsb-tracking-label: .06em; --lgsb-tracking-button: .06em; /* --- Spacing scale (values tuned in the design playground, v2.18.4 — intentionally non-linear: 6 is tighter than 5 per approved design) --- */ --lgsb-space-1: 4px; --lgsb-space-2: 4px; --lgsb-space-3: 9px; --lgsb-space-4: 12px; --lgsb-space-5: 20px; --lgsb-space-6: 13px; --lgsb-space-7: 26px; --lgsb-space-8: 40px; --lgsb-card-padding: 20px; /* inner padding of sidebar/pricing cards */ /* --- Radii / borders / shadows --- */ --lgsb-radius-sm: 7px; /* micro controls (pills' inner buttons, menu items) */ --lgsb-radius-input: 8px; /* inputs, selects, textareas */ --lgsb-radius-button: 12px; /* buttons (independent from inputs) */ --lgsb-radius-nested: 12px; /* cards inside panels (design/job/error/skeleton/status) */ --lgsb-radius-card: 12px; /* primary cards & sections */ --lgsb-radius-pill: 999px; /* Semantic border widths — every component type carries an independent visual weight, centrally controlled here. Never share one width token across unrelated element types. */ --lgsb-card-border-width: 3px; /* primary cards & sections (summary, panels, pricing) */ --lgsb-nested-card-border-width: 2px; /* cards inside panels (design/job/error/skeleton cards) */ --lgsb-divider-width: 2px; /* rules and separators */ --lgsb-input-border-width: 2px; /* inputs, steppers, selects, textareas */ --lgsb-button-border-width: 1.5px; /* outlined buttons + icon rings */ --lgsb-dropzone-border-width: 2.5px; /* dashed upload zones */ --lgsb-focus-ring-width: 3px; --lgsb-shadow-card: 0 3px 12px rgba(0, 0, 0, .06); --lgsb-shadow-nested: 0 1px 6px rgba(0, 0, 0, .05); --lgsb-shadow-raised: 0 4px 16px rgba(0, 0, 0, .10); --lgsb-shadow-menu: 0 6px 18px rgba(0, 0, 0, .14); --lgsb-shadow-modal: 0 12px 40px rgba(0, 0, 0, .28); /* --- Motion --- */ --lgsb-dur-fast: 120ms; --lgsb-dur-base: 180ms; --lgsb-dur-slow: 280ms; --lgsb-ease: cubic-bezier(.4, 0, .2, 1); --lgsb-ease-out: cubic-bezier(0, 0, .2, 1); --lgsb-ease-in: cubic-bezier(.4, 0, 1, 1); /* --- Z-index --- */ --lgsb-z-chip: 2; --lgsb-z-sticky: 5; --lgsb-z-menu: 10; --lgsb-z-mobile-bar: 100; --lgsb-z-modal: 99999; /* must clear Divi's fixed header */ /* --- Sticky offset --- viewport-top inset for every sticky header in the builder (My Designs toolbar, jobs workspace header). 12px of breathing room by owner request (v2.109.1) — cards do scroll visibly through that gap above the stuck bar, an accepted trade-off. Overridden below for the fixed WP admin bar; bump it site-side if the theme ever ships a fixed header on the product page. */ --lgsb-sticky-top: var(--lgsb-space-4); /* --- Focus ring --- */ --lgsb-focus-ring: 0 0 0 var(--lgsb-focus-ring-width) rgba(0, 125, 145, .35); --lgsb-focus-ring-error: 0 0 0 var(--lgsb-focus-ring-width) rgba(180, 35, 24, .30); } /* Sticky offset vs the WordPress admin bar (viewport-fixed, so real media queries — not container queries). >782px: 32px fixed bar; 601–782px: 46px fixed bar; ≤600px: WP switches #wpadminbar to position:absolute (it scrolls away), so no inset is needed. */ body.admin-bar #lgsb-uploader { --lgsb-sticky-top: calc(var(--lgsb-space-4) + 32px); } @media screen and (max-width: 782px) { body.admin-bar #lgsb-uploader { --lgsb-sticky-top: calc(var(--lgsb-space-4) + 46px); } } @media screen and (max-width: 600px) { body.admin-bar #lgsb-uploader { --lgsb-sticky-top: var(--lgsb-space-4); } } /* CONTAINER-QUERY BREAKPOINTS (single declaration point — CQs cannot read custom properties). Desktop ≥ 1180px · Laptop 880–1179px · Tablet 640–879px · Mobile < 640px. Used in section 6. */ /* ========================================================================= * 2. BASE * ========================================================================= */ #lgsb-uploader { box-sizing: border-box; color: var(--lgsb-text); container-type: inline-size; font-family: var(--lgsb-font-family); font-size: var(--lgsb-font-body); line-height: var(--lgsb-leading-body); margin: 0 0 var(--lgsb-space-6); /* Containing block for root-mounted popovers (Job Settings) — their JS computes coordinates relative to this element. */ position: relative; text-align: left; } #lgsb-uploader *, #lgsb-uploader *::before, #lgsb-uploader *::after { box-sizing: border-box; } #lgsb-uploader h2, #lgsb-uploader h3, #lgsb-uploader p, #lgsb-uploader ul { margin: 0; padding: 0; } #lgsb-uploader ul { list-style: none; } #lgsb-uploader button { font-family: inherit; } /* Visible keyboard focus everywhere. Focus is instant (no transition). */ #lgsb-uploader :focus-visible { box-shadow: var(--lgsb-focus-ring); outline: none; } #lgsb-uploader .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute; width: 1px; } /* Optional file-requirements banner (admin setting) */ #lgsb-uploader .lgsb-requirements-note { background: var(--lgsb-teal-soft); border-left: 3px solid var(--lgsb-teal); border-radius: var(--lgsb-radius-sm); font-size: var(--lgsb-font-body-sm); margin-bottom: var(--lgsb-space-4); padding: var(--lgsb-space-3) var(--lgsb-space-4); } /* ========================================================================= * 3. COMPONENTS * ========================================================================= */ /* --- 3.1 Buttons --------------------------------------------------------- The primary recipe is modeled on the proven Select Files button (teal, radius 8, uppercase 700, inset-overlay hover). The Select Files element itself keeps its own armor in section 7. */ #lgsb-uploader .lgsb-btn, #lgsb-uploader .lgsb-ws-update-btn, #lgsb-uploader .lgsb-preview-layout-btn, #lgsb-uploader .lgsb-update-summary-btn, #lgsb-uploader .lgsb-modal-btn { align-items: center; border: none; border-radius: var(--lgsb-radius-button); cursor: pointer; display: inline-flex; font-family: var(--lgsb-font-family); font-size: var(--lgsb-font-button); font-weight: var(--lgsb-weight-bold); gap: var(--lgsb-space-2); justify-content: center; letter-spacing: var(--lgsb-tracking-button); line-height: var(--lgsb-leading-tight); padding: 11px 22px; text-transform: uppercase; transition: background var(--lgsb-dur-fast) var(--lgsb-ease), box-shadow var(--lgsb-dur-fast) var(--lgsb-ease), color var(--lgsb-dur-fast) var(--lgsb-ease), transform var(--lgsb-dur-fast) var(--lgsb-ease); white-space: nowrap; } #lgsb-uploader .lgsb-btn:active, #lgsb-uploader .lgsb-ws-update-btn:active, #lgsb-uploader .lgsb-preview-layout-btn:active, #lgsb-uploader .lgsb-update-summary-btn:active, #lgsb-uploader .lgsb-modal-btn:active { transform: translateY(1px); } /* Primary — filled teal */ #lgsb-uploader .lgsb-btn--primary, #lgsb-uploader .lgsb-update-summary-btn, #lgsb-uploader .lgsb-modal-btn-primary { background: var(--lgsb-teal); color: #fff; } #lgsb-uploader .lgsb-btn--primary:hover, #lgsb-uploader .lgsb-update-summary-btn:hover:not(:disabled), #lgsb-uploader .lgsb-modal-btn-primary:hover { /* Inset-overlay hover (proven against Divi opacity/filter resets) */ box-shadow: inset 0 0 0 999px rgba(255, 255, 255, .13); } /* Secondary — outlined teal */ #lgsb-uploader .lgsb-btn--secondary, #lgsb-uploader .lgsb-modal-btn-secondary, #lgsb-uploader .lgsb-ws-update-btn, #lgsb-uploader .lgsb-preview-layout-btn { background: var(--lgsb-surface); box-shadow: inset 0 0 0 var(--lgsb-button-border-width) var(--lgsb-teal); color: var(--lgsb-teal); } #lgsb-uploader .lgsb-btn--secondary:hover:not(:disabled), #lgsb-uploader .lgsb-modal-btn-secondary:hover:not(:disabled), #lgsb-uploader .lgsb-ws-update-btn:hover:not(:disabled), #lgsb-uploader .lgsb-preview-layout-btn:hover:not(:disabled) { background: var(--lgsb-teal-soft); box-shadow: inset 0 0 0 var(--lgsb-button-border-width) var(--lgsb-teal); } /* Danger — errors / destructive confirms only */ #lgsb-uploader .lgsb-btn--danger, #lgsb-uploader .lgsb-modal-btn-danger { background: var(--lgsb-error-text); color: #fff; } #lgsb-uploader .lgsb-btn--danger:hover, #lgsb-uploader .lgsb-modal-btn-danger:hover { box-shadow: inset 0 0 0 999px rgba(255, 255, 255, .13); } /* Text/ghost — low-emphasis actions (modal cancel, error retry/dismiss) */ #lgsb-uploader .lgsb-modal-btn-text, #lgsb-uploader .lgsb-btn-ghost { background: transparent; color: var(--lgsb-text-muted); } #lgsb-uploader .lgsb-modal-btn-text:hover, #lgsb-uploader .lgsb-btn-ghost:hover { background: var(--lgsb-surface-dim); color: var(--lgsb-text); } /* Disabled — clearly distinguishable, no hover effect */ #lgsb-uploader .lgsb-btn:disabled, #lgsb-uploader .lgsb-ws-update-btn:disabled, #lgsb-uploader .lgsb-preview-layout-btn:disabled, #lgsb-uploader .lgsb-modal-btn:disabled { background: #C3C9CD; box-shadow: none; color: #fff; cursor: not-allowed; transform: none; } /* --- 3.2 Card chrome (primary cards carry the heavy 3px border) --- */ #lgsb-uploader .lgsb-card, #lgsb-uploader .lgsb-main-col { background: var(--lgsb-surface); border: var(--lgsb-card-border-width) solid var(--lgsb-border); border-radius: var(--lgsb-radius-card); box-shadow: var(--lgsb-shadow-card); } /* --- 3.3 Pills / badges (one recipe, semantic palettes) --- Job card status is NOT a pill anymore (v2.49.0) — it's small centered text styled in §4.8 with a soft tint on the whole card. */ #lgsb-uploader .lgsb-status-badge, #lgsb-uploader .lgsb-dpi-pill, #lgsb-uploader .lgsb-tier-badge { border-radius: var(--lgsb-radius-pill); display: inline-block; font-size: var(--lgsb-font-pill); font-weight: var(--lgsb-weight-semibold); letter-spacing: .03em; line-height: var(--lgsb-leading-tight); padding: 4px 10px; text-transform: uppercase; transition: background var(--lgsb-dur-base) var(--lgsb-ease), color var(--lgsb-dur-base) var(--lgsb-ease); white-space: nowrap; } /* Design-card status + DPI tags — rounded rectangles (not full pills) with sentence case per the mock; status carries a text-color-matched dot. */ #lgsb-uploader .lgsb-status-badge, #lgsb-uploader .lgsb-dpi-pill { border-radius: var(--lgsb-radius-sm); font-size: 12px; letter-spacing: 0; padding: 5px 10px; text-transform: none; } #lgsb-uploader .lgsb-status-badge::before { background: currentColor; border-radius: 50%; content: ''; display: inline-block; height: 7px; margin-right: 6px; vertical-align: 1px; width: 7px; } /* Success (Ready / OK DPI) */ #lgsb-uploader .lgsb-status-ready, #lgsb-uploader .lgsb-dpi-ok { background: var(--lgsb-success-bg); color: var(--lgsb-success-text); } /* Good (DPI tier 2 — solid but below recommended; soft success palette) */ #lgsb-uploader .lgsb-dpi-good { background: var(--lgsb-success-soft); color: var(--lgsb-success-text); } /* Warning (Review / warn DPI) */ #lgsb-uploader .lgsb-status-review, #lgsb-uploader .lgsb-dpi-warn { background: var(--lgsb-warning-bg); color: var(--lgsb-warning-text); } /* Error (Blocked / low DPI) */ #lgsb-uploader .lgsb-status-blocked, #lgsb-uploader .lgsb-dpi-error { background: var(--lgsb-error-bg); color: var(--lgsb-error-text); } /* Neutral (unknown DPI) */ #lgsb-uploader .lgsb-dpi-unknown { background: var(--lgsb-surface-dim); color: var(--lgsb-text-muted); } /* Tier badge — teal pill (larger than standard pills, per the mock) */ #lgsb-uploader .lgsb-tier-badge { background: var(--lgsb-teal); color: #fff; font-size: 14px; font-weight: var(--lgsb-weight-bold); padding: 10px 26px; } /* Ink pills — free shipping + floating count chip */ #lgsb-uploader .lgsb-free-shipping, #lgsb-uploader .lgsb-panel-chip { background: var(--lgsb-ink); border-radius: var(--lgsb-radius-pill); color: #fff; display: inline-block; font-size: var(--lgsb-font-pill); font-weight: var(--lgsb-weight-semibold); letter-spacing: .04em; line-height: var(--lgsb-leading-tight); padding: 8px 16px; white-space: nowrap; } #lgsb-uploader .lgsb-free-shipping { display: block; font-size: var(--lgsb-font-button); font-weight: var(--lgsb-weight-bold); padding: 10px 16px; text-align: center; text-transform: uppercase; } /* --- 3.4 Inputs / steppers --- */ #lgsb-uploader .lgsb-dim-input, #lgsb-uploader .lgsb-contour-gap-input, #lgsb-uploader .lgsb-qty-input { -moz-appearance: textfield; appearance: textfield; background: var(--lgsb-surface); border: var(--lgsb-input-border-width) solid var(--lgsb-border); border-radius: var(--lgsb-radius-input); color: var(--lgsb-text); font-family: var(--lgsb-font-family); font-size: var(--lgsb-font-body-sm); font-weight: var(--lgsb-weight-semibold); height: 32px; padding: 0 var(--lgsb-space-2); text-align: center; transition: border-color var(--lgsb-dur-fast) var(--lgsb-ease); width: 100%; } #lgsb-uploader .lgsb-dim-input::-webkit-outer-spin-button, #lgsb-uploader .lgsb-dim-input::-webkit-inner-spin-button, #lgsb-uploader .lgsb-contour-gap-input::-webkit-outer-spin-button, #lgsb-uploader .lgsb-contour-gap-input::-webkit-inner-spin-button, #lgsb-uploader .lgsb-qty-input::-webkit-outer-spin-button, #lgsb-uploader .lgsb-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } #lgsb-uploader .lgsb-dim-input:focus, #lgsb-uploader .lgsb-contour-gap-input:focus, #lgsb-uploader .lgsb-qty-input:focus { border-color: var(--lgsb-teal); box-shadow: 0 0 0 3px rgba(0, 125, 145, .15); outline: none; } /* Copies stepper: − [value] + */ #lgsb-uploader .lgsb-qty-control { align-items: center; display: inline-flex; gap: var(--lgsb-space-1); } #lgsb-uploader .lgsb-qty-input { width: 52px; } #lgsb-uploader .lgsb-qty-step { align-items: center; background: var(--lgsb-surface); border: var(--lgsb-input-border-width) solid var(--lgsb-border); border-radius: var(--lgsb-radius-sm); color: var(--lgsb-teal); cursor: pointer; display: inline-flex; flex: 0 0 auto; font-size: 15px; font-weight: var(--lgsb-weight-bold); height: 28px; justify-content: center; line-height: 1; padding: 0; transition: background var(--lgsb-dur-fast) var(--lgsb-ease), border-color var(--lgsb-dur-fast) var(--lgsb-ease); width: 28px; } #lgsb-uploader .lgsb-qty-step:hover { background: var(--lgsb-teal-soft); border-color: var(--lgsb-teal); } /* Dimensions block: WIDTH / HEIGHT fields + aspect lock */ #lgsb-uploader .lgsb-dim-stack { align-items: flex-end; display: flex; flex-wrap: nowrap; gap: var(--lgsb-space-2); } #lgsb-uploader .lgsb-dim-fields { display: flex; flex: 1 1 auto; gap: var(--lgsb-space-2); min-width: 0; } #lgsb-uploader .lgsb-dim-label { display: flex; flex: 1 1 0; flex-direction: column; gap: 3px; min-width: 0; } #lgsb-uploader .lgsb-dim-name { color: var(--lgsb-ink); font-size: var(--lgsb-font-label); font-weight: var(--lgsb-weight-semibold); letter-spacing: var(--lgsb-tracking-label); text-transform: uppercase; } #lgsb-uploader .lgsb-dim-control { display: flex; height: 32px; position: relative; } #lgsb-uploader .lgsb-dim-control .lgsb-dim-input { padding-right: 20px; } #lgsb-uploader .lgsb-dim-spin { display: flex; flex-direction: column; height: 100%; position: absolute; right: 3px; top: 0; width: 16px; } #lgsb-uploader .lgsb-dim-step { background: transparent; border: none; cursor: pointer; flex: 1 1 50%; padding: 0; position: relative; } #lgsb-uploader .lgsb-dim-step::before { border-left: 4px solid transparent; border-right: 4px solid transparent; content: ''; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); } #lgsb-uploader .lgsb-dim-step[data-dir="up"]::before { border-bottom: 5px solid var(--lgsb-text-muted); } #lgsb-uploader .lgsb-dim-step[data-dir="down"]::before { border-top: 5px solid var(--lgsb-text-muted); } #lgsb-uploader .lgsb-dim-step:hover::before { border-bottom-color: var(--lgsb-teal); border-top-color: var(--lgsb-teal); } #lgsb-uploader .lgsb-dim-step[data-dir="up"]:hover::before { border-bottom-color: var(--lgsb-teal); } #lgsb-uploader .lgsb-dim-step[data-dir="down"]:hover::before { border-top-color: var(--lgsb-teal); } #lgsb-uploader .lgsb-lock-btn { align-items: center; background: var(--lgsb-surface); border: var(--lgsb-input-border-width) solid var(--lgsb-border); border-radius: var(--lgsb-radius-sm); color: var(--lgsb-text-muted); cursor: pointer; display: inline-flex; flex: 0 0 auto; height: 32px; justify-content: center; padding: 0; transition: background var(--lgsb-dur-fast) var(--lgsb-ease), color var(--lgsb-dur-fast) var(--lgsb-ease); width: 32px; } #lgsb-uploader .lgsb-lock-btn:hover { background: var(--lgsb-teal-soft); color: var(--lgsb-teal); } #lgsb-uploader .lgsb-lock-btn.lgsb-locked { color: var(--lgsb-teal); } #lgsb-uploader .lgsb-lock-btn .lgsb-icon-unlocked { display: none; } #lgsb-uploader .lgsb-lock-btn.lgsb-unlocked .lgsb-icon-unlocked { display: block; } #lgsb-uploader .lgsb-lock-btn.lgsb-unlocked .lgsb-icon-locked { display: none; } #lgsb-uploader .lgsb-aspect-label { color: var(--lgsb-ink); flex: 0 0 auto; font-size: var(--lgsb-font-label); font-weight: var(--lgsb-weight-medium); line-height: 1.3; max-width: 46px; padding-bottom: 7px; } #lgsb-uploader .lgsb-dim-missing { color: var(--lgsb-text-muted); } /* Move-to select (grouping mode) */ #lgsb-uploader .lgsb-move { align-items: center; display: inline-flex; gap: var(--lgsb-space-1); min-width: 0; } #lgsb-uploader .lgsb-move-label { display: none; /* the select's first option communicates the action */ } #lgsb-uploader .lgsb-move-select { appearance: none; -webkit-appearance: none; background: var(--lgsb-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7680' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 6px center / 12px; border: var(--lgsb-input-border-width) solid var(--lgsb-border); border-radius: var(--lgsb-radius-sm); color: var(--lgsb-text); cursor: pointer; font-family: var(--lgsb-font-family); font-size: var(--lgsb-font-pill); font-weight: var(--lgsb-weight-medium); height: 28px; max-width: 120px; overflow: hidden; padding: 0 22px 0 8px; text-overflow: ellipsis; white-space: nowrap; } #lgsb-uploader .lgsb-move-select:disabled { cursor: not-allowed; opacity: .5; } /* Checkbox rows (group toggle, order options, artwork ack) */ #lgsb-uploader .lgsb-checkbox-label { align-items: flex-start; cursor: pointer; display: flex; gap: 10px; } #lgsb-uploader .lgsb-checkbox-label input[type="checkbox"] { accent-color: var(--lgsb-teal); flex: 0 0 auto; height: 17px; margin: 2px 0 0; width: 17px; } /* --- 3.5 Alerts (file warnings) --- */ #lgsb-uploader .lgsb-file-warnings { display: flex; flex-direction: column; gap: var(--lgsb-space-1); } /* Compact in-card alert per the mock: rounded tan box, icon left, bold ink title, small body — no left accent bar. */ #lgsb-uploader .lgsb-file-warnings li { align-items: center; border-radius: var(--lgsb-radius-sm); display: flex; font-size: 11px; gap: 8px; line-height: 1.45; padding: 8px 10px; } #lgsb-uploader .lgsb-warn-warning { background: var(--lgsb-warning-bg); color: var(--lgsb-ink); } #lgsb-uploader .lgsb-warn-error { background: var(--lgsb-error-bg); color: var(--lgsb-ink); } #lgsb-uploader .lgsb-warning-icon { color: var(--lgsb-warning-text); display: inline-flex; flex: 0 0 18px; } #lgsb-uploader .lgsb-warn-error .lgsb-warning-icon { color: var(--lgsb-error-text); } #lgsb-uploader .lgsb-warn-title { color: var(--lgsb-ink); display: block; font-size: 12px; font-weight: var(--lgsb-weight-bold); margin-bottom: 2px; } /* "Got it" — link-styled dismiss button inside a notice chip. */ #lgsb-uploader .lgsb-warn-gotit { align-self: flex-start; background: none; border: none; color: var(--lgsb-warning-text); cursor: pointer; flex: 0 0 auto; font-family: inherit; font-size: 11px; font-weight: var(--lgsb-weight-bold); margin-left: auto; padding: 0; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; } #lgsb-uploader .lgsb-warn-gotit:hover { color: var(--lgsb-ink); } /* Dismissed notices collapse into the pill below; an all-collapsed list must vanish entirely (an empty flex box still occupies its gap). */ #lgsb-uploader .lgsb-file-warnings li.lgsb-warn-collapsed { display: none; } #lgsb-uploader .lgsb-file-warnings.lgsb-warnings-allhidden { display: none; } /* Compact amber pill standing in for dismissed notices — click re-opens. */ #lgsb-uploader .lgsb-warn-pill { align-items: center; align-self: flex-start; background: var(--lgsb-warning-bg); border: none; border-radius: 999px; color: var(--lgsb-ink); cursor: pointer; display: inline-flex; font-family: inherit; font-size: 11px; font-weight: var(--lgsb-weight-bold); gap: 6px; padding: 4px 12px; width: fit-content; } #lgsb-uploader .lgsb-warn-pill .lgsb-warning-icon { flex-basis: 14px; } #lgsb-uploader .lgsb-warn-pill .lgsb-warn-triangle { height: 14px; width: 14px; } /* --- 3.6 Skeleton loading --- */ #lgsb-uploader .lgsb-skeleton { animation: lgsb-skel-pulse 1.6s var(--lgsb-ease) infinite; background: var(--lgsb-surface-dim); border-radius: var(--lgsb-radius-sm); display: block; } @keyframes lgsb-skel-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } #lgsb-uploader .lgsb-skel-card { background: var(--lgsb-surface); border: var(--lgsb-nested-card-border-width) solid var(--lgsb-border); border-radius: var(--lgsb-radius-nested); display: flex; flex-direction: column; gap: var(--lgsb-space-3); padding: var(--lgsb-space-3); } #lgsb-uploader .lgsb-skel-title { flex: 1 1 auto; min-width: 0; } #lgsb-uploader .lgsb-skel-thumb { flex: 0 0 56px; height: 56px; width: 56px; } #lgsb-uploader .lgsb-skel-line { height: 12px; width: 70%; } #lgsb-uploader .lgsb-skel-line-sm{ height: 10px; margin-top: 6px; width: 40%; } #lgsb-uploader .lgsb-skel-block { height: 32px; width: 100%; } #lgsb-uploader .lgsb-skel-block-sm { height: 24px; width: 60%; } #lgsb-uploader .lgsb-skel-status { color: var(--lgsb-text-muted); font-size: var(--lgsb-font-pill); font-weight: var(--lgsb-weight-semibold); letter-spacing: .03em; text-transform: uppercase; } /* --- 3.6b Converting card (PDF/AI vector ingestion) --- Persistent variant of the skeleton card shown while the AWS worker converts a vector upload to PNG pages. Same shell as .lgsb-skel-card; the head swaps the thumb placeholder for a format badge + live status. */ #lgsb-uploader .lgsb-converting-card .lgsb-fc-head { align-items: center; display: flex; gap: var(--lgsb-space-3); } #lgsb-uploader .lgsb-converting-badge { align-items: center; background: var(--lgsb-surface-dim); border: var(--lgsb-nested-card-border-width) solid var(--lgsb-border); border-radius: var(--lgsb-radius-sm); color: var(--lgsb-text-muted); display: flex; flex: 0 0 56px; font-size: var(--lgsb-font-pill); font-weight: var(--lgsb-weight-bold); height: 56px; justify-content: center; letter-spacing: .05em; width: 56px; } #lgsb-uploader .lgsb-converting-name { color: var(--lgsb-text); display: block; font-weight: var(--lgsb-weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #lgsb-uploader .lgsb-converting-status { animation: lgsb-skel-pulse 1.6s var(--lgsb-ease) infinite; color: var(--lgsb-primary); display: block; font-size: var(--lgsb-font-pill); font-weight: var(--lgsb-weight-semibold); letter-spacing: .03em; margin-top: 4px; text-transform: uppercase; } /* --- 3.6c Finished gang sheet (Custom Length Uploader merge, v2.87.0) --- Awaiting-choice card: parks a gang-sheet-width PDF/AI while the customer confirms intent in the modal. Shares the converting card's shell; the teal-soft tint + Review button signal "action needed", not "working". */ #lgsb-uploader .lgsb-gs-await-card { background: var(--lgsb-teal-soft); border-color: var(--lgsb-teal-mid); } #lgsb-uploader .lgsb-gs-await-card .lgsb-gs-await-status { animation: none; /* action needed — never the working pulse */ } #lgsb-uploader .lgsb-gs-await-note { color: var(--lgsb-text); font-size: var(--lgsb-font-body); line-height: var(--lgsb-leading-body); margin: var(--lgsb-space-3) 0 0; } #lgsb-uploader .lgsb-gs-await-note.lgsb-gs-await-error { color: var(--lgsb-error-text); } #lgsb-uploader .lgsb-gs-await-actions { display: flex; justify-content: flex-end; margin-top: var(--lgsb-space-3); } #lgsb-uploader .lgsb-gs-review-btn { background: var(--lgsb-primary); border-color: var(--lgsb-primary); color: #fff; } #lgsb-uploader .lgsb-gs-review-btn:hover { background: var(--lgsb-teal-dark); border-color: var(--lgsb-teal-dark); color: #fff; } /* Passthrough design card: no raster preview exists — the thumb slot shows a teal document tile (icon + extension) instead, and the card is chipped "Finished gang sheet". Doubled class beats the base .lgsb-file-thumb checkerboard declared later in this file; not clickable (there is nothing bigger to show). */ #lgsb-uploader .lgsb-file-thumb.lgsb-file-thumb-vector { align-items: center; background: linear-gradient(160deg, var(--lgsb-teal-soft) 0%, #D5EBEF 100%); border-color: var(--lgsb-teal-mid); color: var(--lgsb-teal-dark); cursor: default; display: flex; flex-direction: column; gap: 4px; justify-content: center; } #lgsb-uploader .lgsb-file-thumb-vector svg { display: block; flex: 0 0 auto; } #lgsb-uploader .lgsb-thumb-ext { font-size: 10px; font-weight: var(--lgsb-weight-bold); letter-spacing: .08em; line-height: 1; } /* Meta row: the first block normally sizes to its content (flex: 0 0 auto, fine for a short DPI caption) — the Handling block must be allowed to shrink/wrap so it can never crush the Copies control beside it. */ #lgsb-uploader .lgsb-file-passthrough .lgsb-fc-meta .lgsb-fc-block:first-child { flex: 0 1 auto; min-width: 0; } #lgsb-uploader .lgsb-file-passthrough .lgsb-dpi-quality { text-align: left; white-space: normal; } #lgsb-uploader .lgsb-gs-badge { background: var(--lgsb-teal-soft); border-radius: var(--lgsb-radius-sm); color: var(--lgsb-teal-dark); display: inline-block; font-size: var(--lgsb-font-pill); font-weight: var(--lgsb-weight-semibold); line-height: var(--lgsb-leading-tight); margin-top: 4px; padding: 4px 8px; white-space: nowrap; } #lgsb-uploader .lgsb-gs-pill { background: var(--lgsb-teal-soft); color: var(--lgsb-teal-dark); } /* Locked dimensions readout (replaces the W/H inputs — the size is the file's measured size and can never be edited). */ #lgsb-uploader .lgsb-gs-dims-locked { align-items: baseline; display: flex; flex-wrap: wrap; gap: var(--lgsb-space-3); } #lgsb-uploader .lgsb-gs-dims-value { color: var(--lgsb-text); font-size: var(--lgsb-font-title-2); font-weight: var(--lgsb-weight-bold); } #lgsb-uploader .lgsb-gs-dims-note { color: var(--lgsb-text-muted); font-size: var(--lgsb-font-caption); } /* Confirmation modal: filename line above the explanatory copy. */ #lgsb-uploader .lgsb-modal--gangsheet .lgsb-gs-modal-file { color: var(--lgsb-text-muted); font-size: var(--lgsb-font-caption); font-weight: var(--lgsb-weight-bold); margin: 0 0 var(--lgsb-space-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* --- Pending direct-upload card (PNG measuring on the AWS worker) --- */ /* Qty/size stay locked until ready. A phase checklist replaces skeleton blocks so wait time reads as real work (upload → check → measure → prepare). */ #lgsb-uploader .lgsb-pending-thumb { background: conic-gradient(#eee 90deg, transparent 90deg 180deg, #eee 180deg 270deg, transparent 270deg) 0 0 / 16px 16px, #fff; border: var(--lgsb-nested-card-border-width) solid var(--lgsb-border); border-radius: var(--lgsb-radius-sm); flex: 0 0 56px; height: 56px; object-fit: contain; width: 56px; } #lgsb-uploader .lgsb-pending-check { display: flex; flex-direction: column; gap: 6px; list-style: none; margin: 0; padding: 0; } #lgsb-uploader .lgsb-pending-check-item { align-items: center; color: var(--lgsb-text-muted); display: flex; font-size: var(--lgsb-font-body-sm); font-weight: var(--lgsb-weight-medium); gap: var(--lgsb-space-2); line-height: 1.3; min-width: 0; } #lgsb-uploader .lgsb-pending-check-item.is-done { color: var(--lgsb-teal-dark); } #lgsb-uploader .lgsb-pending-check-item.is-active { color: var(--lgsb-ink); font-weight: var(--lgsb-weight-semibold); } #lgsb-uploader .lgsb-pending-check-mark { align-items: center; border: 1.5px solid var(--lgsb-border); border-radius: 50%; display: inline-flex; flex: 0 0 16px; height: 16px; justify-content: center; width: 16px; } #lgsb-uploader .lgsb-pending-check-item.is-done .lgsb-pending-check-mark { background: var(--lgsb-teal); border-color: var(--lgsb-teal); color: #fff; } #lgsb-uploader .lgsb-pending-check-item.is-done .lgsb-pending-check-mark svg { display: block; height: 10px; width: 10px; } #lgsb-uploader .lgsb-pending-check-item.is-active .lgsb-pending-check-mark { border-color: transparent; } #lgsb-uploader .lgsb-pending-check-spin { animation: lgsb-spin .8s linear infinite; border: 2px solid var(--lgsb-border); border-radius: 50%; border-top-color: var(--lgsb-teal); display: block; height: 14px; width: 14px; } #lgsb-uploader .lgsb-pending-check-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (prefers-reduced-motion: reduce) { #lgsb-uploader .lgsb-pending-check-spin { animation: none; border-top-color: var(--lgsb-teal); opacity: .85; } } /* --- 3.7 Modal --- */ #lgsb-uploader .lgsb-modal-overlay { align-items: center; background: rgba(17, 17, 17, .55); display: flex; inset: 0; justify-content: center; opacity: 0; padding: var(--lgsb-space-5); position: fixed; transition: opacity var(--lgsb-dur-base) var(--lgsb-ease); z-index: var(--lgsb-z-modal); } #lgsb-uploader .lgsb-modal { background: var(--lgsb-surface); border-radius: var(--lgsb-radius-card); box-shadow: var(--lgsb-shadow-modal); max-width: 440px; padding: var(--lgsb-space-6); transform: translateY(8px) scale(.97); transition: transform var(--lgsb-dur-base) var(--lgsb-ease-out); width: 100%; } /* Confirm dialog opened ON TOP of another modal (e.g. Reset to Original inside the Edit modal). Sits one step above the modal layer and uses a LIGHTER scrim than a first-level modal — stacking two 55% scrims would black out the editor behind it, and the customer loses the context the question is about. (Unrelated to .lgsb-modal-actions--stacked, which is about button direction.) */ #lgsb-uploader .lgsb-modal-overlay--nested { background: rgba(17, 17, 17, .38); z-index: calc(var(--lgsb-z-modal) + 1); } /* Narrower than a content modal: a yes/no question reads better on short lines, and the tighter box signals "decision", not "workspace". */ #lgsb-uploader .lgsb-modal--confirm { max-width: 400px; } #lgsb-uploader .lgsb-modal-overlay.lgsb-modal-visible { opacity: 1; } /* Body scroll lock (v2.118.0): while ANY plugin modal is open, the page behind it must not scroll (wheel/touch at the modal edge was moving the Divi page underneath the editor). :has() needs no JS bookkeeping — the lock releases the instant .lgsb-modal-visible drops, even on the 180 ms fade-out, and browsers without :has() simply keep old behavior. !important beats theme-level body overflow rules. */ body:has(#lgsb-uploader .lgsb-modal-overlay.lgsb-modal-visible) { overflow: hidden !important; } #lgsb-uploader .lgsb-modal-overlay.lgsb-modal-visible .lgsb-modal { transform: none; } #lgsb-uploader .lgsb-modal-title { font-size: 17px; font-weight: var(--lgsb-weight-bold); line-height: var(--lgsb-leading-tight); margin-bottom: var(--lgsb-space-3); } #lgsb-uploader .lgsb-modal-body { color: var(--lgsb-text); font-size: 13px; } #lgsb-uploader .lgsb-modal-body p + p, #lgsb-uploader .lgsb-modal-body p + ul { margin-top: var(--lgsb-space-2); } #lgsb-uploader .lgsb-modal-list { list-style: disc; margin: var(--lgsb-space-2) 0 0; padding-left: 20px; } #lgsb-uploader .lgsb-modal-warning { color: var(--lgsb-error-text); font-weight: var(--lgsb-weight-semibold); margin-top: var(--lgsb-space-3); } /* Add-to-cart checkpoint (consolidated background confirmation) */ #lgsb-uploader .lgsb-cartack-list { list-style: disc; margin: var(--lgsb-space-2) 0 0; padding-left: 20px; } #lgsb-uploader .lgsb-cartack-list li + li { margin-top: var(--lgsb-space-1); } #lgsb-uploader .lgsb-cartack-acked { color: var(--lgsb-text-muted); font-size: 12px; margin-top: var(--lgsb-space-3); } #lgsb-uploader .lgsb-modal-actions { display: flex; flex-wrap: wrap; gap: var(--lgsb-space-2); justify-content: flex-end; margin-top: var(--lgsb-space-5); } /* Global rule: buttons inside width-constrained containers (modals) must never overflow the card — they share the row, shrink, and wrap their label instead of clipping. */ #lgsb-uploader .lgsb-modal-actions .lgsb-modal-btn { flex: 1 1 auto; min-width: 0; white-space: normal; } #lgsb-uploader .lgsb-modal-actions--stacked { flex-direction: column; /* Target-job pickers can list 20+ jobs — scroll inside the dialog instead of growing past the viewport. */ max-height: 40vh; overflow-y: auto; } #lgsb-uploader .lgsb-modal-actions--stacked .lgsb-modal-btn { flex: 0 0 auto; width: 100%; } /* Background Detected option cards: each choice is one full-width button holding a bold label plus a one-line "pick this when" description, so the customer can scan four outcomes instead of decoding bare button labels. Inherits the stacked container's 40vh scroll box, so four cards + warning copy still fit a small phone viewport. */ #lgsb-uploader .lgsb-ack-cards { /* .lgsb-modal-actions sets flex-wrap: wrap — in a column flex that wraps overflowing cards into a SECOND COLUMN instead of scrolling. Force the single column so the 40vh scroll box actually scrolls vertically. */ flex-wrap: nowrap; /* .lgsb-modal-actions also sets justify-content: flex-end (right-aligns row buttons) — in the column axis that bottom-aligns the cards and clips the FIRST card's top out of the scroll box (unreachable overflow). Start-align so overflow falls at the scrollable bottom. */ justify-content: flex-start; } #lgsb-uploader .lgsb-ack-card { align-items: flex-start; display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; text-align: left; } #lgsb-uploader .lgsb-ack-card-label { font-weight: var(--lgsb-weight-bold); } /* Sentence-case helper line; the label above keeps the button treatment. */ #lgsb-uploader .lgsb-ack-card-desc { font-size: 12px; font-weight: var(--lgsb-weight-regular); letter-spacing: normal; line-height: var(--lgsb-leading-body); text-transform: none; } /* Description contrast per card tone: muted ink on outlined cards, translucent white on the filled primary/danger cards. */ #lgsb-uploader .lgsb-modal-btn-secondary .lgsb-ack-card-desc { color: var(--lgsb-text-muted); } #lgsb-uploader .lgsb-modal-btn-primary .lgsb-ack-card-desc, #lgsb-uploader .lgsb-modal-btn-danger .lgsb-ack-card-desc { color: rgba(255, 255, 255, .85); } /* Tiebreaker shown only when BOTH fix-it tools are offered. */ #lgsb-uploader .lgsb-ack-tiebreak { color: var(--lgsb-text-muted); font-size: 12px; line-height: var(--lgsb-leading-body); margin-top: var(--lgsb-space-3); } /* Job Gap dialog — the number is entered here (never inline in the popover), alongside copy explaining what it applies to. */ #lgsb-uploader .lgsb-jobgap-field { align-items: center; display: flex; flex-direction: row; gap: var(--lgsb-space-2); margin-top: var(--lgsb-space-3); } #lgsb-uploader .lgsb-jobgap-field > span { font-weight: var(--lgsb-weight-semibold); } #lgsb-uploader .lgsb-jobgap-input { -moz-appearance: textfield; appearance: textfield; background: var(--lgsb-surface); border: var(--lgsb-input-border-width) solid var(--lgsb-border); border-radius: var(--lgsb-radius-input); color: var(--lgsb-text); font-family: var(--lgsb-font-family); font-size: var(--lgsb-font-body-sm); font-weight: var(--lgsb-weight-semibold); height: 32px; padding: 0 var(--lgsb-space-2); text-align: center; width: 84px; } #lgsb-uploader .lgsb-jobgap-input:focus { border-color: var(--lgsb-teal); box-shadow: 0 0 0 3px rgba(0, 125, 145, .15); outline: none; } /* An entered override reads as "customized" (matches the design cards) */ #lgsb-uploader .lgsb-jobgap-input:not(:placeholder-shown) { border-color: var(--lgsb-teal); color: var(--lgsb-teal); } #lgsb-uploader .lgsb-jobgap-hint { color: var(--lgsb-text-muted); font-size: var(--lgsb-font-caption); margin-top: var(--lgsb-space-2); } /* --- 3.8 Layout preview modal --- A faithful miniature of the server's nesting plan. One sheet shows at a time inside a fixed viewport (no scrolling) — JS scales the sheet's px box to fit while keeping its true proportions; placements are percentage-positioned so they scale along for free. The checkerboard backdrop signals film transparency (the designs are transparent PNGs). */ #lgsb-uploader .lgsb-modal--preview { display: flex; flex-direction: column; max-height: 90vh; max-width: 760px; } #lgsb-uploader .lgsb-lp-intro { color: var(--lgsb-text-muted); font-size: 13px; margin-bottom: var(--lgsb-space-3); } /* Preview-modal variant of the "contour gap not applied" explainer. */ #lgsb-uploader .lgsb-lp-gap-note { background: var(--lgsb-warning-bg); border-radius: var(--lgsb-radius-sm); color: var(--lgsb-warning-text); font-size: var(--lgsb-font-body-sm); font-weight: var(--lgsb-weight-medium); line-height: 1.45; margin-bottom: var(--lgsb-space-3); padding: var(--lgsb-space-2) var(--lgsb-space-3); } /* Toolbar row above the viewport: sheet label left, dark toggle right. */ #lgsb-uploader .lgsb-lp-toolbar { align-items: center; display: flex; gap: var(--lgsb-space-3); justify-content: space-between; margin-bottom: var(--lgsb-space-2); } #lgsb-uploader .lgsb-lp-sheet-label { color: var(--lgsb-ink); font-size: var(--lgsb-font-pill); font-weight: var(--lgsb-weight-semibold); letter-spacing: .03em; margin-bottom: 0; text-transform: uppercase; } #lgsb-uploader .lgsb-lp-dark-toggle { gap: var(--lgsb-space-2); } #lgsb-uploader .lgsb-lp-dark-label { color: var(--lgsb-text-muted); font-size: var(--lgsb-font-body-sm); font-weight: var(--lgsb-weight-medium); white-space: nowrap; } #lgsb-uploader .lgsb-lp-viewport { align-items: center; background: var(--lgsb-surface-dim); border-radius: var(--lgsb-radius-sm); display: flex; height: min(58vh, 560px); justify-content: center; overflow: hidden; padding: var(--lgsb-space-2); transition: background var(--lgsb-dur-base) var(--lgsb-ease); } /* Dark mode — the film against black instead of the transparency checkerboard (white/light artwork is invisible on the checkerboard). */ #lgsb-uploader .lgsb-lp-viewport.lgsb-lp-dark { background: #1B1E20; } #lgsb-uploader .lgsb-lp-dark .lgsb-lp-sheet { background-color: #000; background-image: none; border-color: #3A3F43; } #lgsb-uploader .lgsb-lp-sheet { background-color: var(--lgsb-surface); background-image: linear-gradient(45deg, #E9EDEF 25%, transparent 25%, transparent 75%, #E9EDEF 75%), linear-gradient(45deg, #E9EDEF 25%, transparent 25%, transparent 75%, #E9EDEF 75%); background-position: 0 0, 8px 8px; background-size: 16px 16px; border: var(--lgsb-nested-card-border-width) solid var(--lgsb-border); border-radius: 3px; /* content-box so the border lives OUTSIDE the sheet geometry — with the theme's global border-box the border would shrink the placement coordinate space unevenly per axis and skew every design. */ box-sizing: content-box !important; display: none; flex: 0 0 auto; overflow: hidden; padding: 0; position: relative; } #lgsb-uploader .lgsb-lp-item { position: absolute; } /* Printed text bands — job-group labels + the "Sheet X of Y" header — drawn exactly where the worker prints them (bold, near-black, left aligned, vertically centred; see buildLabelComposite in the render worker). The px font size is set inline by JS from the plan's font_size_in × the sheet's px-per-inch scale; the em padding mirrors the worker's small left pad and scales along with the font. */ #lgsb-uploader .lgsb-lp-label { color: #111111; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-weight: 700; overflow: hidden; padding-left: .35em; position: absolute; text-overflow: ellipsis; white-space: nowrap; } /* Dark background toggle: the real film prints dark text, but on the black preview backdrop it would vanish — invert for legibility only. */ #lgsb-uploader .lgsb-lp-dark .lgsb-lp-label { color: #E9EDEF; } /* Zoom & pan (same engine as the Thin Line viewer): wheel/pinch zoom and drag-to-pan are handled on the viewport itself — never scroll the page. */ #lgsb-uploader .lgsb-lp-viewport { cursor: grab; touch-action: none; } #lgsb-uploader .lgsb-lp-viewport.lgsb-lp-panning { cursor: grabbing; } /* Zoom toolbar between the viewport and the pager. */ #lgsb-uploader .lgsb-lp-zoom { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; margin: var(--lgsb-space-2) 0 0; } #lgsb-uploader .lgsb-lp-zoombtn { background: var(--lgsb-surface); border: 1px solid var(--lgsb-border); border-radius: var(--lgsb-radius-sm); color: var(--lgsb-ink); cursor: pointer; font-family: inherit; font-size: 13px; font-weight: var(--lgsb-weight-bold); line-height: 1; min-width: 30px; padding: 6px 9px; } #lgsb-uploader .lgsb-lp-zoombtn:hover { border-color: var(--lgsb-primary); color: var(--lgsb-primary); } #lgsb-uploader .lgsb-lp-zoomhint { color: var(--lgsb-text-muted); font-size: 11px; margin-left: auto; } /* Theme armor: Divi/Woo apply `img { max-width: 100% }` globally, which caps a rotated copy's oversized pre-rotation box at its container width and squishes the artwork. Preview images are exactly sized — never clamp them. */ #lgsb-uploader .lgsb-lp-item img { display: block; height: 100%; max-height: none !important; max-width: none !important; width: 100%; } /* Rotated copies (rotation is CLOCKWISE degrees — the shared convention with the PHP geometry and the sharp render pipeline). 90°/270°: the artwork fills the placement's cross-axis box and is spun about its center (inline width/height carry the swap ratios). 180°: same box, flipped upside down — no size swap. .lgsb-lp-img-rot is the legacy 90° class kept for cached JS. */ #lgsb-uploader .lgsb-lp-item img.lgsb-lp-img-rot, #lgsb-uploader .lgsb-lp-item img.lgsb-lp-img-rot90 { left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%) rotate(90deg); } #lgsb-uploader .lgsb-lp-item img.lgsb-lp-img-rot180 { transform: rotate(180deg); } #lgsb-uploader .lgsb-lp-item img.lgsb-lp-img-rot270 { left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%) rotate(270deg); } /* Fallback when a design card has no thumbnail to reuse. */ #lgsb-uploader .lgsb-lp-item-empty { background: var(--lgsb-teal-soft); border: 1px solid var(--lgsb-teal); border-radius: 2px; } /* Sheet pager — one numbered button per sheet, active = filled teal. */ #lgsb-uploader .lgsb-lp-pager { display: flex; flex-wrap: wrap; gap: var(--lgsb-space-2); justify-content: center; margin-top: var(--lgsb-space-3); } #lgsb-uploader .lgsb-lp-page-btn { background: var(--lgsb-surface); border: none; border-radius: var(--lgsb-radius-sm); box-shadow: inset 0 0 0 var(--lgsb-button-border-width) var(--lgsb-teal); color: var(--lgsb-teal); cursor: pointer; font-family: var(--lgsb-font-family); font-size: var(--lgsb-font-button); font-weight: var(--lgsb-weight-bold); height: 34px; line-height: 1; min-width: 34px; padding: 0 var(--lgsb-space-2); transition: background var(--lgsb-dur-fast) var(--lgsb-ease), color var(--lgsb-dur-fast) var(--lgsb-ease); } #lgsb-uploader .lgsb-lp-page-btn:hover:not(.lgsb-lp-page-active) { background: var(--lgsb-teal-soft); } #lgsb-uploader .lgsb-lp-page-btn.lgsb-lp-page-active { background: var(--lgsb-teal); box-shadow: none; color: #fff; cursor: default; } /* --- 3.9 Size presets + bulk actions (v2.28.0) --------------------------- Custom (non-native) checkboxes: Divi replaces native checkbox chrome, so the real input is visually hidden and .lgsb-check-box paints the state — theme-proof by construction, keyboard/focus handled via :focus-visible on the label's box. Teal = selection per the semantic palette (§6.4). */ /* Shared custom checkbox (design-card corner + toolbar Select All) */ #lgsb-uploader .lgsb-select-check { align-items: center; cursor: pointer; display: inline-flex; gap: var(--lgsb-space-2); } #lgsb-uploader .lgsb-select-check .lgsb-select-input, #lgsb-uploader .lgsb-select-check .lgsb-bulk-selectall-input { height: 1px; margin: 0; opacity: 0; position: absolute; width: 1px; } /* Teal border at rest (visible against card/thumb), solid teal fill on hover; the checked state below is unchanged. */ #lgsb-uploader .lgsb-check-box { align-items: center; background: var(--lgsb-surface); border: var(--lgsb-input-border-width) solid var(--lgsb-teal); border-radius: var(--lgsb-radius-sm); color: transparent; display: inline-flex; flex: 0 0 auto; height: 18px; justify-content: center; transition: background var(--lgsb-dur-fast) var(--lgsb-ease), border-color var(--lgsb-dur-fast) var(--lgsb-ease); width: 18px; } #lgsb-uploader .lgsb-select-check:hover .lgsb-check-box { background: var(--lgsb-teal); border-color: var(--lgsb-teal); } #lgsb-uploader .lgsb-select-check input:checked + .lgsb-check-box { background: var(--lgsb-teal); border-color: var(--lgsb-teal); color: #fff; } #lgsb-uploader .lgsb-select-check input:focus-visible + .lgsb-check-box { box-shadow: var(--lgsb-focus-ring); } /* Select All half-state (some cards in the job selected) */ #lgsb-uploader .lgsb-select-check input:indeterminate + .lgsb-check-box { background: var(--lgsb-teal-soft); border-color: var(--lgsb-teal); color: var(--lgsb-teal); } /* Design-card corner checkbox — absolutely positioned over the top-left so the prescribed .lgsb-fc-head three-column layout is untouched. */ #lgsb-uploader .lgsb-file-row { position: relative; } #lgsb-uploader .lgsb-file-row > .lgsb-select-check { left: 6px; position: absolute; top: 6px; z-index: 2; } /* Selected card — teal glow (focus-ring recipe) + soft tint. Warned/blocked border colors still win (state borders are set on the same property). */ #lgsb-uploader .lgsb-file-row.lgsb-card-selected { background: var(--lgsb-teal-soft); border-color: var(--lgsb-teal); box-shadow: var(--lgsb-focus-ring); } /* Per-card Preset button — labeled icon button on the "Dimensions (in)" header line (label left, button right), so the W/H input row keeps its full width. The head is also the quick-apply menu's anchor. */ #lgsb-uploader .lgsb-fc-dims-head { align-items: center; display: flex; justify-content: space-between; position: relative; } #lgsb-uploader .lgsb-preset-btn { align-items: center; background: var(--lgsb-surface); border: 1px solid var(--lgsb-border); border-radius: var(--lgsb-radius-sm); color: var(--lgsb-text-muted); cursor: pointer; display: inline-flex; flex: 0 0 auto; font-family: var(--lgsb-font-family); font-size: var(--lgsb-font-pill); font-weight: var(--lgsb-weight-semibold); gap: 4px; height: 24px; justify-content: center; line-height: 1; padding: 0 8px; transition: background var(--lgsb-dur-fast) var(--lgsb-ease), border-color var(--lgsb-dur-fast) var(--lgsb-ease), color var(--lgsb-dur-fast) var(--lgsb-ease); } #lgsb-uploader .lgsb-preset-btn svg { height: 13px; width: 13px; } #lgsb-uploader .lgsb-preset-btn:hover { background: var(--lgsb-teal-soft); border-color: var(--lgsb-teal); color: var(--lgsb-teal); } /* Quick-apply dropdown anchored under the Dimensions header line. */ #lgsb-uploader .lgsb-preset-menu { background: var(--lgsb-surface); border: 1px solid var(--lgsb-border); border-radius: var(--lgsb-radius-nested); box-shadow: var(--lgsb-shadow-menu); max-height: 240px; min-width: 180px; overflow-y: auto; padding: var(--lgsb-space-1) 0; position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; } #lgsb-uploader .lgsb-preset-menu-item { align-items: baseline; background: transparent; border: none; color: var(--lgsb-text); cursor: pointer; display: flex; font-family: var(--lgsb-font-family); font-size: var(--lgsb-font-body-sm); gap: var(--lgsb-space-2); justify-content: space-between; padding: 7px var(--lgsb-space-4); text-align: left; width: 100%; } #lgsb-uploader .lgsb-preset-menu-item:hover, #lgsb-uploader .lgsb-preset-menu-item:focus-visible { background: var(--lgsb-teal-soft); color: var(--lgsb-teal); } #lgsb-uploader .lgsb-preset-menu-name { font-weight: var(--lgsb-weight-semibold); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #lgsb-uploader .lgsb-preset-menu-size { color: var(--lgsb-text-muted); flex: 0 0 auto; } #lgsb-uploader .lgsb-preset-menu-sep { background: var(--lgsb-border); height: 1px; margin: var(--lgsb-space-1) 0; } #lgsb-uploader .lgsb-preset-menu-manage { color: var(--lgsb-teal); font-weight: var(--lgsb-weight-semibold); } /* Transient in-card max-size error (same muted brick recipe as warnings). */ #lgsb-uploader .lgsb-size-error { background: var(--lgsb-error-bg); border: 1px solid var(--lgsb-error-border); border-radius: var(--lgsb-radius-sm); color: var(--lgsb-error-text); font-size: var(--lgsb-font-body-sm); line-height: 1.4; padding: var(--lgsb-space-2) var(--lgsb-space-3); } /* --- 3.9b Contour Nesting (experimental, v2.45.0) ------------------------- Card control row: [custom checkbox] Allow Contour Nesting [info]. Reuses the theme-proof .lgsb-select-check / .lgsb-check-box recipe; the control is ABSENT (not disabled) on ineligible cards, and hidden/shown live as resizes cross the dimension threshold. When checked, the label shifts to teal-dark + semibold (no extra badge row). */ #lgsb-uploader .lgsb-fc-contour { align-items: center; display: flex; flex-wrap: wrap; gap: var(--lgsb-space-2); } #lgsb-uploader .lgsb-fc-contour[hidden] { display: none; } #lgsb-uploader .lgsb-select-check .lgsb-contour-input { height: 1px; margin: 0; opacity: 0; position: absolute; width: 1px; } #lgsb-uploader .lgsb-contour-label { color: var(--lgsb-ink); font-size: var(--lgsb-font-body-sm); font-weight: var(--lgsb-weight-medium); line-height: 1.3; transition: color var(--lgsb-dur-fast) var(--lgsb-ease), font-weight var(--lgsb-dur-fast) var(--lgsb-ease); } #lgsb-uploader .lgsb-contour-input:checked ~ .lgsb-contour-label { color: var(--lgsb-teal-dark); font-weight: var(--lgsb-weight-semibold); } #lgsb-uploader .lgsb-contour-busy { opacity: .55; pointer-events: none; } /* Info icon — bare teal icon button, matches the muted-utility recipe. */ #lgsb-uploader .lgsb-contour-info { align-items: center; background: none; border: 0; border-radius: var(--lgsb-radius-sm); color: var(--lgsb-text-muted); cursor: pointer; display: inline-flex; flex: 0 0 auto; justify-content: center; line-height: 0; padding: 2px; transition: color var(--lgsb-dur-fast) var(--lgsb-ease); } #lgsb-uploader .lgsb-contour-info:hover { color: var(--lgsb-teal); } #lgsb-uploader .lgsb-contour-info:focus-visible { box-shadow: var(--lgsb-focus-ring); outline: none; } /* Contour gap row (v2.48.0) — full-width second line inside the contour control; only rendered/shown while the design's toggle is on. Blank input = inherit the design's normal gap (the placeholder mirrors it). */ #lgsb-uploader .lgsb-contour-gap { flex-basis: 100%; } #lgsb-uploader .lgsb-contour-gap[hidden] { display: none; } #lgsb-uploader .lgsb-contour-gap-label { align-items: center; color: var(--lgsb-text-soft); display: flex; font-size: var(--lgsb-font-label); font-weight: var(--lgsb-weight-semibold); gap: var(--lgsb-space-2); margin: 0; } #lgsb-uploader .lgsb-contour-gap-input { max-width: 90px; text-align: center; } /* Neutral in-card note for contour outcomes (teal info recipe, not error). */ #lgsb-uploader .lgsb-contour-note { background: var(--lgsb-teal-soft); border-left: 3px solid var(--lgsb-teal); border-radius: var(--lgsb-radius-sm); color: var(--lgsb-text); font-size: var(--lgsb-font-body-sm); line-height: 1.4; padding: var(--lgsb-space-2) var(--lgsb-space-3); } /* Helper-dialog graphic: standard (stacked) vs contour (staggered). */ #lgsb-uploader .lgsb-contour-graphic { display: block; height: auto; margin: var(--lgsb-space-3) auto; max-width: 460px; width: 100%; } #lgsb-uploader .lgsb-cg-panel { fill: var(--lgsb-surface-alt, #F7F9FA); stroke: var(--lgsb-border); } #lgsb-uploader .lgsb-cg-title { fill: var(--lgsb-ink); font-family: var(--lgsb-font-family); font-size: 18px; font-weight: 700; } #lgsb-uploader .lgsb-cg-note { fill: var(--lgsb-teal-dark); font-family: var(--lgsb-font-family); font-size: 13px; } #lgsb-uploader .lgsb-cg-bounds { fill: none; stroke: var(--lgsb-text-muted); stroke-dasharray: 5 4; stroke-width: 1.5; } #lgsb-uploader .lgsb-cg-bounds-overlap { stroke: var(--lgsb-teal); } #lgsb-uploader .lgsb-cg-circle { fill: var(--lgsb-teal-soft); stroke: var(--lgsb-teal); stroke-width: 2; } #lgsb-uploader .lgsb-contour-fineprint { color: var(--lgsb-text-muted); font-size: var(--lgsb-font-body-sm); } /* --- Thin lines / small islands (underbase choke check) --- */ /* Quiet inline status while the worker measures a fresh upload. Deliberately NOT a warning chip — it must never amber the card. */ #lgsb-uploader .lgsb-thinline-checking { color: var(--lgsb-text-muted); font-size: 11px; margin: 2px 0 0; } /* Thin-line chip: compact stacked layout — head row (title + risk label), one summary sentence, then the action row. The generic warning-chip li centers its children; this one top-aligns so the icon sits by the title. */ #lgsb-uploader .lgsb-thinline-warn { align-items: flex-start; } #lgsb-uploader .lgsb-thinline-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 4px; min-width: 0; } #lgsb-uploader .lgsb-thinline-head { align-items: baseline; column-gap: 8px; display: flex; flex-wrap: wrap; } #lgsb-uploader .lgsb-thinline-head .lgsb-warn-title { margin-bottom: 0; } /* Concise risk label beside the title ("Minor risk" / "Moderate risk" / "High risk"). No green tier — a clean design has no chip at all. */ #lgsb-uploader .lgsb-warn-severity { color: var(--lgsb-warning-text); font-size: 11px; font-weight: var(--lgsb-weight-bold); white-space: nowrap; } #lgsb-uploader .lgsb-thinline-actions { align-items: stretch; display: flex; gap: 6px; margin-top: 2px; } /* "View affected areas" — a clear outlined action, not a text link. Teal = action per the semantic palette; nearly full-width within the chip. */ #lgsb-uploader .lgsb-thinline-view { align-items: center; background: var(--lgsb-surface, #fff); border: var(--lgsb-button-border-width) solid var(--lgsb-teal); border-radius: var(--lgsb-radius-input); color: var(--lgsb-teal); cursor: pointer; display: inline-flex; flex: 1 1 auto; font-family: inherit; font-size: 11px; font-weight: var(--lgsb-weight-bold); gap: 6px; justify-content: center; line-height: 1; padding: 7px 10px; transition: background-color var(--lgsb-dur-base) var(--lgsb-ease); } #lgsb-uploader .lgsb-thinline-view:hover { background: var(--lgsb-teal-soft); } #lgsb-uploader .lgsb-thinline-view svg { flex: 0 0 auto; } /* Up-chevron — collapses the chip back into the compact notices pill. */ #lgsb-uploader .lgsb-warn-collapse { align-items: center; background: none; border: var(--lgsb-button-border-width) solid transparent; border-radius: var(--lgsb-radius-input); color: var(--lgsb-warning-text); cursor: pointer; display: inline-flex; flex: 0 0 auto; justify-content: center; padding: 7px; transition: color var(--lgsb-dur-base) var(--lgsb-ease); } #lgsb-uploader .lgsb-warn-collapse:hover { color: var(--lgsb-ink); } /* Overlay viewer: artwork over the transparency checkerboard by default (black prints would vanish on a black stage), with a Dark background toggle matching the Layout Preview for white/light artwork. The mask is recolored client-side (editable) and can punch out for print preview. */ #lgsb-uploader .lgsb-modal--thinline { max-height: 90vh; max-width: 720px; overflow: auto; } /* Toolbar above the stage: Highlight | Print preview + optional mask color on the left; Dark background switch on the right. */ #lgsb-uploader .lgsb-thinline-toolbar { align-items: center; display: flex; flex-wrap: wrap; gap: var(--lgsb-space-2) var(--lgsb-space-3); justify-content: flex-start; margin: var(--lgsb-space-3) 0 0; } #lgsb-uploader .lgsb-thinline-toolbar .lgsb-lp-dark-toggle { margin-left: auto; } /* Same segmented recipe as .lgsb-semitrans-compare (Highlight / Print preview). */ #lgsb-uploader .lgsb-thinline-mode { background: var(--lgsb-bg-soft, #F2F4F5); border: 1px solid var(--lgsb-border); border-radius: var(--lgsb-radius-input); display: inline-flex; gap: 2px; padding: 2px; } #lgsb-uploader .lgsb-thinline-mode-btn { background: none; border: 0; border-radius: calc(var(--lgsb-radius-input) - 2px); color: var(--lgsb-text-muted); cursor: pointer; font-family: inherit; font-size: 12px; font-weight: var(--lgsb-weight-bold); line-height: 1; padding: 6px 12px; transition: background-color var(--lgsb-dur-base) var(--lgsb-ease), color var(--lgsb-dur-base) var(--lgsb-ease); } #lgsb-uploader .lgsb-thinline-mode-btn.is-active { background: var(--lgsb-surface); box-shadow: var(--lgsb-shadow-card, 0 1px 2px rgba(0, 0, 0, .12)); color: var(--lgsb-ink); } #lgsb-uploader .lgsb-thinline-colorwrap { align-items: center; display: inline-flex; flex-wrap: wrap; gap: 6px 8px; } /* display:inline-flex above beats the UA's [hidden] rule — restate it. */ #lgsb-uploader .lgsb-thinline-colorwrap[hidden] { display: none; } #lgsb-uploader .lgsb-thinline-colorlabel { color: var(--lgsb-text-muted); font-size: 11px; font-weight: var(--lgsb-weight-bold); letter-spacing: .02em; text-transform: uppercase; } #lgsb-uploader .lgsb-thinline-presets { display: inline-flex; gap: 4px; } #lgsb-uploader .lgsb-thinline-preset { background: var(--lgsb-surface); border: 1px solid var(--lgsb-border); border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); cursor: pointer; flex: 0 0 18px; height: 18px; padding: 0; width: 18px; } #lgsb-uploader .lgsb-thinline-preset.is-active { border-color: var(--lgsb-ink); box-shadow: 0 0 0 2px var(--lgsb-surface), 0 0 0 3px var(--lgsb-ink); } #lgsb-uploader .lgsb-thinline-color { background: transparent; border: 1px solid var(--lgsb-border); border-radius: var(--lgsb-radius-sm); cursor: pointer; height: 28px; padding: 2px; width: 36px; } #lgsb-uploader .lgsb-thinline-stage { align-items: center; /* Same checkerboard recipe as the Layout Preview sheet. */ background-color: var(--lgsb-surface); background-image: linear-gradient(45deg, #E9EDEF 25%, transparent 25%, transparent 75%, #E9EDEF 75%), linear-gradient(45deg, #E9EDEF 25%, transparent 25%, transparent 75%, #E9EDEF 75%); background-position: 0 0, 8px 8px; background-size: 16px 16px; border: 1px solid var(--lgsb-border); border-radius: var(--lgsb-radius-sm); display: flex; justify-content: center; margin: var(--lgsb-space-2) 0 var(--lgsb-space-3); min-height: 180px; padding: var(--lgsb-space-3); transition: background-color var(--lgsb-dur-base) var(--lgsb-ease); } #lgsb-uploader .lgsb-thinline-stage.lgsb-thinline-dark { background-color: #000; background-image: none; border-color: #3A3F43; } /* Thumbnail enlarge modal — reuses .lgsb-modal--thinline + stage/toggle. */ #lgsb-uploader .lgsb-modal--thumbpreview .lgsb-thumbpreview-meta { color: var(--lgsb-text-muted); font-size: 13px; margin: 0; } #lgsb-uploader .lgsb-modal--thumbpreview .lgsb-thinline-toolbar { /* When dimensions are omitted the toolbar is the first body child. */ margin-top: var(--lgsb-space-2); } #lgsb-uploader .lgsb-thinline-canvas { cursor: grab; display: block; max-width: 100%; /* Pinch/drag are handled on the canvas itself — never scroll the page. */ touch-action: none; } #lgsb-uploader .lgsb-thinline-canvas.lgsb-thinline-panning { cursor: grabbing; } /* Zoom toolbar between the stage and the legend. */ #lgsb-uploader .lgsb-thinline-zoom { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--lgsb-space-2); } /* display:flex above beats the UA's [hidden] rule — restate it (every modal renders the bar hidden until its stage image loads). */ #lgsb-uploader .lgsb-thinline-zoom[hidden] { display: none; } #lgsb-uploader .lgsb-thinline-zoombtn { background: var(--lgsb-surface); border: 1px solid var(--lgsb-border); border-radius: var(--lgsb-radius-sm); color: var(--lgsb-ink); cursor: pointer; font-family: inherit; font-size: 12px; font-weight: var(--lgsb-weight-bold); line-height: 1; min-width: 30px; padding: 6px 9px; } #lgsb-uploader .lgsb-thinline-zoombtn:hover { border-color: var(--lgsb-primary); color: var(--lgsb-primary); } /* Before/after compare toggle (edit modal): filled while comparing. */ #lgsb-uploader .lgsb-edit-cmp-btn.is-active { background: var(--lgsb-primary); border-color: var(--lgsb-primary); color: #fff; } #lgsb-uploader .lgsb-edit-cmp-btn.is-active:hover { color: #fff; } /* Hand/pan toggle (v2.118.0): filled while pan overrides the tools. The SVG hand sits on the same baseline as the text buttons around it. */ #lgsb-uploader .lgsb-edit-pan-btn svg { display: block; } #lgsb-uploader .lgsb-edit-pan-btn.is-active { background: var(--lgsb-primary); border-color: var(--lgsb-primary); color: #fff; } #lgsb-uploader .lgsb-edit-pan-btn.is-active:hover { color: #fff; } /* While pan mode is on, the stage always reads as grabbable — beats the pickmode/brushmode cursors (those classes are dropped in JS anyway). */ #lgsb-uploader .lgsb-edit-stage.lgsb-edit-panmode .lgsb-thinline-canvas { cursor: grab; } #lgsb-uploader .lgsb-thinline-zoomhint { color: var(--lgsb-text-muted); font-size: 11px; margin-left: auto; } #lgsb-uploader .lgsb-thinline-loading { color: var(--lgsb-ink); font-size: 13px; opacity: .75; } #lgsb-uploader .lgsb-thinline-dark .lgsb-thinline-loading { color: #fff; } /* --- Fix Thin Lines dialog (v2.127.0) --------------------------------- */ /* "Fix it for me" — the chip's primary action: filled teal, sits ahead of the outlined "View affected areas" (same geometry so the pair reads as one control group). */ #lgsb-uploader .lgsb-thinline-fix { align-items: center; background: var(--lgsb-teal); border: var(--lgsb-button-border-width) solid var(--lgsb-teal); border-radius: var(--lgsb-radius-input); color: #fff; cursor: pointer; display: inline-flex; flex: 1 1 auto; font-family: inherit; font-size: 11px; font-weight: var(--lgsb-weight-bold); gap: 6px; justify-content: center; line-height: 1; padding: 7px 10px; transition: filter var(--lgsb-dur-base) var(--lgsb-ease); } #lgsb-uploader .lgsb-thinline-fix:hover { filter: brightness(1.08); } #lgsb-uploader .lgsb-thinline-fix svg { flex: 0 0 auto; } #lgsb-uploader .lgsb-thinfix-intro, #lgsb-uploader .lgsb-thinfix-sizenote { color: var(--lgsb-ink); font-size: 13px; line-height: 1.5; margin: 0 0 var(--lgsb-space-2); } #lgsb-uploader .lgsb-thinfix-sizenote { color: var(--lgsb-text-muted); } /* Print-size row: label + two aspect-linked inch inputs. */ #lgsb-uploader .lgsb-thinfix-sizes { align-items: center; display: flex; flex-wrap: wrap; gap: var(--lgsb-space-2); margin: var(--lgsb-space-3) 0 var(--lgsb-space-2); } #lgsb-uploader .lgsb-thinfix-sizelabel { font-size: 13px; font-weight: var(--lgsb-weight-bold); } #lgsb-uploader .lgsb-thinfix-sizes input[type="number"] { border: 1px solid var(--lgsb-border); border-radius: var(--lgsb-radius-input); color: var(--lgsb-ink); font-family: inherit; font-size: 14px; padding: 7px 8px; text-align: center; width: 84px; } #lgsb-uploader .lgsb-thinfix-sizes input[type="number"]:focus { border-color: var(--lgsb-primary); outline: none; } #lgsb-uploader .lgsb-thinfix-x, #lgsb-uploader .lgsb-thinfix-unit { color: var(--lgsb-text-muted); font-size: 13px; } /* Live verdict at the typed size — ok / warn / bad recolor via data-level. */ #lgsb-uploader .lgsb-thinfix-risk { border-radius: var(--lgsb-radius-sm); font-size: 12.5px; line-height: 1.5; margin: 0; padding: 8px 10px; } #lgsb-uploader .lgsb-thinfix-risk[data-level="ok"] { background: var(--lgsb-success-bg, #e8f5ee); color: var(--lgsb-success-text, #1e7a46); } #lgsb-uploader .lgsb-thinfix-risk[data-level="warn"] { background: var(--lgsb-warning-bg, #fdf3e4); color: var(--lgsb-warning-text, #8a5a19); } #lgsb-uploader .lgsb-thinfix-risk[data-level="bad"] { background: var(--lgsb-error-bg); color: var(--lgsb-error-text); } /* Working state: centered spinner + copy while the worker repairs. */ #lgsb-uploader .lgsb-thinfix-working { align-items: center; display: flex; flex-direction: column; gap: var(--lgsb-space-2); padding: var(--lgsb-space-5) 0; text-align: center; } #lgsb-uploader .lgsb-thinfix-working-title { font-size: 14px; font-weight: var(--lgsb-weight-bold); margin: 0; } #lgsb-uploader .lgsb-thinfix-working-note { color: var(--lgsb-text-muted); font-size: 12.5px; margin: 0; } /* Compare stage caption: the size the fix is valid for. */ #lgsb-uploader .lgsb-thinfix-sizecap { color: var(--lgsb-text-muted); font-size: 12px; line-height: 1.5; margin: 0; } #lgsb-uploader .lgsb-thinline-legend { align-items: center; display: flex; font-size: 12px; gap: 8px; margin: 0 0 var(--lgsb-space-2); } #lgsb-uploader .lgsb-thinline-swatch { background: rgba(230, 57, 70, .69); border-radius: 3px; display: inline-block; flex: 0 0 14px; height: 14px; width: 14px; } /* Print-preview legend: hollow checkerboard chip (areas removed = transparent). */ #lgsb-uploader .lgsb-thinline-swatch--preview { background-color: var(--lgsb-surface); background-image: linear-gradient(45deg, #E9EDEF 25%, transparent 25%, transparent 75%, #E9EDEF 75%), linear-gradient(45deg, #E9EDEF 25%, transparent 25%, transparent 75%, #E9EDEF 75%); background-position: 0 0, 3px 3px; background-size: 6px 6px; border: 1px solid var(--lgsb-border); box-sizing: border-box; } /* Detailed explanation inside the viewer ("Why this matters" / "What you can do") — this copy lives ONLY here, never in the design-card chip. */ #lgsb-uploader .lgsb-thinline-details { border-top: 1px solid var(--lgsb-border); margin-top: var(--lgsb-space-2); padding-top: var(--lgsb-space-3); } #lgsb-uploader .lgsb-thinline-details-title { color: var(--lgsb-ink); font-size: 12px; font-weight: var(--lgsb-weight-bold); margin: 0 0 4px; } #lgsb-uploader .lgsb-thinline-details p { color: var(--lgsb-text); font-size: 12px; line-height: 1.5; margin: 0 0 var(--lgsb-space-3); } #lgsb-uploader .lgsb-thinline-details-list { color: var(--lgsb-text); font-size: 12px; line-height: 1.6; list-style: disc; margin: 0; padding-left: 18px; } /* --------------------------------------------------------------------- Semi-transparency review dialog + halftone pipeline Reuses the thin-line viewer recipe (stage, dark toggle, zoom, canvas) so the two checks read as one tool; only the semitrans-specific chrome is defined here. */ /* "Review transparency" chip action — same outlined-teal recipe as the thin-line "View affected areas" button (kept as its own class so the two click handlers can't cross-fire). */ #lgsb-uploader .lgsb-semitrans-review { align-items: center; background: var(--lgsb-surface, #fff); border: var(--lgsb-button-border-width) solid var(--lgsb-teal); border-radius: var(--lgsb-radius-input); color: var(--lgsb-teal); cursor: pointer; display: inline-flex; flex: 1 1 auto; font-family: inherit; font-size: 11px; font-weight: var(--lgsb-weight-bold); gap: 6px; justify-content: center; line-height: 1; padding: 7px 10px; transition: background-color var(--lgsb-dur-base) var(--lgsb-ease); } #lgsb-uploader .lgsb-semitrans-review:hover { background: var(--lgsb-teal-soft); } #lgsb-uploader .lgsb-semitrans-review svg { flex: 0 0 auto; } #lgsb-uploader .lgsb-semitrans-chip-actions { display: flex; margin-top: 6px; } /* A READY halftone fully retires the warning chip — the design is fixed, so no amber border, no Review badge, no notices pill. The li stays in the DOM (hidden) so Undo or a failed regeneration can re-arm it. */ #lgsb-uploader .lgsb-file-warnings li.lgsb-warn-resolved { display: none; } /* Compact "Halftoned" tag above the card footer — quiet success chrome in minimal space; click re-opens the review dialog (compare / undo). */ #lgsb-uploader .lgsb-ht-donetag { align-items: center; align-self: flex-start; background: var(--lgsb-success-bg); border: none; border-radius: var(--lgsb-radius-pill); color: var(--lgsb-success-text); cursor: pointer; display: inline-flex; font-family: inherit; font-size: 11px; font-weight: var(--lgsb-weight-bold); gap: 5px; line-height: 1; padding: 4px 12px; width: fit-content; } #lgsb-uploader .lgsb-ht-donetag svg { flex: 0 0 auto; } #lgsb-uploader .lgsb-ht-donetag:hover span { text-decoration: underline; text-underline-offset: 2px; } /* ========================================================================= Design Tools (v3.0) — per-card Edit button + edit modal (Color Overlay). ========================================================================= */ /* Design Tools button in the card header: the open space in .lgsb-fc-title under the status badge, right of the thumbnail. Deliberately heavier than the old "Edit" chip (v2.107.0) so the editing suite reads as a real feature, while the filled-teal ordering actions stay primary. */ #lgsb-uploader .lgsb-edit-btn { align-items: center; /* Sized by its content and parked at the column's left, like the card's other actions. The 10px reserve is the guarantee it never reaches the trash button, which is absolutely positioned at the column's right. */ align-self: flex-start; background: var(--lgsb-teal-soft); border: 1px solid var(--lgsb-teal); border-radius: var(--lgsb-radius-input); color: var(--lgsb-teal-dark); cursor: pointer; display: inline-flex; font-family: var(--lgsb-font-family); font-size: 10px; font-weight: var(--lgsb-weight-bold); gap: 6px; justify-content: center; letter-spacing: .03em; line-height: 1; margin-top: 5px; max-width: calc(100% - 10px); padding: 7px 11px; text-transform: uppercase; transition: box-shadow var(--lgsb-dur-fast) var(--lgsb-ease); white-space: nowrap; } /* The icon and label are one unit: the negative end margin cancels the gap uppercase tracking leaves after the final letter, and the ellipsis keeps the label inside the button on the grid's narrowest cards, where it can out-measure the column. */ #lgsb-uploader .lgsb-edit-btn span { margin-right: -.03em; min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* Inset-overlay hover (proven against Divi opacity/filter resets). */ #lgsb-uploader .lgsb-edit-btn:hover { box-shadow: inset 0 0 0 999px rgba(6, 124, 145, .08); } #lgsb-uploader .lgsb-edit-btn svg { flex: 0 0 auto; } /* "Edited" tag above the card footer — same recipe as .lgsb-ht-donetag. */ #lgsb-uploader .lgsb-edit-donetag { align-items: center; align-self: flex-start; background: var(--lgsb-success-bg); border: none; border-radius: var(--lgsb-radius-pill); color: var(--lgsb-success-text); cursor: pointer; display: inline-flex; font-family: inherit; font-size: 11px; font-weight: var(--lgsb-weight-bold); gap: 5px; line-height: 1; padding: 4px 12px; width: fit-content; } #lgsb-uploader .lgsb-edit-donetag svg { flex: 0 0 auto; } #lgsb-uploader .lgsb-edit-donetag:hover span { text-decoration: underline; text-underline-offset: 2px; } /* --- Edit modal ---------------------------------------------------------- */ /* Tool bar (v2.107.0) — an icon-over-label toolbar pinned under the modal header, evenly divided on desktop and horizontally scrollable when the builder column is narrow. The active tool is marked by the teal underline alone; a filled tab would compete with the artwork below it. */ #lgsb-uploader .lgsb-edit-tabs { background: var(--lgsb-bg-soft, #F2F4F5); border-bottom: 1px solid var(--lgsb-border); display: flex; flex: 0 0 auto; gap: 0; overflow-x: auto; padding: 0 var(--lgsb-space-3); scrollbar-width: none; } #lgsb-uploader .lgsb-edit-tabs::-webkit-scrollbar { display: none; } #lgsb-uploader .lgsb-edit-tab { align-items: center; background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--lgsb-text-muted); cursor: pointer; display: flex; flex: 1 1 0; flex-direction: column; font-family: inherit; font-size: 11px; font-weight: var(--lgsb-weight-bold); gap: 6px; line-height: 1.15; min-width: 76px; padding: 10px 6px 8px; text-align: center; transition: color var(--lgsb-dur-base) var(--lgsb-ease), border-color var(--lgsb-dur-base) var(--lgsb-ease); /* "Replace Colors" wraps to two lines instead of being clipped. */ white-space: normal; } /* Fixed height so tabs whose label wraps to two lines keep their glyphs on the same baseline as the rest of the bar. */ #lgsb-uploader .lgsb-edit-tab-ico { align-items: center; display: flex; flex: 0 0 auto; height: 20px; justify-content: center; } #lgsb-uploader .lgsb-edit-tab:hover:not(.is-active) { color: var(--lgsb-ink); } #lgsb-uploader .lgsb-edit-tab.is-active { border-bottom-color: var(--lgsb-teal); color: var(--lgsb-teal-dark); } /* Keep the focus ring readable against the toolbar's flush edges. */ #lgsb-uploader .lgsb-edit-tab:focus-visible { border-radius: var(--lgsb-radius-sm); } /* Each tool's control panel stacks its rows like .lgsb-edit-controls. */ #lgsb-uploader .lgsb-edit-panel { display: flex; flex-direction: column; gap: 10px; } #lgsb-uploader .lgsb-edit-panel[hidden] { display: none; } /* Remove-color eyedropper mode: the stage bitmap is the picker. */ #lgsb-uploader .lgsb-edit-stage.lgsb-edit-pickmode .lgsb-thinline-canvas { cursor: crosshair; } /* Crop tab: drags manipulate the crop rect, not the pan. */ #lgsb-uploader .lgsb-edit-stage.lgsb-edit-cropmode .lgsb-thinline-canvas { cursor: crosshair; } /* The busy overlay is absolutely positioned inside the stage. */ #lgsb-uploader .lgsb-modal--edit .lgsb-thinline-stage { /* The overlay controls below replaced the rows above/under the stage, so the old gap toward the (removed) zoom row is reclaimed too. */ margin-bottom: 0; position: relative; } /* v2.115.1 — stage overlay controls: the dark-background moon (same recipe as the card-thumb toggle) and the zoom pill float OVER the artwork instead of consuming layout rows; the reclaimed height goes to tall designs. Corners are chosen to stay clear of centered artwork: moon top-right, zoom bottom-left. */ #lgsb-uploader .lgsb-edit-dark-btn { align-items: center; background: rgba(0, 0, 0, .50); border: 0; border-radius: var(--lgsb-radius-sm); color: #fff; cursor: pointer; display: flex; height: 28px; justify-content: center; padding: 0; position: absolute; right: 8px; top: 8px; width: 28px; z-index: 2; } #lgsb-uploader .lgsb-edit-dark-btn svg { height: 14px; width: 14px; } #lgsb-uploader .lgsb-edit-dark-btn:hover { background: rgba(0, 0, 0, .68); } #lgsb-uploader .lgsb-edit-dark-btn.is-active { background: rgba(255, 255, 255, .30); color: #000; } #lgsb-uploader .lgsb-edit-dark-btn.is-active:hover { background: rgba(255, 255, 255, .45); } /* The pill keeps its light surface in dark mode too — contrast against a black stage is the point. */ #lgsb-uploader .lgsb-modal--edit .lgsb-edit-zoom { background: rgba(255, 255, 255, .92); border: 1px solid var(--lgsb-border); border-radius: var(--lgsb-radius-sm); bottom: 8px; box-shadow: 0 2px 8px rgba(17, 17, 17, .12); flex-wrap: nowrap; left: 8px; margin: 0; padding: 4px; position: absolute; z-index: 2; } #lgsb-uploader .lgsb-edit-controls { display: flex; flex-direction: column; gap: 10px; margin-top: var(--lgsb-space-3); } /* Checkbox row (Remove Color's "Clean edges" defringe toggle). */ #lgsb-uploader .lgsb-edit-checkrow { align-items: center; color: var(--lgsb-ink); cursor: pointer; display: flex; font-size: var(--lgsb-font-body-sm); gap: 8px; } #lgsb-uploader .lgsb-edit-checkrow input { accent-color: var(--lgsb-teal); cursor: pointer; flex: 0 0 auto; height: 16px; margin: 0; width: 16px; } #lgsb-uploader .lgsb-edit-swatches { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; } #lgsb-uploader .lgsb-edit-swatch { border: 1px solid var(--lgsb-border); border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); cursor: pointer; height: 28px; padding: 0; transition: transform var(--lgsb-dur-fast) var(--lgsb-ease), box-shadow var(--lgsb-dur-fast) var(--lgsb-ease); width: 28px; } #lgsb-uploader .lgsb-edit-swatch:hover { transform: scale(1.12); } #lgsb-uploader .lgsb-edit-swatch.is-active { box-shadow: 0 0 0 2px var(--lgsb-surface), 0 0 0 4px var(--lgsb-teal); } /* Custom color: native picker styled as one more swatch + label. */ #lgsb-uploader .lgsb-edit-custom { align-items: center; color: var(--lgsb-text-muted); cursor: pointer; display: inline-flex; font-size: 11px; font-weight: var(--lgsb-weight-semibold); gap: 6px; } #lgsb-uploader .lgsb-edit-color-input { background: none; border: 1px solid var(--lgsb-border); border-radius: 50%; cursor: pointer; height: 28px; padding: 2px; width: 28px; } /* Shaded / Solid segmented toggle — same recipe as .lgsb-semitrans-compare. */ #lgsb-uploader .lgsb-edit-mode { align-self: flex-start; background: var(--lgsb-bg-soft, #F2F4F5); border: 1px solid var(--lgsb-border); border-radius: var(--lgsb-radius-input); display: inline-flex; gap: 2px; padding: 2px; } #lgsb-uploader .lgsb-edit-mode-btn { background: none; border: 0; border-radius: calc(var(--lgsb-radius-input) - 2px); color: var(--lgsb-text-muted); cursor: pointer; font-family: inherit; font-size: 12px; font-weight: var(--lgsb-weight-bold); line-height: 1; padding: 6px 12px; transition: background-color var(--lgsb-dur-base) var(--lgsb-ease), color var(--lgsb-dur-base) var(--lgsb-ease); } #lgsb-uploader .lgsb-edit-mode-btn.is-active { background: var(--lgsb-surface); box-shadow: var(--lgsb-shadow-card, 0 1px 2px rgba(0, 0, 0, .12)); color: var(--lgsb-ink); } #lgsb-uploader .lgsb-edit-modehint { color: var(--lgsb-text-muted); font-size: 12px; margin: 0; } /* Undo / Reset live on one row inside the stacked actions column. */ #lgsb-uploader .lgsb-edit-history { display: flex; gap: 8px; } #lgsb-uploader .lgsb-edit-history .lgsb-modal-btn { flex: 1 1 0; } #lgsb-uploader .lgsb-edit-note-error { color: var(--lgsb-error-text); } /* --- Replace Colors (palette remap) --- */ #lgsb-uploader .lgsb-edit-palette { display: flex; flex-wrap: wrap; gap: 8px 14px; } #lgsb-uploader .lgsb-edit-palrow { align-items: center; cursor: pointer; display: inline-flex; gap: 6px; } #lgsb-uploader .lgsb-edit-palfrom { border: 1px solid var(--lgsb-border); border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); display: inline-block; height: 26px; width: 26px; } #lgsb-uploader .lgsb-edit-palarrow { color: var(--lgsb-text-muted); font-size: 13px; } #lgsb-uploader .lgsb-edit-palto { background: none; border: 1px solid var(--lgsb-border); border-radius: 50%; cursor: pointer; height: 30px; padding: 2px; width: 30px; } /* --- Remove Color --- */ /* (Legacy Remove Color chip row — unused since v2.116.0; kept one release for cached JS that may still render it.) */ #lgsb-uploader .lgsb-edit-rc-picked { align-items: center; display: flex; gap: 8px; } /* Checkerboard placeholder until a color is picked. */ #lgsb-uploader .lgsb-edit-rc-chip { background-image: linear-gradient(45deg, #d8dcdf 25%, transparent 25%, transparent 75%, #d8dcdf 75%), linear-gradient(45deg, #d8dcdf 25%, transparent 25%, transparent 75%, #d8dcdf 75%); background-position: 0 0, 5px 5px; background-size: 10px 10px; border: 1px solid var(--lgsb-border); border-radius: 50%; flex: 0 0 auto; height: 26px; width: 26px; } #lgsb-uploader .lgsb-edit-rc-chip.is-set { background-image: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); } #lgsb-uploader .lgsb-edit-rc-label { color: var(--lgsb-text-muted); font-size: 12px; } /* --- Shared slider rows (tolerance, softness, intensity, feature size) --- */ #lgsb-uploader .lgsb-edit-sliderrow { align-items: center; display: flex; gap: 10px; } #lgsb-uploader .lgsb-edit-sliderrow > span:first-child { color: var(--lgsb-text-muted); flex: 0 0 92px; font-size: 12px; font-weight: var(--lgsb-weight-semibold); } #lgsb-uploader .lgsb-edit-sliderrow input[type="range"] { accent-color: var(--lgsb-teal); flex: 1 1 auto; margin: 0; min-width: 0; } #lgsb-uploader .lgsb-edit-sliderval { color: var(--lgsb-ink); flex: 0 0 34px; font-size: 12px; font-variant-numeric: tabular-nums; font-weight: var(--lgsb-weight-bold); text-align: right; } /* --- Distress --- */ #lgsb-uploader .lgsb-edit-textures { display: flex; flex-wrap: wrap; gap: 6px; } #lgsb-uploader .lgsb-edit-texture-btn { background: var(--lgsb-surface); border: 1px solid var(--lgsb-border); border-radius: var(--lgsb-radius-pill); color: var(--lgsb-text-muted); cursor: pointer; font-family: inherit; font-size: 12px; font-weight: var(--lgsb-weight-semibold); line-height: 1; padding: 7px 12px; transition: background-color var(--lgsb-dur-base) var(--lgsb-ease), border-color var(--lgsb-dur-base) var(--lgsb-ease), color var(--lgsb-dur-base) var(--lgsb-ease); } #lgsb-uploader .lgsb-edit-texture-btn.is-active { background: var(--lgsb-teal-tint, #E7F3F4); border-color: var(--lgsb-teal); color: var(--lgsb-teal-ink, var(--lgsb-teal)); } #lgsb-uploader .lgsb-edit-ds-reroll { align-self: flex-start; background: none; border: 1px dashed var(--lgsb-border); border-radius: var(--lgsb-radius-input); color: var(--lgsb-text-muted); cursor: pointer; font-family: inherit; font-size: 12px; font-weight: var(--lgsb-weight-semibold); padding: 6px 12px; } #lgsb-uploader .lgsb-edit-ds-reroll:hover { border-color: var(--lgsb-teal); color: var(--lgsb-teal-ink, var(--lgsb-teal)); } /* --- Transform (v2.129.0): Crop / Rotate & Flip / Erase sub-modes --- */ #lgsb-uploader .lgsb-edit-crop-readout { color: var(--lgsb-ink); font-size: 13px; font-variant-numeric: tabular-nums; font-weight: var(--lgsb-weight-semibold); margin: 0; } /* Sub-mode row containers stack like the panel itself; the explicit [hidden] override is needed because display:flex beats the UA rule. */ #lgsb-uploader .lgsb-edit-xf-croprows, #lgsb-uploader .lgsb-edit-xf-rotaterows, #lgsb-uploader .lgsb-edit-xf-eraserows { display: flex; flex-direction: column; gap: 10px; } #lgsb-uploader .lgsb-edit-xf-croprows[hidden], #lgsb-uploader .lgsb-edit-xf-rotaterows[hidden], #lgsb-uploader .lgsb-edit-xf-eraserows[hidden] { display: none; } #lgsb-uploader .lgsb-edit-xf-rotgrid { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); } #lgsb-uploader .lgsb-edit-xfrot { align-items: center; background: var(--lgsb-surface); border: 1px solid var(--lgsb-border); border-radius: var(--lgsb-radius-input); color: var(--lgsb-ink); cursor: pointer; display: inline-flex; font-family: inherit; font-size: 12px; font-weight: var(--lgsb-weight-semibold); gap: 8px; justify-content: flex-start; line-height: 1; min-width: 0; padding: 8px 10px; transition: background-color var(--lgsb-dur-base) var(--lgsb-ease), border-color var(--lgsb-dur-base) var(--lgsb-ease), color var(--lgsb-dur-base) var(--lgsb-ease); } #lgsb-uploader .lgsb-edit-xfrot svg { flex: 0 0 auto; } #lgsb-uploader .lgsb-edit-xfrot span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #lgsb-uploader .lgsb-edit-xfrot:hover { background: var(--lgsb-teal-tint, #E7F3F4); border-color: var(--lgsb-teal); color: var(--lgsb-teal-ink, var(--lgsb-teal)); } #lgsb-uploader .lgsb-edit-xf-rotreadout { color: var(--lgsb-ink); font-size: 13px; font-variant-numeric: tabular-nums; font-weight: var(--lgsb-weight-semibold); margin: 0; } #lgsb-uploader .lgsb-edit-xf-rotreset, #lgsb-uploader .lgsb-edit-xf-eraseundo, #lgsb-uploader .lgsb-edit-xf-eraseclear { align-self: flex-start; background: none; border: 1px dashed var(--lgsb-border); border-radius: var(--lgsb-radius-input); color: var(--lgsb-text-muted); cursor: pointer; font-family: inherit; font-size: 12px; font-weight: var(--lgsb-weight-semibold); padding: 6px 12px; } #lgsb-uploader .lgsb-edit-xf-rotreset:hover, #lgsb-uploader .lgsb-edit-xf-eraseundo:hover:not(:disabled), #lgsb-uploader .lgsb-edit-xf-eraseclear:hover:not(:disabled) { border-color: var(--lgsb-teal); color: var(--lgsb-teal-ink, var(--lgsb-teal)); } #lgsb-uploader .lgsb-edit-xf-eraseundo:disabled, #lgsb-uploader .lgsb-edit-xf-eraseclear:disabled { cursor: default; opacity: .45; } #lgsb-uploader .lgsb-edit-xf-erasebtns { display: flex; flex-wrap: wrap; gap: 8px; } /* --- Adjust --- */ #lgsb-uploader .lgsb-edit-adj-reset { align-self: flex-start; background: none; border: 1px dashed var(--lgsb-border); border-radius: var(--lgsb-radius-input); color: var(--lgsb-text-muted); cursor: pointer; font-family: inherit; font-size: 12px; font-weight: var(--lgsb-weight-semibold); padding: 6px 12px; } #lgsb-uploader .lgsb-edit-adj-reset:hover { border-color: var(--lgsb-teal); color: var(--lgsb-teal-ink, var(--lgsb-teal)); } /* --- Remove Background (working-mask session, v2.116.0) --- */ #lgsb-uploader .lgsb-edit-bg-auto { width: 100%; } /* Status line under the Auto button: pending / ready / warning / error. */ #lgsb-uploader .lgsb-edit-bg-status { border-radius: var(--lgsb-radius-sm); font-size: 12px; font-weight: var(--lgsb-weight-semibold); margin: 0; padding: 8px 10px; background: var(--lgsb-bg-soft, #F2F4F5); color: var(--lgsb-ink); } #lgsb-uploader .lgsb-edit-bg-status.is-pending { background: var(--lgsb-bg-soft, #F2F4F5); color: var(--lgsb-text-muted); } #lgsb-uploader .lgsb-edit-bg-status.is-warn { background: #FFF6E5; color: #8A5A00; } #lgsb-uploader .lgsb-edit-bg-status.is-error { background: #FDECEA; color: var(--lgsb-error-text, #C62828); } /* Inspection row: Result/Original/Removed pills + backdrop swatches. */ #lgsb-uploader .lgsb-edit-bg-viewrow { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; } #lgsb-uploader .lgsb-edit-bg-backdrops { display: flex; gap: 6px; } #lgsb-uploader .lgsb-edit-bgdrop { border: 1px solid var(--lgsb-border); border-radius: 50%; cursor: pointer; height: 22px; padding: 0; width: 22px; } #lgsb-uploader .lgsb-edit-bgdrop.is-active { box-shadow: 0 0 0 2px var(--lgsb-surface), 0 0 0 4px var(--lgsb-teal); } #lgsb-uploader .lgsb-edit-bgdrop-sw-checker { background-color: #fff; background-image: linear-gradient(45deg, #D9DEE1 25%, transparent 25%, transparent 75%, #D9DEE1 75%), linear-gradient(45deg, #D9DEE1 25%, transparent 25%, transparent 75%, #D9DEE1 75%); background-position: 0 0, 5px 5px; background-size: 10px 10px; } #lgsb-uploader .lgsb-edit-bgdrop-sw-white { background: #fff; } #lgsb-uploader .lgsb-edit-bgdrop-sw-black { background: #000; } #lgsb-uploader .lgsb-edit-bgdrop-sw-gray { background: #808080; } /* Stage backdrops (bg tab only). Placed after the checkerboard/dark rules so they win the same-specificity fight. */ #lgsb-uploader .lgsb-edit-stage.lgsb-edit-bgdrop-white { background-color: #fff; background-image: none; } #lgsb-uploader .lgsb-edit-stage.lgsb-edit-bgdrop-black { background-color: #000; background-image: none; } #lgsb-uploader .lgsb-edit-stage.lgsb-edit-bgdrop-gray { background-color: #808080; background-image: none; } /* Protect paints with a canvas-drawn brush ring — hide the OS cursor. */ #lgsb-uploader .lgsb-edit-stage.lgsb-edit-brushmode .lgsb-thinline-canvas { cursor: none; } /* Section label between the AI button and the fix-up tools. */ #lgsb-uploader .lgsb-edit-bg-subhead { border-top: 1px solid var(--lgsb-border); color: var(--lgsb-text-muted); font-size: 11px; font-weight: var(--lgsb-weight-bold); letter-spacing: .06em; margin: 4px 0 0; padding-top: 12px; text-transform: uppercase; } /* Sub-rows of the active fix-up mode stack like the panel itself. (v2.118.0: -colorrows replaced -rules — Pick Color is a first-class fix-up mode now, not a "More removal options" resident.) */ #lgsb-uploader .lgsb-edit-bg-removerows, #lgsb-uploader .lgsb-edit-bg-protectrows, #lgsb-uploader .lgsb-edit-bg-colorrows, #lgsb-uploader .lgsb-edit-bg-rulecontrols { display: flex; flex-direction: column; gap: 10px; } #lgsb-uploader .lgsb-edit-bg-removerows[hidden], #lgsb-uploader .lgsb-edit-bg-protectrows[hidden], #lgsb-uploader .lgsb-edit-bg-colorrows[hidden], #lgsb-uploader .lgsb-edit-bg-rulecontrols[hidden], #lgsb-uploader .lgsb-edit-bg-startover[hidden] { display: none; } /* "More options" — Clean Edges lives behind it. */ #lgsb-uploader .lgsb-edit-bg-more { border-top: 1px solid var(--lgsb-border); padding-top: 10px; } #lgsb-uploader .lgsb-edit-bg-more > summary { color: var(--lgsb-text-muted); cursor: pointer; font-size: 12px; font-weight: var(--lgsb-weight-bold); letter-spacing: .04em; text-transform: uppercase; user-select: none; } #lgsb-uploader .lgsb-edit-bg-more[open] > summary { color: var(--lgsb-ink); margin-bottom: 10px; } #lgsb-uploader .lgsb-edit-bg-more .lgsb-edit-checkrow { margin-top: 10px; } /* --- Knockout Color (v2.121.0) --- */ /* Picked-color chip + the "click to pick" hint on one row. */ #lgsb-uploader .lgsb-edit-ko-pickrow { align-items: center; display: flex; gap: 8px; min-height: 28px; } #lgsb-uploader .lgsb-edit-ko-chip { align-items: center; background: var(--lgsb-bg-soft, #F2F4F5); border: 1px solid var(--lgsb-border); border-radius: 999px; display: inline-flex; gap: 6px; padding: 3px 10px 3px 4px; } /* inline-flex above beats the UA's [hidden]{display:none} — restore it so koReset() can hide the chip after a discard. */ #lgsb-uploader .lgsb-edit-ko-chip[hidden] { display: none; } #lgsb-uploader .lgsb-edit-ko-chip-sw { border: 1px solid var(--lgsb-border); border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); display: inline-block; height: 20px; width: 20px; } #lgsb-uploader .lgsb-edit-ko-chip-hex { color: var(--lgsb-ink); font-size: 12px; font-weight: var(--lgsb-weight-semibold); } #lgsb-uploader .lgsb-edit-ko-pickhint { color: var(--lgsb-text-muted); font-size: 12px; } /* Pre-apply "Preview halftone dots" (v2.126.0) — same full-width treatment as the Remove Background Auto button. */ #lgsb-uploader .lgsb-edit-ko-prevdots { width: 100%; } /* Shirt-color preview swatches (stage backdrop fill — UI only). */ #lgsb-uploader .lgsb-edit-ko-droprow { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; } #lgsb-uploader .lgsb-edit-ko-droplabel { color: var(--lgsb-text-muted); font-size: 12px; font-weight: var(--lgsb-weight-semibold); } #lgsb-uploader .lgsb-edit-ko-drops { align-items: center; display: inline-flex; flex-wrap: wrap; gap: 6px; } #lgsb-uploader .lgsb-edit-ko-drop { border: 1px solid var(--lgsb-border); border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); cursor: pointer; height: 22px; padding: 0; width: 22px; } #lgsb-uploader .lgsb-edit-ko-drop.is-active { box-shadow: 0 0 0 2px var(--lgsb-surface), 0 0 0 4px var(--lgsb-teal); } /* Transparent backdrop swatch: a tiny checkerboard chip. */ #lgsb-uploader .lgsb-edit-ko-drop--trans { background: repeating-conic-gradient(#cdd3da 0% 25%, #ffffff 0% 50%); background-size: 10px 10px; } /* "Knocked-out color" swatch: mirrors the eyedropped pick (inline style set by syncKoUi); disabled/hollow until a color has been picked. */ #lgsb-uploader .lgsb-edit-ko-drop--picked:disabled { background: linear-gradient(to top right, transparent calc(50% - 1px), var(--lgsb-border) calc(50% - 1px), var(--lgsb-border) calc(50% + 1px), transparent calc(50% + 1px)); cursor: not-allowed; opacity: .5; } #lgsb-uploader .lgsb-edit-ko-dropcustom { cursor: pointer; display: inline-flex; } #lgsb-uploader .lgsb-edit-ko-dropinput { background: none; border: 1px solid var(--lgsb-border); border-radius: 50%; cursor: pointer; height: 22px; padding: 2px; width: 22px; } #lgsb-uploader .lgsb-edit-ko-scope { margin-top: 10px; } #lgsb-uploader .lgsb-edit-ko-more .lgsb-edit-modehint { margin-top: 8px; } /* Chained-halftone preview state (v2.125.0): the dots draw THROUGH the stage canvas (same zoom/pan pipeline as every tool preview), so the zoom bar stays live and the customer can inspect the dots up close. Clicking the canvas returns to the editable knockout result. */ #lgsb-uploader .lgsb-edit-stage.lgsb-edit-ko-htpreview .lgsb-thinline-canvas { cursor: pointer; } /* Disclaimer pill — sits ABOVE the floating zoom bar (v2.126.0: the bar gained Before/After and was covering the pill at bottom: 8px). Solid surface so it reads on both the checkerboard and the dark backdrop. */ #lgsb-uploader .lgsb-edit-ko-htnote { background: rgba(255, 255, 255, .88); border-radius: var(--lgsb-radius-sm); bottom: 48px; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); color: var(--lgsb-ink); font-size: 11px; left: 50%; line-height: 1.35; margin: 0; max-width: calc(100% - 24px); padding: 4px 12px; pointer-events: none; position: absolute; text-align: center; transform: translateX(-50%); z-index: 1; } #lgsb-uploader .lgsb-edit-bg-rulechips { display: flex; flex-wrap: wrap; gap: 6px; } #lgsb-uploader .lgsb-edit-bg-rulechips:empty { display: none; } #lgsb-uploader .lgsb-edit-bg-rulepick { align-items: center; background: none; border: 0; color: inherit; cursor: pointer; display: inline-flex; font: inherit; gap: 6px; padding: 0; } #lgsb-uploader .lgsb-edit-bg-rulechip.is-selected { border-color: var(--lgsb-teal); box-shadow: 0 0 0 1px var(--lgsb-teal) inset; } #lgsb-uploader .lgsb-edit-bg-startover { align-self: flex-start; background: none; border: 1px solid var(--lgsb-border); border-radius: var(--lgsb-radius-input); color: var(--lgsb-text-muted); cursor: pointer; font-family: inherit; font-size: 12px; font-weight: var(--lgsb-weight-semibold); padding: 6px 12px; } #lgsb-uploader .lgsb-edit-bg-startover:hover { border-color: var(--lgsb-error-text, #C62828); color: var(--lgsb-error-text, #C62828); } /* Fix-up undo row (v2.117.0: per-correction chips retired — plain Undo). .lgsb-edit-bg-chip / -chipdot / -chipx remain in use by the COLOR RULE chips under "More removal options". */ #lgsb-uploader .lgsb-edit-bg-stepsrow { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; } #lgsb-uploader .lgsb-edit-bg-chip { align-items: center; background: var(--lgsb-bg-soft, #F2F4F5); border: 1px solid var(--lgsb-border); border-radius: var(--lgsb-radius-pill); color: var(--lgsb-ink); display: inline-flex; font-size: 12px; font-weight: var(--lgsb-weight-semibold); gap: 6px; line-height: 1; padding: 5px 6px 5px 10px; } #lgsb-uploader .lgsb-edit-bg-chipdot { border: 1px solid rgba(0, 0, 0, .12); border-radius: 50%; flex: 0 0 auto; height: 12px; width: 12px; } #lgsb-uploader .lgsb-edit-bg-chipx { background: none; border: 0; border-radius: 50%; color: var(--lgsb-text-muted); cursor: pointer; font-size: 13px; line-height: 1; padding: 2px 4px; } #lgsb-uploader .lgsb-edit-bg-chipx:hover { color: var(--lgsb-error-text, #C62828); } #lgsb-uploader .lgsb-edit-bg-undolast { background: none; border: 1px dashed var(--lgsb-border); border-radius: var(--lgsb-radius-input); color: var(--lgsb-text-muted); cursor: pointer; font-family: inherit; font-size: 12px; font-weight: var(--lgsb-weight-semibold); padding: 6px 12px; } #lgsb-uploader .lgsb-edit-bg-undolast:hover:not(:disabled) { border-color: var(--lgsb-teal); color: var(--lgsb-teal-ink, var(--lgsb-teal)); } /* v2.118.0: the Undo button is always in the layout — disabled (not hidden) when there's nothing to undo, so it never pops into existence. */ #lgsb-uploader .lgsb-edit-bg-undolast:disabled { cursor: default; opacity: .5; } /* --- Upscale --- */ #lgsb-uploader .lgsb-edit-upscale-info { color: var(--lgsb-ink); font-size: 13px; font-weight: var(--lgsb-weight-semibold); margin: 0; } /* COMPLETE badge (v2.119.0): loud, green, impossible to miss — it exists so customers stop re-clicking Upscale after the pass already landed. */ #lgsb-uploader .lgsb-edit-upscale-done { background: var(--lgsb-success-bg); border: 1px solid var(--lgsb-success-border); border-radius: var(--lgsb-radius-pill, 999px); color: var(--lgsb-success-text); display: inline-block; font-size: 13px; font-weight: var(--lgsb-weight-bold, 700); margin: 0 0 8px; padding: 6px 14px; } #lgsb-uploader .lgsb-edit-upscale-done[hidden] { display: none; } /* --- Edit modal chrome: red X close, backdrop-close disabled --- */ /* Three-part shell (v2.107.0): the header and tool bar are pinned, ONLY the body scrolls, and the action footer (Apply / Undo / Reset / Done) is always on screen. Overrides .lgsb-modal--thinline's whole-dialog `overflow: auto`, which used to push Done below the fold on tall artwork. */ #lgsb-uploader .lgsb-modal--edit { display: flex; flex-direction: column; /* v2.115.1: 90vh → 94vh — every reclaimed pixel goes to the stage. */ max-height: 94vh; /* v2.114.0: a real editing workspace, not a dialog — fill wide screens (the stage canvas sizes itself from this) while 95vw keeps a gutter on smaller ones. */ max-width: min(1200px, 95vw); overflow: hidden; padding: 0; position: relative; } #lgsb-uploader .lgsb-edit-head { border-bottom: 1px solid var(--lgsb-border); flex: 0 0 auto; padding: var(--lgsb-space-4) var(--lgsb-space-6); } #lgsb-uploader .lgsb-edit-head .lgsb-modal-title { margin-bottom: 0; padding-right: 32px; } #lgsb-uploader .lgsb-modal--edit .lgsb-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 var(--lgsb-space-6) var(--lgsb-space-4); } #lgsb-uploader .lgsb-modal--edit .lgsb-modal-actions { background: var(--lgsb-surface); border-top: 1px solid var(--lgsb-border); flex: 0 0 auto; margin-top: 0; /* Beats .lgsb-modal-actions--stacked's job-picker scroll box. */ max-height: none; overflow: visible; padding: var(--lgsb-space-4) var(--lgsb-space-6); } /* v2.114.1 — two-column editor workspace on wide containers: stage on the left, tool controls in an always-visible right rail. The body stops scrolling (the canvas owns the wheel for zoom, so a scrolling body hid the tools with no obvious way to reach them); the rail scrolls itself when a panel is tall. The modal takes a DEFINITE height so the stage column has a stable box for loadStageImage() to measure. Below the breakpoint the columns stack and the body scrolls as before, with the stage capped short enough (~42vh) that the tools peek above the fold. */ @container (min-width: 940px) { #lgsb-uploader .lgsb-modal--edit { height: 94vh; } /* v2.115.1 — the footer collapses from three stacked rows to ONE: Undo/Reset compact on the left, Done + the primary Apply on the right. Same-specificity overrides of the --stacked rules win by source order. Below the breakpoint the stacked column stays (four buttons don't share a narrow row). */ #lgsb-uploader .lgsb-modal--edit .lgsb-edit-actions { align-items: center; flex-direction: row; flex-wrap: nowrap; } #lgsb-uploader .lgsb-modal--edit .lgsb-edit-actions .lgsb-modal-btn { flex: 0 1 auto; width: auto; } #lgsb-uploader .lgsb-modal--edit .lgsb-edit-history { margin-right: auto; order: 1; } #lgsb-uploader .lgsb-modal--edit .lgsb-edit-close { order: 2; } #lgsb-uploader .lgsb-modal--edit .lgsb-edit-apply { min-width: 220px; order: 3; } #lgsb-uploader .lgsb-modal--edit .lgsb-modal-body { display: flex; gap: var(--lgsb-space-5); overflow-y: hidden; padding-top: var(--lgsb-space-4); } #lgsb-uploader .lgsb-edit-main { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; min-width: 0; } #lgsb-uploader .lgsb-edit-main .lgsb-edit-stage { flex: 1 1 auto; min-height: 0; } #lgsb-uploader .lgsb-edit-side { display: flex; flex: 0 0 320px; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; } #lgsb-uploader .lgsb-edit-side .lgsb-edit-controls { margin-top: 0; } } #lgsb-uploader .lgsb-edit-x { background: none; border: 0; color: var(--lgsb-error-text, #C62828); cursor: pointer; font-size: 26px; line-height: 1; padding: 4px 8px; position: absolute; right: 10px; top: 8px; transition: transform var(--lgsb-dur-base) var(--lgsb-ease); z-index: 2; } #lgsb-uploader .lgsb-edit-x:hover { transform: scale(1.15); } /* --- Custom color hex field (tint) --- */ #lgsb-uploader .lgsb-edit-hex-input { background: var(--lgsb-surface); border: 1px solid var(--lgsb-border); border-radius: var(--lgsb-radius-input); color: var(--lgsb-ink); font-family: inherit; font-size: 12px; font-variant-numeric: tabular-nums; font-weight: var(--lgsb-weight-semibold); padding: 6px 8px; text-transform: lowercase; width: 84px; } #lgsb-uploader .lgsb-edit-hex-input:focus { border-color: var(--lgsb-teal); outline: none; } /* --- Edit stage zoom/pan --- */ /* Pan hint; the earlier .lgsb-edit-pickmode crosshair rule outranks this in eyedropper mode (higher specificity). */ #lgsb-uploader .lgsb-edit-stage .lgsb-thinline-canvas { cursor: grab; touch-action: none; } /* --- Saved distress patterns --- */ #lgsb-uploader .lgsb-edit-ds-favrow { display: flex; flex-wrap: wrap; gap: 6px; } #lgsb-uploader .lgsb-edit-ds-save { background: none; border: 1px dashed var(--lgsb-border); border-radius: var(--lgsb-radius-input); color: var(--lgsb-text-muted); cursor: pointer; font-family: inherit; font-size: 12px; font-weight: var(--lgsb-weight-semibold); padding: 6px 12px; } #lgsb-uploader .lgsb-edit-ds-save:hover:not(:disabled) { border-color: var(--lgsb-teal); color: var(--lgsb-teal-ink, var(--lgsb-teal)); } #lgsb-uploader .lgsb-edit-ds-save:disabled { border-style: solid; color: var(--lgsb-teal-ink, var(--lgsb-teal)); cursor: default; } #lgsb-uploader .lgsb-edit-ds-presets { display: flex; flex-wrap: wrap; gap: 6px; } #lgsb-uploader .lgsb-edit-ds-preset { align-items: stretch; display: inline-flex; } #lgsb-uploader .lgsb-edit-ds-preset-apply { background: var(--lgsb-bg-soft, #F2F4F5); border: 1px solid var(--lgsb-border); border-radius: var(--lgsb-radius-pill) 0 0 var(--lgsb-radius-pill); border-right: 0; color: var(--lgsb-ink); cursor: pointer; font-family: inherit; font-size: 12px; font-weight: var(--lgsb-weight-semibold); line-height: 1; padding: 7px 10px; } #lgsb-uploader .lgsb-edit-ds-preset-apply:hover { background: var(--lgsb-teal-tint, #E7F3F4); border-color: var(--lgsb-teal); } #lgsb-uploader .lgsb-edit-ds-preset-del { background: var(--lgsb-bg-soft, #F2F4F5); border: 1px solid var(--lgsb-border); border-radius: 0 var(--lgsb-radius-pill) var(--lgsb-radius-pill) 0; color: var(--lgsb-text-muted); cursor: pointer; font-size: 13px; line-height: 1; padding: 0 8px; } #lgsb-uploader .lgsb-edit-ds-preset-del:hover { color: var(--lgsb-error-text, #C62828); } /* Queue position line for bulk drops ("Design 1 of 3 with transparency"). */ #lgsb-uploader .lgsb-semitrans-queuepos { color: var(--lgsb-text-muted); font-size: 11px; font-weight: var(--lgsb-weight-bold); letter-spacing: .04em; margin: 0 0 var(--lgsb-space-2); text-transform: uppercase; } #lgsb-uploader .lgsb-semitrans-name { margin: 0 0 2px; } #lgsb-uploader .lgsb-semitrans-msg { color: var(--lgsb-text); font-size: 13px; line-height: 1.5; margin: 0; } /* Original / Halftoned segmented compare control (applied state only). */ #lgsb-uploader .lgsb-semitrans-compare { background: var(--lgsb-bg-soft, #F2F4F5); border: 1px solid var(--lgsb-border); border-radius: var(--lgsb-radius-input); display: inline-flex; gap: 2px; margin-right: auto; padding: 2px; } #lgsb-uploader .lgsb-semitrans-compare-btn { background: none; border: 0; border-radius: calc(var(--lgsb-radius-input) - 2px); color: var(--lgsb-text-muted); cursor: pointer; font-family: inherit; font-size: 12px; font-weight: var(--lgsb-weight-bold); line-height: 1; padding: 6px 12px; transition: background-color var(--lgsb-dur-base) var(--lgsb-ease), color var(--lgsb-dur-base) var(--lgsb-ease); } #lgsb-uploader .lgsb-semitrans-compare-btn.is-active { background: var(--lgsb-surface); box-shadow: var(--lgsb-shadow-card, 0 1px 2px rgba(0, 0, 0, .12)); color: var(--lgsb-ink); } /* display:inline-flex above beats the UA's [hidden] rule — restate it, or the compare toggle leaks into the review/working/failed states. */ #lgsb-uploader .lgsb-semitrans-compare[hidden] { display: none; } /* Busy overlay inside the stage while a halftone generates. */ #lgsb-uploader .lgsb-modal--semitrans .lgsb-thinline-stage { position: relative; } #lgsb-uploader .lgsb-semitrans-busy { align-items: center; background: rgba(255, 255, 255, .82); border-radius: var(--lgsb-radius-sm); display: flex; flex-direction: column; gap: 10px; inset: 0; justify-content: center; position: absolute; z-index: 2; } #lgsb-uploader .lgsb-semitrans-busy[hidden] { display: none; } #lgsb-uploader .lgsb-semitrans-busy-text { color: var(--lgsb-ink); font-size: 13px; font-weight: var(--lgsb-weight-bold); } /* Failure / status note inside the dialog. */ #lgsb-uploader .lgsb-semitrans-note { background: var(--lgsb-warning-bg, #FBF3E9); border: 1px solid var(--lgsb-warning-text); border-radius: var(--lgsb-radius-sm); color: var(--lgsb-warning-text); font-size: 12px; line-height: 1.5; margin: 0 0 var(--lgsb-space-2); padding: 8px 10px; } #lgsb-uploader .lgsb-semitrans-note[hidden] { display: none; } /* "Apply to remaining N designs" checkbox above the actions. */ #lgsb-uploader .lgsb-semitrans-applyall { align-items: flex-start; color: var(--lgsb-text); cursor: pointer; display: flex; font-size: 12px; gap: 8px; line-height: 1.4; margin: 0 0 var(--lgsb-space-2); } #lgsb-uploader .lgsb-semitrans-applyall[hidden] { display: none; } #lgsb-uploader .lgsb-semitrans-applyall input { flex: 0 0 auto; margin-top: 1px; } /* Small "Recommended" tag inside the primary action. */ #lgsb-uploader .lgsb-semitrans-rec { background: rgba(255, 255, 255, .22); border-radius: 999px; font-size: 10px; font-weight: var(--lgsb-weight-bold); letter-spacing: .04em; margin-left: 8px; padding: 2px 8px; text-transform: uppercase; vertical-align: 1px; } /* Shared spinner ring (thumb overlay, busy overlay, status line). */ #lgsb-uploader .lgsb-ht-spin-ring { animation: lgsb-spin .8s linear infinite; border: 3px solid var(--lgsb-border); border-radius: 50%; border-top-color: var(--lgsb-teal); display: inline-block; flex: 0 0 auto; height: 22px; width: 22px; } /* Thumb overlay while a halftone (re)generates — the card stays usable. */ #lgsb-uploader .lgsb-ht-spin { align-items: center; background: rgba(255, 255, 255, .66); border-radius: var(--lgsb-radius-sm); display: flex; inset: 0; justify-content: center; position: absolute; z-index: 2; } /* Persistent builder-level status line — a background regeneration must never be missable (the thumb spinner alone is easy to overlook). */ #lgsb-uploader .lgsb-ht-statusline { align-items: center; background: var(--lgsb-teal-soft, #E7F4F4); border: 1px solid var(--lgsb-teal); border-radius: var(--lgsb-radius-sm); color: var(--lgsb-ink); display: flex; font-size: 12px; font-weight: var(--lgsb-weight-bold); gap: 10px; margin-top: var(--lgsb-space-2); padding: 8px 12px; } #lgsb-uploader .lgsb-ht-statusline .lgsb-ht-spin-ring { height: 16px; width: 16px; } /* Layout preview: contour-nested copies may legitimately overlap at the bounding-box level — the dashed teal outline says "intentional". */ #lgsb-uploader .lgsb-lp-item-contour { outline: 1px dashed var(--lgsb-teal); outline-offset: -1px; } /* Preset Manager dialog internals */ #lgsb-uploader .lgsb-preset-subtitle { color: var(--lgsb-text-muted); font-size: 13px; margin-bottom: var(--lgsb-space-3); } #lgsb-uploader .lgsb-preset-list { display: flex; flex-direction: column; gap: var(--lgsb-space-2); margin-bottom: var(--lgsb-space-3); max-height: 240px; overflow-y: auto; } #lgsb-uploader .lgsb-preset-empty { color: var(--lgsb-text-muted); font-size: 13px; padding: var(--lgsb-space-2) 0; } #lgsb-uploader .lgsb-preset-item { align-items: stretch; display: flex; gap: var(--lgsb-space-1); } /* Drag-to-reorder: grip handle arms the drag; a teal edge line marks where the preset will land. */ #lgsb-uploader .lgsb-preset-drag { align-items: center; color: var(--lgsb-text-muted); cursor: grab; display: inline-flex; flex: 0 0 auto; justify-content: center; width: 18px; } #lgsb-uploader .lgsb-preset-drag:active { cursor: grabbing; } #lgsb-uploader .lgsb-preset-item.lgsb-preset-dragging { opacity: .45; } #lgsb-uploader .lgsb-preset-item.lgsb-preset-drop-before { box-shadow: 0 -2px 0 0 var(--lgsb-teal); } #lgsb-uploader .lgsb-preset-item.lgsb-preset-drop-after { box-shadow: 0 2px 0 0 var(--lgsb-teal); } #lgsb-uploader .lgsb-preset-pick { align-items: baseline; background: var(--lgsb-surface); border: var(--lgsb-input-border-width) solid var(--lgsb-border); border-radius: var(--lgsb-radius-input); color: var(--lgsb-text); cursor: pointer; display: flex; flex: 1 1 auto; font-family: var(--lgsb-font-family); font-size: 13px; gap: var(--lgsb-space-2); justify-content: space-between; min-width: 0; padding: 8px var(--lgsb-space-3); text-align: left; transition: background var(--lgsb-dur-fast) var(--lgsb-ease), border-color var(--lgsb-dur-fast) var(--lgsb-ease); } #lgsb-uploader .lgsb-preset-pick:hover { border-color: var(--lgsb-teal); } #lgsb-uploader .lgsb-preset-item-selected .lgsb-preset-pick { background: var(--lgsb-teal-soft); border-color: var(--lgsb-teal); } #lgsb-uploader .lgsb-preset-pick-name { font-weight: var(--lgsb-weight-semibold); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #lgsb-uploader .lgsb-preset-pick-size { color: var(--lgsb-text-muted); flex: 0 0 auto; font-size: var(--lgsb-font-body-sm); } #lgsb-uploader .lgsb-preset-edit-btn, #lgsb-uploader .lgsb-preset-del-btn { align-items: center; background: var(--lgsb-surface); border: var(--lgsb-input-border-width) solid var(--lgsb-border); border-radius: var(--lgsb-radius-sm); color: var(--lgsb-text-muted); cursor: pointer; display: inline-flex; flex: 0 0 auto; justify-content: center; padding: 0; transition: background var(--lgsb-dur-fast) var(--lgsb-ease), color var(--lgsb-dur-fast) var(--lgsb-ease); width: 32px; } #lgsb-uploader .lgsb-preset-edit-btn:hover { background: var(--lgsb-teal-soft); color: var(--lgsb-teal); } #lgsb-uploader .lgsb-preset-del-btn:hover { background: var(--lgsb-error-bg); color: var(--lgsb-error-text); } #lgsb-uploader .lgsb-preset-new-btn { background: transparent; border: none; color: var(--lgsb-teal); cursor: pointer; font-family: var(--lgsb-font-family); font-size: 13px; font-weight: var(--lgsb-weight-semibold); padding: var(--lgsb-space-1) 0; text-align: left; } #lgsb-uploader .lgsb-preset-new-btn:hover { text-decoration: underline; } #lgsb-uploader .lgsb-preset-form { background: var(--lgsb-surface-dim); border-radius: var(--lgsb-radius-input); display: flex; flex-direction: column; gap: var(--lgsb-space-3); margin-top: var(--lgsb-space-2); padding: var(--lgsb-space-3); } #lgsb-uploader .lgsb-preset-form[hidden] { display: none; } #lgsb-uploader .lgsb-preset-field { display: flex; flex: 1 1 auto; flex-direction: column; gap: 3px; min-width: 0; } #lgsb-uploader .lgsb-preset-field > span { color: var(--lgsb-ink); font-size: var(--lgsb-font-label); font-weight: var(--lgsb-weight-semibold); letter-spacing: var(--lgsb-tracking-label); text-transform: uppercase; } #lgsb-uploader .lgsb-preset-form-row { display: flex; gap: var(--lgsb-space-3); } #lgsb-uploader .lgsb-preset-form-actions { display: flex; flex-wrap: wrap; gap: var(--lgsb-space-2); justify-content: flex-end; } #lgsb-uploader .lgsb-preset-form-actions .lgsb-modal-btn { flex: 0 1 auto; min-width: 0; white-space: normal; } #lgsb-uploader .lgsb-preset-modal-msg { background: var(--lgsb-error-bg); border: 1px solid var(--lgsb-error-border); border-radius: var(--lgsb-radius-sm); color: var(--lgsb-error-text); font-size: var(--lgsb-font-body-sm); margin-top: var(--lgsb-space-3); padding: var(--lgsb-space-2) var(--lgsb-space-3); } #lgsb-uploader .lgsb-preset-modal-msg[hidden] { display: none; } #lgsb-uploader .lgsb-preset-guest-note { color: var(--lgsb-text-muted); font-size: var(--lgsb-font-body-sm); margin-top: var(--lgsb-space-3); } #lgsb-uploader .lgsb-preset-guest-note a { color: var(--lgsb-teal); font-weight: var(--lgsb-weight-semibold); } /* Bulk change-quantity / move-to-job dialog fields */ #lgsb-uploader .lgsb-bulk-qty-field { margin-top: var(--lgsb-space-3); max-width: 140px; } #lgsb-uploader .lgsb-bulk-move-field { margin-top: var(--lgsb-space-3); max-width: 240px; } /* Bulk Actions toolbar — compact bar at the top of each job's rows (or the flat list). In the flat grid it must span all columns. */ #lgsb-uploader .lgsb-bulk-bar { align-items: center; background: var(--lgsb-light-bg); border: 1px solid var(--lgsb-border); border-radius: var(--lgsb-radius-input); display: flex; flex-wrap: wrap; gap: var(--lgsb-space-3); grid-column: 1 / -1; margin-bottom: var(--lgsb-space-3); padding: var(--lgsb-space-2) var(--lgsb-space-3); } #lgsb-uploader .lgsb-bulk-selectall-label { font-size: var(--lgsb-font-body-sm); font-weight: var(--lgsb-weight-semibold); } #lgsb-uploader .lgsb-bulk-count { color: var(--lgsb-text-muted); font-size: var(--lgsb-font-body-sm); } #lgsb-uploader .lgsb-bulk-controls { align-items: center; display: inline-flex; gap: var(--lgsb-space-2); margin-left: auto; } #lgsb-uploader .lgsb-bulk-msg { color: var(--lgsb-text-muted); display: none; flex: 1 1 100%; font-size: var(--lgsb-font-body-sm); } #lgsb-uploader .lgsb-bulk-msg.lgsb-bulk-msg-visible { display: block; } /* ========================================================================= * 4. LAYOUT * ========================================================================= */ /* --- 4.1 Builder grid (single definition; two-column at ≥880cqw in §6) --- */ #lgsb-uploader .lgsb-builder-grid { align-items: start; display: grid; gap: var(--lgsb-space-5); grid-template-columns: 1fr; } #lgsb-uploader .lgsb-main-col { min-width: 0; padding: var(--lgsb-space-6); } #lgsb-uploader .lgsb-summary-col { display: flex; flex-direction: column; gap: var(--lgsb-space-4); min-width: 0; position: static; } /* --- 4.2 Section heading --- */ #lgsb-uploader .lgsb-upload-heading { margin-bottom: var(--lgsb-space-4); } /* ONE recipe for every section title (Layout / Global / Manage Jobs / Upload): teal, uppercase, title-1, with an optional leading 20px icon. */ #lgsb-uploader .lgsb-section-title { align-items: center; color: var(--lgsb-teal); display: flex; font-size: var(--lgsb-font-title-1); font-weight: var(--lgsb-weight-bold); gap: 8px; letter-spacing: .04em; line-height: var(--lgsb-leading-tight); text-transform: uppercase; } #lgsb-uploader .lgsb-title-icon { align-items: center; color: var(--lgsb-teal); display: inline-flex; flex: none; } #lgsb-uploader .lgsb-upload-heading p { color: var(--lgsb-text); font-size: var(--lgsb-font-body-sm); font-weight: var(--lgsb-weight-medium); margin-top: var(--lgsb-space-1); } /* --- 4.3 Dropzones --- */ #lgsb-uploader .lgsb-dropzone, #lgsb-uploader .lgsb-add-design-btn { background: var(--lgsb-surface); border: var(--lgsb-dropzone-border-width) dashed var(--lgsb-teal); border-radius: var(--lgsb-radius-card); cursor: pointer; padding: var(--lgsb-space-6); text-align: center; transition: background var(--lgsb-dur-fast) var(--lgsb-ease); } /* Hero upload row: dropzone + vault zone side by side, equal heights. Flex (not grid) so a missing vault zone (logged out / integration off) gracefully leaves the dropzone full-width. */ #lgsb-uploader .lgsb-upload-zones { align-items: stretch; display: flex; gap: var(--lgsb-space-4); margin-bottom: var(--lgsb-space-4); } #lgsb-uploader .lgsb-upload-zones > * { flex: 1 1 0; min-width: 0; } #lgsb-uploader .lgsb-dropzone { display: flex; /* stretch .lgsb-dropzone-full to full height */ flex-direction: column; justify-content: center; } #lgsb-uploader .lgsb-dropzone-full, #lgsb-uploader .lgsb-add-design-btn { align-items: center; display: flex; flex-direction: column; gap: var(--lgsb-space-2); justify-content: center; /* stays centered when the vault column is taller */ } /* Official Limitless upload icon (2.75.6): a filled single-path brand glyph with its own circle ring baked into the artwork, so the old CSS-drawn circle wrap (.lgsb-upload-icon-wrap) is retired. Sized inline to match the vault icon (40px in the upload/vault columns, 36px in chooser cards via .lgsb-mode-drop-icon). */ #lgsb-uploader .lgsb-upload-icon { /* !important: theme text-color rules otherwise win and paint the glyph near-black (icon uses fill/stroke: currentColor). */ color: var(--lgsb-teal) !important; fill: currentColor !important; stroke: currentColor !important; display: inline-block; flex: 0 0 auto; } #lgsb-uploader .lgsb-dropzone-label, #lgsb-uploader .lgsb-add-label { color: var(--lgsb-text); font-size: var(--lgsb-font-title-2); font-weight: var(--lgsb-weight-semibold); } #lgsb-uploader .lgsb-dropzone-or, #lgsb-uploader .lgsb-add-or { color: var(--lgsb-text-muted); font-size: var(--lgsb-font-pill); text-transform: lowercase; } #lgsb-uploader .lgsb-dropzone-meta, #lgsb-uploader .lgsb-add-meta { color: var(--lgsb-text-muted); font-size: var(--lgsb-font-pill); margin-top: 2px; } /* .lgsb-add-btn-inner mimics the Select Files button inside the jobs-mode dropzone (a