MediaWiki:Common.css

/* 这里放置的CSS将应用于所有皮肤 */
@font-face{font-family:'Mongolian Baiti'; src:local('Mongolian Baiti'); size-adjust:135%}
@font-face{font-family:'Microsoft Himalaya'; src:local('Microsoft Himalaya'); size-adjust:150%}

/* 自定义变量 */
:root{
    --color-1: #343f5d; /* 第一主题色 */
    --color-2: #788c97; /* 第二主题色 */
    --font-color-1: #ffffff; /* 搭配主题色-文本颜色1 */
    --font-color-2: #ffffff; /* 搭配主题色-文本颜色2 */
    --font-color-3: #000000; /* 默认文本颜色 */
    --page-color-1: #ffffff; /* 页面背景色1 */
    --page-color-2: #f2f4f7; /* 页面背景色2 */
    --page-color-3: #dcdcdc; /* 边框颜色 */
    --background-color: none; /* 模板背景色 */
}

/* 文章杂项 */
i, em{ /*斜体*/
    margin-right: 2px;}
ol{ /*有序列表*/
    margin-inline-start: 1.6em;
	padding-inline-start: 0;}
pre{ /*预格式化文本（代码块）*/
    line-height: 17px !important;}
code{ /*代码*/
    margin: 0 1px;}
rt{ /*顶标*/
    font-size: 85%;
}


/* 杂项 */
@media (max-width:520px){
    fieldset tr{ /*系统表单组*/
        display:flex;
        flex-direction: column;}}
fieldset input, fieldset textarea{ /*系统表单*/
    box-sizing: border-box;
    max-width: calc(100vw - 100px);}
body.mobile fieldset input, body.mobile fieldset textarea{ /*移动视图-系统表单*/
    box-sizing: border-box;
    max-width: calc(100vw - 80px);}
.searchresult{ /*搜索结果*/
    word-break: break-word;
}


/* 编辑器 */
.wikiEditor-ui-toolbar .page-characters div span{ /*编辑器-特殊字符*/
    height: unset;}
.wikiEditor-ui-text{ /*编辑器文本*/
    word-break: break-all;}
.wikiEditor-ui .ace_editor{ /*代码编辑器文本*/
    font-family: 'Menlo','Consolas','Liberation Mono','Fira Code','Courier New', monospace;}
.mw-highlight pre, .mono{ /*代码块*/
    font-family: 'Menlo','Consolas','Liberation Mono','Fira Code','Courier New', sans-serif;}
body.mobile .mono{ /*移动视图-代码块*/
    white-space: pre;}
body.mobile .wikiEditor-ui-toolbar .page-characters div span{ /*移动视图-编辑器-特殊字符*/
    font-family: sans-serif}
body.mobile #msupload-div{ /*移动视图-上传文件栏*/
    display: none
}


/* 图片 */
#content figure img{ /*图框图片*/
    max-width: 100% !important;
    width: -webkit-fill-available !important;
    width: -moz-available !important;
    height: auto;}
@media (max-width: 370px){ /*手机宽度下的图库图片*/
    #content .mw-gallery-traditional{
        display: grid;
        grid-template-columns: calc(50% - 4px) calc(50% - 4px);
        margin: 0;
        padding: 0;
        column-gap: 8px;}
    #content .gallerytext{
        padding: 0.4em 1px 0.6em 1px;}
    #content .thumb, #content .gallerybox{
        margin: 0;
        width: 100% !important;
        box-sizing: border-box;}}
#mw-category-media .galleryfilename-truncate{ /*分类图库*/
    white-space: normal;
    overflow: visible;
}


/* 特殊:最近更改、分类页 */
@media (max-width: 850px){
    .mw-changeslist-legend{ /*提示框*/
        margin: 0;
        float: none;}
    .mw-enhanced-rc{ /*更改记录*/
        margin: 0 !important;
        font-size: 14px;}
    .mw-changeslist-separator:empty:before{ /*两点*/
        display: none;}
    td.mw-enhanced-rc{ /*右侧类型和时间*/
        font-family: inherit;}
	.mw-category h3 { /*分类页标题*/
        margin: 0;
        padding-top: 0.5em;
        padding-bottom: 0.17em;}}
.mw-category-columns{ /*分类页分栏*/
	column-width: 18em;}
.mw-diff-edit::before, .mw-diff-tool::before, .mw-diff-undo::before, .comment--without-parentheses::before, .mw-changeslist-links::before, .mw-diff-bytes::before, .mw-tag-markers::before, .mw-uctop::before{ /*左括号*/
    content: '(';
    position: relative;
    bottom: 1px;
	margin-right: 1px;}
.mw-diff-edit::after, .mw-diff-tool::after, .mw-diff-undo::after, .comment--without-parentheses::after, .mw-changeslist-links::after, .mw-diff-bytes::after, .mw-tag-markers::after, .mw-uctop::after{ /*右括号*/
    content: ')';
    position: relative;
    bottom: 1px;
	margin-left: 1px;}
body.mobile .comment--without-parentheses:before, body.mobile .mw-changeslist-links:before, body.mobile .mw-diff-bytes:before, body.mobile .mw-tag-markers:before, body.mobile .mw-uctop:before,
body.mobile .comment--without-parentheses:after, body.mobile .mw-changeslist-links:after, body.mobile .mw-diff-bytes:after, body.mobile .mw-tag-markers:after, body.mobile .mw-uctop:after{ /*括号*/
	font-family: sans-serif;}
.mw-changeslist-links > span:not(:first-child):before{ /*竖线*/
    position: relative;
    bottom: 1px;}
body.mobile .mw-changeslist-links > span:not(:first-child):before{ /*竖线*/
    font-family: sans-serif;
}


