@ash-qw/dsh-theme-prts 0.1.91

package/src/styles/facility-vector.css

@@ -0,0 +1,292 @@
+/* Vector facility renderer: the legacy polygons remain active until each owner is ready. */
+html[data-dsh-prts] [data-prts-facility-defs] {
+  position: absolute;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+html[data-dsh-prts] [data-prts-facility-svg] {
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  pointer-events: none;
+}
+
+html[data-dsh-prts] [data-prts-facility-layer="surface"] {
+  fill: var(--prts-facility-surface, var(--prts-panel-raised));
+}
+
+html[data-dsh-prts] [data-prts-facility-layer="texture"] {
+  fill: none;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 160ms ease;
+}
+
+html[data-dsh-prts] [data-prts-facility-layer="outline"] {
+  fill: none;
+  stroke: var(--prts-facility-outline, var(--prts-line-strong));
+  stroke-width: 1;
+  stroke-linejoin: miter;
+  stroke-miterlimit: 2;
+  vector-effect: non-scaling-stroke;
+  shape-rendering: geometricPrecision;
+  pointer-events: none;
+}
+
+html[data-dsh-prts] [data-prts-facility-vector][data-prts-facility-texture="grid"] [data-prts-facility-layer="texture"] {
+  fill: var(--prts-facility-texture-color, var(--prts-cyan));
+  opacity: var(--prts-facility-texture-opacity, .12);
+  mask: url("#prts-facility-grid-mask");
+}
+
+html[data-dsh-prts] [data-prts-facility-vector][data-prts-facility-texture="scanline"] [data-prts-facility-layer="texture"] {
+  fill: var(--prts-facility-texture-color, var(--prts-cyan));
+  opacity: var(--prts-facility-texture-opacity, .1);
+  mask: url("#prts-facility-scanline-mask");
+}
+
+html[data-dsh-prts] [data-prts-workspace-row] {
+  --prts-facility-texture-color: var(--prts-cyan);
+  --prts-silhouette-fill: #f3f6f7;
+  --prts-silhouette-far-opacity: .06;
+  --prts-silhouette-near-opacity: .12;
+}
+
+html[data-dsh-prts][data-prts-scheme="light"] [data-prts-workspace-row] {
+  --prts-silhouette-fill: #3f4d56;
+  --prts-silhouette-far-opacity: .13;
+  --prts-silhouette-near-opacity: .26;
+}
+
+html[data-dsh-prts] [data-prts-workspace-row][aria-expanded="true"],
+html[data-dsh-prts] [data-prts-workspace-row]:is(:hover, :focus-within, [data-prts-row-menu-open]) {
+  --prts-silhouette-far-opacity: .24;
+  --prts-silhouette-near-opacity: .52;
+}
+
+html[data-dsh-prts][data-prts-scheme="light"] [data-prts-workspace-row][aria-expanded="true"],
+html[data-dsh-prts][data-prts-scheme="light"] [data-prts-workspace-row]:is(:hover, :focus-within, [data-prts-row-menu-open]) {
+  --prts-silhouette-far-opacity: .25;
+  --prts-silhouette-near-opacity: .5;
+}
+
+html[data-dsh-prts] [data-prts-facility-texture="silhouette"] [data-prts-facility-layer="texture"] {
+  opacity: 0;
+}
+
+html[data-dsh-prts] [data-prts-facility-silhouette] {
+  fill: var(--prts-silhouette-fill);
+  opacity: 0;
+  pointer-events: none;
+}
+
+html[data-dsh-prts] [data-prts-facility-texture="silhouette"] [data-prts-facility-silhouette] {
+  opacity: 1;
+}
+
+html[data-dsh-prts] [data-prts-silhouette-layer] {
+  transform-box: fill-box;
+  transform-origin: left center;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  animation-play-state: paused;
+  will-change: transform;
+  transition: opacity 180ms ease;
+}
+
+html[data-dsh-prts] [data-prts-silhouette-layer="far"] {
+  opacity: var(--prts-silhouette-far-opacity);
+  animation-name: prts-silhouette-far-drift;
+  animation-duration: 22.4s;
+}
+
+html[data-dsh-prts] [data-prts-silhouette-layer="near"] {
+  opacity: var(--prts-silhouette-near-opacity);
+  animation-name: prts-silhouette-near-drift;
+  animation-duration: 6.4s;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  html[data-dsh-prts]:not([data-prts-motion="reduced"]) [data-prts-workspace-row]:hover [data-prts-silhouette-layer] {
+    animation-play-state: running;
+  }
+}
+
+@keyframes prts-silhouette-far-drift {
+  to { transform: translate3d(-512px, 0, 0); }
+}
+
+@keyframes prts-silhouette-near-drift {
+  to { transform: translate3d(-512px, 0, 0); }
+}
+
+html[data-dsh-prts] [data-prts-facility-texture="pickup"] [data-prts-facility-layer="texture"] {
+  opacity: 0;
+}
+
+html[data-dsh-prts] [data-prts-session-pickup] {
+  color: var(--prts-session-pickup-fill);
+  fill: currentColor;
+  opacity: 0;
+  transform: translate3d(5px, 0, 0);
+  transform-box: view-box;
+  transform-origin: center;
+  transition: opacity 150ms ease, transform 240ms cubic-bezier(.22, 1, .36, 1);
+  pointer-events: none;
+}
+
+html[data-dsh-prts] [data-prts-session-row]:hover [data-prts-facility-texture="pickup"] [data-prts-session-pickup] {
+  opacity: .58;
+  transform: translate3d(0, 0, 0);
+}
+
+html[data-dsh-prts] [data-prts-session-pickup-baseline] {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1;
+  opacity: .2;
+  vector-effect: non-scaling-stroke;
+}
+
+html[data-dsh-prts] [data-prts-session-pickup-indicator] {
+  fill: var(--prts-yellow);
+}
+
+html[data-dsh-prts] [data-prts-session-pickup-bar] {
+  transform-box: fill-box;
+  transform-origin: center;
+}
+
+html[data-dsh-prts] [data-prts-session-pickup-bar]:nth-of-type(1) { --prts-pickup-duration: 520ms; --prts-pickup-delay: -.12s; }
+html[data-dsh-prts] [data-prts-session-pickup-bar]:nth-of-type(2) { --prts-pickup-duration: 1180ms; --prts-pickup-delay: -.28s; }
+html[data-dsh-prts] [data-prts-session-pickup-bar]:nth-of-type(3) { --prts-pickup-duration: 760ms; --prts-pickup-delay: -.44s; }
+html[data-dsh-prts] [data-prts-session-pickup-bar]:nth-of-type(4) { --prts-pickup-duration: 1420ms; --prts-pickup-delay: -.18s; }
+html[data-dsh-prts] [data-prts-session-pickup-bar]:nth-of-type(5) { --prts-pickup-duration: 640ms; --prts-pickup-delay: -.36s; }
+html[data-dsh-prts] [data-prts-session-pickup-bar]:nth-of-type(6) { --prts-pickup-duration: 980ms; --prts-pickup-delay: -.52s; }
+html[data-dsh-prts] [data-prts-session-pickup-bar]:nth-of-type(7) { --prts-pickup-duration: 480ms; --prts-pickup-delay: -.22s; }
+html[data-dsh-prts] [data-prts-session-pickup-bar]:nth-of-type(8) { --prts-pickup-duration: 1260ms; --prts-pickup-delay: -.46s; }
+html[data-dsh-prts] [data-prts-session-pickup-bar]:nth-of-type(9) { --prts-pickup-duration: 720ms; --prts-pickup-delay: -.14s; }
+html[data-dsh-prts] [data-prts-session-pickup-bar]:nth-of-type(10) { --prts-pickup-duration: 1520ms; --prts-pickup-delay: -.4s; }
+html[data-dsh-prts] [data-prts-session-pickup-bar]:nth-of-type(11) { --prts-pickup-duration: 560ms; --prts-pickup-delay: -.3s; }
+
+@media (prefers-reduced-motion: no-preference) {
+  html[data-dsh-prts]:not([data-prts-motion="reduced"]) [data-prts-session-row]:hover [data-prts-session-pickup-indicator] {
+    animation: prts-session-record-indicator 1.1s ease-in-out infinite;
+  }
+
+  html[data-dsh-prts]:not([data-prts-motion="reduced"]) [data-prts-session-row]:hover [data-prts-session-pickup-bar] {
+    animation: prts-session-pickup-sample var(--prts-pickup-duration) ease-in-out var(--prts-pickup-delay) infinite;
+  }
+}
+
+@keyframes prts-session-record-indicator {
+  0%, 100% { opacity: .45; }
+  50% { opacity: 1; }
+}
+
+@keyframes prts-session-pickup-sample {
+  0%, 100% { transform: scaleY(.28); }
+  34% { transform: scaleY(1.08); }
+  57% { transform: scaleY(.46); }
+  78% { transform: scaleY(.86); }
+}
+
+html[data-dsh-prts] [data-prts-session-row] {
+  --prts-facility-texture-color: var(--prts-muted);
+  --prts-session-pickup-fill: #f3f6f7;
+}
+
+html[data-dsh-prts][data-prts-scheme="light"] [data-prts-session-row] {
+  --prts-session-pickup-fill: #3f4d56;
+}
+
+html[data-dsh-prts] [data-prts-session-row][aria-selected="true"] {
+  --prts-facility-texture-color: var(--prts-yellow);
+}
+
+/* The side spine is a semantic fill, not a bordered miniature card. */
+html[data-dsh-prts] [data-prts-workspace-row] > [data-prts-facility-spine],
+html[data-dsh-prts] [data-prts-session-row] > [data-prts-facility-spine] {
+  --prts-facility-surface: var(--prts-line-strong);
+  position: absolute !important;
+  z-index: 2 !important;
+  inset: 0 auto 0 0;
+  height: 100% !important;
+  isolation: isolate;
+  width: var(--prts-spine-width);
+  min-width: 0;
+  transform: scaleX(var(--prts-spine-rest)) !important;
+  transform-origin: left center;
+  transition: transform 220ms var(--prts-ease-spring);
+  pointer-events: none;
+}
+
+html[data-dsh-prts] [data-prts-workspace-row] > [data-prts-facility-spine] {
+  --prts-facility-surface: var(--prts-cyan);
+}
+
+html[data-dsh-prts] [data-prts-session-row][aria-selected="true"] > [data-prts-facility-spine] {
+  --prts-facility-surface: var(--prts-yellow);
+}
+
+html[data-dsh-prts] [data-prts-facility-spine] [data-prts-facility-layer="outline"] {
+  display: none;
+}
+
+html[data-dsh-prts] [data-prts-workspace-row][aria-expanded="true"] > [data-prts-facility-spine],
+html[data-dsh-prts] [data-prts-workspace-row]:is(:hover, :focus-within, [data-prts-row-menu-open]) > [data-prts-facility-spine],
+html[data-dsh-prts] [data-prts-session-row]:is(:hover, :focus-within, [data-prts-row-menu-open]) > [data-prts-facility-spine] {
+  transform: scaleX(1) !important;
+}
+
+/* Switch each legacy fallback off only after its own valid vector path exists. */
+html[data-dsh-prts] [data-prts-workspace-row][data-prts-spine-vector]::before,
+html[data-dsh-prts] [data-prts-session-row][data-prts-spine-vector]::before {
+  content: none !important;
+  display: none !important;
+}
+
+html[data-dsh-prts] [data-prts-facility-face][data-prts-facility-vector] {
+  border: 0 !important;
+  background: transparent !important;
+  clip-path: none !important;
+}
+
+html[data-dsh-prts] [data-prts-facility-face][data-prts-facility-vector]::after {
+  content: none !important;
+  display: none !important;
+}
+
+html[data-dsh-prts] :is(
+  [data-prts-workspace-actions],
+  [data-prts-session-actions]
+) button[data-prts-facility-vector] {
+  --prts-facility-outline: var(--prts-line);
+  --prts-facility-surface: var(--prts-panel-raised);
+  overflow: visible;
+  border: 0 !important;
+  background: transparent !important;
+  clip-path: none !important;
+}
+
+html[data-dsh-prts] :is(
+  [data-prts-workspace-actions],
+  [data-prts-session-actions]
+) button[data-prts-facility-vector]::before {
+  content: none !important;
+  display: none !important;
+}
+
+html[data-dsh-prts] :is(
+  [data-prts-workspace-actions],
+  [data-prts-session-actions]
+) button[data-prts-facility-vector]:is(:hover, :focus-visible) {
+  --prts-facility-outline: var(--prts-yellow);
+  background: transparent !important;
+}