MediaWiki:Common.css：修订间差异

2025年6月21日 (六) 10:42的最新版本

/* 导入外部字体 */
@import url('https://fonts.googleapis.com/css2?family=Spinnaker&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Marcellus&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css?family=Audiowide&display=swap');
@import url('https://fonts.googleapis.com/css?family=Impact&display=swap');
@import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap');
@import url('https://fonts.googleapis.com/css?family=Orbitron&display=swap');
@import url('https://fonts.googleapis.com/css?family=Sacramento&display=swap');
@import url('https://fonts.googleapis.com/css?family=Caveat+Brush&display=swap');
@import url('https://fonts.googleapis.com/css?family=Times+New+Roman&display=swap');
@import url('https://fonts.googleapis.com/css?family=Calibri&display=swap');

* {
    font-family: 'Times New Roman','Noto Serif SC';
}

/* 隐含标题 */
.hide-header {
    visibility: hidden;
    height: 0;
    overflow: hidden;
}

.hide-header span.mw-editsection {
    display: none;
}

/* 首页字体更改 */
.tucm-mainpage {
    font-family: 'Noto Serif SC', 'Times New Roman';
}

/* 公告栏容器 */
.announcement-bar {
    border: 1px solid #202122;
    background: white;
    padding: 0.5em;
    margin: 1em 0;
    list-style: none;
}

/* 公告栏条目 */
.announcement-item a {
    display: block;
    padding: 0.5em;
    color: inherit !important;
    text-decoration: none !important;
    transition: background-color 0.2s;
}

/* 鼠标悬停效果 */
.announcement-item a:hover {
    background-color: #a0a0a0;
}

/* 首页横幅 */
.banner {
    text-align: center;
}

/* 首页双列显示 */
.father {
    background-color: #ffffff;
}
.left-son {
    width: 70%;
    float:left;
    margin: 10px;
}
.right-son {
    width: 30%;
    float:right;
    margin: 10px;
}



/* 首页横幅导航栏 */
.banner-navigation {
    background: #ffffff; 
    border-top: 2px solid #505050; 
    border-bottom: 2px solid #505050; 
    text-align: center; 
    padding: 15px 0px 15px 0px; 
    font-size: 14px;
}

.banner-navigation a {  
    background:#ffffff;
    padding:8px;
    border-radius:3px;
}

.banner-navigation a:hover {
    background: #e0e0e0;
    padding:8px;
    border-radius:3px;
}

/* 添加站外链接右侧的小箭头 */
.banner-navigation a.external::after,
.banner-navigation a.external::before {
	background-color: currentcolor;
	content: '';
	display: inline-block;
	height: 0.857em;
	width: 0.857em;
	-webkit-mask: no-repeat center/contain var( --external-icon );
	mask: no-repeat center/contain var( --external-icon );
}

.banner-navigation a.external::after {
	--external-icon: url( /load.php?format=original&image=linkExternal&modules=oojs-ui.styles.icons-editing-core );
	margin-left: 0.143em;
}

.banner-navigation a.external::before {
	--external-icon: url( /load.php?format=original&image=linkExternal&modules=oojs-ui.styles.icons-editing-core&dir=rtl );
	margin-right: 0.143em;
}

/* Restore Plainlinks: https://www.mediawiki.org/wiki/Manual:Plainlinks */
.banner-navigation a.external::after,
.banner-navigation a.external::before {
	display: none;
}

/* 不存在的内部链接：虚线下划线 */
a.new {
  text-decoration-style: dashed;
}

/*双列目录*/
@media screen and (min-width:1000px) {
	.toc ul {
		column-count: 2;
	}
	.toc ul > li > ul {
		column-count: 1;
	}
	.toctoggle {
		float: right;
	}
}

/* 模糊将逐渐消失并显示内容 */
.spoilerblur {
  filter: blur(3.5px);
  opacity: 0.40;
  transition: filter 1s linear, opacity 1s linear, text-shadow 1s linear;
}

