查看“︁MediaWiki:Vector.css”︁的源代码

/* 此处所有CSS将为使用Vector皮肤的用户加载 */
#p-logo {
    height: 89px !important;
    margin-bottom: 0em !important;
}
#p-logo a {
    height: 89px !important;
    opacity: 0.2;
}
#siteNotice {
    opacity: 0.7;
    position: absolute;
    top: 5px;
    left: 15px;
    z-index: 10;
}
.vector-menu-tabs-legacy .selected {
    color: #fbfbfb;
    border-bottom: 2px solid #62a83a;
}
.vector-menu-tabs-legacy .selected a, .vector-menu-tabs-legacy .selected a:visited {
    color: #707274;
}
.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown .vector-menu-heading {
    background-image: linear-gradient(to bottom, rgba(167, 215, 249, 0) 0, #cdd1c8 100%);
}
.vector-search-box-input {
    height: 3em;
    border: 1px solid #d2d3d4;
}
.vector-search-box form {
    margin: 0em 0 0;
}
.searchButton[name='go'] {
    background: no-repeat center / 2em url(/skins/Vector/resources/skins.vector.styles.legacy/images/search.svg);
}
body.page-主馆 h1.firstHeading {
    display: none;
}
body.page-主馆 div#content.mw-body {
    background-image: linear-gradient(to bottom, #bee1e9 0%, transparent 70%);
    background-size: 100% auto;
    background-position: center top;
}
body {
    background-image: linear-gradient(to top, #e2f3f7 0%, transparent 30%);
}
@font-face
{
    font-family: Chusung;
    src: url(/font/Chusung-210529.ttf);
}
@font-face
{
    font-family: Amarante;
    src: url(/font/Amarante-Regular.ttf);
}
@font-face
{
    font-family: Tiejili;
    src: url(/font/Tiejili Regular.ttf);
}
@font-face
{
    font-family: Ilyas;
    src: url(/font/Ilyas.otf);
}
@font-face
{
    font-family: dot_digital;
    src: url(/font/dot_digital-7.ttf);
}
@font-face
{
    font-family: NbpInformaFivesix-2dXW;
    src: url(/font/NbpInformaFivesix-2dXW.ttf);
}
@font-face
{
    font-family: PressStart2P-vaV7;
    src: url(/font/PressStart2P-vaV7.ttf);
}
@font-face
{
    font-family: SanstainaRegular-52e8;
    src: url(/font/SanstainaRegular-52e8.ttf);
}
@font-face
{
    font-family: SnaredrumOneNbp-3emG;
    src: url(/font/SnaredrumOneNbp-3emG.ttf);
}
@font-face
{
    font-family: SnaredrumThreeNbp-xOj0;
    src: url(/font/SnaredrumThreeNbp-xOj0.ttf);
}
@font-face
{
    font-family: SnaredrumTwoNbp-pjqa;
    src: url(/font/SnaredrumTwoNbp-pjqa.ttf);
}
@font-face
{
    font-family: SnaredrumZeroNbp-DBMm;
    src: url(/font/SnaredrumZeroNbp-DBMm.ttf);
}
.firstHeading{	
	font-family: Chusung !important;
}
h1 span{	
	font-family: Chusung !important;
}
.mw-headline{	
	font-family: Chusung ;
}


/* custom edits */
/* Default style for navigation boxes */
.navbox {                     /* Navbox container style */
    border: 1px solid #a2a9b1;
    width: 100%; 
    margin: auto;
    clear: both;
    font-size: 88%;
    text-align: center;
    padding: 1px;
}
.navbox-inner,
.navbox-subgroup {
    width: 100%;
}
.navbox th,
.navbox-title,
.navbox-abovebelow {
    text-align: center;       /* Title and above/below styles */
    padding-left: 1em;
    padding-right: 1em;
}
th.navbox-group {             /* Group style */
    white-space: nowrap;
    /* @noflip */
    text-align: right;
}
.navbox,
.navbox-subgroup {
    background: #fdfdfd;      /* Background color */
}
.navbox-list {
    border-color: #fdfdfd;    /* Must match background color */
}
.navbox th,
.navbox-title {
    background: #ccccff;      /* Level 1 color */
}
.navbox-abovebelow,
th.navbox-group,
.navbox-subgroup .navbox-title {
    background: #ddddff;      /* Level 2 color */
}
.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
    background: #e6e6ff;      /* Level 3 color */
}
.navbox-even {
    background: #f7f7f7;      /* Even row striping */
}
.navbox-odd {
    background: transparent;  /* Odd row striping */
}
table.navbox + table.navbox {  /* Single pixel border between adjacent navboxes */
    margin-top: -1px;          /* (doesn't work for IE6, but that's okay)       */
}
.navbox .hlist td dl,
.navbox .hlist td ol,
.navbox .hlist td ul,
.navbox td.hlist dl,
.navbox td.hlist ol,
.navbox td.hlist ul {
    padding: 0.125em 0;       /* Adjust hlist padding in navboxes */
}
.navbox .hlist dd,
.navbox .hlist dt,
.navbox .hlist li {
    white-space: nowrap;      /* Nowrap list items in navboxes */
}
.navbox .hlist dd dl,
.navbox .hlist dt dl,
.navbox .hlist li ol,
.navbox .hlist li ul {
    white-space: normal;      /* But allow parent list items to be wrapped */
}
ol + table.navbox,
ul + table.navbox {
    margin-top: 0.5em;        /* Prevent lists from clinging to navboxes */
}

/* Default styling for Navbar template */
.navbar {
    display: inline;
    font-weight: normal;
}
.navbar ul {
    display: inline;
    white-space: nowrap;
}
.navbar li {
    word-spacing: -0.125em;
}
.navbar.mini li abbr[title] {
    font-variant: small-caps;
    border-bottom: none;
    text-decoration: none;
    cursor: inherit;
}
/* Navbar styling when nested in navbox */
.navbox .navbar {
    display: block;
}
.navbox-title .navbar {
    /* @noflip */
    float: left;
    /* @noflip */
    text-align: left;
    /* @noflip */
    margin-right: 0.5em;
    width: 8em;
}

/* 'show'/'hide' buttons created dynamically by the CollapsibleTables javascript
   in [[MediaWiki:Common.js]] are styled here so they can be customised. */
.collapseButton {       
    /* @noflip */
    float: right;
    font-weight: normal;
    /* @noflip */
    margin-left: 0.5em;
    /* @noflip */
    text-align: right;
    width: auto;
}
/* In navboxes, the show/hide button balances the v·d·e links
   from [[Template:Navbar]], so they need to be the same width. */
.navbox .collapseButton {
    width: 8em;
}

/* For display uneditable section */
.noedit .editsection, .noedit .mw-editsection
{
	display: none;
}

.DYKvote h2, .DYKvote h3, .DYKvote h4
{
	margin-top: 2em;
}
/* == for some templates ==*/

.work-title
{
	position: fixed;
	top: 0px;
	right:0px;
	height: 50px;
	width: 50px;
}

.biaoqian{
	float:right;
	right:0px;
	top: 10px;
	width:40px;
}
.biaoqianshang{	border-top-left-radius:15px;
	float:right;
	right:0px;
	width:20px;
	margin-left:10px;
	border-top:1px solid #000;
	border-left:1px solid #000;
	border-bottom:1px solid #000;
	padding-left:5px;
	padding-right:0px;
	padding-top:15px;
	padding-bottom:15px;
	line-height:15px;
	transition: all 0.1s;
}
.biaoqianshang:hover,.biaoqianzhong:hover,.biaoqianxia:hover{
	padding-right:10px;
	transition: all 0.1s;
	cursor:pointer;
}
.biaoqianzhong{	
	float:right;
	right:0px;
	width:20px;
	margin-left:10px;
	border-top:1px solid #000;
	border-left:1px solid #000;
	border-bottom:1px solid #000;
	padding-left:5px;
	padding-right:0px;
	padding-top:15px;
	padding-bottom:15px;
	line-height:15px;
	transition: all 0.1s;
}
.biaoqianxia{border-bottom-left-radius:15px;
	float:right;
	right:0px;
	width:20px;
	margin-left:10px;
	border-top:1px solid #000;
	border-left:1px solid #000;
	border-bottom:1px solid #000;
	padding-left:5px;
	padding-right:0px;
	padding-top:15px;
	padding-bottom:15px;
	line-height:15px;
	transition: all 0.1s;
}
.xinxi{	float:right;
	top: 10px;
	right:20px;
	margin-right:7px;
}
.you{	float:right;
	top: 10px;
	right:20px;
}
.xinxi table{
	width: 100%;
	text-align:center;
	border:1px solid #000000;
	border-collapse:collapse;
}
.biaoge{	float:left;
	top: 10px;
	left:10px;
	margin: 10px;
}
.biaoge table{
	width: 100%;
	text-align:center;
	border-collapse:collapse;
}
.biaoge table tr td{
	width: 100px;
}
.daohang1 td{
	background-color:#dbffdd;
}


.heimu {
    background-color: #000000;
    color: #000000 !important;
}
.heimu:hover {
    color: #FFFFFF !important;
}

.bailian a:link {
    color: #FFFFFF !important;
	text-decoration:none;
}
.bailian a:visited {
    color: #FFFFFF !important;
	text-decoration:none;
}
.heilian a:link {
    color: #000000 !important;
	text-decoration:none;
}
.heilian a:visited {
    color: #000000 !important;
	text-decoration:none;
}
/* 可折叠 改左边
.mw-collapsible span.mw-collapsible-toggle {
    float:left;
    margin-left:0;
    margin-right:1em;
}
可折叠 改左边 */
.mw-collapsible span.mw-collapsible-toggle{
    margin-right:10px;
}

.mw-parser-output a.external{
    background-image: none !important;
}








/* -------------------------------------- */
/* 基础容器和菜单项样式 */
/* -------------------------------------- */
#p-customnav .body-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

#p-customnav .menu-item {
    position: relative;
    margin: 0;
    padding: 0;
}