/* PortableInfobox 便携式信息框 */
@media (min-width: 721px) {
    #content .portable-infobox{
	    width: 310px;}}
#content .pi-item-spacing{ /*信息框元素块*/
    padding: 10px 14px;}
#content .pi-title, #content .pi-header{ /*大标题与中标题*/
    padding: 14px 14px;}
#content .pi-title p{ /*副标题*/
    margin: 0;}
#content .portable-infobox figure a, #content .portable-infobox figure img{ /*图框*/
    width: 100%;}
#content .pi-title .collapse .mw-collapsible-toggle{ /*折叠图标*/
    width: 0;}
#content .pi-title .collapse{ /*折叠内容*/
	padding: 0 16px;}
#content .pi-smart-group{ /*横向元素内容*/
    text-align: left;}
#content .pi-smart-group-head + .pi-smart-group-body .pi-data-value{
	padding-top: 0;
}


/* 悬浮标题 */
body.mobile abbr[title]:hover:after,
body.mobile .mw-parser-output span[title]:hover:after,
body.mobile .title-hover *[title]:hover:after,
body.mobile .title-hover[title]:hover:after{
	content: attr(title);
	padding: 3px 6px;
	background: var(--page-color-1);
	border: 1px solid var(--page-color-2);
	position: absolute;
	margin: 2px;
	font-size: 12px;
	color: var(--font-color-3);
	text-align: start;
    box-shadow: 1px 1px 4px #0003;
    z-index: 1000;
    word-break: normal;
}


/* 自定义预设组 */
/* 折叠 */
.mw-collapsible-toggle{ /*折叠按钮*/
    color: inherit;}
.mw-collapsible-toggle:before, .mw-collapsible-toggle:after{ /*左右括号*/
    line-height: 0;
    font-family: sans-serif;
    position:relative;
    bottom: 1px;}
.collapse .mw-collapsible-toggle:before, .collapse-title .mw-collapsible-toggle:before{ /*图标*/
    font-family: 'Cambria Math', math !important;
    font-size: 10px;
    padding: 0 5px;}
.collapse .mw-collapsible-toggle-default:before, .collapse-title .mw-collapsible-toggle-default:before{ /*默认图标*/
    content: '▼';}
.collapse .mw-collapsible-toggle-collapsed:before, .collapse-title .mw-collapsible-toggle-collapsed:before{ /*折叠图标*/
    content: '▼';}
.collapse .mw-collapsible-toggle-expanded:before, .collapse-title .mw-collapsible-toggle-expanded:before{ /*展开图标*/
    content: '▲';}
.collapse .mw-collapsible-toggle:before{ /*只有图标的折叠-图标*/
    position: relative; top: 0;}
.collapse .mw-collapsible-toggle:after, .collapse .mw-collapsible-text{ /*只有图标的折叠-其他部分*/
    display: none;}
.collapse-title .mw-collapsible-toggle:after{ /*带有字样的折叠-图标*/
    display: none;}
.collapse-title .mw-collapsible-text{ /*带有字样的折叠-其他部分*/
    color: unset !important;
}


/* 页面非等距分栏 */
@media (min-width: 1084px){ /*电脑视图*/
    .main-column-left{ /*主栏（在右）*/
        float: left;
        width: calc(100% - 320px);
        margin-right: 15px;}}
@media (min-width: 1084px){ /*电脑视图*/
    .main-column-right{ /*主栏（在左）*/
        float: right;
        width: calc(100% - 320px);
        margin-right: 15px;}}
@media (min-width: 680px) and (max-width: 1083px){ /*平板视图*/
    .side-column{ /*侧栏*/
        column-count: 2;}}
.side-column{ /*侧栏*/
    display: flow-root;
}

/* .column 分栏 */
@media (max-width: 600px){
    .column.responsive{
        column-count: 1 !important;
    }
}

/* .non-at-style 干净的文字链接 */
#content .non-at-style a{ /*文字链接*/
    padding-right: 0;
    color: unset;
    background-image: none;}
#content .non-at-style a:after{ /*图标*/
    display: none;
}

/* .img-cover-fit 图片等比例填充 */
#content .img-cover-fit img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

/* .icon 行间图标*/
.icon img{
    position: relative;
    bottom: 1px;
    vertical-align: middle;
}

/* .pictogram 形象图标 .img-px 像素图片*/
img[src*="%E5%BD%A2%E8%B1%A1"], .img-px{ 
    image-rendering: pixelated;}
.skin-vector .pictogram img, .skin-vector .img-px{
	image-rendering: auto;
}

/* .inner-box 嵌套盒子 */
.inner-box > *:first-child{
    margin-top: 0 !important;}
.inner-box > *:last-child{
    margin-bottom: 0 !important;}
.card .inner-box > ul, .card .inner-box > ol{
    margin-inline-start: 18px;
}

/* .heimu 黑幕 */
.heimu {
    background: var(--font-color-3);
    transition: 200ms cubic-bezier(0.4,0,0.2,1)}
.heimu > span{
    opacity: 0;
    transition: 200ms cubic-bezier(0.4,0,0.2,1)}
.heimu:hover {
    background: none;}
.heimu:hover > span{
    opacity: 1;
}

/* .tvtropes 灰幕 */
.tvtropes {
    border-bottom: 1px dotted grey;
    background: var(--page-color-3);
    transition: 200ms cubic-bezier(0.4,0,0.2,1)}
.tvtropes > span{
    opacity: 0;
    transition: 200ms cubic-bezier(0.4,0,0.2,1)}
.tvtropes:hover {
    background: none;}
.tvtropes:hover > span{
    opacity: 1;
}

/* .blur 模糊 */
.blur {
    filter:blur(4px);
	transition: 200ms cubic-bezier(0.4,0,0.2,1)}
.blur:hover {
    filter:none;
}