MediaWiki:Common.css:修订间差异

来自广州交通维基 - Canton Trans Wiki
跳到导航 跳到搜索
无编辑摘要
无编辑摘要
第65行: 第65行:
/* 【封面画册代码】 */
/* 【封面画册代码】 */
/* 外部图片简单淡入幻灯片 - 适用于4张左右 */
/* 外部图片简单淡入幻灯片 - 适用于4张左右 */
.ext-carousel.simple-fade-carousel {
  position: relative;
  max-width: 620px;      /* 根据需要调整 */
  margin: 1em auto;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}


.slides-container {
/* 轮播基础样式 */
  position: relative;
     .carousel-slides {
  width: 100%;
       display: flex;
}
       transition: transform 0.5s ease;
 
       width: 100%;
.slide {
     }
  display: none;
     .carousel-slide {
  width: 100%;
       min-width: 100%;
  position: relative;
       box-sizing: border-box;
}
     }
 
      /*  按钮hover效果 */
.slide.active {
     .carousel-btn:hover {
  display: block;
       background: rgba(0,0,0,0.8);
}
     }
 
     /*  响应式适配 */
.slide img {
     @media (max-width: 768px) {
  display: block;
       .carousel-btn {
  width: 100%;
         padding: 10px;
  height: auto;
         font-size: 14px;
  max-height: 420px;      /*  建议设置,避免图片过高 */
       }
  object-fit: contain;    /* 或 cover,根据需求 */
       .carousel-caption {
  background: #f8f9fa;
         font-size: 14px;
}
       }
 
     }
.caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  background: rgba(0,0,0,0.65);
  color: white;
  font-size: 95%;
  text-align: center;
}
 
/*  箭头按钮 */
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
  z-index: 10;
  opacity: 0.7;
  transition: opacity 0.2s;
}
 
.prev:hover, .next:hover { opacity: 1; }
.prev { left: 12px; }
.next { right: 12px; }
 
/* 淡入动画 */
@keyframes fade {
  from { opacity: 0.4; }
  to  { opacity: 1; }
}
 
.slide.active {
  animation-name: fade;
  animation-duration: 1.2s;
}

2025年12月25日 (四) 22:53的版本

/* 这里放置的CSS将应用于所有皮肤 */


/* 侧边栏、顶部栏 */
#mw-panel #p-logo {
    width: 176px;
    height: 176px;
    margin-left: -0.5em;
}

div#mw-page-base {
    background: none;
    height: 100px;
}
#left-navigation,
#right-navigation {
    margin-top: 60px;
}
div#mw-panel {
    top: 0;
    text-shadow: 1px 1px #f6f6f6;
}
div#mw-panel div.portal {
    padding-bottom: 1em;
}
div#mw-head div.vectorMenu h4 {
    height: 1.9em;
    margin-bottom: 0;
    padding-top: 1.25em;
    padding-bottom: 0;
    padding-right: .5em;
}

/* 链接栏 
div#p-personal {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 5px 10px 5px 0;
    box-shadow: #444 0 1px 5px;
}
*/
/* 中部透明 
.mw-body, .parsoid-body {
    padding: 1em;
    background-color: transparent;
    color: #222222;
    direction: ltr;
}
*/
/* 禁止查看源代码 (暂时不用)
<?php global $wgUser;if($wgUser->is Allower('edit')){?>
	<sytle type="text/css">
	 #ca-viewsource{display:none !important;}
	</style>
   <?php}?>
   
    */


/* 隐藏实时更新按钮 */
#mw-recentchanges-showupdated, .mw-checkbox-toggle-watchlist {
    display: none !important;
}


/* 【封面画册代码】 */
/* 外部图片简单淡入幻灯片 - 适用于4张左右 */

 /* 轮播基础样式 */
        .carousel-slides {
            display: flex;
            transition: transform 0.5s ease;
            width: 100%;
        }
        .carousel-slide {
            min-width: 100%;
            box-sizing: border-box;
        }
        /* 按钮hover效果 */
        .carousel-btn:hover {
            background: rgba(0,0,0,0.8);
        }
        /* 响应式适配 */
        @media (max-width: 768px) {
            .carousel-btn {
                padding: 10px;
                font-size: 14px;
            }
            .carousel-caption {
                font-size: 14px;
            }
        }