59 lines
5.6 KiB
CSS
59 lines
5.6 KiB
CSS
:root { color-scheme: light; --ink: #25372f; --muted: #7a827e; --line: #dde1dc; --cream: #f6f4ee; --paper: #fffefa; --green: #315542; --red: #ff2442; }
|
|
* { box-sizing: border-box; }
|
|
html, body { margin: 0; min-height: 100%; background: var(--cream); color: var(--ink); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif; }
|
|
button, textarea, input { font: inherit; }
|
|
button, a { -webkit-tap-highlight-color: transparent; }
|
|
button { cursor: pointer; }
|
|
.studio-shell { min-height: 100vh; }
|
|
.topbar { height: 66px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; background: var(--paper); border-bottom: 1px solid var(--line); }
|
|
.topbar > div { display: flex; align-items: center; gap: 10px; }
|
|
.topbar small { color: var(--muted); padding-left: 10px; border-left: 1px solid var(--line); }
|
|
.logo { width: 31px; height: 31px; display: grid; place-items: center; color: white; background: var(--red); border-radius: 10px; font-weight: 800; }
|
|
.actions a, .actions button, .panel-head button, .command-grid button { border: 1px solid var(--line); background: white; color: var(--ink); border-radius: 8px; padding: 9px 13px; text-decoration: none; }
|
|
.actions button, .command-grid .primary { color: white; background: var(--green); border-color: var(--green); }
|
|
.workspace { display: grid; grid-template-columns: 190px minmax(330px, 1fr) minmax(330px, 430px) 290px; height: calc(100vh - 66px); }
|
|
.sidebar, .editor-panel, .preview-panel, .inspect-panel { min-width: 0; border-right: 1px solid var(--line); background: var(--paper); }
|
|
.sidebar, .inspect-panel { padding: 18px 12px; overflow-y: auto; }
|
|
.section-label { margin: 0 8px 10px; color: #929995; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
|
|
.files-label { margin-top: 28px; }
|
|
.project-row, .file-row, .empty-project { width: 100%; border: 0; background: transparent; border-radius: 8px; text-align: left; padding: 10px; color: #526059; }
|
|
.project-row { display: flex; justify-content: space-between; gap: 8px; }
|
|
.project-row small { color: #9aa19d; }
|
|
.project-row.selected, .file-row.selected { background: #e8eee9; color: var(--green); font-weight: 650; }
|
|
.file-row { padding: 7px 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
|
|
.empty-project { border: 1px dashed #bbc4be; text-align: center; }
|
|
.editor-panel, .preview-panel { display: flex; flex-direction: column; background: #eef0ec; }
|
|
.panel-head { height: 58px; flex: 0 0 auto; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; background: var(--paper); border-bottom: 1px solid var(--line); }
|
|
.panel-head div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
|
|
.panel-head strong, .panel-head small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.panel-head small { color: var(--muted); font-size: 10px; }
|
|
.editor-panel textarea { flex: 1; resize: none; border: 0; outline: none; padding: 20px; background: #17201c; color: #dce9df; font: 12px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; tab-size: 2; }
|
|
.statusbar { height: 32px; background: white; border-top: 1px solid var(--line); color: var(--muted); display: flex; align-items: center; gap: 7px; padding: 0 12px; font-size: 11px; }
|
|
.ok-dot, .error-dot { width: 7px; height: 7px; border-radius: 50%; background: #54a56d; }
|
|
.error-dot { background: #d95454; }
|
|
.preview-panel { align-items: center; overflow: auto; }
|
|
.preview-panel .panel-head { width: 100%; }
|
|
.phone { position: relative; flex: 0 0 auto; width: 330px; height: 660px; margin: 24px; padding: 12px 8px 8px; background: #202622; border: 4px solid #3b423e; border-radius: 37px; box-shadow: 0 16px 45px rgba(28, 45, 37, .18); }
|
|
.phone iframe { width: 100%; height: 100%; border: 0; border-radius: 25px; background: white; }
|
|
.speaker { position: absolute; z-index: 2; top: 6px; left: 50%; width: 55px; height: 5px; transform: translateX(-50%); border-radius: 5px; background: #090b0a; }
|
|
.inspect-panel { border-right: 0; }
|
|
.command-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
|
|
.command-grid button { font-size: 12px; padding: 10px 4px; }
|
|
.report, .report-placeholder, .agent-note { margin-top: 18px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #fafbf8; }
|
|
.report { display: flex; flex-direction: column; gap: 5px; }
|
|
.report.passed { border-color: #b9d4bf; background: #f2f8f2; }
|
|
.report.failed { border-color: #e1bcbc; background: #fff7f6; }
|
|
.report > small, .report article span { color: var(--muted); font-size: 10px; }
|
|
.report pre { margin: 9px 0; white-space: pre-wrap; font-size: 10px; }
|
|
.report article { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 6px; }
|
|
.report article b { display: block; color: #bd4545; font-size: 11px; }
|
|
.report article p { font-size: 12px; margin: 7px 0; }
|
|
.report-placeholder { color: var(--muted); text-align: center; font-size: 12px; line-height: 1.7; }
|
|
.report-placeholder span { display: inline-grid; place-items: center; width: 35px; height: 35px; border: 1px solid #bbccc1; border-radius: 50%; color: var(--green); }
|
|
.agent-note { margin-top: 26px; background: #eef2ee; border: 0; }
|
|
.agent-note strong { font-size: 12px; }
|
|
.agent-note p { color: #68736d; font-size: 11px; line-height: 1.7; }
|
|
button:disabled { cursor: not-allowed; opacity: .55; }
|
|
@media (max-width: 1180px) { .workspace { grid-template-columns: 170px minmax(320px, 1fr) 380px; } .inspect-panel { display: none; } }
|
|
@media (max-width: 820px) { .workspace { grid-template-columns: 150px 1fr; } .preview-panel { display: none; } .topbar small { display: none; } }
|