@dickpy/dsh-imagegen 1.5.5 → 1.5.7

package/src/client/canvas-workspace.module.css

@@ -142,6 +142,68 @@
 
 .grid[data-mode="blank"] { background-image: none; }
 
+.grid[data-mode="diagonal"] {
+  background-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--dsw-alias-label-primary) 8%, transparent) 0 1px, transparent 1px 16px);
+}
+
+.grid[data-mode="checker"] {
+  background-image:
+    conic-gradient(color-mix(in srgb, var(--dsw-alias-label-primary) 7%, transparent) 90deg, transparent 90deg 180deg, color-mix(in srgb, var(--dsw-alias-label-primary) 7%, transparent) 180deg 270deg, transparent 270deg);
+  background-size: 48px 48px;
+}
+
+.grid[data-mode="image"] { background-image: none; }
+
+.gridScrim {
+  position: absolute;
+  inset: 0;
+  background: var(--dsw-alias-bg-layer-1);
+  opacity: 0.6;
+}
+
+/* ------------------------------------------------ background menu */
+
+.backgroundMenu {
+  position: absolute;
+  transform: translate(-50%, -100%);
+  z-index: 45;
+  min-width: 168px;
+  padding: 5px;
+  border-radius: 11px;
+  border: 1px solid var(--dsw-alias-border-l1);
+  background: color-mix(in srgb, var(--dsw-alias-bg-layer-1) 96%, transparent);
+  box-shadow: 0 16px 40px rgb(15 23 42 / 20%);
+  display: flex;
+  flex-direction: column;
+}
+
+.backgroundMenu button {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border: none;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--dsw-alias-label-primary);
+  font-size: 12.5px;
+  padding: 7px 10px;
+  cursor: pointer;
+  text-align: left;
+}
+
+.backgroundMenu button:hover { background: var(--dsw-alias-interactive-bg-hover); }
+
+.backgroundMenu button[data-active] {
+  color: var(--dsw-alias-brand-primary);
+  background: color-mix(in srgb, var(--dsw-alias-brand-primary) 12%, transparent);
+}
+
+.backgroundMenuDivider {
+  height: 1px;
+  margin: 4px 6px;
+  background: var(--dsw-alias-border-l1);
+}
+
 .world {
   position: absolute;
   left: 0;
@@ -256,6 +318,33 @@
   display: block;
 }
 
+.imageInfo {
+  position: absolute;
+  top: 6px;
+  z-index: 2;
+  padding: 3px 8px;
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--dsw-alias-label-primary) 62%, transparent);
+  color: var(--dsw-alias-bg-layer-1);
+  font-size: 10.5px;
+  line-height: 1.4;
+  pointer-events: none;
+  backdrop-filter: blur(3px);
+  max-width: calc(100% - 90px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.imageInfoLeft { left: 6px; font-weight: 600; }
+
+.imageInfoRight {
+  right: 6px;
+  left: auto;
+  font-variant-numeric: tabular-nums;
+  opacity: 0.85;
+}
+
 .nodeState,
 .nodeStateError {
   display: flex;
@@ -343,7 +432,53 @@
   backdrop-filter: blur(10px);
 }
 
-.dock .iconButton { width: 34px; height: 34px; }
+.dock .iconButton {
+  position: relative;
+  overflow: hidden;
+  width: 40px;
+  height: 40px;
+  border-radius: 11px;
+  transition: transform 0.18s cubic-bezier(0.34, 1.9, 0.64, 1), background 0.15s ease, color 0.15s ease, box-shadow 0.18s ease;
+}
+
+/* water-wave sheen sweeping across + gentle lift on hover */
+.dock .iconButton::before {
+  content: '';
+  position: absolute;
+  top: -4px;
+  bottom: -4px;
+  left: -150%;
+  width: 65%;
+  background: linear-gradient(105deg, transparent, color-mix(in srgb, currentColor 26%, transparent), transparent);
+  transform: skewX(-18deg);
+  opacity: 0;
+  pointer-events: none;
+}
+
+.dock .iconButton:not(:disabled):hover {
+  transform: translateY(calc(-3px - var(--dock-lift, 0px)));
+  box-shadow: 0 6px 14px color-mix(in srgb, var(--dsw-alias-label-primary) 20%, transparent);
+}
+
+.dock .iconButton:not(:disabled):hover::before {
+  animation: dockShine 0.55s ease forwards;
+}
+
+.dock .iconButton:not(:disabled):active {
+  transform: translateY(-1px) scale(0.96);
+}
+
+@keyframes dockShine {
+  0% { left: -150%; opacity: 1; }
+  100% { left: 170%; opacity: 1; }
+}
+
+.dock .iconButton[data-active] {
+  background: var(--dsw-alias-label-primary);
+  color: var(--dsw-alias-bg-layer-1);
+}
+
+.dock .iconButton[data-active]:hover { background: var(--dsw-alias-label-primary); color: var(--dsw-alias-bg-layer-1); }
 
 .dockDivider {
   width: 1px;
@@ -439,29 +574,30 @@
 /* ------------------------------------------------------ config node */
 
 .configNode {
-  padding: 0 10px 10px;
+  padding: 0 14px 14px;
   cursor: grab;
 }
 
-.configNode .nodeHeader { padding: 7px 2px 5px; }
+.configNode .nodeHeader { padding: 10px 2px 6px; font-size: 12px; }
 
 .configLinks {
   display: flex;
-  margin: 2px 0 8px;
+  align-items: center;
+  margin: 4px 0 10px;
   flex: none;
 }
 
 .configLinks .composerChip {
-  font-size: 10.5px;
-  padding: 2px 8px;
+  font-size: 11px;
+  padding: 3px 10px;
 }
 
 .configHint {
   flex: 1;
   min-height: 0;
   margin: 0;
-  font-size: 11px;
-  line-height: 1.55;
+  font-size: 11.5px;
+  line-height: 1.7;
   color: var(--dsw-alias-label-tertiary);
   overflow: auto;
 }