/* ======================================== NODE LINKING SYSTEM - Connector & Link Styles ======================================== */ /* --- New Connector Visibility Rules --- */ /* in style.css */ /* ======================================== NODE LINKING SYSTEM - Connector & Link Styles ======================================== */ /* --- CORRECTED Connector Visibility Rules (No Flicker) --- */ /* in style.css */ /* ======================================== NODE LINKING SYSTEM - Connector & Link Styles ======================================== */ /* --- CORRECTED Connector Visibility Rules (No Flicker) --- */ /* in style.css */ /* ======================================== NODE LINKING SYSTEM - Connector & Link Styles ======================================== */ /* --- CORRECTED Connector Visibility Rules (No Flicker) --- */ /* 1. Base Style: All connectors are visible by default and have a transition. */ /* in style.css */ /* ======================================== NODE LINKING SYSTEM - Connector & Link Styles ======================================== */ /* --- CORRECTED Connector Visibility Rules --- */ /* 1. Base Style: All connectors are visible by default and have a transition. */ #livemind-canvas-app-container .canvas-image .canvas-connector, #livemind-canvas-app-container .canvas-image .process-node-input-label { opacity: 1; pointer-events: none; /* Not interactive by default */ transition: opacity 0.2s ease-in-out; } /* 2. Hiding Rule: Explicitly hide ONLY the connectors that are UNCONNECTED and NOT on a hovered/selected node. */ #livemind-canvas-app-container .canvas-image:not(.io-visible) .canvas-connector:not(.is-connected), #livemind-canvas-app-container .canvas-image:not(.io-visible) .process-node-input-label:not([data-connected="true"]) { opacity: 0; } /* 3. Interaction Rule: Make all connectors on a hovered/selected node interactive. */ #livemind-canvas-app-container .canvas-image.io-visible .canvas-connector, #livemind-canvas-app-container .canvas-image.io-visible .process-node-input-label { pointer-events: auto; } /* 4. "Always Clickable" Rule: Ensure connected connectors are always interactive. */ #livemind-canvas-app-container .canvas-connector.is-connected { pointer-events: auto; } /* 5. Linking State: When dragging a link, force ALL connectors to be visible and interactive. This rule is now more specific to override the hiding rule. */ #livemind-canvas-app-container.linking-active .canvas-image .canvas-connector, #livemind-canvas-app-container.linking-active .canvas-image .process-node-input-label { opacity: 1 !important; pointer-events: auto !important; } /* in style.css */ /* --- Flicker Fix Rule --- */ /* This class is added temporarily via JS to disable transitions during port creation. */ #livemind-canvas-app-container .canvas-image.no-connector-transition .canvas-connector, #livemind-canvas-app-container .canvas-image.no-connector-transition .process-node-input-label { transition: none !important; } /* Keep the rest of your connector styles below this block */ /* Keep the rest of your connector styles below this block */ /* Helper to keep the label visible when its connected dot is hovered */ #livemind-canvas-app-container .canvas-connector.is-connected:hover + .process-node-input-label { opacity: 1; } /* ================================ Replicate / Custom model gating ================================ */ /* Non-beta users should not see replicate/custom models in the dropdown. JS adds .non-beta-user to , and options get .replicate-model-option. */ body.non-beta-user .replicate-model-option { display: none !important; } /* Base connector styles */ .canvas-connector { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: transparent; border: 2px solid transparent; cursor: pointer; z-index: 1000; transition: all 0.2s; pointer-events: auto; /* FIX: Set a fixed visual size for the dot itself */ width: 12px; height: 12px; } /* New Rule: Create a large, invisible touch target using ::before */ .canvas-connector::before { content: ''; position: absolute; /* Calculate the transparent border width needed for a 30px total size: Total size (30px) - Visual Size (12px) = 18px. Since this border is applied to all sides, use 9px for top/bottom/left/right: 12px + 9px (top) + 9px (bottom) = 30px total height/width */ border: 9px solid transparent; border-radius: 50%; /* Keep it round */ top: -9px; /* Move 9px up/left to center the 30px total area */ left: -9px; width: 100%; /* Width and height cover the 12px visual size */ height: 100%; box-sizing: content-box; /* Ensure border adds to the size */ pointer-events: auto; /* Crucial: ensures clicks land on the hit-box */ z-index: 1; /* Place behind the main dot (which has z-index 1000) */ } /* Ensure existing hover effects apply to the connector and scale the visual element */ .canvas-connector:hover, .canvas-connector.hover { transform: scale(1.3); /* This scales the visual dot and the transparent border */ } /* Ensure the main dot retains its auto pointer-events rule from the visibility section */ /* (The visual dot itself should also be clickable, and the ::after handles the large area) */ /* Connector types - with !important to prevent overrides */ .canvas-connector[data-connector-kind="sequence"] { background: #3b82f6 !important; border-color: #3b82f6 !important; } .canvas-connector[data-connector-kind="media"] { background: #e5e7eb !important; border-color: #e5e7eb !important; } /* Hover effects */ .canvas-connector:hover, .canvas-connector.hover { transform: scale(1.3); } .canvas-connector[data-connector-kind="sequence"]:hover, .canvas-connector[data-connector-kind="sequence"].hover { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3); } .canvas-connector[data-connector-kind="media"]:hover, .canvas-connector[data-connector-kind="media"].hover { box-shadow: 0 0 0 3px rgba(229, 231, 235, 0.5); } /* Input connectors (left side) */ .connector-input { left: -6px; } /* Output connectors (right side) */ .connector-output { right: -6px; } /* Sequence connectors positioning */ .connector-input.sequence, .connector-output.sequence { top: 12%; transform: translateY(-50%); } /* Media input positioning - evenly spaced */ .connector-input.media { /* Position will be set inline based on index */ } .connector-input.media.single { top: 50%; transform: translateY(-50%); } /* For 2 inputs */ .connector-input.media.top { top: calc(33.33%); transform: translateY(-50%); } .connector-input.media.bottom { top: calc(66.66%); transform: translateY(-50%); } /* For 3+ inputs - will be calculated inline */ .connector-input.media.middle { transform: translateY(-50%); } /* Media output positioning */ .connector-output.media { top: 50%; transform: translateY(-50%); } /* Link lines */ .canvas-link { fill: none; stroke-width: 2; pointer-events: stroke; cursor: pointer; transition: stroke-width 0.2s; } .canvas-link:hover { stroke-width: 3; } /* Link types */ .canvas-link[data-edge-type="sequence"] { stroke: #3b82f6; } .canvas-link[data-edge-type="media"], .canvas-link[data-edge-type="flow"] { stroke: #e5e7eb; } /* Preview line during drag */ .canvas-link-preview, #link-preview-path { fill: none; stroke-width: 2; pointer-events: none; display: none; } .canvas-link-preview[data-edge-type="sequence"], #link-preview-path[data-edge-type="sequence"] { stroke: #3b82f6; } .canvas-link-preview[data-edge-type="media"], #link-preview-path[data-edge-type="media"] { stroke: #e5e7eb; } /* During drag, dim incompatible inputs */ .linking-sequence .canvas-connector[data-connector-kind="media"] { pointer-events: none; opacity: 0.3; } .linking-media .canvas-connector[data-connector-kind="sequence"] { pointer-events: none; opacity: 0.3; } /* Remove purple linked badge (old system) */ .canvas-image.linked::after { content: none; } /* Process node input labels */ .process-node-input-label { font-size: 10px; font-weight: 500; color: #9ca3af; pointer-events: none; user-select: none; position: absolute; white-space: nowrap; text-align: right; background: rgba(24, 24, 27, 0.8); padding: 2px 6px; border-radius: 3px; border: 1px solid rgba(63, 63, 70, 0.5); max-width: 120px; overflow: hidden; text-overflow: ellipsis; z-index: 999; } /* ======================================== */ #livemind-canvas-app-container .canvas-process-node { display: flex; flex-direction: column; /* Stack elements vertically */ overflow: visible; /* FIX: Allow resize handle/context bar to show */ gap: 0.75rem; /* Space between elements */ height: auto; /* Allow height to adjust */ box-sizing: border-box; /* Ensure padding doesn't affect layout calcs */ /* Add back essential positioning if removed previously */ position: absolute; cursor: move; user-select: none; -webkit-user-select: none; /* Include background/border styles if they were removed */ background-color: rgba(24, 24, 27, 0.55); border: 1px solid rgba(99, 102, 241, 0); border-radius: 0.75rem; padding: 1rem; width: 350px; min-height: 150px; color: #e4e4e7; transition: border-color 0.15s ease, background-color 0.15s ease; } /* Define order and prevent shrinking of key elements */ #livemind-canvas-app-container .canvas-process-node .process-node-header { order: 1; /* Header first */ flex-shrink: 0; /* Add any specific header styles back if needed (font, color, etc.) */ font-size: 0.875rem; font-weight: 600; color: #f8fafc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: grab; } #livemind-canvas-app-container .canvas-process-node .process-node-output-container { order: 2; /* Output second */ flex-shrink: 0; /* Container for multiple output sections - no fixed height */ display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.5rem; } #livemind-canvas-app-container .canvas-process-node .process-node-output-section { /* Each individual output section */ height: 250px !important; /* Fixed height per section */ background-color: rgba(15, 15, 18, 0.5); border-radius: 0.5rem; border: 1px solid rgba(63, 63, 70, 0.6); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; /* For absolute positioning of meta stack and connector */ flex-shrink: 0; } #livemind-canvas-app-container .canvas-process-node .process-node-output-section img, #livemind-canvas-app-container .canvas-process-node .process-node-output-section video, #livemind-canvas-app-container .canvas-process-node .process-node-output-section canvas { display: block !important; max-width: 100% !important; max-height: 100% !important; width: auto !important; height: auto !important; object-fit: contain !important; border-radius: 0.375rem; } /* Ensure GLB container also respects max dimensions */ #livemind-canvas-app-container .canvas-process-node .process-node-output-section > div:not(.api-meta-stack) { max-width: 100% !important; max-height: 100% !important; width: auto !important; height: auto !important; } #livemind-canvas-app-container .canvas-process-node .output-placeholder { font-size: 0.8rem; color: #a1a1aa; text-align: center; padding: 1rem; min-height: 250px; display: flex; align-items: center; justify-content: center; background-color: rgba(15, 15, 18, 0.5); border-radius: 0.5rem; border: 1px solid rgba(63, 63, 70, 0.6); } /* Meta stack in process node output - same behavior as queue */ #livemind-canvas-app-container .canvas-process-node .process-node-output-section .api-meta-stack { position: absolute !important; top: 4px !important; right: 4px !important; z-index: 100 !important; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; display: flex !important; flex-direction: column !important; gap: 4px !important; } #livemind-canvas-app-container .canvas-process-node .process-node-output-section:hover .api-meta-stack { opacity: 1 !important; pointer-events: auto !important; } /* Ensure meta stack children are visible */ #livemind-canvas-app-container .canvas-process-node .process-node-output-section .api-meta-stack > * { pointer-events: auto; } /* Hardened Process Node Generate Button Styles - !important to prevent site CSS overrides */ #livemind-canvas-app-container .canvas-process-node .process-node-generate-btn, #livemind-canvas-app-container .canvas-process-node button.process-node-generate-btn { order: 5 !important; /* Generate button is last */ flex-shrink: 0 !important; margin-top: 0.5rem !important; /* Space above button */ background-color: rgba(59, 130, 246, 0.8) !important; background: rgba(59, 130, 246, 0.8) !important; color: white !important; border: 1px solid rgba(37, 99, 235, 0.9) !important; padding: 0.5rem 1rem !important; border-radius: 0.5rem !important; font-size: 0.875rem !important; font-weight: 600 !important; cursor: pointer !important; transition: background-color 0.2s ease, border-color 0.2s ease !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.5rem !important; text-decoration: none !important; line-height: 1.5 !important; font-family: 'Inter', sans-serif !important; box-sizing: border-box !important; } #livemind-canvas-app-container .canvas-process-node .process-node-generate-btn:hover:not(:disabled), #livemind-canvas-app-container .canvas-process-node button.process-node-generate-btn:hover:not(:disabled) { background-color: rgba(37, 99, 235, 0.9) !important; background: rgba(37, 99, 235, 0.9) !important; border-color: rgba(29, 78, 216, 1) !important; } #livemind-canvas-app-container .canvas-process-node .process-node-generate-btn:disabled, #livemind-canvas-app-container .canvas-process-node button.process-node-generate-btn:disabled { background-color: rgba(29, 78, 216, 0.6) !important; background: rgba(29, 78, 216, 0.6) !important; border-color: rgba(30, 64, 175, 0.7) !important; color: rgba(255, 255, 255, 0.6) !important; cursor: not-allowed !important; } #livemind-canvas-app-container .canvas-process-node .process-node-generate-btn .loading-spinner { display: none !important; } #livemind-canvas-app-container .canvas-process-node .process-node-generate-btn:disabled .loading-spinner { display: inline-block !important; } #livemind-canvas-app-container .canvas-process-node .process-node-generate-btn:disabled .generate-icon { display: none !important; } /* --- Options Toggle --- */ #livemind-canvas-app-container .canvas-process-node .process-node-options-toggle { order: 3; /* Order: Options Toggle appears after Output */ cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 0.375rem 0.5rem; /* py-1.5 px-2 */ background-color: rgba(63, 63, 70, 0.3); /* zinc-700 translucent */ border-radius: 0.375rem; /* rounded-md */ transition: background-color 0.2s ease; flex-shrink: 0; /* Prevent toggle shrinking */ } #livemind-canvas-app-container .canvas-process-node .process-node-options-toggle:hover { background-color: rgba(82, 82, 91, 0.4); /* zinc-600 translucent */ } #livemind-canvas-app-container .canvas-process-node .process-node-options-toggle span { font-size: 0.75rem; /* text-xs */ font-weight: 500; /* font-medium */ color: #a1a1aa; /* zinc-400 */ } #livemind-canvas-app-container .canvas-process-node .process-node-options-toggle i { font-size: 0.7rem; /* text-xs */ color: #a1a1aa; /* zinc-400 */ transition: transform 0.2s ease; } #livemind-canvas-app-container .canvas-process-node .process-node-options-toggle.open i { transform: rotate(90deg); } /* --- Collapsible Options Content (contains form) --- */ #livemind-canvas-app-container .canvas-process-node .process-node-options-content { order: 4; /* Order: Options Content */ display: none; /* Hidden by default */ flex-grow: 1; /* Allow content to take space */ min-height: 100px; /* Minimum height when open */ max-height: 40vh; /* Max height before scrolling */ overflow: hidden; /* Hide overflow initially */ margin-top: 0.5rem; /* Add space above content when open */ } #livemind-canvas-app-container .canvas-process-node .process-node-options-content.open { display: block; /* Show when open */ overflow: visible; /* Allow inner scrolling */ } /* --- Form Container inside Options Content --- */ #livemind-canvas-app-container .canvas-process-node .process-node-form-container { height: 100%; /* Fill the options content area */ max-height: inherit; /* Inherit max-height */ overflow-y: auto; /* Allow form content to scroll */ overflow-x: hidden; padding-right: 8px; /* Space for scrollbar */ /* Custom scrollbar */ scrollbar-width: thin; scrollbar-color: #52525b rgba(39, 39, 42, 0.85); /* thumb track */ } #livemind-canvas-app-container .canvas-process-node .process-node-form-container::-webkit-scrollbar { width: 6px; } #livemind-canvas-app-container .canvas-process-node .process-node-form-container::-webkit-scrollbar-track { background: rgba(39, 39, 42, 0.85); /* zinc-800 bg */ border-radius: 3px; } #livemind-canvas-app-container .canvas-process-node .process-node-form-container::-webkit-scrollbar-thumb { background-color: #52525b; /* zinc-600 */ border-radius: 3px; } #livemind-canvas-app-container .canvas-process-node .process-node-form-container::-webkit-scrollbar-thumb:hover { background-color: #71717a; /* zinc-500 */ } /* Ensure form fields within the node use the dark theme */ #livemind-canvas-app-container .canvas-process-node .form-field input[type="text"], #livemind-canvas-app-container .canvas-process-node .form-field input[type="url"], #livemind-canvas-app-container .canvas-process-node .form-field input[type="number"], #livemind-canvas-app-container .canvas-process-node .form-field textarea, #livemind-canvas-app-container .canvas-process-node .form-field select { background-color: rgba(39, 39, 42, 0.95); border: 1px solid rgba(82, 82, 91, 0.8); color: #f4f4f5; } #livemind-canvas-app-container .canvas-process-node .form-field input[type="text"]:focus, #livemind-canvas-app-container .canvas-process-node .form-field input[type="url"]:focus, #livemind-canvas-app-container .canvas-process-node .form-field input[type="number"]:focus, #livemind-canvas-app-container .canvas-process-node .form-field textarea:focus, #livemind-canvas-app-container .canvas-process-node .form-field select:focus { border-color: rgba(99, 102, 241, 0.7); background-color: rgba(24, 24, 27, 0.9); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); } #livemind-canvas-app-container .canvas-process-node .form-field select option { background-color: #27272a; color: #f4f4f5; } #livemind-canvas-app-container .canvas-process-node .form-field label { color: #d4d4d8; } #livemind-canvas-app-container .canvas-process-node .form-field small { color: #a1a1aa; } /* Ensure resize handle is visible for selected process nodes */ #livemind-canvas-app-container .canvas-process-node.selected .resize-handle { display: block; z-index: 101; /* Ensure handle is above content */ } /* Design and Architecture Specifications. Note to LLMs: keep this updated */ /* - All canvas objects (images, videos, text, etc.) share the same persistence path and must serialize/restore uniformly across sessions. */ /* == TAILWIND EXCLUSION: Exclude modal components from Tailwind preflight resets == */ .modal-header, .modal-header *, .modal-header *::before, .modal-header *::after, .modal-body, .modal-body *, .modal-body *::before, .modal-body *::after, .modal-footer, .modal-footer *, .modal-footer *::before, .modal-footer *::after { all: revert; } /* == MODAL COMPONENTS STYLING: Match canvas design system == */ .modal-content { background-color: rgba(15, 15, 18, 0.98) !important; border: 1px solid rgba(63, 63, 70, 0.9) !important; border-radius: 1rem !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5); overflow: hidden; } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 1.75rem; background: none; border: none; } .modal-header .modal-title, .modal-header h2 { color: #f8fafc; font-family: 'Inter', sans-serif; font-size: 1.35rem; font-weight: 600; margin: 0; letter-spacing: -0.02em; font-size: 0 !important; } .modal-header .modal-title::after, .modal-header h2::after { content: "My Canvases"; font-size: 1.85rem; } .modal-header .close-modal, .modal-header button { background-color: rgba(39, 39, 42, 0.6); color: #e4e4e7; border: 1px solid rgba(82, 82, 91, 0.6); border-radius: 0.6rem; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.2rem; line-height: 1; font-weight: 400; transition: all 0.2s ease; padding: 0; font-family: 'Inter', sans-serif; } .modal-header .close-modal:hover, .modal-header button:hover { background-color: rgba(244, 63, 94, 0.2); border-color: rgba(244, 63, 94, 0.5); color: #fca5a5; transform: translateY(-1px); } .modal-body { padding: 2rem 1.75rem; background: none; overflow-y: auto; font-family: 'Inter', sans-serif; min-height: 100px; } .modal-body::-webkit-scrollbar { width: 6px; } .modal-body::-webkit-scrollbar-track { background: transparent; } .modal-body::-webkit-scrollbar-thumb { background: rgba(82, 82, 91, 0.6); border-radius: 3px; } .modal-body::-webkit-scrollbar-thumb:hover { background: rgba(113, 113, 122, 0.8); } .modal-body h3 { display: none; } .modal-body p { color: #d4d4d8; font-family: 'Inter', sans-serif; font-size: 0.9375rem; line-height: 1.65; margin: 0 0 1rem 0; } .modal-body ul, .modal-body ol { color: #d4d4d8; font-family: 'Inter', sans-serif; padding-left: 0; margin: 0 0 1rem 0; list-style: none !important; } .modal-body li { margin-bottom: 0.5rem; line-height: 1.65; list-style: none !important; } .modal-body li img, .modal-body li .wastebasket { float: right !important; margin: 0 !important; } .document-trash { margin-left: 5px !important; float: right !important; } .modal .modal-header { border-bottom: none !important; } .modal .modal-body { border-bottom: none !important; } .modal .modal-footer { border-bottom: none !important; border-top: none !important; } .modal-body a { color: #a5b4fc; text-decoration: none; transition: all 0.2s ease; } .modal-body a:hover { color: #c7d2fe; } .modal-body button { display: none; } .modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; padding: 1.25rem 1.75rem; background: none; border: none; display: none; } .modal-footer button { background-color: rgba(39, 39, 42, 0.85); color: #e4e4e7; border: 1px solid rgba(82, 82, 91, 0.8); border-radius: 0.65rem; padding: 0.65rem 1.35rem; font-size: 0.875rem; font-weight: 600; font-family: 'Inter', sans-serif; cursor: pointer; transition: all 0.2s ease; } .modal-footer button:hover { background-color: rgba(63, 63, 70, 0.95); border-color: rgba(129, 140, 248, 0.6); color: #f8fafc; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .modal-footer button:active { transform: translateY(0); } .modal-footer button.primary, .modal-footer button[type="submit"] { background-color: rgba(99, 102, 241, 0.9); border-color: rgba(99, 102, 241, 1); color: #ffffff; } .modal-footer button.primary:hover, .modal-footer button[type="submit"]:hover { background-color: rgba(129, 140, 248, 0.95); border-color: rgba(129, 140, 248, 1); box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4); } #livemind-canvas-app-container #canvas { /* Ensure the entire layer is on the GPU */ will-change: transform; backface-visibility: hidden; } /* == CSS SCOPING AND RESET APPLIED == */ #livemind-canvas-app-container { all: initial; font-family: 'Inter', sans-serif; overscroll-behavior: none; background-color: #18181B; color: white; display: block; width: 100%; height: 100%; position: relative; } #livemind-canvas-app-container, #livemind-canvas-app-container * { box-sizing: border-box; } #livemind-canvas-app-container .gomind-app-container { display: flex; flex-direction: column; height: 100%; width: 100%; overflow: hidden; background-color: inherit; color: inherit; position: relative; } #livemind-canvas-app-container.eyedropper-active, #livemind-canvas-app-container.eyedropper-active #canvas-container, #livemind-canvas-app-container.eyedropper-active .canvas-image, #livemind-canvas-app-container.eyedropper-active .queue-image-container img { cursor: crosshair; } #livemind-canvas-app-container #lm-canvas-main { flex: 1 1 auto; min-height: 0; position: relative; } #livemind-canvas-app-container #canvas-container { width: 100%; height: 100%; cursor: grab; overflow: hidden; position: relative; } #livemind-canvas-app-container #canvas-container:active { cursor: grabbing; } #livemind-canvas-app-container #grid-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; transform-origin: 0 0; will-change: transform; pointer-events: none; } #livemind-canvas-app-container #canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-origin: 0 0; z-index: 1; will-change: transform; } #livemind-canvas-app-container .canvas-image img, #livemind-canvas-app-container .canvas-image video, #livemind-canvas-app-container .canvas-image audio { max-width: none; display: block; image-rendering: high-quality; image-rendering: -webkit-optimize-contrast; } #livemind-canvas-app-container .canvas-image { position: absolute; cursor: move; user-select: none; -webkit-user-select: none; border: none; border-radius: 3px; background-color: #0f0f12; will-change: border-color, z-index; backface-visibility: hidden; transform: translateZ(0); } #livemind-canvas-app-container #viewport-stage div[data-media-type="audio"] { display: none !important; } #livemind-canvas-app-container .canvas-image.selected { outline: 2px solid #3b82f6; outline-offset: -2px; z-index: 100; } #livemind-canvas-app-container .canvas-image.active { border: 3px solid #fbbf24; box-shadow: 0 0 20px rgba(251, 191, 36, 0.8); z-index: 99; } #livemind-canvas-app-container .resize-handle { position: absolute; width: 12px; height: 12px; background-color: #3b82f6; border: 2px solid white; border-radius: 50%; z-index: 101; display: none; } #livemind-canvas-app-container .canvas-image.selected .resize-handle { display: block; } #livemind-canvas-app-container .resize-handle.br { bottom: -6px; right: -6px; cursor: se-resize; } #livemind-canvas-app-container .custom-scrollbar::-webkit-scrollbar { height: 6px; } #livemind-canvas-app-container .custom-scrollbar::-webkit-scrollbar-track { background: transparent; } #livemind-canvas-app-container .custom-scrollbar::-webkit-scrollbar-thumb { background: #52525b; border-radius: 3px; } #livemind-canvas-app-container .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #71717a; } /* Reference slot drag-and-drop styles */ #livemind-canvas-app-container #image-prompt-section [draggable="true"] { cursor: grab; border: 2px solid transparent; border-radius: 0.375rem; transition: border-color 0.2s ease, transform 0.2s ease; } #livemind-canvas-app-container #image-prompt-section [draggable="true"]:active { cursor: grabbing; } #livemind-canvas-app-container #image-prompt-section [draggable="true"].border-blue-500 { border-color: #3b82f6 !important; } #livemind-canvas-app-container #generation-panel { box-shadow: 0 0 30px rgba(0,0,0,0.5); pointer-events: all;} #livemind-canvas-app-container #prompt-window { transition: none; pointer-events: none;} #livemind-canvas-app-container #prompt-window.mobile-collapsed { transform: translate(-50%, calc(100% + 1.25rem)); pointer-events: none; } /* Bottom button panel - styled like left toolbar but horizontal */ #livemind-canvas-app-container #mobile-bottom-buttons { position: fixed; bottom: 1.25rem; left: 50%; transform: translate(-50%, 200%); z-index: 25; display: flex; gap: 14px; opacity: 0; pointer-events: none; background-color: rgba(24, 24, 27, 0.7); border: 1px solid rgba(63, 63, 70, 0.85); border-radius: 1rem; padding: 14px 12px; box-shadow: 0 18px 30px rgba(0,0,0,0.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } #livemind-canvas-app-container #mobile-bottom-buttons.show { transform: translate(-50%, 0) !important; opacity: 1 !important; pointer-events: auto !important; } #livemind-canvas-app-container #mobile-generate-btn, #livemind-canvas-app-container #open-in-latent-btn, #livemind-canvas-app-container #mobile-timeline-btn { height: 44px; border-radius: 0.85rem; background-color: rgba(39, 39, 42, 0.85); color: #ffffff; border: 1px solid rgba(82, 82, 91, 0.8); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; font-size: 0.85rem; font-weight: 600; padding: 0 16px; gap: 8px; white-space: nowrap; } #livemind-canvas-app-container #mobile-generate-btn:hover, #livemind-canvas-app-container #open-in-latent-btn:hover, #livemind-canvas-app-container #mobile-timeline-btn:hover { background-color: rgba(63, 63, 70, 0.95); border-color: rgba(99, 102, 241, 0.6); transform: translateY(-1px); } #livemind-canvas-app-container #mobile-generate-btn i, #livemind-canvas-app-container #open-in-latent-btn i, #livemind-canvas-app-container #mobile-timeline-btn i { font-size: 1rem; } #livemind-canvas-app-container #mobile-generate-btn svg, #livemind-canvas-app-container #open-in-latent-btn svg, #livemind-canvas-app-container #mobile-timeline-btn svg { width: 20px; height: 20px; } #livemind-canvas-app-container #left-toolbar { position: absolute; top: 16px; left: 16px; z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 14px; background-color: rgba(24, 24, 27, 0.92); border: 1px solid rgba(63, 63, 70, 0.85); border-radius: 1rem; padding: 14px 12px; box-shadow: 0 18px 30px rgba(0,0,0,0.4); backdrop-filter: blur(10px); } #livemind-canvas-app-container #left-toolbar .mobile-toggle { display: inline-flex; } #livemind-canvas-app-container #left-toolbar .toolbar-button { width: 44px; height: 44px; border-radius: 0.85rem; background-color: rgba(39, 39, 42, 0.85); color: #ffffff; border: 1px solid rgba(82, 82, 91, 0.8); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; gap: 6px; font-size: 0.85rem; font-weight: 600; padding: 0; } #livemind-canvas-app-container #left-toolbar .toolbar-button:hover { background-color: rgba(63, 63, 70, 0.95); border-color: rgba(99, 102, 241, 0.6); transform: translateY(-1px); } #livemind-canvas-app-container #left-toolbar .toolbar-button i { font-size: 1rem; } #livemind-canvas-app-container #left-toolbar .toolbar-button span { display: none; } #livemind-canvas-app-container #left-toolbar .toolbar-button.compact { width: 44px; height: 44px; } /* Hamburger menu three-state toggle - Works on all screen sizes */ /* State 1: Hamburger only - hide everything except hamburger */ #livemind-canvas-app-container #left-toolbar #session-menu, #livemind-canvas-app-container #left-toolbar #undo-btn, #livemind-canvas-app-container #left-toolbar #redo-btn, #livemind-canvas-app-container #left-toolbar #frame-all-btn, #livemind-canvas-app-container #left-toolbar #add-text-btn, #livemind-canvas-app-container #left-toolbar #upload-media-btn { display: none !important; } /* State 2: Hamburger + undo/redo */ #livemind-canvas-app-container #left-toolbar.toolbar-state-undoredo #undo-btn, #livemind-canvas-app-container #left-toolbar.toolbar-state-undoredo #redo-btn { display: inline-flex !important; } /* State 3: All items */ #livemind-canvas-app-container #left-toolbar.toolbar-state-all #session-menu, #livemind-canvas-app-container #left-toolbar.toolbar-state-all #undo-btn, #livemind-canvas-app-container #left-toolbar.toolbar-state-all #redo-btn, #livemind-canvas-app-container #left-toolbar.toolbar-state-all #frame-all-btn, #livemind-canvas-app-container #left-toolbar.toolbar-state-all #add-text-btn, #livemind-canvas-app-container #left-toolbar.toolbar-state-all #upload-media-btn { display: flex !important; } #livemind-canvas-app-container #session-menu { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; } #livemind-canvas-app-container #session-menu .session-toggle { width: 44px; height: 44px; border-radius: 0.85rem; background-color: rgba(39, 39, 42, 0.85); color: #ffffff; border: 1px solid rgba(82, 82, 91, 0.8); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } #livemind-canvas-app-container #session-menu .session-toggle:hover { background-color: rgba(63, 63, 70, 0.95); border-color: rgba(99, 102, 241, 0.6); transform: translateY(-1px); } #livemind-canvas-app-container #session-menu .session-dropdown { position: absolute; top: 0; left: calc(100% + 12px); background-color: rgba(39, 39, 42, 0.95); border: 1px solid rgba(63, 63, 70, 0.85); border-radius: 0.75rem; box-shadow: 0 20px 40px rgba(0,0,0,0.45); padding: 6px; display: none; flex-direction: column; min-width: 200px; backdrop-filter: blur(12px); } #livemind-canvas-app-container #session-menu.open .session-dropdown { display: flex; } #livemind-canvas-app-container #session-menu .session-dropdown button { width: 100%; background: none; border: none; color: #e4e4e7; text-align: left; padding: 10px 12px; border-radius: 0.5rem; font-size: 0.85rem; display: flex; align-items: center; gap: 10px; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } #livemind-canvas-app-container #session-menu .session-dropdown button:hover { background-color: rgba(99, 102, 241, 0.22); color: #f8fafc; } #livemind-canvas-app-container #session-menu .session-dropdown i { width: 16px; text-align: center; } #livemind-canvas-app-container .canvas-title-wrapper { position: relative; padding: 6px; } #livemind-canvas-app-container .canvas-title-wrapper .document-title { width: 100%; background-color: rgba(24, 24, 27, 0.8); color: #e4e4e7; border: 1px solid rgba(63, 63, 70, 0.85); border-radius: 0.5rem; padding: 8px 32px 8px 10px; font-size: 0.85rem; font-weight: 500; transition: border-color 0.2s ease, background-color 0.2s ease; } #livemind-canvas-app-container .canvas-title-wrapper .document-title:focus { outline: none; border-color: rgba(99, 102, 241, 0.8); background-color: rgba(24, 24, 27, 0.95); } #livemind-canvas-app-container .canvas-title-wrapper .save-status-icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; border-radius: 50%; transition: background-color 0.3s ease; } #livemind-canvas-app-container .canvas-title-wrapper .save-status-icon.saving { background-color: #fbbf24; animation: pulse 1.5s ease-in-out infinite; } #livemind-canvas-app-container .canvas-title-wrapper .save-status-icon.saved { background-color: #10b981; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } #livemind-canvas-app-container .snap-line { position: absolute; background-color: #ef4444; z-index: 999; } #livemind-canvas-app-container .snap-line.horizontal { width: 100%; height: 1px; } #livemind-canvas-app-container .snap-line.vertical { width: 1px; height: 100%; } /* Ensure notification elements are above everything in canvas */ .notification, [id*="notif"], [class*="notif"], [id*="toast"], [class*="toast"] { z-index: 999999 !important; } @keyframes fadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } #livemind-canvas-app-container .fade-in { animation: fadeIn 0.5s ease-out forwards; } #livemind-canvas-app-container #image-results { pointer-events: none; } #livemind-canvas-app-container #image-results > * { pointer-events: none; } #livemind-canvas-app-container #image-results-track { display: inline-flex; align-items: center; gap: 0.75rem; height: 100%; min-width: max-content; pointer-events: auto; overflow-y: auto; } #livemind-canvas-app-container #image-results-track > * { pointer-events: auto; } #livemind-canvas-app-container .queue-image-container { transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; background-color: #0f0f12; } #livemind-canvas-app-container .queue-image-container img, #livemind-canvas-app-container .queue-image-container video { display: block; background-color: transparent; } #livemind-canvas-app-container .queue-image-container.zoomed { transform: scale(1.5); z-index: 20; box-shadow: 0 10px 30px rgba(0,0,0,0.5); } #livemind-canvas-app-container .queue-image-container.queue-item-new { box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.6); } #livemind-canvas-app-container .api-meta-stack { position: absolute; top: 3px; right: 3px; display: flex; flex-direction: column; gap: 4px; align-items: stretch; z-index: 3; opacity: 0; transition: opacity 0.2s ease; pointer-events: auto; } #livemind-canvas-app-container .queue-image-container .api-meta-stack { top: 3px; right: 3px; } #livemind-canvas-app-container .queue-remove-btn { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 999px; border: 1px solid rgba(244, 63, 94, 0.6); background-color: rgba(24, 24, 27, 0.8); color: rgba(248, 250, 252, 0.9); display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; cursor: pointer; opacity: 0; transition: opacity 0.18s ease, transform 0.18s ease, background-color 0.18s ease; z-index: 4; pointer-events: auto; } #livemind-canvas-app-container .queue-remove-btn:hover { background-color: rgba(244, 63, 94, 0.85); color: #fff; transform: scale(1.05); } #livemind-canvas-app-container .queue-remove-btn:focus-visible { outline: 2px solid rgba(244, 63, 94, 0.7); outline-offset: 2px; opacity: 1; } #livemind-canvas-app-container .queue-image-container:hover .api-meta-stack, #livemind-canvas-app-container .queue-image-container:hover .queue-remove-btn, #livemind-canvas-app-container .canvas-image:hover .api-meta-stack, #livemind-canvas-app-container .canvas-image.selected .api-meta-stack { opacity: 1; } #livemind-canvas-app-container .api-icon, #livemind-canvas-app-container .api-action-btn { background-color: rgba(0,0,0,0.6); color: #ffffff; font-size: 10px; font-weight: 600; padding: 4px; border-radius: 4px; width: 100%; min-width: 32px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 6px rgba(0,0,0,0.25); } #livemind-canvas-app-container .api-icon { pointer-events: none; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Smaller icon in queue items - match close button sizing */ #livemind-canvas-app-container .queue-image-container .api-icon { font-size: 0.7rem; padding: 2px; min-width: 20px; width: 20px; height: 20px; line-height: 1; } #livemind-canvas-app-container .api-action-btn { border: none; cursor: pointer; pointer-events: auto; font-size: 12px; transition: background-color 0.15s ease, color 0.15s ease; } #livemind-canvas-app-container .api-action-btn i { pointer-events: none; } #livemind-canvas-app-container .api-action-btn:hover:not(.success):not(.error):not(:disabled) { background-color: rgba(37,99,235,0.85); } #livemind-canvas-app-container .api-action-btn:disabled { background-color: rgba(0,0,0,0.4); box-shadow: none; cursor: not-allowed; opacity: 0.6; } #livemind-canvas-app-container .api-action-btn.success { background-color: rgba(34,197,94,0.8); color: #f0fdf4; } #livemind-canvas-app-container .api-action-btn.error { background-color: rgba(248,113,113,0.85); color: #fef2f2; } #livemind-canvas-app-container .api-copy-btn { margin-top: 2px; } /* Hide download and copy buttons in queue items - show only model icon */ #livemind-canvas-app-container .queue-image-container .api-action-btn { display: none; } #livemind-canvas-app-container .canvas-context-bar { position: absolute; top: 100%; left: 50%; transform: translate(-50%, 14px); display: none; align-items: center; gap: 8px; background-color: rgba(39,39,42,0.94); border: 1px solid rgba(63,63,70,0.9); border-radius: 0.75rem; padding: 6px 10px; box-shadow: 0 20px 35px rgba(0,0,0,0.45); backdrop-filter: blur(10px); pointer-events: none; z-index: 130; } #livemind-canvas-app-container .canvas-image.selected .canvas-context-bar { display: flex; pointer-events: auto; } #livemind-canvas-app-container .canvas-context-button { display: flex; align-items: center; gap: 8px; background: rgba(63,63,70,0.55); color: #f9fafb; border: none; border-radius: 0.6rem; padding: 6px 12px; font-size: 0.8rem; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } #livemind-canvas-app-container .canvas-context-button:hover { background: rgba(99,102,241,0.5); color: #ffffff; transform: translateY(-1px); } #livemind-canvas-app-container .canvas-context-button:active { transform: translateY(0); } #livemind-canvas-app-container .canvas-context-button[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; } #livemind-canvas-app-container .canvas-context-button i { font-size: 0.9rem; } /* RefLabel button, badge, and input styles */ #livemind-canvas-app-container .ref-label-container { display: flex; align-items: center; position: relative; } #livemind-canvas-app-container .ref-label-container .ref-label-btn { padding: 6px 10px; } #livemind-canvas-app-container .ref-label-container .ref-label-display { display: none; background: rgba(63,63,70,0.55); border: none; border-radius: 0.6rem; padding: 6px 12px; color: #f9fafb; font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease; white-space: nowrap; } #livemind-canvas-app-container .ref-label-container .ref-label-display:hover { background: rgba(99,102,241,0.5); color: #ffffff; transform: translateY(-1px); } #livemind-canvas-app-container .ref-label-container .ref-label-input { display: none; background: rgba(24,24,27,0.95); border: 1px solid rgba(129,140,248,0.7); border-radius: 0.5rem; padding: 5px 8px; color: #e0e7ff; font-size: 0.8rem; font-weight: 500; outline: none; width: 70px; min-width: 70px; max-width: 220px; box-sizing: border-box; } #livemind-canvas-app-container .ref-label-container .ref-label-input::placeholder { color: rgba(161,161,170,0.5); } #livemind-canvas-app-container .ref-label-container .ref-label-input:focus { border-color: rgba(165,180,252,0.9); box-shadow: 0 0 0 2px rgba(99,102,241,0.25); } /* State: has label but not editing - show badge */ #livemind-canvas-app-container .ref-label-container.has-label .ref-label-btn { display: none; } #livemind-canvas-app-container .ref-label-container.has-label .ref-label-display { display: inline-block; } #livemind-canvas-app-container .ref-label-container.has-label .ref-label-input { display: none; } /* State: editing - show input, hide everything else */ #livemind-canvas-app-container .ref-label-container.editing .ref-label-btn { display: none; } #livemind-canvas-app-container .ref-label-container.editing .ref-label-display { display: none; } #livemind-canvas-app-container .ref-label-container.editing .ref-label-input { display: block; } #livemind-canvas-app-container .canvas-context-controls { display: flex; align-items: center; gap: 8px; } #livemind-canvas-app-container .canvas-context-controls .context-field { display: flex; align-items: center; gap: 6px; background-color: rgba(63,63,70,0.55); border-radius: 0.55rem; padding: 4px 8px; color: #f4f4f5; font-size: 0.75rem; } #livemind-canvas-app-container .canvas-context-controls .context-field input, #livemind-canvas-app-container .canvas-context-controls .context-field select { background: transparent; border: none; color: inherit; font-size: 0.8rem; outline: none; min-width: 48px; } #livemind-canvas-app-container .canvas-context-controls .context-field input[type="number"]::-webkit-inner-spin-button, #livemind-canvas-app-container .canvas-context-controls .context-field input[type="number"]::-webkit-outer-spin-button { opacity: 1; } #livemind-canvas-app-container .canvas-context-controls .context-field input[type="color"] { width: 32px; height: 24px; padding: 0; border-radius: 0.4rem; } #livemind-canvas-app-container .canvas-context-controls .context-field select { background-color: rgba(17, 17, 20, 0.95); border: 1px solid rgba(82, 82, 91, 0.9); border-radius: 0.45rem; padding: 4px 28px 4px 12px; min-width: 130px; color: #f8fafc; font-weight: 600; appearance: none; cursor: pointer; } #livemind-canvas-app-container .canvas-context-controls .context-field select:hover { border-color: rgba(129, 140, 248, 0.7); } #livemind-canvas-app-container .canvas-context-controls .context-field select:focus { outline: 2px solid rgba(99, 102, 241, 0.55); outline-offset: 1px; } #livemind-canvas-app-container .canvas-context-controls .context-field select option { background-color: #18181b; color: #f8fafc; font-weight: 600; } #livemind-canvas-app-container .canvas-text-content { color: #ffffff; font-size: 32px; font-weight: 600; line-height: 1.2; min-width: 120px; min-height: 48px; padding: 4px 8px; border: 1px solid rgba(255,255,255,0); border-radius: 0.5rem; background-color: rgba(24,24,27,0.35); outline: none; white-space: pre-wrap; word-break: break-word; transition: border-color 0.15s ease, background-color 0.15s ease; } #livemind-canvas-app-container .canvas-image.selected .canvas-text-content { border-color: rgba(99,102,241,0.6); background-color: rgba(24,24,27,0.55); } @keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } #livemind-canvas-app-container .placeholder-shimmer { background: linear-gradient(to right, #27272a 8%, #3f3f46 18%, #27272a 33%); background-size: 800px 104px; animation: shimmer 1.5s linear infinite; } #livemind-canvas-app-container .video-progress-overlay, #livemind-canvas-app-container .image-progress-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(24, 24, 27, 0.8); display: flex; align-items: center; justify-content: center; border-radius: 0.375rem; z-index: 1; color: #a1a1aa; font-size: 0.6rem; font-weight: 600; text-align: center; pointer-events: none; } /* Hardened Generate Button Styles - !important to prevent site CSS overrides */ #livemind-canvas-app-container #generate-btn, #livemind-canvas-app-container button#generate-btn { background-color: #2563eb !important; border: 1px solid #2563eb !important; color: #ffffff !important; transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.5rem !important; position: relative !important; padding: 0.5rem 1.5rem !important; border-radius: 0.375rem !important; font-size: 0.875rem !important; font-weight: 600 !important; cursor: pointer !important; text-decoration: none !important; line-height: 1.5 !important; font-family: 'Inter', sans-serif !important; } #livemind-canvas-app-container #generate-btn:hover:not(:disabled), #livemind-canvas-app-container button#generate-btn:hover:not(:disabled), #livemind-canvas-app-container #generate-btn:focus-visible:not(:disabled), #livemind-canvas-app-container button#generate-btn:focus-visible:not(:disabled) { background-color: #2563eb !important; border-color: #2563eb !important; color: #ffffff !important; box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.35) !important; } #livemind-canvas-app-container #generate-btn:disabled, #livemind-canvas-app-container button#generate-btn:disabled { background-color: #1e3a8a !important; border-color: #1e3a8a !important; color: rgba(255, 255, 255, 0.6) !important; cursor: not-allowed !important; box-shadow: none !important; } #livemind-canvas-app-container #generate-btn.generating, #livemind-canvas-app-container button#generate-btn.generating { pointer-events: none !important; cursor: not-allowed !important; } #livemind-canvas-app-container #generate-btn svg, #livemind-canvas-app-container button#generate-btn svg { flex-shrink: 0 !important; margin-right: 0.5rem !important; } #livemind-canvas-app-container #generate-btn:not(.generating) #generate-icon { display: inline-block !important; } #livemind-canvas-app-container #generate-btn #loading-spinner { display: none !important; visibility: hidden !important; opacity: 0 !important; } #livemind-canvas-app-container #generate-btn.generating #loading-spinner { display: inline-block !important; visibility: visible !important; opacity: 1 !important; } #livemind-canvas-app-container #generate-btn.generating #generate-icon { display: none !important; } /* Hardened Create Process Node Button Styles - !important to prevent site CSS overrides */ #livemind-canvas-app-container #create-process-node-btn, #livemind-canvas-app-container button#create-process-node-btn { background-color: #9333ea !important; background: #9333ea !important; color: #ffffff !important; border: 1px solid #9333ea !important; padding: 0.25rem 0.5rem !important; border-radius: 0.25rem !important; font-size: 0.75rem !important; font-weight: 500 !important; cursor: pointer !important; transition: background-color 0.2s ease, border-color 0.2s ease !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1.5 !important; text-decoration: none !important; font-family: 'Inter', sans-serif !important; box-sizing: border-box !important; } #livemind-canvas-app-container #create-process-node-btn:hover, #livemind-canvas-app-container button#create-process-node-btn:hover { background-color: #7e22ce !important; background: #7e22ce !important; border-color: #7e22ce !important; } #livemind-canvas-app-container #create-process-node-btn:active, #livemind-canvas-app-container button#create-process-node-btn:active { background-color: #6b21a8 !important; background: #6b21a8 !important; } #livemind-canvas-app-container #create-process-node-btn:disabled, #livemind-canvas-app-container button#create-process-node-btn:disabled { background-color: #6b21a8 !important; background: #6b21a8 !important; opacity: 0.6 !important; cursor: not-allowed !important; } #livemind-canvas-app-container #create-process-node-btn i, #livemind-canvas-app-container button#create-process-node-btn i { font-size: inherit !important; color: inherit !important; } #livemind-canvas-app-container #canvasdropzome { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background-color: rgba(24, 24, 27, 0.82); border: 2px dashed rgba(99, 102, 241, 0.5); z-index: 5; pointer-events: none; transition: opacity 0.2s ease; } #livemind-canvas-app-container #canvasdropzome.visible { display: flex; } #livemind-canvas-app-container #canvasdropzome span { pointer-events: none; font-size: 1.1rem; font-weight: 600; color: #c7d2fe; } /* Custom Model Form Styles (omnimodel-compatible) */ #livemind-canvas-app-container .form-field { margin-bottom: 1rem; } #livemind-canvas-app-container .form-field label { display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 0.375rem; color: #e4e4e7; letter-spacing: 0.01em; } #livemind-canvas-app-container .form-field label .required { color: #f87171; margin-left: 0.25rem; font-weight: 700; } #livemind-canvas-app-container .form-field small { display: block; font-size: 0.72rem; color: #a1a1aa; margin-top: 0.375rem; line-height: 1.5; } #livemind-canvas-app-container #custom-model-promoted-fields .form-field { margin-top: 0; margin-bottom: 0.5rem; } #livemind-canvas-app-container #custom-model-promoted-fields button.secondary { display: none; } #livemind-canvas-app-container #custom-model-promoted-fields .file-input-group { margin: 0; padding: 0; } #livemind-canvas-app-container #custom-model-promoted-fields button.danger { display: none; } #livemind-canvas-app-container #custom-model-promoted-fields .form-field label { display: none !important; } #livemind-canvas-app-container #custom-model-promoted-fields .form-field input[type="text"], #livemind-canvas-app-container #custom-model-promoted-fields .form-field input[type="url"], #livemind-canvas-app-container #custom-model-promoted-fields .form-field textarea { background-color: white; color: black; border: 1px solid #d4d4d8; } #livemind-canvas-app-container #custom-model-promoted-fields .form-field input[type="text"]:focus, #livemind-canvas-app-container #custom-model-promoted-fields .form-field input[type="url"]:focus, #livemind-canvas-app-container #custom-model-promoted-fields .form-field textarea:focus { outline: none; border-color: #3b82f6; background-color: white; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2); } #livemind-canvas-app-container #custom-model-promoted-fields .form-field input::placeholder, #livemind-canvas-app-container #custom-model-promoted-fields .form-field textarea::placeholder { color: #a1a1aa; } #livemind-canvas-app-container .form-field input[type="text"], #livemind-canvas-app-container .form-field input[type="url"], #livemind-canvas-app-container .form-field input[type="number"], #livemind-canvas-app-container .form-field textarea, #livemind-canvas-app-container .form-field select { width: 100%; background-color: rgba(39, 39, 42, 0.85); border: 1px solid rgba(63, 63, 70, 0.9); border-radius: 0.5rem; padding: 0.5rem 0.75rem; font-size: 0.85rem; color: #f4f4f5; transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; font-family: 'Inter', sans-serif; } #livemind-canvas-app-container .form-field input[type="text"]:focus, #livemind-canvas-app-container .form-field input[type="url"]:focus, #livemind-canvas-app-container .form-field input[type="number"]:focus, #livemind-canvas-app-container .form-field textarea:focus, #livemind-canvas-app-container .form-field select:focus { outline: none; border-color: rgba(99, 102, 241, 0.7); background-color: rgba(39, 39, 42, 0.95); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); } #livemind-canvas-app-container .form-field input[type="checkbox"] { width: auto; margin-right: 0.5rem; accent-color: #6366f1; cursor: pointer; } #livemind-canvas-app-container .form-field textarea { resize: vertical; min-height: 72px; } #livemind-canvas-app-container .form-field select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23a1a1aa' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E"); background-position: right 0.5rem center; background-repeat: no-repeat; background-size: 1.5em 1.5em; padding-right: 2.5rem; } #livemind-canvas-app-container .form-field select option { background-color: #27272a; color: #f4f4f5; } #livemind-canvas-app-container .file-input-group { display: inline-flex !important; flex: 0 0 auto !important; /* Don't stretch */ gap: 0.5rem; align-items: center; flex-wrap: nowrap; position: relative !important; vertical-align: top; margin-right: 0.5rem; margin-bottom: 0.5rem; } #livemind-canvas-app-container .file-input-group input[type="file"] { display: none !important; } #livemind-canvas-app-container .file-input-group input[type="url"], #livemind-canvas-app-container .file-input-group input[type="text"] { display: none !important; /* Hide URL input field */ } /* Hide danger button (array remove button) */ #livemind-canvas-app-container .form-field button.danger { display: none !important; } /* Make parent containers of file-input-groups wrap properly */ #livemind-canvas-app-container .file-input-group-wrapper, #livemind-canvas-app-container .form-field > div:has(.file-input-group) { display: flex !important; flex-wrap: wrap !important; gap: 0.5rem !important; align-items: flex-start !important; } /* File select button - matches regular image slot styling EXACTLY */ #livemind-canvas-app-container .file-select-btn, #livemind-canvas-app-container .file-select-btn.secondary { width: 3rem !important; height: 3rem !important; min-width: 3rem !important; min-height: 3rem !important; flex-shrink: 0; padding: 0 !important; background-color: transparent !important; border: 2px dashed #52525b !important; color: #71717a !important; border-radius: 0.375rem !important; cursor: pointer; transition: border-color 0.2s, color 0.2s !important; display: flex !important; align-items: center !important; justify-content: center !important; order: -1; /* Place on the left */ font-size: 0 !important; /* Hide "Select File" text */ overflow: visible !important; position: relative !important; } /* Show icon via ::before */ #livemind-canvas-app-container .file-select-btn::before, #livemind-canvas-app-container .file-select-btn.secondary::before { font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; font-size: 1.25rem !important; line-height: 1 !important; color: #71717a !important; display: inline-block !important; } /* Font Awesome icons in the button content should still show */ #livemind-canvas-app-container .file-select-btn > i, #livemind-canvas-app-container .file-select-btn.secondary > i { font-size: 1.25rem !important; line-height: 1 !important; color: #71717a !important; display: inline-block !important; } #livemind-canvas-app-container .file-select-btn svg { width: 1.5rem; height: 1.5rem; } #livemind-canvas-app-container .file-select-btn svg.animate-spin { animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } #livemind-canvas-app-container .file-select-btn:hover:not(:disabled), #livemind-canvas-app-container .file-select-btn.secondary:hover:not(:disabled) { border-color: #71717a !important; color: #a1a1aa !important; background-color: transparent !important; } #livemind-canvas-app-container .file-select-btn:disabled, #livemind-canvas-app-container .file-select-btn.secondary:disabled { opacity: 0.4; cursor: not-allowed; } #livemind-canvas-app-container .file-select-btn.uploading, #livemind-canvas-app-container .file-select-btn.secondary.uploading { border-color: #f59e0b !important; color: #f59e0b !important; } /* Media preview thumbnail - matches regular image slot styling */ #livemind-canvas-app-container .file-input-group .media-preview { order: -1 !important; /* Place on the left */ position: relative !important; width: 3rem !important; height: 3rem !important; min-width: 3rem !important; min-height: 3rem !important; flex-shrink: 0 !important; border-radius: 0.375rem !important; overflow: visible !important; /* Allow button to show outside */ } #livemind-canvas-app-container .file-input-group .media-preview img, #livemind-canvas-app-container .file-input-group .media-preview video { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0.375rem; pointer-events: none; } /* Hide the omnimodel-generated label and button */ #livemind-canvas-app-container .file-input-group .media-preview-label { display: none !important; } #livemind-canvas-app-container .file-input-group .media-preview-remove { display: none !important; } /* Clear button from addClearButtonsToMediaInputs - position in top-left corner of PREVIEW */ #livemind-canvas-app-container .file-input-group .media-preview ~ .media-clear-btn, #livemind-canvas-app-container .file-input-group .media-clear-btn { position: absolute !important; top: -0.25rem !important; left: -0.25rem !important; transform: none !important; background-color: #ef4444 !important; color: white !important; width: 1.25rem !important; height: 1.25rem !important; border-radius: 9999px !important; font-size: 0.75rem !important; display: flex !important; align-items: center !important; justify-content: center !important; opacity: 0 !important; transition: opacity 0.2s !important; cursor: pointer !important; line-height: 1 !important; padding: 0 !important; border: none !important; z-index: 10 !important; } #livemind-canvas-app-container .file-input-group:hover .media-clear-btn { opacity: 1 !important; } #livemind-canvas-app-container .file-input-group .media-clear-btn:hover { background-color: #b91c1c !important; } /* Hide select button when preview is shown */ #livemind-canvas-app-container .file-input-group:has(.media-preview.visible) .file-select-btn { display: none !important; } #livemind-canvas-app-container button.secondary { background-color: rgba(63, 63, 70, 0.85); border: 1px solid rgba(82, 82, 91, 0.9); color: #f4f4f5; padding: 0.5rem 1rem; border-radius: 0.5rem; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease; font-family: 'Inter', sans-serif; } #livemind-canvas-app-container button.secondary:hover:not(:disabled) { background-color: rgba(82, 82, 91, 0.95); border-color: rgba(99, 102, 241, 0.6); transform: translateY(-1px); } #livemind-canvas-app-container button.secondary:active:not(:disabled) { transform: translateY(0); } #livemind-canvas-app-container button.danger { background-color: #dc2626; border: 1px solid #dc2626; color: #ffffff; padding: 0.5rem 0.75rem; border-radius: 0.5rem; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; min-width: 40px; font-family: 'Inter', sans-serif; } #livemind-canvas-app-container button.danger:hover:not(:disabled) { background-color: #b91c1c; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3); } #livemind-canvas-app-container button.danger:active:not(:disabled) { transform: translateY(0); } /* Media Preview Styles (for custom model file uploads) - styled like image prompt refs */ #livemind-canvas-app-container .file-input-group { position: relative; } #livemind-canvas-app-container .media-preview { display: none; position: relative; width: 3rem; height: 3rem; flex-shrink: 0; border-radius: 0.375rem; overflow: hidden; background-color: #18181b; } #livemind-canvas-app-container .media-preview.visible { display: block; } #livemind-canvas-app-container .media-preview img, #livemind-canvas-app-container .media-preview video { width: 100%; height: 100%; object-fit: cover; display: block; } #livemind-canvas-app-container .media-preview audio { width: 100%; height: 100%; background-color: #18181b; } #livemind-canvas-app-container .media-preview-label { display: none; } #livemind-canvas-app-container .media-preview-remove { position: absolute; top: -0.25rem; right: -0.25rem; background-color: #ef4444; color: #ffffff; width: 1.25rem; height: 1.25rem; border-radius: 9999px; font-size: 0.75rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.15s ease; border: none; line-height: 1; padding: 0; } #livemind-canvas-app-container .media-preview-remove:hover { background-color: #dc2626; } #livemind-canvas-app-container .video-play-overlay { display: none; } #livemind-canvas-app-container .video-play-overlay i { font-size: 1.1rem; line-height: 1; } #livemind-canvas-app-container .video-play-overlay.video-overlay-hidden { opacity: 0; transform: translate(-50%, -50%) scale(0.92); } /* Hide play button in queue items */ #livemind-canvas-app-container .queue-image-container .video-play-overlay { display: none; } /* Hide native volume controls while keeping playback UI */ #livemind-canvas-app-container video::-webkit-media-controls-volume-slider, #livemind-canvas-app-container video::-webkit-media-controls-volume-slider-container, #livemind-canvas-app-container video::-webkit-media-controls-mute-button, #livemind-canvas-app-container video::-webkit-media-controls-volume-control-hover-background, #livemind-canvas-app-container video::-webkit-media-controls-volume-control-container { display: none !important; } #livemind-canvas-app-container video::-moz-range-track, #livemind-canvas-app-container video::-moz-range-thumb { display: none !important; } #livemind-canvas-app-container .upload-progress-overlay { position: absolute; inset: 0; background-color: rgba(24, 24, 27, 0.85); backdrop-filter: blur(4px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border-radius: 0.65rem; z-index: 150; padding: 14px; text-align: center; } #livemind-canvas-app-container .upload-progress-label { font-size: 0.64rem; font-weight: 600; color: #d4d4d8; } #livemind-canvas-app-container .upload-progress-percent { font-size: 0.6rem; font-weight: 600; color: #c7d2fe; } #livemind-canvas-app-container .upload-progress-bar { width: 80%; max-width: 220px; height: 6px; background-color: rgba(63, 63, 70, 0.65); border-radius: 999px; overflow: hidden; } #livemind-canvas-app-container .upload-progress-bar-inner { height: 100%; width: 0%; background: linear-gradient(90deg, #60a5fa, #34d399); transition: width 0.2s ease; } #livemind-canvas-app-container .upload-error-overlay { background-color: rgba(127, 29, 29, 0.85); } /* === CUSTOM MODEL PARAMS & ADVANCED SETTINGS STYLES === */ #livemind-canvas-app-container #custom-model-params { margin-top: 0.5rem; } #livemind-canvas-app-container #custom-model-params-toggle { cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; background-color: rgba(0, 0, 0, 0.2); border-radius: 0.375rem; transition: background-color 0.2s ease; } #livemind-canvas-app-container #custom-model-params-toggle:hover { background-color: rgba(0, 0, 0, 0.3); } #livemind-canvas-app-container #custom-model-params-content { background-color: rgba(0, 0, 0, 0.2); border-radius: 0.375rem; padding: 0.75rem; margin-top: 0.5rem; min-height: 100px; } #livemind-canvas-app-container #advanced-settings-section { margin-top: 0.5rem; } #livemind-canvas-app-container .advanced-settings-header { cursor: pointer; display: flex; align-items: center; gap: 0.5rem; font-size: 0.7rem; color: #a1a1aa; user-select: none; padding: 0.5rem 0.75rem; transition: color 0.2s ease, background-color 0.2s ease; background-color: rgba(0, 0, 0, 0.2); border-radius: 0.375rem; } #livemind-canvas-app-container .advanced-settings-header:hover { color: #d4d4d8; background-color: rgba(0, 0, 0, 0.3); } #livemind-canvas-app-container .advanced-settings-header i { font-size: 0.6rem; transition: transform 0.2s ease; } #livemind-canvas-app-container .advanced-settings-header.open i { transform: rotate(90deg); } #livemind-canvas-app-container .advanced-settings-content { display: none; margin-top: 0.5rem; padding: 0.75rem; background-color: rgba(0, 0, 0, 0.2); border: 1px solid rgba(63, 63, 70, 0.6); border-radius: 0.375rem; } #livemind-canvas-app-container .advanced-settings-content.open { display: block; } #livemind-canvas-app-container .advanced-setting-field { display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: 0.75rem; } #livemind-canvas-app-container .advanced-setting-field:last-child { margin-bottom: 0; } #livemind-canvas-app-container .advanced-setting-field label { font-size: 0.75rem; color: #d4d4d8; font-weight: 500; } #livemind-canvas-app-container .advanced-setting-field input[type="text"] { background-color: #27272a; border: 1px solid #3f3f46; color: #ffffff; border-radius: 0.25rem; padding: 0.375rem 0.5rem; font-size: 0.75rem; outline: none; transition: border-color 0.2s ease; } #livemind-canvas-app-container .advanced-setting-field input[type="text"]:focus { border-color: #2563eb; } /* === TIMELINE STYLES === */ #livemind-canvas-app-container #timeline-panel { box-shadow: 0 0 30px rgba(0,0,0,0.5); width: 100%; z-index: 30; margin: 0; display: none; flex-direction: column; } #livemind-canvas-app-container #timeline-panel.active { display: flex; } /*#livemind-canvas-app-container .canvas-image.linked::after { content: ''; position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; background: #7c3aed; border: 2px solid white; border-radius: 50%; z-index: 102; }*/ /* in style.css */ /* in style.css */ /* in style.css */ /* in style.css */ #livemind-canvas-app-container #canvas-links-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; transform-origin: 0 0; } #livemind-canvas-app-container .canvas-link-line { stroke: #64748b; stroke-width: 2; fill: none; opacity: 0.8; pointer-events: stroke; cursor: pointer; } #livemind-canvas-app-container .canvas-link-line:hover { stroke: #94a3b8; stroke-width: 3; opacity: 1; } #livemind-canvas-app-container .canvas-link-line.selected { stroke: #ef4444; stroke-width: 3; opacity: 1; } #livemind-canvas-app-container .canvas-link-line.active { stroke: #fbbf24; stroke-width: 3; opacity: 1; } #livemind-canvas-app-container .canvas-link-arrow { fill: #64748b; opacity: 0.8; pointer-events: none; } #livemind-canvas-app-container .canvas-link-line.selected + .canvas-link-arrow { fill: #ef4444; } #livemind-canvas-app-container .canvas-link-line.active + .canvas-link-arrow { fill: #fbbf24; } /* New Timeline Core Setup */ #livemind-canvas-app-container .timeline-view { flex: 1; background: #1a1a1a; position: relative; overflow: hidden; display: flex; flex-direction: column; user-select: none; touch-action: none; } #livemind-canvas-app-container #timeline-ruler { width: 100%; height: 30px; background-color: #1f1f1f; position: relative; z-index: 20; cursor: text; } #livemind-canvas-app-container .timeline-content { flex: 1; position: relative; overflow: hidden; } #livemind-canvas-app-container #timeline-tracks-container { position: absolute; top: 0; left: 0; width: 100%; will-change: transform; } /* Timeline Tracks */ #livemind-canvas-app-container .track { position: absolute; width: 100%; box-sizing: border-box; } #livemind-canvas-app-container .track.content-track { height: 72px; background-color: #3a3a3a; } #livemind-canvas-app-container .track.separator-track { height: 15px; background-color: #333333; } /* Timeline Playhead */ #livemind-canvas-app-container .timeline-playhead { position: absolute; top: 0; height: 100%; width: 2px; background-color: #ff4d4d; z-index: 30; will-change: transform; cursor: grab; pointer-events: none; } #livemind-canvas-app-container .timeline-playhead::before { content: ''; position: absolute; top: 0; left: -6px; width: 14px; height: 30px; background: #ff4d4d; clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%); pointer-events: all; } #livemind-canvas-app-container .timeline-playhead.dragging::before { cursor: grabbing; } /* Timeline Clips/Nodes */ #livemind-canvas-app-container .timeline-node { position: absolute; top: 5%; height: 90%; background-color: #4A90E2; border-radius: 4px; border: 1px solid rgba(0,0,0,0.5); box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; overflow: hidden; will-change: transform, width; transition: box-shadow 0.1s ease-in-out; cursor: grab; z-index: 5; } /* Grain texture overlay - anchored to clip's timeline position */ #livemind-canvas-app-container .timeline-node::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('data:image/svg+xml;utf8,'); background-size: 50px 50px; background-repeat: repeat; background-position: var(--grain-offset-x, 0) 0; opacity: 0.25; mix-blend-mode: multiply; pointer-events: none; z-index: 1; } #livemind-canvas-app-container .timeline-node.selected { border: 2px solid #5ea6ff; box-shadow: 0 0 15px rgba(94, 166, 255, 0.5); z-index: 10; } #livemind-canvas-app-container .timeline-node.active { border: 3px solid #fbbf24; box-shadow: 0 0 20px rgba(251, 191, 36, 0.8); z-index: 11; } #livemind-canvas-app-container .timeline-node.dragging { opacity: 0.5; z-index: 9; } #livemind-canvas-app-container .timeline-node-label { padding: 0 35px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; font-size: 0.9rem; pointer-events: none; transition: padding 0.1s ease-in-out; position: relative; z-index: 2; } #livemind-canvas-app-container .timeline-node-duration { font-size: 10px; color: rgba(255,255,255,0.7); padding: 0 8px; position: relative; z-index: 2; } /* Timeline Node Thumbnails */ #livemind-canvas-app-container .timeline-node-thumbnail { position: absolute; left: 35px; top: 50%; transform: translateY(-50%); height: 85%; border-radius: 3px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.3); pointer-events: none; z-index: 2; } #livemind-canvas-app-container .timeline-node-thumbnail img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Timeline Node Handles */ #livemind-canvas-app-container .timeline-node-handle { width: 30px; height: 100%; position: absolute; top: 0; cursor: ew-resize; background-color: rgba(0, 0, 0, 0.4); transition: opacity 0.1s ease-in-out; z-index: 100; } #livemind-canvas-app-container .timeline-node-handle.left { left: 0; border-right: 1px solid rgba(255,255,255,0.1); } #livemind-canvas-app-container .timeline-node-handle.right { right: 0; border-left: 1px solid rgba(255,255,255,0.1); } #livemind-canvas-app-container .timeline-node.handles-hidden .timeline-node-handle { display: none; } #livemind-canvas-app-container .timeline-node.handles-hidden .timeline-node-label { padding: 0 8px; } /* Drop Indicators */ #livemind-canvas-app-container .timeline-drop-indicator { position: absolute; top: 0; width: 2px; height: 100%; background-color: #ffff8d; z-index: 50; display: none; pointer-events: none; } #livemind-canvas-app-container .timeline-node.drop-target { border: 3px solid #10b981 !important; box-shadow: 0 0 20px rgba(16, 185, 129, 0.8); } /* Timeline SVG Links Layer */ #livemind-canvas-app-container #timeline-link-svg-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 15; overflow: visible; } /* Playback Controls */ #livemind-canvas-app-container .playback-controls { display: flex; gap: 12px; padding: 12px 20px; background: #111; border-bottom: 1px solid #333; align-items: center; } #livemind-canvas-app-container .playback-controls button { background-color: #333; color: #cccccc; border: 1px solid #555; padding: 10px 20px; font-size: 1rem; border-radius: 5px; cursor: pointer; transition: background-color 0.2s; } #livemind-canvas-app-container .playback-controls button:hover { background-color: #444; } #livemind-canvas-app-container .playback-controls button.secondary { background: #374151; } #livemind-canvas-app-container .playback-controls button.secondary:hover { background: #4b5563; } #livemind-canvas-app-container .timecode { font-family: 'Monaco', 'Courier New', monospace; font-size: 14px; color: #60a5fa; margin-left: auto; padding: 6px 12px; background: #1a1a1a; border-radius: 6px; } #livemind-canvas-app-container .upload-error-overlay .upload-progress-label { color: #fecaca; } #livemind-canvas-app-container .upload-remove-btn { background: rgba(248, 113, 113, 0.2); color: #fee2e2; border: 1px solid rgba(254, 202, 202, 0.35); border-radius: 999px; padding: 6px 14px; font-size: 0.75rem; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; } #livemind-canvas-app-container .upload-remove-btn:hover { background: rgba(248, 113, 113, 0.35); border-color: rgba(254, 202, 202, 0.5); } /* When timeline is visible, split container 50/50 top/bottom */ #livemind-canvas-app-container.timeline-visible #lm-canvas-main { flex: 1; } #livemind-canvas-app-container.timeline-visible #timeline-panel { flex: 1; } /* === VIEWPORT MODE STYLES === */ /* When viewport is also visible, wrap and split TOP panel left/right, timeline stays bottom full width */ #livemind-canvas-app-container.viewport-mode.timeline-visible .gomind-app-container { flex-direction: row; flex-wrap: wrap; } #livemind-canvas-app-container.viewport-mode.timeline-visible #lm-canvas-main { flex: 1; width: 50%; min-width: 50%; max-width: 50%; } #livemind-canvas-app-container.viewport-mode.timeline-visible #viewport-container { flex: 1; width: 50%; min-width: 50%; max-width: 50%; display: flex; background: #18181b; border-left: 1px solid #3f3f46; flex-direction: column; color: #a1a1aa; } #livemind-canvas-app-container.viewport-mode.timeline-visible #timeline-panel { flex: 1; width: 100%; min-width: 100%; } #livemind-canvas-app-container #viewport-container { display: none; } #livemind-canvas-app-container #viewport-display { flex: 1; display: flex; align-items: center; justify-content: center; background: #0a0a0a; position: relative; overflow: hidden; padding: 20px; } #livemind-canvas-app-container #viewport-stage { position: relative; background: #000; display: flex; align-items: center; justify-content: center; overflow: hidden; width: 100%; height: 100%; } #livemind-canvas-app-container #viewport-stage.aspect-16-9 { aspect-ratio: 16 / 9; width: 100%; height: auto; max-width: 100%; max-height: 100%; } #livemind-canvas-app-container #viewport-stage.aspect-9-16 { aspect-ratio: 9 / 16; height: 100%; width: auto; max-width: 100%; max-height: 100%; } #livemind-canvas-app-container #viewport-stage.aspect-1-1 { aspect-ratio: 1 / 1; width: 100%; height: auto; max-width: 100%; max-height: 100%; } #livemind-canvas-app-container #viewport-tools { display: flex; gap: 12px; padding: 12px 20px; background: #111; border-top: 1px solid #333; align-items: center; } #livemind-canvas-app-container #viewport-tools label { font-size: 14px; color: #d4d4d8; font-weight: 500; } #livemind-canvas-app-container #viewport-tools select { padding: 6px 12px; font-size: 14px; background: #2563eb; color: white; border: none; border-radius: 6px; cursor: pointer; transition: background 0.2s; } #livemind-canvas-app-container #viewport-tools select:hover { background: #1d4ed8; } #livemind-canvas-app-container #viewport-tools button { padding: 6px 12px; font-size: 14px; background-color: #333; color: #cccccc; border: 1px solid #555; border-radius: 4px; cursor: pointer; transition: background-color 0.2s; display: flex; align-items: center; gap: 6px; font-weight: 500; } #livemind-canvas-app-container #viewport-tools button:hover { background-color: #444; } #livemind-canvas-app-container #viewport-tools button:disabled { opacity: 0.6; cursor: not-allowed; } #livemind-canvas-app-container #viewport-tools button i { font-size: 14px; } /* === MOBILE RESPONSIVE STYLES === */ @media (max-width: 768px) { #livemind-canvas-app-container .playback-controls button .btn-text { display: none; } #livemind-canvas-app-container .playback-controls { gap: 10px; padding: 8px 8px; } #livemind-canvas-app-container .playback-controls button { padding: 5px 10px; } #livemind-canvas-app-container.viewport-mode.timeline-visible #lm-canvas-main { display: none; } #livemind-canvas-app-container.viewport-mode.timeline-visible #viewport-container { width: 100%; min-width: 100%; max-width: 100%; border-left: none; border-top: 1px solid #3f3f46; } #livemind-canvas-app-container #viewport-tools label { display: none; } #livemind-canvas-app-container #viewport-tools #export-gdl-btn span { display: none; } } #livemind-canvas-app-container #image-results > div[class*="text-red-400"], #livemind-canvas-app-container .queue-image-container > div { overflow-y: auto; overflow-x: hidden; word-break: break-word; overflow-wrap: anywhere; align-items: flex-start; white-space: normal; text-align: left; scrollbar-width: thin; scrollbar-color: #52525b transparent; } #livemind-canvas-app-container .queue-image-container.queue-error { background-color: rgba(24, 24, 27, 0.85); border: 1px solid rgba(127, 29, 29, 0.55); } #livemind-canvas-app-container .queue-error-message { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; max-width: 100%; overflow: hidden; overflow-y: auto; overflow-wrap: anywhere; word-break: break-word; white-space: normal; text-align: center; padding: 10px; gap: 6px; } #livemind-canvas-app-container .queue-error-message::-webkit-scrollbar { width: 6px; } #livemind-canvas-app-container .queue-error-message::-webkit-scrollbar-thumb { background-color: #52525b; border-radius: 3px; } #livemind-canvas-app-container .queue-image-container > .video-progress-overlay, #livemind-canvas-app-container .queue-image-container > .image-progress-overlay { align-items: center; justify-content: center; text-align: center; } /* --- Themed Scrollbar for Webkit browsers (Chrome, Safari) --- */ #livemind-canvas-app-container .queue-image-container > div::-webkit-scrollbar { width: 8px; } #livemind-canvas-app-container .queue-image-container > div::-webkit-scrollbar-track { background: transparent; } #livemind-canvas-app-container .queue-image-container > div::-webkit-scrollbar-thumb { background-color: #52525b; border-radius: 4px; border: 2px solid #18181B; /* Creates padding around thumb */ } /* Mobile responsive adjustments */ @media (max-width: 640px) { #livemind-canvas-app-container #generate-btn-text { display: none; } #livemind-canvas-app-container #generate-btn { padding: 0.5rem 1rem; } #livemind-canvas-app-container #generate-icon, #livemind-canvas-app-container #loading-spinner { margin-right: 0; } /* Better touch targets on mobile */ #livemind-canvas-app-container .resize-handle { width: 20px; height: 20px; } #livemind-canvas-app-container .resize-handle.br { bottom: -10px; right: -10px; } /* Larger timeline clip handles for mobile touch */ #livemind-canvas-app-container .timeline-node-handle { width: 20px; background: rgba(0, 0, 0, 0.4); } #livemind-canvas-app-container .timeline-node-handle.left { border-left-width: 3px; } #livemind-canvas-app-container .timeline-node-handle.right { border-right-width: 3px; } /* Mobile viewport mode - keep 50/50 split like desktop */ #livemind-canvas-app-container #left-toolbar .toolbar-button { width: 48px; height: 48px; } #livemind-canvas-app-container #session-menu .session-toggle { width: 48px; height: 48px; } /* Mobile: Prompt window sticks to bottom */ #livemind-canvas-app-container #prompt-window { bottom: 0; padding-left: 1rem; padding-right: 1rem; } #livemind-canvas-app-container #generation-panel { border-radius: 1rem 1rem 0 0; } /* Button position on mobile - at absolute bottom */ #livemind-canvas-app-container #mobile-bottom-buttons { bottom: 1rem !important; } #livemind-canvas-app-container #mobile-generate-btn, #livemind-canvas-app-container #open-in-latent-btn, #livemind-canvas-app-container #mobile-timeline-btn { height: 48px; } /* Mobile: Model selectors - compact to fit on one line */ #livemind-canvas-app-container #media-type-select, #livemind-canvas-app-container #model-select { max-width: 100px; font-size: 0.75rem; padding: 0.375rem 0.5rem; flex-shrink: 1; min-width: 70px; } /* Mobile: Keep all controls on same line - no wrapping */ #livemind-canvas-app-container #generation-panel .flex.flex-wrap.items-center.gap-4 { gap: 0.5rem; } #livemind-canvas-app-container #generation-panel .flex.items-center.gap-2.flex-shrink-0 { flex-wrap: nowrap; gap: 0.375rem; flex-shrink: 1; } /* Mobile: Remove button compact */ #livemind-canvas-app-container #remove-custom-model-btn { padding: 0.375rem 0.5rem; font-size: 0.75rem; min-width: 32px; } /* Mobile: Add model button - just show plus icon */ #livemind-canvas-app-container #add-custom-model-btn { width: auto; margin-top: 0; padding: 0.375rem 0.5rem; min-width: 32px; } #livemind-canvas-app-container #add-custom-model-btn i { margin: 0; } #livemind-canvas-app-container #add-custom-model-btn::after { content: none; } /* Hide "Add Model" text on mobile */ #livemind-canvas-app-container #add-custom-model-btn { font-size: 0; } #livemind-canvas-app-container #add-custom-model-btn i { font-size: 0.875rem; } /* Mobile: Ensure custom model params content is scrollable */ #livemind-canvas-app-container #custom-model-params-content { min-height: 150px; max-height: 40vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Mobile: Make generate button small with just icon */ #livemind-canvas-app-container #generate-btn { padding: 0.5rem; width: auto; min-width: 40px; } #livemind-canvas-app-container #generate-btn svg { width: 1.25rem; height: 1.25rem; margin: 0; } } /* Touch-friendly improvements for all devices */ #livemind-canvas-app-container { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; touch-action: none; } #livemind-canvas-app-container #canvas-container { touch-action: none; -webkit-user-drag: none; } #livemind-canvas-app-container .canvas-image { touch-action: none; } /* Allow horizontal scrolling on queue */ #livemind-canvas-app-container #image-results { touch-action: pan-x; } #livemind-canvas-app-container .queue-image-container { touch-action: manipulation; } /* Allow text selection in text content and inputs */ #livemind-canvas-app-container input, #livemind-canvas-app-container textarea, #livemind-canvas-app-container .canvas-text-content { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; touch-action: auto; } /* Loading progress bar */ #asset-loading-progress { position: fixed; bottom: 0; left: 0; width: 100%; height: 6px; background-color: transparent; z-index: 999999; pointer-events: none; } #asset-loading-progress-bar { height: 100%; width: 0%; background-color: #3b82f6; transition: width 0.3s ease; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }