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:
+314
-99
@@ -1,6 +1,11 @@
|
||||
.more-page-v2 {
|
||||
--more-card-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
|
||||
--more-card-glow: 0 0 0 1px rgba(255, 255, 255, 0.025), 0 18px 38px rgba(0, 0, 0, 0.16);
|
||||
--more-card-shadow: 0 22px 54px rgba(0, 0, 0, 0.3);
|
||||
--more-card-glow: 0 0 0 1px rgba(255, 255, 255, 0.035), 0 16px 34px rgba(0, 0, 0, 0.18);
|
||||
--more-card-surface: rgba(19, 23, 24, 0.86);
|
||||
--more-card-surface-strong: rgba(22, 27, 28, 0.94);
|
||||
--more-card-border: rgba(255, 255, 255, 0.105);
|
||||
--more-card-border-strong: rgba(var(--accent-rgb), 0.3);
|
||||
--more-page-pad-x: clamp(18px, 2.3vw, 32px);
|
||||
|
||||
position: relative;
|
||||
display: grid;
|
||||
@@ -158,24 +163,24 @@
|
||||
|
||||
.more-page-v2__scroll {
|
||||
overflow-y: auto;
|
||||
padding: 26px 28px 68px;
|
||||
padding: 28px var(--more-page-pad-x) 72px;
|
||||
scrollbar-color: rgba(var(--accent-rgb), 0.26) transparent;
|
||||
}
|
||||
|
||||
.more-page-v2__section {
|
||||
margin-bottom: 30px;
|
||||
margin-bottom: 34px;
|
||||
}
|
||||
|
||||
.more-page-v2__section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin: 0 0 15px;
|
||||
color: var(--fg-muted);
|
||||
margin: 0 0 14px;
|
||||
color: color-mix(in srgb, var(--fg-muted) 86%, var(--fg-body));
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
font-weight: 850;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
letter-spacing: 0.055em;
|
||||
}
|
||||
|
||||
.more-page-v2__section-title .anticon {
|
||||
@@ -199,27 +204,31 @@
|
||||
|
||||
.more-page-v2__recent-row {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.more-page-v2__featured-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 18px;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.more-card--featured {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 18px;
|
||||
display: grid;
|
||||
grid-template-columns: 54px minmax(0, 1fr);
|
||||
align-items: start;
|
||||
justify-items: stretch;
|
||||
gap: 16px;
|
||||
min-height: 336px;
|
||||
padding: 20px;
|
||||
border-color: rgba(var(--accent-rgb), 0.18);
|
||||
border-color: rgba(var(--accent-rgb), 0.2);
|
||||
border-radius: var(--radius-xs, 8px);
|
||||
background:
|
||||
var(--card-gradient),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
|
||||
var(--bg-panel);
|
||||
radial-gradient(circle at 14% 4%, rgba(var(--accent-rgb), 0.12), transparent 36%),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.016)),
|
||||
var(--more-card-surface-strong);
|
||||
box-shadow: var(--more-card-glow);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@@ -230,27 +239,27 @@
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.035), transparent),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 34%);
|
||||
opacity: 0.5;
|
||||
linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.038), transparent),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 34%);
|
||||
opacity: 0.62;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.more-card--featured:hover {
|
||||
border-color: rgba(var(--accent-rgb), 0.45);
|
||||
transform: translateY(-3px);
|
||||
box-shadow: var(--more-card-shadow), 0 0 0 1px rgba(var(--accent-rgb), 0.1);
|
||||
border-color: rgba(var(--accent-rgb), 0.46);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--more-card-shadow), 0 0 0 1px rgba(var(--accent-rgb), 0.12);
|
||||
}
|
||||
|
||||
.more-card__featured-icon {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border: 1px solid rgba(var(--accent-rgb), 0.22);
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
border: 1px solid rgba(var(--accent-rgb), 0.24);
|
||||
border-radius: var(--radius-xs, 8px);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.08)),
|
||||
linear-gradient(180deg, rgba(var(--accent-rgb), 0.18), rgba(var(--accent-rgb), 0.08)),
|
||||
var(--bg-inset);
|
||||
color: var(--accent);
|
||||
font-size: 24px;
|
||||
@@ -261,11 +270,32 @@
|
||||
.more-card__featured-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 9px;
|
||||
gap: 10px;
|
||||
justify-self: stretch;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.more-card--featured .more-card__preview {
|
||||
width: 100%;
|
||||
min-height: 0;
|
||||
aspect-ratio: 16 / 9;
|
||||
}
|
||||
|
||||
.more-card--featured.more-card--no-preview {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.more-card--featured.more-card--no-preview .more-card__featured-body {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.more-card--featured.more-card--no-preview .more-card__outcome {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.more-card__featured-kicker {
|
||||
width: fit-content;
|
||||
color: var(--accent);
|
||||
@@ -277,14 +307,14 @@
|
||||
|
||||
.more-card__featured-body strong {
|
||||
color: var(--fg-body);
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
font-size: 20px;
|
||||
font-weight: 850;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.more-card__featured-desc {
|
||||
font-size: 13px;
|
||||
color: var(--fg-muted);
|
||||
color: color-mix(in srgb, var(--fg-muted) 88%, var(--fg-body));
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@@ -327,20 +357,23 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
width: fit-content;
|
||||
min-height: 28px;
|
||||
margin-top: 0;
|
||||
padding: 0 10px;
|
||||
border: 1px solid rgba(var(--accent-rgb), 0.28);
|
||||
min-height: 32px;
|
||||
margin-top: auto;
|
||||
padding: 0 12px;
|
||||
border: 1px solid rgba(var(--accent-rgb), 0.34);
|
||||
border-radius: var(--radius-xs, 8px);
|
||||
background: rgba(var(--accent-rgb), 0.08);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.08)),
|
||||
rgba(var(--accent-rgb), 0.06);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
font-weight: 850;
|
||||
color: var(--accent) !important;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.more-page-v2__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
@@ -350,18 +383,22 @@
|
||||
align-content: start;
|
||||
justify-items: start;
|
||||
min-width: 0;
|
||||
gap: 10px;
|
||||
min-height: 392px;
|
||||
gap: 12px;
|
||||
padding: 18px;
|
||||
border: 1px solid var(--border-weak);
|
||||
border: 1px solid var(--more-card-border);
|
||||
border-radius: var(--radius-xs, 8px);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.032), transparent 42%),
|
||||
var(--bg-panel);
|
||||
radial-gradient(circle at 12% 0%, rgba(var(--accent-rgb), 0.055), transparent 34%),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 42%),
|
||||
var(--more-card-surface);
|
||||
color: var(--fg-body);
|
||||
font: inherit;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.035),
|
||||
0 1px 0 rgba(255, 255, 255, 0.02);
|
||||
transition:
|
||||
border-color 160ms ease,
|
||||
background 160ms ease,
|
||||
@@ -370,12 +407,19 @@
|
||||
}
|
||||
|
||||
.more-card:hover {
|
||||
border-color: rgba(var(--accent-rgb), 0.38);
|
||||
border-color: var(--more-card-border-strong);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 46%),
|
||||
var(--bg-hover, rgba(255, 255, 255, 0.03));
|
||||
radial-gradient(circle at 12% 0%, rgba(var(--accent-rgb), 0.085), transparent 36%),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.052), transparent 46%),
|
||||
rgba(24, 29, 30, 0.94);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--more-card-glow), 0 10px 26px rgba(0, 0, 0, 0.16);
|
||||
box-shadow: var(--more-card-glow), 0 14px 30px rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
|
||||
.more-card:active,
|
||||
.more-page-v2__filters button:active,
|
||||
.more-page-v2__empty-action:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.more-card--pending {
|
||||
@@ -395,17 +439,20 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-width: 150px;
|
||||
min-height: 54px;
|
||||
padding: 10px 14px;
|
||||
border-color: rgba(var(--accent-rgb), 0.14);
|
||||
min-width: 164px;
|
||||
min-height: 58px;
|
||||
padding: 11px 14px;
|
||||
border-color: rgba(var(--accent-rgb), 0.16);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.016)),
|
||||
rgba(18, 23, 24, 0.88);
|
||||
}
|
||||
|
||||
.more-card__icon {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border: 1px solid rgba(var(--accent-rgb), 0.16);
|
||||
border-radius: var(--radius-xs, 8px);
|
||||
background:
|
||||
@@ -437,15 +484,15 @@
|
||||
.more-card strong {
|
||||
max-width: 100%;
|
||||
color: var(--fg-body);
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
line-height: 1.35;
|
||||
font-size: 16px;
|
||||
font-weight: 850;
|
||||
line-height: 1.28;
|
||||
}
|
||||
|
||||
.more-card__topline {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
right: 14px;
|
||||
top: 18px;
|
||||
right: 18px;
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
@@ -472,9 +519,9 @@
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: 92px;
|
||||
min-height: 104px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(var(--accent-rgb), 0.28);
|
||||
border: 1px solid rgba(var(--accent-rgb), 0.24);
|
||||
border-radius: 10px;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(var(--accent-rgb), 0.1), transparent 34%),
|
||||
@@ -483,8 +530,7 @@
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.08),
|
||||
inset 0 -1px 0 rgba(0, 0, 0, 0.34),
|
||||
0 0 20px rgba(var(--accent-rgb), 0.08);
|
||||
clip-path: polygon(0 10px, 10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
|
||||
0 0 18px rgba(var(--accent-rgb), 0.07);
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
@@ -506,7 +552,6 @@
|
||||
inset: 5px;
|
||||
z-index: 3;
|
||||
border: 1px solid rgba(var(--accent-rgb), 0.16);
|
||||
clip-path: polygon(0 8px, 8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -880,15 +925,102 @@
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.more-card__preview {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
aspect-ratio: 1.42 / 1;
|
||||
overflow: visible;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
.more-card__preview-frame {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(var(--accent-rgb), 0.22);
|
||||
border-radius: var(--radius-xs, 8px);
|
||||
background:
|
||||
radial-gradient(circle at 50% 42%, rgba(var(--accent-rgb), 0.12), transparent 56%),
|
||||
linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), transparent 34%),
|
||||
var(--bg-inset);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.07),
|
||||
0 0 18px rgba(var(--accent-rgb), 0.06);
|
||||
}
|
||||
|
||||
.more-card__preview-frame::after {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 34%, rgba(0, 0, 0, 0.18)),
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.045), transparent 38%, rgba(255, 255, 255, 0.025));
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.more-card__preview-frame img,
|
||||
.more-card__preview-popover {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
padding: 6px;
|
||||
transform: none;
|
||||
transition:
|
||||
filter 220ms ease;
|
||||
}
|
||||
|
||||
.more-card:hover .more-card__preview-frame img {
|
||||
filter: saturate(1.05) contrast(1.02);
|
||||
}
|
||||
|
||||
.more-card__preview-popover {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: calc(100% + 12px);
|
||||
z-index: 20;
|
||||
width: min(420px, calc(100vw - 48px));
|
||||
height: auto;
|
||||
max-height: min(360px, 58vh);
|
||||
padding: 10px;
|
||||
border: 1px solid rgba(var(--accent-rgb), 0.34);
|
||||
border-radius: var(--radius-xs, 8px);
|
||||
background:
|
||||
radial-gradient(circle at 50% 20%, rgba(var(--accent-rgb), 0.12), transparent 52%),
|
||||
rgba(10, 14, 14, 0.96);
|
||||
box-shadow:
|
||||
0 28px 68px rgba(0, 0, 0, 0.46),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.04);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: translate(-50%, 8px) scale(0.96);
|
||||
transform-origin: 50% 100%;
|
||||
transition:
|
||||
opacity 160ms ease,
|
||||
transform 160ms ease;
|
||||
}
|
||||
|
||||
.more-card__preview:hover .more-card__preview-popover {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0) scale(1);
|
||||
}
|
||||
|
||||
.more-card--featured .more-card__preview-popover {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.more-card__desc {
|
||||
color: var(--fg-muted);
|
||||
color: color-mix(in srgb, var(--fg-muted) 88%, var(--fg-body));
|
||||
font-size: 12.5px;
|
||||
line-height: 1.5;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.more-card__use-case {
|
||||
display: block;
|
||||
min-height: 38px;
|
||||
min-height: 50px;
|
||||
color: color-mix(in srgb, var(--fg-muted) 78%, var(--fg-body));
|
||||
font-size: 12px;
|
||||
line-height: 1.55;
|
||||
@@ -898,15 +1030,15 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
width: fit-content;
|
||||
min-height: 26px;
|
||||
margin-top: 2px;
|
||||
padding: 0 9px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
min-height: 30px;
|
||||
margin-top: auto;
|
||||
padding: 0 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.09);
|
||||
border-radius: var(--radius-xs, 8px);
|
||||
background: rgba(255, 255, 255, 0.035);
|
||||
color: var(--fg-body);
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
font-weight: 850;
|
||||
transition:
|
||||
border-color 160ms ease,
|
||||
background 160ms ease,
|
||||
@@ -915,8 +1047,8 @@
|
||||
}
|
||||
|
||||
.more-card:hover .more-card__action {
|
||||
border-color: rgba(var(--accent-rgb), 0.28);
|
||||
background: rgba(var(--accent-rgb), 0.08);
|
||||
border-color: rgba(var(--accent-rgb), 0.32);
|
||||
background: rgba(var(--accent-rgb), 0.1);
|
||||
color: var(--accent);
|
||||
transform: translateX(2px);
|
||||
}
|
||||
@@ -936,14 +1068,15 @@
|
||||
.more-page-v2__empty {
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
gap: 10px;
|
||||
min-height: 220px;
|
||||
padding: 34px 20px;
|
||||
border: 1px solid var(--border-weak);
|
||||
gap: 12px;
|
||||
min-height: 238px;
|
||||
padding: 38px 22px;
|
||||
border: 1px solid var(--more-card-border);
|
||||
border-radius: var(--radius-xs, 8px);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(var(--accent-rgb), 0.065), transparent 64%),
|
||||
var(--bg-panel);
|
||||
radial-gradient(circle at 50% 0%, rgba(var(--accent-rgb), 0.1), transparent 42%),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 64%),
|
||||
var(--more-card-surface);
|
||||
color: var(--fg-muted);
|
||||
text-align: center;
|
||||
}
|
||||
@@ -951,11 +1084,13 @@
|
||||
.more-page-v2__empty-icon {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border: 1px solid rgba(var(--accent-rgb), 0.22);
|
||||
border-radius: var(--radius-xs, 8px);
|
||||
background: rgba(var(--accent-rgb), 0.1);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.08)),
|
||||
rgba(var(--accent-rgb), 0.08);
|
||||
color: var(--accent);
|
||||
font-size: 20px;
|
||||
}
|
||||
@@ -978,12 +1113,14 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 34px;
|
||||
min-height: 36px;
|
||||
margin-top: 4px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid rgba(var(--accent-rgb), 0.32);
|
||||
padding: 0 14px;
|
||||
border: 1px solid rgba(var(--accent-rgb), 0.36);
|
||||
border-radius: var(--radius-xs, 8px);
|
||||
background: rgba(var(--accent-rgb), 0.08);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(var(--accent-rgb), 0.14), rgba(var(--accent-rgb), 0.08)),
|
||||
rgba(var(--accent-rgb), 0.06);
|
||||
color: var(--accent);
|
||||
font: inherit;
|
||||
font-size: 12px;
|
||||
@@ -1013,6 +1150,7 @@
|
||||
|
||||
.more-page-v2__header {
|
||||
grid-template-columns: minmax(180px, auto) minmax(0, 1fr);
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.more-page-v2__filters {
|
||||
@@ -1023,15 +1161,21 @@
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.more-page-v2 {
|
||||
--more-page-pad-x: 16px;
|
||||
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.more-page-v2__header {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
padding: 14px 16px 12px;
|
||||
padding: 16px 16px 14px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.more-page-v2__header h1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.more-page-v2__header-meta {
|
||||
gap: 6px;
|
||||
}
|
||||
@@ -1047,13 +1191,22 @@
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.more-page-v2__filters button {
|
||||
min-height: 31px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.more-page-v2__scroll {
|
||||
padding: 16px 16px 48px;
|
||||
padding: 18px 16px 52px;
|
||||
}
|
||||
|
||||
.more-page-v2__section {
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
|
||||
.more-page-v2__grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
|
||||
gap: 12px;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.more-page-v2__recent-row {
|
||||
@@ -1063,11 +1216,13 @@
|
||||
}
|
||||
|
||||
.more-page-v2__featured-grid {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.more-card--featured {
|
||||
grid-template-columns: 44px minmax(0, 1fr);
|
||||
min-height: 0;
|
||||
padding: 16px;
|
||||
gap: 12px;
|
||||
}
|
||||
@@ -1079,7 +1234,12 @@
|
||||
}
|
||||
|
||||
.more-card__featured-body strong {
|
||||
font-size: 15px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.more-card--featured .more-card__preview {
|
||||
width: 100%;
|
||||
min-height: 176px;
|
||||
}
|
||||
|
||||
.more-card__featured-kicker,
|
||||
@@ -1097,8 +1257,13 @@
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.more-card__compare {
|
||||
min-height: 82px;
|
||||
.more-card__preview {
|
||||
min-height: 190px;
|
||||
}
|
||||
|
||||
.more-card {
|
||||
min-height: 394px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.more-card__topline {
|
||||
@@ -1108,24 +1273,74 @@
|
||||
}
|
||||
|
||||
.more-card__use-case {
|
||||
min-height: 54px;
|
||||
min-height: 46px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
.more-page-v2__header {
|
||||
gap: 10px;
|
||||
padding-top: 14px;
|
||||
}
|
||||
|
||||
.more-page-v2__header-meta {
|
||||
overflow-x: auto;
|
||||
flex-wrap: nowrap;
|
||||
margin-right: -16px;
|
||||
padding-right: 16px;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.more-page-v2__header-meta::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.more-page-v2__grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.more-card {
|
||||
gap: 9px;
|
||||
.more-page-v2__featured-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.more-card__compare {
|
||||
min-height: 94px;
|
||||
.more-page-v2__section-title {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.more-card--featured {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.more-card__featured-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.more-card {
|
||||
gap: 10px;
|
||||
min-height: 0;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.more-card__preview {
|
||||
min-height: 190px;
|
||||
}
|
||||
|
||||
.more-card__use-case {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.more-card__action,
|
||||
.more-card__cta {
|
||||
min-height: 32px;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (hover: none) {
|
||||
.more-card__preview-popover {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user