查看“︁MediaWiki:Homepage.css”︁的源代码

/* Blockland 百科首页 / 秋季。完整替换 MediaWiki:Homepage.css。
   颜色 → 欢迎区 → 内容布局 → 各组件 → 响应式。
   首页正文请配合「首页-百科秋季版.wikitext」。 */
.bl-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 .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 { border: 1px solid var(--hp-border); background: var(--hp-paper); margin-bottom: 16px; }
.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: 28px; font-weight: 500; line-height: 1.3; margin-bottom: 8px; color: var(--hp-text); }
.bl-mainpage .bl-hero-desc { font-size: 13px; color: var(--hp-muted); }
.bl-mainpage .bl-home-notices { margin: 0 24px 14px; border-left: 3px solid #c9ab62; padding-left: 12px; font-size: 12px; 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: 12px; 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: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bl-mainpage .bl-hero-stat-label { font-size: 12px; color: var(--hp-muted); }

/* 百科双栏：主栏约 2/3，侧栏约 1/3 */
.bl-mainpage .bl-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); gap: 16px; align-items: start; }
.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: 17px; font-weight: 600; color: var(--hp-text); }
.bl-mainpage .bl-box-icon { font-size: 17px; color: var(--hp-accent); }
.bl-mainpage .bl-box-badge { display: none; }
.bl-mainpage .bl-box-more, .bl-mainpage .bl-box-more-wrap { font-size: 12px; }
.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: 12px; }
.bl-mainpage .bl-news-text { flex: 1; min-width: 0; font-size: 13px; 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; }
.bl-mainpage .bl-featured-img img { width: 100%; height: auto; display: block; }
.bl-mainpage .bl-featured-title { font-size: 17px; font-weight: 600; }
.bl-mainpage .bl-featured-desc { font-size: 13px; color: var(--hp-text); line-height: 1.8; }
.bl-mainpage .bl-featured-link { margin-top: auto; font-size: 12px; }
.bl-mainpage .bl-box-picture img { max-width: 100%; height: auto; }
.bl-mainpage .bl-picture-container { color: var(--hp-muted); font-size: 12px; 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: 13px; }
.bl-mainpage .bl-navgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; }
.bl-mainpage .bl-navitem { font-size: 13px; padding: 3px 0; }
.bl-mainpage .bl-upload-action { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.bl-mainpage .bl-upload-action span { flex: 1; }
.bl-mainpage .bl-recent-list { font-size: 12px; 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: 14px; font-weight: 600; }
.bl-mainpage .bl-rec-desc { font-size: 12px; 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: 12px; font-weight: 600; overflow-wrap: anywhere; }
.bl-mainpage .bl-team-tag, .bl-mainpage .bl-team-social { font-size: 11px; color: var(--hp-muted); }
.bl-mainpage .bl-box-donors .bl-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bl-mainpage .bl-box-donors .bl-team-card { flex-direction: row; text-align: left; gap: 8px; }
.bl-mainpage .bl-box-donors .bl-team-avatar { width: 28px; height: 28px; }

/* 手机布局：保持阅读顺序，不强行挤双栏 */
@media (max-width: 800px) {
    .bl-mainpage .bl-grid { grid-template-columns: minmax(0, 1fr); }
    .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: 23px; }
    .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; }
    .bl-mainpage .bl-box-donors .bl-team-grid { grid-template-columns: minmax(0, 1fr); }
}