Merge pull request 'feat: 工具盒卡片预览图替换与响应式视觉优化' (#28) from feat/toolbox-preview-cards-and-responsive-polish into master
Reviewed-on: #28
This commit was merged in pull request #28.
This commit is contained in:
+171
-129
@@ -37,117 +37,153 @@ interface MoreTool {
|
||||
imageTool?: WebImageWorkbenchTool;
|
||||
ready: boolean;
|
||||
badge?: string;
|
||||
featured?: boolean;
|
||||
}
|
||||
|
||||
type CompareScene =
|
||||
| "workbench"
|
||||
| "inpaint"
|
||||
| "camera"
|
||||
| "upscale"
|
||||
| "watermark"
|
||||
| "dialog"
|
||||
| "subtitle"
|
||||
| "digital-human"
|
||||
| "character"
|
||||
| "avatar";
|
||||
|
||||
const toolCompareScenes: Record<string, CompareScene> = {
|
||||
workbench: "workbench",
|
||||
inpaint: "inpaint",
|
||||
camera: "camera",
|
||||
upscale: "upscale",
|
||||
watermarkRemoval: "watermark",
|
||||
dialogGenerator: "dialog",
|
||||
subtitleRemoval: "subtitle",
|
||||
digitalHuman: "digital-human",
|
||||
characterMix: "character",
|
||||
avatarConsole: "avatar",
|
||||
const toolPreviewImages: Record<string, string> = {
|
||||
inpaint: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/toolbox/images/%E5%B1%80%E9%83%A8%E9%87%8D%E7%BB%98.PNG",
|
||||
camera: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/toolbox/images/%E9%95%9C%E5%A4%B4%E5%AE%9E%E9%AA%8C%E5%AE%A4.PNG",
|
||||
upscale: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/toolbox/images/%E5%88%86%E8%BE%A8%E7%8E%87%E6%8F%90%E5%8D%87.PNG",
|
||||
watermarkRemoval: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/toolbox/images/%E5%8E%BB%E6%B0%B4%E5%8D%B0.PNG",
|
||||
dialogGenerator: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/toolbox/images/%E4%BA%A4%E4%BA%92%E5%BC%8F%E5%AF%B9%E8%AF%9D%E6%A1%86%E7%94%9F%E6%88%90%E5%99%A8.PNG",
|
||||
subtitleRemoval: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/toolbox/images/%E5%AD%97%E5%B9%95%E5%8E%BB%E9%99%A4.PNG",
|
||||
characterMix: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/toolbox/images/%E8%A7%92%E8%89%B2%E8%BF%81%E7%A7%BB.PNG",
|
||||
avatarConsole: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/toolbox/images/%E6%95%B0%E5%AD%97%E4%BA%BA%E6%8E%A7%E5%88%B6%E5%8F%B0.PNG",
|
||||
};
|
||||
|
||||
function ToolComparePanel({ scene }: { scene: CompareScene }) {
|
||||
function ToolPreviewPanel({ toolId }: { toolId: string }) {
|
||||
const imageUrl = toolPreviewImages[toolId];
|
||||
if (!imageUrl) return null;
|
||||
|
||||
return (
|
||||
<span className={`more-card__compare more-card__compare--${scene}`} aria-hidden="true">
|
||||
<span className="more-card__compare-labels">
|
||||
<span>Before</span>
|
||||
<span>After</span>
|
||||
</span>
|
||||
<span className="more-card__compare-stage">
|
||||
<span className="more-card__compare-side more-card__compare-side--before">
|
||||
<span className="more-card__scene-subject" />
|
||||
<span className="more-card__scene-detail" />
|
||||
<span className="more-card__scene-overlay" />
|
||||
</span>
|
||||
<span className="more-card__compare-divider">
|
||||
<span />
|
||||
</span>
|
||||
<span className="more-card__compare-side more-card__compare-side--after">
|
||||
<span className="more-card__scene-subject" />
|
||||
<span className="more-card__scene-detail" />
|
||||
<span className="more-card__scene-overlay" />
|
||||
</span>
|
||||
<span className="more-card__preview" aria-hidden="true">
|
||||
<span className="more-card__preview-frame">
|
||||
<img src={imageUrl} alt="" loading="lazy" decoding="async" />
|
||||
</span>
|
||||
<img className="more-card__preview-popover" src={imageUrl} alt="" loading="lazy" decoding="async" />
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
const tools: MoreTool[] = [
|
||||
{ id: "workbench", title: "图片工作台", text: "融合、修复、局部增强", useCase: "适合商品图精修、创意合成和局部画面重做", tags: ["热门", "一站式", "商品图"], icon: <EditOutlined />, category: "image", imageTool: "workbench", ready: true, featured: true },
|
||||
{ id: "inpaint", title: "局部重绘", text: "修掉瑕疵、替换物体、重做局部画面", useCase: "适合快速处理商品瑕疵、人物细节和背景杂物", tags: ["新手推荐", "精修"], icon: <HighlightOutlined />, category: "image", imageTool: "inpaint", ready: true },
|
||||
{ id: "camera", title: "镜头实验室", text: "快速生成俯拍、特写、广角等商业镜头", useCase: "适合做产品主图、种草图和不同机位方案", tags: ["电商常用", "镜头"], icon: <CameraOutlined />, category: "image", imageTool: "camera", ready: true },
|
||||
{ id: "upscale", title: "分辨率提升", text: "把低清图片或视频提升到可交付质感", useCase: "适合修复旧素材、放大商品图和增强短视频清晰度", tags: ["高清", "交付前"], icon: <ColumnWidthOutlined />, category: "image", target: "resolutionUpscale", ready: true },
|
||||
{ id: "watermarkRemoval", title: "去水印", text: "智能去除图片水印、文字和遮挡元素", useCase: "适合整理素材、清理参考图和恢复画面干净度", tags: ["素材清理", "高频"], icon: <DeleteOutlined />, category: "image", target: "watermarkRemoval", ready: true },
|
||||
{ id: "dialogGenerator", title: "交互式对话框生成器", text: "上传背景图，快速制作可拖拽编辑的对话框", useCase: "适合剧情海报、社媒截图和角色对白设计", tags: ["内容创作", "可编辑"], icon: <MessageOutlined />, category: "image", target: "dialogGenerator", ready: true },
|
||||
{ id: "subtitleRemoval", title: "字幕去除", text: "擦除视频字幕，让画面重新变干净", useCase: "适合二创前素材整理、短视频重剪和画面修复", tags: ["视频增强", "素材清理"], icon: <DeleteOutlined />, category: "video", target: "subtitleRemoval", ready: true },
|
||||
{ id: "digitalHuman", title: "数字人", text: "用一张人像和音频生成口播视频", useCase: "适合品牌讲解、课程口播和带货短视频", tags: ["热门", "口播", "视频"], icon: <CustomerServiceOutlined />, category: "video", target: "digitalHuman", ready: true, featured: true },
|
||||
{ id: "characterMix", title: "角色迁移", text: "把人物图迁移到参考视频的动作里", useCase: "适合角色短片、动作复刻和虚拟人内容生产", tags: ["角色视频", "动作"], icon: <SwapOutlined />, category: "video", target: "characterMix", ready: true },
|
||||
{ id: "avatarConsole", title: "数字人控制台", text: "管理形象、播报、互动与接入配置", useCase: "适合持续运营数字人、配置品牌形象和复用口播模板", tags: ["运营台", "企业"], icon: <DashboardOutlined />, category: "video", target: "avatarConsole", ready: true },
|
||||
];
|
||||
|
||||
interface FeaturedTool {
|
||||
id: string;
|
||||
title: string;
|
||||
desc: string;
|
||||
kicker: string;
|
||||
steps: string[];
|
||||
outcome: string;
|
||||
icon: ReactNode;
|
||||
imageTool?: WebImageWorkbenchTool;
|
||||
target?: WebViewKey;
|
||||
category: ToolCategory;
|
||||
gradient: string;
|
||||
function getPreviewClassName(toolId: string) {
|
||||
return toolPreviewImages[toolId] ? " more-card--has-preview" : " more-card--no-preview";
|
||||
}
|
||||
|
||||
const featuredTools: FeaturedTool[] = [
|
||||
const tools: MoreTool[] = [
|
||||
{
|
||||
id: "workbench",
|
||||
title: "图片工作台",
|
||||
desc: "从一张素材开始，完成精修、合成和二次创作。",
|
||||
kicker: "图片精修工作流",
|
||||
steps: ["上传素材", "局部修复", "高清导出"],
|
||||
outcome: "适合商品图、海报图和创意视觉",
|
||||
text: "融合、修复、局部增强",
|
||||
useCase: "适合商品图精修、创意合成和局部画面重做",
|
||||
tags: ["热门", "一站式", "商品图"],
|
||||
icon: <EditOutlined />,
|
||||
imageTool: "workbench",
|
||||
category: "image",
|
||||
gradient: "linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(139, 92, 246, 0.06))",
|
||||
imageTool: "workbench",
|
||||
ready: true,
|
||||
},
|
||||
{
|
||||
id: "inpaint",
|
||||
title: "局部重绘",
|
||||
text: "修掉瑕疵、替换物体、重做局部画面",
|
||||
useCase: "适合快速处理商品瑕疵、人物细节和背景杂物",
|
||||
tags: ["新手推荐", "精修"],
|
||||
icon: <HighlightOutlined />,
|
||||
category: "image",
|
||||
imageTool: "inpaint",
|
||||
ready: true,
|
||||
},
|
||||
{
|
||||
id: "camera",
|
||||
title: "镜头实验室",
|
||||
text: "快速生成俯拍、特写、广角等商业镜头",
|
||||
useCase: "适合做产品主图、种草图和不同机位方案",
|
||||
tags: ["电商常用", "镜头"],
|
||||
icon: <CameraOutlined />,
|
||||
category: "image",
|
||||
imageTool: "camera",
|
||||
ready: true,
|
||||
},
|
||||
{
|
||||
id: "upscale",
|
||||
title: "分辨率提升",
|
||||
text: "把低清图片或视频提升到可交付质感",
|
||||
useCase: "适合修复旧素材、放大商品图和增强短视频清晰度",
|
||||
tags: ["高清", "交付前"],
|
||||
icon: <ColumnWidthOutlined />,
|
||||
category: "image",
|
||||
target: "resolutionUpscale",
|
||||
ready: true,
|
||||
},
|
||||
{
|
||||
id: "watermarkRemoval",
|
||||
title: "去水印",
|
||||
text: "智能去除图片水印、文字和遮挡元素",
|
||||
useCase: "适合整理素材、清理参考图和恢复画面干净度",
|
||||
tags: ["素材清理", "高频"],
|
||||
icon: <DeleteOutlined />,
|
||||
category: "image",
|
||||
target: "watermarkRemoval",
|
||||
ready: true,
|
||||
},
|
||||
{
|
||||
id: "dialogGenerator",
|
||||
title: "交互式对话框生成器",
|
||||
text: "上传背景图，快速制作可拖拽编辑的对话框",
|
||||
useCase: "适合剧情海报、社媒截图和角色对白设计",
|
||||
tags: ["内容创作", "可编辑"],
|
||||
icon: <MessageOutlined />,
|
||||
category: "image",
|
||||
target: "dialogGenerator",
|
||||
ready: true,
|
||||
},
|
||||
{
|
||||
id: "subtitleRemoval",
|
||||
title: "字幕去除",
|
||||
text: "擦除视频字幕，让画面重新变干净",
|
||||
useCase: "适合二创前素材整理、短视频重剪和画面修复",
|
||||
tags: ["视频增强", "素材清理"],
|
||||
icon: <DeleteOutlined />,
|
||||
category: "video",
|
||||
target: "subtitleRemoval",
|
||||
ready: true,
|
||||
},
|
||||
{
|
||||
id: "digitalHuman",
|
||||
title: "数字人",
|
||||
desc: "用参考人像和音频，快速生成可交付口播视频。",
|
||||
kicker: "口播视频工作流",
|
||||
steps: ["选择人像", "上传音频", "生成视频"],
|
||||
outcome: "适合品牌讲解、课程和带货短视频",
|
||||
text: "用一张人像和音频生成口播视频",
|
||||
useCase: "适合品牌讲解、课程口播和带货短视频",
|
||||
tags: ["热门", "口播", "视频"],
|
||||
icon: <CustomerServiceOutlined />,
|
||||
target: "digitalHuman",
|
||||
category: "video",
|
||||
gradient: "linear-gradient(135deg, rgba(13, 148, 136, 0.12), rgba(6, 182, 212, 0.06))",
|
||||
target: "digitalHuman",
|
||||
ready: true,
|
||||
},
|
||||
{
|
||||
id: "characterMix",
|
||||
title: "角色迁移",
|
||||
text: "把人物图迁移到参考视频的动作里",
|
||||
useCase: "适合角色短片、动作复刻和虚拟人内容生产",
|
||||
tags: ["角色视频", "动作"],
|
||||
icon: <SwapOutlined />,
|
||||
category: "video",
|
||||
target: "characterMix",
|
||||
ready: true,
|
||||
},
|
||||
{
|
||||
id: "avatarConsole",
|
||||
title: "数字人控制台",
|
||||
text: "管理形象、播报、互动与接入配置",
|
||||
useCase: "适合持续运营数字人、配置品牌形象和复用口播模板",
|
||||
tags: ["运营台", "企业"],
|
||||
icon: <DashboardOutlined />,
|
||||
category: "video",
|
||||
target: "avatarConsole",
|
||||
ready: true,
|
||||
},
|
||||
];
|
||||
|
||||
const categoryLabels: Record<ToolCategory, string> = {
|
||||
image: "图像创作",
|
||||
video: "视频生成",
|
||||
video: "视频创作",
|
||||
};
|
||||
|
||||
const categoryIcons: Record<ToolCategory, ReactNode> = {
|
||||
@@ -162,6 +198,20 @@ const filters: { key: FilterKey; label: string }[] = [
|
||||
{ key: "upcoming", label: "即将上线" },
|
||||
];
|
||||
|
||||
const coreToolIds = new Set(["workbench", "inpaint", "watermarkRemoval"]);
|
||||
|
||||
const coreToolGradients: Record<string, string> = {
|
||||
workbench: "linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(139, 92, 246, 0.06))",
|
||||
inpaint: "linear-gradient(135deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.055))",
|
||||
watermarkRemoval: "linear-gradient(135deg, rgba(16, 185, 129, 0.13), rgba(var(--accent-rgb), 0.055))",
|
||||
};
|
||||
|
||||
const coreToolSteps: Record<string, string[]> = {
|
||||
workbench: ["上传素材", "局部修复", "高清导出"],
|
||||
inpaint: ["选定区域", "描述修改", "生成结果"],
|
||||
watermarkRemoval: ["上传素材", "智能识别", "干净导出"],
|
||||
};
|
||||
|
||||
const RECENT_STORAGE_KEY = "omniai:more-recent-tools";
|
||||
const MAX_RECENT = 4;
|
||||
|
||||
@@ -169,7 +219,9 @@ function getRecentToolIds(): string[] {
|
||||
try {
|
||||
const raw = localStorage.getItem(RECENT_STORAGE_KEY);
|
||||
return raw ? JSON.parse(raw) : [];
|
||||
} catch { return []; }
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
function pushRecentToolId(id: string) {
|
||||
@@ -199,39 +251,29 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
|
||||
}
|
||||
}, [onOpenImageTool, onSelectView]);
|
||||
|
||||
const openFeaturedTool = useCallback((tool: FeaturedTool) => {
|
||||
pushRecentToolId(tool.id);
|
||||
setRecentIds(getRecentToolIds());
|
||||
if (tool.imageTool && onOpenImageTool) {
|
||||
onOpenImageTool(tool.imageTool);
|
||||
return;
|
||||
}
|
||||
if (tool.target && onSelectView) {
|
||||
onSelectView(tool.target);
|
||||
}
|
||||
}, [onOpenImageTool, onSelectView]);
|
||||
|
||||
const filteredTools = tools.filter((t) => {
|
||||
if (t.featured) return false;
|
||||
const filteredTools = tools.filter((tool) => {
|
||||
if (coreToolIds.has(tool.id)) return false;
|
||||
if (filter === "all") return true;
|
||||
if (filter === "upcoming") return !t.ready;
|
||||
return t.category === filter;
|
||||
if (filter === "upcoming") return !tool.ready;
|
||||
return tool.category === filter;
|
||||
});
|
||||
|
||||
const filterCounts: Record<FilterKey, number> = {
|
||||
all: tools.filter((t) => !t.featured).length,
|
||||
image: tools.filter((t) => !t.featured && t.category === "image").length,
|
||||
video: tools.filter((t) => !t.featured && t.category === "video").length,
|
||||
upcoming: tools.filter((t) => !t.featured && !t.ready).length,
|
||||
all: tools.filter((tool) => !coreToolIds.has(tool.id)).length,
|
||||
image: tools.filter((tool) => !coreToolIds.has(tool.id) && tool.category === "image").length,
|
||||
video: tools.filter((tool) => !coreToolIds.has(tool.id) && tool.category === "video").length,
|
||||
upcoming: tools.filter((tool) => !coreToolIds.has(tool.id) && !tool.ready).length,
|
||||
};
|
||||
|
||||
const recentTools = recentIds
|
||||
.map((id) => tools.find((t) => t.id === id))
|
||||
.filter((t): t is MoreTool => Boolean(t) && (t?.ready ?? false));
|
||||
.map((id) => tools.find((tool) => tool.id === id))
|
||||
.filter((tool): tool is MoreTool => Boolean(tool) && (tool?.ready ?? false));
|
||||
|
||||
const groupedTools = filteredTools.reduce<Record<ToolCategory, MoreTool[]>>((acc, t) => {
|
||||
if (!acc[t.category]) acc[t.category] = [];
|
||||
acc[t.category].push(t);
|
||||
const coreTools = tools.filter((tool) => coreToolIds.has(tool.id));
|
||||
|
||||
const groupedTools = filteredTools.reduce<Record<ToolCategory, MoreTool[]>>((acc, tool) => {
|
||||
if (!acc[tool.category]) acc[tool.category] = [];
|
||||
acc[tool.category].push(tool);
|
||||
return acc;
|
||||
}, {} as Record<ToolCategory, MoreTool[]>);
|
||||
|
||||
@@ -247,19 +289,19 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
|
||||
</div>
|
||||
<div className="more-page-v2__header-meta" aria-label="工具盒概览">
|
||||
<span>{tools.filter((tool) => tool.ready).length} 个可用工具</span>
|
||||
<span>{featuredTools.length} 个核心入口</span>
|
||||
<span>{coreTools.length} 个核心入口</span>
|
||||
</div>
|
||||
<nav className="more-page-v2__filters" aria-label="工具分类筛选">
|
||||
{filters.map((f) => (
|
||||
{filters.map((item) => (
|
||||
<button
|
||||
key={f.key}
|
||||
key={item.key}
|
||||
type="button"
|
||||
className={filter === f.key ? "is-active" : ""}
|
||||
aria-pressed={filter === f.key}
|
||||
onClick={() => setFilter(f.key)}
|
||||
className={filter === item.key ? "is-active" : ""}
|
||||
aria-pressed={filter === item.key}
|
||||
onClick={() => setFilter(item.key)}
|
||||
>
|
||||
<span>{f.label}</span>
|
||||
<em>{filterCounts[f.key]}</em>
|
||||
<span>{item.label}</span>
|
||||
<em>{filterCounts[item.key]}</em>
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
@@ -298,27 +340,27 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
|
||||
<ThunderboltOutlined /> 核心工具
|
||||
</h2>
|
||||
<div className="more-page-v2__featured-grid">
|
||||
{featuredTools.map((tool) => (
|
||||
{coreTools.map((tool) => (
|
||||
<button
|
||||
key={tool.id}
|
||||
type="button"
|
||||
className="more-card more-card--featured"
|
||||
style={{ "--card-gradient": tool.gradient } as CSSProperties}
|
||||
aria-label={`打开核心工具：${tool.title}，${tool.desc}`}
|
||||
onClick={() => openFeaturedTool(tool)}
|
||||
className={`more-card more-card--featured${getPreviewClassName(tool.id)}`}
|
||||
style={{ "--card-gradient": coreToolGradients[tool.id] ?? "linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0.04))" } as CSSProperties}
|
||||
aria-label={`打开核心工具：${tool.title}，${tool.text}`}
|
||||
onClick={() => openTool(tool)}
|
||||
>
|
||||
<span className="more-card__featured-icon">{tool.icon}</span>
|
||||
<div className="more-card__featured-body">
|
||||
<span className="more-card__featured-kicker">{tool.kicker}</span>
|
||||
<span className="more-card__featured-kicker">{categoryLabels[tool.category]}</span>
|
||||
<strong>{tool.title}</strong>
|
||||
<ToolComparePanel scene={toolCompareScenes[tool.id]} />
|
||||
<span className="more-card__featured-desc">{tool.desc}</span>
|
||||
<ToolPreviewPanel toolId={tool.id} />
|
||||
<span className="more-card__featured-desc">{tool.text}</span>
|
||||
<span className="more-card__steps" aria-hidden="true">
|
||||
{tool.steps.map((step) => (
|
||||
{(coreToolSteps[tool.id] ?? tool.tags.slice(0, 3)).map((step) => (
|
||||
<span key={step}>{step}</span>
|
||||
))}
|
||||
</span>
|
||||
<span className="more-card__outcome">{tool.outcome}</span>
|
||||
<span className="more-card__outcome">{tool.useCase}</span>
|
||||
<span className="more-card__cta">开始使用 →</span>
|
||||
</div>
|
||||
</button>
|
||||
@@ -341,7 +383,7 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
|
||||
<button
|
||||
key={tool.id}
|
||||
type="button"
|
||||
className={`more-card${tool.ready ? " more-card--ready" : " more-card--pending"}`}
|
||||
className={`more-card${tool.ready ? " more-card--ready" : " more-card--pending"}${getPreviewClassName(tool.id)}`}
|
||||
aria-label={tool.ready ? `打开工具：${tool.title}，${tool.text}` : `${tool.title}暂未开放`}
|
||||
onClick={() => openTool(tool)}
|
||||
disabled={!tool.ready}
|
||||
@@ -353,7 +395,7 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
|
||||
))}
|
||||
</span>
|
||||
<strong>{tool.title}</strong>
|
||||
<ToolComparePanel scene={toolCompareScenes[tool.id]} />
|
||||
<ToolPreviewPanel toolId={tool.id} />
|
||||
<span className="more-card__desc">{tool.text}</span>
|
||||
<span className="more-card__use-case">{tool.useCase}</span>
|
||||
<span className="more-card__action">打开工具 →</span>
|
||||
|
||||
+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;
|
||||
}
|
||||
}
|
||||
|
||||
+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