evomeme 0.1.9 → 0.1.10

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

@@ -0,0 +1,441 @@
+/* Styles are split by page responsibility; import order is preserved by styles.css. */
+.inspector {
+  position: absolute;
+  z-index: 8;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: var(--inspector-width, 300px);
+  min-width: min(300px, 50vw);
+  max-width: 50vw;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  border-right: 1px solid var(--line);
+  background: rgba(18, 21, 26, 0.94);
+  backdrop-filter: blur(10px);
+  box-shadow: 12px 0 32px rgba(0, 0, 0, 0.28);
+}
+
+.inspector-resize-handle {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  right: -5px;
+  bottom: 0;
+  width: 10px;
+  cursor: col-resize;
+  touch-action: none;
+  outline: none;
+}
+
+.inspector-resize-handle::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 4px;
+  bottom: 0;
+  width: 2px;
+  background: transparent;
+  transition: background 120ms ease;
+}
+
+.inspector-resize-handle:hover::after,
+.inspector-resize-handle:focus-visible::after,
+.inspector.is-resizing .inspector-resize-handle::after {
+  background: rgba(61, 214, 198, 0.72);
+}
+
+body.is-resizing-inspector,
+body.is-resizing-inspector * {
+  cursor: col-resize !important;
+  user-select: none !important;
+}
+
+.inspector[hidden] {
+  display: none !important;
+}
+
+.inspector-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 14px 14px 10px;
+  border-bottom: 1px solid var(--line);
+}
+
+.inspector-header h2 {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.inspector-header .ghost-btn {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  line-height: 1;
+  font-size: 18px;
+}
+
+.inspector-body {
+  flex: 1;
+  overflow: auto;
+  padding: 12px 14px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.insp-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.insp-image-info,
+.insp-video-info {
+  gap: 12px;
+}
+
+.insp-block {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 11px;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: rgba(10, 12, 16, 0.34);
+}
+
+.insp-block-title {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  margin: 0;
+  color: var(--text);
+  font-size: 12px;
+  font-weight: 650;
+  cursor: pointer;
+  user-select: none;
+  list-style: none;
+}
+
+.insp-block-title::-webkit-details-marker {
+  display: none;
+}
+
+.insp-block-title::before {
+  content: '';
+  width: 6px;
+  height: 6px;
+  flex: 0 0 auto;
+  border-right: 1.5px solid var(--muted);
+  border-bottom: 1.5px solid var(--muted);
+  transform: rotate(45deg) translate(-1px, -1px);
+  transition: transform 120ms ease;
+}
+
+.insp-block:not([open]) .insp-block-title::before {
+  transform: rotate(-45deg);
+}
+
+.insp-block-title:hover {
+  color: var(--accent);
+}
+
+.insp-block-title:focus-visible {
+  outline: 2px solid rgba(61, 214, 198, 0.55);
+  outline-offset: 3px;
+  border-radius: 3px;
+}
+
+.insp-input-label {
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.insp-preview-frame {
+  overflow: hidden;
+  border-radius: 8px;
+  background: rgba(4, 6, 9, 0.55);
+}
+
+.insp-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.insp-actions .ghost-btn {
+  flex: 1 1 auto;
+}
+
+.insp-param-module {
+  padding: 9px;
+  background: rgba(18, 21, 26, 0.58);
+}
+
+.insp-param-fields {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(88px, 0.75fr);
+  gap: 10px;
+}
+
+.insp-param-field {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 5px;
+  color: var(--muted);
+  font-size: 11px;
+}
+
+.insp-param-field input {
+  width: 100%;
+  min-width: 0;
+  padding: 6px 7px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 7px;
+  background: rgba(7, 9, 12, 0.72);
+  color: var(--text);
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 11px;
+}
+
+.insp-grid-inputs {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  align-items: center;
+  gap: 5px;
+}
+
+.insp-grid-times {
+  color: var(--muted);
+  font-size: 11px;
+}
+
+.insp-param-status {
+  color: var(--muted);
+  font-size: 11px;
+  line-height: 1.4;
+}
+
+.insp-param-status.is-error {
+  color: var(--danger);
+}
+
+.insp-preview-toggle {
+  width: 100%;
+  justify-content: center;
+}
+
+.insp-kv {
+  display: grid;
+  grid-template-columns: 72px 1fr;
+  gap: 6px 10px;
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.insp-kv dt {
+  margin: 0;
+  color: var(--muted);
+}
+
+.insp-kv dd {
+  margin: 0;
+  word-break: break-all;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 11px;
+  white-space: pre-wrap;
+}
+
+.insp-prompt {
+  margin: 0;
+  padding: 8px 10px;
+  border-radius: 8px;
+  border: 1px solid var(--line);
+  background: rgba(10, 12, 16, 0.55);
+  color: var(--text);
+  font-size: 12px;
+  line-height: 1.45;
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 160px;
+  overflow: auto;
+}
+
+.insp-preview {
+  width: 100%;
+  border-radius: 8px;
+  border: 1px solid var(--line);
+  background:
+    linear-gradient(45deg, #2a3140 25%, transparent 25%),
+    linear-gradient(-45deg, #2a3140 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #2a3140 75%),
+    linear-gradient(-45deg, transparent 75%, #2a3140 75%);
+  background-size: 16px 16px;
+  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
+  display: block;
+}
+
+.insp-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.insp-tos-link {
+  color: var(--accent);
+  text-decoration: none;
+  overflow-wrap: anywhere;
+}
+
+.insp-tos-link:hover {
+  text-decoration: underline;
+}
+
+.insp-field[hidden] {
+  display: none !important;
+}
+
+.insp-field select,
+.insp-field input[type='text'],
+.insp-field input[type='number'],
+.insp-field textarea {
+  width: 100%;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 7px;
+  background: rgba(10, 12, 16, 0.72);
+  color: var(--text);
+  font-size: 12px;
+  padding: 7px 8px;
+}
+
+.insp-field textarea {
+  min-height: 62px;
+  resize: vertical;
+  line-height: 1.45;
+}
+
+.insp-field input[type='color'] {
+  width: 100%;
+  min-height: 34px;
+  padding: 3px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 7px;
+  background: rgba(10, 12, 16, 0.72);
+}
+
+.insp-action-btn {
+  margin-top: 4px;
+  width: 100%;
+  justify-content: center;
+}
+
+.insp-field-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.insp-field input[type='range'] {
+  flex: 1;
+}
+
+.insp-field-val {
+  min-width: 2.5em;
+  color: var(--text);
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 12px;
+}
+
+.insp-check {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: var(--text);
+}
+
+.insp-label {
+  font-size: 12px;
+  color: var(--muted);
+  font-weight: 600;
+}
+
+.insp-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.insp-list-item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  width: 100%;
+  text-align: left;
+  padding: 10px;
+  border-radius: 8px;
+  border: 1px solid var(--line);
+  background: var(--bg-1);
+  color: var(--text);
+  cursor: pointer;
+}
+
+.insp-list-item:hover {
+  border-color: rgba(61, 214, 198, 0.45);
+}
+
+.insp-list-item .name {
+  font-size: 13px;
+  font-weight: 500;
+  word-break: break-all;
+}
+
+.insp-list-item .meta {
+  font-size: 11px;
+  color: var(--muted);
+  font-family: 'JetBrains Mono', monospace;
+}
+
+.canvas-shell {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.canvas-toolbar {
+  position: relative;
+  z-index: 40;
+  isolation: isolate;
+  display: flex;
+  align-items: stretch;
+  justify-content: space-between;
+  flex-wrap: nowrap;
+  gap: 0;
+  padding: 6px 0 0;
+  border-bottom: 1px solid var(--line);
+  background: rgba(18, 21, 26, 0.72);
+  backdrop-filter: blur(8px);
+  min-height: 48px;
+}
+
+.ghost-btn {
+  border: 1px solid var(--line);
+  background: transparent;
+  color: var(--text);
+  border-radius: 8px;
+  padding: 6px 10px;
+  cursor: pointer;
+}
+
+.ghost-btn:hover {
+  border-color: rgba(61, 214, 198, 0.45);
+}