Spaces:
Running
Running
File size: 2,597 Bytes
774fe36 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | /* ===== Generation Page Layout ===== */
.gen-layout { display: flex; width: 100%; height: 100%; overflow: hidden; }
.gen-params {
width: 380px; min-width: 340px;
background: var(--bg-secondary);
border-right: 1px solid var(--border);
display: flex; flex-direction: column; overflow: hidden;
}
.gen-params-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 16px; }
.gen-result {
flex: 1; display: flex; flex-direction: column;
overflow: hidden; min-width: 0;
}
.gen-result-image {
flex: 1; display: flex; align-items: center; justify-content: center;
padding: 16px; overflow: auto; position: relative;
}
.gen-result-image img {
max-width: 100%; max-height: 100%; object-fit: contain;
border-radius: var(--radius); box-shadow: 0 4px 20px var(--shadow);
}
.gen-result-image .placeholder {
color: var(--text-muted); font-size: 1rem; text-align: center;
display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.gen-result-image .placeholder .icon { font-size: 3rem; opacity: 0.3; }
/* ===== Generation Info ===== */
.gen-result-info {
background: var(--bg-card); border-top: 1px solid var(--border);
padding: 12px 16px; max-height: 200px; overflow-y: auto;
}
.gen-result-info .info-label {
font-size: 0.8rem; font-weight: 600; color: var(--text-muted);
margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px;
}
.gen-result-info .info-content {
font-size: 0.85rem; color: var(--text-secondary);
line-height: 1.6; word-break: break-all;
}
.gen-result-info .info-row { display: flex; gap: 8px; margin-bottom: 2px; }
.gen-result-info .info-key { color: var(--text-muted); min-width: 80px; flex-shrink: 0; }
.gen-result-info .info-value { color: var(--text-primary); }
/* ===== Panel Resizer (Universal) ===== */
.panel-resizer {
cursor: col-resize;
background: var(--border);
flex-shrink: 0;
position: relative;
z-index: 10;
transition: background var(--transition);
display: flex;
align-items: center;
justify-content: center;
gap: 2px;
/* Horizontal mode (default) */
width: 7px;
flex-direction: column;
}
.panel-resizer.vertical {
/* Vertical mode */
width: auto;
height: 7px;
cursor: row-resize;
flex-direction: row;
}
.panel-resizer:hover,
.panel-resizer.active {
background: var(--accent);
}
.download-card-badge {
position: absolute;
top: 4px;
right: 4px;
border-radius: 3px;
font-size: 1rem;
font-weight: 600;
background: rgba(255, 255, 255, 0.6);
color: #fff;
}
|