MediaWiki:Common.css

来自Timberborn Wiki
跳转到导航 跳转到搜索

注意:在发布之后,您可能需要清除浏览器缓存才能看到所作出的变更的影响。

  • Firefox或Safari:按住Shift的同时单击刷新,或按Ctrl-F5Ctrl-R(Mac为⌘-R
  • Google Chrome:Ctrl-Shift-R(Mac为⌘-Shift-R
  • Internet Explorer或Edge:按住Ctrl的同时单击刷新,或按Ctrl-F5
  • Opera:Ctrl-F5
/* 这里放置的CSS将应用于所有皮肤 */

/* 谨注意:本站完全不考虑在fandom移动界面的显示兼容问题 */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inconsolata&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono&display=swap');
body.skin-fandomdesktop, button, input, textarea {
	font-family: 'Noto Sans SC', sans-serif;
}

:root {
	/* 全局颜色 */
	/* 请在选色时尽量使用以下参数,或参照[[色卡]]中的颜色,以保持全局风格的统一 */
	--theme-link-color:#bca26c;	
	--theme-page-text-color:#e6e6e6;
	--theme-page-background-color:rgb(32,75,60,0.9);
	--theme-link-color--rgb:188,162,108;
    --theme-link-color--hover:#e4dac4;
    --theme-warning-color:#f2b500;
    --theme-success-color:#008000;
    /*背景与标志*/
    --theme-site-background:#22372d url(https://timberborn.wiki.gg/zh/images/0/0f/Site-background-dark.webp)  center top / cover no-repeat fixed;
}
body{background:var(--theme-site-background);}
#mw-page-base,.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown .vector-menu-heading {background: 0 0;}
#mw-head {z-index:1;}
.mw-body, .parsoid-body, #left-navigation, #right-navigation{
	background-color:var(--theme-page-background-color);
	backdrop-filter: blur(1px);
	color:var(--theme-page-text-color);
	border:0px;
}
.vector-menu-tabs-legacy .selected{
	background-color:rgba(255,255,255,0);
	border:0px;
}

.vector-menu-tabs-legacy li       {background:rgba(11,35,35,0.5);}
.vector-menu-tabs-legacy li:hover {background:rgba(11,35,35,0);}
.vector-menu-tabs-legacy li:active{background:rgba(11,35,35,0);}

h1,h2,h3,h4,h5,h6,.mw-footer li,
.vector-menu-tabs-legacy .selected a, .vector-menu-tabs-legacy .selected a:visited,
.vector-menu-portal .vector-menu-heading,
.vector-menu-heading-label{color:var(--theme-page-text-color);}

a,.vector-menu-portal .vector-menu-content li a,.mw-parser-output a.external,.vector-menu-tabs-legacy li a,
a:visited,.vector-menu-portal .vector-menu-content li a:visited,
.mw-parser-output a.external:visited,
.vector-menu-tabs-legacy li a:visited{color:var(--theme-link-color);}

a:hover,.vector-menu-portal .vector-menu-content li a:hover,
.mw-parser-output a.external:hover
.vector-menu-tabs-legacy li a:hover{color:var(--theme-link-color--hover);}

.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend{
    padding: 12px;
    background-color: rgba(11,35,35,0.5);
    border:0px;
    border-radius: 5px;
    margin: 0 0 6px;
}

.mainpage-headline{		/*导航栏设置*/
	background-color:#560d0d;
	text-align:center;
	border:3px solid #bca26c;
	border-radius:3px;
}
.noarticletext:after{	/*空页图像*/
	content:url(https://timberborn.wiki.gg/zh/images/5/59/ErrorScreen.png);
}
::selection{ /*选中文字后的背景*/
	background-color:#bca26c7f;
}

/* timbertable */
.timbertable {border-collapse: collapse; background-color: #22372d; color: white;}
.timbertable caption  {font-weight: bold;}
.timbertable >*>tr>th,
.timbertable > tr >th {padding: 9px 5.6px; background-color: #3f1212;}
.timbertable >*>tr>td {text-align: inherit; padding: 0.2em 0.4em;}
.timbertable > tr >th,
.timbertable > tr >td,
.timbertable >*>tr>th,
.timbertable >*>tr>td {border: 1px solid #bca26c;}

/*页首*/
.fandom-community-header__top-container,.fandom-community-header__local-navigation{
	text-shadow:0px 0px 3px #000;
}

/*-----------------------------------首页-------------------------------------*/
/*隐藏首页标题*/
.mainpage .page-header {display:flex;justify-content: flex-end; align-items: center;}
.mainpage .page-header__meta {display:none;}
.mainpage .page-header__bottom {justify-content: flex-end;}
.mainpage .page-header__title-wrapper {display:none;}
.mainpage .page-header__variants .wds-dropdown__toggle,
.mainpage .page-header__languages .wds-dropdown__toggle{margin-bottom:0;}
.mainpage .page-header__actions {padding-top:0;}
/*首页模板样式*/
.mainpage-setting,.mainpage-action,.mainpage-building{
	width: 100px;
	height: 100px;
	margin: 2px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-size:100%,100%;
	background-color:#22372d;
	background-repeat: no-repeat;
	border: 4px solid;
	border-image: url(https://timberborn.wiki.gg/zh/images/8/8e/%E9%A6%96%E9%A1%B5-%E8%BE%B9%E6%A1%86-01.png) 49%;
	border-image-width:50px;
	overflow:hidden;
}
.mainpage-setting:hover,.mainpage-action:hover,.mainpage-building:hover{
	border-image:url(https://timberborn.wiki.gg/zh/images/0/05/%E9%A6%96%E9%A1%B5-%E8%BE%B9%E6%A1%86-04.png) 49%;
	border-image-width:50px;
}
.mainpage-setting:active,.mainpage-action:active,.mainpage-building:active{
	border-image:url(https://timberborn.wiki.gg/zh/images/0/02/%E9%A6%96%E9%A1%B5-%E8%BE%B9%E6%A1%86-02.png) 49%;
	border-image-width:50px;
}
.mainpage-setting{
	background-image:url(/images/c/c8/%E9%A6%96%E9%A1%B5-%E8%AE%BE%E7%BD%AE-%E8%83%8C%E6%99%AF.png/revision/latest?cb=20221019020505&path-prefix=zh);
}
.mainpage-action{
	background-image:url(/images/d/d3/%E9%A6%96%E9%A1%B5-%E6%93%8D%E4%BD%9C-%E8%83%8C%E6%99%AF.png/revision/latest?cb=20221011051729&format=original&path-prefix=zh);
}
.mainpage-building{
	background-image:url(/images/b/b1/%E9%A6%96%E9%A1%B5-%E5%BB%BA%E7%AD%91-%E8%83%8C%E6%99%AF.png/revision/latest?cb=20221010171152&path-prefix=zh);
}
.mainpage-list{
	display: -webkit-flex;
	display: flex;
	flex-direction: row;
	justify-content:flex-start;
	flex-wrap:wrap;
}
.other-wiki-logo{
	margin:6px;
}

/*首页排版*/
@media screen and (min-width:1080px){
	.mainpage-box{
	display: -webkit-flex;
	display: flex;
	flex-direction: row;
	justify-content:center;
	}
	.box-left{
	flex:1;
	margin:0 3px
	}
	.box-right{
	flex-basis:312px;
	margin:0 3px;
	}
}
@media screen and (max-width:1079px){
	.mainpage-box{
	display: -webkit-flex;
	display: flex;
	flex-direction:column;
	}
}
.box-left,.box-right{
	display: -webkit-flex;
	display: flex;
	flex-direction:column;
	align-items:center;
}

/*-------------------------- 带纹理和边框的颜色块 ----------------------------*/
.darkgreen-box,.lightgreen-box,.darkred-box,.darkred-wooden-box,.darkpurple-box,.darkpurple-wooden-box,.lightpurple-box,.darkblue-box
{
	border:4px solid transparent;
	padding:4px;
	background-clip:padding-box;
	/*这样拼贴背景图和边框,会导致网页在某些缩放比例下,padding与border之间出现一条1px宽的白缝,我(Kide Lee)暂时没什么太好的解决办法,所以先把问题搁置了。*/
}
.darkred-box {
	border-image:url(/images/8/8f/Bg-6.png/revision/latest?cb=20221013065512&path-prefix=zh) 4 round;
	background-color: #560d0d;
	background-image:url(/images/3/33/Bg-6-%E7%BA%B9%E7%90%86.png/revision/latest?cb=20221013074258&path-prefix=zh);
}
.darkred-wooden-box {
	border-image:url(/images/c/c3/Bg-6-striped.png/revision/latest?cb=20221013065513&path-prefix=zh) 4 round;
	background-color: #3f1212;
	background-image:url(/images/b/b4/Bg-6-wooden-%E7%BA%B9%E7%90%86.png/revision/latest?cb=20221014122120&path-prefix=zh);
}
.darkgreen-box{
	border-image:url(/images/e/e3/Bg-3.png/revision/latest?cb=20221013065519&path-prefix=zh) 4 round;
	background-color:#22372d;
	background-image:url(/images/0/09/Bg-3-%E7%BA%B9%E7%90%86.png/revision/latest?cb=20221013072626&path-prefix=zh);
}
.lightgreen-box{
	border-image:url(/images/a/ab/Bg-3-hover.png/revision/latest?cb=20221013065520&path-prefix=zh) 4 round;
	background-color:#325041;
	background-image:url(/images/c/c8/Bg-3-hover-%E7%BA%B9%E7%90%86.png/revision/latest?cb=20221014094637&path-prefix=zh);
}
.darkblue-box{
	border-image:url(/images/4/4c/Bg-7.png/revision/latest?cb=20221013065514&path-prefix=zh) 4 round;
	background-color:#1d2c38;
}
.lightpurple-box{
	border-image:url(/images/c/cc/Bg-1.png/revision/latest?cb=20221013065516&path-prefix=zh) 4 round;
	background-image:url(/images/a/a2/Bg-1-%E7%BA%B9%E7%90%86.png/revision/latest?cb=20221014123041&path-prefix=zh);
	background-color:#382d35;
}
.darkpurple-box{
	border-image:url(/images/4/49/Bg-2.png/revision/latest?cb=20221013065517&path-prefix=zh) 4 round;
	background-image:url(/images/4/49/Bg-2-%E7%BA%B9%E7%90%86.png/revision/latest?cb=20221014125616&path-prefix=zh);
	background-color:#332327;
}
.darkpurple-wooden-box{
	border-image:url(/images/3/39/Bg-2-striped.png/revision/latest?cb=20221013065518&path-prefix=zh) 4 round;
	background-image:url(/images/3/34/Bg-2-wooden-%E7%BA%B9%E7%90%86.png/revision/latest?cb=20221014130721&path-prefix=zh);
	background-color:#332327;
}

/*------------------------------预设标签--------------------------------------*/
/*<inputbox>*/
.createboxInput[type="text"]:placeholder-shown ~ .createboxButton, .mw-inputbox-createbox:required:invalid ~ .mw-ui-button{
	color: #000;
	border-color:#bca26c;
	border-radius: 3px;
	background-color:#bca26c;
}
.createboxInput[type="text"]:placeholder-shown ~ .createboxButton:hover, .mw-inputbox-createbox:required:invalid ~ .mw-ui-button:hover{
	background-color:#856d3c;
}
.mw-ui-button.mw-ui-progressive:not(:disabled){
	color: #e6e6e6;
	background-color:#22372d;
	border-color:#22372d;
}
.mw-ui-button.mw-ui-progressive:not(:disabled):hover{
	background-color:#325041;
	border-color:#325041;
}

/*<infobox>*/
/*默认样式*/
.pi-background{
	background-color:#22372d
}
.pi-secondary-background {
    background: #3f1212;
    color: #e6e6e6;
}
.pi-theme-infobox-blue.pi-background{
	background-color:#1d2c38;
}
.pi-theme-infobox-blue.portable-infobox{
	margin:0 0 0 18px;
}
.page-content .pi-theme-infobox-blue .pi-title.pi-title {
	font-size:15px;
	font-weight:normal;
}
/*[[Template:建筑信息]]和[[Template:植物信息]]*/
.infobox-head{
	display: -webkit-flex;
	display: flex;
	flex-direction: row;
	justify-content:space-between;
	align-items:center;
	position: relative;
}
.infobox-pagename{
	position:absolute;	/*好怪哦*/
	width:105px;
	left:72.5px;
}
.infobox-icon{
	max-width:72.5px;
	font-size:12px;
}
.infobox-headright{
	max-width:72.5px;
	display: -webkit-flex;
	display: flex;
	flex-direction:column;
	justify-content:space-around;
	align-items:flex-end;
	font-size:12px;
}
/*-建造-*/
.infobox-build{
	display: -webkit-flex;
	display: flex;
	flex-direction: row;
	justify-content:space-between;
	align-items:center;
	font-size:12px;
	overflow:hidden;
}
.build-right{
	width:204px;
	display: -webkit-flex;
	display: flex;
	flex-direction: row;
	justify-content:space-evenly;
	align-items:center;
	flex-wrap:wrap;
}
.build-bigcircle,.build-smallcircle{
	border-radius: 50%;
	display: -webkit-flex;
	display: flex;
	align-items:center;
	justify-content:space-around;
}
.build-bigcircle{
	width:46px;
	height:46px;
	border: 1px solid transparent;
}
.build-num{
	width:38px;
	margin: 7px 30px 7px 0;
	border: 1px solid #bca26c;
	line-height:1.5;
	text-align:center;
	background-color:#152722;
	position:relative;
}
.build-smallcircle{
	width:34px;
	height:34px;
	border: 2px solid #bca26c;
	background-color:#152722;
	position:absolute;
	left:30px;
	bottom:-8px;
}

/*-----------------------------------模板-------------------------------------*/
/* - [[模板:模板文档]] - */
.template-doc {
	margin-top: 1em;
	clear: both;
    word-wrap: normal;
    background-color: var(--theme-page-background-color--secondary);
    border: 1px solid var(--theme-border-color);
    line-height: 1;
    overflow: auto;
    padding: 12px;
    white-space: pre-wrap;
}
.template-doc-heading {
	padding-bottom: 3px;
	border-bottom: 1px solid #aaaaaa;
	margin-bottom: 1ex;
}

/* - [[PortableNavbox]] - */
@import "/load.php?mode=articles&articles=u:dev:MediaWiki:PortableNavbox.css&only=styles";
.pi-navbox .pi-theme-navbox {
    box-sizing:border-box;
    float:none;
    margin:0;
    width:100%
}
.pi-navbox .pi-theme-navbox .pi-data-value {
    width:100%;
    flex-basis: 100%;
}
.pi-navbox .pi-theme-navbox .pi-data {
    align-items: center;
}
.pi-navbox .pi-theme-navbox .pi-data-label {
    padding: 0 10px;
    flex-basis: 9em;
}
/* - [[通知]] - */
.mbox {
    display:flex;
    position:relative;
    background-color:#204B3C;
    border:1px solid;
    border-color:var(--theme-page-background-color--secondary);
    margin-bottom:5px;
    min-height:32px
}
.mbox .mbox-type-important, .mbox .mbox-type-alert {
    background-color:#b80006
}
.mbox .mbox-type-moderate, .mbox .mbox-type-warning {
    background-color:var(--theme-warning-color)
}
.mbox .mbox-type-minor, .mbox .mbox-type-message {
    background-color:var(--theme-page-background-color--secondary)
}
.mbox .mbox-type-success {
    background-color:var(--theme-success-color)
}
.mbox__content {
    display: table;
    box-sizing: border-box;
    width: 100%;
    padding: .4em .6em .4em 1.2em;
}
.mbox__content__image {
    display: table-cell;
    width: 4em;
    height: 100%;
    text-align: center;
    vertical-align: middle;
    padding-right: .2em;
}
.mbox__content__leftborder {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: .6em;
    margin: 2px;
}
.mbox__content__wrapper {
    display:table-cell;
    vertical-align:middle;
}
.mbox__content__header {
    display:block;
    font-weight:bold;
}
.mbox__content__text {
    display:block;
}
.mbox__content__text__comment {
    font-size:small;
}
.mbox__content__aside {
    display:table-cell;
    width:100px;
    vertical-align:middle;
    text-align:center;
    padding-left:15px;
    border-left:1px solid;
    border-color: var(--theme-border-color);
}
.mbox__close {
    position:absolute;
    right:0;
    top:0;
    padding:2px 7px;
    font-weight:bold;
    font-size:16px;
    cursor:pointer;
    transition:all .15s ease-in;
}
.mbox__close:hover {
    color:#bca26c;
}
.mbox__close:after {
    content:'×'
}
.mw-collapsed + .mbox__close {
    transform:rotate(45deg);
    padding:4px 7px 5px 2px
}

/* - [[模板:生成]] - */
.formula {
    display: inline-block;
    position: relative;
    overflow: hidden;
    align-items: center;
}
.formula-arrow {
    display: inline-block;
    position: relative;
    overflow: hidden;
    margin: 2px;
    vertical-align: middle;
}
.formula-arrow-img {
    position: relative;
    bottom: 20px;
}
.formula-arrow-s-img {
    position: relative;
    bottom: 10px;
}

/* - [[模板:通知]] - */

/* - [[模板:面包屑]] - */
.bread-crumb .b-line, .bread-crumb .b-name {
    display: inline-block;
    font-size: 14px;
    vertical-align: middle;
    color: #bca26c;
}
.bread-crumb .b-line {
    margin: auto 8px;
}
.bread-crumb {}

/* - [[模板:图标]] - */
.icon:hover{
	position: relative;
    right: 1px;
    bottom: 1px;
    box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.6);
}

.备用{	/*一种游戏内的窗口效果*/
	margin: 0 auto;
	padding: 10px;
	border:30px solid transparent;
	border-image-source:url(/images/4/46/Border.png/revision/latest?cb=20221014071539&path-prefix=zh);
	border-image-slice:30 fill;
	border-image-repeat: round;
}

/* 为使用pre高亮的文本设置字体 */
pre {
	font-family: Inconsolata;
}