/* 统一菜单项链接的点击区域和基础样式 */
#p-customnav .menu-item a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35em 0.5em;
    min-height: 1.4em;
    text-decoration: none;
    line-height: 1.25em;
    color: inherit;
    transition: color 0.5s ease, background-color 0.1s ease;
}

/* 鼠标悬停时的样式 */
#p-customnav .menu-item a:hover {
    color: #F6F6F6;
    background-color: #888888;
    text-decoration: none;
}

/* -------------------------------------- */
/* 子菜单样式 */
/* -------------------------------------- */

#p-customnav .submenu {
    display: block; 
    position: absolute;
    top: -1px;
    left: 100%;
    min-width: 160px; 
    z-index: 10;
    border: 1px solid #ccc;
    border-radius: 4px; 
    background-color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    opacity: 0;
    pointer-events: none; 
    transform: translateX(5px);

    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

#p-customnav .has-submenu.submenu-open > .submenu {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}


/* -------------------------------------- */
/* 视觉指示器*/
/* -------------------------------------- */

/* 箭头样式*/
#p-customnav .menu-item.has-submenu > a::after {
    content: "▶";
    margin-left: 5px;
    font-size: 0.7em;
    color: #888;
    flex-shrink: 0;
    transform: rotate(0deg);
    transition: transform 0.3s ease-out, color 0.5s ease;
}

