跳转到内容

MediaWiki:Common.css:修订间差异

来自次元企鹅情报局百科
Admin留言 | 贡献
无编辑摘要
Admin留言 | 贡献
无编辑摘要
第4行: 第4行:
  ****************************************************/
  ****************************************************/


/* 顶部 LOGO 区域:白色卡片 + 阴影 */
/* 1. 顶部 LOGO 区域:白色卡片 + 阴影 */
.pg-hero {
.pg-hero {
   width: 100%;
   width: 100%;
第15行: 第15行:
   position: relative;
   position: relative;
}
}
.pg-hero__logo {
.pg-hero__logo {
   margin: 0 0 18px;
   margin: 0 0 18px;
第25行: 第24行:
   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;
第33行: 第31行:
   margin-bottom: 10px;
   margin-bottom: 10px;
}
}
.pg-hero__subtitle {
.pg-hero__subtitle {
   font-size: 18px;
   font-size: 18px;
第42行: 第39行:
}
}


/* ✅ Logo 漂浮动画 */
/* LOGO 动画 */
@keyframes pg-float {
@keyframes pg-float {
   0%, 100% { transform: translateY(0); }
   0%, 100% { transform: translateY(0); }
第60行: 第57行:
   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 {
第78行: 第74行:
   margin: 0 auto;
   margin: 0 auto;
}
}
.pg-card {
.pg-card {
   background: #ffffff;
   background: #ffffff;
第87行: 第82行:
   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, 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;  
第103行: 第95行:
   color: #1b4d7a;
   color: #1b4d7a;
}
}
.pg-card__desc {
.pg-card__desc {
   margin: 6px 0 10px;  
   margin: 6px 0 10px;  
第109行: 第100行:
   font-size: 14.5px;
   font-size: 14.5px;
}
}
.pg-card__link a,  
.pg-card__link a,  
.pg-card__link {
.pg-card__link {
第129行: 第119行:
   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;  
第209行: 第197行:
   background-color: #fefefe !important;
   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 直接转移到别处,可以忽略此条 */

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

/****************************************************
 * ✅ Penguin Cute UI — Final Clean Version
 * ✅ 首页全白框清爽版(去掉灰背景 / 灰边)
 ****************************************************/

/* 1. 顶部 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;
}