/* Layered Sculpture -- WordPress plugin styles. Everything is scoped under .ls-app (and #msgbox, which sits outside it as a page-level overlay) to avoid bleeding into / being overridden by the host theme's own .card/.field/button etc. rules. */ .ls-app { --ls-bg: #0d1117; --ls-panel: #12161e; --ls-card: #161b24; --ls-line: rgba(255,255,255,.14); --ls-text: #e8ecf2; --ls-muted: #98a2b3; --ls-accent: #dca24a; --ls-accent-soft: #d3a05a; --ls-accent2: #2f86ff; --ls-ok: #33bd6b; --ls-input: #10151d; box-sizing: border-box; display: flex; flex-direction: column; height: 900px; background: var(--ls-bg); color: var(--ls-text); font-family: "Rubik", "Segoe UI", system-ui, sans-serif; border-radius: 14px; overflow: hidden; } /* Computed styles on the live site showed h1/h2 rendering in "Inter" -- a completely different family than our declared fallback chain, not just Rubik failing to download -- meaning the theme's own global heading typography (Elementor's Site Settings -> global fonts CSS is generated with high specificity/!important precisely so it wins everywhere) was overriding our *inherited* font-family outright. Inheritance only wins when nothing targets the element directly, so !important on .ls-app alone can't fix a direct h1/h2 rule elsewhere -- font-family has to be re-declared with !important directly on every heading selector below. */ .ls-app, .ls-app * { font-family: "Rubik", "Segoe UI", system-ui, sans-serif !important; } /* Measured directly on the live site (console getComputedStyle): a .field label rendered at font-size 14.04px / line-height 26.0743px, vs. the local app's 12.48px / ~15px. Two separate host overrides stacked here: (1) every font-size in this file used to be in `rem`, which resolves against the HOST PAGE's root font-size (18px here, not the 16px local's own page uses) -- rem was the wrong unit for a design meant to look identical everywhere; every font-size below is now a fixed px value (rem * 16, matching what it always meant locally), immune to the host's root size. (2) the theme's own global line-height (~1.86 multiplier) was still inheriting through unaffected -- forced to `normal` here for the same reason as font-family above: a host rule can apply directly to any element and inheritance alone (even with !important on the parent) can't out-rank that. */ .ls-app, .ls-app * { line-height: normal !important; } .ls-app *, .ls-app *::before, .ls-app *::after { box-sizing: border-box; } #ls-topbar { flex-shrink: 0; background: var(--ls-panel); border-bottom: 1px solid var(--ls-line); padding: 12px 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .ls-app .topbar-title { display: flex; align-items: baseline; gap: 10px; } #ls-topbar h1 { font-size: 20.8px; font-weight: 800; color: var(--ls-accent); letter-spacing: .3px; margin: 0; } #ls-topbar .sub { font-size: 13.6px; color: var(--ls-muted); } .ls-app .topbar-actions { display: flex; gap: 8px; flex-shrink: 0; } .ls-app .topbar-actions button { font-size: 12.8px; padding: 7px 12px; width: auto; } #ls-main { display: flex; flex: 1; min-height: 0; } #viewport { position: relative; flex: 1; min-width: 0; background: #05070a; } #viewport canvas { display: block; width: 100%; height: 100%; } #ls-panel { width: 340px; flex-shrink: 0; background: var(--ls-panel); border-left: 1px solid var(--ls-line); overflow-y: auto; padding: 12px 14px; } .ls-app .card { background: var(--ls-card); border: 1px solid var(--ls-line); border-radius: 11px; padding: 9px 12px; margin-bottom: 10px; } .ls-app .card h2{ font-size: 15.2px; color: var(--ls-accent); margin: 0 0 8px; font-weight: 700; letter-spacing: .2px; } .ls-app .card.locked { opacity: .5; pointer-events: none; } .ls-app .card.locked h2 { color: var(--ls-muted); } .ls-app .card.accordion > h2 { display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; } .ls-app .accordion-chevron { font-size: 12px; color: var(--ls-muted); transition: transform .15s; } .ls-app .card.accordion.open > h2 .accordion-chevron { transform: rotate(180deg); } .ls-app .accordion-body { overflow: hidden; max-height: 1000px; opacity: 1; transition: max-height .2s ease, opacity .15s ease; } .ls-app .card.accordion:not(.open) > h2 { margin-bottom: 0; } .ls-app .card.accordion:not(.open) .accordion-body { max-height: 0; opacity: 0; } .ls-app button.primary { background: var(--ls-accent-soft); color: #201603; border: none; border-radius: 9px; padding: 11px; font-weight: 700; font-size: 14.72px; cursor: pointer; width: 100%; } .ls-app button.primary:hover { filter: brightness(1.06); } .ls-app button.primary:disabled { opacity: .45; cursor: not-allowed; } .ls-app button.primary.alt { background: var(--ls-ok); color: #fff; display: flex; align-items: center; justify-content: center; gap: 8px; } .ls-app .credit-cost { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; } .ls-app .credit-icon { width: 16px; height: 16px; display: inline-block; } .ls-app button.ghost { background: transparent; border: 1px solid var(--ls-line); color: var(--ls-muted); border-radius: 8px; padding: 7px 10px; font-size: 13.12px; cursor: pointer; width: 100%; } .ls-app button.ghost:hover { color: var(--ls-text); border-color: var(--ls-accent2); } .ls-app button.ghost:disabled { opacity: .45; cursor: not-allowed; } .ls-app button.ghost.accent { border-color: var(--ls-accent); color: var(--ls-accent); font-weight: 600; } .ls-app button.ghost.accent:hover:not(:disabled) { background: rgba(220,162,74,.12); border-color: var(--ls-accent-soft); color: var(--ls-accent-soft); } .ls-app .field { margin-bottom: 10px; } .ls-app .field:last-child { margin-bottom: 0; } .ls-app .field label { display: flex; justify-content: space-between; font-size: 12.48px; color: var(--ls-muted); margin-bottom: 5px; } .ls-app .field label .val { color: var(--ls-text); font-weight: 600; font-variant-numeric: tabular-nums; } .ls-app .field label .val-wrap { display: inline-flex; align-items: center; gap: 4px; } .ls-app .reset-param { background: transparent; border: none; color: var(--ls-accent2); font-size: 14.4px; line-height: 1 !important; padding: 0 1px; cursor: pointer; } .ls-app .reset-param:hover { color: var(--ls-text); } .ls-app .reset-param[hidden] { display: none; } /* Deliberately NOT relying on the browser's native range rendering (appearance:auto + accent-color) any more -- confirmed via live DevTools inspection (DOM clean, no host CSS collision, Network/Computed all correct) that the "chunky pill" look wasn't a conflict at all, just modern Chrome's own redesigned native slider control, which looks different across Chrome versions/machines and isn't something we can pin down. Drawing our own thin track + small thumb instead makes the result deterministic regardless of browser/OS slider theming. */ .ls-app .field input[type=range] { --range-progress: 0%; /* set live by updateRangeFill() in app.js */ -webkit-appearance: none !important; appearance: none !important; /* 16px matches the local app's own native (appearance:auto) rendered height exactly (measured via getComputedStyle there) -- the 20px used right after switching to a hand-drawn slider was an arbitrary bigger hit target, which is what made every field noticeably taller here than in the local app and pushed the whole panel/interface longer. */ width: 100%; height: 16px; margin: 0; padding: 0 !important; background: none !important; border: none !important; box-shadow: none !important; cursor: pointer; } /* Filled (from the RTL start, i.e. the right edge) up to the thumb is accent-colored, matching the local app's native accent-color fill -- verified side-by-side against a real native RTL slider that "to left" is the correct gradient direction here, not "to right". */ .ls-app .field input[type=range]::-webkit-slider-runnable-track { -webkit-appearance: none !important; height: 3px !important; border-radius: 999px !important; background: linear-gradient( to left, var(--ls-accent) 0%, var(--ls-accent) var(--range-progress), var(--ls-line) var(--range-progress), var(--ls-line) 100% ) !important; border: none !important; box-shadow: none !important; } .ls-app .field input[type=range]::-webkit-slider-thumb { -webkit-appearance: none !important; width: 14px !important; height: 14px !important; border-radius: 50% !important; background: var(--ls-accent) !important; border: none !important; box-shadow: none !important; margin-top: -5.5px !important; cursor: pointer; } /* Firefox exposes the filled portion as its own pseudo-element natively -- no gradient math needed, just color the two parts directly. */ .ls-app .field input[type=range]::-moz-range-track { height: 3px !important; border-radius: 999px !important; background: var(--ls-line) !important; border: none !important; box-shadow: none !important; } .ls-app .field input[type=range]::-moz-range-progress { height: 3px !important; border-radius: 999px !important; background: var(--ls-accent) !important; border: none !important; box-shadow: none !important; } .ls-app .field input[type=range]::-moz-range-thumb { width: 14px !important; height: 14px !important; border-radius: 50% !important; background: var(--ls-accent) !important; border: none !important; box-shadow: none !important; cursor: pointer; } .ls-app .field input[type=range]:focus { outline: none !important; } .ls-app .row2 { display: flex; gap: 8px; } .ls-app .row2 > .field { flex: 1; } .ls-app .upload-drop { position: relative; border: 1px dashed var(--ls-line); border-radius: 9px; padding: 18px 10px; text-align: center; color: var(--ls-muted); font-size: 13.6px; cursor: pointer; transition: border-color .15s; } .ls-app .upload-drop:hover, .ls-app .upload-drop.dragover { border-color: var(--ls-accent); color: var(--ls-text); } .ls-app .upload-drop.uploaded { border-color: var(--ls-ok); border-style: solid; } .ls-app .upload-drop img { max-width: 100%; max-height: 110px; border-radius: 6px; margin-bottom: 8px; display: block; margin-inline: auto; } .ls-app #file-input { display: none; } .ls-app .remove-photo { position: absolute; top: 8px; left: 8px; z-index: 2; width: 22px; height: 22px; padding: 0; display: flex; align-items: center; justify-content: center; background: rgba(16,19,26,.85); border: 1px solid var(--ls-line); border-radius: 50%; color: var(--ls-muted); font-size: 12px; line-height: 1 !important; cursor: pointer; } .ls-app .remove-photo:hover { background: #d9534f; border-color: #d9534f; color: #fff; } .ls-app .remove-photo[hidden] { display: none; } .ls-app .mode-field { margin-top: 10px; } .ls-app .mode-toggle { display: flex; gap: 6px; } .ls-app .mode-toggle input { position: absolute; opacity: 0; pointer-events: none; } .ls-app .mode-toggle label { flex: 1; text-align: center; padding: 7px 8px; border-radius: 8px; border: 1px solid var(--ls-line); color: var(--ls-muted); font-size: 13.12px; cursor: pointer; transition: border-color .15s, color .15s, background .15s; } .ls-app .mode-toggle input:checked + label { border-color: var(--ls-accent); color: var(--ls-accent); background: rgba(220,162,74,.12); font-weight: 600; } .ls-app .checkbox-field { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 13.12px; color: var(--ls-text); cursor: pointer; user-select: none; } .ls-app .checkbox-field input[type=checkbox] { accent-color: var(--ls-accent); width: 15px; height: 15px; cursor: pointer; } .ls-app #ring-params { margin-top: 10px; } .ls-app .spinner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(16,19,26,.6); color: var(--ls-text); z-index: 5; } .ls-app .spinner[hidden] { display: none; } .ls-app .spin { width: 44px; height: 44px; border: 4px solid var(--ls-line); border-top-color: var(--ls-accent); border-radius: 50%; animation: ls-spin 1s linear infinite; } @keyframes ls-spin { to { transform: rotate(360deg); } } .ls-app .banner { position: absolute; bottom: 0; left: 0; right: 0; z-index: 4; background: linear-gradient(180deg, #3a2c0c, #2c2109); color: var(--ls-accent); border-top: 1px solid rgba(220,162,74,.5); text-align: center; font-size: 14.4px; font-weight: 600; padding: 9px 16px; } .ls-app .banner[hidden] { display: none; } .ls-app .banner.error { background: linear-gradient(180deg, #3a0c0c, #2c0909); color: #ff8a8a; border-top-color: rgba(220,74,74,.5); } .ls-app .dims-banner { background: rgba(18,22,30,.88); color: var(--ls-text); border-top: 1px solid var(--ls-line); font-variant-numeric: tabular-nums; letter-spacing: .2px; } /* VIEW-TOOLS-BUTTONS.md -- floating toolbar, top-LEFT (physical left, deliberately not flipped for RTL, matching the doc) of the viewport. */ .ls-app #view-tools { position: absolute; top: 12px; left: 12px; display: flex; align-items: center; gap: 6px; z-index: 4; } .ls-app #view-tools button { background: rgba(30,36,48,.8); color: var(--ls-text); border: 1px solid var(--ls-line); border-radius: 8px; padding: 6px 10px; font-size: 13.12px; cursor: pointer; } .ls-app #view-tools button:hover { border-color: var(--ls-accent2); } /* "הדרכה" -- brand-colored call-to-action, hidden entirely (via [hidden]) unless Settings -> Layered Sculpture has a guide URL configured. */ .ls-app .guide-btn { display: inline-flex; align-items: center; justify-content: center; background: var(--ls-accent-soft); color: #201603; font-weight: 700; border: 1px solid var(--ls-accent-soft); border-radius: 8px; padding: 6px 18px; font-size: 13.12px; text-decoration: none; white-space: nowrap; cursor: pointer; } .ls-app .guide-btn:hover { filter: brightness(1.06); } .ls-app .guide-btn[hidden] { display: none; } .ls-app .placeholder-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ls-muted); font-size: 15.2px; text-align: center; padding: 20px; pointer-events: none; } .ls-app .placeholder-hint[hidden] { display: none; } /* ---------- msgbox (error-msgbox-snippet.md) -- server/communication errors only ---------- */ .msgbox { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(8, 11, 20, .66); } .msgbox[hidden] { display: none; } .msgbox-card { width: min(430px, 100%); box-sizing: border-box; text-align: center; background: #1e2438; border: 1px solid #2b3350; border-top: 4px solid #ff5c72; border-radius: 16px; padding: 26px 24px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); animation: msgbox-pop .16s ease-out; font-family: "Segoe UI", system-ui, sans-serif; direction: rtl; } .msgbox-icon { font-size: 40px; line-height: 1; margin-bottom: 10px; } .msgbox-title { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: #e7eaf3; } .msgbox-msg { margin: 0 0 20px; font-size: 14px; line-height: 1.65; color: #9aa3bd; } .msgbox-btn { min-width: 130px; padding: 10px 18px; border-radius: 10px; border: none; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 14px; color: #fff; background: linear-gradient(90deg, #5b8cff, #7c5cff); } .msgbox-btn:hover { filter: brightness(1.08); } @keyframes msgbox-pop { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .msgbox-card { animation: none; } } /* ---------- login note (login-note-snippet.md) ---------- */ .app-login-note{ direction:rtl; box-sizing:border-box; margin:0 auto; max-width:760px; padding:30px 28px; text-align:center; border-radius:16px; font-size:19px; line-height:1.6; font-weight:600; color:#e7ecff; background:linear-gradient(180deg,#0f1636,#0a1024); border:1px solid rgba(255,214,120,.55); box-shadow: 0 0 0 1px rgba(255,214,120,.12), 0 0 34px rgba(120,150,255,.28), inset 0 0 26px rgba(120,150,255,.10); } .app-login-note a{ color:#ffd66b; font-weight:700; text-decoration:none; border-bottom:1px solid rgba(255,214,120,.5); padding-bottom:1px; } .app-login-note a:hover{ color:#ffe49a; border-color:rgba(255,214,120,.9); }