MediaWiki:Common.css:修订间差异
外观
无编辑摘要 |
无编辑摘要 |
||
| 第35行: | 第35行: | ||
} | } | ||
/* ✅ | /* ✅ 最外层包装容器(灰框罪魁祸首) */ | ||
body.page-Main_Page .vector-page-container { | body.page-Main_Page .vector-page-container { | ||
padding: 0 !important; | padding: 0 !important; | ||
| 第44行: | 第44行: | ||
} | } | ||
/* ✅ | /* ✅ 内容区真正贴到顶部 */ | ||
body.page-Main_Page .mw-parser-output { | body.page-Main_Page .mw-parser-output { | ||
margin-top: 0 !important; | margin-top: 0 !important; | ||
padding-top: 0 !important; | padding-top: 0 !important; | ||
} | |||
/**************************************************** | |||
* ✅ 以下是 UI 美化部分(企鹅可爱风) | |||
* ✅ 不影响你修复的白底结构 | |||
****************************************************/ | |||
/* =============================== | |||
✅ 顶部渐变 Header(冰蓝动漫风) | |||
=============================== */ | |||
.pg-hero { | |||
width: 100%; | |||
padding: 64px 20px 72px; | |||
background: linear-gradient(135deg, #e6f5ff, #f3faff, #eaf6ff); | |||
text-align: center; | |||
border-bottom: 1px solid rgba(0,0,0,0.05); | |||
} | |||
.pg-hero__logo { | |||
padding: 20px; | |||
background: white; | |||
display: inline-block; | |||
border-radius: 22px; | |||
box-shadow: 0 6px 18px rgba(0,0,0,.08); | |||
margin-bottom: 18px; | |||
} | |||
.pg-hero__title { | |||
font-size: 42px; | |||
font-weight: 800; | |||
color: #1b4d7a; | |||
} | |||
.pg-hero__subtitle { | |||
margin-top: 12px; | |||
font-size: 17px; | |||
color: #324a63; | |||
line-height: 1.9; | |||
} | |||
.pg-hero__prints { | |||
margin-top: 12px; | |||
font-size: 22px; | |||
} | |||
/**************************************************** | |||
* ✅ 核心导航(卡片风) | |||
****************************************************/ | |||
.pg-grid { | |||
display: grid; | |||
grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); | |||
gap: 20px; | |||
padding: 24px 12px; | |||
max-width: 1100px; | |||
margin: 0 auto; | |||
} | |||
.pg-card { | |||
background: #ffffff; | |||
border-radius: 20px; | |||
padding: 20px; | |||
text-align: center; | |||
box-shadow: 0 4px 14px rgba(0,0,0,.06); | |||
transition: .25s; | |||
} | |||
.pg-card:hover { | |||
transform: translateY(-4px); | |||
box-shadow: 0 8px 24px rgba(0,0,0,.12); | |||
} | |||
.pg-card__icon { | |||
font-size: 30px; | |||
margin-bottom: 8px; | |||
} | |||
.pg-card__title { | |||
font-size: 20px; | |||
font-weight: 800; | |||
color: #1c4c7c; | |||
} | |||
.pg-card__desc { | |||
margin: 6px 0 12px; | |||
color: #5c6a78; | |||
} | |||
.pg-card__link { | |||
font-weight: bold; | |||
color: #007ecc !important; | |||
} | |||
/**************************************************** | |||
* ✅ 新番推荐 Gallery(平图专业风) | |||
****************************************************/ | |||
.pg-gallery { | |||
display: grid; | |||
grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); | |||
gap: 22px; | |||
padding: 12px; | |||
max-width: 1100px; | |||
margin: 0 auto 20px; | |||
} | |||
.pg-cover { | |||
text-align: center; | |||
} | |||
.pg-cover__title { | |||
margin-top: 8px; | |||
font-weight: 700; | |||
font-size: 16px; | |||
color: #34495e; | |||
} | |||
/**************************************************** | |||
* ✅ 关于本站 | |||
****************************************************/ | |||
.pg-about { | |||
max-width: 900px; | |||
margin: 20px auto 50px; | |||
padding: 0 12px; | |||
font-size: 16px; | |||
line-height: 1.9; | |||
color: #34495e; | |||
} | |||
/**************************************************** | |||
* ✅ 手机端适配 | |||
****************************************************/ | |||
@media(max-width:600px){ | |||
.pg-hero__title { font-size: 30px; } | |||
.pg-hero__subtitle { font-size: 15px; } | |||
} | } | ||
2025年11月7日 (五) 16:24的版本
/****************************************************
* ✅ 修复首页顶部灰色大框 / padding 异常
* ✅ 适用于 Vector-2022
****************************************************/
/* ✅(最关键)阻止首页第一段被误解析成 <pre> 并生成灰框 */
body.page-Main_Page pre,
body.page-Main_Page pre.mw-code {
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
box-shadow: none !important;
white-space: normal !important;
overflow-x: visible !important;
}
/* ✅ 禁止 Vector-2022 为首页自动加的外层 padding 框 */
body.page-Main_Page .vector-feature-main,
body.page-Main_Page .vector-feature-body,
body.page-Main_Page .vector-main-container,
body.page-Main_Page .vector-content-container,
body.page-Main_Page .vector-sticky-header-container,
body.page-Main_Page .vector-page-toolbar,
body.page-Main_Page .vector-feature-container,
body.page-Main_Page .vector-body,
body.page-Main_Page #content,
body.page-Main_Page .mw-body,
body.page-Main_Page .mw-body-content {
padding: 0 !important;
margin: 0 !important;
background: #ffffff !important; /* 纯白,不要灰色 */
border: none !important;
box-shadow: none !important;
}
/* ✅ 最外层包装容器(灰框罪魁祸首) */
body.page-Main_Page .vector-page-container {
padding: 0 !important;
margin: 0 !important;
background: #ffffff !important;
border: none !important;
box-shadow: none !important;
}
/* ✅ 内容区真正贴到顶部 */
body.page-Main_Page .mw-parser-output {
margin-top: 0 !important;
padding-top: 0 !important;
}
/****************************************************
* ✅ 以下是 UI 美化部分(企鹅可爱风)
* ✅ 不影响你修复的白底结构
****************************************************/
/* ===============================
✅ 顶部渐变 Header(冰蓝动漫风)
=============================== */
.pg-hero {
width: 100%;
padding: 64px 20px 72px;
background: linear-gradient(135deg, #e6f5ff, #f3faff, #eaf6ff);
text-align: center;
border-bottom: 1px solid rgba(0,0,0,0.05);
}
.pg-hero__logo {
padding: 20px;
background: white;
display: inline-block;
border-radius: 22px;
box-shadow: 0 6px 18px rgba(0,0,0,.08);
margin-bottom: 18px;
}
.pg-hero__title {
font-size: 42px;
font-weight: 800;
color: #1b4d7a;
}
.pg-hero__subtitle {
margin-top: 12px;
font-size: 17px;
color: #324a63;
line-height: 1.9;
}
.pg-hero__prints {
margin-top: 12px;
font-size: 22px;
}
/****************************************************
* ✅ 核心导航(卡片风)
****************************************************/
.pg-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px,1fr));
gap: 20px;
padding: 24px 12px;
max-width: 1100px;
margin: 0 auto;
}
.pg-card {
background: #ffffff;
border-radius: 20px;
padding: 20px;
text-align: center;
box-shadow: 0 4px 14px rgba(0,0,0,.06);
transition: .25s;
}
.pg-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.pg-card__icon {
font-size: 30px;
margin-bottom: 8px;
}
.pg-card__title {
font-size: 20px;
font-weight: 800;
color: #1c4c7c;
}
.pg-card__desc {
margin: 6px 0 12px;
color: #5c6a78;
}
.pg-card__link {
font-weight: bold;
color: #007ecc !important;
}
/****************************************************
* ✅ 新番推荐 Gallery(平图专业风)
****************************************************/
.pg-gallery {
display: grid;
grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
gap: 22px;
padding: 12px;
max-width: 1100px;
margin: 0 auto 20px;
}
.pg-cover {
text-align: center;
}
.pg-cover__title {
margin-top: 8px;
font-weight: 700;
font-size: 16px;
color: #34495e;
}
/****************************************************
* ✅ 关于本站
****************************************************/
.pg-about {
max-width: 900px;
margin: 20px auto 50px;
padding: 0 12px;
font-size: 16px;
line-height: 1.9;
color: #34495e;
}
/****************************************************
* ✅ 手机端适配
****************************************************/
@media(max-width:600px){
.pg-hero__title { font-size: 30px; }
.pg-hero__subtitle { font-size: 15px; }
}