浅念
3c57c167f2
导入 SiteForge Factory V5 基线源码： - FastAPI + SQLite + Docker Compose（Web + Worker）架构 - 四套商业主题 × 14 页面模板（1.1.0，含历史版本快照） - 四种建站模式骨架 + 迁移审计 + 发布门禁 - 52 项 pytest 测试 - 补全计划主文档 docs/superpowers/plans/ Co-Authored-By: Claude Code <noreply@anthropic.com>
5 lines
7.9 KiB
CSS
5 lines
7.9 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}
|