MediaWiki:Common.css

:root {
    --themecolor: #A8CDFF;
    --themeimg: url(https://www.mcbbs.net/template/mcbbs/image/body_bg.jpg);
    --bgtop: 46px;
    --bgleft: 20px;
    --lightcolor: #FDF6E6;
    --bgcolor: #fbf2dc;
    --bgcolor1: #E9D3AD;
    --bgcolor2: #E7D3B1;
    --bgcolor3: #E9CB97;
    --linecolor: #CFB78E;
    --fontfamily: sans-serif,'Microsoft Yahei',apple color emoji,segoe ui emoji,segoe ui symbol;
    --fontfamily2: 'Linux Libertine','Georgia','Times',serif,sans-serif,Tahoma;
    --articlefont: Lora,'Palatino Linotype','Book Antiqua','New York','DejaVu serif','Source Han Serif','Source Han Serif SC';
    --heimu: #000;
}



/* 删除右上角帮助 */
#mw-indicator-mw-helplink {
    display:none;
}

dfn {
    font-style: Sans-serif;
}
/* LOGO */
#p-logo a{
    background-size: contain;
}
#p-logo{
    margin-top: 24px;
}

/* 顶部轮播文字 */
.topsign{
    position: relative;
    width: 100%;
    height: 65px;
    overflow: hidden;
}

.topsign .topsignitem{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
}

.topsign .topsignitem p{
    line-height: 50px;
    text-align: center;
}

/* 左侧导航信息 */
/*
.portal {
    background: rgba(255,255,255,0.5);
}
.portal li:hover {
    background: rgba(255,255,255,0.7);
}
*/
.portal{
    transition: all .3s;
}
.portal:hover {
    background: rgba(255,255,255,0.7);
}
/*
#mw-panel:hover {
    background: rgba(255,255,255,0.5);
}
*/

/* 新版首页DIV */
#mainpage-body {
    display: grid;
    width: 100%;
    grid-template-areas: "a a b"
                         "c c d"
                         "e e f"
                         "g h i";
    grid-template-columns: 1fr 1fr 1fr;
}

.mainpage-box-title {
    font-size: 20px;
    color: #694B19;
    background: #E9CB97;
    text-align: center;
    line-height: 36px;
}

.mainpage-box-content {
    padding:10px;
}
			
#mainpage-body :nth-child(1) {grid-area: a;}
#mainpage-body :nth-child(2) {grid-area: b;}
#mainpage-body :nth-child(3) {grid-area: c;}
#mainpage-body :nth-child(4) {grid-area: d;}
#mainpage-body :nth-child(5) {grid-area: e;}
#mainpage-body :nth-child(6) {grid-area: f;}
#mainpage-body :nth-child(7) {grid-area: g;}
#mainpage-body :nth-child(8) {grid-area: h;}
#mainpage-body :nth-child(9) {grid-area: i;}

/* 首页DIV移动端兼容 */
.mobile-compatible-box {
    display: none;
}


/* 网格布局方案A */
#grid-a-body {
    display: grid;
    width: 100%;
    grid-template-areas: "a a b"
                         "c d e"
                         "f g h";
    grid-template-columns: 1fr 1fr 1fr;
}

.grid-a-box-title {
    font-size: 20px;
    color: #694B19;
    background: #E9CB97;
    text-align: center;
    line-height: 36px;
}

.grid-a-box-content {
    padding:10px;
}
			
#grid-a-body :nth-child(1) {grid-area: a;}
#grid-a-body :nth-child(2) {grid-area: b;}
#grid-a-body :nth-child(3) {grid-area: c;}
#grid-a-body :nth-child(4) {grid-area: d;}
#grid-a-body :nth-child(5) {grid-area: e;}
#grid-a-body :nth-child(6) {grid-area: f;}
#grid-a-body :nth-child(7) {grid-area: g;}
#grid-a-body :nth-child(8) {grid-area: h;}


/* 旧版首页表格 */
.mainpage-table {
    table-layout: fixed;
}
.mainpage-td {
    width: 33.33%;
}
.mainpage-table-title {
    font-size: 20px;
    color: #694B19;
    background: #E9CB97;
}
.mainpage-table-box {
    padding:10px;
    vertical-align: top;
}

/* 右侧信息卡模板 */
.infolist {
    width:21em!important;
/*
    background: var(--lightcolor);
    border: var(--linecolor) 1px solid;
    padding: 2px;
*/
}

.infolist .image img {
    max-width: 257px;
    height: auto;
}

.infolist-bottombar {
    text-align: center;
}

.infolist-bottom {
    margin: 0;
    width: 250px;
    background:#E0CBA7;
    text-align: center;
    line-height: 50px;
    border-radius:7px;
    font-size: 14px;
    display: inline-block;
}

.infolist-bottom:hover {
    -webkit-filter: brightness(1.05);
    filter: brightness(1.05);
}
.infolist-bottom:active {
    -webkit-filter: brightness(0.95);
    filter: brightness(0.95);
}