.spoilerIMG {
  filter: blur(22.5px);
  opacity: 0.20;
  transition: filter 1s linear, opacity 1s linear, text-shadow 1s linear;
}
 
.spoilerblur:is(:hover, :focus, :focus-within, :active), .spoilerIMG:is(:hover, :focus, :focus-within, :active) {
  filter: blur(0px);
  opacity: 1;
  text-shadow: 0 0 0 transparent;
  transition-delay: 500ms;
}

:not(li) > .spoilerblur, .spoilerIMG {
	display: unset;
}

/* 基本容器样式 */
.custom-collapsible {
  margin: 1em 0;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 可点击标题区域 */
.collapsible-header {
  padding: 12px 20px;
  background: #f8f9fa;
  border: 1px solid #eaecf0;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.2s;
}

.collapsible-header:hover {
  background: #f1f3f5;
}

/* 内容区域 */
.collapsible-content {
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease-out;
  border-left: 1px solid #eaecf0;
  border-right: 1px solid #eaecf0;
  border-bottom: 1px solid #eaecf0;
  border-radius: 0 0 4px 4px;
}

/* 展开状态 */
.collapsible-header[data-state="open"] + .collapsible-content {
  max-height: 5000px;
  transition: max-height 0.35s ease-in;
}

/* 箭头动画 */
.collapse-arrow {
  transition: transform 0.2s;
  font-size: 0.8em;
  margin-left: 10px;
}

.collapsible-header[data-state="open"] .collapse-arrow {
  transform: rotate(180deg);
}

/* ====== ====== 随机页面盒子 ====== ======*/
/* 标题样式 */
.common-random-header {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 90px;
    font-size: 1.2em;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.common-random-refresh {
    /* 修改原有样式 */
    width: 100px; /* 固定按钮宽度 */
}

.common-random-box {
    position: relative;
    height: 450px;
    /* border: 1px solid #aaa; */
    margin: 10px 0;
    padding: 10px;
    box-sizing: border-box;
}

.common-random-refresh {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    padding: 5px 10px;
    cursor: pointer;
}

.common-random-content {
    height: calc(100% - 20px);
    overflow-y: auto;
    margin-top: 30px;
}

.common-random-nav {
    position: absolute;
    top: 10px;
    right: 120px; /* 与刷新按钮保持间距 */
    display: none; /* 默认隐藏 */
}

.common-random-refresh {
    width: auto; /* 恢复自适应宽度 */
    right: 10px; /* 重置位置 */
}

.common-random-box.loaded .common-random-nav {
    display: block; /* 加载完成后显示跳转按钮 */
}

/* 社交图标动画 */

.wrapper .button {
    display: inline-block;
    height: 60px;
    width: 60px;
    float: left;
    margin: 0 5px;
    overflow: hidden;
    background: rgb(255, 255, 255);
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-out;
}

.wrapper .button .icon {
    display: inline-block;
    height: 60px;
    width: 60px;
    text-align: center;
    border-radius: 50px;
    box-sizing: border-box;
    line-height: 60px;
}

.wrapper .button:hover {
    width: 200px;

}

.wrapper .button .icon i {
    font-size: 25px;
    line-height: 60px;
}

.wrapper .button span {
    font-size: 20px;
    font-weight: 600;
    line-height: 60px;
    margin-left: 10px;

}

.wrapper .button:nth-child(1):hover .icon {
    background: #1150ff;
}

.wrapper .button:nth-child(2):hover .icon {
    background: #4298fa;
}

.wrapper .button:nth-child(3):hover .icon {
    background: #f82173;
}

.wrapper .button:nth-child(4):hover .icon {
    background: #565a66;
}

.wrapper .button:nth-child(5):hover .icon {
    background: #f32929;
}




.wrapper .button:nth-child(1) span {
    color: #1150ff;
}

.wrapper .button:nth-child(2) span {
    color: #4298fa;
}

.wrapper .button:nth-child(3) span {
    color: #f82173;
}

.wrapper .button:nth-child(4) span {
    color: #565a66;
}

.wrapper .button:nth-child(5) span {
    color: #f32929;
}