MediaWiki:Homepage.css：修订间差异

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

/* Blockland 百科首页 / 秋季。完整替换 MediaWiki:Homepage.css。
   颜色 → 欢迎区 → 内容布局 → 各组件 → 响应式。
   首页正文请配合「首页.wikitext」。 */
.bw-mainpage {
    --hp-paper: #fff;
    --hp-heading: #f6f3ed;
    --hp-border: #c8c3ba;
    --hp-text: #202122;
    --hp-muted: #54595d;
    --hp-link: #36c;
    --hp-accent: #a34b3f;
    width: 100%; margin: 0; padding: 0; color: var(--hp-text);
    font-size: 14px; line-height: 1.65;
}
html.skin-theme-clientpref-night .bw-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 .bw-mainpage {
        --hp-paper: #202122; --hp-heading: #292724; --hp-border: #56514b;
        --hp-text: #eaecf0; --hp-muted: #c8ccd1; --hp-link: #88a3e8; --hp-accent: #dca18d;
    }
}
.bw-mainpage *, .bw-mainpage *::before, .bw-mainpage *::after { box-sizing: border-box; }
.bw-mainpage a { color: var(--hp-link); }
.bw-mainpage a:hover { text-decoration: underline; }
.bw-mainpage a:focus-visible, .bw-mainpage button:focus-visible { outline: 2px solid var(--hp-link); outline-offset: 2px; }

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

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

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

/* 站外入口：与百科标题栏保持一致。 */
.bw-mainpage .bw-site-links { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 24px 14px; }
.bw-mainpage .bw-site-links a { display: inline-block; padding: 5px 12px; border: 1px solid var(--hp-border); border-radius: 2px; background: var(--hp-heading); font-size: 13px; text-decoration: none; }
.bw-mainpage .bw-site-links a:hover { border-color: var(--hp-accent); text-decoration: underline; }
@media (max-width: 640px) { .bw-mainpage .bw-site-links { padding-left: 16px; padding-right: 16px; } }