Zayden-Jung/probably-rendering-one-more-pixel-tonight
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make graphic panels collapsible and fix hand panning over layers
creative workspace review checks / verify (pull_request) Has been cancelled
Details

Browse Source
This commit is contained in:
Codex Bot
2026-10-30 14:28:28 +08:00
parent d362e1a975
commit 4791729b65
4 changed files with 17 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/studio/src/styles/graphic.module.css
+2
View File
@@ -2,3 +2,5 @@
/* 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%}}