8 lines
11 KiB
CSS
8 lines
11 KiB
CSS
.app{height:100dvh;min-height:580px;overflow:hidden;background:#f4f5f8;color:#30313b;font-family:Inter,-apple-system,BlinkMacSystemFont,'PingFang SC',sans-serif;font-size:12px}.app button{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:transparent;border:1px solid transparent;border-radius:7px;padding:8px;color:inherit;font:inherit;cursor:pointer}.app button:hover{background:#f0f0f6}.app button:disabled{opacity:.35;cursor:default}.app button:focus-visible,.app a:focus-visible{outline:2px solid #7762ed;outline-offset:2px}.app input,.app textarea{font:inherit;color:inherit;outline:none}.app input:focus,.app textarea:focus{border-color:#7a67ed!important}.top{height:64px;padding:0 20px;gap:14px;border-bottom:1px solid #e5e6ec;background:white;display:flex;white-space:nowrap}.top a:first-child{margin:0}.brand{font-size:20px;font-weight:650;display:flex;align-items:center;gap:9px;letter-spacing:-.6px}.brand>span:first-child{font-size:30px;color:#7160dc}.badge{font-size:9px;letter-spacing:1px;font-weight:500;margin-left:8px;color:#9696a6}.top>input{border:0;background:transparent;width:180px;padding:8px}.saved{margin-left:auto;font-size:11px;color:#9596a2}.saved:before{content:'●';color:#79a593;margin-right:7px}.app .primary{background:#7160df;color:white;padding:10px 15px}.app .primary:hover{background:#5c49c7}.account{max-width:160px;overflow:hidden;text-overflow:ellipsis}.body{display:grid;grid-template-columns:240px minmax(240px,1fr) 264px;height:calc(100% - 64px)}.left,.right{padding:0;background:#fff;border-right:1px solid #e4e5eb;display:flex;flex-direction:column;overflow:auto}.right{border-right:0;border-left:1px solid #e4e5eb}.tabs{display:flex;gap:5px;padding:16px;border-bottom:1px solid #ededf2}.tabs button{padding:7px 13px;color:#9596a3}.tabs button[aria-pressed=true]{color:#40364f;background:#f0eef9;font-weight:600}.pageTitle{display:flex;justify-content:space-between;padding:24px 20px 18px;font-size:11px}.pageTitle span:last-child{color:#a0a0ac;font-size:10px}.layers{flex:1}.layer{display:flex;margin:2px 8px;border-radius:6px}.layer[data-selected=true]{background:#edeafb;color:#6a51cf}.layer>button:first-child{flex:1;min-width:0;justify-content:start;padding:11px 8px}.layer span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer>button{padding:5px}.emptyLayers{text-align:center;padding:55px 10px;color:#9494a4}.emptyLayers>svg{margin:auto;color:#b0abbe}.emptyLayers p{margin-top:18px;font-size:12px}.emptyLayers small{font-size:10px;color:#aaaab7}.app .addLayer{margin:16px;border:1px dashed #dbd9e6;color:#8c889e}.leftFooter{margin-top:auto;padding:20px;border-top:1px solid #ededf2}.leftFooter a{display:flex;justify-content:space-between;font-size:11px}.leftFooter small{display:block;color:#a0a0ad;font-size:9px;margin-top:17px}.assets{padding:18px}.assets h3{font-size:12px;margin-bottom:20px}.assets button{border:1px solid #eeeef4;width:calc(50% - 8px);margin:4px;flex-direction:column;padding:18px 5px;gap:12px}.assets p{color:#999;line-height:1.8;margin-top:24px;font-size:11px}.viewport{position:relative;overflow:auto;display:flex;align-items:center;flex-direction:column;padding:38px 48px 100px;background-image:radial-gradient(#d8dae4 .7px,transparent .7px);background-size:16px 16px}.canvasLabel{width:100%;max-width:650px;color:#888a9b;font-size:10px;display:flex;justify-content:space-between;margin-bottom:14px}.boardWrap{flex-shrink:0;position:relative;margin:auto;box-shadow:0 8px 55px #292b4210,0 0 0 1px #e7e7ed}.board{position:relative;width:800px;height:1000px;transform-origin:top left;isolation:isolate}.element{position:absolute;touch-action:none;cursor:move;line-height:1.3;overflow:visible;outline:none;user-select:none}.element>img{width:100%;height:100%;object-fit:cover;pointer-events:none}.element[data-selected=true]{outline:2px solid #8b6ff1;z-index:1}.corner{position:absolute;width:9px;height:9px;border:2px solid #8b6ff1;background:white;right:-5px;bottom:-5px}.measure{position:absolute;left:50%;top:calc(100% + 12px);transform:translateX(-50%);font-size:13px;background:#8264e3;padding:4px 8px;color:white;white-space:nowrap;border-radius:4px}.blankHint{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#b2afbe;pointer-events:none}.blankHint h1{font-weight:400;font-size:27px;letter-spacing:2px;margin:30px 0 5px}.blankHint p{font-size:15px;color:#c0bec9}.blankHint button{pointer-events:auto;margin-top:25px;font-size:15px;color:#8678b3}.tools{position:fixed;bottom:28px;left:calc(50% - 12px);transform:translateX(-50%);display:flex;align-items:center;gap:3px;background:white;border:1px solid #e4e3ec;border-radius:14px;box-shadow:0 8px 30px #34324b12;padding:8px;z-index:5}.tools button{width:35px;height:36px}.tools button:first-child{background:#edeafa;color:#7560d7}.tools span{height:20px;border-left:1px solid #e8e7ee;margin:0 7px}.tools output{width:36px;text-align:center;font-size:11px}.inspectorTitle{display:flex;justify-content:space-between;padding:24px 20px;border-bottom:1px solid #ededf2;font-weight:600}.inspectorTitle span{font-size:10px;color:#a4a3ae;font-weight:400}.props{padding:22px 20px}.props h3{font-size:11px;margin:6px 0 17px}.props h3:not(:first-child){margin-top:28px}.props p{font-size:11px;color:#9694a2}.dimensions{display:flex;gap:18px;background:#f7f7fa;border-radius:6px;padding:12px;font-size:10px;color:#a09ba9;margin:18px 0 28px}.dimensions b{font-weight:400;color:#5d596b}.props label,.modal label{display:flex;flex-direction:column;gap:9px;font-size:11px;color:#7d788b}.props input:not([type=color]),.props textarea,.modal input{width:100%;padding:9px 10px;border:1px solid #e8e6ed;border-radius:6px;background:#fafafd}.props textarea{height:100px;resize:vertical;margin-bottom:18px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.props .color{display:flex;flex-direction:row;align-items:center;border:1px solid #e8e6ed;border-radius:6px;padding:6px 10px;font-size:10px}.color input{width:25px;height:25px;padding:0;border:0;background:none;margin-right:10px}.note{margin-top:45px;padding:30px 0;text-align:center;color:#aaa6b8;border-top:1px solid #eee}.note svg{margin:auto}.note p{line-height:1.9}.actions{display:flex;gap:8px;margin:25px 0}.actions button{border:1px solid #eee!important;flex:1}.rightFooter{margin-top:auto;padding:20px;border-top:1px solid #eee}.rightFooter button{font-size:11px}.rightFooter p{font-size:10px;color:#aaa6b3;line-height:1.8}.overlay{position:fixed;inset:0;background:#24213566;backdrop-filter:blur(5px);display:grid;place-items:center;z-index:20}.modal{background:white;width:min(440px,calc(100% - 32px));padding:38px;border-radius:18px;position:relative;box-shadow:0 20px 100px #15112633}.modal h2{font-size:25px;margin:18px 0 10px;letter-spacing:-.7px}.modal p{color:#8c879a;line-height:1.8}.modalIcon{color:#7860de;font-size:38px}.app .close{position:absolute;right:16px;top:16px}.modal .tabs{padding:14px 0;margin-bottom:22px}.modal form{display:grid;gap:18px}.modal small{font-size:10px;color:#9e97ae}.modal .primary{width:100%}@media(max-width:1100px){.body{grid-template-columns:190px minmax(200px,1fr) 220px}.saved,.badge{display:none}.top{gap:8px}.top>input{width:140px}.viewport{padding-left:25px;padding-right:25px}.tools{left:calc(50% - 15px)}}@media(max-width:760px){.body{grid-template-columns:1fr 200px}.left{display:none}.top{padding:0 10px}.top>input{width:110px}.brand{font-size:16px}.account{max-width:95px}.tools{left:calc(50% - 100px);gap:0;max-width:calc(100vw - 210px);flex-wrap:wrap;justify-content:center}.viewport{padding:25px 20px 120px}.top>svg,.top>button[title]{display:none}}@media(max-width:480px){.body{grid-template-columns:1fr}.right{display:none}.tools{left:50%;max-width:none;width:max-content}.top>input{width:85px}.top .primary{font-size:10px;padding:8px}.account{font-size:10px!important}.brand>span:first-child{font-size:24px}}
|
|
|
|
/* Compact design chrome, with a neutral stage and contextual selection. */
|
|
.app{background:#e5e5e5;color:#303030}.top{height:52px;border-color:#e5e5e5;padding:0 16px;gap:12px}.body{height:calc(100% - 52px);grid-template-columns:248px minmax(240px,1fr) 264px}.brand>span:first-child{color:#1685e8}.app .primary{background:#1685e8}.viewport{background:#e5e5e5;background-image:none;touch-action:none}.boardWrap{will-change:transform}.tabs{padding:10px;gap:4px}.tabs button{flex:1;padding:8px}.tabs button[aria-pressed=true]{background:#f0f0f0;color:#222}.canvasLabel{color:#888}.tools{bottom:16px;border-radius:13px;padding:7px;border-color:#ddd;box-shadow:0 3px 12px #0002}.tools button:first-child{background:transparent;color:inherit}.tools button[aria-pressed=true]{background:#1685e8;color:white}.element[data-selected=true]{outline-color:#1685e8}.corner{border-color:#1685e8;cursor:nwse-resize;width:11px;height:11px}.measure{background:#1685e8}.agentPanel{padding:30px 20px;display:flex;flex-direction:column;gap:18px}.agentPanel>svg{color:#1685e8}.agentPanel h3{font-size:15px;font-weight:500;margin:0}.agentPanel p,.agentPanel small{font-size:11px;line-height:1.9;color:#888}.agentPanel a{display:flex;gap:8px;align-items:center;font-size:12px;color:#1685e8}.agentPanel small{border-top:1px solid #eee;padding-top:20px}.layer[data-selected=true]{background:#e5f2ff}.pageTitle{border-bottom:1px solid #eee}.top .badge{color:#888}@media(max-width:1100px){.body{grid-template-columns:190px minmax(200px,1fr) 220px}}@media(max-width:760px){.body{grid-template-columns:1fr 200px}}@media(max-width:480px){.body{grid-template-columns:1fr}}
|
|
|
|
.app[data-layers=false] .left,.app[data-properties=false] .right{display:none}.app[data-layers=false] .body{grid-template-columns:minmax(240px,1fr) 264px}.app[data-properties=false] .body{grid-template-columns:248px minmax(240px,1fr)}.app[data-layers=false][data-properties=false] .body{grid-template-columns:1fr}.app[data-layers=false] .tools{left:calc((100% - 264px)/2)}.app[data-properties=false] .tools{left:calc(248px + (100% - 248px)/2)}.app[data-layers=false][data-properties=false] .tools{left:50%}@media(max-width:1100px){.app[data-layers=false] .body{grid-template-columns:minmax(200px,1fr) 220px}.app[data-properties=false] .body{grid-template-columns:190px minmax(200px,1fr)}.app[data-layers=false] .tools{left:calc((100% - 220px)/2)}.app[data-properties=false] .tools{left:calc(190px + (100% - 190px)/2)}}@media(max-width:760px){.app[data-layers=false] .body{grid-template-columns:1fr 200px}.app[data-properties=false] .body{grid-template-columns:1fr}.app[data-properties=false] .tools{left:50%;max-width:calc(100vw - 20px)}}@media(max-width:480px){.app[data-layers=false] .body{grid-template-columns:1fr}.app[data-layers=false] .tools{left:50%}}
|
|
@media(max-width:480px){.tools{max-width:calc(100vw - 24px);flex-wrap:wrap;justify-content:center}.top{gap:3px}.top>input{width:60px;min-width:0;flex:1}.brand{gap:4px}.account{max-width:55px}.top>button{padding:5px}.top .primary{padding:6px;font-size:9px;gap:4px}}
|