.infolist-bottombar a.external {
    background-image: none;
    padding-right: 0;
    text-decoration: none;
}

.bottom-afdian {
    color: #946ce6!important;
    background-color: #E4DBF5;
}
.bottom-afdian span {
    color: #946ce6!important;
    background-image: url(https://wiki.crash-logs.cn/images/b/b2/%E7%88%B1%E5%8F%91%E7%94%B5.png);
    background-repeat: no-repeat;
    background-size: 20px;
    padding-left: 23px;
}

/* info类模板 */
.infoBox {
    margin: 0 auto;
}
.infoBoxTitle {
    margin: 3px auto;
    padding: 0;
    text-align: center;
    font-weight: 700;
}
.infoBoxIcon {
    display: table-cell;
    padding: 2px 0 2px .5em;
    vertical-align: middle;
}
.infoBoxText {
    display: table-cell;
    padding: .25em .5em .25em 1.3em;
    width: 100%;
    vertical-align: middle;
}
.infoBoxContent {
    border: 1px solid #ddd;
    border-left-width: 0;
    background: #fbfbfb;
}
.infoBoxBelow {
    margin: 0 auto;
    padding: 0;
    text-align: center;
}

/* 勋章列表样式 */
ul.gallery.medal{
    text-align: left;
}
li.gallerybox {
    /*float: left;*/
    text-align: center;
    /* width: 132px!important; */
}

.medal li.gallerybox {
    margin: 0 -9px 10px;
}

.medal .gallerytext {
    padding: 2px 10px;
}

.medal div.thumb {
    box-shadow: inset 0 0 10px 4px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    padding: 10px;
    width: 76px!important;
    height: 76px!important;
    background: url(https://wiki.crash-logs.cn/images/a/ac/magic_imgbg.gif) no-repeat 0 0;
    margin: auto!important;
}

.medal, li.gallerybox div.thumb img {
    display: block;
    margin: 0 auto;
    height: auto;
    width: auto;
}


/* 页面底部导航框（2011年8月16日引自中文维基）(所谓大家族模板) */
table.navbox {
    border: 1px solid #aaa;
    clear: both;
    margin: auto;
    padding: 1px;
    text-align: center;
    width: 100%;
}
table.navbox+table.navbox {
    margin-top: -1px;
}
.navbox-title,
.navbox-abovebelow,
table.navbox th {
    padding-left: 1em;
    padding-right: 1em;
    text-align: center;
}
.navbox-group {
    font-weight: 700;
    padding-left: 1em;
    padding-right: 1em;
    white-space: nowrap;
}
.navbox,
.navbox-subgroup {
    background: none repeat scroll 0 0 #fdfdfd;
}
.navbox-list {
    border-color: #fdfdfd;
}
.navbox-title,
table.navbox th {
    background: none repeat scroll 0 0 #a5e4a5;
}
.navbox-abovebelow,
.navbox-group,
.navbox-subgroup .navbox-title {
    background: none repeat scroll 0 0 #c0ecc0;
}
.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
    background: none repeat scroll 0 0 #e6f6e6;
}
.navbox-even {
    background: none repeat scroll 0 0 #FDF6E6;
}
.navbox-odd {
    background: none repeat scroll 0 0 transparent;
}
.collapseButton {
    float: right;
    font-weight: 400;
    text-align: right;
    width: auto;
}
.navbox .collapseButton {
    width: 6em;
}
/* Fix by case : Rev 1327309 ([[Special:Permalink/1327309]])
    Address alignment issue of nested tabs in Navbox */
.navbox .TabLabel {
    text-align: left;
}

body {
    background:var(--themeimg) 0 0 no-repeat;
    background-position:center;
    background-attachment:fixed;
    background-size:cover;
    border-top:none;
    font-family:var(--fontfamily)
}
#mw-page-base {
    background:none!important
}
#content:before {
    content:'';
    left:0;
    height:var(--bgtop);
    width:calc(100% - 90px);
    padding:0 45px;
    margin-top:-45px;
    display:block;
    position:absolute;
    background:url(https://s2.ax1x.com/2019/11/28/QFB2X4.png)left top no-repeat,url(https://s2.ax1x.com/2019/11/28/QFBfB9.png)right top no-repeat,url(https://s2.ax1x.com/2019/11/28/QFBc1U.png)top repeat-x content-box
}
#content:after {
    content:'';
    left:0;
    height:var(--bgtop);
    width:calc(100% - 90px);
    padding:0 45px;
    bottom:0px;
    margin-bottom:-45px;
    display:block;
    position:absolute;
    background:url(https://s2.ax1x.com/2019/11/28/QFco4A.png)bottom repeat-x content-box,url(https://s2.ax1x.com/2019/11/28/QFcINd.png)left bottom no-repeat,url(https://s2.ax1x.com/2019/11/28/QFc5AH.png)right bottom no-repeat
}
#content {
    padding:0 calc(var(--bgtop) * 1.5);
    margin-right:var(--bgleft);
    overflow:visible;
    position:relative;
    background:url(https://www.mcbbs.net/template/mcbbs/image/bg_border_left.png) left top repeat-y,url(https://www.mcbbs.net/template/mcbbs/image/bg_border_right.png) right top repeat-y;
    background-color:var(--bgcolor);
    min-height: 500px;
}
#left-navigation {
    margin-top:calc(32px + var(--bgtop));
    margin-left:calc(176px + var(--bgtop) * 1.5)
}
#right-navigation {
    margin-top:calc(32px + var(--bgtop));
    margin-right:calc(var(--bgtop) + var(--bgleft))
}
#left-navigation li,#right-navigation #p-views li {
    background-image:linear-gradient(0deg,var(--linecolor) 0%,var(--bgcolor) 30%)
}
#left-navigation li.selected,#right-navigation #p-views li.selected {
    background-image:linear-gradient(0deg,var(--linecolor) 0%,var(--bgcolor) 30%,white 100%)
}
#left-navigation li:first-child,#right-navigation li:first-child {
    border-left:1px solid var(--linecolor)
}
#left-navigation li:last-child,#right-navigation li:last-child {
    border-right:1px solid var(--linecolor)
}
#p-cactions .menu li {
    border:1px solid var(--linecolor);
    background-color:var(--lightcolor);/*右侧收起来的几个选项*/
}
#left-navigation div,#left-navigation ul,#left-navigation span,#right-navigation div,#right-navigation ul,#right-navigation span,#p-cactions-label{
    background:none!important
}
#firstHeading {
    margin-top:var(--bgtop)
}
#p-personal {
    width:100%;
    position:fixed;
    top:0;
    right:0;
    padding:6px 16px;
    background:url(https://www.mcbbs.net/template/mcbbs/image/top_bg.png);
    background-size:contain;
    opacity: 0.6;/*因为是fixed的顶部栏，所以在章节跳转的时候会挡住第一行字*/
    transition: opacity 0.5s ease;
}
#p-personal:hover {
    opacity: 1;
}
#p-personal ul {
    float:right;
}