/* 悬停时箭头样式 */
#p-customnav .menu-item.has-submenu.submenu-open > a::after {
    content: "▼"; 
    color: #F6F6F6; 
    transform: rotate(0deg); 
}

#p-customnav .menu-item.has-submenu:hover > a::after {
    content: "▼";
    color: #F6F6F6;
}

#p-customnav .menu-item.has-submenu.submenu-open > a:hover::after {
    color: #F6F6F6;
}







.fox-intro-container {
    display: flex;
    gap: 0px;
    align-items: flex-start;
    padding: 0;
    border: none;
    max-width: 800px;
    overflow: hidden;
    background: transparent;
}
.fox-intro-container .image-wrapper {
    flex-shrink: 0;
    position: relative;
    height: 220px;
    width: 220px;
}
.fox-intro-container .image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: translateY(0%);
    transition: transform 0.4s ease, filter 0.3s ease;
    filter: brightness(100%);
    z-index: 10;
}
.fox-intro-container .image-wrapper:hover img {
    transform:scale(1.05);
    filter: brightness(150%) grayscale(100%);
    transition: filter 0.5s ease-in-out;
}
.fox-intro-container .image-wrapper .text-area {
    position: absolute;
    top: auto;
    bottom: 0;
    width: 100%;
    height: 50%;
    pointer-events: none;
    z-index: 20;
}
.fox-intro-container .image-wrapper .text-area .char {
    position: absolute;
    top: 110%;
    left: 45%;
    transform: translate(-50%, -50%) scale(0.1);
    color: #896c5d;
    text-shadow: -1px 0 0 #fff,1px 0 0 #fff, 0 -1px 0 #fff, 0 1px 0 #fff, 2px 1px 3px #27292d;
	opacity: 0;
	font-family: Tiejili !important;
}
.fox-intro-container .image-wrapper .text-area-1 .char {
    font-size: 40px;
}
.fox-intro-container .image-wrapper .text-area-2 .char {
    font-size: 35px;
}
@keyframes fox-pop-out-bounce {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.1);
    }
    50% {
        opacity: 1;
        transform: translate(var(--x-mid, 0), var(--y-mid, 0)) scale(1.2);
    }
    100% {
        opacity: 1;
        transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(1);
    }
}
.fox-intro-container .image-wrapper:hover .char {
    animation-name: fox-pop-out-bounce;
    animation-duration: 0.8s;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-fill-mode: forwards;
}
.fox-intro-container .image-wrapper:hover .char-1 {
    animation-delay: 0.1s;
    --x-mid: -60px; --y-mid: -50px;
    --x-end: -50px; --y-end: -40px;
}
.fox-intro-container .image-wrapper:hover .char-2 {
    animation-delay: 0.2s;
    --x-mid: 0px; --y-mid: -60px;
    --x-end: 0px; --y-end: -50px;
}
.fox-intro-container .image-wrapper:hover .char-3 {
    animation-delay: 0.3s;
    --x-mid: 60px; --y-mid: -50px;
    --x-end: 50px; --y-end: -40px;
}
.fox-intro-container .image-wrapper > pre {
    line-height: 0 !important;
    border: 0 !important;
    padding: 0em !important;
    margin: 0em !important;
    width: 100% !important;
    height: 100% !important;
    overflow-x: revert !important;
    overflow: hidden !important;
    margin-block: 0em 0em !important;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 15;
    background: transparent !important;
}
.fox-intro-container .image-wrapper > pre > span,
.fox-intro-container .image-wrapper > pre > span > a {
    display: block;
    width: 100%;
    height: 100%;
}
.fox-intro-container .image-wrapper .text-area pre {
    line-height: 0 !important;
    border: 0 !important;
    padding: 0em !important;
    margin: 0em !important;
    width: 100%;
    height: 100%;
    background: transparent !important;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden !important;
}


