模板:Nav：修订间差异

删除的内容添加的内容

行内

2025年9月26日 (五) 19:42的最新版本

顶部导航

{{Nav}}

<bstyle>/*

*/
/*-------------全局其他部分调整---------------*/
.wiki-header, .bili-game-header-nav{ /* 隐藏头部，由t-nav替代 */
  display: none;
}
.mediawiki #list_util{ /* 兼容 list util */
  top: 70px;
}
.page-with-t-nav .top-news { margin: 12px 0;} /* 适配全站通知 */

/* ----  左侧面板 ---- */

:root {--c-text-b0: var(--c-text);}

.mw-echo-ui-overlay { z-index: 99999; }
.mediawiki .scp-panel{ z-index: 9999; }

.scp-panel {
    z-index: 9999;
    position: fixed;
    inset: 64px auto 0 0; /* top:0; left:0; bottom:0 */

    width: 700px;
    max-width:100%;
    transform: translateX(-110%);
    transition: transform .2s ease-in-out;
    will-change: transform;

    contain: paint;
    overflow: hidden;

    background-color: rgb(var(--c-white));
    box-shadow: 2px 0 8px rgba(0, 0, 0, .3);
}
.scp-panel.is-open {
    transform: translateX(0);
}

.scp-panel, 
.scp-panel a{ /* 文本颜色 */
  color: var(--c-text-b0) !important;
}
.scp-panel a:hover
.scp-panel a.selflink{
  color: var(--c-btn-normal) !important;
}

