跳转到内容

MediaWiki:Common.css:修订间差异

来自次元企鹅情报局百科
Admin留言 | 贡献
无编辑摘要
Admin留言 | 贡献
无编辑摘要
第1行: 第1行:
/****************************************************
/****************************************************
  * ✅ Penguin Cute UI — White Frame Version
  * ✅ Penguin Cute UI — Final Clean Version
  * ✅ 首页白色卡片 + 去除 Vector-2022 灰边框
  * ✅ 首页全白框清爽版(去掉灰背景 / 灰边)
  ****************************************************/
  ****************************************************/


/* ===============================
/* 顶部 LOGO 区域:白色卡片 + 阴影 */
  ✅ 顶部 Banner(渐变 + LOGO 动画)
  =============================== */
.pg-hero {
.pg-hero {
   width: 100%;
   width: 100%;
   padding: 64px 20px 72px;
   padding: 64px 20px 72px;
   background: linear-gradient(145deg, #e6f3ff, #f7fbff);
   background: #ffffff !important;
  border-radius: 18px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
   text-align: center;
   text-align: center;
   box-sizing: border-box;
   box-sizing: border-box;
   position: relative;
   position: relative;
}
}
.pg-hero__logo {
.pg-hero__logo {
   margin: 0 0 18px;
   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;
   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: 0.5px;
   letter-spacing: .5px;
   margin-bottom: 10px;
   margin-bottom: 10px;
}
}
.pg-hero__subtitle {
.pg-hero__subtitle {
   font-size: 18px;
   font-size: 18px;
第33行: 第41行:
   margin: 0 auto;
   margin: 0 auto;
}
}
/* ✅ Logo 漂浮动画 */
@keyframes pg-float {
@keyframes pg-float {
   0%, 100% { transform: translateY(0); }
   0%, 100% { transform: translateY(0); }
第40行: 第50行:


/****************************************************
/****************************************************
  * ✅ 去除所有默认灰色背景与外框(适配 Vector-2022)
  * ✅ 首页主介绍区域(主框白色)
****************************************************/
.vector-body,
.vector-content,
.mw-body,
.mw-body-content,
.mw-parser-output,
.mw-workspace-container,
.vector-feature-main,
.vector-feature-body,
.vector-feature-container,
.vector-main-container,
.vector-content-container,
.vector-sticky-header-container,
.vector-page-toolbar {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
 
/* ✅ 补丁:彻底替换为白色背景 */
.vector-feature-main,
.vector-feature-body,
.vector-feature-container,
.vector-feature-body > div:first-child,
.vector-feature-container > .vector-feature-body,
.vector-main-container {
  background: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
}
 
/* ✅ 去除顶部细边线(::before) */
.vector-feature-body::before {
  display: none !important;
}
 
/* ✅ 修复边距空白 */
body.skin-vector-2022 .vector-main-container,
body.skin-vector-2022 .vector-feature-body {
  padding: 0 !important;
  margin: 0 !important;
}
 
/* ✅ 移除 body 内部默认 padding */
.mw-body,
.mw-body-content {
  padding: 0 !important;
}
 
 
/****************************************************
* ✅ 首页主内容区卡片:白色纯净风格(大圆角)
  ****************************************************/
  ****************************************************/
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 #e0e0e0 !important;
   border: 1px solid #ddd !important;
   border-radius: 18px !important;
   border-radius: 18px !important;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !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;
}
}


/* 首页标题颜色 */
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;
第111行: 第68行:


/****************************************************
/****************************************************
  * ✅ 企鹅卡片导航
  * ✅ 首页导航卡片(企鹅风)
  ****************************************************/
  ****************************************************/
.pg-grid {
.pg-grid {
第121行: 第78行:
   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 18px 16px;
   box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
   transition: .2s ease;
   transition: .2s ease;
   text-align: center;
   text-align: center;
}
}
.pg-card:hover {
.pg-card:hover {
   transform: translateY(-4px);
   transform: translateY(-4px);
   box-shadow: 0 10px 24px rgba(0, 0, 0, .10);
   box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10);
}
}
.pg-card__icon {
.pg-card__icon {
   font-size: 28px;
   font-size: 28px;  
   margin-bottom: 8px;
   margin-bottom: 8px;
}
}
.pg-card__title {
.pg-card__title {
   font-size: 19px;
   font-size: 19px;  
   font-weight: 800;
   font-weight: 800;  
   color: #1b4d7a;
   color: #1b4d7a;
}
}
.pg-card__desc {
.pg-card__desc {
   margin: 6px 0 10px;
   margin: 6px 0 10px;  
   color: #54606f;
   color: #54606f;  
   font-size: 14.5px;
   font-size: 14.5px;
}
}
.pg-card__link a,
 
.pg-card__link a,  
.pg-card__link {
.pg-card__link {
   color: #0a78b5 !important;
   color: #0a78b5 !important;  
   text-decoration: none;
   text-decoration: none;  
   font-weight: 700;
   font-weight: 700;
}
}
第156行: 第119行:


/****************************************************
/****************************************************
  * ✅ 首页推荐作品(Gallery 平图卡片)
  * ✅ Gallery 卡片(番剧推荐)
  ****************************************************/
  ****************************************************/
.pg-gallery {
.pg-gallery {
第166行: 第129行:
   padding: 8px 2px 26px;
   padding: 8px 2px 26px;
}
}
.pg-cover {
.pg-cover {
   text-align: center;
   text-align: center;
}
}
.pg-cover__title {
.pg-cover__title {
   margin-top: 8px;
   margin-top: 8px;  
   font-size: 16px;
   font-size: 16px;  
   font-weight: 700;
   font-weight: 700;  
   color: #2b2d42;
   color: #2b2d42;
}
}
第178行: 第143行:


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


/****************************************************
/****************************************************
  * ✅ TOC 目录样式优化
  * ✅ 目录样式简化
  ****************************************************/
  ****************************************************/
#toc, .toc {
#toc, .toc {
第198行: 第163行:
   box-shadow: none !important;
   box-shadow: none !important;
}
}
.tocnumber {
.tocnumber {  
   color: #0096c7;
   color: #0096c7;
}
}
第204行: 第169行:


/****************************************************
/****************************************************
  * ✅ 小屏适配优化
  * ✅ 小屏手机优化
  ****************************************************/
  ****************************************************/
@media (max-width: 680px) {
@media (max-width: 680px) {
   .pg-hero__title { font-size: 32px; }
   .pg-hero__title { font-size: 32px; }
   .pg-hero__subtitle { font-size: 16px; }
   .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;
}
}

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

/****************************************************
 * ✅ 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;
}