.fox-intro-container .image-wrapper p {
    line-height: 0 !important;
    border: 0 !important;
    padding: 0em !important;
    margin: 0em !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 18;
    background: transparent !important;
    display: block !important;
}

.fox-intro-container .image-wrapper p span[typeof="mw:File"] {
    display: block !important;
    width: 100%;
    height: 100%;
}

.fox-intro-container .image-wrapper p span[typeof="mw:File"] a,
.fox-intro-container .image-wrapper p span[typeof="mw:File"] img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}


.fox-intro-container .image-wrapper .char-4,
.fox-intro-container .image-wrapper .char-5,
.fox-intro-container .image-wrapper .char-6,
.fox-intro-container .image-wrapper .char-7,
.fox-intro-container .image-wrapper .char-8,
.fox-intro-container .image-wrapper .char-9 {
    left: 0;
    position: absolute;
    top: 110%;
    left: 45%;
    transform: translate(-50%, -50%) scale(0.1);
    color: #896c5d;
    text-shadow: -1px 0 0 #fff,1px 0 0 #fff, 0 -1px 0 #fff, 0 1px 0 #fff, 2px 1px 3px #27292d;
	opacity: 0;
	font-family: Tiejili !important;
}

@keyframes fox-slide-in {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.1);
    }
    50% {
        opacity: 1;
        transform: translate(var(--x-mid, 0), var(--y-mid, 0)) scale(1.2);
    }
    100% {
        opacity: 1;
        transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(1);
    }
}

