pcb-scene3d-viewer 1.0.1

package/src/styles/scene3d.css

@@ -0,0 +1,295 @@
+.scene-3d {
+    display: grid;
+    grid-template-rows:
+        auto auto minmax(clamp(520px, 62vh, 760px), 1fr)
+        auto auto;
+    gap: 1.2rem;
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+}
+
+body.is-viewer-mode.is-viewer-3d .scene-3d {
+    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
+}
+
+.scene-3d__toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.55rem;
+}
+
+.scene-3d__preset {
+    border: 1px solid rgba(95, 112, 124, 0.16);
+    border-radius: 999px;
+    padding: 0.55rem 0.9rem;
+    background: rgba(255, 255, 255, 0.76);
+    color: var(--text);
+    cursor: pointer;
+    transition:
+        transform 140ms ease,
+        border-color 140ms ease,
+        box-shadow 140ms ease;
+}
+
+.scene-3d__preset:hover {
+    transform: translateY(-1px);
+    border-color: rgba(184, 90, 37, 0.34);
+    box-shadow: 0 10px 18px rgba(35, 44, 50, 0.1);
+}
+
+.scene-3d__preset.is-active,
+.scene-3d__preset[aria-pressed='true'] {
+    background: linear-gradient(135deg, var(--brand), var(--accent));
+    color: #fff;
+    border-color: transparent;
+    transform: translateY(-1px);
+    box-shadow: 0 12px 22px rgba(35, 44, 50, 0.14);
+}
+
+.scene-3d__stage {
+    position: relative;
+    height: 100%;
+    max-width: 100%;
+    min-width: 0;
+    min-height: 0;
+    border-radius: 28px;
+    overflow: hidden;
+    background:
+        radial-gradient(
+            circle at top,
+            rgba(255, 255, 255, 0.82),
+            transparent 48%
+        ),
+        linear-gradient(180deg, #fff7f1 0%, #edf5f1 100%);
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 220px;
+}
+
+.scene-3d__viewport {
+    position: relative;
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+    background:
+        radial-gradient(
+            circle at top,
+            rgba(255, 255, 255, 0.18),
+            transparent 44%
+        ),
+        linear-gradient(180deg, rgba(24, 31, 35, 0.06), rgba(255, 255, 255, 0));
+}
+
+.scene-3d__canvas-mount {
+    position: absolute;
+    inset: 0;
+}
+
+.scene-3d__loading {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 1.5rem;
+    color: var(--muted);
+    background: radial-gradient(
+        circle at top,
+        rgba(255, 255, 255, 0.78),
+        rgba(255, 247, 241, 0.92) 48%,
+        rgba(237, 245, 241, 0.95)
+    );
+    backdrop-filter: blur(8px);
+    z-index: 1;
+}
+
+.scene-3d__loading-content {
+    display: grid;
+    justify-items: center;
+    gap: 0.9rem;
+    max-width: min(100%, 20rem);
+}
+
+.scene-3d__loading[hidden] {
+    display: none;
+}
+
+.scene-3d__loading p {
+    margin: 0;
+}
+
+.scene-3d__canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+    cursor: grab;
+    touch-action: none;
+}
+
+.scene-3d__canvas:active {
+    cursor: grabbing;
+}
+
+.scene-3d__controls {
+    display: grid;
+    gap: 0.75rem;
+    align-content: start;
+    max-height: 100%;
+    overflow: auto;
+    padding: 1rem;
+    background: rgba(255, 255, 255, 0.76);
+    border-left: 1px solid rgba(95, 112, 124, 0.12);
+    backdrop-filter: blur(10px);
+}
+
+.scene-3d__toggle {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    padding: 0.7rem 0.8rem;
+    border-radius: 16px;
+    background: rgba(255, 255, 255, 0.72);
+    border: 1px solid rgba(95, 112, 124, 0.12);
+    color: var(--text);
+}
+
+.scene-3d__toggle input {
+    width: 1rem;
+    height: 1rem;
+    accent-color: var(--accent);
+}
+
+.scene-3d__selection {
+    display: grid;
+    gap: 0.65rem;
+    padding: 0.8rem;
+    border-radius: 16px;
+    background: rgba(255, 255, 255, 0.72);
+    border: 1px solid rgba(95, 112, 124, 0.12);
+}
+
+.scene-3d__selection-title {
+    margin: 0;
+    font-size: 0.9rem;
+}
+
+.scene-3d__selection-empty {
+    margin: 0;
+    color: var(--muted);
+    line-height: 1.45;
+}
+
+.scene-3d__selection-list {
+    display: grid;
+    gap: 0.5rem;
+    margin: 0;
+}
+
+.scene-3d__selection-field {
+    display: grid;
+    gap: 0.14rem;
+}
+
+.scene-3d__selection-field dt {
+    color: var(--muted);
+    font-size: 0.72rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.scene-3d__selection-field dd {
+    margin: 0;
+    font-weight: 600;
+    line-height: 1.35;
+    word-break: break-word;
+}
+
+.scene-3d__diagnostics {
+    padding: 0.9rem 1rem;
+    border-radius: 18px;
+    background: rgba(255, 255, 255, 0.72);
+    border: 1px solid rgba(95, 112, 124, 0.12);
+    color: var(--muted);
+    line-height: 1.45;
+}
+
+.scene-3d__stats {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 0.8rem;
+}
+
+.scene-3d__stats div {
+    padding: 0.9rem 1rem;
+    border-radius: 18px;
+    background: rgba(255, 255, 255, 0.72);
+    border: 1px solid rgba(95, 112, 124, 0.12);
+}
+
+.scene-3d__stats dt {
+    color: var(--muted);
+    font-size: 0.82rem;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+}
+
+.scene-3d__stats dd {
+    margin: 0.4rem 0 0;
+    font-weight: 700;
+}
+
+@media (min-width: 761px) and (max-height: 1280px) {
+    body.is-viewer-mode.is-viewer-3d .scene-3d {
+        height: auto;
+        grid-template-rows:
+            auto auto minmax(clamp(460px, 50vh, 600px), auto)
+            auto auto;
+    }
+}
+
+@media (max-width: 760px) {
+    .scene-3d {
+        grid-template-rows: auto auto auto auto auto;
+    }
+
+    .scene-3d .svg-panel__header {
+        align-items: flex-start;
+    }
+
+    .scene-3d .svg-panel__header p {
+        flex: 1 1 100%;
+        line-height: 1.35;
+        white-space: normal;
+    }
+
+    .scene-3d__action {
+        flex-basis: 100%;
+    }
+
+    .scene-3d__stats {
+        grid-template-columns: 1fr;
+    }
+
+    .scene-3d__stage {
+        display: block;
+        grid-template-columns: 1fr;
+        overflow: visible;
+    }
+
+    .scene-3d__viewport {
+        height: clamp(360px, 58vh, 560px);
+        min-height: 360px;
+    }
+
+    .scene-3d__controls {
+        border-left: 0;
+        border-top: 1px solid rgba(95, 112, 124, 0.12);
+        max-height: none;
+        overflow: visible;
+    }
+}