萌娘百科

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);
	}
}

}