.scp-panel-content {
  height: 100%;
  width: 100%;
  padding: 20px 48px;
  overflow-y: auto;
}
.scp-close {
    position: absolute;
    top: 8px;
    right: 12px;
    border: 0;
    background: transparent;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

/* 顶栏打开面板的按钮 */
.mediawiki .scp-open{
    cursor: pointer;
    background: none;
    background-color: unset;
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mediawiki .scp-open:before{ 
    content: ""; width: 32px;  height: 32px; vertical-align: middle;
    display: inline-block;  background-color: currentColor;
    -webkit-mask: url(https://patchwiki.biligame.com/images/tools/e/e6/s4qg8446q4wlfrazswwfrkbu4h5tl27.svg) no-repeat center; -webkit-mask-size: 32px 32px; 
    mask: url(https://patchwiki.biligame.com/images/tools/e/e6/s4qg8446q4wlfrazswwfrkbu4h5tl27.svg) no-repeat center; mask-size: 32px 32px;
}


.scp-action-btn-group{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(3em, 1fr));
    gap: 15px;
    justify-items: center;
}
.scp-action-btn{ /* 快捷操作按钮 */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 8px;
  font-size: 1em;
  text-align: center;
  flex: 1;
  margin: 0 -0.5em;
}
.scp-action-btn a {
  margin-top: -2em;
  padding: 0.5em;
  padding-top: 2em;
}

.svg-b-edit:before{ /* 编辑svg */
  content:"";
  background: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 42H43' stroke='%235F6976' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11 26.7199V34H18.3172L39 13.3081L31.6951 6L11 26.7199Z' fill='none' stroke='%235F6976' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
  height: 2em;
  width: 2em;
  background-size: 24px;
}


.svg-b-linkout:before{ /* svg */
  content:"";
  background: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 12V4H32V12' stroke='%235F6976' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M32 36V44H16V36' stroke='%235F6976' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18 24L4 24' stroke='%235F6976' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M44 24L30 24' stroke='%235F6976' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24 34V14' stroke='%235F6976' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M39 19L44 24L39 29' stroke='%235F6976' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9 19L4 24L9 29' stroke='%235F6976' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
  height: 2em;
  width: 2em;
  background-size: 24px;
}

.svg-b-linkin:before{ /* svg */
  content:"";
  background: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 12V4H32V12' stroke='%235F6976' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M32 36V44H16V36' stroke='%235F6976' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18 24L4 24' stroke='%235F6976' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M44 24L30 24' stroke='%235F6976' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24 34V14' stroke='%235F6976' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13 19L18 24L13 29' stroke='%235F6976' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M35 19L30 24L35 29' stroke='%235F6976' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
  height: 2em;
  width: 2em;
  background-size: 24px;
}

.svg-b-switch:before{ /* switch svg */
  content:"";
  background: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M42 19H5.99998' stroke='%235F6976' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M30 7L42 19' stroke='%235F6976' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.79897 29H42.799' stroke='%235F6976' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.79895 29L18.799 41' stroke='%235F6976' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
  height: 2em;
  width: 2em;
  background-size: 24px;
}

.svg-b-refresh:before{ /* purge svg */
  content:"";
  background: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M42 8V24' stroke='%235F6976' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6 24L6 40' stroke='%235F6976' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M42 24C42 14.0589 33.9411 6 24 6C18.9145 6 14.3216 8.10896 11.0481 11.5M6 24C6 33.9411 14.0589 42 24 42C28.8556 42 33.2622 40.0774 36.5 36.9519' stroke='%235F6976' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
  height: 2em;
  width: 2em;
  background-size: 24px;
}

.svg-b-history:before{ /* history svg */
  content:"";
  background: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.81836 6.72729V14H13.0911' stroke='%235F6976' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 24C4 35.0457 12.9543 44 24 44V44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C16.598 4 10.1351 8.02111 6.67677 13.9981' stroke='%235F6976' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24.005 12L24.0038 24.0088L32.4832 32.4882' stroke='%235F6976' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
  height: 2em;
  width: 2em;
  background-size: 24px;
}

.svg-b-link:before{ /* link svg */
  content:"";
  background: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24.7073 9.56521L9.85801 24.4145C6.34329 27.9292 6.34329 33.6277 9.85801 37.1424V37.1424C13.3727 40.6571 19.0712 40.6571 22.5859 37.1424L40.2636 19.4647C42.6067 17.1216 42.6067 13.3226 40.2636 10.9794V10.9794C37.9205 8.63628 34.1215 8.63628 31.7783 10.9794L14.1007 28.6571C12.9291 29.8287 12.9291 31.7282 14.1007 32.8997V32.8997C15.2722 34.0713 17.1717 34.0713 18.3433 32.8997L33.1925 18.0505' stroke='%235F6976' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
  height: 2em;
  width: 2em;
  background-size: 24px;
}

.svg-b-data:before{ /* link svg */
  content:"";
  background: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M44.0001 11C44.0001 11 44 36.0623 44 38C44 41.3137 35.0457 44 24 44C12.9543 44 4.00003 41.3137 4.00003 38C4.00003 36.1423 4 11 4 11' stroke='%235F6976' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M44 29C44 32.3137 35.0457 35 24 35C12.9543 35 4 32.3137 4 29' stroke='%235F6976' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M44 20C44 23.3137 35.0457 26 24 26C12.9543 26 4 23.3137 4 20' stroke='%235F6976' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cellipse cx='24' cy='10' rx='20' ry='6' fill='none' stroke='%235F6976' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
  height: 2em;
  width: 2em;
  background-size: 24px;
}

.scp-section-title{
  font-size: 1.5em;
  font-weight: bold;
  color: var(--c-text-b0);
  background: var(--c-text-b3);
  padding: 8px 10px;
}
.scp-section-title:after{ /* 下三角 svg */
  content:"";
  float: right;
  width:32px;
  height:32px;
  background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iI2I4YmVjNiIgY2xhc3M9ImJpIGJpLWNoZXZyb24tZG93biIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xLjY0NiA0LjY0NmEuNS41IDAgMCAxIC43MDggMEw4IDEwLjI5M2w1LjY0Ni01LjY0N2EuNS41IDAgMCAxIC43MDguNzA4bC02IDZhLjUuNSAwIDAgMS0uNzA4IDBsLTYtNmEuNS41IDAgMCAxIDAtLjcwOCIvPgo8L3N2Zz4=) no-repeat center;
  background-size: 16px;
  opacity: 0.5;
}

.sec-btns {
    display: grid;
    gap: 16px 6px;
    margin: 16px 0;
    grid-template-columns: repeat(auto-fill, minmax(9em, 1fr));
}
.sec-btn{
  display: flex;
  align-items: center;
  gap: 6px;
}

.svg-b-file-s::before{
  content:"";
  background: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 44H38C39.1046 44 40 43.1046 40 42V14H30V4H10C8.89543 4 8 4.89543 8 6V42C8 43.1046 8.89543 44 10 44Z' fill='none' stroke='%235F6976' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M30 4L40 14' stroke='%235F6976' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='24' cy='27' r='5' fill='none' stroke='%235F6976' stroke-width='3'/%3E%3Cpath d='M24 19V22' stroke='%235F6976' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24 32V35' stroke='%235F6976' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M29.8281 21L27.7068 23.1213' stroke='%235F6976' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M19.8281 31L17.7068 33.1213' stroke='%235F6976' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18 21L20.1213 23.1213' stroke='%235F6976' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M28 31L30.1213 33.1213' stroke='%235F6976' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16 27H17.5H19' stroke='%235F6976' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M29 27H30.5H32' stroke='%235F6976' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")no-repeat center;
  background-size: contain;
  height: 24px;
  width: 24px;
  opacity: 0.7;
}


/*-------------顶栏左侧---------------*/

/* 顶栏左侧 */
.t-nav{
  display: flex;
  width: 100%;
  height: 64px;
  justify-content: space-between;
  background:var(--c-bg-nav);
  color:var(--c-text-b3);
}
.t-nav .t-nav-titles{
    display:flex;
    max-width: 100%;
    height:64px;
    left: 0;
    top: 0;
    z-index: 9998;
    cursor: pointer;
    font-size:16px;
}

.t-nav .t-nav-titles>span{
  display:inline-block;
  width: 120px;
  text-align: center;
  transition: all 0.2s ease-out;
}
@media (max-width: 1200px) {
  .t-nav .t-nav-titles>span{
    width: 90px;
  }
}
.t-nav .t-nav-titles>span.active,
.t-nav .t-nav-titles>span:hover,
.t-nav .t-nav-titles>span:has(a.selflink){
  color: var(--c-btn-normal);
  background: var(--c-bg-nav);
  border-bottom: 4px solid var(--c-btn-normal);
}

.t-nav .t-nav-titles a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  color:var(--c-text-b3);
  background:var(--c-bg-nav);
  text-decoration: none !important;
}
@media (max-width: 600px) {
  .t-nav .t-nav-titles a{
    max-width:2.5em;
  }
}
.t-nav .t-nav-titles>span:hover a,
.t-nav a.selflink,
.t-nav .active a{
  color: var(--c-btn-normal);
}

/* 菜单和logo的大小 */
.t-nav .d-e-title.scp-menu{
  width: 60px;
}
.t-nav .d-e-title.wiki-logo{ width: 180px; }
.t-nav .d-e-title.wiki-logo a{ font-size: 28px; }
@media (max-width: 1200px) {
  .t-nav .d-e-title.wiki-logo{ width: 130px; }
  .t-nav .d-e-title.wiki-logo a{ font-size:20px;}
}
@media (max-width: 768px) {
  .t-nav .d-e-title.wiki-logo{ display:none !important; }
}


/*-------------顶栏右侧---------------*/
.t-nav-right{
    display:flex;
    align-items: center;
    gap:16px;
}
@media (max-width: 1200px) { /* 窄屏压缩边距 */
  .t-nav-right{ gap:4px; }
}
@media (max-width: 992px) { /* 小屏幕直接隐藏 */
  .t-nav-right{ display:none !important; }
}

/* 我的消息 小铃铛 */
#navNote{
  position: static !important; float: none !important; display: block !important;
  padding: 0; margin: 0;
  width: 55px;
}
#navNote svg{
  width: 35px; 
  filter: invert(0.95);
}
#navNote a{ color: var(--c-text-b3) !important; }

/* 头像 */
.mediawiki .bili-game-header-nav-user{
  margin-left: 15px; /* 视觉上让头像的左右间距相等 */
}
.mediawiki .bili-game-header-user-login {
  margin: 0 16px;
}
.mediawiki .bili-game-header-user-login .bili-game-header-user-popper{
  z-index:9999;
}
.mediawiki .bili-game-header-user-login img{
  z-index:10000;
}

/* 搜索栏 */
.mediawiki .t-nav-right .nav-search-box.wiki-search-box *{ background-color: unset !important; } /* 避免js污染背景 */
.mediawiki .t-nav-right .nav-search-box.wiki-search-box{
  background-color: var(--c-text-b2) !important;
  width: min(max(calc(100vw - 1100px), 150px), 280px); /* 动态宽度，1100px是左侧菜单 + 右侧按钮的宽度 */
}
.mediawiki .t-nav-right #simpleSearch1 #searchInput {
    font-size: 18px;
    height: 35px;
}

/*

*/</bstyle>