kate522andClaude Opus 5
ed38dec314
The public bundle loads after main.min.css, and its bare-element rules
won on equal specificity:
- img { display: block; height: auto } replaced the inline image baseline
the menu relies on (Bootstrap img{vertical-align:middle} + main.css
img{max-height:100%}). Menu glyphs and graphic-card thumbnails were
pulled out of the inline flow, breaking row height and baseline.
Scoped the reset to content and restored the inline baseline inside
.header / .mobile-header.
- html { overflow-x: clip/hidden } made the root a clipping context,
which crops the position:fixed senior mega menu and its drop panels.
The horizontal-overflow guard now lives on body only.
Rebuilt public.css / public.min.css.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
308 lines
7.5 KiB
CSS
308 lines
7.5 KiB
CSS
/**
|
||
* Jio Main v5 — 博客/个人站完整前端
|
||
*/
|
||
|
||
/* 防止 hero 等使用 100vw / full-bleed 时产生横向滚动条。
|
||
*
|
||
* 只在 body 上裁剪：html 一旦建立裁剪上下文，position: fixed 的
|
||
* 导航 mega menu（.sub-menu.senior-submenu）和下拉面板会被一并裁掉。 */
|
||
body {
|
||
overflow-x: clip;
|
||
}
|
||
|
||
@supports not (overflow-x: clip) {
|
||
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;
|
||
}
|
||
|
||
/* FA5's later .fa rule sets 900; keep outline glyphs at their regular weight. */
|
||
.fa.far {
|
||
font-family: "Font Awesome 5 Free";
|
||
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. */
|
||
|
||
/* Let the reference .px12-sm utility apply at its mobile breakpoint only. */
|
||
|
||
/* 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.
|
||
*/
|
||
.jio-user-level-badge,
|
||
.jio-user-level-icon,
|
||
.jio-identity-medal,
|
||
.jio-identity-certification-icon,
|
||
.jio-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;
|
||
}
|
||
.jio-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. */
|
||
.jio-identity-medal--comment,
|
||
.jio-user-level-icon--comment,
|
||
.jio-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,
|
||
.jio-author-hero__name,
|
||
.uc-header__name,
|
||
.jio-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;
|
||
}
|
||
|
||
/* Follow control: the pending request swaps the label for an inline loader
|
||
* and blocks a second submit. The followed state is carried by .actived. */
|
||
[data-jio-follow][aria-disabled="true"] {
|
||
cursor: no-drop;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
[data-jio-follow][aria-disabled="true"]:hover {
|
||
opacity: 0.6;
|
||
}
|
||
|
||
[data-jio-follow] .loading {
|
||
vertical-align: -0.1em;
|
||
}
|
||
|
||
.jio-author-hero__name,
|
||
.uc-header__name {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
|
||
.jio-author-hero__name-inner {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
min-width: 0;
|
||
}
|
||
|
||
.jio-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);
|
||
}
|