kate522
7d78a33a9d
The username and e-mail entries under the profile header rendered as plain grey text on a solid icon. The reference makes each one a bordered pill that copies its own value on click, drawn with the outline glyphs. Both entries now carry `.but` plus `data-clipboard-tag` / `data-clipboard-text` so the existing frontend clipboard runtime (assets/js/runtime/libs/clipboard.js) picks them up and toasts "用户名已复制". Icons move from `fas` to `far`, which is the FA5 equivalent of the reference's `fa-user-o` / `fa-envelope-o`. Geometry follows `.author-header .user-identity > .but/.badg` exactly: padding 2px 6px, margin 5px 6px 0 0, 12px type, 1.4 line height, and the meta row gets the reference's 520px max width. medal.css already carried its own approximation of this pill (2px 8px 2px 0, .3em .6em, 1.44) for the medal entry; it now uses the same numbers so the two entries line up. The base rule lives in layout.css rather than medal.css because the medal module is only enqueued when badges are enabled, and the header must keep its shape either way. Verification: rendered the real header through a PHP stub and measured the computed styles in the browser — padding 2px 6px, margin 5px 6px 0 0, 12px / 16.8px, 23px tall, both entries carrying the right clipboard payload. Added user-center-header-meta-contract.test.cjs to pin the markup and geometry; 864 widget/navigation tests pass.
611 lines
13 KiB
CSS
611 lines
13 KiB
CSS
/**
|
||
* Jio Profile / User Center — v3.3 Editorial
|
||
*
|
||
* 从 page-profile.php 内嵌 <style> 提取，token 化。
|
||
* 通过 class-jio-scripts.php 在 is_page_template('templates/pages/page-profile.php') 时加载。
|
||
*
|
||
* 覆盖：
|
||
* - 公开个人主页头
|
||
* - 仪表盘标签 + 数据表
|
||
* - 个人资料编辑表单 + 联系方式行
|
||
* - 账号设置区（第三方绑定 / 安全操作）
|
||
* - 模态弹窗（修改密码 / 修改邮箱）
|
||
* - 密码强度条
|
||
*/
|
||
|
||
/* ==================== 用户资料卡片（共享） ==================== */
|
||
.uc-header {
|
||
margin-bottom: 20px;
|
||
border-radius: var(--radius-lg, 12px);
|
||
overflow: hidden;
|
||
background: var(--surface-1);
|
||
box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
|
||
}
|
||
|
||
/* 对齐 legacy: calc(20% + 100px) */
|
||
.uc-header__cover {
|
||
position: relative;
|
||
padding-bottom: calc(20% + 100px);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.uc-header__cover-img {
|
||
position: absolute;
|
||
inset: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.uc-header__cover-mask {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 80px;
|
||
background: linear-gradient(to top, rgba(0,0,0,0.35), transparent);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.jio-cover-menu {
|
||
position: absolute;
|
||
bottom: 12px;
|
||
right: 12px;
|
||
z-index: 2;
|
||
}
|
||
.jio-cover-menu__trigger {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 34px;
|
||
height: 34px;
|
||
padding: 0;
|
||
border: none;
|
||
border-radius: 50%;
|
||
background: rgba(0, 0, 0, 0.25);
|
||
color: #fff;
|
||
cursor: pointer;
|
||
backdrop-filter: blur(4px);
|
||
transition: background .2s;
|
||
}
|
||
.jio-cover-menu__trigger:hover,
|
||
.jio-cover-menu__trigger:focus-visible {
|
||
background: rgba(0, 0, 0, 0.45);
|
||
outline: 2px solid #fff;
|
||
outline-offset: 2px;
|
||
}
|
||
.jio-cover-menu__panel {
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: calc(100% + 8px);
|
||
display: grid;
|
||
min-width: 140px;
|
||
padding: 6px;
|
||
border-radius: 10px;
|
||
background: rgba(20, 24, 31, .94);
|
||
box-shadow: 0 12px 32px rgba(0,0,0,.22);
|
||
backdrop-filter: blur(12px);
|
||
}
|
||
.jio-cover-menu__panel[hidden] {
|
||
display: none !important;
|
||
}
|
||
.jio-cover-menu__panel [role="menuitem"] {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
min-height: 36px;
|
||
padding: 0 10px;
|
||
border: 0;
|
||
border-radius: 6px;
|
||
color: #fff;
|
||
background: transparent;
|
||
font: inherit;
|
||
font-size: 13px;
|
||
text-align: left;
|
||
text-decoration: none;
|
||
cursor: pointer;
|
||
}
|
||
.jio-cover-menu__panel [role="menuitem"]:hover,
|
||
.jio-cover-menu__panel [role="menuitem"]:focus-visible { background: rgba(255,255,255,.13); outline: none; }
|
||
.profile-form__fields { display: grid; gap: 14px; }
|
||
.profile-form__fields label { display: grid; gap: 6px; font-size: 13px; color: var(--color-ink, #24292f); }
|
||
|
||
.uc-header__content {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 20px;
|
||
padding: 18px 28px 24px;
|
||
margin-top: -60px;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.uc-header__avatar {
|
||
position: relative;
|
||
flex-shrink: 0;
|
||
width: 140px;
|
||
height: 140px;
|
||
/* 用户中心头图卡保持 legacy 圆角方形：显式声明圆角，避免被 public 捆绑里
|
||
同特异性（0,1,1）的全局头像原语 img.avatar 抢先。 */
|
||
border-radius: 6px;
|
||
}
|
||
|
||
#jio-bg-file-input[hidden],
|
||
#jio-avatar-file-input[hidden] {
|
||
display: none !important;
|
||
}
|
||
|
||
/* 对齐 legacy: 140px, 6px 圆角 */
|
||
.uc-header__avatar img {
|
||
display: block;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: inherit;
|
||
border: 4px solid var(--surface-1);
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
|
||
object-fit: cover;
|
||
transition: transform 0.2s ease;
|
||
}
|
||
|
||
.uc-header__avatar-upload {
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 7px;
|
||
width: 100%;
|
||
padding: 0;
|
||
border: 0;
|
||
border-radius: inherit;
|
||
background: rgba(0, 0, 0, 0.52);
|
||
color: #fff;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
line-height: 1;
|
||
cursor: pointer;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transition: opacity 0.2s ease, visibility 0.2s ease;
|
||
}
|
||
|
||
.uc-header__avatar-upload i {
|
||
font-size: 22px;
|
||
}
|
||
|
||
.uc-header__avatar:hover .uc-header__avatar-upload,
|
||
.uc-header__avatar:focus-within .uc-header__avatar-upload {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
|
||
.uc-header__avatar:hover img,
|
||
.uc-header__avatar:focus-within img {
|
||
transform: scale(1.03);
|
||
}
|
||
|
||
.uc-header__avatar-upload:focus-visible {
|
||
outline: 2px solid #fff;
|
||
outline-offset: -5px;
|
||
}
|
||
|
||
.uc-header__avatar-upload:disabled {
|
||
cursor: wait;
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
|
||
.uc-header__info {
|
||
flex: 1;
|
||
min-width: 0;
|
||
padding-top: 65px;
|
||
}
|
||
|
||
.uc-header__name {
|
||
margin: 0 0 6px;
|
||
font-size: 1.35rem;
|
||
font-weight: 700;
|
||
color: var(--color-ink);
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.uc-header__desc {
|
||
margin: 0 0 10px;
|
||
font-size: 13px;
|
||
color: var(--color-ink-3);
|
||
line-height: 1.5;
|
||
max-width: 520px;
|
||
}
|
||
|
||
.jio-identity-chips {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
margin: 10px 0 0;
|
||
}
|
||
|
||
.jio-identity-chip {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
min-height: 30px;
|
||
padding: 0 12px;
|
||
border-radius: 999px;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
line-height: 1;
|
||
letter-spacing: 0.01em;
|
||
}
|
||
|
||
.jio-identity-chip--success {
|
||
color: #0f766e;
|
||
background: rgba(15, 118, 110, 0.12);
|
||
}
|
||
|
||
.jio-identity-chip--info {
|
||
color: #1d4ed8;
|
||
background: rgba(37, 99, 235, 0.12);
|
||
}
|
||
|
||
.jio-identity-chip--warning {
|
||
color: #b45309;
|
||
background: rgba(245, 158, 11, 0.14);
|
||
}
|
||
|
||
.jio-identity-chip--brand {
|
||
color: #7c3aed;
|
||
background: rgba(124, 58, 237, 0.12);
|
||
}
|
||
|
||
.jio-identity-chip--neutral {
|
||
color: var(--color-ink-3);
|
||
background: var(--surface-2);
|
||
}
|
||
|
||
|
||
.uc-header__meta {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 0;
|
||
max-width: 520px;
|
||
font-size: 13px;
|
||
color: var(--color-ink-3);
|
||
}
|
||
|
||
/* Reference geometry: every meta entry is a pill — 12px type, 2px/6px padding,
|
||
* 5px 6px 0 0 spacing, 1.4 line height (same numbers as .author-header
|
||
* .user-identity > .but/.badg). Declared here so the header keeps its shape even
|
||
* when the medal module is not enqueued. */
|
||
.uc-header__meta-item {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
min-width: 0;
|
||
margin: 5px 6px 0 0;
|
||
padding: 2px 6px;
|
||
border: 1px solid var(--color-line-soft, var(--main-border-color, rgba(136, 136, 136, .18)));
|
||
border-radius: var(--mini-radius, 4px);
|
||
background: var(--surface-2, rgba(136, 136, 136, .1));
|
||
color: var(--color-ink-3);
|
||
font-size: 12px;
|
||
line-height: 1.4;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.uc-header__meta-item i {
|
||
font-size: 12px;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.uc-header__meta .jio-ip-geo-badge {
|
||
font-size: 12px;
|
||
padding: 2px 6px;
|
||
margin: 5px 6px 0 0;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
/* 治理状态提示：与相邻元信息同排版；链接默认色会让箭头/图标偏离行内墨色 */
|
||
.uc-header__meta .jio-user-ban-notice {
|
||
color: var(--color-ink-3);
|
||
}
|
||
|
||
.uc-header__actions {
|
||
flex-shrink: 0;
|
||
padding-top: 68px;
|
||
}
|
||
|
||
|
||
/* 公开主页响应式 */
|
||
@media (max-width: 767px) {
|
||
.uc-header__content {
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
padding: 12px 16px 20px;
|
||
}
|
||
|
||
.uc-header__info {
|
||
padding-top: 0;
|
||
}
|
||
|
||
.uc-header__desc {
|
||
max-width: 100%;
|
||
}
|
||
|
||
.uc-header__meta {
|
||
justify-content: center;
|
||
}
|
||
|
||
.jio-identity-chips {
|
||
justify-content: center;
|
||
}
|
||
|
||
.uc-header__actions {
|
||
padding-top: 0;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.uc-header__cover {
|
||
padding-bottom: calc(20% + 60px);
|
||
}
|
||
|
||
.uc-header__content {
|
||
margin-top: -40px;
|
||
gap: 14px;
|
||
}
|
||
|
||
.uc-header__avatar {
|
||
width: 90px;
|
||
height: 90px;
|
||
}
|
||
|
||
.uc-header__avatar img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.uc-header__avatar-upload {
|
||
gap: 5px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.uc-header__avatar-upload i {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.uc-header__name {
|
||
font-size: 1.15rem;
|
||
}
|
||
}
|
||
|
||
|
||
/* ==================== Dashboard Tabs 计数徽章 ==================== */
|
||
.dashboard-tabs__count {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-width: 18px;
|
||
height: 18px;
|
||
padding: 0 6px;
|
||
margin-left: 4px;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
line-height: 1;
|
||
color: var(--color-ink-3);
|
||
background: var(--surface-3);
|
||
border-radius: var(--radius-pill);
|
||
font-variant-numeric: tabular-nums;
|
||
transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
|
||
}
|
||
.dashboard-tabs button.is-active .dashboard-tabs__count {
|
||
color: var(--color-on-primary, #fff);
|
||
background: var(--color-primary);
|
||
}
|
||
|
||
/* 移动端 tab 横向滚动（取代换行） */
|
||
@media (max-width: 640px) {
|
||
.dashboard-tabs {
|
||
flex-wrap: nowrap;
|
||
overflow-x: auto;
|
||
overflow-y: hidden;
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
}
|
||
.jio-profile .uc-mobile-tabs {
|
||
flex-wrap: wrap;
|
||
overflow: hidden;
|
||
}
|
||
.dashboard-tabs::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
.dashboard-tabs button {
|
||
flex-shrink: 0;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
|
||
|
||
/* ==================== 个人资料编辑表单 ==================== */
|
||
.profile-form .widget-card {
|
||
margin-bottom: 16px;
|
||
}
|
||
.profile-form__submit {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 0;
|
||
margin-top: 16px;
|
||
background: none;
|
||
border: none;
|
||
}
|
||
.profile-add-contact {
|
||
margin-top: 8px;
|
||
}
|
||
.profile-input {
|
||
display: block;
|
||
width: 100%;
|
||
padding: 10px 14px;
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
color: var(--color-ink);
|
||
background: var(--surface-1);
|
||
border: 1px solid var(--color-line);
|
||
border-radius: 8px;
|
||
outline: none;
|
||
transition: border-color 0.2s, box-shadow 0.2s;
|
||
box-sizing: border-box;
|
||
}
|
||
.profile-input:focus {
|
||
border-color: var(--color-primary);
|
||
box-shadow: 0 0 0 3px var(--color-primary-soft);
|
||
}
|
||
.profile-textarea {
|
||
resize: vertical;
|
||
min-height: 90px;
|
||
font-family: inherit;
|
||
}
|
||
.profile-hint {
|
||
font-size: 12px;
|
||
color: var(--color-ink-4);
|
||
margin: 6px 0 0;
|
||
}
|
||
.profile-hint--top {
|
||
margin-top: 0;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
/* ==================== List Header（标题 + 状态筛选） ==================== */
|
||
.profile-list-header {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
margin-bottom: 14px;
|
||
padding-bottom: 12px;
|
||
border-bottom: 2px solid var(--color-primary-50);
|
||
}
|
||
|
||
.creator-center-header {
|
||
align-items: flex-start;
|
||
}
|
||
.creator-center-heading {
|
||
min-width: 220px;
|
||
}
|
||
.creator-center-heading__summary {
|
||
margin: 4px 0 0;
|
||
color: var(--color-ink-4);
|
||
font-size: 12px;
|
||
}
|
||
.creator-center-actions {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
gap: 10px;
|
||
}
|
||
.creator-center-actions .profile-status-filter {
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.widget-title--inline {
|
||
margin: 0;
|
||
padding: 0;
|
||
border: none;
|
||
}
|
||
.widget-title--inline::before {
|
||
display: none;
|
||
}
|
||
|
||
.profile-status-filter {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px;
|
||
}
|
||
.profile-status-chip {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
padding: 4px 10px;
|
||
border-radius: var(--radius-pill);
|
||
border: 1px solid var(--color-line);
|
||
background: var(--surface-1);
|
||
color: var(--color-ink-3);
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
line-height: 1.4;
|
||
text-decoration: none;
|
||
transition: color var(--dur-fast) var(--ease),
|
||
background-color var(--dur-fast) var(--ease),
|
||
border-color var(--dur-fast) var(--ease);
|
||
}
|
||
.profile-status-chip:hover {
|
||
color: var(--color-primary);
|
||
border-color: var(--color-primary);
|
||
}
|
||
.profile-status-chip.is-active {
|
||
color: var(--color-on-primary, #fff);
|
||
background: var(--color-primary);
|
||
border-color: var(--color-primary);
|
||
}
|
||
.profile-status-chip__count {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-width: 16px;
|
||
height: 16px;
|
||
padding: 0 4px;
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
line-height: 1;
|
||
border-radius: var(--radius-pill);
|
||
background: var(--surface-3);
|
||
color: var(--color-ink-4);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.profile-status-chip.is-active .profile-status-chip__count {
|
||
background: rgba(255, 255, 255, 0.25);
|
||
color: #fff;
|
||
}
|
||
|
||
/* Level icon base sizing is centralized in assets/css/frontend/base.css. */
|
||
|
||
/* 用户中心 layout 间距；双栏 / sticky 见 user-center/shell.css（body.jio-user-center）。 */
|
||
.jio-profile__layout {
|
||
margin-top: 20px;
|
||
}
|
||
.jio-user-center__notice {
|
||
margin-bottom: 16px;
|
||
padding: 12px 14px;
|
||
border-radius: 8px;
|
||
color: #166534;
|
||
background: rgba(34, 197, 94, 0.12);
|
||
}
|
||
.jio-user-center__notice--error {
|
||
color: var(--color-error, #b91c1c);
|
||
background: rgba(239, 68, 68, 0.12);
|
||
}
|
||
.jio-profile .uc-mobile-tabs a {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: 8px 14px;
|
||
border-radius: 8px;
|
||
color: var(--color-ink-3);
|
||
text-decoration: none;
|
||
}
|
||
.jio-profile .uc-mobile-tabs a.is-active {
|
||
color: var(--color-primary);
|
||
background: var(--color-primary-soft);
|
||
}
|
||
.jio-profile .dashboard-panel > .widget-card:first-child,
|
||
.jio-profile .profile-form > .widget-card:first-child {
|
||
margin-top: 0;
|
||
}
|