From 6153c7f1454016213769bb32334eb5fc42fc33aa Mon Sep 17 00:00:00 2001 From: Root At Skic Date: Sun, 8 Nov 2026 20:35:48 +0200 Subject: [PATCH] 0.10.7: Model | Graph | Source styled like 2D | 3D Archify gives every toolbar button a 2.75rem minimum height and a painted ::before; the switch's segments are buttons, so they grew to full height. Segments now keep 1.75rem inside a 2.75rem switch, like 2D | 3D. The high contrast rule no longer turns a shared model's Sync button blue. --- CHANGELOG.md | 5 +++++ package-lock.json | 4 ++-- package.json | 2 +- src/webview/page.ts | 7 +++++-- 4 files changed, 13 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 77882ef..7669267 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,10 @@ # Changelog +## 0.10.7 — 2026-11-08 + +- **Model | Graph | Source looks like 2D | 3D.** The selected view is the same inset pill, the same height as the other toolbar controls. +- The Sync button of a shared model is green in high contrast themes too. + ## 0.10.6 — 2026-11-08 - **Sync sign-in comes back by itself.** The browser now returns the sign-in to a one-off port on this machine (`127.0.0.1`) instead of a `vscode://` link. Browsers open such links only after a click, so when you were already signed in to the identity provider the editor kept waiting. Remote and web editors still use the link. diff --git a/package-lock.json b/package-lock.json index 0a0a47e..5efdcf4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "archify-vscode-ext", - "version": "0.10.6", + "version": "0.10.7", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "archify-vscode-ext", - "version": "0.10.6", + "version": "0.10.7", "license": "MIT", "dependencies": { "@codemirror/autocomplete": "^6.20.4", diff --git a/package.json b/package.json index 692fcc4..724bbdf 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "archify-vscode-ext", "displayName": "Archify Diagram Viewer", "description": "Archify diagrams in VS Code. Write diagrams as .archify files in YAML: they open as the interactive diagram, with live updates, validation, templates and completion. Also previews Archify's own JSON files (*.architecture.json, …) and opens rendered Archify HTML.", - "version": "0.10.6", + "version": "0.10.7", "publisher": "root-at-skic", "license": "MIT", "sponsor": { diff --git a/src/webview/page.ts b/src/webview/page.ts index 3da6df2..f2ad321 100644 --- a/src/webview/page.ts +++ b/src/webview/page.ts @@ -940,7 +940,7 @@ function bridgeScript(options: PageOptions): string { + ' color: #fff !important; background: var(--vscode-button-background, #0e639c) !important; border: 1px solid var(--vscode-contrastBorder, transparent) !important;' + ' box-shadow: 0 1px 4px rgba(0,0,0,.35) !important; }' + ' #archify-sync-button.in-toolbar { position: relative !important; top: auto !important; right: auto !important; align-self: center !important; flex: none !important; width: 36px !important; height: 36px !important; }' - + ' body.vscode-high-contrast #archify-sync-button { background: #0e639c !important; }' + + ' body.vscode-high-contrast #archify-sync-button:not(.is-shared) { background: #0e639c !important; }' + ' #archify-sync-button svg { display: block !important; width: 16px !important; height: 16px !important; flex: none !important; }' + ' #archify-sync-button:hover { background: var(--vscode-button-hoverBackground, #1177bb) !important; }' + ' #archify-sync-button.is-shared { background: #1f8f5f !important; }' @@ -1073,10 +1073,13 @@ const MODEL_STYLE = ` /* The Model | Graph switch: in Archify's toolbar it is the 2D | 3D switch's twin; on the model page it sits top right. */ const SWITCH_STYLE = ` .archify-mode-switch { display: inline-flex; align-items: center; padding: 0 0.25rem; gap: 0; color: var(--text-muted, var(--vscode-descriptionForeground)); position: relative; } +.toolbar .archify-mode-switch { height: 2.75rem; box-sizing: border-box; } .toolbar .archify-mode-switch::before { content: ""; position: absolute; inset: 0.25rem 0; border-radius: 0.6875rem; background: color-mix(in srgb, var(--panel) 78%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--panel-border) 85%, transparent), 0 1px 2px rgba(15, 23, 42, 0.04); backdrop-filter: blur(12px); } .toolbar .archify-mode-switch:hover::before { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 22%, transparent), 0 1px 2px rgba(15, 23, 42, 0.04); } /* Anchored on the id: Archify's .toolbar button rules (one of them with :not(#btn-theme)) would win otherwise. */ -#archify-mode-switch .archify-mode-seg { position: relative; display: inline-flex; align-items: center; height: 1.75rem; padding: 0 0.7rem; border: 0; border-radius: 0.5rem; background: transparent; color: inherit; font: inherit; font-weight: 550; font-size: 0.8125rem; cursor: pointer; transition: background 0.15s, color 0.15s; } +#archify-mode-switch .archify-mode-seg { position: relative; display: inline-flex; align-items: center; height: 1.75rem; min-height: 0; margin: 0; padding: 0 0.7rem; border: 0; border-radius: 0.5rem; background: transparent; color: inherit; font: inherit; font-weight: 550; font-size: 0.8125rem; cursor: pointer; transition: background 0.15s, color 0.15s; } +/* Archify's toolbar buttons are 2.75rem tall with a painted ::before; the segments are not, like 2D | 3D. */ +#archify-mode-switch .archify-mode-seg::before, #archify-mode-switch .archify-mode-seg::after { content: none; } #archify-mode-switch .archify-mode-seg.on[aria-pressed="true"] { color: var(--bg, var(--vscode-editor-background)); background: var(--text, var(--vscode-foreground)); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12), 0 6px 16px -8px rgba(15, 23, 42, 0.4); } #archify-mode-switch .archify-mode-seg:hover:not(.on) { color: var(--text, var(--vscode-foreground)); } #archify-mode-switch .archify-mode-seg:focus-visible { outline: 2px solid var(--frontend-stroke, var(--vscode-focusBorder)); outline-offset: 1px; }