feat: 工具盒卡片预览图替换与响应式视觉优化
本次提交包含以下改进： ## 1. 工具卡片真实预览图替换 (MorePage.tsx) - 移除原有的CSS绘制Before/After对比图(ToolComparePanel/CompareScene) - 新增ToolPreviewPanel组件，使用OSS真实截图展示每个工具的效果预览 - 建立toolPreviewImages映射表，为8个工具分别配置预览图URL - 预览图支持hover悬浮放大效果(popover)，桌面端鼠标悬停时展示大图 - 触摸设备通过@media (hover: none)隐藏popover，避免移动端误触 ## 2. 核心工具区重构 (MorePage.tsx) - 移除FeaturedTool独立接口和featuredTools数组，统一到tools体系 - 新增coreToolIds集合标记核心工具(workbench/inpaint/watermarkRemoval) - 新增coreToolGradients和coreToolSteps独立配置每张核心卡的渐变和步骤 - 移除openFeaturedTool，统一使用openTool处理所有工具点击 - 核心卡片kick er改为显示分类标签(图像创作/视频创作) - 视频生成分类标签更名为"视频创作" ## 3. 工具卡片视觉升级 (more.css) - 新增CSS变量体系：--more-card-surface/surface-strong/border/border-strong - 核心工具卡：三列网格布局、渐变背景叠加、预览图16:9占位区 - 普通工具卡：增大最小高度至392px、radial-gradient光晕、增强边框 - 卡片预览图：aspect-ratio容器、内边框光效、::after渐变叠加层 - Hover悬浮popover：从卡片底部弹出大图，160ms过渡动画 - CTA按钮强化：渐变背景、内阴影高光、font-weight 850 - :active状态按压反馈(translateY(0)消除位移) - 阴影系统升级：更深、更柔和的阴影层次 ## 4. Prompt案例弹窗响应式重构 (workbench.css) - 720px断点：从垂直堆叠改为水平左右分栏布局(1.08:0.92) - 侧边栏从底部面板移至右侧，带左分割线和投影 - 420px断点：紧凑水平分栏(0.9:1.1)、更小字号和间距 - 弹窗增加边框和圆角、关闭按钮毛玻璃效果 - 作者信息采用grid布局、描述文本line-clamp截断 ## 5. 响应式细节完善 - more.css 860px: 双列核心卡、增大预览图、调整间距 - more.css 520px: 单列布局、筛选标签横向滚动、CTA按钮全宽 - workbench.css: 各断点prompt-case-modal精确调优
This commit is contained in:
+284
-37
@@ -443,23 +443,23 @@
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal {
|
||||
align-items: stretch;
|
||||
padding: calc(56px + env(safe-area-inset-top, 0px)) 0 0;
|
||||
align-items: center;
|
||||
padding: calc(56px + env(safe-area-inset-top, 0px) + 10px) 12px 12px;
|
||||
background:
|
||||
radial-gradient(circle at 50% 34%, rgba(var(--accent-rgb), 0.12), transparent 42%),
|
||||
rgba(0, 0, 0, 0.78);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal__panel {
|
||||
--prompt-case-modal-max-height: calc(100svh - 56px - env(safe-area-inset-top, 0px));
|
||||
--prompt-case-modal-max-height: calc(100svh - 56px - env(safe-area-inset-top, 0px) - 22px);
|
||||
display: grid;
|
||||
grid-template-rows: minmax(0, 1fr) minmax(210px, 34%);
|
||||
width: 100%;
|
||||
grid-template-rows: minmax(0, 60%) minmax(220px, 40%);
|
||||
width: min(100%, 520px);
|
||||
height: var(--prompt-case-modal-max-height);
|
||||
max-height: var(--prompt-case-modal-max-height);
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
border: 1px solid rgba(var(--accent-rgb), 0.34);
|
||||
border-radius: 22px;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
|
||||
rgba(5, 8, 10, 0.96);
|
||||
@@ -467,6 +467,7 @@
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal__media {
|
||||
min-height: 0;
|
||||
align-content: center;
|
||||
padding: 14px 14px 8px;
|
||||
overflow: hidden;
|
||||
background:
|
||||
@@ -479,7 +480,7 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: none;
|
||||
border-radius: 16px;
|
||||
border-radius: 12px;
|
||||
object-fit: contain;
|
||||
background: rgba(0, 0, 0, 0.18);
|
||||
box-shadow:
|
||||
@@ -490,12 +491,12 @@
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-modal__panel,
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-modal__panel {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: minmax(0, 1fr) minmax(220px, 32%);
|
||||
grid-template-rows: minmax(0, 62%) minmax(220px, 38%);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-modal__media,
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-modal__media {
|
||||
padding: 12px 14px 8px;
|
||||
padding: 14px 14px 8px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-modal__media img,
|
||||
@@ -510,35 +511,36 @@
|
||||
grid-template-rows: auto auto minmax(0, 1fr) auto;
|
||||
min-height: 0;
|
||||
max-height: none;
|
||||
gap: 11px;
|
||||
overflow-y: auto;
|
||||
margin-top: -16px;
|
||||
padding: 20px 16px 16px;
|
||||
gap: 10px;
|
||||
overflow: hidden;
|
||||
margin-top: -14px;
|
||||
padding: 18px 16px 16px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.12);
|
||||
border-left: 0;
|
||||
border-radius: 24px 24px 0 0;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
|
||||
rgba(12, 17, 19, 0.99);
|
||||
box-shadow: 0 -18px 38px rgba(0, 0, 0, 0.24);
|
||||
box-shadow: 0 -18px 38px rgba(0, 0, 0, 0.28);
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-modal__sidebar,
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-modal__sidebar {
|
||||
margin-top: -16px;
|
||||
padding: 20px 16px 16px;
|
||||
margin-top: -14px;
|
||||
padding: 18px 16px 16px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.12);
|
||||
border-left: 0;
|
||||
border-radius: 24px 24px 0 0;
|
||||
box-shadow: 0 -18px 38px rgba(0, 0, 0, 0.26);
|
||||
box-shadow: 0 -18px 38px rgba(0, 0, 0, 0.28);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal__close {
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
top: 14px;
|
||||
right: 14px;
|
||||
z-index: 3;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-color: rgba(255, 255, 255, 0.18);
|
||||
background: rgba(8, 10, 11, 0.72);
|
||||
color: rgba(243, 245, 242, 0.78);
|
||||
@@ -546,29 +548,38 @@
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-author {
|
||||
gap: 10px;
|
||||
grid-template-columns: 32px minmax(0, 1fr);
|
||||
gap: 9px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-author > span {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
font-size: 13px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-meta {
|
||||
gap: 7px;
|
||||
padding-bottom: 11px;
|
||||
gap: 6px;
|
||||
min-height: 0;
|
||||
padding-bottom: 9px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-meta h2 {
|
||||
font-size: 18px;
|
||||
font-size: 17px;
|
||||
line-height: 1.28;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-meta p,
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-prompt p {
|
||||
font-size: 13px;
|
||||
line-height: 1.58;
|
||||
line-height: 1.52;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-meta p {
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-long-copy .wb-prompt-case-meta p {
|
||||
@@ -579,17 +590,17 @@
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-prompt {
|
||||
gap: 7px;
|
||||
gap: 6px;
|
||||
padding: 12px;
|
||||
border-radius: 14px;
|
||||
background: rgba(255, 255, 255, 0.035);
|
||||
overflow: auto;
|
||||
min-height: 0;
|
||||
max-height: 132px;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-long-copy .wb-prompt-case-prompt {
|
||||
max-height: 118px;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-prompt,
|
||||
@@ -608,13 +619,15 @@
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-actions button {
|
||||
min-height: 40px;
|
||||
padding: 0 10px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-actions,
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-actions {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -625,14 +638,15 @@
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal__panel {
|
||||
grid-template-rows: minmax(0, 1fr) minmax(230px, 38%);
|
||||
border-radius: 0;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: minmax(0, 58%) minmax(230px, 42%);
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-modal__panel,
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-modal__panel {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: minmax(0, 1fr) minmax(230px, 38%);
|
||||
grid-template-rows: minmax(0, 60%) minmax(230px, 40%);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal__media {
|
||||
@@ -1689,6 +1703,239 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal {
|
||||
align-items: center;
|
||||
padding: calc(56px + env(safe-area-inset-top, 0px) + 10px) 10px 12px;
|
||||
background:
|
||||
radial-gradient(circle at 50% 28%, rgba(var(--accent-rgb), 0.12), transparent 42%),
|
||||
rgba(0, 0, 0, 0.78);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal__panel {
|
||||
--prompt-case-modal-max-height: min(560px, calc(100svh - 56px - env(safe-area-inset-top, 0px) - 22px));
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.08fr) minmax(188px, 0.92fr);
|
||||
grid-template-rows: 1fr;
|
||||
width: min(calc(100vw - 20px), 660px);
|
||||
height: var(--prompt-case-modal-max-height);
|
||||
max-height: var(--prompt-case-modal-max-height);
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(var(--accent-rgb), 0.32);
|
||||
border-radius: 22px;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018)),
|
||||
rgba(5, 8, 10, 0.97);
|
||||
box-shadow:
|
||||
0 24px 64px rgba(0, 0, 0, 0.48),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.07);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-modal__panel,
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-modal__panel {
|
||||
grid-template-columns: minmax(0, 0.96fr) minmax(190px, 1.04fr);
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal__media,
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-modal__media,
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-modal__media {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-height: 0;
|
||||
padding: 14px;
|
||||
overflow: hidden;
|
||||
background:
|
||||
radial-gradient(circle at 50% 0%, rgba(var(--accent-rgb), 0.11), transparent 42%),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 58%),
|
||||
rgba(4, 8, 13, 0.98);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal__media img,
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-modal__media img,
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-modal__media img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
border-radius: 12px;
|
||||
object-fit: contain;
|
||||
background: rgba(0, 0, 0, 0.18);
|
||||
box-shadow:
|
||||
0 18px 42px rgba(0, 0, 0, 0.32),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal__sidebar,
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-modal__sidebar,
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-modal__sidebar {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-rows: auto auto minmax(0, 1fr) auto;
|
||||
align-self: stretch;
|
||||
min-height: 0;
|
||||
max-height: none;
|
||||
gap: 9px;
|
||||
overflow: hidden;
|
||||
margin-top: 0;
|
||||
padding: 16px 14px 14px;
|
||||
border: 0;
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 0;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018)),
|
||||
rgba(12, 17, 19, 0.99);
|
||||
box-shadow:
|
||||
-14px 0 34px rgba(0, 0, 0, 0.22),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.06);
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal__close {
|
||||
top: 14px;
|
||||
right: 14px;
|
||||
z-index: 3;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-color: rgba(255, 255, 255, 0.18);
|
||||
border-radius: 11px;
|
||||
background: rgba(8, 10, 11, 0.72);
|
||||
color: rgba(243, 245, 242, 0.82);
|
||||
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.34);
|
||||
backdrop-filter: blur(14px);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-author {
|
||||
grid-template-columns: 28px minmax(0, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-author > span {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-author strong {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-author em {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-meta {
|
||||
min-height: 0;
|
||||
gap: 5px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-meta h2 {
|
||||
font-size: 15px;
|
||||
line-height: 1.28;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-meta p,
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-long-copy .wb-prompt-case-meta p {
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
color: rgba(226, 232, 240, 0.82);
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-prompt,
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-long-copy .wb-prompt-case-prompt,
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-prompt,
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-prompt {
|
||||
min-height: 0;
|
||||
max-height: none;
|
||||
gap: 6px;
|
||||
overflow: auto;
|
||||
padding: 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.07);
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 255, 255, 0.035);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-prompt span {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-prompt p {
|
||||
font-size: 12px;
|
||||
line-height: 1.48;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-actions,
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-actions,
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-actions {
|
||||
position: static;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 7px;
|
||||
align-self: end;
|
||||
margin: 0;
|
||||
padding: 5px 0 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-actions button {
|
||||
min-height: 36px;
|
||||
padding: 0 7px;
|
||||
border-radius: 11px;
|
||||
font-size: 11px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 420px) {
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal {
|
||||
padding-right: 8px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal__panel {
|
||||
--prompt-case-modal-max-height: min(520px, calc(100svh - 56px - env(safe-area-inset-top, 0px) - 22px));
|
||||
grid-template-columns: minmax(0, 0.9fr) minmax(172px, 1.1fr);
|
||||
grid-template-rows: 1fr;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-modal__panel,
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-modal__panel {
|
||||
grid-template-columns: minmax(0, 0.82fr) minmax(174px, 1.18fr);
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal__media,
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-modal__media,
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-modal__media {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal__sidebar,
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-modal__sidebar,
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-modal__sidebar {
|
||||
gap: 8px;
|
||||
padding: 14px 10px 12px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-actions,
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-actions,
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-actions {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-actions button {
|
||||
min-height: 34px;
|
||||
padding: 0 5px;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-home {
|
||||
padding: 34px 18px 44px;
|
||||
|
||||
Reference in New Issue
Block a user