root-at-skic
c71d2e40b9
The toolbar button next to Export is now a two-state switch: both labels are visible and the filled half is the current view, so a diagram that opens in 2D shows "2D" and one click flips it to 3D. The dropdown is gone; nothing is greyed out and no menu stays open after a choice. The 3D-only controls moved to Archify's bottom-right dock beside PATH and LENS: STACK (levels by kind, on or off), TOP (from above), and the zoom stepper's middle button reads RESET while 3D is on, instead of a 2D zoom level that meant nothing there.
42 lines
4.5 KiB
TypeScript
42 lines
4.5 KiB
TypeScript
/** Styles for the 3D mode; they reuse Archify's tokens so every preset fits. */
|
|
export const STYLE = `
|
|
.diagram-container { position: relative; }
|
|
/* The 2D SVG stays in the page (its styles and animations drive the 3D
|
|
view) but is not painted while 3D is on. */
|
|
html.archify-3d-on .diagram-container > svg { visibility: hidden !important; pointer-events: none !important; }
|
|
html.archify-3d-on .diagram-container { min-height: max(420px, 62vh); }
|
|
.archify-3d-stage { position: absolute; inset: 0; z-index: 1; border-radius: inherit; overflow: hidden; }
|
|
.archify-3d-stage canvas { display: block; touch-action: none; cursor: grab; }
|
|
.archify-3d-stage canvas:active { cursor: grabbing; }
|
|
html.archify-3d-on .diagram-container > :not(svg):not(.archify-3d-stage) { z-index: 2; }
|
|
|
|
/* 2D | 3D switch: Export's twin. Both states visible, the filled half is current. */
|
|
.toolbar #btn-3d { padding: 0 0.25rem; gap: 0; color: var(--text-muted); }
|
|
.toolbar #btn-3d::before { 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 #btn-3d: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); }
|
|
.toolbar #btn-3d[aria-checked] { color: var(--text-muted); }
|
|
.archify-3d-seg { display: inline-flex; align-items: center; height: 1.75rem; padding: 0 0.7rem; border-radius: 0.5rem; font-weight: 550; transition: background 0.15s, color 0.15s; }
|
|
.archify-3d-seg.on { color: var(--bg); background: var(--text); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12), 0 6px 16px -8px rgba(15, 23, 42, 0.4); }
|
|
.toolbar #btn-3d:hover .archify-3d-seg:not(.on) { color: var(--text); }
|
|
|
|
/* 3D-only controls in the bottom-right dock, in Archify's mode-button style. */
|
|
.diagram-nav #btn-3d-stack,
|
|
.diagram-nav #btn-3d-top { display: inline-flex; align-items: center; gap: 0.375rem; min-width: auto; padding-inline: 0.55rem 0.65rem; color: var(--text-muted); font-weight: 500; }
|
|
.diagram-nav #btn-3d-stack[hidden],
|
|
.diagram-nav #btn-3d-top[hidden] { display: none; }
|
|
.diagram-nav #btn-3d-stack { position: relative; margin-left: 0.375rem; }
|
|
.diagram-nav #btn-3d-stack::after { position: absolute; top: 0.55rem; bottom: 0.55rem; left: -0.19rem; width: 1px; background: color-mix(in srgb, var(--panel-border) 90%, transparent); content: ""; pointer-events: none; }
|
|
.diagram-nav #btn-3d-stack::before,
|
|
.diagram-nav #btn-3d-top::before { flex: none; width: 0.875rem; height: 0.875rem; background: currentColor; content: ""; opacity: 0.85; -webkit-mask: var(--nav-glyph) center / contain no-repeat; mask: var(--nav-glyph) center / contain no-repeat; }
|
|
.diagram-nav #btn-3d-stack { --nav-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M10 2.5 17.5 6.3 10 10 2.5 6.3z'/%3E%3Cpath d='m2.5 10 7.5 3.8 7.5-3.8M2.5 13.7 10 17.5l7.5-3.8'/%3E%3C/g%3E%3C/svg%3E"); }
|
|
.diagram-nav #btn-3d-top { --nav-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2.5v9M6.5 8l3.5 3.5L13.5 8'/%3E%3Cpath d='M3 14.5h14M5 17.5h10'/%3E%3C/g%3E%3C/svg%3E"); }
|
|
.diagram-nav #btn-3d-stack[aria-pressed="true"] { color: var(--text); background: color-mix(in srgb, var(--frontend-stroke) 14%, transparent); }
|
|
/* The stepper's middle button shows the 2D zoom level; in 3D it is the reset. */
|
|
.archify-3d-reset { display: none; color: var(--text-muted); font-size: 0.75rem; font-weight: 500; }
|
|
html.archify-3d-on .diagram-nav [data-view="reset"] > :not(.archify-3d-reset) { display: none !important; }
|
|
html.archify-3d-on .archify-3d-reset { display: inline; }
|
|
.toolbar .export-menu button[data-archify3d-export]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2.5l7 4v7l-7 4-7-4v-7z'/%3E%3Cpath d='M3 6.5l7 4 7-4M10 10.5v7'/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2.5l7 4v7l-7 4-7-4v-7z'/%3E%3Cpath d='M3 6.5l7 4 7-4M10 10.5v7'/%3E%3C/g%3E%3C/svg%3E"); }
|
|
|
|
`;
|