MediaWiki:Homepage.css：修订间差异

2026年10月1日 (四) 12:42的版本

/* Blockland 百科首页 / 秋季。完整替换 MediaWiki:Homepage.css。
   颜色 → 欢迎区 → 内容布局 → 各组件 → 响应式。
   首页正文请配合「首页.wikitext」。 */
.bl-mainpage {
    --hp-paper: var(--color-surface-1, #fff);
    --hp-heading: color-mix(in srgb, var(--color-surface-2, #fff) 93%, #ad8b50);
    --hp-border: var(--color-border, #c8c3ba);
    --hp-text: var(--color-base, #202122);
    --hp-muted: var(--color-base--subtle, #54595d);
    --hp-link: var(--color-primary, #36c);
    --hp-accent: #aa6554;
    width: 100%; margin: 0; padding: 0; color: var(--hp-text);
    font-family: inherit; font-size: inherit; line-height: 1.75;
}
html.skin-theme-clientpref-night .bl-mainpage {
    --hp-paper: #202122; --hp-heading: #292724; --hp-border: #56514b;
    --hp-text: #eaecf0; --hp-muted: #c8ccd1; --hp-link: #88a3e8; --hp-accent: #dca18d;
}
@media (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os .bl-mainpage {
        --hp-paper: #202122; --hp-heading: #292724; --hp-border: #56514b;
        --hp-text: #eaecf0; --hp-muted: #c8ccd1; --hp-link: #88a3e8; --hp-accent: #dca18d;
    }
}
.bl-mainpage *, .bl-mainpage *::before, .bl-mainpage *::after { box-sizing: border-box; }
.bl-mainpage a { color: var(--hp-link); }
.bl-mainpage a:hover { text-decoration: underline; }
.bl-mainpage a:focus-visible, .bl-mainpage button:focus-visible { outline: 2px solid var(--hp-link); outline-offset: 2px; }

/* 欢迎区：正文和声明分开，保留整活文案 */
.bl-mainpage .bl-hero { margin-bottom: 18px; }
.bl-mainpage .bl-hero-inner { display: flex; align-items: center; gap: 20px; padding: 20px 24px 12px; }
.bl-mainpage .bl-mascot { flex: 0 0 100px; }
.bl-mainpage .bl-mascot img { display: block; max-width: 100%; height: auto; }
.bl-mainpage .bl-hero-text { flex: 1; min-width: 0; }
.bl-mainpage .bl-hero-title { font-size: 1.75em; font-weight: 600; line-height: 1.3; margin-bottom: 8px; color: var(--hp-text); }
.bl-mainpage .bl-hero-desc { font-size: .95em; color: var(--hp-muted); }
.bl-mainpage .bl-home-notices { margin: 0 24px 14px; border-left: 3px solid #c9ab62; padding-left: 12px; font-size: .875em; color: var(--hp-muted); }
.bl-mainpage .bl-home-notices p { margin: 5px 0; }
.bl-mainpage .bl-hero-search { padding: 0 24px; }
.bl-mainpage .bl-hero-search-form { display: flex; gap: 6px; align-items: center; margin: 0; }
.bl-mainpage .bl-hero-search-input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--hp-border); border-radius: 2px; background: var(--hp-paper); color: var(--hp-text); font: inherit; }
.bl-mainpage .bl-hero-search-btn, .bl-mainpage .bl-hero-create-btn { padding: 8px 12px; border: 1px solid var(--hp-border); border-radius: 2px; background: var(--hp-heading); color: var(--hp-text); font: inherit; font-size: .875em; text-decoration: none; white-space: nowrap; cursor: pointer; }
.bl-mainpage .bl-hero-search-input:focus { outline: 2px solid var(--hp-link); outline-offset: -2px; }
.bl-mainpage .bl-hero-search-btn:hover, .bl-mainpage .bl-hero-create-btn:hover { border-color: var(--hp-muted); }
.bl-mainpage .bl-hero-stats { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 12px 24px 16px; }
.bl-mainpage .bl-hero-stat { display: flex; align-items: baseline; gap: 5px; }
.bl-mainpage .bl-hero-stat-info { display: flex; align-items: baseline; gap: 5px; }
.bl-mainpage .bl-hero-stat-icon { display: none; }
.bl-mainpage .bl-hero-stat-number { font-size: 1em; font-weight: 700; font-variant-numeric: tabular-nums; }
.bl-mainpage .bl-hero-stat-label { font-size: .875em; color: var(--hp-muted); }

/* 百科双栏：主栏约 2/3，侧栏约 1/3 */
.bl-mainpage .bl-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); grid-template-areas: "main side"; gap: 16px; align-items: start; }
.bl-mainpage .bl-maincol { grid-area: main; }
.bl-mainpage .bl-sidecol { grid-area: side; }
.bl-mainpage .bl-maincol, .bl-mainpage .bl-sidecol { min-width: 0; }
.bl-mainpage .bl-box { border: 1px solid var(--hp-border); margin-bottom: 16px; background: var(--hp-paper); }
.bl-mainpage .bl-box-header { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-bottom: 1px solid var(--hp-border); background: var(--hp-heading); }
.bl-mainpage .bl-box-title { flex: 1; font-size: 1.1em; font-weight: 600; color: var(--hp-text); }
.bl-mainpage .bl-box-icon { font-size: 1.1em; color: var(--hp-accent); }
.bl-mainpage .bl-box-badge { display: none; }
.bl-mainpage .bl-box-more, .bl-mainpage .bl-box-more-wrap { font-size: .875em; }
.bl-mainpage .bl-box-body { padding: 12px 14px; }
.bl-mainpage .bl-box-map iframe { display: block; width: 100%; border: 0; }
.bl-mainpage .bl-box-body p { color: var(--hp-muted); }
.bl-mainpage .bl-news-scroll { max-height: 320px; overflow-y: auto; }
.bl-mainpage .bl-news-item { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--hp-border); }
.bl-mainpage .bl-news-item:last-child { border-bottom: 0; }
.bl-mainpage .bl-news-date { flex: 0 0 80px; color: var(--hp-muted); font-size: .875em; }
.bl-mainpage .bl-news-text { flex: 1; min-width: 0; font-size: .95em; overflow-wrap: anywhere; }
.bl-mainpage .bl-featured-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.bl-mainpage .bl-featured { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* 等高图片：统一 4:3，裁切边缘而不拉伸。 */
.bl-mainpage .bl-featured-img { aspect-ratio: 4 / 3; overflow: hidden; }
.bl-mainpage .bl-featured-img > span,
.bl-mainpage .bl-featured-img a { display: block; width: 100%; height: 100%; }
.bl-mainpage .bl-featured-img img { width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }
.bl-mainpage .bl-featured-title { font-size: 1.1em; font-weight: 600; }
.bl-mainpage .bl-featured-desc { font-size: .95em; color: var(--hp-text); line-height: 1.8; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; max-height: 7.2em; overflow: hidden; }
.bl-mainpage .bl-featured-link { margin-top: auto; font-size: .875em; }
.bl-mainpage .bl-box-picture img { max-width: 100%; height: auto; }
.bl-mainpage .bl-picture-container { color: var(--hp-muted); font-size: .875em; margin-top: 8px; }
.bl-mainpage .bl-list-trivia { list-style: disc; padding-left: 20px; margin: 0; }
.bl-mainpage .bl-list-trivia li { margin: 8px 0; padding: 0; }
.bl-mainpage .bl-trivia-marker { display: none; }
.bl-mainpage .bl-trivia-text { font-size: .95em; }
.bl-mainpage .bl-navgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; }
.bl-mainpage .bl-navitem { font-size: .95em; padding: 3px 0; }
.bl-mainpage .bl-upload-action { display: flex; align-items: center; gap: 8px; font-size: .95em; }
.bl-mainpage .bl-upload-action span { flex: 1; }
.bl-mainpage .bl-recent-list { font-size: .875em; line-height: 1.8; overflow-wrap: anywhere; }
.bl-mainpage .bl-recent-list ul { margin: 0; padding-left: 18px; }
.bl-mainpage .bl-rec-item { padding: 8px 0; }
.bl-mainpage .bl-rec-name { font-size: 1em; font-weight: 600; }
.bl-mainpage .bl-rec-desc { font-size: .875em; color: var(--hp-muted); }
.bl-mainpage .bl-team-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 10px; }
.bl-mainpage .bl-team-card { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center; }
.bl-mainpage .bl-team-avatar { width: 44px; height: 44px; overflow: hidden; border-radius: 50%; flex-shrink: 0; }
.bl-mainpage .bl-team-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bl-mainpage .bl-team-name { font-size: .875em; font-weight: 600; overflow-wrap: anywhere; }
.bl-mainpage .bl-team-tag, .bl-mainpage .bl-team-social { font-size: .8em; color: var(--hp-muted); }

/* 手机布局：保持阅读顺序，不强行挤双栏 */
@media (max-width: 640px) {
    .bl-mainpage .bl-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "side"; }
    .bl-mainpage .bl-hero-inner { padding: 16px; gap: 14px; }
    .bl-mainpage .bl-home-notices { margin-left: 16px; margin-right: 16px; }
    .bl-mainpage .bl-hero-search { padding: 0 16px; }
    .bl-mainpage .bl-hero-stats { padding: 12px 16px; }
}
@media (max-width: 520px) {
    .bl-mainpage .bl-mascot { flex-basis: 65px; }
    .bl-mainpage .bl-hero-title { font-size: 1.45em; }
    .bl-mainpage .bl-hero-search-form { flex-wrap: wrap; }
    .bl-mainpage .bl-hero-search-input { flex-basis: 100%; }
    .bl-mainpage .bl-hero-search-btn, .bl-mainpage .bl-hero-create-btn { flex: 1; text-align: center; }
    .bl-mainpage .bl-featured-grid { grid-template-columns: minmax(0, 1fr); }
    .bl-mainpage .bl-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bl-mainpage .bl-news-item { flex-direction: column; gap: 2px; }
    .bl-mainpage .bl-news-date { flex: auto; }
    }


/* 秋季装饰：霜红、麦金、灰褐；Citizen 保留背景图与交互效果。 */
.bl-mainpage { --bl-autumn-red: #aa6554; --bl-autumn-gold: #ad8b50; --bl-autumn-taupe: #887c6c; }
.bl-mainpage .bl-box-header { border-left: 3px solid var(--bl-autumn-gold); }
.bl-mainpage .bl-box:nth-child(2n) .bl-box-header { border-left-color: var(--bl-autumn-red); }
/* 轻量站外入口：细线、短说明，沿用 Citizen 文字和表面颜色。 */
.bl-mainpage .bl-autumn-portals { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; padding: 0 24px 18px; }
.bl-mainpage a.bl-autumn-portal {
    display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 3px 8px;
    padding: 11px 14px; min-width: 0; border: 1px solid var(--color-border,#c8c3ba);
    border-top: 2px solid var(--bl-autumn-taupe); border-radius: 9px;
    color: var(--color-base,#202122); background-color: transparent;
    text-decoration: none; transition: border-color .18s ease, background-color .18s ease;
}
.bl-mainpage a.bl-autumn-portal:nth-child(2n) { border-top-color: var(--bl-autumn-gold); }
.bl-mainpage a.bl-autumn-portal:hover { border-color: var(--bl-autumn-red); background-color: var(--color-surface-2,rgba(136,124,108,.08)); text-decoration: none; }
.bl-mainpage a.bl-autumn-portal:focus-visible { outline: 2px solid var(--color-primary,#36c); outline-offset: 3px; }
.bl-mainpage .bl-autumn-portal-label { font-size: .95em; font-weight: 600; }
.bl-mainpage .bl-autumn-portal-note { grid-column: 1; font-size: .8em; color: var(--color-base--subtle,#72777d); }
.bl-mainpage .bl-autumn-portal-arrow { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--bl-autumn-gold); }
@media (max-width: 900px) { .bl-mainpage .bl-autumn-portals { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 640px) { .bl-mainpage .bl-autumn-portals { padding-left: 16px; padding-right: 16px; } }
@media (prefers-reduced-motion: reduce) { .bl-mainpage a.bl-autumn-portal { transition: none; } }

/* ===== Citizen 圆角与玻璃表面：仅修饰，不改上一版布局 ===== */
.bl-mainpage { --hp-radius: var(--border-radius--medium, 12px); }
.bl-mainpage .bl-box {
    border-radius: var(--hp-radius);
    overflow: hidden;
    background: var(--color-surface-1, #fff);
    background-color: color-mix(in srgb, var(--color-surface-1, #fff) 76%, transparent) !important;
    backdrop-filter: blur(12px) saturate(110%);
    -webkit-backdrop-filter: blur(12px) saturate(110%);
}
.bl-mainpage .bl-box-header {
    background: var(--color-surface-2, #f6f3ed);
    background-color: color-mix(in srgb, var(--color-surface-2, #f6f3ed) 62%, transparent) !important;
}
.bl-mainpage .bl-box-body { background: transparent; }
.bl-mainpage .bl-featured-img { border-radius: var(--border-radius--small, 8px); }
.bl-mainpage .bl-hero-search-input,
.bl-mainpage .bl-hero-search-btn,
.bl-mainpage .bl-hero-create-btn { border-radius: var(--border-radius--medium, 10px); }
.bl-mainpage .bl-hero-search-btn,
.bl-mainpage .bl-hero-create-btn { transition: background-color .18s ease, border-color .18s ease; }
.bl-mainpage .bl-upload-action { padding: 8px 10px; border-radius: var(--border-radius--medium, 10px); }
.bl-mainpage .bl-upload-action:hover { background-color: var(--color-surface-2, #f6f3ed); }
.bl-mainpage .bl-navitem { border-radius: var(--border-radius--small, 8px); }
/* 四行描述和图像裁切仍由上面的规则控制。 */
/* 尊重 Citizen 性能模式：使用实体表面，不启用模糊。 */
html.citizen-feature-performance-mode-clientpref-1 .bl-mainpage .bl-box,
html.citizen-feature-performance-mode-clientpref-1 .bl-mainpage .bl-box-header {
    background-color: var(--color-surface-1, #fff) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
@media (prefers-reduced-motion: reduce) {
    .bl-mainpage .bl-hero-search-btn,
    .bl-mainpage .bl-hero-create-btn { transition: none; }
}