浅念
8884e100f9
Overlay 190 upstream items (V8.22→8.31) preserving trade-pro theme, registry tests, and design docs. Re-applied full patch set on identical anchors (discovery/env_for/blocks.css/type-mapping/locale-override/ theme_color/frontend entries/test_theme_pro_v3 mods) plus compose pins. Verified: theme suites 35/35; dual-baseline full run 415 passed vs pristine 386+29 ours, FAILED-set diff EMPTY (same 10 Windows env fails). Live: container 8.31.1-dev.1 healthy, hesupipe 192 entries intact, trade-pro build 203 pages 0 errors. Co-Authored-By: Claude Code <noreply@anthropic.com>
159 lines
35 KiB
CSS
159 lines
35 KiB
CSS
:root{--ink:#263448;--muted:#8a99ae;--blue:#406dce;--line:#e8edf3;--panel:#fff;--bg:#f2f5f9;font-family:Inter,"Segoe UI","Microsoft YaHei",Arial,sans-serif}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--bg)}button,input,select,textarea{font:inherit}button{cursor:pointer}.studio{height:100vh;display:flex;flex-direction:column;min-height:650px}.studio-top{height:72px;min-height:72px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 24px;gap:16px;z-index:2}.brand{display:flex;align-items:center;gap:9px}.brand>a{font-size:29px;line-height:1;background:#1e314e;color:white;text-decoration:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center}.brand b{display:block;font-size:16px;letter-spacing:-.45px}.brand small{font-size:8px;font-weight:750;color:var(--muted);letter-spacing:1.6px}.divide{height:26px;border-left:1px solid #d9e0ea}.file-name{font-size:13px;white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis}.file-name small{color:#c0c9d3}.file-name strong{font-weight:700}.top-center{display:flex;gap:3px;background:#f2f5f9;padding:4px;border-radius:9px;margin:auto}.icon-btn{border:0;border-radius:6px;background:transparent;padding:6px 11px;font-size:20px;color:#718299}.icon-btn.on{background:#fff;color:#355dbb;box-shadow:0 2px 8px #28466716}.save-status{color:#91a0ae;font-size:11px;white-space:nowrap}.save-status.dirty{color:#be8530}.ui-btn{border-radius:8px;padding:11px 15px;font-weight:650;font-size:12px;border:1px solid #e5eaf0;white-space:nowrap}.ui-btn.ghost{background:#fff;color:#344764}.ui-btn.primary{background:#315bba;color:#fff;border-color:#315bba}.ui-btn:hover,.small-btn:hover{filter:brightness(.96)}.studio-body{display:grid;grid-template-columns:278px minmax(0,1fr) 324px;min-height:0;flex:1}.left-pane,.right-pane{background:#fff;overflow-y:auto;display:flex;flex-direction:column}.left-pane{border-right:1px solid var(--line)}.right-pane{border-left:1px solid var(--line)}.pane-heading{padding:27px 24px 17px;display:flex;justify-content:space-between;align-items:center}.overline{font-size:9px;font-weight:800;color:#7894c4;letter-spacing:1.4px}.pane-heading h3{margin:4px 0 0;font-size:19px;letter-spacing:-.4px}.chip{font-size:10px;background:#eff4fb;color:#6d87ad;padding:4px 8px;border-radius:5px;white-space:nowrap}.left-pane .field{margin:0 19px 14px}.field label,.prop label{display:block;font-size:11px;font-weight:750;color:#758499;margin-bottom:7px}.field select,.prop input,.prop textarea,.prop select{width:100%;border:1px solid #dce5ed;border-radius:8px;padding:10px 12px;background:white;color:#2b3c53;outline:0;font-size:12px}.field select:focus,.prop input:focus,.prop textarea:focus,.prop select:focus{border-color:#5589d9;box-shadow:0 0 0 3px #5f90de12}.section-label{font-size:10px;font-weight:800;color:#9da9b8;letter-spacing:.7px;padding:17px 22px 11px}.block-list{padding:0 13px}.block-row{display:flex;align-items:center;gap:9px;padding:11px 10px;margin-bottom:7px;background:#f8fafc;border:1px solid #e6ecf3;border-radius:10px;cursor:pointer}.block-row.selected{border-color:#729cf0;background:#eff5ff;box-shadow:0 0 0 1px #e9f0ff}.block-row.dragging{opacity:.35}.drag-handle{font-size:17px;color:#aab9cc;cursor:grab}.block-icon{display:grid;place-items:center;background:white;width:30px;height:30px;border-radius:7px;color:#5b76b2;font-size:17px;border:1px solid #e8edf4}.block-copy{flex:1;min-width:0}.block-copy strong{display:block;font-size:12px}.block-copy small{display:block;font-size:10px;color:#9aa7b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row-actions{display:flex;gap:2px}.row-actions button{border:0;background:transparent;font-size:12px;color:#9aa5b4;padding:4px}.palette{padding:0 19px 20px;display:grid;grid-template-columns:1fr 1fr;gap:9px}.palette button{display:flex;gap:7px;align-items:center;border:1px dashed #cdd9e6;background:#fcfdff;color:#566b83;border-radius:9px;padding:11px 9px;text-align:left;font-size:11px;font-weight:700}.palette button span{color:#416fcd;font-size:17px}.sidebar-foot{font-size:10px;line-height:1.8;color:#98a5b6;margin:auto 20px 22px;padding-top:24px}.preview-workspace{min-width:0;display:flex;flex-direction:column;background:#eef1f5}.preview-head{height:50px;min-height:50px;display:flex;align-items:center;gap:10px;padding:0 26px;border-bottom:1px solid #e1e7f0;color:#64758b;font-size:11px}.preview-head code{font-size:10px;padding:4px 7px;border-radius:5px;background:#e2e8f0;color:#445b78}.live-dot{height:7px;width:7px;border-radius:50%;background:#36c993;box-shadow:0 0 0 4px #36c99318}.preview-note{margin-left:auto;color:#9ba9b8}.stage{flex:1;overflow:auto;padding:25px;display:flex;align-items:flex-start;justify-content:center;background:radial-gradient(circle at 20px 20px,#dce3eb 1px,transparent 1px);background-size:20px 20px}.device-frame{background:white;width:100%;max-width:1440px;min-height:700px;border:1px solid #dce3eb;box-shadow:0 15px 45px #273b5217;border-radius:5px;transition:width .2s}.device-frame.tablet{width:780px;flex-shrink:0}.device-frame.phone{width:390px;flex-shrink:0}iframe{display:block;border:0;width:100%;height:calc(100vh - 183px);min-height:700px}.inspector{padding:2px 22px;flex:1}.no-selection{margin-top:20px;background:#f5f8fb;border-radius:11px;padding:22px;font-size:12px;line-height:1.8;color:#8294a8}.prop{margin:0 0 19px}.prop textarea{min-height:96px;resize:vertical;line-height:1.5}.prop input[type=color]{height:42px;padding:4px}.prop-tip{display:block;margin-top:6px;color:#9da9b8;font-size:10px;line-height:1.5}.inspector-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:21px}.inspector-title h3{font-size:17px;margin:0}.toggle{display:flex;align-items:center;gap:8px;color:#697f98;font-size:12px}.toggle input{width:17px;height:17px}.subheading{font-size:11px;font-weight:800;margin:23px 0 13px;color:#788ba3;border-top:1px solid #e8edf3;padding-top:20px}.small-btn{background:#f2f6fa;border:1px solid #e2e8ee;padding:8px 12px;border-radius:8px;color:#5675a1;font-size:11px;font-weight:700}.red-btn{background:#fff0f0;color:#bb5055;border-color:#ffe1e1}.right-foot{margin:22px;padding:19px;background:#f5f8fc;border:1px solid #e7edf5;border-radius:10px;font-size:11px}.right-foot div{font-weight:760}.right-foot p{line-height:1.8;color:#96a3b3;margin:7px 0 0}.right-foot code{color:#486fb6}.toast{position:fixed;bottom:25px;right:28px;z-index:10;background:#1c3555;color:white;padding:13px 19px;border-radius:9px;box-shadow:0 8px 30px #1e314e30;display:none;font-size:12px}.toast.show{display:block}
|
|
@media(max-width:1200px){.studio-body{grid-template-columns:240px minmax(0,1fr) 290px}.preview-note{display:none}.studio-top{gap:8px}.file-name{max-width:180px}}@media(max-width:950px){.studio-body{grid-template-columns:210px minmax(0,1fr)}.right-pane{position:fixed;right:0;top:72px;bottom:0;width:310px;z-index:3;box-shadow:-8px 0 22px #0001}.studio-top .ui-btn.ghost{display:none}}@media(max-width:650px){.studio-body{grid-template-columns:1fr}.left-pane{display:none}.right-pane{display:none}.studio-top{padding:0 12px}.file-name{display:none}.save-status{display:none}}
|
|
|
|
.layout-editor-col{border:1px solid #dfe5ed;border-radius:12px;padding:10px;margin:12px 0;background:#f8fafc}.layout-editor-title{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:space-between}.layout-editor-title input{width:56px}.layout-editor-title button,.layout-child button{border:0;background:none;color:#54647a;cursor:pointer}.layout-child{background:white;border:1px solid #e5eaf3;border-radius:9px;margin:8px 0;padding:9px}.layout-child label{display:block;font-size:11px;color:#475569;margin:7px 0}.layout-child input,.layout-child select{display:block;width:100%;margin-top:3px;padding:7px;border:1px solid #e1e6ee;border-radius:6px}.layout-child-toolbar{display:flex;flex-wrap:wrap;gap:4px}.layout-child-toolbar button{background:#e8effa;border:0;padding:5px 7px;border-radius:6px;cursor:pointer;font-size:11px}
|
|
/* V8.21.1 visual studio usability refresh — no saved blueprint schema changes. */
|
|
:root{--studio-accent:#ed742d;--studio-focus:#e48b42;--studio-border:#e6eaf0;--studio-shadow:0 20px 54px rgba(31,48,69,.08)}
|
|
.studio-top{box-shadow:0 1px 9px rgba(29,47,75,.035);padding-inline:18px;gap:9px}
|
|
.brand>a{background:#252e3c;border-radius:10px;color:#ff9959}
|
|
.top-center{margin:auto;background:#edf1f6}
|
|
.icon-btn.on{color:#b95722}
|
|
.ui-btn.primary{background:#dc6b2b;border-color:#dc6b2b}
|
|
.ui-btn:focus-visible,.icon-btn:focus-visible,.block-row:focus-visible,.palette button:focus-visible,.row-actions button:focus-visible,.inspector-nav button:focus-visible{outline:2px solid var(--studio-focus);outline-offset:2px}
|
|
.ui-btn:disabled,.row-actions button:disabled{opacity:.3;cursor:not-allowed}
|
|
.pane-switcher{display:flex;gap:3px}
|
|
.pane-switcher .ui-btn{padding:8px 10px}
|
|
.studio-body{grid-template-columns:minmax(270px,290px) minmax(0,1fr) minmax(320px,350px)}
|
|
.left-pane,.right-pane{background:#fff}
|
|
.pane-heading{padding:22px 18px 14px}
|
|
.pane-heading h3{font-size:16px;letter-spacing:0}
|
|
.section-label{display:flex;justify-content:space-between;align-items:center;padding:14px 19px 9px;color:#56677b;font-size:11px;letter-spacing:0}
|
|
.section-caption{font-size:10px;color:#a0abbb;font-weight:500}
|
|
.structure-filter{margin:4px 13px 10px;display:flex;align-items:center;border:1px solid #dfe6ee;background:#f7f9fc;border-radius:9px;overflow:hidden;min-height:38px}
|
|
.structure-filter:focus-within{border-color:var(--studio-focus);box-shadow:0 0 0 3px #f39a4923}
|
|
.structure-filter input{background:transparent;border:0;outline:0;min-width:0;flex:1;padding:9px 12px;font-size:12px;color:#25364e}
|
|
.structure-filter button{border:0;background:transparent;font-size:19px;color:#8796a7;width:34px}
|
|
.structure-hint{color:#8190a3;font-size:10px;padding:8px 19px 17px;line-height:1.7}
|
|
.block-list{padding:0 11px;min-height:60px}
|
|
.block-row{background:#fff;box-shadow:0 2px 10px #334b6207;padding:9px 8px;margin-bottom:6px;gap:7px;border-color:#e9edf2;transition:border-color .15s,background .15s}
|
|
.block-row:hover{border-color:#c4cedc;background:#fafbfd}
|
|
.block-row.selected{background:#fff7f1;border-color:#f19b59;box-shadow:0 0 0 1px #f8e3d5}
|
|
.block-row.is-hidden{opacity:.55}
|
|
.block-icon{width:29px;height:29px;color:#d67b35;background:#fff8f2;flex-shrink:0}
|
|
.block-copy strong{font-size:12px;color:#303e51}
|
|
.block-copy small{font-size:10px;color:#7e90a5}
|
|
.drag-handle{font-size:14px}
|
|
.row-actions{display:flex;gap:0;flex-shrink:0}
|
|
.row-actions button{font-size:12px;min-width:18px;padding:4px 2px;border-radius:5px}
|
|
.row-actions button:hover:not(:disabled){background:#fff0e4;color:#c96728}
|
|
.block-list .no-selection{padding:15px;margin:0 2px 10px}
|
|
.palette{grid-template-columns:repeat(2,minmax(0,1fr));padding-inline:13px}
|
|
.palette button{padding:10px 9px;border-style:solid}
|
|
.palette button:hover{border-color:#e8aa76;background:#fff8f3}
|
|
.palette button span{color:#d77936}
|
|
.preview-workspace{background:#eff2f6}
|
|
.preview-head{padding:0 16px;gap:9px}
|
|
.preview-note{max-width:260px;line-height:1.3;text-align:right}
|
|
.live-dot{background:#3aa688}
|
|
.live-dot.loading{background:#db983a;animation:studio-pulse 1.25s infinite}
|
|
.live-dot.error{background:#cb4e4e}
|
|
@keyframes studio-pulse{50%{opacity:.3;box-shadow:0 0 0 7px #efab4626}}
|
|
.stage{padding:22px 15px}
|
|
.device-frame{border-radius:8px;box-shadow:var(--studio-shadow);overflow:hidden;min-height:300px}
|
|
.device-frame.tablet,.device-frame.phone{max-width:calc(100% - 4px)}
|
|
iframe{min-height:590px;height:calc(100vh - 224px)}
|
|
.stage-footer{min-height:35px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 19px;font-size:10px;color:#8b9bad;border-top:1px solid #e1e7ee}
|
|
.inspector-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:4px;margin:0 16px 17px;border-radius:9px;background:#f1f4f8}
|
|
.inspector-nav button{background:none;border:0;border-radius:6px;padding:10px 5px;font-size:12px;color:#78869a;font-weight:650}
|
|
.inspector-nav button[aria-selected=true]{background:white;box-shadow:0 1px 5px #233d5f12;color:#b95c2b}
|
|
.inspector{padding:0 19px}
|
|
.inspector [data-inspector-section][hidden]{display:none!important}
|
|
.inspector-title{margin:0 0 16px}
|
|
.inspector-title h3{font-size:14px}
|
|
.right-foot{background:#faf8f5;border-color:#f0e6d7;margin-top:auto}
|
|
.studio .section-label,.studio .pane-heading h3{user-select:none}
|
|
.sr-only{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important}
|
|
@media(max-width:1400px){.studio-body{grid-template-columns:255px minmax(0,1fr) 310px}.studio-top{gap:6px}.studio-top>.ui-btn{padding:9px 10px}}
|
|
@media(max-width:1130px){.studio-top>.ui-btn.ghost:not(#studioUndo):not(#studioRedo){display:none}.studio-body{grid-template-columns:245px minmax(0,1fr) 295px}.file-name{max-width:150px}.pane-switcher{display:flex}}
|
|
@media(max-width:950px){.studio-body{grid-template-columns:230px minmax(0,1fr)}.right-pane{transform:translateX(105%);transition:transform .2s;display:flex!important;z-index:7;top:72px;width:min(340px,92vw)}body.show-inspector .right-pane{transform:translateX(0)}.preview-note{display:none}.studio-top>.ui-btn.ghost{display:none}}
|
|
@media(max-width:650px){.studio{min-height:480px}.studio-body{grid-template-columns:minmax(0,1fr)}.left-pane{display:flex!important;position:fixed;z-index:7;top:72px;bottom:0;left:0;width:min(315px,88vw);transform:translateX(-106%);transition:transform .2s;box-shadow:6px 0 20px #17283f12}body.show-structure .left-pane{transform:translateX(0)}.right-pane{display:flex!important}.studio-top{padding-inline:8px}.pane-switcher .ui-btn{padding:8px}.studio-top .brand{display:none}.top-center{margin-inline:auto}.studio-top .ui-btn.primary{padding:9px 10px}.preview-head{height:42px;min-height:42px;padding:0 9px}.stage{padding:10px 6px}.device-frame.phone,.device-frame.tablet{max-width:100%}.stage-footer{padding:8px 10px}.studio-top .save-status{display:none}}
|
|
|
|
@media(max-width:950px){.studio-top>#saveDraftButton.ui-btn.ghost{display:inline-flex!important;align-items:center;padding:9px 10px;color:#c5652d;background:#fff6ed;border-color:#eec49e}}
|
|
@media(max-width:430px){.studio-top #saveDraftButton{font-size:11px}.studio-top .ui-btn.primary{font-size:11px}.icon-btn{padding:6px 7px}}
|
|
|
|
.studio-actions{position:relative;flex-shrink:0}.studio-actions summary{display:flex;gap:6px;align-items:center;list-style:none;border:1px solid #e5eaf0;border-radius:8px;background:#fff;color:#394a60;padding:10px 13px;font-weight:650;font-size:12px;cursor:pointer;user-select:none}.studio-actions summary::-webkit-details-marker{display:none}.studio-actions[open] summary{border-color:#dbaa89;background:#fff8f1}.studio-actions-menu{position:absolute;right:0;top:calc(100% + 8px);display:grid;gap:5px;min-width:205px;z-index:12;padding:9px;border:1px solid #e2e7ed;border-radius:12px;background:#fff;box-shadow:0 15px 42px #283b5328}.studio-actions-menu .ui-btn{width:100%;text-align:left;border:0;padding:11px 12px;background:transparent}.studio-actions-menu .ui-btn:hover{background:#f5f7fa}.studio-actions-menu .ui-btn.ghost{display:block!important}@media(max-width:650px){.studio-actions summary{font-size:11px;padding:9px 7px}.studio-actions-menu{right:-15px;min-width:185px}}
|
|
/* V8.21.2 Easy Studio — task-first UX; no schema or API changes */
|
|
.sf-easy-top{height:70px;min-height:70px;padding:0 20px;gap:12px;z-index:15}
|
|
.sf-easy-top .brand{min-width:138px}.sf-easy-top .brand small{font-size:10px;color:#a1aab7}.sf-easy-file{display:flex;flex-direction:column;gap:3px;min-width:130px;max-width:210px}.sf-easy-file small{color:#8b98a9;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sf-easy-file strong{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sf-easy-device{margin-left:auto;margin-right:auto;flex:0 0 auto;display:flex}.sf-easy-device .icon-btn{font-size:12px;padding:8px 12px;font-weight:700}.sf-easy-save-status{padding:7px 10px;max-width:120px;overflow:hidden;text-overflow:ellipsis;background:#f3f6f9;border-radius:7px}.sf-easy-save-status.dirty{color:#b96d21;background:#fff5e8}.sf-save-btn{border-color:#e7a36d!important;color:#b65d23!important;background:#fffaf5!important;padding-inline:15px}.sf-publish-btn{padding-inline:19px;background:#df752f!important}.sf-easy-top .studio-actions{margin:0}.sf-easy-top .studio-actions summary{padding:10px 11px}.sf-easy-top .studio-actions-menu{min-width:195px;max-height:80vh;overflow-y:auto}.sf-easy-top .studio-actions-menu .ui-btn{font-size:12px}
|
|
.sf-steps{display:flex;align-items:center;gap:13px;padding:10px 22px;background:#fffaf6;border-bottom:1px solid #f2e3d7;color:#7d8290;min-height:45px;font-size:12px}.sf-steps-label{color:#b2683a;font-weight:800;flex-shrink:0}.sf-step{white-space:nowrap;font-weight:640;border-radius:8px;padding:5px 8px}.sf-step.active{background:#fce7d7;color:#b85b23}.sf-step-separator{color:#d6ad90}.sf-guide-link{margin-left:auto;border:0;background:none;color:#bc6529;font-weight:750;font-size:12px;white-space:nowrap;padding:5px 8px;text-decoration:underline;text-underline-offset:3px}
|
|
.studio-body{min-height:0;grid-template-columns:270px minmax(0,1fr) 320px}.left-pane,.right-pane{min-height:0}.left-pane .pane-heading{padding-bottom:10px}.left-pane .pane-heading h3,.right-pane .pane-heading h3{font-size:17px}.sf-page-picker{margin-bottom:10px!important}.sf-page-picker label{color:#5f7184;font-size:11px}.sf-page-picker select{font-size:12px}.sf-add-area{padding:2px 15px 15px}.sf-add-button{display:block;width:100%;border:1px solid #dc732f;background:#e47b38;color:#fff;border-radius:10px;padding:14px 12px;font-size:14px;font-weight:800;box-shadow:0 4px 11px #dc732f25;text-align:center;cursor:pointer}.sf-add-button:hover{background:#ce6427}.sf-add-area p{margin:9px 1px 0;color:#8a97a8;font-size:11px;line-height:1.6}.sf-library-panel{margin:0 13px 12px;border:1px solid #f2cfb4;background:#fffaf6;border-radius:12px;padding:9px 0;box-shadow:0 7px 15px #b55e1f12}.sf-library-panel[hidden]{display:none!important}.sf-panel-caption{display:flex;justify-content:space-between;gap:5px;align-items:center;padding:4px 12px 10px;font-size:11px;font-weight:700;color:#895b3c}.sf-panel-caption button{border:none;background:transparent;color:#b86327;font-size:11px}.sf-library-panel .palette{grid-template-columns:repeat(2,minmax(0,1fr));padding:2px 9px 12px;gap:7px}.sf-library-panel .palette button{min-height:42px;background:#fff;border-style:solid;font-size:11px}.sf-subsection{margin:0 9px 6px;padding-top:8px;border-top:1px solid #f2ddc7}.sf-subsection>summary{padding:7px 5px;cursor:pointer;color:#85624b;font-size:11px;font-weight:750}.sf-subsection .palette{padding:8px 0;grid-template-columns:1fr}.left-pane .section-label{padding-top:13px;font-size:11px;color:#56677b}.block-list{padding:0 12px;min-height:75px}.block-row{min-height:54px}.block-copy strong{font-size:12px}.row-actions button{min-width:19px}.sf-advanced{margin:6px 13px 18px;border:1px solid #e6eaf0;border-radius:10px;background:#fafbfc}.sf-advanced summary{display:flex;align-items:center;justify-content:space-between;gap:5px;padding:13px;cursor:pointer;font-weight:750;font-size:12px;color:#67758b}.sf-advanced summary::after{content:'⌄';font-size:15px;margin-left:auto;color:#99a7b9}.sf-advanced summary span{font-size:10px;font-weight:400;color:#9aa6b5}.sf-advanced[open]{background:#fff}.sf-advanced[open] summary{border-bottom:1px solid #edf0f4}.sf-advanced .field{margin:13px}.sf-advanced-buttons{display:grid;gap:7px;padding:0 13px 10px}.sf-advanced-buttons button{white-space:normal;text-align:left}.sf-advanced-note{font-size:10px;color:#9aa6b5;line-height:1.7;margin:4px 13px 13px}
|
|
.structure-hint{padding-bottom:12px}.preview-workspace{min-width:0}.preview-head{min-height:48px;height:48px}.preview-note{font-size:10px}.right-pane .pane-heading{padding-bottom:15px}.right-pane .overline{letter-spacing:.4px;color:#d67832;font-size:10px}.right-pane .inspector-nav{margin-top:0}.sf-advanced-foot{display:block;padding:0;margin:22px 15px;border:1px solid #eceff2;background:#fafbfc}.sf-advanced-foot summary{padding:13px 15px;cursor:pointer;font-size:11px;font-weight:750;color:#617084}.sf-advanced-foot p{margin:0 15px 14px}.right-pane .no-selection b{display:block;color:#53667d;font-size:14px}.right-pane .no-selection p{font-size:12px;line-height:1.7}.right-pane .no-selection .ui-btn{margin-top:8px}.right-pane .prop label{font-size:12px;color:#5c6a7f}.right-pane .prop input,.right-pane .prop textarea,.right-pane .prop select{font-size:13px;padding:11px 12px}.sf-help-dialog{border:1px solid #dfe4eb;border-radius:18px;width:min(535px,94vw);padding:26px;box-shadow:0 25px 100px #23324835}.sf-help-dialog::backdrop{background:#1c2c405a}.sf-help-head{display:flex;align-items:start;justify-content:space-between;gap:12px}.sf-help-head h2{margin:4px 0 15px;font-size:23px;color:#28364a}.sf-help-steps{padding-left:29px;line-height:1.65}.sf-help-steps li{margin:11px 0 17px;padding-left:5px;font-size:13px}.sf-help-steps b{font-size:15px;color:#c8682a}.sf-help-steps p{margin:5px 0;color:#6a7a8b}.sf-guide-note{border-radius:10px;padding:12px 15px;background:#f6f7f9;color:#718091;font-size:12px;line-height:1.6}.sf-guide-done{width:100%;margin-top:18px;font-size:14px}
|
|
@media(max-width:1330px){.studio-body{grid-template-columns:245px minmax(0,1fr) 305px}.sf-easy-top{gap:8px;padding:0 12px}.sf-easy-top .brand{min-width:100px}.sf-easy-file{max-width:148px}.sf-easy-device .icon-btn{padding:8px}}
|
|
@media(max-width:1060px){.studio-body{grid-template-columns:230px minmax(0,1fr)}.right-pane{position:fixed;right:0;top:115px;bottom:0;width:min(338px,92vw);display:flex!important;transform:translateX(106%);z-index:11;box-shadow:-10px 0 25px #1c2c4025}body.show-inspector .right-pane{transform:translateX(0)}.sf-easy-top .brand small,.sf-easy-save-status{display:none}.sf-easy-file{max-width:120px}.studio-top .ui-btn.ghost.sf-save-btn{display:inline-flex!important}.sf-steps{font-size:11px;gap:7px}}
|
|
@media(max-width:720px){.sf-steps{min-height:39px;padding:5px 10px;gap:5px}.sf-step-separator,.sf-step,.sf-steps-label{display:none}.sf-steps::before{content:'① 选内容 → ② 改文字与样式 → ③ 保存发布';font-weight:700;font-size:11px;color:#a4653b}.sf-guide-link{font-size:11px}.studio-body{grid-template-columns:minmax(0,1fr)}.left-pane{position:fixed;top:109px;bottom:0;left:0;width:min(315px,92vw);z-index:11;display:flex!important;transform:translateX(-106%);box-shadow:10px 0 25px #1c2c4020}body.show-structure .left-pane{transform:translateX(0)}.right-pane{top:109px}.sf-easy-top{height:70px;min-height:70px;padding-inline:8px}.sf-easy-top .brand,.sf-easy-file{display:none}.sf-easy-device{margin-left:0;margin-right:auto}.sf-easy-device .icon-btn{font-size:11px;padding:7px}.sf-save-btn,.sf-publish-btn{font-size:11px;padding:9px!important}.sf-easy-top .studio-actions summary{padding:9px 8px;font-size:11px}.sf-easy-top .studio-actions-menu{right:0}.pane-switcher{display:none}.stage{padding:9px 6px}.device-frame.phone,.device-frame.tablet{max-width:100%}}
|
|
@media(max-width:395px){.sf-easy-device .icon-btn{padding:6px;font-size:10px}.sf-guide-link{font-size:10px}.sf-save-btn{padding:8px 6px!important}.sf-publish-btn{padding:8px 6px!important}.sf-steps::before{content:'选区块 → 修改 → 保存发布';font-size:10px}}
|
|
/* Responsive panel toggle is always available on narrow screens. */
|
|
.sf-easy-top .sf-pane-controls{display:none;gap:5px}
|
|
@media(max-width:1060px){.sf-easy-top .sf-pane-controls{display:flex}.sf-easy-top .sf-pane-controls button{padding:7px 9px;font-size:11px;border:1px solid #e2e6ed;background:white;border-radius:8px}}
|
|
|
|
/* Accessible repeated-item forms for galleries, carousels, FAQs and features */
|
|
.sf-array-editor{display:grid;gap:10px}.sf-array-hint{font-size:11px;line-height:1.6;color:#8391a3;margin:0 0 4px}.sf-array-card{border:1px solid #e5eaf0;background:#fafbfd;padding:11px;border-radius:10px}.sf-array-card-head{display:flex;align-items:center;justify-content:space-between;gap:7px;margin-bottom:12px}.sf-array-card-head b{font-size:12px;color:#586a7f}.sf-array-card-head div{display:flex;gap:3px}.sf-array-card-head button{border:1px solid #e2e7ed;border-radius:5px;color:#6c7a8e;background:white;padding:4px 7px;font-size:11px}.sf-array-card-head button:last-child{color:#b95d62}.sf-array-card-head button:disabled{opacity:.3;cursor:not-allowed}.sf-array-field{display:block!important;margin:10px 0!important;font-size:11px!important;font-weight:650!important}.sf-array-field input,.sf-array-field textarea{display:block;width:100%;margin-top:5px;background:white}.sf-array-field textarea{min-height:65px}.sf-array-add{border:1px dashed #e5a77c;border-radius:9px;background:#fff8f2;color:#be672a;padding:13px 9px;font-size:12px;font-weight:800}
|
|
|
|
/* V8.22 canvas-level authoring with no change to published templates */
|
|
.sf-insert-hint{margin:8px 12px;padding:10px 12px;background:#fff3e8;color:#aa5525;font-size:12px;border:1px solid #f0bd98;border-radius:9px;line-height:1.6}
|
|
.sf-insert-hint[hidden]{display:none!important}
|
|
.preview-head .preview-note{max-width:350px;font-size:11px;color:#67778b}
|
|
#sitePreview:focus-visible{outline:2px solid #e77b37;outline-offset:2px}
|
|
|
|
/* V8.23 child-first layout inspector */
|
|
.sf-nested-edit{margin:5px 0 20px;display:grid;gap:9px}.sf-nested-card{border:1px solid #e3e9f0;border-radius:10px;padding:10px;background:#fbfcfd}.sf-nested-card.active{border-color:#42a8b9;background:#f2fbfd}.sf-nested-heading{display:flex;align-items:center;justify-content:space-between;gap:6px}.sf-nested-heading>button{border:0;background:none;font-size:12px;color:#36556e;font-weight:750;text-align:left;cursor:pointer}.sf-nested-heading span{display:flex;gap:4px}.sf-nested-heading span button,.sf-nested-actions button{border:1px solid #d8e4eb;background:white;border-radius:6px;padding:5px 9px;color:#36556e;cursor:pointer}.sf-nested-heading button:disabled{opacity:.3;cursor:not-allowed}.sf-nested-field{display:block;margin:10px 0;color:#536477;font-size:12px}.sf-nested-field input{display:block;margin-top:6px;width:100%;padding:10px;border:1px solid #d7e3e9;border-radius:7px;font-size:12px}.sf-nested-actions{display:flex;gap:6px;margin:10px 0 2px}.sf-nested-actions button:last-child{color:#b44549}.sf-layout-presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:9px 0 18px}.sf-layout-presets button{white-space:normal;padding:10px 5px;border:1px solid #e5b995;border-radius:8px;background:#fff8f3;color:#945325;font-size:11px;cursor:pointer}.sf-layout-presets button:disabled{opacity:.4;cursor:not-allowed}
|
|
|
|
/* V8.25: friendly shared-component management, scoped to editor only. */
|
|
.sf-shared-palette-row{border:1px solid #e4e8ef;background:white;border-radius:9px;padding:10px;display:grid;gap:8px;font-size:12px}
|
|
.sf-shared-palette-row strong{display:flex;justify-content:space-between;gap:7px}
|
|
.sf-shared-palette-row small{color:#8594a8}
|
|
.sf-shared-palette-row>div{display:flex;gap:7px}
|
|
.sf-shared-palette-row button,.sf-shared-actions button{border:1px solid #e0e4e9;border-radius:7px;background:#fff;padding:7px 9px;cursor:pointer;color:#364759}
|
|
.sf-shared-palette-row button:last-child{background:#fff3e8;color:#b95a23;border-color:#eac7ae}
|
|
.sf-shared-dialog{width:min(780px,96vw);max-height:88vh;overflow:auto;border:1px solid #e3e7ec;border-radius:16px;padding:24px;box-shadow:0 20px 60px #263a5430;color:#334155}
|
|
.sf-shared-dialog::backdrop{background:#0e203b70}
|
|
.sf-shared-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
|
|
.sf-shared-dialog h2{margin:5px 0 12px;font-size:22px}.sf-shared-dialog h3{margin:18px 0 10px}
|
|
.sf-shared-card{display:flex;justify-content:space-between;gap:14px;border:1px solid #e3e8ee;border-radius:10px;padding:13px;margin:10px 0;align-items:center}
|
|
.sf-shared-card>div:first-child{display:grid;gap:4px}.sf-shared-card small,.sf-shared-usage small{display:block;color:#64748b;font-size:11px;margin-top:5px}
|
|
.sf-shared-actions{display:flex;flex-wrap:wrap;gap:6px}
|
|
.sf-shared-usage{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #e2e7ed;border-radius:9px;margin:7px 0;cursor:pointer}
|
|
.sf-shared-usage:has(input:disabled){opacity:.6;cursor:not-allowed}
|
|
#sharedComponentDetail{margin-top:22px;border-top:1px solid #e2e7ed;padding-top:12px}
|
|
#sharedComponentDetail>.ui-btn{margin-top:14px}
|
|
@media(max-width:700px){.sf-shared-card{display:grid}.sf-shared-dialog{padding:15px}}
|
|
|
|
.sf-share-info{border:1px solid #f0cfb5;background:#fff8f1;padding:13px;border-radius:10px;margin:12px 0;color:#955023;font-size:12px}.sf-share-info p{line-height:1.5}
|
|
|
|
.sf-shared-history{display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px solid #edf0f4;padding:10px 0;font-size:12px;flex-wrap:wrap}
|
|
|
|
/* V8.26 global design navigation, review and restoration */
|
|
.sf-visual-nav{padding:15px;border:1px solid #e2e8f0;border-radius:12px;background:#fafcff}
|
|
.sf-visual-nav-header{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-bottom:12px}
|
|
.sf-visual-nav-header span,.sf-visual-nav-help{font-size:12px;color:#64748b}
|
|
.sf-nav-item{padding:8px;margin-bottom:6px;border:1px solid #dde5ed;background:#fff;border-radius:10px;display:flex;align-items:center;flex-wrap:wrap;gap:6px}
|
|
.sf-nav-item input{min-width:100px;flex:1 1 135px;padding:8px;border:1px solid #cbd5e1;border-radius:7px}
|
|
.sf-nav-action{font-size:12px!important;padding:6px 9px!important}
|
|
.sf-global-review{width:min(720px,95vw);max-height:85vh;overflow:auto;border:1px solid #dce5ed;border-radius:16px;padding:24px;box-shadow:0 18px 54px #132c4540}
|
|
.sf-review-change{padding:12px;border:1px solid #dfe6ee;border-radius:10px;margin:9px 0;background:#f9fbfe;overflow-wrap:anywhere}
|
|
.sf-review-change p{font-size:12px;color:#64748b;margin:7px 0;white-space:pre-wrap}
|
|
.sf-review-buttons{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
|
|
@media(max-width:600px){.sf-nav-item{margin-left:0!important}.sf-global-review{padding:16px}}
|
|
|
|
.sf-global-entry{display:flex;flex-direction:column;gap:6px;padding:12px;border:1px solid #f1d7bf;border-radius:10px;background:#fffaf5;margin-bottom:12px}.sf-global-entry button{font-weight:650;text-align:left}.sf-global-entry small{color:#876c56;font-size:11px}
|
|
|
|
/* V8.29: discoverable content palette and safe theme comparison */
|
|
.sf-palette-filter{display:flex;gap:6px;margin:12px 13px 6px}.sf-palette-filter input{min-width:0;flex:1;border:1px solid #d8e2ed;border-radius:9px;padding:10px;font-size:12px}.sf-palette-filter button{border:1px solid #dee6ee;border-radius:8px;background:#f7f9fc;color:#53657a;font-size:11px;padding:0 9px}.sf-palette-summary{font-size:11px;color:#657487;padding:2px 14px 9px}.sf-palette-categories{display:block;padding:0 12px 12px}.sf-palette-group{margin-bottom:12px}.sf-palette-group h4{font-size:12px;color:#4a5870;margin:6px 3px 9px;font-weight:700}.sf-palette-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.sf-palette-grid button{min-height:54px;border:1px solid #e3e9ef;background:white;padding:10px;border-radius:10px;display:flex;gap:8px;align-items:center;text-align:left;color:#35445b;font-size:12px;font-weight:600;line-height:1.4;cursor:pointer}.sf-palette-grid button:hover{background:#fff6ee;border-color:#e8a576}.sf-palette-grid button span{font-size:18px;flex-shrink:0;color:#b9652f}.sf-palette-empty{font-size:12px;color:#697b90;padding:10px}.sf-history-quick{border:1px solid #e0e6ed;background:white;color:#49596a;border-radius:8px;min-width:32px;height:34px;font-size:20px;cursor:pointer}.sf-history-quick:disabled{opacity:.35;cursor:not-allowed}.sf-theme-preview-entry{white-space:nowrap;color:#43576d}.sf-theme-showcase{width:min(1150px,96vw);height:min(94vh,900px);max-height:94vh;border:1px solid #dce3eb;border-radius:17px;overflow:auto;background:white;padding:0;box-shadow:0 25px 80px #10284148}.sf-theme-showcase::backdrop{background:#1424389c}.sf-showcase-head{display:flex;justify-content:space-between;align-items:start;gap:16px;padding:20px 24px 13px;border-bottom:1px solid #e5eaf0}.sf-showcase-head small{color:#b65c2d;font-weight:700}.sf-showcase-head h2{font-size:21px;margin:7px 0}.sf-showcase-head p{font-size:12px;color:#697b90;margin:0}.sf-showcase-tools{display:flex;gap:12px;align-items:end;flex-wrap:wrap;padding:14px 24px}.sf-showcase-tools label{display:grid;gap:5px;font-size:12px;font-weight:600;color:#43566c}.sf-showcase-tools select{border:1px solid #dce3ed;border-radius:8px;padding:9px 14px;min-width:145px;background:white}.sf-showcase-device{display:flex;gap:5px;margin-left:auto;background:#eef2f6;border-radius:8px;padding:4px}.sf-showcase-device button{padding:8px 12px;border:0;background:transparent;color:#596b7e;border-radius:6px;cursor:pointer}.sf-showcase-device button[aria-pressed=true]{background:#fff;color:#ad5c28;box-shadow:0 1px 6px #122c4419;font-weight:700}.sf-showcase-status{margin:0 24px 10px;color:#64748b;font-size:12px}.sf-showcase-stage{height:min(55vh,520px);overflow:auto;background:#eef1f5;padding:15px;display:flex;align-items:stretch;justify-content:center}.sf-showcase-frame{min-width:0;max-width:100%;height:100%;transition:width .18s ease;background:white;box-shadow:0 9px 30px #21334c20}.sf-showcase-frame iframe{display:block;width:100%;height:100%;min-height:0;border:0;background:white}.sf-showcase-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 24px;border-top:1px solid #e5eaf0}.sf-showcase-footer span{color:#718195;font-size:12px}.sf-theme-showcase button:focus-visible,.sf-theme-showcase select:focus-visible,.sf-palette-filter input:focus-visible,.sf-history-quick:focus-visible{outline:3px solid #eeab77;outline-offset:2px}@media(max-width:1100px){.sf-theme-preview-entry{font-size:11px;padding:8px!important}}@media(max-width:700px){.sf-theme-preview-entry{font-size:0;min-width:32px;padding:6px!important}.sf-theme-preview-entry::before{content:'◫';font-size:17px}.sf-showcase-head,.sf-showcase-tools,.sf-showcase-footer{padding:12px}.sf-showcase-stage{height:55vh;padding:8px}.sf-showcase-footer{flex-direction:column;align-items:start}.sf-showcase-device{margin-left:0}}@media(prefers-reduced-motion:reduce){.sf-showcase-frame{transition:none}}
|
|
|
|
.sf-style-presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:9px 0 17px}.sf-style-presets button{border:1px solid #dae2eb;border-radius:9px;background:#fff;padding:10px 5px;min-height:48px;font-size:11px;color:#364459;cursor:pointer}.sf-style-presets button:nth-child(2){background:#f0f3f8}.sf-style-presets button:nth-child(3){background:#26374d;color:#fff}.sf-style-presets button:focus-visible{outline:3px solid #efa971;outline-offset:2px}
|
|
/* Prevent translated, closed inspector drawers from widening the mobile viewport. */
|
|
@media(max-width:1060px){html,body{max-width:100%;overflow-x:clip}}
|
|
/* V8.29 mobile authoring: two deliberate toolbar rows, never horizontal-scrolling actions. */
|
|
@media(max-width:720px){
|
|
.studio-top.sf-easy-top{height:auto;min-height:100px;flex-wrap:wrap;justify-content:space-between;align-content:center;padding:7px 9px;gap:5px}
|
|
.studio-top.sf-easy-top .brand,.studio-top.sf-easy-top .file-name,.studio-top.sf-easy-top .sf-history-quick,.studio-top.sf-easy-top .sf-theme-preview-entry{display:none!important}
|
|
.studio-top.sf-easy-top .sf-pane-controls{order:1;flex:0 0 auto}
|
|
.studio-top.sf-easy-top #saveDraftButton{order:2;flex:0 0 auto}
|
|
.studio-top.sf-easy-top #publishDesignButton{order:3;flex:0 0 auto}
|
|
.studio-top.sf-easy-top .studio-actions{order:4;flex:0 0 auto}
|
|
.studio-top.sf-easy-top .sf-easy-device{order:5;flex:1 1 100%;display:flex;justify-content:center;margin:0}
|
|
.studio-top.sf-easy-top .sf-easy-device .icon-btn{flex:1;max-width:115px}
|
|
.studio-body .left-pane,.studio-body .right-pane{top:140px!important}
|
|
.studio-actions-menu{right:0;max-width:calc(100vw - 18px)}
|
|
}
|