feat: add find page, breadcrumb components and canvas workbench updates
This commit is contained in:
+652
-9
@@ -30,14 +30,19 @@
|
||||
--shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
|
||||
--shadow-md: 0 10px 28px rgba(17,24,39,0.10);
|
||||
--shadow-lg: 0 22px 60px rgba(17,24,39,0.18);
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 12px;
|
||||
--radius-sm: 8px;
|
||||
--radius-md: 14px;
|
||||
--radius-lg: 20px;
|
||||
--nav-height: 56px;
|
||||
--panel-width: 240px;
|
||||
--transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--font-main: 'DM Sans', sans-serif;
|
||||
--font-mono: 'DM Mono', monospace;
|
||||
/* 液态玻璃 */
|
||||
--glass-bg: rgba(255, 255, 255, 0.55);
|
||||
--glass-border: rgba(255, 255, 255, 0.72);
|
||||
--glass-ring: rgba(24, 36, 56, 0.10);
|
||||
--glass-blur: 16px;
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] {
|
||||
@@ -64,6 +69,9 @@
|
||||
--shadow-sm: 0 1px 3px rgba(0,0,0,0.36);
|
||||
--shadow-md: 0 8px 22px rgba(0,0,0,0.34);
|
||||
--shadow-lg: 0 18px 44px rgba(0,0,0,0.42);
|
||||
--glass-bg: rgba(24, 28, 34, 0.52);
|
||||
--glass-border: rgba(255, 255, 255, 0.14);
|
||||
--glass-ring: rgba(0, 0, 0, 0.34);
|
||||
}
|
||||
|
||||
html, body, #root {
|
||||
@@ -131,6 +139,46 @@ body {
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
/* 线性主流程面包屑：玻璃 pill，当前步高亮 */
|
||||
.breadcrumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.crumb {
|
||||
padding: 4px 10px;
|
||||
border-radius: 9px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg);
|
||||
color: var(--text-secondary);
|
||||
transition: background var(--transition), color var(--transition), border-color var(--transition);
|
||||
}
|
||||
.crumb:hover:not(:disabled) {
|
||||
background: var(--accent-light);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.crumb.active {
|
||||
background: var(--accent);
|
||||
color: var(--on-accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
.crumb:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: default;
|
||||
}
|
||||
.crumb-sep {
|
||||
color: var(--text-muted);
|
||||
font-weight: 300;
|
||||
padding: 0 2px;
|
||||
}
|
||||
.crumb-wrap {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navbar-mode-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -1962,11 +2010,41 @@ body.resizing {
|
||||
/* ===== HELP PAGE ===== */
|
||||
.help-page {
|
||||
height: 100vh;
|
||||
background: var(--bg);
|
||||
background:
|
||||
radial-gradient(85% 55% at 90% -8%, var(--lf-blob-1), transparent 60%),
|
||||
radial-gradient(70% 50% at 0% 30%, var(--lf-blob-2), transparent 60%),
|
||||
radial-gradient(80% 45% at 70% 115%, var(--lf-blob-3), transparent 60%),
|
||||
linear-gradient(to bottom, var(--lf-bg-a) 0%, var(--lf-bg-b) 100%);
|
||||
color: var(--text-primary);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 帮助页玻璃化（复用 --lf-* 令牌） */
|
||||
.help-page .navbar {
|
||||
background: var(--lf-nav-bg);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(160%);
|
||||
backdrop-filter: blur(20px) saturate(160%);
|
||||
border-bottom: 1px solid var(--lf-nav-border);
|
||||
box-shadow: none;
|
||||
}
|
||||
.help-page .navbar-brand-name { color: var(--lf-text); }
|
||||
.help-page .navbar-mode-badge,
|
||||
.help-page .nav-btn-label { color: var(--lf-text-dim); }
|
||||
.help-page .help-hero,
|
||||
.help-page .help-step,
|
||||
.help-page .help-item,
|
||||
.help-page .help-row {
|
||||
background: var(--lf-glass-bg);
|
||||
border: 1px solid var(--lf-glass-border);
|
||||
-webkit-backdrop-filter: blur(18px) saturate(170%);
|
||||
backdrop-filter: blur(18px) saturate(170%);
|
||||
box-shadow: inset 0 1px 0 var(--lf-glass-highlight), 0 6px 20px var(--lf-shadow);
|
||||
}
|
||||
.help-page .help-hero h1 { color: var(--lf-text); }
|
||||
.help-page .help-hero p,
|
||||
.help-page .help-section h2 { color: var(--lf-text-dim); }
|
||||
.help-page .help-kicker { color: var(--lf-accent); }
|
||||
|
||||
.help-main {
|
||||
height: calc(100vh - var(--nav-height));
|
||||
overflow: auto;
|
||||
@@ -2205,10 +2283,15 @@ body.resizing {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 28px;
|
||||
background: rgba(0, 0, 0, 0.34);
|
||||
/* 只模糊、不压暗：去掉黑遮罩，保留毛玻璃磨砂。
|
||||
模糊从 0 缓慢增强到目标值（700ms ease-out），进展不突兀 */
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
backdrop-filter: blur(10px);
|
||||
animation: modal-backdrop-in 700ms ease-out;
|
||||
}
|
||||
:root[data-theme="dark"] .template-modal-backdrop {
|
||||
background: rgba(10, 12, 18, 0.14);
|
||||
}
|
||||
|
||||
.template-modal {
|
||||
width: min(960px, 100%);
|
||||
max-height: calc(100vh - 56px);
|
||||
@@ -2238,7 +2321,7 @@ body.resizing {
|
||||
height: 82px;
|
||||
object-fit: cover;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--bg-panel-alt);
|
||||
flex-shrink: 0;
|
||||
transition: outline 0.1s;
|
||||
@@ -2291,6 +2374,19 @@ body.resizing {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
/* 遮罩只模糊不压暗 → 让模糊从 0 慢慢增强到目标值，而非瞬间全糊（进展缓一点） */
|
||||
@keyframes modal-backdrop-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-backdrop-filter: blur(0px);
|
||||
backdrop-filter: blur(0px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.navbar {
|
||||
@@ -2402,8 +2498,110 @@ body.resizing .studio-panel {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
/* ── OrdersPage（生产订单，登录后可见）────────────── */
|
||||
.orders-page { min-height: 100vh; display: flex; flex-direction: column; background: var(--workspace-bg, var(--bg)); }
|
||||
/* ── TemplateHome（模板库）LeleFlix 玻璃化 ──────────
|
||||
复用全局 --lf-* 令牌（:root / dark 各一套），仅作用域此页。 */
|
||||
.template-home {
|
||||
background:
|
||||
radial-gradient(90% 60% at 85% -8%, var(--lf-blob-1), transparent 60%),
|
||||
radial-gradient(70% 55% at 0% 20%, var(--lf-blob-2), transparent 60%),
|
||||
radial-gradient(80% 50% at 70% 110%, var(--lf-blob-3), transparent 60%),
|
||||
linear-gradient(to bottom, var(--lf-bg-a) 0%, var(--lf-bg-b) 100%);
|
||||
}
|
||||
.template-home .navbar {
|
||||
background: var(--lf-nav-bg);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(160%);
|
||||
backdrop-filter: blur(20px) saturate(160%);
|
||||
border-bottom: 1px solid var(--lf-nav-border);
|
||||
box-shadow: none;
|
||||
}
|
||||
.template-home .navbar-brand { border-right-color: var(--lf-glass-soft); }
|
||||
.template-home .navbar-brand-name,
|
||||
.template-home .template-title { color: var(--lf-text); }
|
||||
.template-home .navbar-mode-badge,
|
||||
.template-home .nav-btn-label { color: var(--lf-text-dim); }
|
||||
|
||||
/* 卡片 = 图片本身：卡片本体透明，圆角靠 overflow:hidden 裁出，阴影只留一层大投影（无玻璃衬底） */
|
||||
.template-home .template-masonry-card {
|
||||
position: relative;
|
||||
background: transparent;
|
||||
border: none;
|
||||
box-shadow: 0 16px 40px var(--lf-shadow-strong);
|
||||
}
|
||||
.template-home .template-masonry-card:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 22px 54px var(--lf-shadow-strong);
|
||||
}
|
||||
|
||||
/* 图片填满卡片（透明卡片外框用它承载圆角+阴影），自身不圆角不投影 */
|
||||
.template-home .template-masonry-card .template-preview {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* 标题悬浮玻璃条：新的一层圆角玻璃，浮在图片下部。
|
||||
只模糊、不压暗——去掉 saturate 提饱和，底色压到很低透明，让图保持原亮度 */
|
||||
.template-home .template-masonry-card .template-masonry-info {
|
||||
position: absolute;
|
||||
left: 12px; right: 12px; bottom: 12px;
|
||||
background: rgba(255, 255, 255, 0.32);
|
||||
border: 1px solid var(--lf-glass-border);
|
||||
-webkit-backdrop-filter: blur(22px);
|
||||
backdrop-filter: blur(22px);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow:
|
||||
0 10px 26px var(--lf-shadow),
|
||||
inset 0 1px 0 var(--lf-glass-highlight);
|
||||
padding: 10px 14px 8px;
|
||||
}
|
||||
:root[data-theme="dark"] .template-home .template-masonry-card .template-masonry-info {
|
||||
background: rgba(10, 12, 18, 0.38);
|
||||
}
|
||||
.template-home .template-masonry-card .template-description {
|
||||
color: var(--lf-text-dim);
|
||||
max-height: 2.6em; line-height: 1.3;
|
||||
overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.template-home .template-masonry-card .template-meta span {
|
||||
border-color: var(--lf-glass-soft);
|
||||
color: var(--lf-text-dim);
|
||||
background: var(--lf-input-bg);
|
||||
}
|
||||
|
||||
/* 模态大图预览（独立圆角层，不悬浮标题条） */
|
||||
.template-home .template-modal .template-preview {
|
||||
background: #fff;
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: inset 0 0 0 1px var(--lf-glass-soft), 0 12px 34px var(--lf-shadow-strong);
|
||||
}
|
||||
|
||||
/* 空态与模态玻璃化 */
|
||||
.template-home .template-empty {
|
||||
background: var(--lf-glass-bg);
|
||||
border: 1px solid var(--lf-glass-border);
|
||||
-webkit-backdrop-filter: blur(16px) saturate(170%);
|
||||
backdrop-filter: blur(16px) saturate(170%);
|
||||
box-shadow: inset 0 1px 0 var(--lf-glass-highlight), 0 10px 30px var(--lf-shadow);
|
||||
}
|
||||
.template-home .template-empty-title { color: var(--lf-text-dim); }
|
||||
.template-home .template-modal {
|
||||
background: var(--lf-glass-bg);
|
||||
-webkit-backdrop-filter: blur(24px) saturate(180%);
|
||||
backdrop-filter: blur(24px) saturate(180%);
|
||||
box-shadow:
|
||||
0 24px 70px var(--lf-shadow-strong),
|
||||
inset 0 1px 0 var(--lf-glass-highlight);
|
||||
}
|
||||
|
||||
/* ── OrdersPage（生产订单，登录后可见）──────────────
|
||||
根背景多层光斑（复用 --lf-* 令牌），双主题随 :root。 */
|
||||
.orders-page {
|
||||
min-height: 100vh; display: flex; flex-direction: column;
|
||||
background:
|
||||
radial-gradient(85% 60% at 10% -5%, var(--lf-blob-2), transparent 60%),
|
||||
radial-gradient(75% 55% at 92% 15%, var(--lf-blob-1), transparent 60%),
|
||||
radial-gradient(90% 50% at 60% 115%, var(--lf-blob-3), transparent 60%),
|
||||
linear-gradient(to bottom, var(--lf-bg-a) 0%, var(--lf-bg-b) 100%);
|
||||
}
|
||||
.orders-main { flex: 1; padding: 24px 32px; max-width: 1080px; width: 100%; margin: 0 auto; box-sizing: border-box; }
|
||||
.orders-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
|
||||
.orders-count { color: var(--text-secondary); font-size: 14px; }
|
||||
@@ -2451,3 +2649,448 @@ body.resizing .studio-panel {
|
||||
.orders-layer-thumb { box-shadow: var(--shadow-sm); }
|
||||
.orders-layer-name { color: var(--text-secondary); font-size: 12px; margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.nav-btn-label.active { color: var(--accent); font-weight: 600; }
|
||||
|
||||
/* ── OrdersPage 已登录双栏玻璃化（复用 --lf-* 令牌）── */
|
||||
.orders-page .navbar {
|
||||
background: var(--lf-nav-bg);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(160%);
|
||||
backdrop-filter: blur(20px) saturate(160%);
|
||||
border-bottom: 1px solid var(--lf-nav-border);
|
||||
box-shadow: none;
|
||||
}
|
||||
.orders-page .navbar-brand { border-right-color: var(--lf-glass-soft); }
|
||||
.orders-page .navbar-brand-name,
|
||||
.orders-page .orders-detail-title { color: var(--lf-text); }
|
||||
.orders-page .navbar-mode-badge,
|
||||
.orders-page .nav-btn-label,
|
||||
.orders-page .orders-detail-meta,
|
||||
.orders-page .orders-count,
|
||||
.orders-page .orders-layer-name,
|
||||
.orders-page .orders-preview-label { color: var(--lf-text-dim); }
|
||||
|
||||
/* 左侧订单队列玻璃 */
|
||||
.orders-page .orders-queue {
|
||||
background: var(--lf-glass-bg);
|
||||
border: 1px solid var(--lf-glass-border);
|
||||
-webkit-backdrop-filter: blur(18px) saturate(170%);
|
||||
backdrop-filter: blur(18px) saturate(170%);
|
||||
box-shadow: inset 0 1px 0 var(--lf-glass-highlight), inset 0 -1px 0 var(--lf-glass-shade), 0 6px 20px var(--lf-shadow);
|
||||
}
|
||||
.orders-page .orders-queue-head { border-bottom-color: var(--lf-glass-soft); color: var(--lf-text); }
|
||||
.orders-page .orders-q-item:hover { background: var(--lf-accent-hover); }
|
||||
.orders-page .orders-q-item.active { border-color: var(--lf-accent-border); background: var(--lf-accent-soft); }
|
||||
.orders-page .orders-q-item-sub { color: var(--lf-text-faint); }
|
||||
|
||||
/* 右侧详情：预览卡片 / 表格玻璃化 */
|
||||
.orders-page .orders-preview-block,
|
||||
.orders-page .orders-table {
|
||||
background: var(--lf-glass-bg);
|
||||
border: 1px solid var(--lf-glass-border);
|
||||
-webkit-backdrop-filter: blur(18px) saturate(170%);
|
||||
backdrop-filter: blur(18px) saturate(170%);
|
||||
box-shadow: inset 0 1px 0 var(--lf-glass-highlight), 0 6px 20px var(--lf-shadow);
|
||||
}
|
||||
.orders-page .orders-table th { background: var(--lf-input-bg); color: var(--lf-text-dim); }
|
||||
.orders-page .orders-table td { color: var(--lf-text); }
|
||||
.orders-page .orders-table tr:last-child td { border-bottom: none; }
|
||||
|
||||
/* 状态 pill 保留红/绿/蓝状态底色，只加玻璃内高光与描边 */
|
||||
.orders-page .orders-status {
|
||||
box-shadow: inset 0 1px 0 var(--lf-glass-highlight), 0 0 0 1px var(--lf-glass-soft);
|
||||
}
|
||||
.orders-page .status-success { color: var(--lf-text); }
|
||||
.orders-page .status-running { color: var(--lf-accent); }
|
||||
.orders-page .status-failed { color: var(--lf-text); }
|
||||
.orders-page .status-queued { color: var(--lf-text-dim); }
|
||||
|
||||
/* ── CanvasStudio（画布）/ Wordcloud 壳玻璃化 ──────
|
||||
只玻璃化面板/浮动窗/底部 pill；保留 workspace 棋盘格与透明底标识。 */
|
||||
.side-panel,
|
||||
.floating-panel {
|
||||
background: var(--lf-glass-bg);
|
||||
border-color: var(--lf-glass-border);
|
||||
-webkit-backdrop-filter: blur(18px) saturate(170%);
|
||||
backdrop-filter: blur(18px) saturate(170%);
|
||||
box-shadow:
|
||||
inset 0 1px 0 var(--lf-glass-highlight),
|
||||
inset 0 -1px 0 var(--lf-glass-shade),
|
||||
0 8px 26px var(--lf-shadow);
|
||||
}
|
||||
.floating-panel {
|
||||
box-shadow:
|
||||
0 22px 60px var(--lf-shadow-strong),
|
||||
inset 0 1px 0 var(--lf-glass-highlight);
|
||||
}
|
||||
.studio-bottombar .canvas-size-pill,
|
||||
.zoom-controls {
|
||||
background: var(--lf-glass-bg);
|
||||
border: 1px solid var(--lf-glass-border);
|
||||
-webkit-backdrop-filter: blur(16px) saturate(170%);
|
||||
backdrop-filter: blur(16px) saturate(170%);
|
||||
color: var(--lf-text-dim);
|
||||
box-shadow: inset 0 1px 0 var(--lf-glass-highlight), 0 4px 14px var(--lf-shadow);
|
||||
}
|
||||
.studio-bottombar .zoom-controls span { color: var(--lf-text); }
|
||||
|
||||
/* 词云工作台：舞台容器玻璃背景（网格底下透光斑） */
|
||||
.canvas-area {
|
||||
background:
|
||||
radial-gradient(80% 55% at 85% -5%, var(--lf-blob-1), transparent 60%),
|
||||
radial-gradient(70% 55% at 0% 25%, var(--lf-blob-2), transparent 60%),
|
||||
radial-gradient(85% 50% at 75% 115%, var(--lf-blob-3), transparent 60%),
|
||||
linear-gradient(to bottom, var(--lf-bg-a) 0%, var(--lf-bg-b) 100%);
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
FindPage — LeleFlix 设计语言（主题驱动，浅色/深色两套）
|
||||
液体玻璃：blur+saturate+内高光+光折射扫过。
|
||||
只影响查找页（.find-page 作用域），其余页面保持原主题。
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
|
||||
/* ── 设计令牌：浅色（默认）────────────────────────── */
|
||||
:root {
|
||||
--lf-bg-a: #eef3f9;
|
||||
--lf-bg-b: #e6ebf4;
|
||||
--lf-nav-bg: rgba(255, 255, 255, 0.62);
|
||||
--lf-nav-border: rgba(17, 24, 39, 0.06);
|
||||
--lf-text: #171a1f;
|
||||
--lf-text-dim: rgba(30, 41, 59, 0.72);
|
||||
--lf-text-faint: rgba(30, 41, 59, 0.5);
|
||||
--lf-glass-bg: rgba(255, 255, 255, 0.62);
|
||||
--lf-glass-border: rgba(255, 255, 255, 0.8);
|
||||
--lf-glass-soft: rgba(17, 24, 39, 0.09);
|
||||
--lf-glass-highlight: rgba(255, 255, 255, 0.9);
|
||||
--lf-glass-shade: rgba(17, 24, 39, 0.08);
|
||||
--lf-shadow: rgba(17, 24, 39, 0.15);
|
||||
--lf-shadow-strong: rgba(17, 24, 39, 0.24);
|
||||
--lf-input-bg: rgba(255, 255, 255, 0.7);
|
||||
--lf-opt-bg: #ffffff;
|
||||
--lf-accent: #2563eb;
|
||||
--lf-accent-soft: rgba(59, 130, 246, 0.16);
|
||||
--lf-accent-border: rgba(59, 130, 246, 0.5);
|
||||
--lf-accent-hover: rgba(59, 130, 246, 0.24);
|
||||
--lf-sweep: rgba(255, 255, 255, 0.65);
|
||||
--lf-sweep-soft: rgba(255, 255, 255, 0.5);
|
||||
--lf-frame-bg: #ffffff;
|
||||
--lf-frame-shadow: rgba(17, 24, 39, 0.22);
|
||||
--lf-err-bg: rgba(254, 226, 226, 0.75);
|
||||
--lf-err-border: rgba(220, 38, 38, 0.28);
|
||||
--lf-err-text: #b91c1c;
|
||||
--lf-blob-1: rgba(96, 165, 250, 0.32);
|
||||
--lf-blob-2: rgba(131, 120, 255, 0.22);
|
||||
--lf-blob-3: rgba(16, 185, 129, 0.16);
|
||||
}
|
||||
|
||||
/* ── 设计令牌（深色）─────────────────────────────── */
|
||||
:root[data-theme="dark"] {
|
||||
--lf-bg-a: #141824;
|
||||
--lf-bg-b: #07080c;
|
||||
--lf-nav-bg: rgba(8, 10, 15, 0.55);
|
||||
--lf-nav-border: rgba(255, 255, 255, 0.06);
|
||||
--lf-text: #f5f5f7;
|
||||
--lf-text-dim: rgba(235, 235, 245, 0.62);
|
||||
--lf-text-faint: rgba(235, 235, 245, 0.5);
|
||||
--lf-glass-bg: rgba(16, 18, 24, 0.55);
|
||||
--lf-glass-border: rgba(255, 255, 255, 0.10);
|
||||
--lf-glass-soft: rgba(255, 255, 255, 0.06);
|
||||
--lf-glass-highlight: rgba(255, 255, 255, 0.13);
|
||||
--lf-glass-shade: rgba(0, 0, 0, 0.25);
|
||||
--lf-shadow: rgba(0, 0, 0, 0.38);
|
||||
--lf-shadow-strong: rgba(0, 0, 0, 0.5);
|
||||
--lf-input-bg: rgba(8, 10, 15, 0.45);
|
||||
--lf-opt-bg: #131621;
|
||||
--lf-accent: #93c5fd;
|
||||
--lf-accent-soft: rgba(96, 165, 250, 0.2);
|
||||
--lf-accent-border: rgba(147, 197, 253, 0.55);
|
||||
--lf-accent-hover: rgba(96, 165, 250, 0.3);
|
||||
--lf-sweep: rgba(255, 255, 255, 0.10);
|
||||
--lf-sweep-soft: rgba(255, 255, 255, 0.05);
|
||||
--lf-frame-bg: #ffffff; /* 预览图底恒定白，保证名字可读 */
|
||||
--lf-frame-shadow: rgba(0, 0, 0, 0.5);
|
||||
--lf-err-bg: rgba(127, 29, 29, 0.5);
|
||||
--lf-err-border: rgba(251, 113, 133, 0.25);
|
||||
--lf-err-text: #fda4af;
|
||||
--lf-blob-1: rgba(96, 165, 250, 0.34);
|
||||
--lf-blob-2: rgba(131, 120, 255, 0.28);
|
||||
--lf-blob-3: rgba(20, 201, 164, 0.2);
|
||||
}
|
||||
|
||||
/* ── 页面基底（两套背景） ─────────────────────────── */
|
||||
.find-page {
|
||||
background:
|
||||
radial-gradient(120% 80% at 50% -10%, var(--lf-bg-a) 0%, transparent 55%),
|
||||
linear-gradient(to bottom, var(--lf-bg-b) 0%, var(--lf-bg-b) 100%);
|
||||
}
|
||||
.find-page .navbar {
|
||||
background: var(--lf-nav-bg);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(160%);
|
||||
backdrop-filter: blur(20px) saturate(160%);
|
||||
border-bottom: 1px solid var(--lf-nav-border);
|
||||
}
|
||||
.find-page .navbar-brand-name { color: var(--lf-text); }
|
||||
.find-page .nav-btn-label { color: var(--lf-text-dim); }
|
||||
.find-page .find-page-bg .blob-1 { background: radial-gradient(circle, var(--lf-blob-1), transparent 70%); }
|
||||
.find-page .find-page-bg .blob-2 { background: radial-gradient(circle, var(--lf-blob-2), transparent 70%); }
|
||||
.find-page .find-page-bg .blob-3 { background: radial-gradient(circle, var(--lf-blob-3), transparent 70%); }
|
||||
|
||||
/* 液体玻璃通用（LeleFlix 配方） */
|
||||
.find-page .glass,
|
||||
.find-page .find-footer {
|
||||
background: var(--lf-glass-bg);
|
||||
border: 1px solid var(--lf-glass-border);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
||||
backdrop-filter: blur(20px) saturate(180%);
|
||||
box-shadow:
|
||||
inset 0 1px 0 var(--lf-glass-highlight),
|
||||
inset 0 -1px 0 var(--lf-glass-shade);
|
||||
}
|
||||
|
||||
/* 词云视口：透明舞台 —— 不做大色板/遮罩，画布干净浮起，
|
||||
玻璃效果只给按钮。
|
||||
固定铺满视口可交互区（顶部避让玻璃工具条，底部避让结果 pill），
|
||||
必须有真实宽高，ResizeObserver 才拿得到尺寸、画布才能适配进来 */
|
||||
.find-page .find-stage {
|
||||
position: fixed; left: 16px; right: 16px;
|
||||
top: calc(var(--nav-height) + 100px);
|
||||
bottom: 78px;
|
||||
border-radius: 18px;
|
||||
background: transparent;
|
||||
touch-action: none;
|
||||
}
|
||||
.find-stage.panning { cursor: grabbing; }
|
||||
.find-stage:not(.panning) { cursor: grab; }
|
||||
|
||||
.find-viewport { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
|
||||
/* 离散跳转（放大定位 / 查看整图）时平滑过渡；拖动 / 捏合过程视图要即时跟手 → 无过渡 */
|
||||
.find-viewport { transition: transform 0s; }
|
||||
.find-viewport.animating { transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1); }
|
||||
/* 预览图背景恒定白色，深色模式下名字依然清晰；
|
||||
只留一道柔和投影让白色画布从页面浮起，不做厚重毛边/遮罩 */
|
||||
.find-page .find-preview-frame {
|
||||
position: relative; flex-shrink: 0;
|
||||
background: var(--lf-frame-bg);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 14px 40px var(--lf-frame-shadow);
|
||||
}
|
||||
.find-preview-img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; pointer-events: none; }
|
||||
|
||||
/* 悬浮玻璃工具条：LeleFlix 控制条风格（胶囊 + 光扫） */
|
||||
.find-page .find-glassbar {
|
||||
position: fixed; z-index: 30;
|
||||
top: calc(var(--nav-height) + 14px);
|
||||
left: 50%; transform: translateX(-50%);
|
||||
display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center;
|
||||
padding: 12px 16px; border-radius: 24px;
|
||||
max-width: calc(100vw - 24px);
|
||||
background: var(--lf-glass-bg);
|
||||
border: 1px solid var(--lf-glass-border);
|
||||
-webkit-backdrop-filter: blur(22px) saturate(180%);
|
||||
backdrop-filter: blur(22px) saturate(180%);
|
||||
box-shadow:
|
||||
inset 0 1px 0 var(--lf-glass-highlight),
|
||||
inset 0 -1px 0 var(--lf-glass-shade);
|
||||
overflow: hidden;
|
||||
}
|
||||
/* 光折射扫过（工具条静止时缓慢扫过，最像 LeleFlix 控制栏） */
|
||||
.find-page .find-glassbar::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: -100%;
|
||||
width: 45%; height: 100%;
|
||||
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, var(--lf-sweep-soft) 50%, rgba(255,255,255,0) 100%);
|
||||
pointer-events: none;
|
||||
animation: findGlassSweep 5.5s ease-in-out 1.2s infinite;
|
||||
}
|
||||
@keyframes findGlassSweep {
|
||||
0% { left: -100%; }
|
||||
55%, 100% { left: 220%; }
|
||||
}
|
||||
.find-page .find-glassbar .glass-field { display: flex; flex-direction: column; gap: 3px; }
|
||||
.find-page .find-glassbar .glass-label { font-size: 11px; color: var(--lf-text-faint); padding-left: 4px; letter-spacing: 0.04em; }
|
||||
.find-page .find-glassbar select,
|
||||
.find-page .find-glassbar input[type="text"] {
|
||||
border: 1px solid var(--lf-glass-soft); border-radius: 14px;
|
||||
background: var(--lf-input-bg); color: var(--lf-text); font-size: 13px;
|
||||
padding: 10px 12px; outline: none; font-family: var(--font-main);
|
||||
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
|
||||
transition: border-color var(--transition), box-shadow var(--transition);
|
||||
}
|
||||
.find-page .find-glassbar select { width: 230px; min-width: 150px; cursor: pointer; }
|
||||
.find-page .find-glassbar input[type="text"] { width: 220px; }
|
||||
.find-page .find-glassbar select:focus,
|
||||
.find-page .find-glassbar input[type="text"]:focus {
|
||||
border-color: var(--lf-accent-border);
|
||||
box-shadow: 0 0 0 3px var(--lf-accent-soft);
|
||||
}
|
||||
.find-page .find-glassbar select option { background: var(--lf-opt-bg); color: var(--lf-text); }
|
||||
.find-page .find-glassbar select:disabled { opacity: 0.5; }
|
||||
|
||||
/* 圆形液体玻璃媒体按钮（播放/暂停式） */
|
||||
.find-page .find-actions { display: flex; align-items: center; gap: 10px; }
|
||||
.find-page .find-btn {
|
||||
width: 42px; height: 42px; padding: 0;
|
||||
border-radius: 50%; cursor: pointer;
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
border: 1px solid var(--lf-glass-border);
|
||||
background: var(--lf-glass-bg);
|
||||
color: var(--lf-text); font-size: 13px; font-family: var(--font-main);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
||||
backdrop-filter: blur(20px) saturate(180%);
|
||||
box-shadow:
|
||||
inset 0 1px 0 var(--lf-glass-highlight),
|
||||
inset 0 -1px 0 var(--lf-glass-shade);
|
||||
position: relative; overflow: hidden;
|
||||
transition: transform var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition);
|
||||
}
|
||||
/* 光折射扫过动画 */
|
||||
.find-page .find-btn::before {
|
||||
content: '';
|
||||
position: absolute; top: 0; left: -100%;
|
||||
width: 60%; height: 100%;
|
||||
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, var(--lf-sweep) 50%, rgba(255,255,255,0) 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.find-page .find-btn:hover:not(:disabled)::before { animation: findGlassSweep 0.9s ease-out forwards; }
|
||||
/* 内发光层 */
|
||||
.find-page .find-btn::after {
|
||||
content: '';
|
||||
position: absolute; inset: 0; border-radius: 50%;
|
||||
background: linear-gradient(135deg, var(--lf-glass-highlight) 0%, rgba(255,255,255,0) 50%, var(--lf-glass-soft) 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.find-page .find-btn svg { position: relative; z-index: 2; flex-shrink: 0; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); }
|
||||
.find-page .find-btn:hover:not(:disabled) {
|
||||
background: var(--lf-accent-soft);
|
||||
border-color: var(--lf-accent-border);
|
||||
transform: scale(1.1);
|
||||
box-shadow:
|
||||
inset 0 1px 0 var(--lf-glass-highlight),
|
||||
0 0 20px var(--lf-accent-soft);
|
||||
}
|
||||
.find-page .find-btn:active:not(:disabled) { transform: scale(0.96); }
|
||||
.find-page .find-btn:disabled { opacity: 0.4; cursor: not-allowed; }
|
||||
/* 查找 = 加大号主媒体按钮 */
|
||||
.find-page .find-btn.find-btn-primary {
|
||||
width: 48px; height: 48px;
|
||||
background: var(--lf-accent-soft);
|
||||
border: 1px solid var(--lf-accent-border);
|
||||
color: var(--lf-accent);
|
||||
}
|
||||
.find-page .find-btn.find-btn-primary:hover:not(:disabled) {
|
||||
background: var(--lf-accent-hover);
|
||||
border-color: var(--lf-accent);
|
||||
box-shadow:
|
||||
0 14px 40px var(--lf-shadow-strong),
|
||||
inset 0 1px 0 var(--lf-glass-highlight),
|
||||
0 0 26px var(--lf-accent-soft);
|
||||
}
|
||||
.find-page .find-btn.find-btn-primary svg { filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.25)); }
|
||||
|
||||
/* 精确 / 包含 切换（玻璃胶囊） */
|
||||
.find-page .mode-toggle {
|
||||
display: inline-flex; gap: 2px;
|
||||
border: 1px solid var(--lf-glass-soft); border-radius: 14px;
|
||||
padding: 3px;
|
||||
background: var(--lf-input-bg);
|
||||
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
|
||||
}
|
||||
.find-page .mode-toggle button {
|
||||
flex: 1; padding: 8px 12px; border: none; border-radius: 11px;
|
||||
background: transparent; color: var(--lf-text-dim);
|
||||
font-size: 12px; font-family: var(--font-main); cursor: pointer;
|
||||
transition: background var(--transition), color var(--transition), box-shadow var(--transition);
|
||||
}
|
||||
.find-page .mode-toggle button.active {
|
||||
background: var(--lf-glass-bg);
|
||||
color: var(--lf-text); font-weight: 600;
|
||||
box-shadow: inset 0 1px 0 var(--lf-glass-highlight), 0 2px 8px var(--lf-shadow-strong);
|
||||
}
|
||||
|
||||
/* 底部结果统计（玻璃 pill） */
|
||||
.find-page .find-footer {
|
||||
position: fixed; z-index: 30; bottom: 14px; left: 50%; transform: translateX(-50%);
|
||||
color: var(--lf-text-dim); font-size: 13px;
|
||||
padding: 8px 18px; border-radius: 999px;
|
||||
white-space: nowrap; max-width: calc(100vw - 160px); overflow: hidden; text-overflow: ellipsis;
|
||||
}
|
||||
.find-page .find-footer strong { color: var(--lf-text); font-weight: 600; }
|
||||
|
||||
/* 右下角「查看整图 / 重新放大」：大玻璃胶囊 + 光扫 */
|
||||
.find-page .find-corner-btn {
|
||||
position: fixed; z-index: 30; right: 20px; bottom: 20px;
|
||||
height: 46px; padding: 0 20px; border-radius: 23px; cursor: pointer;
|
||||
border: 1px solid var(--lf-glass-border);
|
||||
background: var(--lf-glass-bg); color: var(--lf-text);
|
||||
font-size: 13px; font-family: var(--font-main); font-weight: 600;
|
||||
display: inline-flex; align-items: center; gap: 8px;
|
||||
-webkit-backdrop-filter: blur(22px) saturate(180%);
|
||||
backdrop-filter: blur(22px) saturate(180%);
|
||||
box-shadow:
|
||||
inset 0 1px 0 var(--lf-glass-highlight),
|
||||
inset 0 -1px 0 var(--lf-glass-shade);
|
||||
overflow: hidden;
|
||||
transition: transform var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition);
|
||||
}
|
||||
.find-page .find-corner-btn::before {
|
||||
content: '';
|
||||
position: absolute; top: 0; left: -100%;
|
||||
width: 50%; height: 100%;
|
||||
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, var(--lf-sweep) 50%, rgba(255,255,255,0) 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.find-page .find-corner-btn:hover:not(:disabled)::before { animation: findGlassSweep 1s ease-out forwards; }
|
||||
.find-page .find-corner-btn svg { flex-shrink: 0; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }
|
||||
.find-page .find-corner-btn:hover:not(:disabled) {
|
||||
background: var(--lf-accent-soft);
|
||||
border-color: var(--lf-accent-border);
|
||||
transform: translateY(-2px);
|
||||
box-shadow:
|
||||
inset 0 1px 0 var(--lf-glass-highlight),
|
||||
0 0 22px var(--lf-accent-soft);
|
||||
}
|
||||
.find-page .find-corner-btn:active:not(:disabled) { transform: translateY(0) scale(0.98); }
|
||||
.find-page .find-corner-btn:disabled { opacity: 0.4; cursor: not-allowed; }
|
||||
|
||||
/* 缩放提示 */
|
||||
.find-page .find-scale-tag {
|
||||
position: fixed; z-index: 29; right: 22px; bottom: 78px;
|
||||
font-size: 11px; color: var(--lf-text-faint); padding: 4px 12px; border-radius: 999px;
|
||||
background: var(--lf-glass-bg); border: 1px solid var(--lf-glass-border);
|
||||
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
|
||||
user-select: none; pointer-events: none;
|
||||
}
|
||||
|
||||
/* 悬浮错误提示（玻璃红条） */
|
||||
.find-page .find-error-fixed {
|
||||
position: fixed; z-index: 40;
|
||||
top: calc(var(--nav-height) + 92px); left: 50%; transform: translateX(-50%);
|
||||
color: var(--lf-err-text); background: var(--lf-err-bg);
|
||||
border: 1px solid var(--lf-err-border);
|
||||
padding: 8px 14px; border-radius: 12px; font-size: 13px;
|
||||
-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
|
||||
white-space: nowrap; max-width: calc(100vw - 24px); overflow: hidden; text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* 登录卡片玻璃化 */
|
||||
.orders-page .login-card,
|
||||
.find-page .login-card {
|
||||
background: var(--lf-glass-bg);
|
||||
border: 1px solid var(--lf-glass-border);
|
||||
-webkit-backdrop-filter: blur(22px) saturate(180%);
|
||||
backdrop-filter: blur(22px) saturate(180%);
|
||||
box-shadow: inset 0 1px 0 var(--lf-glass-highlight);
|
||||
}
|
||||
.orders-page .login-title,
|
||||
.find-page .login-title { color: var(--lf-text); }
|
||||
.orders-page .orders-hint,
|
||||
.find-page .orders-hint { color: var(--lf-text-dim); }
|
||||
.orders-page .orders-input,
|
||||
.find-page .orders-input {
|
||||
background: var(--lf-input-bg); border-color: var(--lf-glass-soft);
|
||||
color: var(--lf-text);
|
||||
}
|
||||
.orders-page .orders-input:focus,
|
||||
.find-page .orders-input:focus { border-color: var(--lf-accent-border); }
|
||||
|
||||
/* 未选任务时的居中占位 */
|
||||
.find-page .find-stage .table-empty { height: 100%; display: flex; align-items: center; justify-content: center; color: var(--lf-text-faint); }
|
||||
|
||||
Reference in New Issue
Block a user