跳转到内容

MediaWiki:Common.css:修订间差异

来自次元企鹅情报局百科
Admin留言 | 贡献
无编辑摘要
Admin留言 | 贡献
无编辑摘要
第1行: 第1行:
/****************************************************
/****************************************************
  * ✅ Penguin Cute UI — Final Clean Version
  * ✅ Penguin Cute UI — White Frame Version
  * ✅ 首页专属冰蓝柔和风 + 企鹅可爱 UI
  * ✅ 首页白色卡片 + 去除 Vector-2022 灰边框
  ****************************************************/
  ****************************************************/


/* ===============================
/* ===============================
   ✅ 顶部 Banner(渐变 + 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: linear-gradient(145deg, #e6f3ff, #f7fbff);
   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;
   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;
   color: #2b2d42;
   color:#2b2d42;
   line-height: 1.85;
   line-height:1.85;
   max-width: 860px;
   max-width:860px;
   margin: 0 auto;
   margin:0 auto;
}
}
 
@keyframes pg-float {
/* ✅ Logo 漂浮动画 */
   0%, 100% { transform: translateY(0); }
@keyframes pg-float{
   50% { transform: translateY(-6px); }
   0%,100%{ transform:translateY(0) }
   50%{ transform:translateY(-6px) }
}
}




/****************************************************
/****************************************************
  * ✅ 全站背景清理(去掉默认灰框/灰底)
  * ✅ 去除所有默认灰色背景与外框(适配 Vector-2022)
  ****************************************************/
  ****************************************************/
.vector-body,
.vector-body,
第54行: 第47行:
.mw-body-content,
.mw-body-content,
.mw-parser-output,
.mw-parser-output,
.mw-workspace-container {
.mw-workspace-container,
    background: transparent !important;
.vector-feature-main,
    border: none !important;
.vector-feature-body,
    box-shadow: none !important;
.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;
}
}


/* 去掉默认 padding,否则首页外层会出现难看的空白 */
/* ✅ 移除 body 内部默认 padding */
.mw-body,
.mw-body,
.mw-body-content {
.mw-body-content {
    padding: 0 !important;
  padding: 0 !important;
}
}




/****************************************************
/****************************************************
  * ✅ 首页主要内容区:冰蓝柔和框(只作用首页)
  * ✅ 首页主内容区卡片:白色纯净风格(大圆角)
  ****************************************************/
  ****************************************************/
body.page-Main_Page .mw-parser-output > div {
body.page-Main_Page .mw-parser-output > div {
    background: rgba(240, 248, 255, 0.65) !important; /* 半透明冰蓝 */
  background: #ffffff !important;
    border: 1px solid #cfe8ff !important;             /* 柔和蓝边框 */
  border: 1px solid #e0e0e0 !important;
    border-radius: 18px !important;                   /* 大圆角 */
  border-radius: 18px !important;
    box-shadow: 0 4px 12px rgba(0, 86, 179, 0.10) !important; /* 蓝色柔光 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !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;
}
}




/****************************************************
/****************************************************
  * ✅ 核心导航 — 可爱企鹅卡片风
  * ✅ 企鹅卡片导航
  ****************************************************/
  ****************************************************/
.pg-grid{
.pg-grid {
   display:grid;
   display: grid;
   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;
   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 18px 16px;
   box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
   box-shadow:0 6px 18px rgba(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,.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;
}
}




/****************************************************
/****************************************************
  * ✅ 新番推荐 Gallery(平图卡片)
  * ✅ 首页推荐作品(Gallery 平图卡片)
  ****************************************************/
  ****************************************************/
.pg-gallery{
.pg-gallery {
   display:grid;
   display: grid;
   grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
   grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
   gap:18px;
   gap: 18px;
   max-width:1100px;
   max-width: 1100px;
   margin:0 auto 6px;
   margin: 0 auto 6px;
   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;
}
}




/****************************************************
/****************************************************
  * ✅ 关于本站模块优化
  * ✅ 关于本站模块
  ****************************************************/
  ****************************************************/
.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;
}
}




/****************************************************
/****************************************************
  * ✅ TOC(目录)扁平化美化
  * ✅ TOC 目录样式优化
  ****************************************************/
  ****************************************************/
#toc, .toc{
#toc, .toc {
   background:transparent !important;
   background: transparent !important;
   border:none !important;
   border: none !important;
   box-shadow:none !important;
   box-shadow: none !important;
}
 
.tocnumber{
  color:#0096c7;
}
}
 
.tocnumber {
 
   color: #0096c7;
 
/****************************************************
* ✅ 小屏适配(手机友好)
****************************************************/
@media (max-width:680px){
  .pg-hero__title{ font-size:32px }
   .pg-hero__subtitle{ font-size:16px }
}
}




/****************************************************
/****************************************************
  * ✅ 彻底去掉 Vector-2022 所有外层灰框/白框
  * ✅ 小屏适配优化
  ****************************************************/
  ****************************************************/
.vector-feature-main,
@media (max-width: 680px) {
.vector-feature-body,
  .pg-hero__title { font-size: 32px; }
.vector-main-container,
  .pg-hero__subtitle { font-size: 16px; }
.vector-content-container,
.vector-sticky-header-container,
.vector-page-toolbar,
body.skin-vector-2022 .vector-feature-main,
body.skin-vector-2022 .vector-main-container {
    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;
}
/* ✅ 强制移除 Vector-2022 外层灰框和边框 */
.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;
}
}

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

/****************************************************
 * ✅ Penguin Cute UI — White Frame Version
 * ✅ 首页白色卡片 + 去除 Vector-2022 灰边框
 ****************************************************/

/* ===============================
   ✅ 顶部 Banner(渐变 + LOGO 动画)
   =============================== */
.pg-hero {
  width: 100%;
  padding: 64px 20px 72px;
  background: linear-gradient(145deg, #e6f3ff, #f7fbff);
  text-align: center;
  box-sizing: border-box;
  position: relative;
}
.pg-hero__logo {
  margin: 0 0 18px;
  animation: pg-float 6s ease-in-out infinite;
}
.pg-hero__title {
  font-size: 44px;
  font-weight: 800;
  color: #1b4d7a;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}
.pg-hero__subtitle {
  font-size: 18px;
  color: #2b2d42;
  line-height: 1.85;
  max-width: 860px;
  margin: 0 auto;
}
@keyframes pg-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}


/****************************************************
 * ✅ 去除所有默认灰色背景与外框(适配 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 {
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !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, .06);
  transition: .2s ease;
  text-align: center;
}
.pg-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(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, .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; }
}