castle-web-cli 0.4.84 → 0.4.86

package/kits/physics-2d/editors/pxArtTimeline.module.css

@@ -0,0 +1,506 @@
+/* Layers x frames timeline panel for the PxArt editor. Sits below the artboard
+   in the editor's left column: a toolbar row, a horizontally-scrolling
+   layers(rows) x frames(columns) grid, then the tags panel. Colors reuse the
+   shared inspector CSS variables from engine/ui.module.css. */
+
+/* The editor's left column: artboard region stacked above the timeline. Takes
+   grid column 1 of the shared .drawingEditor grid (the inspector is column 2). */
+.editorLeft {
+  grid-column: 1;
+  grid-row: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+}
+
+.artboardRegion {
+  flex: 1 1 0;
+  min-height: 0;
+  display: flex;
+  overflow: hidden;
+}
+
+@container editor (max-width: 620px) {
+  .barLabel {
+    display: none;
+  }
+}
+
+/* Height is driven by an inline style from the resize handle (see
+   pxArtTimeline.jsx); flex-shrink stays 0 so the artboard region above keeps
+   the remainder. */
+.timeline {
+  position: relative;
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  border-top: 1px solid var(--castle-inspector-divider);
+  background: var(--castle-workspace-bg);
+  color: var(--castle-inspector-text);
+  font-size: 13px;
+  overflow: hidden;
+}
+
+/* Drag target sitting over the top divider. Absolute so it consumes no layout.
+   Neutral hover/active treatment (no accent/purple highlight) to stay
+   consistent with the editor's existing chrome. */
+.resizeHandle {
+  position: absolute;
+  top: -3px;
+  left: 0;
+  right: 0;
+  height: 7px;
+  cursor: row-resize;
+  background: transparent;
+  z-index: 5;
+  touch-action: none;
+}
+
+.resizeHandle:hover {
+  background: var(--castle-inspector-border);
+}
+
+.resizeHandleActive,
+.resizeHandleActive:hover {
+  background: var(--castle-inspector-muted);
+}
+
+.bar {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 14px;
+  padding: 8px;
+  border-bottom: 1px solid var(--castle-inspector-divider);
+}
+
+.barGroup {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.barLabel {
+  color: var(--castle-inspector-muted);
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.barSpacer {
+  flex: 1 1 auto;
+}
+
+.barUnit {
+  color: var(--castle-inspector-muted);
+  font-size: 11px;
+}
+
+.globalDuration {
+  width: 56px;
+  border: 1px solid var(--castle-inspector-border);
+  border-radius: var(--castle-radius);
+  background: var(--castle-inspector-input-bg);
+  color: var(--castle-inspector-text);
+  padding: 4px 6px;
+  text-align: center;
+}
+
+/* Icon-only label (stopwatch) sitting next to the global duration input, in
+   place of the old "Duration … ms · all frames" text. */
+.durationIcon {
+  display: inline-flex;
+  align-items: center;
+  color: var(--castle-inspector-muted);
+}
+
+.durationGlyph {
+  width: 14px;
+  height: 14px;
+  fill: currentColor;
+}
+
+.miniInput {
+  width: 64px;
+  border: 1px solid var(--castle-inspector-border);
+  border-radius: var(--castle-radius);
+  background: var(--castle-inspector-input-bg);
+  color: var(--castle-inspector-text);
+  padding: 4px 6px;
+}
+
+.scroll {
+  flex: 1 1 0;
+  min-height: 0;
+  overflow: auto;
+}
+
+.grid {
+  display: inline-flex;
+  flex-direction: column;
+  min-width: 100%;
+}
+
+.row {
+  display: flex;
+  align-items: stretch;
+}
+
+/* Grid separators: every grid element (corner, frame headers, layer headers,
+   and art cells) draws a SINGLE 1px right+bottom divider. Interior edges are
+   each owned by exactly one element (no two borders meet), so there are no
+   doubled/thicker seams. The grid's outer top is the toolbar's existing bottom
+   divider; outer right/bottom come from the last cells. */
+.corner {
+  flex: 0 0 168px;
+  border-right: 1px solid var(--castle-inspector-divider);
+  border-bottom: 1px solid var(--castle-inspector-divider);
+  background: var(--castle-workspace-bg);
+  position: sticky;
+  left: 0;
+  z-index: 2;
+}
+
+.frameHead {
+  flex: 0 0 52px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  padding: 4px 3px;
+  border-right: 1px solid var(--castle-inspector-divider);
+  border-bottom: 1px solid var(--castle-inspector-divider);
+  background: transparent;
+  color: var(--castle-inspector-muted);
+  cursor: pointer;
+}
+
+.frameHeadActive {
+  background: var(--castle-black);
+  color: var(--castle-text);
+}
+
+.frameNum {
+  font-variant-numeric: tabular-nums;
+  font-size: 12px;
+}
+
+.durationInput {
+  width: 44px;
+  border: 1px solid var(--castle-inspector-border);
+  border-radius: 3px;
+  background: var(--castle-inspector-input-bg);
+  color: var(--castle-inspector-text);
+  padding: 1px 3px;
+  font-size: 11px;
+  text-align: center;
+}
+
+/* An OVERRIDDEN frame duration: accented + bold so it reads distinctly from the
+   greyed placeholder shown by frames that inherit the global. */
+.durationOverride {
+  color: var(--castle-text);
+  font-weight: 600;
+  border-color: var(--castle-blue);
+}
+
+.layerHead {
+  flex: 0 0 168px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 4px;
+  padding: 4px 8px;
+  border-right: 1px solid var(--castle-inspector-divider);
+  border-bottom: 1px solid var(--castle-inspector-divider);
+  background: var(--castle-workspace-bg);
+  position: sticky;
+  left: 0;
+  z-index: 1;
+  cursor: pointer;
+}
+
+.layerHeadActive {
+  background: var(--castle-black);
+}
+
+.layerTopRow {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.visBtn {
+  flex: 0 0 auto;
+  width: 22px;
+  height: 22px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--castle-inspector-border);
+  border-radius: var(--castle-radius);
+  background: var(--castle-inspector-button-bg);
+  color: var(--castle-inspector-text);
+  cursor: pointer;
+  padding: 0;
+}
+
+.visBtn:hover {
+  background: var(--castle-inspector-input-bg);
+}
+
+.visBtn svg {
+  width: 12px;
+  height: 12px;
+}
+
+/* Inline FA eye / eye-slash glyph for the visibility toggle (see FaGlyph). */
+.visGlyph {
+  width: 12px;
+  height: 12px;
+  fill: currentColor;
+}
+
+/* Hidden layer: the visibility toggle borrows the standard disabled LOOK
+   (0.35 dimming, matching the undo button) without being disabled -- this
+   button stays interactive and toggles default <-> disabled-look. */
+.visOff {
+  opacity: 0.35;
+}
+
+/* Static layer-name label (rename was removed from the UI). */
+.name {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background: none;
+  border: 0;
+  color: inherit;
+  text-align: left;
+  padding: 0;
+}
+
+/* Slim opacity slider: a thin custom track + small thumb so the layer header
+   cell stays no taller than the art (thumbnail) cells in its row. */
+.opacity {
+  width: 100%;
+  height: 12px;
+  margin: 0;
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+  background: transparent;
+  accent-color: var(--castle-selected);
+}
+
+.opacity::-webkit-slider-runnable-track {
+  height: 3px;
+  border-radius: 2px;
+  background: var(--castle-inspector-border);
+}
+
+.opacity::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 10px;
+  height: 10px;
+  margin-top: -3.5px;
+  border-radius: 50%;
+  background: var(--castle-selected);
+}
+
+.opacity::-moz-range-track {
+  height: 3px;
+  border-radius: 2px;
+  background: var(--castle-inspector-border);
+}
+
+.opacity::-moz-range-thumb {
+  width: 10px;
+  height: 10px;
+  border: 0;
+  border-radius: 50%;
+  background: var(--castle-selected);
+}
+
+/* The cell is a real <button>, so wipe the UA button chrome first. Crucially
+   `border: 0` clears the default TOP/LEFT borders the UA otherwise keeps (we only
+   override right/bottom below) — those surviving defaults were the "heavier /
+   doubled" top-left edge. The reset comes BEFORE the divider longhands so our
+   right+bottom separators still apply; the selected-cell inset stroke lives on
+   .cellActive (box-shadow) and is unaffected by this border reset. */
+.cell {
+  appearance: none;
+  -webkit-appearance: none;
+  margin: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  color: inherit;
+  text-align: center;
+  box-sizing: border-box;
+  flex: 0 0 52px;
+  height: 52px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+  border-right: 1px solid var(--castle-inspector-divider);
+  border-bottom: 1px solid var(--castle-inspector-divider);
+  cursor: pointer;
+  position: relative;
+}
+
+.cellActive {
+  background: rgb(141 183 255 / 0.16);
+  box-shadow: inset 0 0 0 2px var(--castle-blue);
+}
+
+.thumb {
+  width: 100%;
+  height: 100%;
+}
+
+.thumbCanvas {
+  width: 100%;
+  height: 100%;
+  image-rendering: pixelated;
+  display: block;
+}
+
+/* Empty/absent cell: plain and empty. The cell's own grid separators (see the
+   .corner/.cell border rules) still bound it; there's no dashed interior. */
+.empty {
+  width: 100%;
+  height: 100%;
+  background: transparent;
+}
+
+.linkBadge {
+  position: absolute;
+  left: 5px;
+  top: 5px;
+  width: 14px;
+  height: 14px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  /* Match the thumb/.linkRing corner rounding (2px). A larger radius left a
+     sliver of the parent's rounded corner peeking behind the badge. */
+  border-radius: 2px;
+  background: var(--castle-blue);
+  color: var(--castle-selected-ink);
+}
+
+.linkBadge svg {
+  width: 9px;
+  height: 9px;
+}
+
+.linkRing {
+  box-shadow: inset 0 0 0 1px var(--castle-blue);
+  border-radius: 2px;
+}
+
+/* Fade only the linked cell's thumbnail IMAGE (the canvas) to signal a shared
+   image. Scoped to the canvas inside a linked thumb, so the blue ring
+   (.linkRing box-shadow) and the link badge (.linkBadge) stay full opacity. */
+.linkRing .thumbCanvas {
+  opacity: 0.5;
+}
+
+.tags {
+  flex: 0 0 auto;
+  max-height: 38%;
+  overflow: auto;
+  border-top: 1px solid var(--castle-inspector-divider);
+  padding: 8px 12px;
+}
+
+.tagsHead {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 8px;
+}
+
+.tagRow {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 6px;
+}
+
+.tagName {
+  flex: 1 1 90px;
+  min-width: 0;
+  border: 1px solid var(--castle-inspector-border);
+  border-radius: 3px;
+  background: var(--castle-inspector-input-bg);
+  color: var(--castle-inspector-text);
+  padding: 3px 6px;
+}
+
+.tagNum {
+  width: 46px;
+  border: 1px solid var(--castle-inspector-border);
+  border-radius: 3px;
+  background: var(--castle-inspector-input-bg);
+  color: var(--castle-inspector-text);
+  padding: 3px 4px;
+  text-align: center;
+}
+
+.tagSelect {
+  border: 1px solid var(--castle-inspector-border);
+  border-radius: 3px;
+  background: var(--castle-inspector-input-bg);
+  color: var(--castle-inspector-text);
+  padding: 3px 4px;
+}
+
+.tagDefault {
+  flex: 0 0 auto;
+  width: 24px;
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--castle-inspector-border);
+  border-radius: var(--castle-radius);
+  background: var(--castle-inspector-button-bg);
+  color: var(--castle-inspector-muted);
+  cursor: pointer;
+  padding: 0;
+}
+
+.tagDefault:hover {
+  background: var(--castle-inspector-input-bg);
+}
+
+.tagDefaultOn,
+.tagDefaultOn:hover {
+  background: var(--castle-selected);
+  border-color: var(--castle-selected);
+  color: var(--castle-selected-ink);
+}
+
+.tagDefault svg {
+  width: 12px;
+  height: 12px;
+}
+
+.muted {
+  color: var(--castle-inspector-muted);
+  font-size: 12px;
+}
+
+/* Disabled right-click menu item (reuses the shared selArrangeItem chrome). */
+.menuItemDisabled {
+  opacity: 0.4;
+  cursor: default;
+}