OmniAI/omniai-web
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

merge: resolve conflicts between feat/responsive-layout and master

Browse Source 
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Stringadmin
2026-06-05 15:14:17 +08:00
parent ecade14bd0 91c332f567
commit 8cf9ee3519
132 changed files with 27426 additions and 4252 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/pages/image-workbench.css
+145 -58
View File
@@ -563,7 +563,10 @@ textarea.image-workbench-prompt {
align-items: center;
justify-content: center;
overflow: hidden;
background: var(--bg-inset);
background:
radial-gradient(circle, rgba(var(--accent-rgb), 0.12) 1px, transparent 1.4px),
var(--bg-inset);
background-size: 22px 22px;
}
.image-workbench-canvas img {
@@ -592,14 +595,28 @@ textarea.image-workbench-prompt {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
color: var(--fg-dim);
justify-content: center;
gap: 12px;
width: 100%;
height: 100%;
color: var(--fg-muted);
font-size: 14px;
}
.image-workbench-empty .anticon {
font-size: 32px;
opacity: 0.5;
font-size: 40px;
opacity: 0.35;
}
.image-workbench-empty strong {
font-size: 18px;
color: var(--fg-body, #eee);
}
.image-workbench-empty span {
max-width: 320px;
text-align: center;
line-height: 1.5;
}
.image-workbench-empty--button {
@@ -625,16 +642,24 @@ textarea.image-workbench-prompt {
height: 100%;
}
.image-workbench-camera-stage {
flex-direction: column;
gap: 16px;
}
.image-workbench-inpaint-stage img,
.image-workbench-camera-stage img {
max-width: 90%;
max-height: 90%;
max-width: 95%;
max-height: 95%;
border-radius: 8px;
object-fit: contain;
}
.image-workbench-inpaint-stage > span,
.image-workbench-camera-stage > span {
.image-workbench-camera-stage img {
max-height: 68%;
}
.image-workbench-inpaint-stage > span {
position: absolute;
bottom: 12px;
left: 50%;
@@ -647,6 +672,15 @@ textarea.image-workbench-prompt {
white-space: nowrap;
}
.image-workbench-camera-stage > span {
padding: 4px 12px;
border-radius: var(--radius-xs);
background: rgba(0, 0, 0, 0.6);
color: #fff;
font-size: 13px;
white-space: nowrap;
}
/* Inpaint mask canvas */
.image-workbench-inpaint-canvas {
display: block;
@@ -689,16 +723,8 @@ textarea.image-workbench-prompt {
color: #fff;
}
.image-workbench-camera-stage > span {
bottom: 64px;
}
.image-workbench-camera-stage > .image-workbench-result-actions {
position: absolute;
bottom: 16px;
left: 50%;
width: min(360px, calc(100% - 32px));
transform: translateX(-50%);
}
.image-workbench-inpaint-tool.is-active {
@@ -809,24 +835,26 @@ textarea.image-workbench-prompt {
text-align: center;
}
.image-workbench-result-grid {
.image-workbench-panel--right .image-workbench-result-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
gap: 8px;
margin-top: 8px;
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
gap: 10px;
margin-top: 10px;
}
.image-workbench-result-thumb {
display: block;
overflow: hidden;
border-radius: 6px;
border-radius: 8px;
border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
aspect-ratio: 1;
transition: border-color 0.15s;
transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.image-workbench-result-thumb:hover {
border-color: var(--accent, #2dd4bf);
transform: scale(1.04);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.image-workbench-result-thumb img {
@@ -1467,6 +1495,27 @@ textarea.image-workbench-prompt {
margin: 0;
}
.watermark-removal-actions {
flex-direction: column;
gap: 10px;
padding: 12px 0 0;
}
.watermark-removal-actions .image-workbench-primary {
width: 100%;
min-height: 48px;
justify-content: center;
font-size: 14px;
font-weight: 750;
}
.watermark-removal-actions .image-workbench-cancel {
width: 100%;
min-height: 42px;
justify-content: center;
font-size: 13px;
}
.watermark-removal-compare {
display: grid;
grid-template-columns: 1fr 1fr;
@@ -1519,34 +1568,42 @@ textarea.image-workbench-prompt {
.watermark-removal-compare__actions {
position: absolute;
bottom: 10px;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
width: min(480px, calc(100% - 32px));
}
.watermark-removal-compare__actions button {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 12px;
border: none;
justify-content: center;
gap: 10px;
min-height: 64px;
padding: 0 24px;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xs);
background: rgba(0, 0, 0, 0.6);
color: #fff;
font-size: 12px;
background: var(--bg-inset);
color: var(--fg-body);
font: inherit;
font-size: 18px;
font-weight: 750;
cursor: pointer;
backdrop-filter: blur(4px);
transition: background 0.15s;
backdrop-filter: none;
transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}
.watermark-removal-compare__actions button:hover:not(:disabled) {
background: rgba(0, 0, 0, 0.8);
border-color: rgba(var(--accent-rgb), 0.42);
background: rgba(var(--accent-rgb), 0.11);
color: var(--accent);
}
.watermark-removal-compare__actions button:disabled {
opacity: 0.5;
opacity: 0.56;
cursor: not-allowed;
}
@@ -1556,40 +1613,40 @@ textarea.image-workbench-prompt {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
gap: 14px;
width: 100%;
height: 100%;
color: var(--fg-muted);
}
.image-workbench-generating strong {
font-size: 15px;
font-size: 22px;
color: var(--fg-default);
}
.image-workbench-progress-bar {
width: 200px;
height: 6px;
border-radius: 3px;
width: min(420px, 80%);
height: 10px;
border-radius: 5px;
background: var(--bg-inset);
overflow: hidden;
}
.image-workbench-progress-fill {
height: 100%;
border-radius: 3px;
background: var(--accent);
transition: width 0.3s ease;
border-radius: 5px;
background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 70%, white));
transition: width 0.35s ease;
}
.image-workbench-cancel {
margin-top: 8px;
padding: 6px 16px;
margin-top: 12px;
padding: 8px 24px;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xs);
background: transparent;
color: var(--fg-muted);
font-size: 13px;
font-size: 15px;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
@@ -1602,25 +1659,28 @@ textarea.image-workbench-prompt {
.image-workbench-result-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 12px;
align-content: center;
justify-items: center;
width: 100%;
height: 100%;
padding: 16px;
margin: 0;
padding: 32px;
overflow-y: auto;
align-content: start;
gap: 20px;
}
.image-workbench-result-item {
display: block;
border-radius: var(--radius-sm);
border-radius: var(--radius-md, 12px);
overflow: hidden;
border: 1px solid var(--border-weak);
transition: border-color 0.15s, box-shadow 0.15s;
transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.image-workbench-result-item:hover {
border-color: var(--accent);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(var(--accent-rgb, 45, 212, 191), 0.1);
transform: translateY(-2px);
}
.image-workbench-result-item img {
@@ -1629,34 +1689,41 @@ textarea.image-workbench-prompt {
height: auto;
object-fit: contain;
background: var(--bg-inset);
transition: transform 300ms ease;
}
.image-workbench-result-item:hover img {
transform: scale(1.02);
}
.image-workbench-result-card {
display: grid;
min-width: 0;
width: 100%;
max-width: 560px;
align-content: start;
gap: 8px;
gap: 14px;
}
.image-workbench-result-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
gap: 10px;
}
.image-workbench-result-actions button {
display: inline-flex;
min-width: 0;
min-height: 34px;
min-height: 48px;
align-items: center;
justify-content: center;
gap: 5px;
gap: 8px;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xs);
background: var(--bg-inset);
color: var(--fg-body);
font: inherit;
font-size: 12px;
font-size: 14px;
font-weight: 750;
cursor: pointer;
transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
@@ -1690,6 +1757,26 @@ textarea.image-workbench-prompt {
cursor: not-allowed;
}
/* Result card entrance animation */
@keyframes image-workbench-result-enter {
from {
opacity: 0;
transform: translateY(12px) scale(0.97);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.image-workbench-result-card {
animation: image-workbench-result-enter 0.4s ease-out both;
}
.image-workbench-result-card:nth-child(2) { animation-delay: 0.08s; }
.image-workbench-result-card:nth-child(3) { animation-delay: 0.16s; }
.image-workbench-result-card:nth-child(4) { animation-delay: 0.24s; }
@media (max-width: 900px) {
.image-workbench-page {
padding: 12px;