castle-web-cli 0.4.128 → 0.4.130

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

@@ -1,506 +0,0 @@
-/* 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;
-}