加帕里图书馆 - 兽娘动物园中文维基
动物朋友 けものフレンズ KemonoFriends百科
MediaWiki:Vector.css
注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的更改的影响。
- Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
- Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
- Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5。
/* 此处所有CSS将为使用Vector皮肤的用户加载 */
/* 兽耳 */
.custom-amphibian-logo {
position: absolute;
width: 70px;
height: 70px;
clip-path: polygon(39% 20.5%, 35.6% 19%, 31% 18.7%, 26.47% 21.02%, 23% 24%, 19.25% 28.62%, 15.74% 33.89%, 13.26% 39.73%, 11.5% 46%, 46.4% 46%, 43.75% 35.28%, 42.19% 26.62%, 41.09% 23.56%);
top: -25px;
left: 10px;
z-index: 10;
}
.custom-amphibian-logo-right {
position: absolute;
width: 70px;
height: 70px;
clip-path: polygon(39% 20.5%, 35.6% 19%, 31% 18.7%, 26.47% 21.02%, 23% 24%, 19.25% 28.62%, 15.74% 33.89%, 13.26% 39.73%, 11.5% 46%, 46.4% 46%, 43.75% 35.28%, 42.19% 26.62%, 41.09% 23.56%);
transform: scaleX(-1);
top: -25px;
right: 10px;
z-index: 10;
}
ul {
list-style-image: url('https://wiki.japari-cn.com/images/kemonos.png');
margin-inline-start: 0;
margin-left: 0;
-webkit-margin-start: 0;
list-style-position: inside;
}
.mw-collapsible-toggle {
color: #ffffff;
}
.navbox {
border-radius: 15px;
}
.navbox-even {
border-radius: 20px;
}
.mw-collapsible-toggle-default .mw-collapsible-text {
color:#ffffff;
}
.mw-collapsible-toggle-default .mw-collapsible-text:hover {
color:#ffffff;
}
.navbox th, .navbox-title {
border-radius: 20px;
}
.navbox {
position: relative;
}
@media (max-width: calc(639px)) {
.mw-parser-output table {
display: revert;}
}
a.mw-selflink {
color: #c5c5c5 !important;
}
#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: 180px;
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-search-box-input {
height: 3em;
border: 1px solid #d2d3d4;
}
.vector-search-box form {
margin: 0em 0 0;
}
.searchButton[name='go'] {
background: no-repeat center / 1.7em url(/skins/Vector/resources/skins.vector.styles.legacy/images/search.svg);
opacity: 0.67;
}
.searchButton {
right: 5px;
}
body.page-主馆 h1.firstHeading {
display: none;
}
body.page-主馆 .toc {
display: none !important;
}
body {
background-image: linear-gradient(to top, #e2f3f7 0%, transparent 30%);
background-attachment: fixed;
}
body.page-主馆 div#content.mw-body {
/* background-image: linear-gradient(to bottom, #bee1e9 0%, transparent 70%); */
background-position: center top;
background-size: 100% auto;
}
@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: none;
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 {
display: block;
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;
}
.vector-body h3 {
margin-top: 0em;
}
.fox-intro-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 15px;
padding: 0;
margin: 0;
height: min-content;
}
.fox-intro-container .image-wrapper {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: transform 0.4s ease, box-shadow 0.4s ease;
overflow: hidden;
}
.fox-intro-container .image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform: scale(1);
filter: brightness(100%);
transition: transform 0.5s ease, filter 0.5s ease;
z-index: 10;
border-radius: 12px;
}
.fox-intro-container .image-wrapper:hover img {
transform: scale(1.05);
filter: grayscale(15%) brightness(95%);
}
.fox-intro-container .image-wrapper .text-area {
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
height: 50px;
display: flex !important;
justify-content: center !important;
align-items: center !important;
z-index: 50 !important;
transform: translateY(10px);
background: rgba(255, 255, 255, 0.75);
backdrop-filter: blur(2px);
transition: all 0.4s ease;
pointer-events: none !important;
border-bottom-left-radius: 12px !important;
border-bottom-right-radius: 12px !important;
}
.fox-intro-container .image-wrapper:hover .text-area {
background: rgba(255, 255, 255, 0.95) ;
transform: translateY(0px) ;
}
.text-area pre {
font-family: Tiejili, "Microsoft YaHei", sans-serif;
}
.pre, .mw-code {
font-family: Tiejili, "Microsoft YaHei", sans-serif;
}
.fox-intro-container .image-wrapper .text-area .label-text {
color: #333333 !important;
opacity: 1 !important;
font-family: Tiejili, "Microsoft YaHei", sans-serif ;
font-weight: normal !important;
font-size: 18px !important;
text-align: center !important;
text-shadow: -1px 0 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, 0 1px 0 #fff !important;
transition: color 0.4s ease;
position: static !important;
}
.fox-intro-container .image-wrapper:hover .text-area .label-text {
color: #000000 !important;
}
.fox-intro-container .image-wrapper .text-area pre{
font-size: 17px;
color: #616060;
}
.fox-intro-container .image-wrapper > pre,
.fox-intro-container .image-wrapper > p,
.fox-intro-container .image-wrapper > pre > span,
.fox-intro-container .image-wrapper .text-area pre {
line-height: initial !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
}
.fox-intro-container .image-wrapper > pre,
.fox-intro-container .image-wrapper > p {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 15 !important;
overflow: visible !important;
}
.fox-intro-container .image-wrapper > p span[typeof="mw:File"] {
display: block !important;
width: 100% !important;
height: 100% !important;
}
.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;
border-radius: 12px !important;
}
.mw-heading3, h3 {
top: -5px;
}
/* ====================================================================== */
/* === 模板导航样式 (取代所有内联样式) === */
/* ====================================================================== */
/* 导航容器的基础样式 */
.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;
}
.wikitable.row-hover tr:hover {
background-color: #ffffcc;
}
.wikitable.row-hover th:hover {
background-color: #f2f2f2;
}
.ticket-card-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 350px));
gap: 30px;
padding: 0;
margin: 0;
justify-content: center;
}
.ticket-card {
background-color: #f7f7f7;
border-radius: 8px;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
overflow: hidden;
z-index: 1;
}
.ticket-card:hover {
transform: translateY(-2px);
}
/* --- 剪票口 Header 样式 --- */
.ticket-header {
background-color: #e4e5e5 !important;
padding: 0px 0px;
text-align: center;
position: relative;
border-radius: 8px 8px 0 0;
}
.ticket-headerbg::after {
content: "";
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-repeat: no-repeat;
opacity: 1;
z-index: 1;
}
.ticket-header1::after {
background-image: url('images/8/88/Dokuwiki.png');
background-position: 120% 35%;
}
.ticket-header2::after {
background-image: url('images/a/aa/Help.png');
background-position: 120% 35%;
}
.ticket-title {
z-index: 2;
position: relative;
margin: 0;
font-size: 1.2em;
font-weight: bold;
letter-spacing: 1px;
color: #fff;
text-shadow:
1px 1px 0 #000,
-1px 1px 0 #000,
1px -1px 0 #000,
-1px -1px 0 #000;
}
/* --- 虚线分隔符样式 (核心的剪票连接线) --- */
.ticket-divider {
top: -4px;
height: 2px;
margin: 0 10px;
position: relative;
background-image: repeating-linear-gradient(to right, #ffffff00 0, #ffffff00 8px, #ffffff 8px, #ffffff 20px, #ffffff 20px);
background-size: 100% 1px;
z-index: 100;
}
.ticket-divider::before,
.ticket-divider::after {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
background-color: #f7f7f7;
border: 1px solid #ddd;
border-radius: 50%;
z-index: 10;
background-color: #fff;
}
.ticket-divider::before {
left: -20px;
}
.ticket-divider::after {
right: -20px;
}
/* --- 内容区样式 --- */
.ticket-content {
top: 0px;
position: relative;
padding: 15px 20px;
color: #333;
font-size: 13px;
}
.content-list {
list-style: none;
padding: 0;
margin: 0;
}
.content-list li {
padding: 8px 0;
border-bottom: 1px dashed #eee;
font-size: 0.95em;
transition: color 0.2s ease;
}
.content-list li:last-child {
border-bottom: none;
}
.content-list li:hover {
color: #5d9cec;
}
.main-content-wrapper {
display: grid;
align-items: start;
grid-template-columns: 1fr 350px;
gap: 15px;
margin: 0 auto;
padding: 20px;
}
.left-column-wrapper {
display: flex;
flex-direction: column;
gap: 30px;
height: min-content;
}
.ticket-card-container-left {
display: block;
column-width: 240px;
column-gap: 5px;
padding: 0;
margin: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.ticket-card-container-left .ticket-card {
width: 240px;
max-width: 100%;
break-inside: avoid;
margin-bottom: 30px;
vertical-align: top;
}
@media (max-width: 850px) {
.main-content-wrapper {
grid-template-columns: 1fr;
}
}
.ticket-header, .ticket-content {
height: auto;
background-color: transparent;
}