.fox-intro-container .image-wrapper:hover .char-4,
.fox-intro-container .image-wrapper:hover .char-5,
.fox-intro-container .image-wrapper:hover .char-6,
.fox-intro-container .image-wrapper:hover .char-7,
.fox-intro-container .image-wrapper:hover .char-8,
.fox-intro-container .image-wrapper:hover .char-9 {
    animation-name: fox-slide-in;
    animation-duration: 0.6s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

.fox-intro-container .image-wrapper:hover .char-4 { animation-delay: 0.1s; --x-mid: -100px; --y-mid: -40px;--x-end: -95px; --y-end: -30px; }
.fox-intro-container .image-wrapper:hover .char-5 { animation-delay: 0.15s; --x-mid: -65px; --y-mid: -40px;--x-end: -60px; --y-end: -30px; }
.fox-intro-container .image-wrapper:hover .char-6 { animation-delay: 0.2s; --x-mid: -30px; --y-mid: -50px;--x-end: -25px; --y-end: -30px; }
.fox-intro-container .image-wrapper:hover .char-7 { animation-delay: 0.25s; --x-mid: 15px; --y-mid: -50px;--x-end: 10px; --y-end: -30px; }
.fox-intro-container .image-wrapper:hover .char-8 { animation-delay: 0.3s; --x-mid: 50px; --y-mid: -40px;--x-end: 45px; --y-end: -30px; }
.fox-intro-container .image-wrapper:hover .char-9 { animation-delay: 0.35s; --x-mid: 85px; --y-mid: -40px;--x-end: 80px; --y-end: -30px; }


.fox-intro-container .image-wrapper .question-mark {
    position: absolute;
    top: -20px;
    right: 5px;
    font-size: 50px;
    color: #EDEDED;
    text-shadow: -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, 2px 1px 3px #1a1b1d;
    opacity: 0;
    z-index: 30;
    font-family: Tiejili !important;
    transform: scale(1);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

@keyframes question-mark-pop {
    0% {
        opacity: 0;
        transform: translate(-50px, -10px) scale(0.1);
    }
    70% {
        opacity: 1;
        transform: translate(-10px, -50px) scale(1.3);
    }
    100% {
        opacity: 1;
        transform: translate(-20px, -40px) scale(1);
    }
}

.fox-intro-container .image-wrapper:hover .question-mark {
    animation: question-mark-pop 0.5s ease-out forwards;
}









/* ====================================================================== */
/* === 模板导航样式 (取代所有内联样式) === */
/* ====================================================================== */

/* 导航容器的基础样式 */
.custom-nav-wrapper {
    /* 底部边框是导航栏的关键视觉元素 */
    border-bottom: 1px solid #a2a9b1;
    margin-bottom: 1em;
    padding-top: 5px; /* 增加一点空间 */
}

/* 标签列表样式 */
.custom-nav-tabs {
    list-style: none; /* 移除列表点 */
    padding: 0; 
    margin: 0;
    display: flex; /* 水平排列 */
    white-space: nowrap; /* 防止换行 */
}

/* 单个标签项样式 */
.custom-nav-item {
    margin-right: 5px; 
    border: 1px solid #a2a9b1;
    border-bottom: none; 
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-color: #f8f9fa; /* 默认背景色，与 MediaWiki 保持一致 */
}

/* 链接（按钮）样式 */
.custom-nav-link {
    display: block; 
    padding: 8px 12px; 
    text-decoration: none; 
    color: #0645ad; /* MediaWiki 链接颜色 */
    transition: background-color 0.2s ease;
}

/* 选中标签 (当前页面) 的样式 - 关键 */
.current-page-active {
    background-color: #ffffff; /* 选中标签为白色 */
    font-weight: bold; /* 突出显示 */
    border-color: #a2a9b1 !important; 
    z-index: 1; 
    position: relative; /* 确保它浮在底部横线之上 */
}

/* 选中标签中的链接颜色 */
.current-page-active .custom-nav-link {
    color: #202122; /* 选中状态字体颜色变深 */
    padding-bottom: 9px; /* 略微增加，使白色背景覆盖底线 */
}

/* -------------------- 辅助样式 (可选) -------------------- */

/* 鼠标悬停效果 */
.custom-nav-item:hover:not(.current-page-active) {
    background-color: #f0f0f0;
}