跳转到内容

MediaWiki:Common.css

来自次元企鹅情报局百科
Admin留言 | 贡献2025年11月7日 (五) 15:23的版本

注意:在发布之后,您可能需要清除浏览器缓存才能看到所作出的更改的影响。

  • Firefox或Safari:按住Shift的同时单击刷新,或按Ctrl-F5Ctrl-R(Mac为⌘-R
  • Google Chrome:Ctrl-Shift-R(Mac为⌘-Shift-R
  • Edge:按住Ctrl的同时单击刷新,或按Ctrl-F5
/****************************************************
 * ✅ Penguin Cute UI — Final Clean Version
 * ✅ 首页全白框清爽版(去掉灰背景 / 灰边)
 ****************************************************/

/* 顶部 LOGO 区域:白色卡片 + 阴影 */
.pg-hero {
  width: 100%;
  padding: 64px 20px 72px;
  background: #ffffff !important;
  border-radius: 18px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  text-align: center;
  box-sizing: border-box;
  position: relative;
}

.pg-hero__logo {
  margin: 0 0 18px;
  background: #ffffff;
  padding: 12px 20px;
  border-radius: 14px;
  display: inline-block;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  animation: pg-float 6s ease-in-out infinite;
}

.pg-hero__title {
  font-size: 44px;
  font-weight: 800;
  color: #1b4d7a;
  letter-spacing: .5px;
  margin-bottom: 10px;
}

.pg-hero__subtitle {
  font-size: 18px;
  color: #2b2d42;
  line-height: 1.85;
  max-width: 860px;
  margin: 0 auto;
}

/* ✅ Logo 漂浮动画 */
@keyframes pg-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}


/****************************************************
 * ✅ 首页主介绍区域(主框白色)
 ****************************************************/
body.page-Main_Page .mw-parser-output > div {
  background: #ffffff !important;
  border: 1px solid #ddd !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
  padding: 25px !important;
  margin: 25px 0 !important;
}

body.page-Main_Page h1, 
body.page-Main_Page h2 {
  color: #174b75 !important;
}


/****************************************************
 * ✅ 首页导航卡片(企鹅风)
 ****************************************************/
.pg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  padding: 12px 2px 26px;
  max-width: 1100px;
  margin: 0 auto;
}

.pg-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 18px 18px 16px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  transition: .2s ease;
  text-align: center;
}

.pg-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10);
}

.pg-card__icon {
  font-size: 28px; 
  margin-bottom: 8px;
}

.pg-card__title {
  font-size: 19px; 
  font-weight: 800; 
  color: #1b4d7a;
}

.pg-card__desc {
  margin: 6px 0 10px; 
  color: #54606f; 
  font-size: 14.5px;
}

.pg-card__link a, 
.pg-card__link {
  color: #0a78b5 !important; 
  text-decoration: none; 
  font-weight: 700;
}


/****************************************************
 * ✅ Gallery 卡片(番剧推荐)
 ****************************************************/
.pg-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto 6px;
  padding: 8px 2px 26px;
}

.pg-cover {
  text-align: center;
}

.pg-cover__title {
  margin-top: 8px; 
  font-size: 16px; 
  font-weight: 700; 
  color: #2b2d42;
}


/****************************************************
 * ✅ 关于本站介绍
 ****************************************************/
.pg-about {
  max-width: 900px; 
  margin: 8px auto 40px; 
  padding: 0 2px;
  font-size: 16px; 
  line-height: 1.9; 
  color: #333;
}


/****************************************************
 * ✅ 目录样式简化
 ****************************************************/
#toc, .toc {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.tocnumber { 
  color: #0096c7;
}


/****************************************************
 * ✅ 小屏手机优化
 ****************************************************/
@media (max-width: 680px) {
  .pg-hero__title { font-size: 32px; }
  .pg-hero__subtitle { font-size: 16px; }
}


/****************************************************
 * ✅ 去掉 Vector-2022 灰框 / 灰边
 ****************************************************/
.vector-body,
.vector-content,
.mw-body,
.mw-body-content,
.mw-parser-output,
.mw-workspace-container,
.vector-feature-main,
.vector-feature-body,
.vector-main-container,
.vector-content-container,
.vector-sticky-header-container,
.vector-page-toolbar,
.vector-feature-container,
.vector-feature-body > div:first-child,
.vector-feature-container > .vector-feature-body {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body.skin-vector-2022 .vector-main-container,
body.skin-vector-2022 .vector-feature-body {
  padding: 0 !important;
  margin: 0 !important;
}

body {
  background-color: #fefefe !important;
}
/* 1. 移除 hero 外框 */
.pg-hero {
    display: none !important;
}

/* 2. 可选:如果 LOGO 是通过 .pg-hero__logo 引入的图片,可以单独保留图片 */
.pg-hero__logo img {
    display: block !important;
    margin: 0 auto !important;
}

/* 3. 可选:如果你将 LOGO 直接转移到别处,可以忽略此条 */