mirror of
https://github.com/willmiao/ComfyUI-Lora-Manager.git
synced 2026-10-10 11:32:13 -03:00
Will Miao
3d165f92e0
The elevated surface tokens (--bg-elevated / --surface-elevated) are translucent, so sticky modal footers and table headers double-composited over the modal surface and showed a visible lighter seam in light themes. Add derived opaque tokens (--bg-elevated-solid / --surface-elevated-solid, aliased as --lora-surface-solid) and use them for .modal-content, the download/import modal sticky action footers, and the refresh result table's sticky header, so the modal surface and its sticky layers always share one opaque color across every theme and preset.
874 lines
18 KiB
CSS
874 lines
18 KiB
CSS
/* Import Modal Styles */
|
|
|
|
/* Sticky footer layout: fixed header, scrollable step content, pinned action buttons.
|
|
Ensures Back/Import buttons stay visible on short viewports (e.g. 1080p or 150% zoom). */
|
|
#importModal .modal-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden; /* The active step scrolls instead of the whole modal */
|
|
}
|
|
|
|
#importModal .modal-header {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
#importModal .import-step {
|
|
flex: 1 1 auto;
|
|
min-height: 0; /* Allow the step to shrink and scroll within the flex container */
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
scrollbar-gutter: stable;
|
|
}
|
|
|
|
#importModal .import-step .modal-actions {
|
|
position: sticky;
|
|
bottom: 0;
|
|
z-index: 1;
|
|
/* Solid surface: must fully mask the step content scrolling underneath;
|
|
the translucent --lora-surface would double-composite over the modal
|
|
surface and show a seam in light themes. */
|
|
background: var(--lora-surface-solid);
|
|
border-top: 1px solid var(--lora-border);
|
|
padding-top: var(--space-2);
|
|
padding-bottom: var(--space-1);
|
|
}
|
|
|
|
.import-step {
|
|
margin: var(--space-2) 0;
|
|
transition: none !important;
|
|
/* Disable any transitions that might affect display */
|
|
}
|
|
|
|
/* Import Mode Toggle */
|
|
.import-mode-toggle {
|
|
display: flex;
|
|
margin-bottom: var(--space-3);
|
|
border-radius: var(--border-radius-sm);
|
|
overflow: hidden;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.toggle-btn {
|
|
flex: 1;
|
|
padding: 10px 16px;
|
|
background: var(--bg-color);
|
|
color: var(--text-color);
|
|
border: none;
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
transition: background-color 0.2s, color 0.2s;
|
|
}
|
|
|
|
.toggle-btn:first-child {
|
|
border-right: 1px solid var(--border-color);
|
|
}
|
|
|
|
.toggle-btn.active {
|
|
background: var(--lora-accent);
|
|
color: var(--lora-text);
|
|
}
|
|
|
|
.toggle-btn:hover:not(.active) {
|
|
background: var(--lora-surface);
|
|
}
|
|
|
|
.import-section {
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
|
|
.import-description {
|
|
margin-top: 0;
|
|
}
|
|
|
|
/* Unified Drop Zone */
|
|
.import-drop-zone {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--space-1);
|
|
padding: var(--space-4) var(--space-3);
|
|
border: 2px dashed var(--border-color);
|
|
border-radius: var(--border-radius-sm);
|
|
background: var(--bg-color);
|
|
color: var(--text-color);
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: border-color 0.2s, background-color 0.2s;
|
|
}
|
|
|
|
.import-drop-zone:hover,
|
|
.import-drop-zone:focus-visible {
|
|
border-color: var(--lora-accent);
|
|
outline: none;
|
|
}
|
|
|
|
.import-drop-zone.drag-over {
|
|
border-color: var(--lora-accent);
|
|
background: oklch(var(--lora-accent) / 0.08);
|
|
}
|
|
|
|
.drop-zone-icon {
|
|
font-size: 1.8em;
|
|
color: var(--lora-accent);
|
|
}
|
|
|
|
.drop-zone-primary {
|
|
margin: 0;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.drop-zone-filename {
|
|
margin: 0;
|
|
font-weight: 500;
|
|
word-break: break-all;
|
|
}
|
|
|
|
/* Divider between drop zone and URL input */
|
|
.import-divider {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
margin: var(--space-3) 0;
|
|
color: var(--text-color);
|
|
opacity: 0.6;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.import-divider::before,
|
|
.import-divider::after {
|
|
content: '';
|
|
flex: 1;
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
/* Loading state for the fetch button */
|
|
#fetchImageBtn.loading {
|
|
opacity: 0.8;
|
|
cursor: wait;
|
|
}
|
|
|
|
/* Inputs sit flush against the scrollable step's content edge; an outset
|
|
outline (global offset: 2px) gets clipped by overflow-x. Draw the focus
|
|
outline inset instead so the full ring stays visible. */
|
|
#importModal input:focus-visible,
|
|
#importModal select:focus-visible {
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
/* Recipe Details Layout */
|
|
.recipe-details-layout {
|
|
display: grid;
|
|
grid-template-columns: 200px 1fr;
|
|
gap: var(--space-3);
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
|
|
.recipe-image-container {
|
|
width: 100%;
|
|
height: 200px;
|
|
border-radius: var(--border-radius-sm);
|
|
overflow: hidden;
|
|
background: var(--lora-surface);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.recipe-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.recipe-image img,
|
|
.recipe-preview-video {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.recipe-form-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
/* Tags Input Styles */
|
|
.tag-input-container {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-bottom: var(--space-1);
|
|
}
|
|
|
|
.tag-input-container input {
|
|
flex: 1;
|
|
padding: 8px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-xs);
|
|
background: var(--bg-color);
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.tags-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin-top: var(--space-1);
|
|
min-height: 32px;
|
|
}
|
|
|
|
.recipe-tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 4px 10px;
|
|
background: var(--lora-surface);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-xs);
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.recipe-tag i {
|
|
cursor: pointer;
|
|
opacity: 0.7;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
.recipe-tag i:hover {
|
|
opacity: 1;
|
|
color: var(--lora-error);
|
|
}
|
|
|
|
.empty-tags {
|
|
color: var(--text-color);
|
|
opacity: 0.6;
|
|
font-size: 0.9em;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* LoRAs List Styles */
|
|
.loras-list {
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
margin: var(--space-2) 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
padding: 1px;
|
|
}
|
|
|
|
.lora-item {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
padding: var(--space-2);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-sm);
|
|
background: var(--bg-color);
|
|
margin: 1px;
|
|
}
|
|
|
|
.lora-item.exists-locally {
|
|
background: oklch(var(--lora-accent) / 0.05);
|
|
border-left: 4px solid var(--lora-accent);
|
|
}
|
|
|
|
.lora-item.missing-locally {
|
|
border-left: 4px solid var(--lora-error);
|
|
}
|
|
|
|
.lora-item.is-deleted {
|
|
background: oklch(var(--lora-warning) / 0.05);
|
|
border-left: 4px solid var(--lora-warning);
|
|
}
|
|
|
|
.lora-item.is-early-access {
|
|
background: rgba(0, 184, 122, 0.05);
|
|
border-left: 4px solid var(--color-success);
|
|
}
|
|
|
|
.lora-item.missing-locally {
|
|
border-left: 4px solid var(--lora-error);
|
|
}
|
|
|
|
.lora-thumbnail {
|
|
width: 80px;
|
|
height: 80px;
|
|
flex-shrink: 0;
|
|
border-radius: var(--border-radius-xs);
|
|
overflow: hidden;
|
|
background: var(--bg-color);
|
|
}
|
|
|
|
.lora-thumbnail img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.lora-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.lora-header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.lora-content h3 {
|
|
margin: 0;
|
|
font-size: 1.1em;
|
|
color: var(--text-color);
|
|
flex: 1;
|
|
}
|
|
|
|
.lora-info {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
align-items: center;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.lora-info .base-model {
|
|
background: oklch(var(--lora-accent) / 0.1);
|
|
color: var(--lora-accent);
|
|
padding: 2px 8px;
|
|
border-radius: var(--border-radius-xs);
|
|
}
|
|
|
|
.lora-version {
|
|
font-size: 0.9em;
|
|
color: var(--text-color);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.weight-badge {
|
|
background: var(--lora-surface);
|
|
padding: 2px 8px;
|
|
border-radius: var(--border-radius-xs);
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
/* Missing LoRAs List */
|
|
.missing-loras-list {
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
margin: var(--space-2) 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
padding: var(--space-1);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var (--border-radius-sm);
|
|
background: var(--lora-surface);
|
|
}
|
|
|
|
.missing-lora-item {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
padding: var(--space-1);
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.missing-lora-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.missing-lora-item.is-early-access {
|
|
background: rgba(0, 184, 122, 0.05);
|
|
border-left: 3px solid var(--color-success);
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.missing-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
background: var(--lora-error);
|
|
color: white;
|
|
padding: 4px 8px;
|
|
border-radius: var(--border-radius-xs);
|
|
font-size: 0.8em;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.missing-badge i {
|
|
margin-right: 4px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.lora-count-info {
|
|
font-size: 0.85em;
|
|
opacity: 0.8;
|
|
font-weight: normal;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
/* Input Group Styles */
|
|
|
|
.input-with-button {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.input-with-button input {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.input-with-button button {
|
|
flex-shrink: 0;
|
|
white-space: nowrap;
|
|
padding: 8px 16px;
|
|
background: var(--lora-accent);
|
|
color: var(--lora-text);
|
|
border: none;
|
|
border-radius: var(--border-radius-xs);
|
|
cursor: pointer;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.input-with-button button:hover {
|
|
background: oklch(from var(--lora-accent) l c h / 0.9);
|
|
}
|
|
|
|
/* Dark theme adjustments */
|
|
[data-theme="dark"] .lora-item {
|
|
background: var(--lora-surface);
|
|
}
|
|
|
|
[data-theme="dark"] .recipe-tag {
|
|
background: var(--card-bg);
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 768px) {
|
|
.recipe-details-layout {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.recipe-image-container {
|
|
height: 150px;
|
|
}
|
|
}
|
|
|
|
/* Size badge for LoRA items */
|
|
.size-badge {
|
|
background: var(--lora-surface);
|
|
padding: 2px 8px;
|
|
border-radius: var(--border-radius-xs);
|
|
font-size: 0.85em;
|
|
color: var(--text-color);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Improved Missing LoRAs summary section */
|
|
.missing-loras-summary {
|
|
margin-bottom: var(--space-3);
|
|
padding: var(--space-2);
|
|
background: var(--bg-color);
|
|
border-radius: var(--border-radius-sm);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.summary-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.summary-header h3 {
|
|
margin: 0;
|
|
font-size: 1.1em;
|
|
color: var(--text-color);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-1);
|
|
}
|
|
|
|
.lora-count-badge {
|
|
font-size: 0.9em;
|
|
font-weight: normal;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.total-size-badge {
|
|
font-size: 0.85em;
|
|
font-weight: normal;
|
|
background: var(--lora-surface);
|
|
padding: 2px 8px;
|
|
border-radius: var(--border-radius-xs);
|
|
margin-left: var(--space-1);
|
|
}
|
|
|
|
.toggle-list-btn {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
color: var(--text-color);
|
|
padding: 4px 8px;
|
|
border-radius: var(--border-radius-xs);
|
|
}
|
|
|
|
.toggle-list-btn:hover {
|
|
background: var(--lora-surface);
|
|
}
|
|
|
|
.missing-loras-list {
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
transition: max-height 0.3s ease, margin-top 0.3s ease, padding-top 0.3s ease;
|
|
margin-top: 0;
|
|
padding-top: 0;
|
|
}
|
|
|
|
.missing-loras-list.collapsed {
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
padding-top: 0;
|
|
}
|
|
|
|
.missing-loras-list:not(.collapsed) {
|
|
margin-top: var(--space-1);
|
|
padding-top: var(--space-1);
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
.missing-lora-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 8px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.missing-lora-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.missing-lora-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.missing-lora-name {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.lora-base-model {
|
|
font-size: 0.85em;
|
|
color: var(--lora-accent);
|
|
background: oklch(var(--lora-accent) / 0.1);
|
|
padding: 2px 6px;
|
|
border-radius: var(--border-radius-xs);
|
|
display: inline-block;
|
|
}
|
|
|
|
.missing-lora-size {
|
|
font-size: 0.9em;
|
|
color: var(--text-color);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Recipe name input select-all behavior */
|
|
#recipeName:focus {
|
|
outline: 2px solid var(--lora-accent);
|
|
}
|
|
|
|
/* Prevent layout shift with scrollbar */
|
|
.modal-content {
|
|
overflow-y: scroll;
|
|
/* Always show scrollbar */
|
|
scrollbar-gutter: stable;
|
|
/* Reserve space for scrollbar */
|
|
}
|
|
|
|
/* For browsers that don't support scrollbar-gutter */
|
|
@supports not (scrollbar-gutter: stable) {
|
|
.modal-content {
|
|
padding-right: calc(var(--space-2) + var(--scrollbar-width));
|
|
/* Add extra padding for scrollbar */
|
|
}
|
|
}
|
|
|
|
/* Deleted LoRA styles - Fix layout issues */
|
|
.lora-item.is-deleted {
|
|
background: oklch(var(--lora-warning) / 0.05);
|
|
border-left: 4px solid var(--lora-warning);
|
|
}
|
|
|
|
.deleted-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
background: var(--lora-warning);
|
|
color: white;
|
|
padding: 4px 8px;
|
|
border-radius: var(--border-radius-xs);
|
|
font-size: 0.8em;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.deleted-badge i {
|
|
margin-right: 4px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.exclude-lora-checkbox {
|
|
display: none;
|
|
}
|
|
|
|
/* Deleted LoRAs warning - redesigned to not interfere with modal buttons */
|
|
.deleted-loras-warning {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
padding: 12px 16px;
|
|
background: oklch(var(--lora-warning) / 0.1);
|
|
border: 1px solid var(--lora-warning);
|
|
border-radius: var(--border-radius-sm);
|
|
color: var(--text-color);
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
|
|
.warning-icon {
|
|
color: var(--lora-warning);
|
|
font-size: 1.2em;
|
|
padding-top: 2px;
|
|
}
|
|
|
|
.warning-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.warning-title {
|
|
font-weight: 600;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.warning-text {
|
|
font-size: 0.9em;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* Remove the old warning-message styles that were causing layout issues */
|
|
.warning-message {
|
|
display: none;
|
|
/* Hide the old style */
|
|
}
|
|
|
|
/* Error message styling */
|
|
.error-message {
|
|
color: var(--lora-error);
|
|
font-size: 0.9em;
|
|
margin-top: 8px;
|
|
min-height: 20px;
|
|
/* Ensure there's always space for the error message */
|
|
font-weight: 500;
|
|
}
|
|
|
|
.early-access-warning {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
padding: 12px 16px;
|
|
background: rgba(0, 184, 122, 0.1);
|
|
border: 1px solid var(--color-success);
|
|
border-radius: var(--border-radius-sm);
|
|
color: var(--text-color);
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
|
|
/* Add special styling for early access badge in the missing loras list */
|
|
.missing-lora-item .early-access-badge {
|
|
padding: 2px 6px;
|
|
font-size: 0.75em;
|
|
margin-top: 4px;
|
|
display: inline-flex;
|
|
}
|
|
|
|
/* Specific styling for the early access warning container in import modal */
|
|
.early-access-warning .warning-icon {
|
|
color: var(--color-success);
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.early-access-warning .warning-title {
|
|
font-weight: 600;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.early-access-warning .warning-text {
|
|
font-size: 0.9em;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* Duplicate Recipes Styles */
|
|
.duplicate-recipes-container {
|
|
margin-bottom: var(--space-3);
|
|
border-radius: var(--border-radius-sm);
|
|
overflow: hidden;
|
|
animation: fadeIn 0.3s ease-in-out;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.duplicate-warning {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
padding: 12px 16px;
|
|
background: oklch(var(--lora-warning) / 0.1);
|
|
border: 1px solid var(--lora-warning);
|
|
border-radius: var(--border-radius-sm);
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.duplicate-warning .warning-icon {
|
|
color: var(--lora-warning);
|
|
font-size: 1.2em;
|
|
padding-top: 2px;
|
|
}
|
|
|
|
.duplicate-warning .warning-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.duplicate-warning .warning-title {
|
|
font-weight: 600;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.duplicate-warning .warning-text {
|
|
font-size: 0.9em;
|
|
line-height: 1.4;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.toggle-duplicates-btn {
|
|
background: none;
|
|
border: none;
|
|
color: var(--lora-warning);
|
|
cursor: pointer;
|
|
font-size: 0.9em;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 4px 8px;
|
|
border-radius: var(--border-radius-xs);
|
|
}
|
|
|
|
.toggle-duplicates-btn:hover {
|
|
background: oklch(var(--lora-warning) / 0.1);
|
|
}
|
|
|
|
.duplicate-recipes-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
|
gap: 12px;
|
|
padding: 16px;
|
|
border: 1px solid var(--border-color);
|
|
border-top: none;
|
|
border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
|
|
background: var(--bg-color);
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
transition: max-height 0.3s ease, padding 0.3s ease;
|
|
}
|
|
|
|
.duplicate-recipes-list.collapsed {
|
|
max-height: 0;
|
|
padding: 0 16px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.duplicate-recipe-card {
|
|
position: relative;
|
|
border-radius: var(--border-radius-sm);
|
|
overflow: hidden;
|
|
box-shadow: var(--shadow-md);
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.duplicate-recipe-card:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.duplicate-recipe-preview {
|
|
width: 100%;
|
|
position: relative;
|
|
aspect-ratio: 2/3;
|
|
background: var(--bg-color);
|
|
}
|
|
|
|
.duplicate-recipe-preview img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.duplicate-recipe-title {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 8px;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
color: white;
|
|
font-size: 0.85em;
|
|
line-height: 1.3;
|
|
max-height: 50%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
.duplicate-recipe-details {
|
|
padding: 8px;
|
|
background: var(--bg-color);
|
|
font-size: 0.75em;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
color: var(--text-color);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.duplicate-recipe-date,
|
|
.duplicate-recipe-lora-count {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
} |