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.
193 lines
6.1 KiB
CSS
193 lines
6.1 KiB
CSS
/* ============================================================
|
||
* 徽章入口与弹窗运行时适配
|
||
* ------------------------------------------------------------
|
||
* 徽章列表、卡片和彩头复用 main.css 的参考主题样式。
|
||
* ============================================================ */
|
||
|
||
/* ---------- 顶部资料卡入口（legacy user-medal-info parity） ---------- */
|
||
.jio-medal-entry,
|
||
.uc-header__meta-item {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
min-width: 0;
|
||
/* 参考主题 .author-header .user-identity > .but/.badg：5px 6px 0 0 + 1.4 行高 */
|
||
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));
|
||
box-shadow: var(--shadow-xs, 0 1px 3px rgba(0, 0, 0, .08));
|
||
color: var(--muted-2-color, var(--color-ink-3));
|
||
font: inherit;
|
||
font-size: 12px;
|
||
line-height: 1.4;
|
||
white-space: nowrap;
|
||
}
|
||
.jio-medal-entry {
|
||
cursor: pointer;
|
||
transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
|
||
}
|
||
.jio-medal-entry:hover,
|
||
.jio-medal-entry:focus-visible {
|
||
border-color: var(--focus-color-opacity3, var(--focus-color));
|
||
background: var(--focus-color-opacity1, rgba(59, 130, 246, .1));
|
||
box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, .1));
|
||
color: var(--focus-color);
|
||
opacity: 1;
|
||
}
|
||
.jio-medal-entry:focus-visible {
|
||
outline: 2px solid var(--focus-color);
|
||
outline-offset: 2px;
|
||
}
|
||
.jio-medal-entry__icons {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
flex: none;
|
||
min-width: 0;
|
||
}
|
||
.jio-medal-entry__icon {
|
||
width: auto;
|
||
height: 1.45em;
|
||
max-width: 2.2em;
|
||
margin: 0 1px;
|
||
object-fit: contain;
|
||
vertical-align: middle;
|
||
}
|
||
.jio-medal-entry__icon + .jio-medal-entry__icon { margin-left: -1px; }
|
||
.jio-medal-entry__fallback {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 1.6em;
|
||
height: 1.6em;
|
||
color: var(--focus-color);
|
||
background: var(--focus-color-opacity1);
|
||
border-radius: 50%;
|
||
}
|
||
.jio-medal-entry__count { margin-left: 2px; }
|
||
.jio-medal-entry__arrow { margin-left: 1px; font-size: .9em; }
|
||
|
||
@media (max-width: 767px) {
|
||
.jio-medal-entry,
|
||
.uc-header__meta-item {
|
||
margin-right: 4px;
|
||
max-width: 100%;
|
||
}
|
||
}
|
||
|
||
/* 参考主题 modal-body：只适配共享运行时，列表/卡片由 main.css 定义。 */
|
||
.jio-modal-runtime.jio-badge-modal .jio-modal-runtime__dialog {
|
||
width: 600px;
|
||
max-width: calc(100% - 20px);
|
||
max-height: calc(100vh - 20px);
|
||
background: var(--main-bg-color);
|
||
border-radius: var(--main-radius);
|
||
box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
|
||
color: var(--main-color);
|
||
font: 14px/1.42857143 "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||
-webkit-font-smoothing: auto;
|
||
text-rendering: auto;
|
||
}
|
||
.jio-modal-runtime.jio-badge-modal--single .jio-modal-runtime__dialog {
|
||
width: 400px;
|
||
}
|
||
.jio-badge-modal:not(.jio-modal-runtime--bottom) .jio-modal-runtime__dialog {
|
||
transform: scale(.9);
|
||
transition: transform .5s cubic-bezier(.32, .85, .45, 1.18), width .3s;
|
||
}
|
||
.jio-badge-modal.is-open .jio-modal-runtime__dialog { transform: scale(1); }
|
||
.jio-badge-modal .jio-modal-runtime__content { padding: 0; }
|
||
.jio-badge-modal .modal-body { padding: 15px; }
|
||
.jio-badge-modal .jio-modal-runtime__loading {
|
||
position: absolute;
|
||
inset: 0;
|
||
min-height: inherit;
|
||
padding: 0;
|
||
background: var(--main-bg-color);
|
||
border-radius: inherit;
|
||
color: var(--main-color);
|
||
}
|
||
|
||
/* 参考主题的徽章图标无资源时保留同尺寸占位。 */
|
||
.jio-badge-modal .medal-icon--fa {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 56px;
|
||
font-size: 34px;
|
||
color: var(--focus-color);
|
||
}
|
||
.jio-badge-modal .medal-single-card .medal-icon--fa { font-size: 72px; }
|
||
.jio-badge-modal .medal-list > a { display: block; }
|
||
.jio-badge-modal .medal-list > a:focus-visible {
|
||
outline: 2px solid var(--focus-color);
|
||
outline-offset: 2px;
|
||
}
|
||
.jio-badge-modal .jio-null__img { display: inline-block; }
|
||
|
||
/* 公共运行时的按钮网格需还原为参考主题的平均分栏操作区。 */
|
||
.jio-modal-runtime.jio-badge-modal .modal-buts.but-average {
|
||
display: flex;
|
||
gap: 0;
|
||
margin: 0 -15px -15px;
|
||
border-radius: 0 0 var(--main-radius) var(--main-radius);
|
||
}
|
||
.jio-badge-modal .modal-buts.but-average > .but {
|
||
min-height: 0;
|
||
padding: .8em;
|
||
}
|
||
|
||
/* 与参考主题 mobile_bottom 一致，保留非 full-sm 子窗的底部留白。 */
|
||
.jio-modal-runtime--bottom.jio-badge-modal .jio-modal-runtime__dialog {
|
||
margin-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
|
||
box-shadow: 0 -10px 50px rgba(0, 0, 0, .15);
|
||
transform: translateY(110%);
|
||
transition: transform .4s;
|
||
overflow: visible;
|
||
}
|
||
.jio-modal-runtime--bottom.jio-badge-modal .jio-modal-runtime__content {
|
||
max-height: calc(100vh - 20px);
|
||
overflow: auto;
|
||
border-radius: inherit;
|
||
}
|
||
.jio-modal-runtime--bottom.jio-badge-modal.is-open .jio-modal-runtime__dialog {
|
||
transform: translateY(0);
|
||
transition: transform .6s cubic-bezier(.28, .9, .34, .99);
|
||
}
|
||
.jio-modal-runtime--bottom.jio-badge-modal .modal-colorful-header {
|
||
border-radius: inherit;
|
||
}
|
||
.jio-badge-modal .touch-close {
|
||
position: absolute;
|
||
top: -24px;
|
||
width: 100%;
|
||
}
|
||
.jio-badge-modal .touch-close::before {
|
||
content: ' ';
|
||
display: block;
|
||
width: 40px;
|
||
height: 4px;
|
||
margin: 15px auto;
|
||
border-radius: 10px;
|
||
background: var(--muted-3-color);
|
||
opacity: .8;
|
||
}
|
||
@media (max-width: 767px) {
|
||
.jio-modal-runtime.jio-badge-modal:not(.jio-badge-modal--single) .jio-modal-runtime__dialog { width: 100%; }
|
||
}
|
||
@media (max-width: 640px) {
|
||
.jio-badge-modal.jio-modal-runtime--bottom.jio-modal-runtime--parent { perspective: 1000px; }
|
||
.jio-modal-runtime.jio-badge-modal.jio-modal-runtime--bottom.jio-modal-runtime--parent.is-open .jio-modal-runtime__dialog {
|
||
transform: rotateX(11deg) scale(.95);
|
||
padding-bottom: 0;
|
||
}
|
||
.jio-modal-runtime.jio-badge-modal--single .jio-modal-runtime__dialog { width: 100%; }
|
||
.jio-modal-runtime--bottom.jio-badge-modal--overview .jio-modal-runtime__dialog {
|
||
max-width: 100%;
|
||
margin-bottom: -1px;
|
||
border-radius: 16px 16px 0 0;
|
||
padding-bottom: env(safe-area-inset-bottom, 0px);
|
||
}
|
||
}
|