kate522
9cb5e7bea3
Make --radius-avatar the single source of truth for frontend user avatar shape. A new primitive in components-ext.css (img.avatar / avatar-mini / avatar-md / avatar-lg / .avatar-img img) forces a circle on every avatar image, which covers the bare avatar-mini in the ban and report modals, the classless img inside the VIP modal's .avatar-img, and the post-card meta avatar that previously depended on post-card.css being enqueued. The user center header frame, the public user home hero and the friends page avatar switch to the same token because route CSS loads after the public bundle and would otherwise override the primitive. The VIP icon no longer rides the avatar corner. The user card widget, the after-article author card and the sign-in modal stop opting into aksrt_get_avatar_box()'s corner badge, and the icon renders first in the badge/level row instead, since aksrt_get_user_name already orders name -> VIP -> auth -> medal -> level. The sign-in modal appends it after the display name and keeps the legacy precedence where a ban badge takes the VIP slot. The user card widget name row now shrinks its display name so the extra icon cannot overflow a narrow sidebar. Verified with the new frontend-avatar-shape-contract test plus post-visual, user-card-runtime, circular-button-icon-margin, user-features and page-display contracts, and php -l on every changed PHP file. The public bundle was rebuilt with tools/build-public-assets.mjs.
291 lines
7.1 KiB
CSS
291 lines
7.1 KiB
CSS
/**
|
||
* AKSRT Main v5 — 博客/个人站完整前端
|
||
*/
|
||
|
||
/* 防止 hero 等使用 100vw / full-bleed 时产生横向滚动条 */
|
||
html,
|
||
body {
|
||
overflow-x: clip;
|
||
}
|
||
|
||
@supports not (overflow-x: clip) {
|
||
html,
|
||
body {
|
||
overflow-x: hidden;
|
||
}
|
||
}
|
||
|
||
/* ========== 阅读进度条（单篇文章顶 fixed）========== */
|
||
.reading-progress-bar {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
height: 3px;
|
||
width: 0%;
|
||
z-index: 9999;
|
||
pointer-events: none;
|
||
background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
|
||
transition: width 0.1s ease-out;
|
||
}
|
||
|
||
/* 折叠 body 内注入的 BOM / 空白文本节点，防止产生多余行高间距 */
|
||
body {
|
||
font-family: var(--font-body);
|
||
font-size: var(--text-base);
|
||
line-height: var(--leading-normal);
|
||
color: var(--color-ink-2);
|
||
background-color: var(--surface-page);
|
||
}
|
||
|
||
/* legacy compat: global link composite transition */
|
||
a[href] {
|
||
transition: color 0.2s, background 0.3s, opacity 0.3s, box-shadow 0.3s, transform 0.3s;
|
||
}
|
||
|
||
/* Font Awesome 5: when legacy markup includes both `fa` and `fab`, the
|
||
* generic Solid rule must not override the Brands font face. */
|
||
.fa.fab {
|
||
font-family: "Font Awesome 5 Brands";
|
||
font-weight: 400;
|
||
}
|
||
|
||
.skip-link {
|
||
position: absolute;
|
||
left: 16px;
|
||
top: 12px;
|
||
z-index: 1100;
|
||
padding: 10px 14px;
|
||
border-radius: 999px;
|
||
background: var(--color-primary);
|
||
color: #fff;
|
||
transform: translateY(-140%);
|
||
transition: transform 0.2s ease;
|
||
}
|
||
|
||
.skip-link:focus {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
/* ========== 站点外壳 ========== */
|
||
.site-wrapper {
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
font-size: var(--text-base);
|
||
line-height: var(--leading-normal);
|
||
}
|
||
|
||
.site-main {
|
||
flex: 1;
|
||
}
|
||
|
||
/* legacy dual-column float math expects a padding-free main.container.
|
||
* Bootstrap 5 also defines .container (max-width ladder + padding-x).
|
||
* Force legacy geometry after Bootstrap so negative-margin sidebars land correctly. */
|
||
.container,
|
||
main.container,
|
||
.site-main.container {
|
||
width: 100%;
|
||
max-width: var(--container, var(--mian-max-width, 1200px));
|
||
margin-right: auto;
|
||
margin-left: auto;
|
||
padding-right: 0;
|
||
padding-left: 0;
|
||
/* Kill Bootstrap 5 --bs-gutter-x padding model on site shells */
|
||
--bs-gutter-x: 0;
|
||
--bs-gutter-y: 0;
|
||
}
|
||
|
||
/* Header multifunc icon cards must align with the main content edges:
|
||
* the global .container is padding-free at >=992px (dual-column float
|
||
* math), so the card container gets no extra gutter either. The
|
||
* <=991.98px media rule below restores 15px for every .container. */
|
||
|
||
/* Header multifunc icon cards: pin typography baseline so cards render
|
||
* identically on all pages. .px12-sm is only defined globally in
|
||
* legacy-utilities.css, which is @import'd by the single-post aggregator;
|
||
* vendor CSS pins it at <=640px / .sidebar / .mobile-nav-widget only. */
|
||
.header-slider-card .icon-cover-card {
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* Keep the header multifunction search stable across route-specific CSS.
|
||
* Some routes load a later .abs-right utility, while the global input focus
|
||
* ring looks like an extra border against this transparent pill field. */
|
||
.header-slider-search .line-form-input:focus,
|
||
.header-slider-search .line-form-input:focus-visible {
|
||
border: 0;
|
||
outline: 0;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.header-slider-search .line-form .abs-right {
|
||
position: absolute;
|
||
right: 0.7em;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
margin-top: 0;
|
||
}
|
||
|
||
@media (min-width: 576px) {
|
||
.container,
|
||
main.container {
|
||
max-width: var(--container, var(--mian-max-width, 1200px));
|
||
}
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
.container,
|
||
main.container {
|
||
max-width: var(--container, var(--mian-max-width, 1200px));
|
||
}
|
||
}
|
||
|
||
@media (min-width: 992px) {
|
||
.container,
|
||
main.container {
|
||
max-width: var(--container, var(--mian-max-width, 1200px));
|
||
}
|
||
}
|
||
|
||
@media (min-width: 1200px) {
|
||
.container,
|
||
main.container {
|
||
max-width: var(--container, var(--mian-max-width, 1200px));
|
||
}
|
||
}
|
||
|
||
@media (min-width: 1240px) {
|
||
.container,
|
||
main.container,
|
||
.fluid-widget-wrap .widget-container {
|
||
width: auto;
|
||
max-width: var(--container, var(--mian-max-width, 1200px));
|
||
}
|
||
}
|
||
|
||
@media (min-width: 1400px) {
|
||
.container,
|
||
main.container {
|
||
max-width: var(--container, var(--mian-max-width, 1200px));
|
||
}
|
||
}
|
||
|
||
/* Soft pad only when the float dual-column is collapsed.
|
||
* Match legacy bootstrap container pad (15px) rather than 10px. */
|
||
@media (max-width: 991.98px) {
|
||
.container,
|
||
main.container {
|
||
padding-right: 15px;
|
||
padding-left: 15px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 767px) {
|
||
.container,
|
||
main.container {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
padding-right: 15px;
|
||
padding-left: 15px;
|
||
}
|
||
}
|
||
|
||
/* ========== User identity inline icons ==========
|
||
* All compact identity marks share one line-height baseline: VIP, level,
|
||
* certification, and worn medals remain visually aligned in every surface.
|
||
*/
|
||
.aksrt-user-level-badge,
|
||
.aksrt-user-level-icon,
|
||
.aksrt-identity-medal,
|
||
.aksrt-identity-certification-icon,
|
||
.aksrt-header-user-medal {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: auto;
|
||
height: 1.1em;
|
||
max-width: 6em;
|
||
object-fit: contain;
|
||
vertical-align: -.15em;
|
||
flex: 0 0 auto;
|
||
box-sizing: border-box;
|
||
}
|
||
.aksrt-user-level-badge {
|
||
padding: 0 .35em;
|
||
font-size: .78em;
|
||
line-height: 1.1;
|
||
white-space: nowrap;
|
||
}
|
||
/* Comment context: keep all identity marks inside the compact author line. */
|
||
.aksrt-identity-medal--comment,
|
||
.aksrt-user-level-icon--comment,
|
||
.aksrt-header-user-medal--comment {
|
||
height: 1em;
|
||
vertical-align: -.12em;
|
||
}
|
||
|
||
/* No-wrap inline name rows — keep the level icon on the same line as the name.
|
||
* The non-standard <name> element (legacy compat) plus .user-name / author-hero /
|
||
* uc-header name rows must not flex-wrap, or the badge drops to a new line.
|
||
* The comment header may still wrap (avatar + name + like can overflow on
|
||
* narrow viewports), so it keeps flex-wrap but the inner <name> never does. */
|
||
.article-avatar name,
|
||
.article-avatar .name,
|
||
.user-name,
|
||
.aksrt-author-hero__name,
|
||
.uc-header__name,
|
||
.aksrt-header-badges {
|
||
flex-wrap: nowrap;
|
||
white-space: nowrap;
|
||
}
|
||
.user-card.author .user-name > name {
|
||
overflow: visible;
|
||
}
|
||
.user-card.author .user-name > name > .display-name,
|
||
.user-card.widget .user-name > name > .display-name {
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.user-card.author .user-name > name > .follow {
|
||
flex-shrink: 0;
|
||
}
|
||
.aksrt-author-hero__name,
|
||
.uc-header__name {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
|
||
.aksrt-author-hero__name-inner {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
min-width: 0;
|
||
}
|
||
|
||
.aksrt-ip-geo-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
min-width: 0;
|
||
margin: 2px 0;
|
||
padding: .3em .6em;
|
||
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(--color-ink-3, #666);
|
||
font-size: .92em;
|
||
line-height: 1.44;
|
||
vertical-align: middle;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
.no-results {
|
||
padding: 48px 20px;
|
||
text-align: center;
|
||
color: var(--color-ink-3);
|
||
}
|