feat: 个人中心视觉重构、画布网点背景、剧本评分色调统一
【个人中心视觉重构】 - 列表卡片新增媒体预览缩略图(图片/视频/项目/资产),支持 image/video 两种媒体类型 - 新增 renderCardPreview 通用预览组件,自动识别视频格式并渲染 <video> 标签 - 新增 formatAssetType 工具函数,资产类型中文化(角色/场景/道具/视频/图像/素材) - 媒体卡片采用固定高度网格布局(标题行 18px/正文 36px/元信息 18px),保证列表节奏一致 - 卡片预览区左上角显示类型标签徽章(品牌绿边框+半透明背景) - 删除按钮增加 hover 红色反馈(边框/背景/文字渐变至红色) - 积分/任务面板从底部区域移至侧边栏头像下方,减少滚动距离 - 新增 account-card 容器包裹积分/任务切换面板 - 侧边栏统计数据改为 3 列网格布局,每项增加独立圆角卡片样式 - 作品/项目/资产/社区发布四个 Tab 改为均分 4 列网格 - 分区标题增加品牌绿圆点前缀装饰 - 响应式断点:960px(侧边栏双列+内容区单列)、640px(全部单列+标签横向滚动)、420px(紧凑间距) 【画布网点背景】 - 移除 ReactFlow <Background> 组件,改用纯 CSS radial-gradient 圆点背景 - 通过 CSS 自定义属性(--canvas-bg-size/--canvas-bg-dot/--canvas-bg-x/--canvas-bg-y)实现缩放/平移时网点同步 - 网点颜色使用半透明灰蓝(rgba(148,163,184,0.34)),随画布缩放动态调整点间距与大小 【剧本评分色调统一】 - 变量 Token 体系重定义为电商同款暗色面板色调(--v5-bg: #0d0d0f, --v5-panel: #151719) - 移除所有 box-shadow 和 depth 阴影,改用 inset 顶部光泽线 - 移除 backdrop-filter 毛玻璃效果,统一为纯色半透明背景 - hover 交互简化为边框+背景色变化,取消 transform 浮起动画 - 上传区移除 ::after 径向光晕伪元素 - 已上传态/选中态仅通过 border-color 和背景色微调区分
This commit is contained in:
@@ -6849,6 +6849,649 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Profile center: responsive workspace refinement. */
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(var(--accent-rgb), 0.035), transparent 220px),
|
||||
var(--dg-page);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__banner {
|
||||
height: clamp(156px, 18vw, 214px);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(var(--accent-rgb), 0.1), transparent 36%),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
|
||||
var(--bg-surface);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__banner-overlay {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(13, 13, 15, 0.12), rgba(13, 13, 15, 0.72)),
|
||||
linear-gradient(90deg, rgba(13, 13, 15, 0.68), transparent 42%);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__body {
|
||||
grid-template-columns: minmax(270px, 300px) minmax(0, 1fr);
|
||||
gap: clamp(18px, 2.4vw, 30px);
|
||||
width: min(1180px, calc(100% - 48px));
|
||||
min-height: auto;
|
||||
margin-top: -58px;
|
||||
padding-bottom: clamp(36px, 5vw, 64px);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__sidebar,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-card,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__main-tabs,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__section,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__review-item,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__empty-state,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__upload-card {
|
||||
border-color: rgba(255, 255, 255, 0.075);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.026), transparent),
|
||||
rgba(21, 23, 25, 0.96);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__sidebar {
|
||||
gap: 16px;
|
||||
padding: clamp(16px, 2vw, 22px);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__avatar-ring::before {
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__avatar-ring .profile-page__avatar,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__avatar {
|
||||
width: 82px;
|
||||
height: 82px;
|
||||
border-width: 3px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__avatar-edit {
|
||||
width: 82px;
|
||||
height: 82px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__avatar-badge {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__username {
|
||||
font-size: clamp(19px, 1.7vw, 22px);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__bio-display,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__bio {
|
||||
border-color: rgba(255, 255, 255, 0.07);
|
||||
background: rgba(255, 255, 255, 0.024);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__bio-display span {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__counts {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__count {
|
||||
min-width: 0;
|
||||
padding: 12px 8px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.065);
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(255, 255, 255, 0.024);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__count strong {
|
||||
font-size: clamp(18px, 1.5vw, 22px);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-card {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
padding: 11px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.075);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-card .profile-page__list-tabs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
width: 100%;
|
||||
padding: 3px;
|
||||
border-color: rgba(255, 255, 255, 0.06);
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-card .profile-page__list-tabs button {
|
||||
min-width: 0;
|
||||
min-height: 30px;
|
||||
padding: 0 8px;
|
||||
overflow: hidden;
|
||||
font-size: 12px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-card .profile-page__upload-card--meta {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 8px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-card .profile-page__meta-item {
|
||||
min-height: auto;
|
||||
padding: 10px 11px;
|
||||
background: rgba(255, 255, 255, 0.022);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-card .profile-page__meta-item strong {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__share-btn {
|
||||
min-height: 42px;
|
||||
border-radius: 10px;
|
||||
font-size: 13px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__share-btn:hover {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__share-btn--primary {
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__share-btn--secondary {
|
||||
border-color: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__main {
|
||||
gap: 16px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__main-tabs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 6px;
|
||||
min-height: 50px;
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__main-tabs button {
|
||||
min-width: 0;
|
||||
min-height: 40px;
|
||||
padding: 0 12px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__section {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
padding: clamp(14px, 1.8vw, 18px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.075);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__section-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--fg-body);
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__section-label::before {
|
||||
content: "";
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-grid,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__review-list {
|
||||
gap: 12px;
|
||||
max-height: none;
|
||||
overflow: visible;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__review-list {
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card {
|
||||
min-height: 128px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card {
|
||||
grid-template-columns: 92px minmax(0, 1fr);
|
||||
align-items: stretch;
|
||||
gap: 12px;
|
||||
min-height: 116px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card-preview {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 0;
|
||||
min-height: 88px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 255, 255, 0.065);
|
||||
border-radius: 10px;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(var(--accent-rgb), 0.055), transparent 64%),
|
||||
rgba(255, 255, 255, 0.024);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card-preview:not(.has-media) {
|
||||
border-color: rgba(255, 255, 255, 0.07);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
|
||||
rgba(255, 255, 255, 0.018);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card-preview img,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card-preview video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 88px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card-placeholder {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border: 1px solid rgba(var(--accent-rgb), 0.18);
|
||||
border-radius: 12px;
|
||||
background: rgba(var(--accent-rgb), 0.07);
|
||||
color: rgba(var(--accent-rgb), 0.92);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-badge {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
right: 7px;
|
||||
max-width: calc(100% - 14px);
|
||||
overflow: hidden;
|
||||
padding: 3px 7px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(var(--accent-rgb), 0.22);
|
||||
background: rgba(8, 14, 12, 0.76);
|
||||
color: var(--accent);
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-head {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-head strong {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__delete-project {
|
||||
flex: 0 0 26px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
margin: -3px -2px 0 0;
|
||||
border: 1px solid rgba(255, 255, 255, 0.075);
|
||||
border-radius: 8px;
|
||||
background: rgba(255, 255, 255, 0.026);
|
||||
color: var(--fg-soft);
|
||||
opacity: 0.72;
|
||||
transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__delete-project:hover,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__delete-project:focus-visible {
|
||||
border-color: rgba(255, 118, 118, 0.28);
|
||||
background: rgba(255, 118, 118, 0.08);
|
||||
color: #ff9a9d;
|
||||
opacity: 1;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card-body {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card:hover,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__review-item:hover {
|
||||
border-color: rgba(var(--accent-rgb), 0.28);
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__empty-state {
|
||||
min-height: 240px;
|
||||
padding: clamp(30px, 4vw, 46px) 24px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-bar {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-tabs {
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-tabs button {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__upload-card--meta {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__meta-item {
|
||||
min-height: 78px;
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__body {
|
||||
grid-template-columns: 1fr;
|
||||
width: min(760px, calc(100% - 36px));
|
||||
margin-top: -44px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__sidebar {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.8fr);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__sidebar-head {
|
||||
grid-row: span 5;
|
||||
align-items: flex-start;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__counts {
|
||||
align-self: stretch;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__banner {
|
||||
height: 140px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__body {
|
||||
width: min(100% - 28px, 560px);
|
||||
margin-top: -30px;
|
||||
padding-bottom: 84px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__sidebar {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__sidebar-head {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__avatar-ring .profile-page__avatar,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__avatar {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__avatar-edit {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__counts {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__count {
|
||||
padding: 10px 6px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__main-tabs {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__main-tabs::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__main-tabs button {
|
||||
flex: 0 0 auto;
|
||||
min-width: 88px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__section {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-grid,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__review-list {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card {
|
||||
min-height: 118px;
|
||||
padding: 13px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card {
|
||||
grid-template-columns: 88px minmax(0, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card-preview,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card-preview img,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card-preview video {
|
||||
min-height: 82px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card-head {
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__upload-card--meta {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 420px) {
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__body {
|
||||
width: min(100% - 20px, 420px);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__counts {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__share-btn {
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card {
|
||||
grid-template-columns: 78px minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card-preview,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card-preview img,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card-preview video {
|
||||
min-height: 76px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Profile center: lock media card rhythm for dense libraries. */
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card {
|
||||
grid-template-columns: 92px minmax(0, 1fr);
|
||||
height: 126px;
|
||||
min-height: 126px;
|
||||
max-height: 126px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-preview {
|
||||
width: 92px;
|
||||
height: 96px;
|
||||
min-height: 96px;
|
||||
max-height: 96px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-preview img,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-preview video {
|
||||
height: 96px;
|
||||
min-height: 96px;
|
||||
max-height: 96px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-body {
|
||||
display: grid;
|
||||
grid-template-rows: 18px 36px 18px;
|
||||
align-content: space-between;
|
||||
gap: 8px;
|
||||
height: 96px;
|
||||
min-height: 96px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-head {
|
||||
min-height: 18px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-head strong {
|
||||
display: block;
|
||||
width: 100%;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card p {
|
||||
min-height: 36px;
|
||||
max-height: 36px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-meta {
|
||||
align-self: end;
|
||||
min-height: 18px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-meta span:last-child {
|
||||
color: var(--fg-soft);
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card {
|
||||
grid-template-columns: 88px minmax(0, 1fr);
|
||||
height: 112px;
|
||||
min-height: 112px;
|
||||
max-height: 112px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-preview {
|
||||
width: 88px;
|
||||
height: 86px;
|
||||
min-height: 86px;
|
||||
max-height: 86px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-preview img,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-preview video {
|
||||
height: 86px;
|
||||
min-height: 86px;
|
||||
max-height: 86px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-body {
|
||||
grid-template-rows: 16px 32px 16px;
|
||||
gap: 6px;
|
||||
height: 86px;
|
||||
min-height: 86px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card p {
|
||||
min-height: 32px;
|
||||
max-height: 32px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-meta {
|
||||
min-height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 420px) {
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card {
|
||||
grid-template-columns: 78px minmax(0, 1fr);
|
||||
height: 104px;
|
||||
min-height: 104px;
|
||||
max-height: 104px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-preview {
|
||||
width: 78px;
|
||||
height: 78px;
|
||||
min-height: 78px;
|
||||
max-height: 78px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-preview img,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-preview video {
|
||||
height: 78px;
|
||||
min-height: 78px;
|
||||
max-height: 78px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-body {
|
||||
height: 78px;
|
||||
min-height: 78px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Ecommerce generation page: keep its carousel and composer independent from
|
||||
the community carousel rules that share class names. */
|
||||
.web-shell[data-ui-theme="dark-green"] .ecommerce-landing-page {
|
||||
@@ -8948,18 +9591,23 @@
|
||||
|
||||
/* Canvas SaaS polish: refined production-tool surfaces without changing canvas behavior. */
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .canvas-page .studio-canvas {
|
||||
background:
|
||||
background-image:
|
||||
radial-gradient(circle at 18% 8%, rgba(var(--accent-rgb), 0.055), transparent 30%),
|
||||
radial-gradient(circle at 72% 88%, rgba(255, 255, 255, 0.035), transparent 28%),
|
||||
linear-gradient(rgba(255, 255, 255, 0.026) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px),
|
||||
var(--dg-page);
|
||||
radial-gradient(
|
||||
circle,
|
||||
rgba(148, 163, 184, 0.34) 0 var(--canvas-bg-dot, 1.35px),
|
||||
transparent calc(var(--canvas-bg-dot, 1.35px) + 0.55px)
|
||||
);
|
||||
background-color: var(--dg-page);
|
||||
background-position:
|
||||
center,
|
||||
center,
|
||||
var(--canvas-bg-x, 0px) var(--canvas-bg-y, 0px);
|
||||
background-size:
|
||||
auto,
|
||||
auto,
|
||||
24px 24px,
|
||||
24px 24px,
|
||||
auto;
|
||||
var(--canvas-bg-size, 24px) var(--canvas-bg-size, 24px);
|
||||
color: var(--fg-body);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user