diff --git a/CHANGELOG.md b/CHANGELOG.md index 0bfc7a2..e7a4db5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,7 +1,8 @@ ## Unreleased - The browser interface's light scheme has real contrast: white panes on a - grey background, visible borders, near-black text and a blue accent. + grey background, visible borders, near-black text and a blue accent, + and its primary buttons use that blue. ## v0.1.0rc1 (2026-10-08) diff --git a/cli/src/mpftp/webui/app.css b/cli/src/mpftp/webui/app.css index b2dffc0..7797d7c 100644 --- a/cli/src/mpftp/webui/app.css +++ b/cli/src/mpftp/webui/app.css @@ -1,4 +1,4 @@ -.xterm{cursor:text;position:relative;user-select:none;-ms-user-select:none;-webkit-user-select:none}.xterm.focus,.xterm:focus{outline:none}.xterm .xterm-helpers{position:absolute;top:0;z-index:5}.xterm .xterm-helper-textarea{padding:0;border:0;margin:0;position:absolute;opacity:0;left:-9999em;top:0;width:0;height:0;z-index:-5;white-space:nowrap;overflow:hidden;resize:none}.xterm .composition-view{background:#000;color:#fff;display:none;position:absolute;white-space:nowrap;z-index:1}.xterm .composition-view.active{display:block}.xterm .xterm-viewport{background-color:#000;overflow-y:scroll;cursor:default;position:absolute;inset:0}.xterm .xterm-screen{position:relative}.xterm .xterm-screen canvas{position:absolute;left:0;top:0}.xterm-char-measure-element{display:inline-block;visibility:hidden;position:absolute;top:0;left:-9999em;line-height:normal}.xterm.enable-mouse-events{cursor:default}.xterm.xterm-cursor-pointer,.xterm .xterm-cursor-pointer{cursor:pointer}.xterm.column-select.focus{cursor:crosshair}.xterm .xterm-accessibility:not(.debug),.xterm .xterm-message{position:absolute;inset:0;z-index:10;color:transparent;pointer-events:none}.xterm .xterm-accessibility-tree:not(.debug) *::selection{color:transparent}.xterm .xterm-accessibility-tree{font-family:monospace;user-select:text;white-space:pre}.xterm .xterm-accessibility-tree>div{transform-origin:left;width:fit-content}.xterm .live-region{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}.xterm-dim{opacity:1!important}.xterm-underline-1{text-decoration:underline}.xterm-underline-2{text-decoration:double underline}.xterm-underline-3{text-decoration:wavy underline}.xterm-underline-4{text-decoration:dotted underline}.xterm-underline-5{text-decoration:dashed underline}.xterm-overline{text-decoration:overline}.xterm-overline.xterm-underline-1{text-decoration:overline underline}.xterm-overline.xterm-underline-2{text-decoration:overline double underline}.xterm-overline.xterm-underline-3{text-decoration:overline wavy underline}.xterm-overline.xterm-underline-4{text-decoration:overline dotted underline}.xterm-overline.xterm-underline-5{text-decoration:overline dashed underline}.xterm-strikethrough{text-decoration:line-through}.xterm-screen .xterm-decoration-container .xterm-decoration{z-index:6;position:absolute}.xterm-screen .xterm-decoration-container .xterm-decoration.xterm-decoration-top-layer{z-index:7}.xterm-decoration-overview-ruler{z-index:8;position:absolute;top:0;right:0;pointer-events:none}.xterm-decoration-top{z-index:2;position:relative}.xterm .xterm-scrollable-element>.scrollbar{cursor:default}.xterm .xterm-scrollable-element>.scrollbar>.scra{cursor:pointer;font-size:11px!important}.xterm .xterm-scrollable-element>.visible{opacity:1;background:#0000;transition:opacity .1s linear;z-index:11}.xterm .xterm-scrollable-element>.invisible{opacity:0;pointer-events:none}.xterm .xterm-scrollable-element>.invisible.fade{transition:opacity .8s linear}.xterm .xterm-scrollable-element>.shadow{position:absolute;display:none}.xterm .xterm-scrollable-element>.shadow.top{display:block;top:0;left:3px;height:3px;width:100%;box-shadow:var(--vscode-scrollbar-shadow, #000) 0 6px 6px -6px inset}.xterm .xterm-scrollable-element>.shadow.left{display:block;top:3px;left:0;height:100%;width:3px;box-shadow:var(--vscode-scrollbar-shadow, #000) 6px 0 6px -6px inset}.xterm .xterm-scrollable-element>.shadow.top-left-corner{display:block;top:0;left:0;height:3px;width:3px}.xterm .xterm-scrollable-element>.shadow.top.left{box-shadow:var(--vscode-scrollbar-shadow, #000) 6px 0 6px -6px inset}:root{--bg-app: #090d16;--bg-panel: #0f172a;--bg-panel-subtle: #1e293b;--bg-control: #1e293b;--bg-control-hover: #334155;--border-color: rgba(255, 255, 255, .1);--border-subtle: rgba(255, 255, 255, .06);--text-main: #f8fafc;--text-muted: #94a3b8;--text-subtle: #64748b;--accent: #f54e00;--accent-glow: rgba(245, 78, 0, .3);--accent-blue: #38bdf8;--accent-green: #34d399;--accent-red: #f87171;--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", Menlo, Monaco, Consolas, monospace;--header-height: 54px}[data-theme=light]{--bg-app: #ebebeb;--bg-panel: #ffffff;--bg-panel-subtle: #f5f5f5;--bg-control: #ffffff;--bg-control-hover: #e6e6e6;--border-color: #d1d1d1;--border-subtle: #e0e0e0;--text-main: #242424;--text-muted: #424242;--text-subtle: #616161;--accent: #0f6cbd;--accent-glow: rgba(15, 108, 189, .2)}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden;background-color:var(--bg-app);color:var(--text-main);font-family:var(--font-sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}.mp-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--bg-control);color:var(--text-main);border:1px solid var(--border-color);border-radius:8px;padding:6px 14px;font-family:inherit;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .15s cubic-bezier(.16,1,.3,1);outline:none}.mp-btn:hover:not(:disabled){background:var(--bg-control-hover);border-color:#ffffff40;transform:translateY(-1px)}.mp-btn:active:not(:disabled){transform:translateY(0)}.mp-btn:disabled{opacity:.5;cursor:default}.mp-btn-primary{background:linear-gradient(135deg,#f54e00,#ff6b26);color:#fff;border-color:#fff3;box-shadow:0 2px 10px var(--accent-glow)}.mp-btn-primary:hover:not(:disabled){background:linear-gradient(135deg,#ff6019,#ff7e42);box-shadow:0 4px 14px var(--accent-glow)}.mp-btn kbd{font-family:var(--font-mono);font-size:.72rem;background:#00000040;padding:2px 5px;border-radius:4px;opacity:.85;margin-left:4px}.mp-icon-btn{padding:6px 10px}.mp-icon-btn svg{width:16px;height:16px}.mp-workspace{display:flex;width:100%;height:100%;position:relative;overflow:hidden}.mp-editor-pane{flex:1 1 50%;min-width:280px;height:100%;display:flex;flex-direction:column;background:var(--bg-panel)}.mp-pane-header{height:36px;background:var(--bg-panel-subtle);border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;padding:0 14px;font-size:.8rem;font-weight:600;color:var(--text-muted);user-select:none;gap:8px}.mp-tab{display:flex;align-items:center;gap:6px;color:var(--text-main)}.mp-program{display:inline-flex;align-items:center;gap:6px;flex:1;min-width:0;color:var(--text-muted);font-size:.8rem;font-weight:600}.mp-program svg{flex:none;opacity:.75}.mp-program #program-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-mono)}.mp-program-dirty{display:inline-block;flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent)}.mp-program-dirty[hidden]{display:none}.mp-editor-container{flex:1;min-height:0;width:100%;position:relative}.mp-editor-container .cm-editor{height:100%;font-family:var(--font-mono);font-size:13px}.mp-editor-empty{height:100%;display:flex;align-items:center;justify-content:center;color:var(--text-subtle);font-size:.85rem;text-align:center;padding:24px}.mp-splitter-v{width:6px;background:var(--border-subtle);cursor:col-resize;position:relative;flex:none;transition:background .15s ease;z-index:40;touch-action:none}.mp-splitter-v:hover,.mp-splitter-v.is-dragging{background:var(--accent)}.mp-splitter-v:before{content:"";position:absolute;inset:0 -7px}.mp-splitter-h{height:6px;width:100%;background:var(--border-subtle);cursor:row-resize;position:relative;flex:none;transition:background .15s ease;z-index:40;touch-action:none}.mp-splitter-h:hover,.mp-splitter-h.is-dragging{background:var(--accent)}.mp-splitter-h:before{content:"";position:absolute;inset:-7px 0}.mp-console-pane{flex:1 1 45%;min-height:120px;display:flex;flex-direction:column;background:var(--bg-panel);border-top:1px solid var(--border-color)}.mp-terminal-body{flex:1;min-height:0;padding:8px 4px 8px 12px;overflow:hidden;background:#080c14}.mp-terminal-body .xterm{height:100%}.mp-terminal-body .xterm-viewport{overflow-y:auto;background:transparent!important}.mp-terminal-body .xterm-viewport::-webkit-scrollbar{width:10px}.mp-terminal-body .xterm-viewport::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:5px}[data-theme=light] .mp-terminal-body{background:#fff}.mp-dialog{margin:auto;width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:auto;padding:20px 22px;border:1px solid var(--border-color);border-radius:10px;background:var(--bg-panel);color:var(--text-main);font-family:var(--font-sans)}.mp-dialog::backdrop{background:#0000008c}.mp-dialog-title{margin:0 0 12px;font-size:17px}.mp-dialog-note,.mp-dialog-hint{margin:6px 0;font-size:13px;line-height:1.45}.mp-dialog-hint{color:var(--text-muted)}.mp-field{display:flex;flex-direction:column;gap:4px;margin:10px 0 4px;font-size:13px;color:var(--text-muted)}.mp-field input{padding:7px 9px;border:1px solid var(--border-color);border-radius:6px;background:var(--bg-control);color:var(--text-main);font-family:var(--font-mono);font-size:13px}.mp-check{display:flex;gap:8px;align-items:flex-start;margin:10px 0;font-size:13px;color:var(--text-muted)}.mp-fieldset{margin:0 0 12px;padding:8px 14px 12px;border:1px solid var(--border-subtle);border-radius:8px}.mp-fieldset legend{padding:0 6px;font-weight:600}.mp-fieldset:disabled{opacity:.55}.mp-ble-list{display:flex;flex-direction:column;gap:6px;margin:8px 0}.mp-ble-list .mp-btn{text-align:left}.mp-dialog-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:12px}.mp-diff{margin:10px 0;padding:10px 12px;max-height:260px;overflow:auto;border-radius:6px;background:var(--bg-app);font-family:var(--font-mono);font-size:12px;line-height:1.5;white-space:pre}.mp-diff .add{color:var(--accent-green)}.mp-diff .del{color:var(--accent-red)}.mp-main-pane{flex:0 0 60%;min-width:420px;height:100%;display:flex;flex-direction:column;background:var(--bg-app)}.mp-ftp-pane{flex:0 0 58%;min-height:180px;display:flex;flex-direction:column;overflow:hidden;background:var(--bg-panel)}.mp-ftp-pane .xfer{background:var(--bg-panel-subtle)}.mp-ftp-pane #app{flex:1;min-height:0;height:auto}.mp-editor-pane{flex:1 1 40%;border-left:1px solid var(--border-color)}.mp-tab .codicon{font-size:14px}:root{--vscode-font-family: var(--font-sans);--vscode-font-size: 13px;--vscode-editor-font-family: var(--font-mono);--vscode-foreground: var(--text-main);--vscode-descriptionForeground: var(--text-muted);--vscode-sideBar-background: var(--bg-panel);--vscode-sideBar-foreground: var(--text-main);--vscode-sideBarSectionHeader-background: var(--bg-panel-subtle);--vscode-sideBarSectionHeader-border: var(--border-color);--vscode-panel-border: var(--border-color);--vscode-button-background: var(--accent);--vscode-button-foreground: #ffffff;--vscode-button-secondaryBackground: var(--bg-control);--vscode-button-secondaryForeground: var(--text-main);--vscode-button-secondaryHoverBackground: var(--bg-control-hover);--vscode-list-hoverBackground: rgba(255, 255, 255, .05);--vscode-list-activeSelectionBackground: rgba(245, 78, 0, .3);--vscode-list-activeSelectionForeground: var(--text-main);--vscode-list-inactiveSelectionBackground: rgba(245, 78, 0, .18);--vscode-input-background: var(--bg-control);--vscode-input-border: var(--border-color);--vscode-focusBorder: var(--accent);--vscode-menu-background: var(--bg-panel-subtle);--vscode-menu-foreground: var(--text-main);--vscode-menu-border: var(--border-color);--vscode-menu-selectionBackground: var(--accent);--vscode-menu-selectionForeground: #ffffff;--vscode-menu-separatorBackground: var(--border-color);--vscode-badge-background: var(--bg-control);--vscode-charts-blue: var(--accent-blue);--vscode-charts-orange: var(--accent);--vscode-editorWarning-foreground: #fbbf24;--vscode-errorForeground: var(--accent-red);--vscode-testing-iconPassed: var(--accent-green);--vscode-statusBar-background: var(--bg-panel-subtle)}[data-theme=light]{--vscode-list-hoverBackground: #f5f5f5;--vscode-list-activeSelectionBackground: #e0e0e0;--vscode-list-inactiveSelectionBackground: #ebebeb;--vscode-input-background: #ffffff;--vscode-input-border: #c7c7c7;--vscode-menu-background: #ffffff;--vscode-badge-background: #e0e0e0;--vscode-editorWarning-foreground: #bc4b09;--vscode-errorForeground: #c50f1f;--vscode-testing-iconPassed: #107c10;--accent-blue: #0f6cbd;--accent-green: #107c10;--accent-red: #c50f1f}.mp-editor-header{padding:0 6px 0 0}.mp-editor-tabs{display:flex;align-items:stretch;flex:1;min-width:0;height:100%;overflow-x:auto;scrollbar-width:thin}.mp-editor-tab{display:inline-flex;align-items:center;gap:6px;padding:0 6px 0 12px;border-right:1px solid var(--border-color);color:var(--text-muted);font-family:var(--font-mono);font-size:12px;font-weight:500;white-space:nowrap;cursor:pointer}.mp-editor-tab.is-active{background:var(--bg-panel);color:var(--text-main);box-shadow:inset 0 -2px 0 var(--accent)}.mp-editor-tab[data-side=remote]:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-blue);flex:none}.mp-editor-tab-close{border:none;background:transparent;color:inherit;font-size:15px;line-height:1;padding:2px 5px;border-radius:4px;cursor:pointer;opacity:.6}.mp-editor-tab-close:hover{opacity:1;background:var(--bg-control-hover)}.mp-editor-bar{display:flex;align-items:center;gap:8px;padding:4px 8px 4px 14px;min-height:34px;border-bottom:1px solid var(--border-color);background:var(--bg-panel)}.mp-editor-where{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-mono);font-size:12px;color:var(--text-muted)}.mp-editor-bar .mp-btn{padding:3px 10px}.mp-btn-danger{background:var(--accent-red);box-shadow:none}.mp-toasts{position:fixed;right:16px;bottom:16px;z-index:2000;display:flex;flex-direction:column;gap:8px;max-width:min(440px,calc(100vw - 32px))}.mp-toast{padding:10px 14px;border:1px solid var(--border-color);border-left:3px solid var(--accent-blue);border-radius:8px;background:var(--bg-panel-subtle);color:var(--text-main);font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere;box-shadow:0 6px 24px #00000059;cursor:pointer}.mp-toast-warning{border-left-color:#fbbf24}.mp-toast-error{border-left-color:var(--accent-red)}.mp-device-list{display:flex;flex-direction:column;gap:6px;margin:4px 0 8px}.mp-device-group{margin-top:8px;font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}.mp-btn.mp-device{justify-content:space-between;text-align:left}.mp-device-name{font-family:var(--font-mono)}.mp-device-detail{color:inherit;opacity:.7;font-weight:400;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:880px){.mp-workspace{flex-direction:column;overflow-y:auto}.mp-splitter-v{display:none}.mp-main-pane{flex:none!important;min-width:0;height:85vh}.mp-editor-pane{flex:none!important;min-width:0;height:70vh;border-left:none;border-top:1px solid var(--border-color)}} +.xterm{cursor:text;position:relative;user-select:none;-ms-user-select:none;-webkit-user-select:none}.xterm.focus,.xterm:focus{outline:none}.xterm .xterm-helpers{position:absolute;top:0;z-index:5}.xterm .xterm-helper-textarea{padding:0;border:0;margin:0;position:absolute;opacity:0;left:-9999em;top:0;width:0;height:0;z-index:-5;white-space:nowrap;overflow:hidden;resize:none}.xterm .composition-view{background:#000;color:#fff;display:none;position:absolute;white-space:nowrap;z-index:1}.xterm .composition-view.active{display:block}.xterm .xterm-viewport{background-color:#000;overflow-y:scroll;cursor:default;position:absolute;inset:0}.xterm .xterm-screen{position:relative}.xterm .xterm-screen canvas{position:absolute;left:0;top:0}.xterm-char-measure-element{display:inline-block;visibility:hidden;position:absolute;top:0;left:-9999em;line-height:normal}.xterm.enable-mouse-events{cursor:default}.xterm.xterm-cursor-pointer,.xterm .xterm-cursor-pointer{cursor:pointer}.xterm.column-select.focus{cursor:crosshair}.xterm .xterm-accessibility:not(.debug),.xterm .xterm-message{position:absolute;inset:0;z-index:10;color:transparent;pointer-events:none}.xterm .xterm-accessibility-tree:not(.debug) *::selection{color:transparent}.xterm .xterm-accessibility-tree{font-family:monospace;user-select:text;white-space:pre}.xterm .xterm-accessibility-tree>div{transform-origin:left;width:fit-content}.xterm .live-region{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}.xterm-dim{opacity:1!important}.xterm-underline-1{text-decoration:underline}.xterm-underline-2{text-decoration:double underline}.xterm-underline-3{text-decoration:wavy underline}.xterm-underline-4{text-decoration:dotted underline}.xterm-underline-5{text-decoration:dashed underline}.xterm-overline{text-decoration:overline}.xterm-overline.xterm-underline-1{text-decoration:overline underline}.xterm-overline.xterm-underline-2{text-decoration:overline double underline}.xterm-overline.xterm-underline-3{text-decoration:overline wavy underline}.xterm-overline.xterm-underline-4{text-decoration:overline dotted underline}.xterm-overline.xterm-underline-5{text-decoration:overline dashed underline}.xterm-strikethrough{text-decoration:line-through}.xterm-screen .xterm-decoration-container .xterm-decoration{z-index:6;position:absolute}.xterm-screen .xterm-decoration-container .xterm-decoration.xterm-decoration-top-layer{z-index:7}.xterm-decoration-overview-ruler{z-index:8;position:absolute;top:0;right:0;pointer-events:none}.xterm-decoration-top{z-index:2;position:relative}.xterm .xterm-scrollable-element>.scrollbar{cursor:default}.xterm .xterm-scrollable-element>.scrollbar>.scra{cursor:pointer;font-size:11px!important}.xterm .xterm-scrollable-element>.visible{opacity:1;background:#0000;transition:opacity .1s linear;z-index:11}.xterm .xterm-scrollable-element>.invisible{opacity:0;pointer-events:none}.xterm .xterm-scrollable-element>.invisible.fade{transition:opacity .8s linear}.xterm .xterm-scrollable-element>.shadow{position:absolute;display:none}.xterm .xterm-scrollable-element>.shadow.top{display:block;top:0;left:3px;height:3px;width:100%;box-shadow:var(--vscode-scrollbar-shadow, #000) 0 6px 6px -6px inset}.xterm .xterm-scrollable-element>.shadow.left{display:block;top:3px;left:0;height:100%;width:3px;box-shadow:var(--vscode-scrollbar-shadow, #000) 6px 0 6px -6px inset}.xterm .xterm-scrollable-element>.shadow.top-left-corner{display:block;top:0;left:0;height:3px;width:3px}.xterm .xterm-scrollable-element>.shadow.top.left{box-shadow:var(--vscode-scrollbar-shadow, #000) 6px 0 6px -6px inset}:root{--bg-app: #090d16;--bg-panel: #0f172a;--bg-panel-subtle: #1e293b;--bg-control: #1e293b;--bg-control-hover: #334155;--border-color: rgba(255, 255, 255, .1);--border-subtle: rgba(255, 255, 255, .06);--text-main: #f8fafc;--text-muted: #94a3b8;--text-subtle: #64748b;--accent: #f54e00;--accent-glow: rgba(245, 78, 0, .3);--accent-blue: #38bdf8;--accent-green: #34d399;--accent-red: #f87171;--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", Menlo, Monaco, Consolas, monospace;--header-height: 54px}[data-theme=light]{--bg-app: #ebebeb;--bg-panel: #ffffff;--bg-panel-subtle: #f5f5f5;--bg-control: #ffffff;--bg-control-hover: #e6e6e6;--border-color: #d1d1d1;--border-subtle: #e0e0e0;--text-main: #242424;--text-muted: #424242;--text-subtle: #616161;--accent: #0f6cbd;--accent-glow: rgba(15, 108, 189, .2)}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden;background-color:var(--bg-app);color:var(--text-main);font-family:var(--font-sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}.mp-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--bg-control);color:var(--text-main);border:1px solid var(--border-color);border-radius:8px;padding:6px 14px;font-family:inherit;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .15s cubic-bezier(.16,1,.3,1);outline:none}.mp-btn:hover:not(:disabled){background:var(--bg-control-hover);border-color:#ffffff40;transform:translateY(-1px)}.mp-btn:active:not(:disabled){transform:translateY(0)}.mp-btn:disabled{opacity:.5;cursor:default}.mp-btn-primary{background:linear-gradient(135deg,#f54e00,#ff6b26);color:#fff;border-color:#fff3;box-shadow:0 2px 10px var(--accent-glow)}.mp-btn-primary:hover:not(:disabled){background:linear-gradient(135deg,#ff6019,#ff7e42);box-shadow:0 4px 14px var(--accent-glow)}[data-theme=light] .mp-btn-primary{background:var(--accent);border-color:var(--accent);box-shadow:none}[data-theme=light] .mp-btn-primary:hover:not(:disabled){background:#115ea3;box-shadow:none}.mp-btn kbd{font-family:var(--font-mono);font-size:.72rem;background:#00000040;padding:2px 5px;border-radius:4px;opacity:.85;margin-left:4px}.mp-icon-btn{padding:6px 10px}.mp-icon-btn svg{width:16px;height:16px}.mp-workspace{display:flex;width:100%;height:100%;position:relative;overflow:hidden}.mp-editor-pane{flex:1 1 50%;min-width:280px;height:100%;display:flex;flex-direction:column;background:var(--bg-panel)}.mp-pane-header{height:36px;background:var(--bg-panel-subtle);border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;padding:0 14px;font-size:.8rem;font-weight:600;color:var(--text-muted);user-select:none;gap:8px}.mp-tab{display:flex;align-items:center;gap:6px;color:var(--text-main)}.mp-program{display:inline-flex;align-items:center;gap:6px;flex:1;min-width:0;color:var(--text-muted);font-size:.8rem;font-weight:600}.mp-program svg{flex:none;opacity:.75}.mp-program #program-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-mono)}.mp-program-dirty{display:inline-block;flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent)}.mp-program-dirty[hidden]{display:none}.mp-editor-container{flex:1;min-height:0;width:100%;position:relative}.mp-editor-container .cm-editor{height:100%;font-family:var(--font-mono);font-size:13px}.mp-editor-empty{height:100%;display:flex;align-items:center;justify-content:center;color:var(--text-subtle);font-size:.85rem;text-align:center;padding:24px}.mp-splitter-v{width:6px;background:var(--border-subtle);cursor:col-resize;position:relative;flex:none;transition:background .15s ease;z-index:40;touch-action:none}.mp-splitter-v:hover,.mp-splitter-v.is-dragging{background:var(--accent)}.mp-splitter-v:before{content:"";position:absolute;inset:0 -7px}.mp-splitter-h{height:6px;width:100%;background:var(--border-subtle);cursor:row-resize;position:relative;flex:none;transition:background .15s ease;z-index:40;touch-action:none}.mp-splitter-h:hover,.mp-splitter-h.is-dragging{background:var(--accent)}.mp-splitter-h:before{content:"";position:absolute;inset:-7px 0}.mp-console-pane{flex:1 1 45%;min-height:120px;display:flex;flex-direction:column;background:var(--bg-panel);border-top:1px solid var(--border-color)}.mp-terminal-body{flex:1;min-height:0;padding:8px 4px 8px 12px;overflow:hidden;background:#080c14}.mp-terminal-body .xterm{height:100%}.mp-terminal-body .xterm-viewport{overflow-y:auto;background:transparent!important}.mp-terminal-body .xterm-viewport::-webkit-scrollbar{width:10px}.mp-terminal-body .xterm-viewport::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:5px}[data-theme=light] .mp-terminal-body{background:#fff}.mp-dialog{margin:auto;width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:auto;padding:20px 22px;border:1px solid var(--border-color);border-radius:10px;background:var(--bg-panel);color:var(--text-main);font-family:var(--font-sans)}.mp-dialog::backdrop{background:#0000008c}.mp-dialog-title{margin:0 0 12px;font-size:17px}.mp-dialog-note,.mp-dialog-hint{margin:6px 0;font-size:13px;line-height:1.45}.mp-dialog-hint{color:var(--text-muted)}.mp-field{display:flex;flex-direction:column;gap:4px;margin:10px 0 4px;font-size:13px;color:var(--text-muted)}.mp-field input{padding:7px 9px;border:1px solid var(--border-color);border-radius:6px;background:var(--bg-control);color:var(--text-main);font-family:var(--font-mono);font-size:13px}.mp-check{display:flex;gap:8px;align-items:flex-start;margin:10px 0;font-size:13px;color:var(--text-muted)}.mp-fieldset{margin:0 0 12px;padding:8px 14px 12px;border:1px solid var(--border-subtle);border-radius:8px}.mp-fieldset legend{padding:0 6px;font-weight:600}.mp-fieldset:disabled{opacity:.55}.mp-ble-list{display:flex;flex-direction:column;gap:6px;margin:8px 0}.mp-ble-list .mp-btn{text-align:left}.mp-dialog-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:12px}.mp-diff{margin:10px 0;padding:10px 12px;max-height:260px;overflow:auto;border-radius:6px;background:var(--bg-app);font-family:var(--font-mono);font-size:12px;line-height:1.5;white-space:pre}.mp-diff .add{color:var(--accent-green)}.mp-diff .del{color:var(--accent-red)}.mp-main-pane{flex:0 0 60%;min-width:420px;height:100%;display:flex;flex-direction:column;background:var(--bg-app)}.mp-ftp-pane{flex:0 0 58%;min-height:180px;display:flex;flex-direction:column;overflow:hidden;background:var(--bg-panel)}.mp-ftp-pane .xfer{background:var(--bg-panel-subtle)}.mp-ftp-pane #app{flex:1;min-height:0;height:auto}.mp-editor-pane{flex:1 1 40%;border-left:1px solid var(--border-color)}.mp-tab .codicon{font-size:14px}:root{--vscode-font-family: var(--font-sans);--vscode-font-size: 13px;--vscode-editor-font-family: var(--font-mono);--vscode-foreground: var(--text-main);--vscode-descriptionForeground: var(--text-muted);--vscode-sideBar-background: var(--bg-panel);--vscode-sideBar-foreground: var(--text-main);--vscode-sideBarSectionHeader-background: var(--bg-panel-subtle);--vscode-sideBarSectionHeader-border: var(--border-color);--vscode-panel-border: var(--border-color);--vscode-button-background: var(--accent);--vscode-button-foreground: #ffffff;--vscode-button-secondaryBackground: var(--bg-control);--vscode-button-secondaryForeground: var(--text-main);--vscode-button-secondaryHoverBackground: var(--bg-control-hover);--vscode-list-hoverBackground: rgba(255, 255, 255, .05);--vscode-list-activeSelectionBackground: rgba(245, 78, 0, .3);--vscode-list-activeSelectionForeground: var(--text-main);--vscode-list-inactiveSelectionBackground: rgba(245, 78, 0, .18);--vscode-input-background: var(--bg-control);--vscode-input-border: var(--border-color);--vscode-focusBorder: var(--accent);--vscode-menu-background: var(--bg-panel-subtle);--vscode-menu-foreground: var(--text-main);--vscode-menu-border: var(--border-color);--vscode-menu-selectionBackground: var(--accent);--vscode-menu-selectionForeground: #ffffff;--vscode-menu-separatorBackground: var(--border-color);--vscode-badge-background: var(--bg-control);--vscode-charts-blue: var(--accent-blue);--vscode-charts-orange: var(--accent);--vscode-editorWarning-foreground: #fbbf24;--vscode-errorForeground: var(--accent-red);--vscode-testing-iconPassed: var(--accent-green);--vscode-statusBar-background: var(--bg-panel-subtle)}[data-theme=light]{--vscode-list-hoverBackground: #f5f5f5;--vscode-list-activeSelectionBackground: #e0e0e0;--vscode-list-inactiveSelectionBackground: #ebebeb;--vscode-input-background: #ffffff;--vscode-input-border: #c7c7c7;--vscode-menu-background: #ffffff;--vscode-badge-background: #e0e0e0;--vscode-editorWarning-foreground: #bc4b09;--vscode-errorForeground: #c50f1f;--vscode-testing-iconPassed: #107c10;--accent-blue: #0f6cbd;--accent-green: #107c10;--accent-red: #c50f1f}.mp-editor-header{padding:0 6px 0 0}.mp-editor-tabs{display:flex;align-items:stretch;flex:1;min-width:0;height:100%;overflow-x:auto;scrollbar-width:thin}.mp-editor-tab{display:inline-flex;align-items:center;gap:6px;padding:0 6px 0 12px;border-right:1px solid var(--border-color);color:var(--text-muted);font-family:var(--font-mono);font-size:12px;font-weight:500;white-space:nowrap;cursor:pointer}.mp-editor-tab.is-active{background:var(--bg-panel);color:var(--text-main);box-shadow:inset 0 -2px 0 var(--accent)}.mp-editor-tab[data-side=remote]:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-blue);flex:none}.mp-editor-tab-close{border:none;background:transparent;color:inherit;font-size:15px;line-height:1;padding:2px 5px;border-radius:4px;cursor:pointer;opacity:.6}.mp-editor-tab-close:hover{opacity:1;background:var(--bg-control-hover)}.mp-editor-bar{display:flex;align-items:center;gap:8px;padding:4px 8px 4px 14px;min-height:34px;border-bottom:1px solid var(--border-color);background:var(--bg-panel)}.mp-editor-where{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-mono);font-size:12px;color:var(--text-muted)}.mp-editor-bar .mp-btn{padding:3px 10px}.mp-btn-danger{background:var(--accent-red);box-shadow:none}.mp-toasts{position:fixed;right:16px;bottom:16px;z-index:2000;display:flex;flex-direction:column;gap:8px;max-width:min(440px,calc(100vw - 32px))}.mp-toast{padding:10px 14px;border:1px solid var(--border-color);border-left:3px solid var(--accent-blue);border-radius:8px;background:var(--bg-panel-subtle);color:var(--text-main);font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere;box-shadow:0 6px 24px #00000059;cursor:pointer}.mp-toast-warning{border-left-color:#fbbf24}.mp-toast-error{border-left-color:var(--accent-red)}.mp-device-list{display:flex;flex-direction:column;gap:6px;margin:4px 0 8px}.mp-device-group{margin-top:8px;font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}.mp-btn.mp-device{justify-content:space-between;text-align:left}.mp-device-name{font-family:var(--font-mono)}.mp-device-detail{color:inherit;opacity:.7;font-weight:400;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:880px){.mp-workspace{flex-direction:column;overflow-y:auto}.mp-splitter-v{display:none}.mp-main-pane{flex:none!important;min-width:0;height:85vh}.mp-editor-pane{flex:none!important;min-width:0;height:70vh;border-left:none;border-top:1px solid var(--border-color)}} /*! Bundled license information: @xterm/xterm/css/xterm.css: diff --git a/ui/src/style.css b/ui/src/style.css index 635a3a7..76ce044 100644 --- a/ui/src/style.css +++ b/ui/src/style.css @@ -107,6 +107,18 @@ body { box-shadow: 0 4px 14px var(--accent-glow); } +/* Light: a flat accent button, as Fluent draws its primary buttons. */ +[data-theme="light"] .mp-btn-primary { + background: var(--accent); + border-color: var(--accent); + box-shadow: none; +} + +[data-theme="light"] .mp-btn-primary:hover:not(:disabled) { + background: #115ea3; + box-shadow: none; +} + .mp-btn kbd { font-family: var(--font-mono); font-size: 0.72rem;