From ab8a1947d730d24da4ac2e070b761bbd3549f939 Mon Sep 17 00:00:00 2001 From: root Date: Wed, 18 Feb 2026 00:21:24 +0800 Subject: [PATCH] =?UTF-8?q?fix(nsfw-dark):=20=E8=A1=A5=E9=BD=90=E7=80=91?= =?UTF-8?q?=E5=B8=83=E6=B5=81=E5=80=99=E9=80=89=E5=9B=BE=E9=80=89=E4=B8=AD?= =?UTF-8?q?=E6=A1=86=E5=A4=9C=E9=97=B4=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/static/public/css/nsfw.css | 809 +++++++++++++++++++++++++++++++++ 1 file changed, 809 insertions(+) create mode 100644 app/static/public/css/nsfw.css diff --git a/app/static/public/css/nsfw.css b/app/static/public/css/nsfw.css new file mode 100644 index 0000000..63c151d --- /dev/null +++ b/app/static/public/css/nsfw.css @@ -0,0 +1,809 @@ +:root { + --nsfw-surface: #ffffff; + --nsfw-bg: #f6f7fb; + --nsfw-border: #e7e8ea; + --nsfw-muted: #6b7280; + --nsfw-title: #111827; + --nsfw-accent: #111827; +} + +body { + background-color: var(--nsfw-bg); + background-image: none; +} + +.page-head { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 16px; + flex-wrap: wrap; +} + +.status-stack { + display: flex; + gap: 8px; + flex-wrap: wrap; +} + +.status-chip { + border: 1px solid var(--nsfw-border); + background: #fff; + color: var(--nsfw-muted); + border-radius: 999px; + padding: 6px 10px; + font-size: 11px; +} + +.status-chip.running { + color: #2563eb; + border-color: #bfdbfe; + background: #eff6ff; +} + +.status-chip.done { + color: #047857; + border-color: #a7f3d0; + background: #ecfdf5; +} + +.status-chip.error { + color: #b91c1c; + border-color: #fecaca; + background: #fef2f2; +} + +.top-grid { + display: grid; + grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); + gap: 24px; +} + +@media (max-width: 1024px) { + .top-grid { + grid-template-columns: 1fr; + } +} + +.panel { + background: var(--nsfw-surface); + border: none; + border-radius: 12px; + padding: 20px; +} + +.panel-title { + font-size: 13px; + font-weight: 600; + color: var(--nsfw-title); + margin-bottom: 12px; +} + +.panel-head { + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; + margin-bottom: 12px; +} + +.head-meta { + font-size: 11px; + color: var(--nsfw-muted); +} + +.field-label { + display: block; + font-size: 11px; + color: var(--accents-4); + margin-bottom: 6px; +} + +.form-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 12px 16px; +} + +.field { + min-width: 0; +} + +.field-wide { + grid-column: 1 / -1; +} + +.form-textarea { + min-height: 84px; + resize: vertical; +} + +.action-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 10px; +} + +.action-grid .geist-button, +.action-grid .geist-button-outline, +.action-grid .geist-button-danger { + height: 32px; + justify-content: center; +} + +.action-wide { + grid-column: 1 / -1; +} + +.selected-meta { + margin-top: 12px; + font-size: 12px; + color: var(--nsfw-muted); +} + +.empty-state { + border: 1px dashed var(--nsfw-border); + border-radius: 10px; + color: var(--nsfw-muted); + font-size: 12px; + text-align: center; + padding: 18px; +} + +.candidate-waterfall { + column-count: 3; + column-gap: 12px; +} + +@media (max-width: 1024px) { + .candidate-waterfall { + column-count: 2; + } +} + +@media (max-width: 680px) { + .candidate-waterfall { + column-count: 1; + } + + .form-grid, + .action-grid { + grid-template-columns: 1fr; + } + + .action-wide { + grid-column: auto; + } +} + +.candidate-card { + break-inside: avoid; + border: 1px solid #eceef1; + border-radius: 12px; + overflow: hidden; + margin-bottom: 12px; + background: #fff; + transition: all .18s ease; +} + +.candidate-card.selected { + border-color: #2563eb; + box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); +} + +.candidate-image-wrap { + position: relative; +} + +.candidate-image { + width: 100%; + display: block; + cursor: pointer; +} + +.selected-badge { + position: absolute; + top: 8px; + right: 8px; + font-size: 10px; + color: #fff; + background: rgba(37, 99, 235, 0.95); + border-radius: 999px; + padding: 4px 8px; + display: none; +} + +.candidate-card.selected .selected-badge { + display: inline-flex; +} + +html[data-theme='dark'] .candidate-card { + background: #111821; + border-color: #2b3440; +} + +html[data-theme='dark'] .candidate-card.selected { + border-color: #60a5fa; + box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.22); +} + +html[data-theme='dark'] .selected-badge { + background: rgba(96, 165, 250, 0.95); + color: #0b1220; +} + +html[data-theme='dark'] .candidate-meta { + color: #9fb0c5; + background: #111821; +} + +.candidate-meta { + display: flex; + justify-content: space-between; + align-items: center; + gap: 8px; + font-size: 11px; + color: var(--nsfw-muted); + padding: 8px 10px; +} + +.candidate-actions { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 8px; + padding: 0 10px 10px; +} + +.candidate-actions .geist-button-outline { + height: 28px; + padding: 0 10px; +} + +.video-results { + display: grid; + grid-template-columns: 1fr; + gap: 12px; +} + +.video-item { + border: 1px solid #eceef1; + border-radius: 12px; + padding: 12px; + background: #fff; +} + +.video-item-head { + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; + margin-bottom: 8px; +} + +.video-item-title { + font-size: 12px; + font-weight: 600; + color: var(--nsfw-title); +} + +.video-item-status { + font-size: 11px; + color: var(--nsfw-muted); +} + +.video-item-status.running { + color: #2563eb; +} + +.video-item-status.done { + color: #047857; +} + +.video-item-status.error { + color: #b91c1c; +} + +.video-body { + border: 1px dashed var(--nsfw-border); + border-radius: 10px; + min-height: 120px; + display: flex; + align-items: center; + justify-content: center; + color: var(--nsfw-muted); + font-size: 12px; + overflow: hidden; + background: #fafafa; +} + +.video-body video { + width: 100%; + height: auto; + display: block; +} + +.video-actions { + margin-top: 10px; + display: flex; + gap: 8px; +} + +.video-actions .geist-button-outline { + height: 28px; + padding: 0 10px; +} + +.hidden { + display: none !important; +} + +.image-lightbox { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.9); + z-index: 9999; + justify-content: center; + align-items: center; + cursor: zoom-out; + animation: fadeIn 0.2s ease; +} + +.image-lightbox.active { + display: flex; +} + +.image-lightbox img { + max-width: 90%; + max-height: 90%; + object-fit: contain; + border-radius: 8px; + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); +} + +.lightbox-close { + position: absolute; + top: 20px; + right: 20px; + background: rgba(255, 255, 255, 0.1); + border: none; + color: #fff; + width: 40px; + height: 40px; + border-radius: 50%; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: background 0.2s; +} + +.lightbox-close:hover { + background: rgba(255, 255, 255, 0.2); +} + +.lightbox-editor { + position: absolute; + left: 50%; + bottom: 20px; + transform: translateX(-50%); + z-index: 10001; + width: min(1100px, calc(100vw - 32px)); + display: flex; + flex-direction: row; + align-items: stretch; + padding: 10px; + border-radius: 12px; + background: rgba(16, 18, 24, 0.78); + border: 1px solid rgba(255, 255, 255, 0.12); + backdrop-filter: blur(10px); +} + +.lightbox-edit-layout { + display: grid; + width: 100%; + grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); + gap: 10px; +} + +.lightbox-edit-left { + display: flex; + flex-direction: column; + gap: 8px; + min-width: 0; +} + +.lightbox-edit-main { + display: flex; + gap: 10px; + align-items: flex-end; +} + +.lightbox-edit-input { + flex: 1; + min-height: 48px; + max-height: 160px; + resize: vertical; + border: 1px solid rgba(255, 255, 255, 0.22); + border-radius: 10px; + background: rgba(255, 255, 255, 0.08); + color: #fff; + font-size: 13px; + line-height: 1.45; + padding: 10px 12px; + outline: none; +} + +.lightbox-edit-input::placeholder { + color: rgba(255, 255, 255, 0.62); +} + +.lightbox-edit-input:focus { + border-color: rgba(255, 255, 255, 0.44); +} + +.lightbox-edit-send { + height: 48px; + min-width: 92px; + padding: 0 14px; + border-radius: 10px; + border: 1px solid rgba(255, 255, 255, 0.24); + background: rgba(255, 255, 255, 0.12); + color: #fff; + font-size: 13px; + font-weight: 600; + cursor: pointer; + transition: all 0.2s; +} + +.lightbox-edit-send:hover:not(:disabled) { + background: rgba(255, 255, 255, 0.2); +} + +.lightbox-edit-send:disabled { + opacity: 0.42; + cursor: not-allowed; +} + +.lightbox-edit-progress-wrap { + display: none; + height: 8px; + width: 100%; + border-radius: 999px; + overflow: hidden; + background: rgba(255, 255, 255, 0.16); +} + +.lightbox-edit-progress-wrap.active { + display: block; +} + +.lightbox-edit-progress-bar { + width: 0%; + height: 100%; + border-radius: 999px; + background: linear-gradient(90deg, #60a5fa 0%, #22d3ee 100%); + transition: width 0.25s ease; +} + +.lightbox-edit-progress-text { + display: none; + font-size: 12px; + line-height: 1.2; + color: rgba(255, 255, 255, 0.9); + font-family: 'Geist Mono', ui-monospace, monospace; +} + +.lightbox-edit-progress-text.active { + display: block; +} + +.lightbox-edit-progress-wrap.is-success .lightbox-edit-progress-bar { + background: linear-gradient(90deg, #34d399 0%, #10b981 100%); +} + +.lightbox-edit-progress-wrap.is-error .lightbox-edit-progress-bar { + background: linear-gradient(90deg, #f87171 0%, #ef4444 100%); +} + +.lightbox-history-panel { + border: 1px solid rgba(255, 255, 255, 0.14); + border-radius: 10px; + background: rgba(255, 255, 255, 0.04); + display: flex; + flex-direction: column; + min-height: 170px; + max-height: 260px; + overflow: hidden; +} + +.lightbox-history-head { + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; + padding: 9px 10px; + border-bottom: 1px solid rgba(255, 255, 255, 0.12); +} + +.lightbox-history-title { + font-size: 12px; + font-weight: 600; + color: rgba(255, 255, 255, 0.92); +} + +.lightbox-history-count { + font-size: 11px; + color: rgba(255, 255, 255, 0.64); +} + +.lightbox-history-empty { + font-size: 12px; + color: rgba(255, 255, 255, 0.58); + padding: 14px 10px; +} + +.lightbox-history-list { + display: flex; + flex-direction: column; + gap: 8px; + padding: 8px; + overflow: auto; +} + +.lightbox-history-list::-webkit-scrollbar { + width: 6px; +} + +.lightbox-history-list::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.2); + border-radius: 999px; +} + +.lightbox-history-item { + display: grid; + grid-template-columns: 52px minmax(0, 1fr); + gap: 8px; + border: 1px solid rgba(255, 255, 255, 0.14); + border-radius: 8px; + padding: 6px; + background: rgba(255, 255, 255, 0.03); +} + +.lightbox-history-thumb { + width: 52px; + height: 52px; + border-radius: 6px; + object-fit: cover; + background: rgba(0, 0, 0, 0.22); +} + +.lightbox-history-main { + min-width: 0; + display: flex; + flex-direction: column; + gap: 4px; +} + +.lightbox-history-line { + font-size: 11px; + line-height: 1.25; + color: rgba(255, 255, 255, 0.75); +} + +.lightbox-history-line strong { + color: rgba(255, 255, 255, 0.96); +} + +.lightbox-history-prompt { + font-size: 11px; + line-height: 1.3; + color: rgba(255, 255, 255, 0.66); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.lightbox-history-actions { + display: flex; + align-items: center; + gap: 6px; +} + +.lightbox-history-btn { + height: 24px; + border-radius: 7px; + border: 1px solid rgba(255, 255, 255, 0.2); + background: rgba(255, 255, 255, 0.08); + color: #fff; + font-size: 11px; + padding: 0 8px; + cursor: pointer; +} + +.lightbox-history-btn:hover { + background: rgba(255, 255, 255, 0.16); +} + +.lightbox-nav { + position: absolute; + top: 50%; + transform: translateY(-50%); + background: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.2); + color: #fff; + width: 50px; + height: 50px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + z-index: 10000; + transition: all 0.2s; + backdrop-filter: blur(10px); +} + +.lightbox-nav:hover { + background: rgba(255, 255, 255, 0.2); + border-color: rgba(255, 255, 255, 0.4); +} + +.lightbox-nav:active { + transform: translateY(-50%) scale(0.95); +} + +.lightbox-prev { + left: 30px; +} + +.lightbox-next { + right: 30px; +} + +.lightbox-nav:disabled { + opacity: 0.3; + cursor: not-allowed; +} + +.lightbox-nav:disabled:hover { + background: rgba(255, 255, 255, 0.1); + border-color: rgba(255, 255, 255, 0.2); + transform: translateY(-50%); +} + +@media (max-width: 768px) { + .lightbox-nav { + width: 40px; + height: 40px; + } + + .lightbox-prev { + left: 15px; + } + + .lightbox-next { + right: 15px; + } + + .lightbox-editor { + width: calc(100vw - 20px); + left: 10px; + transform: none; + bottom: 10px; + padding: 8px; + } + + .lightbox-edit-layout { + grid-template-columns: 1fr; + gap: 8px; + } + + .lightbox-history-panel { + max-height: 220px; + } + + .lightbox-edit-main { + flex-direction: column; + align-items: stretch; + gap: 8px; + } + + .lightbox-edit-send { + width: 100%; + } +} + +@media (max-width: 900px) { + .action-grid { + display: none; + } + + .top-grid { + gap: 12px; + } + + .panel { + padding: 12px; + border-radius: 12px; + } + + .form-grid { + gap: 10px 12px; + } + + .form-textarea { + min-height: 70px; + } + + .candidate-card { + margin-bottom: 8px; + border-radius: 10px; + } + + .candidate-meta { + padding: 6px 8px; + font-size: 10px; + } + + .candidate-actions { + gap: 6px; + padding: 0 8px 8px; + } + + .video-item { + padding: 10px; + border-radius: 10px; + } + + .video-body { + min-height: 98px; + } + + .video-actions { + margin-top: 8px; + gap: 6px; + } +} + +@media (min-width: 760px) and (max-width: 1180px) { + .video-results { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media (max-width: 680px) { + .candidate-waterfall { + column-count: 2; + column-gap: 8px; + } + + .form-grid { + grid-template-columns: 1fr; + } + + .action-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .action-wide { + grid-column: 1 / -1; + } +} + +@media (max-width: 420px) { + .candidate-waterfall { + column-count: 1; + } + + .action-grid { + grid-template-columns: 1fr; + } + + .action-wide { + grid-column: auto; + } +}