evomeme 0.1.9 → 0.1.10-beta.13

package/dist/canvas-public/styles/dialogs.css

@@ -0,0 +1,521 @@
+/* Styles are split by page responsibility; import order is preserved by styles.css. */
+.ctx-menu {
+  position: fixed;
+  z-index: 50;
+  min-width: 160px;
+  padding: 6px;
+  border-radius: 10px;
+  border: 1px solid var(--line);
+  background: rgba(18, 21, 26, 0.96);
+  box-shadow: var(--shadow);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.ctx-menu[hidden] {
+  display: none !important;
+}
+
+.ctx-menu button {
+  border: none;
+  background: transparent;
+  color: var(--text);
+  text-align: left;
+  padding: 8px 10px;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.ctx-menu button:hover,
+.ctx-menu button:focus-visible {
+  background: rgba(61, 214, 198, 0.12);
+  outline: none;
+}
+
+.ctx-menu button[hidden] {
+  display: none !important;
+}
+
+.ctx-menu button.ctx-danger {
+  color: var(--danger);
+}
+
+.ctx-menu button.ctx-danger:hover {
+  background: rgba(255, 107, 122, 0.12);
+}
+
+.ctx-submenu {
+  position: relative;
+}
+
+.ctx-submenu[hidden] {
+  display: none !important;
+}
+
+.ctx-submenu-trigger {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.ctx-submenu-arrow {
+  color: var(--muted);
+  font-size: 17px;
+  line-height: 1;
+}
+
+.ctx-submenu-panel {
+  position: absolute;
+  z-index: 1;
+  left: calc(100% - 1px);
+  top: -6px;
+  min-width: 160px;
+  padding: 6px;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: rgba(18, 21, 26, 0.98);
+  box-shadow: var(--shadow);
+  display: none;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.ctx-menu.is-submenu-left .ctx-submenu-panel {
+  right: calc(100% - 1px);
+  left: auto;
+}
+
+.ctx-submenu:hover > .ctx-submenu-panel,
+.ctx-submenu:focus-within > .ctx-submenu-panel,
+.ctx-submenu.is-open > .ctx-submenu-panel {
+  display: flex;
+}
+
+.ctx-submenu-panel button {
+  width: 100%;
+  white-space: nowrap;
+}
+
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 60;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  background: rgba(6, 8, 12, 0.62);
+  backdrop-filter: blur(4px);
+}
+
+.modal-backdrop-dark {
+  background: rgba(0, 0, 0, 0.82);
+  backdrop-filter: none;
+}
+
+.modal-backdrop[hidden] {
+  display: none !important;
+}
+
+.modal-dialog {
+  width: 100%;
+  max-width: none;
+  max-height: 720px;
+  border-color: rgba(61, 214, 198, 0.22);
+  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.42);
+}
+
+.modal-backdrop.canvas-tool-dialog > .modal-dialog > .seq-panel-head {
+  margin: -16px -16px 0;
+  padding: 10px 12px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  cursor: grab;
+  user-select: none;
+}
+
+.modal-backdrop.canvas-tool-dialog[data-canvas-kind='interactive-edit'] > .modal-dialog {
+  height: 720px;
+  max-height: 720px;
+}
+
+.modal-backdrop.canvas-tool-dialog[data-canvas-kind='interactive-edit']
+  > .modal-dialog
+  > .seq-panel-head {
+  margin: -12px -12px 0;
+}
+
+.modal-backdrop.canvas-tool-dialog.is-manual-size > .modal-dialog {
+  width: 100%;
+  height: 100%;
+  max-height: none;
+}
+
+.modal-backdrop.canvas-tool-dialog.is-manual-size[data-canvas-kind='interactive-edit']
+  > .modal-dialog {
+  height: 100%;
+  max-height: none;
+}
+
+.modal-backdrop.canvas-tool-dialog.is-manual-size[data-canvas-kind='layer-decomposition']
+  > .modal-dialog
+  > .layer-decomposition-preview {
+  flex: 1 1 auto;
+  min-height: 100px;
+  max-height: none;
+}
+
+.modal-backdrop.canvas-tool-dialog.is-manual-size[data-canvas-kind='layer-decomposition']
+  .layer-decomposition-preview
+  img {
+  width: 100%;
+  height: 100%;
+  max-height: none;
+}
+
+.modal-dialog {
+  width: min(440px, 100%);
+  max-height: min(80vh, 640px);
+  overflow: auto;
+  padding: 16px;
+  border-radius: 14px;
+  border: 1px solid var(--line);
+  background: rgba(18, 21, 26, 0.98);
+  box-shadow: var(--shadow);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.modal-dialog-wide {
+  width: min(640px, 100%);
+}
+
+.settings-dialog {
+  width: min(440px, 100%);
+  min-height: 260px;
+  overflow: hidden;
+}
+
+.settings-dialog-body {
+  min-height: 180px;
+  flex: 1 1 auto;
+  padding-top: 4px;
+}
+
+.settings-field {
+  display: grid;
+  gap: 8px;
+  color: var(--text);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.settings-field select {
+  width: 100%;
+  min-height: 36px;
+  padding: 7px 10px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  color: var(--text);
+  background: var(--bg-2);
+  font: inherit;
+}
+
+.settings-field-error {
+  color: var(--danger);
+  font-size: 12px;
+  font-weight: 400;
+}
+
+.modal-dialog-layer-decomposition {
+  width: min(760px, 100%);
+  max-height: min(92vh, 880px);
+}
+
+.modal-dialog-image-canvas-size {
+  width: min(560px, 100%);
+}
+
+.modal-dialog-seam-elimination {
+  width: min(520px, 100%);
+}
+
+.seam-elimination-preview {
+  display: grid;
+  min-height: 180px;
+  place-items: center;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: #0d1117;
+}
+
+.seam-elimination-preview img {
+  display: block;
+  width: 100%;
+  max-height: 300px;
+  object-fit: contain;
+}
+
+.seam-elimination-size-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.seam-elimination-size-row output {
+  color: var(--text);
+  font-family: 'JetBrains Mono', monospace;
+}
+
+.seam-elimination-background-options {
+  display: grid;
+  gap: 8px;
+}
+
+.seam-elimination-background-toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.seam-elimination-background-fields {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.seam-elimination-background-fields label {
+  display: grid;
+  gap: 6px;
+}
+
+.modal-dialog-interactive-edit {
+  width: min(1480px, calc(100vw - 32px));
+  height: min(94vh, 980px);
+  max-height: none;
+  overflow: hidden;
+  padding: 12px;
+}
+
+.layer-decomposition-preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 260px;
+  max-height: 55vh;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  background:
+    linear-gradient(45deg, rgba(255, 255, 255, 0.035) 25%, transparent 25%),
+    linear-gradient(-45deg, rgba(255, 255, 255, 0.035) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.035) 75%),
+    linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.035) 75%), #0a0c10;
+  background-position:
+    0 0,
+    0 10px,
+    10px -10px,
+    -10px 0;
+  background-size: 20px 20px;
+}
+
+.layer-decomposition-preview img {
+  display: block;
+  max-width: 100%;
+  max-height: 55vh;
+  object-fit: contain;
+}
+
+.layer-decomposition-prompt {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.layer-decomposition-prompt textarea {
+  width: 100%;
+  min-height: 100px;
+  resize: vertical;
+  border: 1px solid var(--line);
+  border-radius: 9px;
+  padding: 10px 12px;
+  background: var(--bg-1);
+  color: var(--text);
+  font: inherit;
+  line-height: 1.5;
+}
+
+.layer-decomposition-prompt textarea:focus {
+  outline: 1px solid rgba(61, 214, 198, 0.7);
+  border-color: rgba(61, 214, 198, 0.7);
+}
+
+.split-anchor-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.split-anchor-grid.is-disabled {
+  opacity: 0.42;
+}
+
+.smart-split-size-toggle {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 10px 11px;
+  border: 1px solid var(--line);
+  border-radius: 9px;
+  background: rgba(255, 255, 255, 0.025);
+  color: var(--text);
+  cursor: pointer;
+}
+
+.smart-split-size-toggle input {
+  flex: 0 0 auto;
+  margin: 3px 0 0;
+  accent-color: var(--accent);
+}
+
+.smart-split-size-toggle span {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.smart-split-size-toggle strong {
+  font-size: 13px;
+}
+
+.smart-split-size-toggle small {
+  color: var(--muted);
+  font-size: 11px;
+  line-height: 1.4;
+}
+
+.split-anchor-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  min-width: 0;
+  padding: 9px 7px;
+  border: 1px solid var(--line);
+  border-radius: 9px;
+  background: rgba(255, 255, 255, 0.025);
+  color: var(--muted);
+  cursor: pointer;
+}
+
+.split-anchor-btn:hover:not(:disabled) {
+  border-color: rgba(61, 214, 198, 0.5);
+  color: var(--text);
+}
+
+.split-anchor-btn.is-selected {
+  border-color: var(--accent);
+  background: rgba(61, 214, 198, 0.14);
+  color: var(--text);
+}
+
+.split-anchor-btn > span {
+  position: relative;
+  width: 20px;
+  height: 20px;
+  flex: 0 0 auto;
+  border: 1px solid rgba(255, 255, 255, 0.28);
+  border-radius: 4px;
+}
+
+.split-anchor-btn > span::after {
+  content: '';
+  position: absolute;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: currentColor;
+  left: var(--anchor-x, 50%);
+  top: var(--anchor-y, 50%);
+  transform: translate(-50%, -50%);
+}
+
+.split-anchor-btn[data-anchor$='left'],
+.split-anchor-btn[data-anchor='left'] {
+  --anchor-x: 15%;
+}
+.split-anchor-btn[data-anchor$='right'],
+.split-anchor-btn[data-anchor='right'] {
+  --anchor-x: 85%;
+}
+.split-anchor-btn[data-anchor^='top'],
+.split-anchor-btn[data-anchor='top'] {
+  --anchor-y: 15%;
+}
+.split-anchor-btn[data-anchor^='bottom'],
+.split-anchor-btn[data-anchor='bottom'] {
+  --anchor-y: 85%;
+}
+
+.modal-hint {
+  margin: 0;
+  font-size: 13px;
+  color: var(--muted);
+}
+
+.modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding-top: 4px;
+}
+
+.frame-extract-field input[type='number'] {
+  width: 72px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 7px;
+  background: rgba(10, 12, 16, 0.72);
+  color: var(--text);
+  font-size: 13px;
+  padding: 6px 8px;
+}
+
+.frame-extract-range {
+  color: var(--muted);
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 11px;
+}
+
+.seq-sheet-fields {
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.seq-panel-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.seq-field {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.seq-field input[type='range'] {
+  flex: 1;
+}