#anomalous-trigger-btn { position: fixed; bottom: 30px; right: 30px; width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, #1e1e1e 0%, #333 100%); color: var(--fg-color, #fff); border: 2px solid #555; font-size: 28px; cursor: pointer; z-index: 2147483000 !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.1); display: flex; visibility: visible !important; opacity: 1 !important; align-items: center; justify-content: center; user-select: none; transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); } #anomalous-trigger-btn:hover { transform: scale(1.15) translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7), inset 0 2px 4px rgba(255, 255, 255, 0.2); border-color: #888; } #anomalous-trigger-btn.anomalous-trigger-error { border-color: #ff9f43; box-shadow: 0 4px 15px rgba(255, 159, 67, 0.35), inset 0 2px 4px rgba(255, 255, 255, 0.1); } #anomalous-modal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 10000; display: none; } #anomalous-modal.visible { display: block; } #anomalous-container { width: 90%; height: 90%; background: var(--bg-color, #222); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8); pointer-events: auto; position: absolute; left: 5%; top: 5%; container-type: inline-size; font-size: calc(16px * var(--anomalous-scale, 1)); } .anomalous-docked { left: 0 !important; top: 0 !important; height: 100% !important; width: 660px !important; border-radius: 0 !important; transition: all 0.3s ease; } #anomalous-header { height: 60px; background: var(--comfy-menu-bg, #333); display: flex; align-items: center; padding: 0 50px 0 20px; border-bottom: 1px solid var(--border-color, #555); cursor: move; position: relative; } #anomalous-settings-panel { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); z-index: 9999; align-items: center; justify-content: center; } #anomalous-settings-box { background: var(--comfy-menu-bg, #2a2a2a); border: 1px solid var(--border-color, #444); padding: 30px; border-radius: 12px; display: flex; flex-direction: column; gap: 15px; min-width: 300px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8); } .anomalous-resize-handle { position: absolute; bottom: 0; right: 0; width: 20px; height: 20px; cursor: se-resize; z-index: 10000; } .anomalous-resize-handle::after { content: ''; position: absolute; bottom: 4px; right: 4px; width: 10px; height: 10px; border-right: 2px solid #666; border-bottom: 2px solid #666; } .anomalous-header-group { display: flex; align-items: center; gap: 12px; } #anomalous-header button { margin-right: 0; padding: 10px 18px; background: rgba(255, 255, 255, 0.05); color: #fff; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 8px; font-size: 1.05em; transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); } #anomalous-header button:hover { background: rgba(255, 255, 255, 0.15); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); border-color: rgba(255, 255, 255, 0.3); } /* Sidebar toggle logic for top buttons ONLY in narrow mode */ @container (max-width: 900px) { #anomalous-notebook-btn .anomalous-btn-text { display: none; } } #anomalous-close { font-size: 2em; cursor: pointer; color: var(--error-text, #ff4444); position: absolute; right: 20px; flex-shrink: 0; } #anomalous-grid { flex: 1; padding: 20px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 25px; row-gap: 40px; align-content: flex-start; } .anomalous-card { position: relative; background: var(--comfy-menu-bg, #333); border: 1px solid var(--border-color, #444); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; height: 420px; height: 420px; transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); } .anomalous-card:hover { transform: translateY(-5px); border-color: var(--fg-color, #fff); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5); transition-delay: 0.08s; } .anomalous-card img, .anomalous-card video { width: 100%; height: 340px; object-fit: cover; } #anomalous-container.anomalous-sidebar-closed #anomalous-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 15px; row-gap: 30px; } #anomalous-container.anomalous-sidebar-closed .anomalous-card { height: 380px; } #anomalous-container.anomalous-sidebar-closed .anomalous-card img, #anomalous-container.anomalous-sidebar-closed .anomalous-card video { height: 300px; } .anomalous-card-title { padding: 10px; color: var(--fg-color, #fff); font-size: 0.9em; text-align: center; word-break: break-all; } #anomalous-content { display: flex; flex-direction: column; flex: 1; overflow: hidden; } #anomalous-container { flex-direction: row; } #anomalous-sidebar-wrapper { width: 250px; background: var(--comfy-menu-bg, #2a2a2a); border-right: 1px solid var(--border-color, #444); display: flex; flex-direction: column; transition: width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); } .anomalous-sidebar-closed #anomalous-sidebar-wrapper { width: 60px; } .anomalous-sidebar-closed #anomalous-sidebar-wrapper>div:first-child div { display: none; /* Hides "Anomalous Browser" text */ } .anomalous-sidebar-closed #anomalous-sidebar { opacity: 0; pointer-events: none; overflow: hidden; } .anomalous-sidebar-closed #anomalous-sidebar-actions { flex-direction: column !important; } #anomalous-sidebar { flex: 1; overflow-y: auto; display: flex; flex-direction: column; transition: opacity 0.2s; } #anomalous-settings { border-top: 1px solid var(--border-color, #444); background: var(--bg-color, #111); } .anomalous-lang-btn { width: 100% !important; border: 2px solid #555 !important; padding: 12px !important; font-weight: bold; border-radius: 4px !important; background: #1a1a1a !important; cursor: pointer; color: #fff; margin-bottom: 15px; } .anomalous-type-header { padding: 10px 15px; background: var(--bg-color, #111); color: var(--fg-color, #fff); font-weight: bold; font-size: 0.9em; border-top: 1px solid var(--border-color, #444); border-bottom: 1px solid var(--border-color, #444); } .anomalous-folder-item { padding: 8px 15px; color: var(--fg-color, #ccc); cursor: pointer; font-size: 0.9em; transition: background 0.2s; } .anomalous-folder-item:hover { background: var(--bg-color, #333); } .anomalous-folder-item.active { background: var(--bg-color, #444); color: var(--fg-color, #fff); font-weight: bold; border-left: 3px solid #007bff; } #anomalous-detail { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--bg-color, #222); } .anomalous-split-container { flex: 1; display: flex; flex-direction: row; overflow: hidden; } .anomalous-split-left { width: 40%; display: flex; align-items: center; justify-content: center; background: #000; overflow: hidden; } .anomalous-resizer { width: 5px; background: var(--border-color, #444); cursor: col-resize; transition: background 0.2s; } .anomalous-resizer:hover { background: #007bff; } .anomalous-split-right { width: 60%; background: var(--bg-color, #222); overflow: auto; } .anomalous-card { cursor: pointer; } .anomalous-folder-toggle { cursor: pointer; user-select: none; } #anomalous-api-key { background: #333; border: 1px solid #555; color: #fff; padding: 8px; border-radius: 4px; width: 150px; margin-right: 15px; } #anomalous-api-key::placeholder { color: #999; } @container (max-width: 750px) { #anomalous-header button .anomalous-btn-text { display: none; } .anomalous-split-left, .anomalous-resizer { display: none !important; } .anomalous-split-right { width: 100% !important; } .anomalous-nb-sidebar { width: 80px !important; min-width: 80px !important; } .anomalous-nb-sidebar .anomalous-nb-item { font-size: 0.8em; padding: 8px 4px; text-align: center; overflow: hidden; text-overflow: ellipsis; } .anomalous-nb-create-text { display: none; } } /* English Layout Specific Scaling */ .anomalous-lang-en { font-size: 0.9em; } .anomalous-lang-en #anomalous-header button { padding: 10px 16px; font-size: 1.05em; } .anomalous-lang-en .anomalous-card-title { font-size: 0.85em; } .anomalous-lang-en #anomalous-title { font-size: 1.1em; } /* Compatible Models Section */ .anomalous-compatible-section { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border-color, #444); } .anomalous-compatible-title { color: var(--fg-color, #fff); font-size: 1.1em; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } .anomalous-compatible-list { display: flex; flex-wrap: wrap; gap: 10px; } .anomalous-compatible-item { background: var(--comfy-menu-bg, #333); border: 1px solid var(--border-color, #555); border-radius: 6px; padding: 6px 10px; display: flex; align-items: center; gap: 8px; cursor: pointer; transition: all 0.2s; max-width: 200px; } .anomalous-compatible-item:hover { border-color: #007bff; background: var(--bg-color, #444); transform: translateY(-2px); } .anomalous-compatible-item img, .anomalous-compatible-item video { width: 30px; height: 30px; object-fit: cover; border-radius: 4px; } .anomalous-compatible-item-name { color: var(--fg-color, #fff); font-size: 0.85em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; } /* Notebook UI */ .anomalous-nb-modal { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); z-index: 10001; display: flex; align-items: center; justify-content: center; } .anomalous-nb-container { width: 95%; height: 95%; background: var(--bg-color, #222); border: 1px solid var(--border-color, #444); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8); } .anomalous-nb-header { height: 50px; background: var(--comfy-menu-bg, #333); border-bottom: 1px solid #444; display: flex; align-items: center; padding: 0 20px; justify-content: space-between; color: #fff; } .anomalous-nb-close { font-size: 2em; cursor: pointer; color: #ff4444; } .anomalous-nb-body { flex: 1; display: flex; overflow: hidden; container-type: inline-size; } .anomalous-nb-sidebar { width: 250px; background: #111; border-right: 1px solid #444; display: flex; flex-direction: column; transition: width 0.3s; } .anomalous-nb-create-row { min-width: 0; box-sizing: border-box; align-items: center; } .anomalous-nb-create-input { min-width: 0; width: 0; box-sizing: border-box; } .anomalous-nb-create-row > button { flex: 0 0 auto; min-width: 0; } @container (max-width: 600px) { .anomalous-nb-sidebar { width: 140px; } .anomalous-nb-create-text { display: none; } } .anomalous-nb-list { flex: 1; overflow-y: auto; padding: 10px; } .anomalous-nb-item { padding: 10px; color: #ccc; cursor: pointer; border-radius: 4px; margin-bottom: 5px; background: #222; display: flex; align-items: center; white-space: nowrap; overflow: hidden; font-size: 1.1em; } .anomalous-nb-item-icon { flex-shrink: 0; } .anomalous-nb-item-text { flex: 1; text-overflow: ellipsis; overflow: hidden; } .anomalous-nb-item:hover { background: #333; } .anomalous-nb-item.active { background: #007bff; color: #fff; font-weight: bold; } .anomalous-nb-editor { flex: 1; background: #222; overflow-y: auto; padding: 20px; color: #eee; } .anomalous-nb-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .anomalous-nb-prompt-toolbar { display: flex; gap: 10px; margin-bottom: 10px; align-items: center; flex-wrap: wrap; } #anomalous-container.anomalous-docked .anomalous-nb-prompt-toolbar select { flex: 1 1 100%; } .anomalous-btn-primary { background: #007bff; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; margin-left: 5px; } .anomalous-btn-danger { background: #dc3545; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; margin-left: 5px; } .anomalous-btn-success { background: #28a745; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; margin-left: 5px; } .anomalous-nb-section { background: #2a2a2a; border: 1px solid #444; border-radius: 8px; padding: 15px; margin-bottom: 20px; } .anomalous-nb-row { margin-bottom: 10px; } .anomalous-nb-select { background: #111; color: #fff; padding: 6px; border: 1px solid #555; border-radius: 4px; } .anomalous-nb-gallery { display: flex; gap: 10px; overflow-x: auto; padding: 10px 0; } .anomalous-nb-gallery-wrap { display: flex; gap: 10px; flex-wrap: wrap; padding: 10px 0; } .anomalous-nb-minicheck, .anomalous-nb-minilora { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; background: #2a2a2a; border: 1px solid #444; border-radius: 8px; cursor: pointer; flex: 1 1 220px; max-width: 320px; transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); } .anomalous-nb-minicheck:hover, .anomalous-nb-minilora:hover { border-color: #888; background: #383838; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); transition-delay: 0.08s; } .anomalous-nb-minicheck.selected, .anomalous-nb-minilora.selected { border-color: #00ffcc; background: rgba(0, 255, 204, 0.15); box-shadow: 0 0 12px rgba(0, 255, 204, 0.2); } .anomalous-nb-minicheck img, .anomalous-nb-minicheck video, .anomalous-nb-minilora img, .anomalous-nb-minilora video { width: 52px; height: 52px; object-fit: cover; border-radius: 6px; flex-shrink: 0; } .anomalous-nb-minicheck-name, .anomalous-nb-minilora-name { color: #eee; font-size: 0.95em; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; text-align: left; } .anomalous-nb-minicheck.selected .anomalous-nb-minicheck-name, .anomalous-nb-minilora.selected .anomalous-nb-minilora-name { color: #00ffcc; font-weight: bold; } .anomalous-nb-textarea { width: 100%; height: 60px; background: #111; color: #fff; border: 1px solid #555; border-radius: 4px; padding: 8px; margin-top: 10px; resize: vertical; box-sizing: border-box; } .anomalous-nb-dual-pane { display: flex; flex-direction: column; width: 100%; background: #1a1a1a; padding: 10px; border-radius: 8px; border: 1px solid #444; box-sizing: border-box; } .anomalous-nb-tag-row { display: flex; gap: 15px; width: 100%; align-items: stretch; margin-bottom: 6px; } .anomalous-nb-gallery-box { background: #1e1e1e; border: 1px solid #444; border-radius: 8px; padding: 12px; margin-bottom: 15px; } .anomalous-nb-visual-tag { background: #2a2a2a; color: #eee; padding: 8px 12px; border-radius: 6px; border: 1px solid #444; cursor: pointer; transition: all 0.2s; min-height: 36px; display: flex; align-items: center; word-break: break-word; font-size: 0.95em; line-height: 1.4; } .anomalous-nb-visual-tag.hover { background: #3a3a3a; border-color: #00ffcc; color: #fff; box-shadow: inset 0 0 5px rgba(0, 255, 204, 0.2); } .anomalous-nb-copy-btn { opacity: 0.3; transition: all 0.2s; padding-left: 10px; flex-shrink: 0; user-select: none; } .anomalous-nb-visual-tag:hover .anomalous-nb-copy-btn { opacity: 1; } .anomalous-nb-copy-btn:hover { transform: scale(1.3); } .anomalous-nb-tag-edit { background: #111; color: #fff; border: 1px solid #00ffcc; border-radius: 4px; padding: 6px; width: 100%; font-size: 1em; box-sizing: border-box; } /* Gallery Styles */ #anomalous-gallery-panel { flex: 1; display: none; flex-direction: column; overflow: hidden; background: var(--bg-color, #222); } .anomalous-gallery-grid { flex: 1; padding: 20px; overflow-y: auto; display: grid; /* Fit ~4 items per row on expanded screens */ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 15px; align-content: flex-start; } #anomalous-container.anomalous-docked .anomalous-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 10px; } #anomalous-container.anomalous-docked .anomalous-gallery-card { height: 180px; } .anomalous-gallery-card { position: relative; background: #111; border: 1px solid #444; border-radius: 8px; overflow: hidden; cursor: pointer; /* Damped transition to prevent strobe effect */ transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); height: 250px; display: flex; flex-direction: column; } .anomalous-gallery-card:hover { transform: translateY(-3px); border-color: #007bff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); transition-delay: 0.08s; } .anomalous-gallery-card img { width: 100%; height: 100%; object-fit: contain; background: #000; } .anomalous-gallery-delete { position: absolute; top: 8px; right: 8px; background: rgba(220, 53, 69, 0.85); color: white; border: none; border-radius: 50%; width: 32px; height: 32px; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: all 0.2s; } .anomalous-gallery-card:hover .anomalous-gallery-delete { opacity: 1; } .anomalous-gallery-delete:hover { background: #ff0000; transform: scale(1.1); } .anomalous-gallery-sentinel { height: 40px; width: 100%; grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; color: #888; font-size: 0.9em; } .anomalous-gallery-viewer { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.95); z-index: 9999999; display: flex; align-items: center; justify-content: center; } .anomalous-gallery-viewer img { max-width: 95%; max-height: 95%; object-fit: contain; border-radius: 4px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.8); } .anomalous-gallery-viewer-close { position: absolute; top: 20px; right: 30px; font-size: 40px; color: #ccc; cursor: pointer; transition: color 0.2s; user-select: none; } .anomalous-gallery-viewer-close:hover { color: #fff; } @container (max-width: 750px) { .anomalous-nb-create-row { padding: 8px 6px !important; gap: 3px !important; } .anomalous-nb-create-row > button { width: 34px; min-width: 34px; padding: 8px 4px; } } .anomalous-nb-header-main, .anomalous-nb-section-tabs { display: flex; align-items: center; } .anomalous-nb-header-main { min-width: 0; gap: 18px; } .anomalous-nb-header-main h2 { margin: 0; white-space: nowrap; } .anomalous-nb-section-tabs { gap: 4px; padding: 3px; border-radius: 8px; background: rgba(0, 0, 0, 0.28); } .anomalous-nb-section-tab { padding: 5px 10px; border: 0; border-radius: 6px; background: transparent; color: #aaa; cursor: pointer; } .anomalous-nb-section-tab.active { background: #007bff; color: #fff; } /* Workflow Recipes: uses the Notebook modal shell while keeping cards compact. */ .anomalous-recipe-body { display: flex; flex: 1; min-height: 0; flex-direction: column; font-family: Inter, Roboto, "Segoe UI", sans-serif; } .anomalous-recipe-actionbar { display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid #3d3d3d; } .anomalous-recipe-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; overflow-y: auto; padding: 16px; } .anomalous-recipe-card { display: flex; min-width: 0; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; background: rgba(255, 255, 255, 0.05); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); backdrop-filter: blur(10px); transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .anomalous-recipe-card:hover { transform: translateY(-2px); border-color: rgba(112, 178, 255, 0.42); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); } .anomalous-recipe-card h3 { overflow: hidden; margin: 0; color: #f1f1f1; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; } .anomalous-recipe-thumbnail, .anomalous-recipe-dialog-preview, .anomalous-recipe-detail-hero video { width: 100%; border-radius: 7px; background: #111; object-fit: contain; } .anomalous-recipe-thumbnail { height: 148px; } .anomalous-recipe-summary { display: flex; min-width: 0; flex-direction: column; gap: 7px; color: #c9c9c9; font-size: 0.8rem; } .anomalous-recipe-model, .anomalous-recipe-prompt, .anomalous-recipe-notes { overflow: hidden; margin: 0; text-overflow: ellipsis; white-space: nowrap; } .anomalous-recipe-sampling, .anomalous-recipe-loras, .anomalous-recipe-tags, .anomalous-recipe-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .anomalous-recipe-actions button, .anomalous-recipe-detail-actions button, .anomalous-recipe-inline-controls button { border-radius: 8px; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } .anomalous-recipe-save-status { color: #8bd5ca; flex: 1 1 180px; line-height: 1.35; } .anomalous-recipe-save-status.is-warning { color: #ffcf70; } .anomalous-recipe-actions button:hover, .anomalous-recipe-detail-actions button:hover, .anomalous-recipe-inline-controls button:hover { transform: translateY(-1px); } .anomalous-recipe-copy-param.copied-success, .anomalous-recipe-actions button.copied-success, .anomalous-recipe-detail-actions button.copied-success { border-color: rgba(110, 231, 183, 0.7); color: #6ee7b7; } .anomalous-recipe-copy-param.copied-failure, .anomalous-recipe-actions button.copied-failure, .anomalous-recipe-detail-actions button.copied-failure { border-color: rgba(255, 153, 153, 0.7); color: #ff9999; } .anomalous-recipe-label { color: #999; } .anomalous-recipe-badge { max-width: 100%; overflow: hidden; padding: 3px 7px; border: 1px solid #4d4d4d; border-radius: 999px; color: #d4d4d4; font-size: 0.75rem; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; } .anomalous-recipe-badge-accent { border-color: rgba(0, 255, 204, 0.55); color: #00ffcc; } .anomalous-recipe-badge-lora { border-color: rgba(116, 173, 255, 0.55); color: #a9cdff; } .anomalous-recipe-badge-tag { color: #ffd493; } .anomalous-recipe-badge-module { border-color: rgba(189, 138, 255, 0.5); color: #cfadff; } .anomalous-recipe-node-details { margin-top: 2px; border-top: 1px solid #3c3c3c; padding-top: 7px; } .anomalous-recipe-node-details > summary { color: #a9cdff; cursor: pointer; user-select: none; } .anomalous-recipe-node-list { display: flex; flex-direction: column; gap: 8px; padding: 8px 2px 2px; } .anomalous-recipe-node { padding: 8px; border: 1px solid #3f3f3f; border-radius: 7px; background: rgba(0, 0, 0, 0.18); } .anomalous-recipe-node-heading, .anomalous-recipe-widget-row { display: flex; min-width: 0; align-items: center; gap: 6px; } .anomalous-recipe-node-heading { flex-wrap: wrap; margin-bottom: 5px; } .anomalous-recipe-widget-row { padding: 3px 0; } .anomalous-recipe-edit-param { display: grid; grid-template-columns: minmax(110px, 34%) minmax(0, 1fr); align-items: start; gap: 8px; padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .anomalous-recipe-edit-param .anomalous-nb-select, .anomalous-recipe-edit-param .anomalous-nb-textarea { width: 100%; margin: 0; box-sizing: border-box; } .anomalous-recipe-edit-param input[type="checkbox"] { width: auto; min-height: 22px; justify-self: start; } .anomalous-recipe-widget-name { flex: 0 0 34%; overflow: hidden; color: #aaa; text-overflow: ellipsis; white-space: nowrap; } .anomalous-recipe-widget-value { flex: 1; overflow: hidden; color: #eee; text-overflow: ellipsis; white-space: nowrap; } .anomalous-recipe-copy-param { border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.05); color: #9ec8ff; cursor: pointer; font-size: 1.15rem; padding: 6px; border-radius: 8px; transition: background-color 0.2s, color 0.2s, transform 0.1s, border-color 0.2s; display: flex; align-items: center; justify-content: center; } .anomalous-recipe-copy-param:hover { background: rgba(158, 200, 255, 0.15); border-color: rgba(158, 200, 255, 0.3); color: #cce0ff; } .anomalous-recipe-copy-param:active { transform: scale(0.95); } .anomalous-recipe-node-hint { display: block; margin-top: 4px; color: #888; } @container (max-width: 680px) { .anomalous-nb-header-main { gap: 8px; } .anomalous-nb-header-main h2 { display: none; } } .anomalous-recipe-notes { color: #aaa; font-size: 0.8rem; } .anomalous-recipe-empty { grid-column: 1 / -1; color: #aaa; text-align: center; } .anomalous-recipe-dialog-overlay { position: absolute; z-index: 10003; inset: 0; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(0, 0, 0, 0.62); } .anomalous-recipe-dialog { display: flex; width: min(620px, 100%); max-height: 100%; flex-direction: column; gap: 12px; overflow-y: auto; padding: 18px; border: 1px solid #555; border-radius: 10px; background: #272727; color: #eee; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6); } .anomalous-recipe-edit-dialog { width: min(760px, 100%); } .anomalous-recipe-dialog h3, .anomalous-recipe-dialog label { display: flex; flex-direction: column; gap: 6px; margin: 0; } .anomalous-recipe-dialog-preview { max-height: 180px; } .anomalous-recipe-save-section { display: flex; flex-direction: column; gap: 8px; } .anomalous-recipe-cover-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 7px; } .anomalous-recipe-cover-choice { display: flex; min-height: 66px; flex-direction: column; align-items: center; justify-content: center; gap: 4px; overflow: hidden; padding: 4px; border: 1px solid #4a4a4a; border-radius: 7px; background: #191919; color: #bbb; cursor: pointer; } .anomalous-recipe-cover-choice img { width: 100%; height: 58px; border-radius: 4px; object-fit: cover; } .anomalous-recipe-cover-choice.selected { border-color: #00ffcc; color: #00ffcc; box-shadow: inset 0 0 0 1px rgba(0, 255, 204, 0.35); } .anomalous-recipe-pin-picker { border: 1px solid #444; border-radius: 8px; padding: 9px; } .anomalous-recipe-pin-picker > summary { color: #a9cdff; cursor: pointer; } .anomalous-recipe-pin-list { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; } .anomalous-recipe-pin-node { position: sticky; top: 0; z-index: 1; padding: 5px 2px; background: #272727; color: #ddd; } .anomalous-recipe-pin-choice { display: flex; align-items: flex-start; gap: 7px; padding: 4px 6px; border-radius: 5px; color: #bbb; cursor: pointer; } .anomalous-recipe-pin-choice:hover { background: rgba(255, 255, 255, 0.06); } .anomalous-recipe-pinned { display: flex; flex-direction: column; gap: 3px; padding: 8px; border: 1px solid rgba(0, 255, 204, 0.3); border-radius: 7px; background: rgba(0, 255, 204, 0.05); } .anomalous-recipe-history-list { display: flex; flex-direction: column; gap: 7px; padding-top: 8px; } .anomalous-recipe-history-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px; border: 1px solid #3f3f3f; border-radius: 7px; color: #c9c9c9; font-size: 0.82rem; } .anomalous-recipe-history-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Recipe detail panel: one scroll owner inside the Notebook modal. */ .anomalous-recipe-detail-view { display: flex; min-height: 0; flex: 1; flex-direction: column; overflow: hidden; background: #202020; font-family: Inter, Roboto, "Segoe UI", sans-serif; } .anomalous-recipe-detail-header, .anomalous-recipe-detail-section-heading { display: flex; align-items: center; gap: 10px; } .anomalous-recipe-detail-header { flex: 0 0 auto; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #3d3d3d; } .anomalous-recipe-detail-header h3, .anomalous-recipe-detail-section h4 { margin: 0; } .anomalous-recipe-detail-tabs { display: flex; flex: 0 0 auto; gap: 4px; overflow-x: auto; padding: 8px 18px; border-bottom: 1px solid #3d3d3d; background: #252525; } .anomalous-recipe-detail-tab { padding: 7px 11px; border: 1px solid transparent; border-radius: 7px; color: #aaa; background: transparent; cursor: pointer; white-space: nowrap; } .anomalous-recipe-detail-tab.active { border-color: rgba(0, 255, 204, 0.45); color: #00ffcc; background: rgba(0, 255, 204, 0.08); } .anomalous-recipe-detail-content { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; } .anomalous-recipe-gallery { min-width: 0; } .anomalous-recipe-gallery-refresh { margin-left: auto; } .anomalous-recipe-gallery-grid { column-width: 210px; column-gap: 12px; } .anomalous-recipe-gallery-card { position: relative; display: inline-block; width: 100%; margin: 0 0 12px; overflow: hidden; border: 1px solid #404040; border-radius: 9px; background: #171717; break-inside: avoid; } .anomalous-recipe-gallery-card img { display: block; width: 100%; max-height: 480px; cursor: zoom-in; object-fit: contain; background: #101010; } .anomalous-recipe-gallery-card-actions { position: absolute; right: 8px; bottom: 8px; display: flex; opacity: 0; transform: translateY(4px); transition: opacity 160ms ease, transform 160ms ease; } .anomalous-recipe-gallery-card:hover .anomalous-recipe-gallery-card-actions, .anomalous-recipe-gallery-card:focus-within .anomalous-recipe-gallery-card-actions { opacity: 1; transform: translateY(0); } .anomalous-recipe-gallery-card-actions button { box-shadow: 0 3px 12px rgba(0, 0, 0, 0.45); } .anomalous-recipe-gallery-comparison { max-height: 260px; overflow-y: auto; padding: 10px; border-top: 1px solid #3d3d3d; background: #202020; font-size: 0.82rem; } .anomalous-recipe-gallery-comparison > strong { display: block; margin-bottom: 6px; } .anomalous-recipe-gallery-diff-row { padding: 7px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); } .anomalous-recipe-gallery-diff-values { display: grid; gap: 4px; margin-top: 4px; color: #c8c8c8; overflow-wrap: anywhere; } .anomalous-recipe-detail-overview, .anomalous-recipe-detail-section { display: flex; flex-direction: column; gap: 10px; } .anomalous-recipe-detail-hero { display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr); gap: 14px; align-items: stretch; } .anomalous-recipe-detail-hero img { width: 100%; max-height: 190px; min-height: 120px; border-radius: 9px; object-fit: contain; background: #111; } .anomalous-recipe-detail-hero video { width: 100%; max-height: 190px; min-height: 120px; border-radius: 9px; object-fit: contain; background: #111; } .anomalous-recipe-detail-hero-copy { display: flex; min-width: 0; flex-direction: column; gap: 7px; justify-content: center; } .anomalous-recipe-inline-title-row { min-width: 0; } .anomalous-recipe-inline-title { max-width: 100%; overflow: hidden; padding: 0; border: 0; color: #f1f1f1; background: transparent; cursor: text; font: inherit; font-size: 1.35rem; font-weight: 700; text-align: left; text-overflow: ellipsis; white-space: nowrap; } .anomalous-recipe-inline-title:hover, .anomalous-recipe-inline-editable:hover { color: #a9cdff; } .anomalous-recipe-inline-input { width: 100%; min-width: 0; box-sizing: border-box; padding: 7px 9px; border: 1px solid rgba(112, 178, 255, 0.7); border-radius: 7px; color: #f4f4f4; background: #161616; font: inherit; } .anomalous-recipe-inline-editor.is-multiline .anomalous-recipe-inline-input { resize: vertical; } .anomalous-recipe-inline-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; } .anomalous-recipe-inline-editable { flex: 1; min-width: 0; cursor: text; } .anomalous-recipe-inline-edit-button { padding: 2px 6px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 6px; color: #a9cdff; background: transparent; cursor: pointer; font-size: 0.72rem; } .anomalous-recipe-detail-advanced, .anomalous-recipe-advanced-info { color: #aaa; font-size: 0.78rem; } .anomalous-recipe-advanced-info > summary { display: inline-flex; align-items: center; gap: 6px; color: #a9cdff; cursor: pointer; user-select: none; padding: 6px 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; transition: background-color 0.2s, color 0.2s, border-color 0.2s; outline: none; font-size: 0.85rem; } .anomalous-recipe-advanced-info > summary::before { content: "⚙️"; font-size: 1.1em; } .anomalous-recipe-advanced-info > summary:hover, .anomalous-recipe-advanced-info > summary:focus-visible { background: rgba(169, 205, 255, 0.15); border-color: rgba(169, 205, 255, 0.3); color: #cce0ff; } .anomalous-recipe-advanced-row { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 7px; padding: 7px 8px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 7px; background: rgba(0, 0, 0, 0.14); } .anomalous-recipe-advanced-row code { min-width: 0; overflow-wrap: anywhere; } .anomalous-recipe-model-hash { width: 100%; } .anomalous-recipe-detail-hero-copy h3 { margin: 0; color: #f1f1f1; font-size: 1.35rem; } .anomalous-recipe-detail-hero-copy p { margin: 0; white-space: pre-wrap; } .anomalous-recipe-detail-notes { display: flex; min-width: 0; gap: 6px; align-items: start; } .anomalous-recipe-detail-notes p { flex: 1; } .anomalous-recipe-detail-muted { color: #999; } .anomalous-recipe-detail-stats, .anomalous-recipe-detail-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 8px; } .anomalous-recipe-detail-stat, .anomalous-recipe-detail-summary-grid > div { display: grid; min-width: 0; grid-template-columns: max-content minmax(0, 1fr); align-items: start; gap: 4px; padding: 9px 10px; border: 1px solid #3e3e3e; border-radius: 8px; background: rgba(0, 0, 0, 0.16); } .anomalous-recipe-detail-stat-label, .anomalous-recipe-detail-label { color: #999; font-size: 0.8rem; } .anomalous-recipe-detail-stat strong { color: #eee; } .anomalous-recipe-detail-stat-good { color: #6ee7b7 !important; } .anomalous-recipe-detail-stat-warn { color: #ffd493 !important; } .anomalous-recipe-model-composition { display: grid; gap: 8px; margin-bottom: 10px; } .anomalous-recipe-model-composition h5 { margin: 0; color: #ddd; font-size: 0.9rem; } .anomalous-recipe-model-composition-grid { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr); gap: 8px; } .anomalous-recipe-model-composition-card { display: grid; min-width: 0; gap: 5px; padding: 9px 10px; border: 1px solid #414141; border-radius: 8px; background: rgba(0, 0, 0, 0.14); } .anomalous-recipe-model-composition-card.is-base-model { border-color: rgba(110, 231, 183, 0.35); background: rgba(110, 231, 183, 0.05); } .anomalous-recipe-model-composition-value .anomalous-recipe-detail-full-value { overflow-wrap: anywhere; } .anomalous-recipe-detail-summary-grid > div { gap: 12px; } .anomalous-recipe-detail-summary-grid > .is-wide { grid-column: 1 / -1; } .anomalous-recipe-detail-summary-grid .anomalous-recipe-detail-label { padding-top: 6px; white-space: nowrap; } .anomalous-recipe-detail-summary-grid .anomalous-recipe-detail-value-viewer { width: 100%; } .anomalous-recipe-detail-summary-grid .anomalous-recipe-detail-full-value { overflow-wrap: anywhere; white-space: pre-wrap; } .anomalous-recipe-detail-section { margin-bottom: 12px; padding: 12px; border: 1px solid #3d3d3d; border-radius: 10px; background: #292929; } .anomalous-recipe-detail-section-heading { flex-wrap: wrap; justify-content: space-between; } .anomalous-recipe-detail-section-heading small { margin-left: auto; } .anomalous-recipe-refresh-button { position: relative; transition: opacity 0.2s ease, filter 0.2s ease; } .anomalous-recipe-refresh-button.is-loading { cursor: wait; opacity: 0.78; filter: saturate(0.8); } .anomalous-recipe-refresh-button.is-loading::before { content: '↻'; display: inline-block; margin-right: 5px; animation: anomalous-recipe-spin 0.9s linear infinite; } @keyframes anomalous-recipe-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .anomalous-recipe-detail-actions { margin-top: 2px; } .anomalous-recipe-identity-badge { box-sizing: border-box; min-width: 0; max-width: 100%; padding: 2px 6px; border: 1px solid; border-radius: 4px; font-size: 0.65rem; font-weight: 600; white-space: normal; overflow-wrap: anywhere; display: inline-flex; align-items: center; } .anomalous-recipe-identity-badge > span:first-child { min-width: 0; overflow-wrap: anywhere; } .anomalous-recipe-identity-badge-wrap { display: inline-flex; min-width: 0; max-width: 100%; flex: 0 1 auto; flex-wrap: wrap; align-items: center; } .anomalous-recipe-identity-help { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; padding: 0; border: 1px solid currentColor; border-radius: 50%; color: inherit; background: transparent; font-weight: normal; opacity: 0.6; margin-left: 2px; cursor: pointer; } .anomalous-recipe-identity-help:hover, .anomalous-recipe-identity-help:focus-visible { opacity: 1; outline: 2px solid rgba(255, 255, 255, 0.3); outline-offset: 1px; } .anomalous-recipe-identity-explanation { display: none; flex: 0 0 100%; max-width: min(340px, calc(100vw - 48px)); padding: 9px 11px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 7px; color: #fff; background: rgba(20, 22, 28, 0.98); box-shadow: 0 5px 16px rgba(0, 0, 0, 0.28); font-size: 0.78rem; font-weight: 400; line-height: 1.45; white-space: normal; overflow-wrap: anywhere; } .anomalous-recipe-identity-badge-wrap.is-open .anomalous-recipe-identity-explanation { display: block; } .anomalous-recipe-identity-verified { border-color: rgba(110, 231, 183, 0.55); color: #6ee7b7; } .anomalous-recipe-identity-unverified { border-color: rgba(255, 212, 147, 0.55); color: #ffd493; } .anomalous-recipe-identity-unavailable { border-color: rgba(255, 119, 119, 0.55); color: #ff9999; } .anomalous-recipe-model-reference-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-items: stretch; gap: 12px; } @container (max-width: 680px) { .anomalous-recipe-model-reference-list { grid-template-columns: 1fr; } .anomalous-recipe-model-reference-body { flex-direction: row; align-items: flex-start; } .anomalous-recipe-model-preview { max-width: 120px; height: 100px; flex: 0 0 100px; } } .anomalous-recipe-detail-parameter-list, .anomalous-recipe-version-timeline { display: flex; flex-direction: column; gap: 9px; } .anomalous-recipe-parameter-notebook-layout { display: grid; min-width: 0; grid-template-columns: minmax(170px, 0.28fr) minmax(0, 1fr); gap: 10px; align-items: start; } .anomalous-recipe-parameter-notebook-sidebar { position: sticky; top: 0; display: flex; min-width: 0; max-height: min(560px, 70vh); flex-direction: column; gap: 8px; padding: 10px; border: 1px solid #3d3d3d; border-radius: 10px; background: rgba(0, 0, 0, 0.16); overflow: hidden; } .anomalous-recipe-parameter-notebook-sidebar .anomalous-recipe-detail-section-heading { align-items: center; } .anomalous-recipe-parameter-notebook-list { display: flex; min-height: 0; flex-direction: column; gap: 6px; overflow-y: auto; } .anomalous-recipe-parameter-notebook-item { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 3px; padding: 8px 9px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 7px; color: #ddd; background: rgba(255, 255, 255, 0.03); text-align: left; cursor: pointer; transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, opacity 0.16s ease; } .anomalous-recipe-parameter-notebook-item:active, .anomalous-recipe-parameter-notebook-item.is-switching { transform: scale(0.98); opacity: 0.72; } .anomalous-recipe-parameter-notebook-item:hover, .anomalous-recipe-parameter-notebook-item.is-active { border-color: rgba(110, 231, 183, 0.58); color: #c5f7df; background: rgba(110, 231, 183, 0.1); } .anomalous-recipe-parameter-notebook-item > * { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .anomalous-recipe-detail-parameters { min-width: 0; } .anomalous-recipe-parameter-editor { min-width: 0; } .anomalous-recipe-parameter-editor-name { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px; align-items: center; margin-bottom: 12px; color: #bbb; } .anomalous-recipe-parameter-editor-name input, .anomalous-recipe-parameter-editor-input { min-width: 0; padding: 8px 10px; border: 1px solid #4a4a4a; border-radius: 7px; color: #eee; background: #181818; font: inherit; } .anomalous-recipe-parameter-editor-input { width: 100%; resize: vertical; } .anomalous-recipe-parameter-editor-input:focus, .anomalous-recipe-parameter-editor-name input:focus { border-color: rgba(110, 231, 183, 0.7); outline: none; } .anomalous-recipe-parameter-editor-input.is-invalid { border-color: rgba(255, 119, 119, 0.9); } .anomalous-recipe-parameter-editor-row { grid-template-columns: minmax(120px, 0.28fr) minmax(0, 1fr); } .anomalous-recipe-model-reference, .anomalous-recipe-detail-parameter-node, .anomalous-recipe-version-row { padding: 9px 10px; border: 1px solid #414141; border-radius: 8px; background: rgba(0, 0, 0, 0.15); } .anomalous-recipe-model-reference { display: flex; min-width: 0; height: 100%; flex-direction: column; } .anomalous-recipe-model-reference-body { display: flex; min-width: 0; gap: 11px; flex: 1; flex-direction: column; } .anomalous-recipe-model-reference-details { display: flex; min-width: 0; flex: 1; flex-direction: column; } .anomalous-recipe-model-preview { position: relative; display: flex; width: 100%; height: 140px; flex: 0 0 140px; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; border: 1px solid #464646; border-radius: 7px; color: #a9cdff; background: #151515; text-align: center; } .anomalous-recipe-model-preview.is-clickable { cursor: pointer; border-color: rgba(112, 178, 255, 0.58); transition: transform 0.2s ease, box-shadow 0.2s ease; } .anomalous-recipe-model-preview.is-clickable:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22); } .anomalous-recipe-model-preview img, .anomalous-recipe-model-preview video { width: 100%; height: 100%; object-fit: cover; } .anomalous-recipe-model-preview small { position: absolute; max-width: calc(100% - 12px); overflow: hidden; padding: 2px 4px; border-radius: 4px; color: #ddd; background: rgba(0, 0, 0, 0.68); font-size: 0.64rem; text-overflow: ellipsis; white-space: nowrap; } .anomalous-recipe-model-preview.empty small { position: static; max-width: calc(100% - 12px); padding: 0; color: #888; background: transparent; white-space: normal; } .anomalous-recipe-model-reference-top, .anomalous-recipe-model-reference-meta, .anomalous-recipe-detail-parameter-row, .anomalous-recipe-version-row { display: flex; min-width: 0; align-items: center; gap: 8px; } .anomalous-recipe-model-reference-top { width: 100%; flex-wrap: wrap; } .anomalous-recipe-model-reference-top strong { min-width: 0; margin-right: auto; } .anomalous-recipe-model-name { min-width: 0; max-width: 100%; overflow: hidden; padding: 3px 7px; border: 1px solid transparent; border-radius: 6px; text-overflow: ellipsis; white-space: nowrap; } .anomalous-recipe-model-name.is-resolved { border-color: rgba(110, 231, 183, 0.42); color: #b8f5d8; background: rgba(110, 231, 183, 0.08); cursor: pointer; } .anomalous-recipe-model-name.is-unresolved { border-color: rgba(255, 255, 255, 0.08); color: #999; background: rgba(0, 0, 0, 0.12); } .anomalous-recipe-model-name-block { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; } .anomalous-recipe-model-name-row { min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .anomalous-recipe-model-subtitle { font-size: 0.75rem; color: rgba(255, 255, 255, 0.4); word-break: break-all; padding-left: 2px; } .anomalous-recipe-civitai-btn { font-size: 0.75rem; color: #3b82f6; text-decoration: none; border: 1px solid rgba(59, 130, 246, 0.3); padding: 2px 8px; border-radius: 4px; background: rgba(59, 130, 246, 0.1); transition: all 0.2s ease; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; } .anomalous-recipe-civitai-btn:hover { background: rgba(59, 130, 246, 0.2); border-color: rgba(59, 130, 246, 0.5); color: #60a5fa; } .anomalous-recipe-model-reference.is-unresolved { border-color: rgba(255, 212, 147, 0.28); } .anomalous-recipe-model-match-status { flex: 1; min-width: 120px; } .anomalous-recipe-model-match { padding: 4px 8px; border-radius: 7px; font-size: 0.76rem; } .anomalous-recipe-model-path { width: 100%; } .anomalous-recipe-model-reference-value { margin: 6px 0; } .anomalous-recipe-model-reference-meta { flex-wrap: wrap; color: #aaa; font-size: 0.8rem; } .anomalous-recipe-detail-search { min-width: 180px; flex: 1; padding: 7px 9px; border: 1px solid #555; border-radius: 6px; color: #eee; background: #161616; } .anomalous-recipe-detail-parameter-node { display: flex; flex-direction: column; gap: 7px; } .anomalous-recipe-detail-parameter-row { display: grid; grid-template-columns: minmax(110px, 0.28fr) minmax(0, 1fr); align-items: start; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.06); } .anomalous-recipe-detail-parameter-row .anomalous-recipe-detail-label { padding-top: 5px; } .anomalous-recipe-detail-value-viewer { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 8px; align-items: start; } .anomalous-recipe-detail-full-value { min-width: 0; padding: 6px 8px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 6px; color: #e7e7e7; background: rgba(0, 0, 0, 0.18); overflow-wrap: anywhere; white-space: pre-wrap; } .anomalous-recipe-detail-full-value.is-collapsed { display: -webkit-box; max-height: 5.4em; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .anomalous-recipe-detail-value-toggle { grid-column: 1; justify-self: start; padding: 2px 0; border: 0; color: #9fc4ff; background: transparent; cursor: pointer; font-size: 0.78rem; } .anomalous-recipe-detail-copy { grid-column: 2; grid-row: 1; } .anomalous-recipe-detail-prompt-list { display: grid; gap: 8px; } .anomalous-recipe-detail-prompt { display: grid; grid-template-columns: minmax(110px, 0.24fr) minmax(0, 1fr); gap: 9px; align-items: start; padding: 9px; border-left: 3px solid #6ba7ff; border-radius: 7px; background: rgba(0, 0, 0, 0.14); } .anomalous-recipe-detail-prompt-negative { border-left-color: #df8d9a; } .anomalous-recipe-detail-prompt-label { padding-top: 5px; color: #d7e6ff; font-size: 0.85rem; } .anomalous-recipe-version-row { justify-content: space-between; flex-wrap: wrap; } .anomalous-recipe-version-row > div { display: flex; min-width: 150px; flex-direction: column; gap: 4px; } .anomalous-recipe-version-row.current { border-color: rgba(0, 255, 204, 0.45); } @media (max-width: 680px) { .anomalous-recipe-detail-hero { grid-template-columns: 1fr; } .anomalous-recipe-detail-hero img { max-height: 180px; } .anomalous-recipe-detail-content { padding: 10px; } .anomalous-recipe-detail-header { padding: 10px; } .anomalous-recipe-detail-header h3 { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .anomalous-recipe-model-preview { height: 110px; flex-basis: 110px; } .anomalous-recipe-parameter-notebook-layout { grid-template-columns: 1fr; } .anomalous-recipe-parameter-notebook-sidebar { position: static; max-height: none; } .anomalous-recipe-parameter-editor-name { grid-template-columns: 1fr; gap: 5px; } } @media (max-width: 560px) { .anomalous-recipe-edit-param { grid-template-columns: 1fr; } } .anomalous-recipe-dialog-error { min-height: 1em; color: #ff7777; font-size: 0.8rem; } .anomalous-model-settings-overlay { position: absolute; inset: 0; z-index: 10020; display: flex; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; background: rgba(8, 9, 12, 0.78); backdrop-filter: blur(8px); } .anomalous-model-settings-overlay[hidden] { display: none; } .anomalous-model-settings-dialog { width: min(560px, 100%); padding: 24px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; box-sizing: border-box; color: #f3f4f6; background: linear-gradient(145deg, rgba(48, 49, 55, 0.98), rgba(27, 28, 33, 0.98)); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55); } .anomalous-model-settings-dialog h2 { margin: 0 0 6px; font-size: 1.3em; } .anomalous-model-settings-description { margin: 0 0 18px; color: #aeb3bd; font-size: 0.9em; line-height: 1.55; } .anomalous-model-setting-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); } .anomalous-model-setting-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 5px; } .anomalous-model-setting-copy small { color: #9da3ad; line-height: 1.45; } .anomalous-model-setting-select { width: 190px; max-width: 44%; padding: 9px 10px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px; color: #f5f5f5; background: #17181c; cursor: pointer; } .anomalous-model-settings-note { margin-top: 4px; padding: 10px 12px; border-radius: 8px; color: #a9c8ee; background: rgba(80, 145, 220, 0.1); font-size: 0.82em; line-height: 1.45; } .anomalous-model-settings-close { display: block; min-width: 96px; margin: 20px 0 0 auto; padding: 9px 18px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px; color: #fff; background: #3f73b9; cursor: pointer; } @media (max-width: 620px) { .anomalous-model-setting-row { align-items: stretch; flex-direction: column; gap: 10px; } .anomalous-model-setting-select { width: 100%; max-width: none; } } /* Recipe library discovery and semantic version diff. */ .anomalous-recipe-actionbar { flex-wrap: wrap; align-items: center; gap: 8px; } .anomalous-recipe-search { min-width: 220px; flex: 1 1 240px; } .anomalous-recipe-filter-tags { display: flex; flex: 1 1 100%; flex-wrap: wrap; gap: 5px; align-items: center; } .anomalous-recipe-filter-tag { border: 1px solid rgba(138, 180, 248, 0.42); border-radius: 999px; background: rgba(138, 180, 248, 0.08); color: #cfe1ff; padding: 3px 9px; cursor: pointer; } .anomalous-recipe-filter-tag:hover, .anomalous-recipe-filter-tag.active { background: rgba(138, 180, 248, 0.28); color: #fff; } .anomalous-recipe-filter-summary { color: #9caec4; white-space: nowrap; } .anomalous-recipe-badge-tag { border: 0; cursor: pointer; } .anomalous-recipe-version-diff { flex: 1 1 100%; margin-top: 8px; padding: 9px; border-left: 2px solid rgba(138, 180, 248, 0.42); background: rgba(0, 0, 0, 0.14); } .anomalous-recipe-diff-group { margin-top: 8px; } .anomalous-recipe-diff-group h5 { margin: 4px 0; color: #cfe1ff; } .anomalous-recipe-diff-row { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 7px; margin-top: 6px; padding: 8px; min-width: 0; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 7px; background: rgba(0, 0, 0, 0.1); } .anomalous-recipe-diff-marker { width: 16px; text-align: center; font-weight: 700; } .anomalous-recipe-diff-added .anomalous-recipe-diff-marker, .anomalous-recipe-diff-added .anomalous-recipe-diff-after { color: #6ee7b7; } .anomalous-recipe-diff-removed .anomalous-recipe-diff-marker, .anomalous-recipe-diff-removed .anomalous-recipe-diff-before { color: #ff9a9a; } .anomalous-recipe-diff-changed .anomalous-recipe-diff-marker { color: #ffd493; } .anomalous-recipe-diff-label { min-width: 0; padding-top: 3px; } .anomalous-recipe-diff-arrow { display: none; } .anomalous-recipe-diff-values { display: grid; grid-column: 2; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 7px; min-width: 0; } .anomalous-recipe-diff-value { min-width: 0; padding: 7px; border-radius: 6px; background: rgba(255, 255, 255, 0.025); } .anomalous-recipe-diff-value-before { border-left: 2px solid rgba(255, 154, 154, 0.66); } .anomalous-recipe-diff-value-after { border-left: 2px solid rgba(110, 231, 183, 0.66); } .anomalous-recipe-diff-value .anomalous-recipe-detail-value-viewer { margin-top: 4px; } .anomalous-recipe-diff-value .anomalous-recipe-detail-full-value { font-size: 0.78rem; } @media (max-width: 720px) { .anomalous-recipe-diff-values { grid-template-columns: 1fr; } .anomalous-recipe-detail-prompt, .anomalous-recipe-detail-parameter-row { grid-template-columns: 1fr; } .anomalous-recipe-detail-prompt-label, .anomalous-recipe-detail-parameter-row .anomalous-recipe-detail-label { padding-top: 0; } } /* Secondary Actions Group */ .anomalous-recipe-actions-secondary { display: flex; gap: 6px; align-items: center; } /* Primary Actions Group */ .anomalous-recipe-actions-primary { display: flex; gap: 6px; align-items: center; margin-left: auto; } .anomalous-recipe-header-status { max-width: 190px; color: rgba(190, 205, 225, 0.78); font-size: 0.75rem; line-height: 1.25; white-space: normal; text-align: right; } /* Icon Button (for emoji/icons) */ .anomalous-btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; background: rgba(255, 255, 255, 0.05); color: #e0e0e0; cursor: pointer; font-size: 14px; transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, color 0.2s ease; } .anomalous-btn-icon:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.25); transform: translateY(-1px); } .anomalous-btn-icon.anomalous-btn-edit:hover { color: #6ee7b7; border-color: rgba(110, 231, 183, 0.4); background: rgba(110, 231, 183, 0.1); } .anomalous-btn-icon.anomalous-btn-delete:hover { color: #fca5a5; border-color: rgba(252, 165, 165, 0.4); background: rgba(252, 165, 165, 0.1); } .anomalous-btn-icon.anomalous-btn-export:hover { color: #93c5fd; border-color: rgba(147, 197, 253, 0.4); background: rgba(147, 197, 253, 0.1); } /* Ghost Button (secondary text button) */ .anomalous-btn-ghost { background: rgba(255, 255, 255, 0.08); color: #e0e0e0; border: 1px solid rgba(255, 255, 255, 0.15); padding: 6px 12px; border-radius: 4px; cursor: pointer; margin-left: 5px; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } .anomalous-btn-ghost:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.25); transform: translateY(-1px); }