feat: 个人中心界面UI优化，提升商业产品精致度
ProfilePage组件优化： - 新增个性签名编辑功能（内联编辑/确认/取消交互） - 新增 icon 导入（EditOutlined, CheckOutlined, CloseOutlined） - 新增 formatProfileDate 工具函数，统一日期格式化（中文友好） - 新增 formatTaskType 函数，任务类型中文化显示 - 新增 formatTaskStatus 函数，任务状态中文化显示 - 新增 formatAssetStatus 函数，资产状态中文化显示 - 优化空状态展示，增加图标占位 dark-green主题层样式增强： - 个人中心背景增加微光渐变（accent光晕+半透明遮罩） - Banner区域高度优化为214px，增加底部渐变分割线 - Banner叠加层增加径向光晕效果 - Banner编辑按钮增加毛玻璃质感（backdrop-filter） - 侧边栏/主体/选项卡/列表卡片等多处细节增强 - 按钮、标签、统计数字等组件加入微交互 - 保持暗绿主题配色体系不变，仅提升精致度
This commit is contained in:
@@ -5394,6 +5394,787 @@
|
||||
aspect-ratio: auto;
|
||||
}
|
||||
|
||||
/* Profile center: commercial SaaS polish while preserving the dark-green theme. */
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page {
|
||||
background:
|
||||
radial-gradient(circle at 18% 0%, rgba(var(--accent-rgb), 0.08), transparent 28%),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent 220px),
|
||||
var(--dg-page);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__banner {
|
||||
height: 214px;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(var(--accent-rgb), 0.11), transparent 34%),
|
||||
linear-gradient(180deg, var(--bg-elevated), var(--dg-page));
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__banner::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: auto 0 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.4), transparent);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__banner.has-image {
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__banner-overlay {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(13, 13, 15, 0.18), rgba(13, 13, 15, 0.78)),
|
||||
radial-gradient(circle at 50% 100%, rgba(var(--accent-rgb), 0.12), transparent 34%);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__banner-btn {
|
||||
height: 36px;
|
||||
padding: 0 14px;
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
background: rgba(10, 12, 13, 0.66);
|
||||
backdrop-filter: blur(14px);
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
min-width: 104px;
|
||||
line-height: 1;
|
||||
font-weight: 600;
|
||||
transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__banner-btn .anticon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__banner .profile-page__banner-btn {
|
||||
top: 18px;
|
||||
right: max(18px, calc((100vw - 1240px) / 2 + 18px));
|
||||
bottom: auto;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__banner-btn:hover {
|
||||
border-color: rgba(var(--accent-rgb), 0.45);
|
||||
background: rgba(12, 18, 16, 0.86);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__body {
|
||||
grid-template-columns: 292px minmax(0, 1fr);
|
||||
gap: 34px;
|
||||
width: min(1240px, calc(100% - 56px));
|
||||
margin-top: -72px;
|
||||
padding-bottom: 56px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__sidebar,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__list-card,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__review-item,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__empty-state,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__upload-card {
|
||||
border-color: rgba(255, 255, 255, 0.075);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
|
||||
var(--bg-surface);
|
||||
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__sidebar {
|
||||
gap: 18px;
|
||||
padding: 22px;
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__sidebar-head {
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-ring::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: -7px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(var(--accent-rgb), 0.22), transparent 68%);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-ring .profile-page__avatar,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__avatar {
|
||||
position: relative;
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
border: 4px solid var(--dg-page);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(var(--accent-rgb), 0.26), rgba(var(--accent-rgb), 0.08)),
|
||||
var(--bg-elevated);
|
||||
box-shadow: 0 12px 26px rgba(0, 0, 0, 0.32);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-edit {
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
border-color: rgba(255, 255, 255, 0.18);
|
||||
background: rgba(8, 10, 11, 0.68);
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: opacity var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-badge {
|
||||
right: -3px;
|
||||
bottom: 10px;
|
||||
z-index: 4;
|
||||
border: 2px solid var(--bg-surface);
|
||||
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-ring:hover .profile-page__avatar-edit,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-ring:active .profile-page__avatar-edit,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-edit:focus-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-ring:hover .profile-page__avatar-edit:hover,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-edit:focus-visible {
|
||||
background: rgba(8, 10, 11, 0.82);
|
||||
transform: translate(-50%, -50%) scale(1.02);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__username {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
font-size: 21px;
|
||||
letter-spacing: 0;
|
||||
line-height: 1.25;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__bio {
|
||||
width: 100%;
|
||||
min-height: 56px;
|
||||
padding: 10px 12px;
|
||||
border-color: rgba(255, 255, 255, 0.07);
|
||||
background: rgba(255, 255, 255, 0.025);
|
||||
color: var(--fg-muted);
|
||||
transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__bio:focus {
|
||||
background: var(--bg-elevated);
|
||||
box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.08);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__bio-editor {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__bio-actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__bio-action {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
min-width: 68px;
|
||||
height: 30px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.075);
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.025);
|
||||
color: var(--fg-muted);
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__bio-action:hover {
|
||||
border-color: rgba(255, 255, 255, 0.14);
|
||||
background: rgba(255, 255, 255, 0.045);
|
||||
color: var(--fg-body);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__bio-action--save {
|
||||
border-color: rgba(var(--accent-rgb), 0.34);
|
||||
background: rgba(var(--accent-rgb), 0.1);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__bio-action--save:hover {
|
||||
border-color: rgba(var(--accent-rgb), 0.5);
|
||||
background: rgba(var(--accent-rgb), 0.16);
|
||||
color: var(--accent-hover);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
min-height: 48px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.055);
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(255, 255, 255, 0.018);
|
||||
color: var(--fg-muted);
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display span {
|
||||
overflow: hidden;
|
||||
font-size: 13px;
|
||||
line-height: 1.45;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display.is-empty span {
|
||||
color: var(--fg-soft);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__bio-edit-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background: rgba(var(--accent-rgb), 0.08);
|
||||
color: var(--accent);
|
||||
font-size: 12px;
|
||||
opacity: 0.78;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display:hover,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display:focus-visible {
|
||||
border-color: rgba(var(--accent-rgb), 0.28);
|
||||
background: rgba(var(--accent-rgb), 0.055);
|
||||
color: var(--fg-body);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display:hover .profile-page__bio-edit-icon,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display:focus-visible .profile-page__bio-edit-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__bio-status {
|
||||
color: var(--accent);
|
||||
font-size: 11px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__counts {
|
||||
gap: 0;
|
||||
width: 100%;
|
||||
padding: 12px 0;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.065);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.065);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__count strong {
|
||||
font-size: 19px;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__count span {
|
||||
margin-top: 4px;
|
||||
color: var(--fg-soft);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn {
|
||||
min-height: 40px;
|
||||
padding: 0 15px;
|
||||
border-radius: var(--radius-sm);
|
||||
transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn--plan {
|
||||
justify-content: center;
|
||||
border-color: rgba(var(--accent-rgb), 0.24);
|
||||
background: rgba(var(--accent-rgb), 0.07);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn--primary {
|
||||
border-color: rgba(var(--accent-rgb), 0.62);
|
||||
background: var(--accent);
|
||||
color: var(--dg-button-text);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn--secondary {
|
||||
background: rgba(255, 255, 255, 0.025);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn--danger {
|
||||
margin-top: 2px;
|
||||
border-color: transparent;
|
||||
color: var(--fg-soft);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn--primary:hover {
|
||||
border-color: var(--accent-hover);
|
||||
background: var(--accent-hover);
|
||||
color: var(--dg-button-text);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn--danger:hover {
|
||||
border-color: rgba(255, 90, 95, 0.36);
|
||||
background: rgba(255, 90, 95, 0.1);
|
||||
color: #ff9a9d;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__main {
|
||||
gap: 22px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__main-tabs {
|
||||
min-height: 52px;
|
||||
margin-bottom: 2px;
|
||||
padding: 4px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.065);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(255, 255, 255, 0.022);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__main-tabs button {
|
||||
min-height: 42px;
|
||||
padding: 0 18px;
|
||||
border: 0;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__main-tabs button.is-active {
|
||||
background: rgba(var(--accent-rgb), 0.12);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__main-tabs button.is-active::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__section {
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__section-label {
|
||||
margin-bottom: 0;
|
||||
color: var(--fg-body);
|
||||
font-size: 15px;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__list-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
|
||||
gap: 14px;
|
||||
max-height: min(470px, 48vh);
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
padding-right: 6px;
|
||||
scrollbar-color: rgba(var(--accent-rgb), 0.42) transparent;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__list-grid::-webkit-scrollbar,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__review-list::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__list-grid::-webkit-scrollbar-track,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__review-list::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__list-grid::-webkit-scrollbar-thumb,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__review-list::-webkit-scrollbar-thumb {
|
||||
border-radius: 999px;
|
||||
background: rgba(var(--accent-rgb), 0.28);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__list-grid::-webkit-scrollbar-thumb:hover,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__review-list::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(var(--accent-rgb), 0.42);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__list-card {
|
||||
min-height: 136px;
|
||||
padding: 16px;
|
||||
border-radius: var(--radius-md);
|
||||
transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__list-card:hover,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__review-item:hover {
|
||||
border-color: rgba(var(--accent-rgb), 0.28);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(var(--accent-rgb), 0.045), transparent),
|
||||
var(--bg-surface);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__list-card-head strong {
|
||||
min-width: 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__list-card-head span {
|
||||
padding: 4px 8px;
|
||||
border-radius: 999px;
|
||||
background: rgba(var(--accent-rgb), 0.1);
|
||||
color: var(--accent);
|
||||
font-size: 11px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__list-card p {
|
||||
display: -webkit-box;
|
||||
min-height: 38px;
|
||||
overflow: hidden;
|
||||
color: var(--fg-muted);
|
||||
font-size: 12px;
|
||||
line-height: 1.55;
|
||||
text-overflow: ellipsis;
|
||||
white-space: normal;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__list-card-meta {
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.055);
|
||||
color: var(--fg-soft);
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__empty-state {
|
||||
position: relative;
|
||||
min-height: 280px;
|
||||
overflow: hidden;
|
||||
padding: 46px 28px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__empty-state::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(circle at 50% 0%, rgba(var(--accent-rgb), 0.09), transparent 42%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__empty-mark {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border: 1px solid rgba(var(--accent-rgb), 0.22);
|
||||
border-radius: 50%;
|
||||
background: rgba(var(--accent-rgb), 0.08);
|
||||
color: var(--accent);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__empty-text {
|
||||
position: relative;
|
||||
color: var(--fg-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__empty-btn {
|
||||
position: relative;
|
||||
min-height: 38px;
|
||||
border-color: rgba(var(--accent-rgb), 0.32);
|
||||
background: rgba(var(--accent-rgb), 0.08);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__review-list {
|
||||
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
|
||||
gap: 14px;
|
||||
max-height: min(470px, 48vh);
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
padding-right: 6px;
|
||||
scrollbar-color: rgba(var(--accent-rgb), 0.42) transparent;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__review-item {
|
||||
min-height: 74px;
|
||||
padding: 10px;
|
||||
border-radius: var(--radius-md);
|
||||
transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__review-item:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__review-item img,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__review-thumb {
|
||||
flex-basis: 70px;
|
||||
width: 70px;
|
||||
height: 52px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__review-item strong {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__list-bar {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__list-tabs {
|
||||
gap: 4px;
|
||||
padding: 3px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.065);
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__list-tabs button {
|
||||
min-height: 32px;
|
||||
padding: 0 14px;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__list-tabs button.is-active {
|
||||
background: rgba(var(--accent-rgb), 0.1);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__upload-card--meta {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
padding: 14px;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__meta-item {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
padding: 14px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.055);
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(255, 255, 255, 0.025);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__meta-item small {
|
||||
overflow: hidden;
|
||||
color: var(--fg-soft);
|
||||
font-size: 12px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__meta-item strong {
|
||||
overflow: hidden;
|
||||
color: var(--fg-body);
|
||||
font-size: 17px;
|
||||
line-height: 1.25;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__body {
|
||||
grid-template-columns: 1fr;
|
||||
width: min(100% - 36px, 760px);
|
||||
margin-top: -54px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__sidebar {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__main-tabs {
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__banner {
|
||||
height: 152px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__banner .profile-page__banner-btn {
|
||||
top: 10px;
|
||||
right: 12px;
|
||||
width: 36px;
|
||||
min-width: 36px;
|
||||
height: 36px;
|
||||
padding: 0;
|
||||
border-radius: 999px;
|
||||
font-size: 0;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__banner-btn .anticon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: transparent;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__body {
|
||||
width: min(100% - 28px, 560px);
|
||||
margin-top: -32px;
|
||||
padding-bottom: 88px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__sidebar {
|
||||
gap: 13px;
|
||||
padding: 18px;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__sidebar-head {
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-ring .profile-page__avatar,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__avatar {
|
||||
width: 76px;
|
||||
height: 76px;
|
||||
border-width: 3px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-edit {
|
||||
width: 76px;
|
||||
height: 76px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-badge {
|
||||
bottom: 6px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__username {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__bio {
|
||||
min-height: 46px;
|
||||
padding: 8px 10px;
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display {
|
||||
min-height: 42px;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display span {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__counts {
|
||||
padding: 9px 0;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__count strong {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn {
|
||||
min-height: 36px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__main-tabs button {
|
||||
flex: 0 0 auto;
|
||||
padding: 0 14px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__upload-card--meta {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__list-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
max-height: min(312px, 46vh);
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__list-card {
|
||||
min-height: 112px;
|
||||
padding: 9px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__list-card-head {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__list-card-head strong {
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__list-card-head span {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
padding: 3px 7px;
|
||||
font-size: 10px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__list-card p {
|
||||
min-height: 30px;
|
||||
font-size: 11px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__list-card-meta {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
padding-top: 8px;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
|
||||
Reference in New Issue
Block a user