A new userstyle
/* ==UserStyle==
@name 萌娘百科
@namespace github.com/openstyles/stylus
@version 1.1.0
@description A new userstyle
@author Me
@preprocessor stylus
@var range border "主内容边距" [14, 10, 30, 2, 'em']
@var color card-bg "卡片背景颜色" #ffffffd1
@var range blur "卡片背景模糊半径" [14, 0, 30, 2, 'px']
@var range border-radius "卡片圆角大小" [5, 0, 20, 1, 'px']
@var select COLOR1 "主配色" {
"默认绿": "#2eaa4e",
"姨妈红": "#e33e33",
"浅草绿": "#00bb6a",
"梦析蓝": "#00b6ff",
"幻想紫": "#8a72ff",
}
@var select COLOR2 "次配色（保持与主配色相同就行）" {
"默认绿": "#2eaa4e30",
"姨妈红": "#e33e3330",
"浅草绿": "#00bb6a30",
"梦析蓝": "#00b6ff30",
"幻想紫": "#8a72ff30",
}
@var checkbox heimu "强制显示黑幕" 0
==/UserStyle== */
@-moz-document domain("zh.moegirl.org.cn") {
:root {
--animate: .3s ease-in-out;
--card-color: #ffffff57;
--card-border: #00000014;
}
if heimu {
.heimu, .heimu rt {
transition: var(--animate);
background-color: #25252538;
}
}
/* --部分全局控件-- */
/* 链接颜色 */
a, .bilibili-toggle:hover, .mw-parser-output a.external, #mw-panel .portal .body li a {
color: var(--COLOR1);
}
/* 回到顶部 */
.backToTop {
transition: var(--animate);
width: 30px;
padding: 5px;
background-color: var(--card-bg);
color: #000;
position: fixed;
right: 0;
bottom: 100px;
opacity: .7;
border-radius: var(--border-radius) 0 0 var(--border-radius);
}
.backToTop:hover {
opacity: 1;
}
/* 侧边目录 */
.tocfloat {
position: fixed;
top: auto;
bottom: 20px;
z-index: 99;
}
.tocfloatlabel {
transition: var(--animate);
width: 30px;
padding: 5px;
background-color: var(--card-bg);
color: #000;
border: none;
box-sizing: content-box;
opacity: .7;
border-radius: var(--border-radius) 0 0 var(--border-radius);
left: -40px;
}
.tocfloatlabel:hover {
opacity: 1;
}
.tocfloat .tocfloatcontent {
border: none;
background: var(--card-bg) !important;
backdrop-filter: blur(var(--blur));
border-radius: var(--border-radius) 0 0 var(--border-radius);
}
/* 页面指示&功能条*/
#left-navigation, #right-navigation {
background: var(--card-bg) !important;
backdrop-filter: blur(var(--blur));
border-radius: var(--border-radius);
margin-top: 50px;
}
div.vectorTabs {
padding: 0;
}
#left-navigation .vectorTabs li a, #right-navigation .vectorTabs li a {
height: 40px;
padding: 0 .8em;
color: var(--COLOR1);
text-align: center;
line-height: 40px;
}
div#mw-head div.vectorMenu h3 {
padding-right: 0.8em;
}
div.vectorMenu h3 span {
height: 40px;
padding: 0 .8em;
text-align: center;
line-height: 40px;
}
div.vectorMenu h3 span:after {
content: '';
position: absolute;
top: 0.15em;
right: -5px;
}
div.vectorMenu div.menu {
position: absolute;
top: 2.5em;
left: 0;
background: #fff;
border: none;
border-radius: var(--border-radius);
box-shadow: 0 5px 10px 0 #0000002b;
z-index: 2;
}
#p-search {
margin-left: 0;
margin-right: 0;
height: 40px;
}
#p-search form, #p-search input {
margin: 0;
}
#simpleSearch {
background: var(--card-color);
width: 12em;
min-width: 5em;
max-width: 20em;
padding-right: 1.4em;
height: 28px;
margin: 6px;
border: none;
border-radius: var(--border-radius);
}
#simpleSearch #searchInput {
width: 100%;
padding: 0 10px;
height: 100%;
font-size: 13px;
background: #fff0;
}
#left-navigation, #right-navigation, div.vectorTabs ul li.selected {
background: var(--card-bg) !important;
border-radius: var(--border-radius);
}
/* 侧边导航栏 */
div#mw-panel {
text-shadow: none;
}
div#mw-panel>div:nth-child(2) {
border-radius: 0 var(--border-radius) 0 0;
}
div#mw-panel>div:last-child {
border-radius: 0 0 var(--border-radius) 0;
}
.sideBarPic.skin-vector:not(.DeceasedPerson) div#mw-panel div.portal {
background-color: var(--card-bg);
backdrop-filter: blur(var(--blur));
}
.suggestions-results {
border: none;
padding: 5px;
background-color: var(--card-bg);
backdrop-filter: blur(var(--blur));
}
.suggestions-special {
background-color: var(--card-bg);
backdrop-filter: blur(var(--blur));
border: none;
margin: 0;
padding: 5px;
}
/* 搜索建议 */
.suggestions {
margin: 0;
box-shadow: 0 5px 10px 0 #0000002b;
border-radius: var(--border-radius);
}
.suggestions-result {
transition: var(--animate);
padding: 2px 5px;
border-radius: var(--border-radius);
}
.suggestions-special {
transition: var(--animate);
}
.suggestions-result-current {
background-color: var(--COLOR1);
color: #fff;
padding: 5px 10px;
}
/* 卡片背景 */
.ns-0 div#content, .ns-0 div#p-cactions li a:hover, .ns-0 div#p-cactions li.selected a {
background-color: var(--card-bg);
backdrop-filter: blur(var(--blur));
border: none;
border-radius: var(--border-radius) var(--border-radius) 0 0;
}
#mw-panel .portal .body {
background: none;
border-top: 1px solid var(--card-border);
}
/* --页头-- */
#mw-head {
z-index: 99;
}
/* 用户控制栏 */
#p-personal {
position: absolute;
top: 0;
right: 0;
background-color: var(--card-bg) !important;
backdrop-filter: blur(var(--blur));
padding: 5px 10px !important;
box-shadow: 0 5px 8px #0000004f !important;
border-radius: 0 0 0 var(--border-radius);
}
#pt-notifications-notice .mw-echo-notifications-badge:after {
padding: 0 .4em;
border: none;
border-radius: var(--border-radius);
background-color: var(--card-bg) !important;
backdrop-filter: blur(var(--blur));
color: var(--COLOR1);
box-shadow: 0 1px 3px #0003;
}
/* --百科内容-- */
/* 公告 */
#siteNotice {
background-color: var(--card-color);
padding: 15px;
border-radius: var(--border-radius);
}
#localNotice {
margin: 0;
}
/* -各级标题- */
/* h1 */
#content #firstHeading {
transition: var(--animate);
font-weight: 500;
text-align: center;
padding-left: 0;
margin: 15px 0;
border-bottom: none;
font-family: 'Linux Libertine','Georgia','Times',serif;
}
#content #firstHeading:hover {
color: var(--COLOR1);
text-shadow: 0 1px 2px var(--COLOR1);
}
#content #firstHeading:after {
transition: var(--animate);
display: block;
content: '';
position: absolute;
height: 1px;
width: 50%;
margin-left: 25%;
background: var(--card-border);
border-radius: var(--border-radius);
}
#content #firstHeading:hover:after {
transition: var(--animate);
display: block;
content: '';
height: 2px;
width: 60%;
margin-left: 20%;
margin-top: 3px;
background: var(--COLOR1);
box-shadow: 0 1px 2px var(--COLOR1);
}
/* h2 */
#content h2 {
transition: var(--animate);
margin: 1em 0;
border-bottom: 1px solid var(--card-border);
}
#content h2:hover {
color: var(--COLOR1);
border-bottom: 1px solid var(--COLOR1);
}
/* -小型信息卡片- */
/* 信息 */
#content .infoBox {
border-radius: var(--border-radius);
overflow: hidden;
border: 1px solid var(--card-border);
}
.mw-parser-output .infoBoxContent {
background: var(--card-color);
border: none;
}
.infoBoxIcon {
padding: .5em 0 .5em 1em;
}
.infoBoxText {
padding: .5em 1em .5em 1.2em;
}
/* 目录 */
.mw-parser-output #toc {
background: var(--card-color);
border: 1px solid var(--card-border);
border-radius: var(--border-radius);
padding: 15px;
}
/* 视频 */
.bilibili-video-container {
transition: var(--animate);
background: var(--card-color) !important;
border: 1px solid var(--card-border);
border-radius: var(--border-radius);
}
.bilibili-video-container .bilibili-title {
padding: .2em 6.5em .2em .7em;
position: relative;
}
.bilibili-video-container.onshow .bilibili-title {
border-bottom: 1px solid var(--card-border);
}
.bilibili-video-container .bilibili-widescreen {
max-width: 100%;
background-color: var(--card-color) !important;
border: 1px solid var(--card-border);
padding: .5em;
border-radius: var(--border-radius);
right: calc(-2rem - 25px);
width: 2.5em;
line-height: 1.2em;
}
.bilibili-iframe-container {
transition: var(--animate);
margin: 0;
padding: 0;
position: relative;
border: none;
overflow: hidden;
border-radius: var(--border-radius);
display: block !important;
width: auto !important;
height: 0 !important;
opacity: .3;
}
.bilibili-video-container.onshow .bilibili-iframe-container {
width: 665px !important;
height: 441px !important;
margin: 8px;
opacity: 1;
}
.bilibili-video-container.onshow.widescreen .bilibili-iframe-container {
width: 100% !important;
height: 464px !important;
margin: 8px;
opacity: 1;
}
/* 引索快速预览 */
.mwe-popups {
background: var(--card-bg);
backdrop-filter: blur(var(--blur));
-webkit-box-shadow: 0 20px 80px rgba(0,0,0,0.3);
box-shadow: 0 20px 80px rgba(0,0,0,0.3);
border-radius: var(--border-radius);
}
.mwe-popups.mwe-popups-image-tri .mwe-popups-extract {
padding-top: 20px;
margin-top: 190px;
margin-bottom: 42px;
}
.mwe-popups .mwe-popups-container footer {
padding: 8px 16px;
}
.mwe-popups .mw-ui-icon {
transition: var(--animate);
border: 1px solid #fff0;
margin: 0;
width: 25px;
min-width: 25px;
max-width: 25px;
}
.mwe-popups .mw-ui-icon:hover {
background: var(--card-color);
border-color: var(--card-border);
}
.mw-ui-icon.mw-ui-icon-element:before {
width: 25px;
margin: 0;
}
.mwe-popups .mwe-popups-extract[dir='ltr']:after {
display: none;
}
#mwe-popups-settings {
border: none;
box-shadow: 0 2px 10px rgba(0, 0, 0, .14);
border-radius: var(--border-radius);
}
#mwe-popups-settings header {
border-bottom: 1px solid var(--card-border);
}
#mwe-popups-settings .mw-ui-icon.mw-ui-icon-element {
margin-left: 20px;
}
.mw-ui-button.mw-ui-progressive {
transition: var(--animate);
background-color: var(--COLOR1);
color: #fff;
border: none;
border-radius: var(--border-radius);
}
.mw-ui-button.mw-ui-progressive:hover {
background-color: var(--COLOR1);
opacity: .8;
}
/* -表格- */
/* 表格1 */
#content table.navbox {
border: 1px solid var(--border-radius);
padding: 8px;
border-radius: var(--border-radius);
background-color: var(--card-color);
}
#content table.navbox td {
border-color: #fff0 !important;
}
#content table.navbox .navbox-subgroup {
background-color: var(--card-color);
}
/* 表格2 */
#content .wikitable {
background-color: var(--card-color) !important;
border: none !important;
}
table.wikitable > tr > th, table.wikitable > tr > td, table.wikitable > * > tr > th, table.wikitable > * > tr > td {
border: 1px solid var(--card-color);
padding: 0.2em 0.4em;
}
/* --页脚-- */
#footer {
background-color: var(--card-bg);
backdrop-filter: blur(var(--blur));
border-radius: 0 0 var(--border-radius) var(--border-radius);
margin-bottom: 20px !important;
}
#footer-info-copyright {
transition: var(--animate);
background: none;
min-height: 10px;
opacity: 0;
height: 10px;
overflow: hidden;
}
#footer-info-copyright:hover {
opacity: 1;
height: 120px;
}
#footer-moegirl {
padding-left: 0;
}
#footer-moegirl h4 {
color: var(--COLOR1);
font-size: 18px;
font-weight: normal;
margin-bottom: 0;
}
#footer #footer-info li {
line-height: 1em;
}
/* --自动匹配分辨率-- */
@media screen and (min-width: 982px) {
.mw-body {
transition: var(--animate);
margin: 0 var(--border);
padding: 1.25em 1.5em 1.5em 1.5em;
}
#footer {
transition: var(--animate);
margin: 0 var(--border);
padding: 1.25em;
}
#right-navigation {
transition: var(--animate);
margin-right: var(--border);
}
#left-navigation {
transition: var(--animate);
margin-left: var(--border);
}
}
}