#catlinks,pre,table.wikitable,li.gallerybox div.thumb,.toc,.mw-warning,.toccolours,table.navbox,#simpleSearch {
    background-color:var(--lightcolor)
}
fieldset,ul,li,a,span,em,pre,h1,h2,h3,h4,h5,h6 {
    border-color:var(--linecolor)!important
}
.diff-deletedline {
    border-color:#ffe49c!important
}
.diff-addedline {
    border-color:#a3d3ff!important
}
#catlinks {
    margin-bottom:2px
}

::selection {
    background:lightblue;
    color:black
}
::-moz-selection {
    background:lightblue;
    color:black
}
input,select {
    background-color:var(--lightcolor);
    border:1px solid var(--linecolor)
}
h1,h2,h3,h4,h5,h6 {
    font-family:var(--fontfamily)!important
}
/* 页脚 */
#footer {
    padding-bottom:0;
    margin-top:35px;
    transition: all .3s;
}
#footer:hover {
    background: rgba(255,255,255,0.7);/*鼠标滑过，背景变白*/
}

/* 编辑工具栏 */
a[data-mw-charinsert-start] {
    display: inline-block!important;
    border: #0645ad 1px solid!important;
    padding: 1px 5px;
}

/* 网页特效 */
.saturation0 { /*黑白*/
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: gray(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
}

.heimu,.blackcurtain{/*黑幕*/
    transition: all .3s;
    background: var(--heimu);
    color: var(--heimu);
    /* 黑幕：一块黑色区域，鼠标移入后显示内容
       使用方法：将heimu类或者blackcurtain类附加到你想实现黑幕的元素上
       彩色黑幕：将元素的--heimu变量变为你想要的颜色 */
}
.heimu:hover,.blackcurtain:hover{ /*黑幕，鼠标移入后文字背景透明*/
    background: transparent;
}
div.pre-like{ /*制作一个很像 pre 的 div ，帮助:注释 页面要用*/
    border: 1px solid var(--linecolor)!important;
    background-color: var(--lightcolor);
    padding: 1em;
}

.article-container{ /*kakagou提案的一个排版解决方案*/
    display: block;
    margin-block-start: 1rem;
    margin-block-end: 1rem;
    max-width:40rem; 
    margin-left:auto;
    margin-right:auto;
    font-family: var(--articlefont);
    font-size: 1.2rem;
    white-space:pre-wrap;
/* 用法：将整个页面用一个.article-container的div包裹起来
   正文左右两边有边距
   h2、h3、h4、h5标题居中
   详见 用户:Salt lovely/沙盒/样式测试用‎ */
}
.article-container h2,.article-container h3,.article-container h4,.article-container h5{
    font-family: var(--articlefont) !important;
    line-height:1.5;
    margin-top: 0;
    margin-bottom: 0;
}
.article-container h3,.article-container h4,.article-container h5{
    border-bottom: 1px solid;
    font-size:1.17em;
}
/*
.article-container h3{
    width: 75%; 
}
.article-container h4,.article-container h5{
    width: 50%;  
}
*/