MediaWiki:Common.css:修订间差异
外观
无编辑摘要 |
无编辑摘要 |
||
| 第1行: | 第1行: | ||
/**************************************************** | /**************************************************** | ||
* ✅ | * ✅ 次元企鹅百科 v5.1 UI 主题样式 | ||
* | * 顶部渐变 + 白卡片 + 企鹅轻萌风 | ||
****************************************************/ | ****************************************************/ | ||
/* | /* =============== 顶部 Header 渐变背景 =============== */ | ||
.pg-header { | |||
width: 100%; | |||
background: linear-gradient(180deg, #e9f4ff 0%, #ffffff 80%); | |||
padding: 50px 0 60px; | |||
text-align: center; | |||
border-radius: 0 0 22px 22px; | |||
box-shadow: 0 4px 12px rgba(0,0,0,0.06); | |||
margin-bottom: 30px; | |||
margin | |||
} | } | ||
.pg-header__inner { | |||
max-width: 900px; | |||
margin: 0 auto; | |||
} | } | ||
/* LOGO 卡片 */ | |||
.pg-header__logo { | |||
/* | background: #fff; | ||
display: inline-block; | |||
padding: 14px 28px; | |||
border-radius: 18px; | |||
box-shadow: 0 4px 14px rgba(0,0,0,0.08); | |||
margin-bottom: 18px; | |||
.pg- | |||
} | } | ||
.pg- | /* 主标题 */ | ||
.pg-header__title { | |||
font-size: 42px; | |||
font-weight: 800; | |||
color: #195a8d; | |||
margin: 12px 0; | |||
} | } | ||
.pg- | /* 副标题 */ | ||
.pg-header__subtitle { | |||
color: #2b3a55; | |||
font-size: 18px; | |||
line-height: 1.8; | |||
max-width: 750px; | |||
margin: 0 auto; | |||
} | } | ||
.pg- | /* 脚印动画 */ | ||
.pg-header__prints { | |||
margin-top: 16px; | |||
font-size: 20px; | |||
animation: pawFade 3.2s ease-in-out infinite; | |||
} | } | ||
@keyframes pawFade { | |||
0%,100% { opacity: 0.2; } | |||
50% { opacity: 1; } | |||
} | } | ||
/* | /* =============== 核心导航卡片 =============== */ | ||
.pg-grid { | .pg-grid { | ||
display: grid; | |||
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); | |||
gap: 20px; | |||
max-width: 1100px; | |||
margin: 20px auto; | |||
padding: 0 15px; | |||
} | } | ||
.pg-card { | .pg-card { | ||
background: #ffffff; | |||
padding: 20px 18px; | |||
border-radius: 20px; | |||
box-shadow: 0 4px 14px rgba(0,0,0,0.06); | |||
text-align: center; | |||
transition: .25s ease; | |||
} | } | ||
.pg-card:hover { | .pg-card:hover { | ||
transform: translateY(-6px); | |||
box-shadow: 0 10px 32px rgba(0,0,0,0.12); | |||
} | } | ||
.pg-card__icon { | .pg-card__icon { font-size: 32px; } | ||
.pg-card__title { font-size: 20px; font-weight: 800; color: #185480; } | |||
.pg-card__desc { margin-top: 6px; color: #67727e; font-size: 14.8px; } | |||
} | .pg-card__link { margin-top: 10px; color: #007bba !important; font-weight: 700; } | ||
.pg- | /* =============== 新番推荐区 =============== */ | ||
.pg-gallery { | |||
display: grid; | |||
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); | |||
gap: 20px; | |||
max-width: 1100px; | |||
margin: 25px auto; | |||
padding: 0 15px; | |||
} | } | ||
.pg-cover img { | |||
border-radius: 16px !important; | |||
transition: .25s ease; | |||
.pg- | |||
} | } | ||
.pg-cover { | .pg-cover img:hover { | ||
transform: scale(1.04); | |||
box-shadow: 0 8px 22px rgba(0,0,0,0.15); | |||
} | } | ||
.pg-cover__title { | .pg-cover__title { | ||
text-align: center; | |||
margin-top: 8px; | |||
font-weight: 700; | |||
color: #2d3e50; | |||
} | } | ||
/* | /* =============== 关于本站 =============== */ | ||
.pg-about { | .pg-about { | ||
max-width: 900px; | |||
margin: 30px auto 60px; | |||
padding: 20px 10px; | |||
color: #333; | |||
font-size: 16px; | |||
line-height: 1.9; | |||
} | } | ||
/** | /* =============== 首页外框去灰色 =============== */ | ||
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 #content, | |||
body.page-Main_Page .mw-body, | |||
body.page-Main_Page .mw-body-content { | |||
background: transparent !important; | |||
padding: 0 !important; | |||
margin: 0 !important; | |||
border: none !important; | |||
box-shadow: none !important; | |||
} | |||
/* 防止首页第一段被解析成 pre */ | |||
body.page-Main_Page pre { | |||
white-space: normal !important; | |||
background: transparent !important; | |||
padding: 0 !important; | |||
border: none !important; | |||
} | } | ||
2025年11月7日 (五) 16:29的版本
/****************************************************
* ✅ 次元企鹅百科 v5.1 UI 主题样式
* 顶部渐变 + 白卡片 + 企鹅轻萌风
****************************************************/
/* =============== 顶部 Header 渐变背景 =============== */
.pg-header {
width: 100%;
background: linear-gradient(180deg, #e9f4ff 0%, #ffffff 80%);
padding: 50px 0 60px;
text-align: center;
border-radius: 0 0 22px 22px;
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
margin-bottom: 30px;
}
.pg-header__inner {
max-width: 900px;
margin: 0 auto;
}
/* LOGO 卡片 */
.pg-header__logo {
background: #fff;
display: inline-block;
padding: 14px 28px;
border-radius: 18px;
box-shadow: 0 4px 14px rgba(0,0,0,0.08);
margin-bottom: 18px;
}
/* 主标题 */
.pg-header__title {
font-size: 42px;
font-weight: 800;
color: #195a8d;
margin: 12px 0;
}
/* 副标题 */
.pg-header__subtitle {
color: #2b3a55;
font-size: 18px;
line-height: 1.8;
max-width: 750px;
margin: 0 auto;
}
/* 脚印动画 */
.pg-header__prints {
margin-top: 16px;
font-size: 20px;
animation: pawFade 3.2s ease-in-out infinite;
}
@keyframes pawFade {
0%,100% { opacity: 0.2; }
50% { opacity: 1; }
}
/* =============== 核心导航卡片 =============== */
.pg-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 20px;
max-width: 1100px;
margin: 20px auto;
padding: 0 15px;
}
.pg-card {
background: #ffffff;
padding: 20px 18px;
border-radius: 20px;
box-shadow: 0 4px 14px rgba(0,0,0,0.06);
text-align: center;
transition: .25s ease;
}
.pg-card:hover {
transform: translateY(-6px);
box-shadow: 0 10px 32px rgba(0,0,0,0.12);
}
.pg-card__icon { font-size: 32px; }
.pg-card__title { font-size: 20px; font-weight: 800; color: #185480; }
.pg-card__desc { margin-top: 6px; color: #67727e; font-size: 14.8px; }
.pg-card__link { margin-top: 10px; color: #007bba !important; font-weight: 700; }
/* =============== 新番推荐区 =============== */
.pg-gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 20px;
max-width: 1100px;
margin: 25px auto;
padding: 0 15px;
}
.pg-cover img {
border-radius: 16px !important;
transition: .25s ease;
}
.pg-cover img:hover {
transform: scale(1.04);
box-shadow: 0 8px 22px rgba(0,0,0,0.15);
}
.pg-cover__title {
text-align: center;
margin-top: 8px;
font-weight: 700;
color: #2d3e50;
}
/* =============== 关于本站 =============== */
.pg-about {
max-width: 900px;
margin: 30px auto 60px;
padding: 20px 10px;
color: #333;
font-size: 16px;
line-height: 1.9;
}
/* =============== 首页外框去灰色 =============== */
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 #content,
body.page-Main_Page .mw-body,
body.page-Main_Page .mw-body-content {
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
box-shadow: none !important;
}
/* 防止首页第一段被解析成 pre */
body.page-Main_Page pre {
white-space: normal !important;
background: transparent !important;
padding: 0 !important;
border: none !important;
}