跳转到内容

MediaWiki:Common.css:修订间差异

来自次元企鹅情报局百科
Admin留言 | 贡献
无编辑摘要
Admin留言 | 贡献
无编辑摘要
第1行: 第1行:
/****************************************************
/****************************************************
  * ✅ Penguin Cute UI — Final Clean Version
  * ✅ Penguin Cute UI — Safe Final Version
  * ✅ 首页全白框清爽版(去掉灰背景 / 灰边)
  * ✅ 不破坏 Vector-2022 顶部结构(重点)
* ✅ 首页全白框清爽 UI
  ****************************************************/
  ****************************************************/


/* 1. 顶部 LOGO 区域:白色卡片 + 阴影 */
/* ------------------------------
  顶部 Banner(白色 + Logo)
------------------------------ */
.pg-hero {
.pg-hero {
   width: 100%;
   width: 100%;
第12行: 第15行:
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
   text-align: center;
   text-align: center;
  box-sizing: border-box;
  position: relative;
}
}
.pg-hero__logo {
.pg-hero__logo {
   margin: 0 0 18px;
   margin-bottom: 18px;
  padding: 12px 20px;
   background: #ffffff;
   background: #ffffff;
  padding: 12px 20px;
   border-radius: 14px;
   border-radius: 14px;
   display: inline-block;
   display: inline-block;
   box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
   box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  animation: pg-float 6s ease-in-out infinite;
}
}
.pg-hero__title {
.pg-hero__title {
   font-size: 44px;
   font-size: 44px;
   font-weight: 800;
   font-weight: 800;
   color: #1b4d7a;
   color: #1b4d7a;
  letter-spacing: .5px;
   margin-bottom: 10px;
   margin-bottom: 10px;
}
}
.pg-hero__subtitle {
.pg-hero__subtitle {
   font-size: 18px;
   font-size: 18px;
第39行: 第41行:
}
}


/* LOGO 动画 */
/* Logo 动画 */
@keyframes pg-float {
@keyframes pg-float {
   0%, 100% { transform: translateY(0); }
   0%, 100% { transform: translateY(0); }
第47行: 第49行:


/****************************************************
/****************************************************
  * ✅ 首页主介绍区域(主框白色)
  * ✅ 首页内容框 - 白色卡片
  ****************************************************/
  ****************************************************/
body.page-Main_Page .mw-parser-output > div {
body.page-Main_Page .mw-parser-output > div {
   background: #ffffff !important;
   background: #ffffff !important;
   border: 1px solid #ddd !important;
   border: 1px solid #e7e7e7 !important;
   border-radius: 18px !important;
   border-radius: 18px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
   padding: 25px !important;
   padding: 25px !important;
   margin: 25px 0 !important;
   margin: 25px 0 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
}
body.page-Main_Page h1,  
 
body.page-Main_Page h1,
body.page-Main_Page h2 {
body.page-Main_Page h2 {
   color: #174b75 !important;
   color: #174b75 !important;
第64行: 第67行:


/****************************************************
/****************************************************
  * ✅ 首页导航卡片(企鹅风)
  * ✅ 导航卡片
  ****************************************************/
  ****************************************************/
.pg-grid {
.pg-grid {
第70行: 第73行:
   grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
   grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
   gap: 20px;
   gap: 20px;
  padding: 12px 2px 26px;
   max-width: 1100px;
   max-width: 1100px;
   margin: 0 auto;
   margin: 0 auto;
}
}
.pg-card {
.pg-card {
   background: #ffffff;
   background: #ffffff;
   border-radius: 20px;
   border-radius: 20px;
   padding: 18px 18px 16px;
   padding: 18px;
  text-align: center;
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
   transition: .2s ease;
   transition: 0.2s;
  text-align: center;
}
}
.pg-card:hover {
.pg-card:hover {
   transform: translateY(-4px);
   transform: translateY(-4px);
   box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10);
   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-body,
.vector-content,
.vector-content,
.mw-body,
.mw-body,
.mw-body-content,
.mw-body-content,
.mw-parser-output,
.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;
   background: transparent !important;
   border: none !important;
   border: none !important;
第188行: 第106行:
}
}


body.skin-vector-2022 .vector-main-container,
/* ✅ 让整个 Wiki 背景更舒服 */
body.skin-vector-2022 .vector-feature-body {
body {
   padding: 0 !important;
   background: #f7f9fb !important;
  margin: 0 !important;
}
}


body {
/* ✅ 千万不能再动这些(会导致头部消失)
  background-color: #fefefe !important;
  所以必须删掉:vector-sticky-header-container / page-toolbar 等
}
*/

2025年11月7日 (五) 15:56的版本

/****************************************************
 * ✅ Penguin Cute UI — Safe Final Version
 * ✅ 不破坏 Vector-2022 顶部结构(重点)
 * ✅ 首页全白框清爽 UI
 ****************************************************/

/* ------------------------------
  顶部 Banner(白色 + 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;
}

.pg-hero__logo {
  margin-bottom: 18px;
  padding: 12px 20px;
  background: #ffffff;
  border-radius: 14px;
  display: inline-block;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

.pg-hero__title {
  font-size: 44px;
  font-weight: 800;
  color: #1b4d7a;
  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 #e7e7e7 !important;
  border-radius: 18px !important;
  padding: 25px !important;
  margin: 25px 0 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

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;
  max-width: 1100px;
  margin: 0 auto;
}

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

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


/****************************************************
 * ✅ 去掉灰背景(安全版,不删头)
 ****************************************************/
 /* ✅ 只清除“内容区”,不影响顶部 */
.vector-body,
.vector-content,
.mw-body,
.mw-body-content,
.mw-parser-output {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ✅ 让整个 Wiki 背景更舒服 */
body {
  background: #f7f9fb !important;
}

/* ✅ 千万不能再动这些(会导致头部消失)
   所以必须删掉:vector-sticky-header-container / page-toolbar 等
*/