MediaWiki:Common.css

/* 此处的 CSS 将应用于WIKI所有的搭建 */

@import "//help.wikia.com/index.php?title=MediaWiki:Gadget-navpop.css&action=raw&ctype=text/css";
/*@import "https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css";*/

.progressbar{
    position: absolute;
    top:50%;
    left:50%;
    border:1px solid darkgray;

}
/*在进度条元素上调用动画*/
.fill{
    animation: move 2s;
    text-align: center;
    background-color: #6caf00;
}
/*实现元素宽度的过渡动画效果*/
@keyframes move {
    0%{
        width:0;

    }
    100%{
        width:100%;
    }
}


/* 专用于两侧皆有的移动讯息框 */
.pi-theme-Both .pi-secondary-background{
  background-color: #450045;
}
.pi-theme-Both .pi-title{
  background-color: #450045;
}

/* 专用于魔法侧的移动讯息框 */
.pi-theme-Magic .pi-secondary-background{
  background-color: #00008A;
}
.pi-theme-Magic .pi-title{
  background-color: #00008A;
}

/* 专用于科学侧的移动讯息框 */
.pi-theme-Science .pi-secondary-background{
  background-color: #8A0000;
}
.pi-theme-Science .pi-title{
  background-color: #8A0000;
}


/* 专用于多系侧的移动讯息框 */
.pi-theme-All .pi-secondary-background{
  background-color: #1a2421;
}
.pi-theme-All .pi-title{
  background-color: #1a2421;
}


/* 专用于星体系列的移动讯息框 */
.pi-theme-Astral .pi-secondary-background{
  background-color: #8B008B;
}
.pi-theme-Astral .pi-title{
  background-color: #8B008B;
}

/* 专用于科方系列的移动讯息框 */
.pi-theme-Accelerator .pi-secondary-background{
  background-color: #808080;
}
.pi-theme-Accelerator .pi-title{
  background-color: #808080;
}

/* 专用于超炮系列的移动讯息框 */
.pi-theme-Railgun .pi-secondary-background{
  background-color: #ea4729;
}
.pi-theme-Railgun .pi-title{
  background-color: #ea4729;
}

/* 专用于魔禁系列的移动讯息框 */
.pi-theme-Index .pi-secondary-background{
  background-color: #3d83bc;
}
.pi-theme-Index .pi-title{
  background-color: #3d83bc;
}

/* 专用于斗争的移动讯息框 */
.pi-theme-fight .pi-data-value {
  margin:0 auto;
}
.pi-theme-fight .pi-data {
  text-align:center;
}

/* 字的外围方框（暗示已死角色） */
.edit-box{
   border: 1px solid black;
}

.RelatedPagesModule .articleSnippet::before {
content: '' !important;}
H3 { font-weight: bold; }
body.mediawiki { font-family:"Avenir", "Hiragino Sans GB", "Segoe UI", "Microsoft Yahei", sans-serif !important; -moz-user-select: none;  }
body.editor{-moz-user-select: text !important;}

body.page-Main_Page h1.firstHeading { display:none; }
table.collapsed tr.collapsible {
        display: none;
}

/* Allow limiting of which header levels are shown in a TOC;
   <div class="toclimit-3">, for instance, will limit to
   showing ==headings== and ===headings=== but no further
   (as long as there are no =headings= on the page, which
   there shouldn't be according to the MoS).
 */
.toclimit-2 .toclevel-2,
.toclimit-3 .toclevel-3,
.toclimit-4 .toclevel-4,
.toclimit-5 .toclevel-5,
.toclimit-6 .toclevel-6,
.toclimit-7 .toclevel-7 { display: none; }
 
.collapseButton {                /* 'show'/'hide' buttons created dynamically by the               */
        float: right;               /* CollapsibleTables JavaScript in [[MediaWiki:Common.js]] */
        font-weight: normal;        /* are styled here so they can be customised.               */
        text-align: right;
        width: auto;
}


/* Main page fixes */ .interwiki-completelist { 

    font-weight: bold;

} 

/* make the list of references look smaller */ ol.references { 

   font-size: 100%;

} 

.references-small { font-size: 90%;} 

/* VALIDATOR NOTICE: the following is correct, but the W3C validator doesn't accept it */ /* -moz-* is a vendor-specific extension (CSS 2.1 4.1.2.1) */ /* column-count is from the CSS3 module "CSS Multi-column Layout" */ /* Please ignore any validator errors caused by these two lines */ .references-2column { 

  font-size: 90%;
  -moz-column-count:2;
  column-count:2;

} 

.same-bg { background: none } 

/* Highlight clicked reference in blue to help navigation */ 

ol.references &gt; li:target { 

 background-color: #DEF;

} 

sup.reference:target { 

  background-color: #DEF;

} 

/* wikitable/prettytable class for skinning normal tables */ 

table.wikitable, table.prettytable { 

  margin: 1em 1em 1em 0;
  background: #f9f9f9;
  border: 1px #aaa solid;
  border-collapse: collapse;

} 

table.wikitable th, table.wikitable td, table.prettytable th, table.prettytable td { 

  border: 1px #aaa solid;
  padding: 0.2em;

} 

table.wikitable th, table.prettytable th { 

  background: #f2f2f2;
  text-align: center;

} 

table.wikitable caption, table.prettytable caption { 

  margin-left: inherit;
  margin-right: inherit;
  font-weight: bold;

} 


/* Table*/

.toarutable { border: 1px solid #bcbcbc; border-spacing: 0px 4px; padding: 2px 6px; background-color: #ffffff; }
.toarutable tr { background-color: #FFFFFF; }
.toarutable tr.odd { background-color: #FFFFFF; }
.toarutable tr.even { background-color: #FFFFFF; }
.toarutable th { padding: 0.2em 0.5em; background-color: #1a2421; color: #FFFFFF; }
.toarutable.toaruindex th { background-color: #3d83bc; }
.toarutable.toarurailgun th { background-color: #ea4729; }
.toarutable th a:link, .toarutable th a:visited { color: #FFFFFF !important; text-decoration: underline !important;}
.toarutable td { padding: 0.2em 0.5em; border-width: 1px; border-style: none none solid none; border-color: #e3e3e3; }

/* Exhibit */

.exhibit { border: 1px solid #bcbcbc; border-spacing: 0px 4px; padding: 2px 6px; background-color: #ffffff; }
.exhibit th { padding: 0.2em 0.5em; vertical-align: middle; background-color: #1a2421; color: #FFFFFF; }
.exhibit th a:link, .toarutable th a:visited { color: #FFFFFF !important; text-decoration: underline !important;}
.exhibit td {padding: 0 ;border-width: 1px; border-style: none none solid; border-color: #e3e3e3; line-height:0px;}
.exhibit-justify { text-align: justify; }
.exhibit-center { text-align: center; }
.exhibit-block {display: inline-block; text-align: center; vertical-align: top; border-width: 1px; border-style: solid none none; border-color: #e3e3e3; line-height:1.5em; }
.exhibit-image { border-style: none; margin: 0.3em 0 0 0;}
.exhibit-text { padding: 0.2em 0.25em; border-style: none; }
.exhibit-fix {height:0; overflow:hidden; padding:0em; border:none; }

/* 引言（Quote）模板 */

.quotebox { display: table; margin: auto;  text-align: right;padding: 0.5em 0.5em; }
.quotebox-text { display: inline-block; text-align:left;font-family: STZhongsong,"华文中宋",serif; font-weight: bold; font-size: medium; padding: 0.2em 0.5em; }
.quotebox-by { display: inline-block;border: 1px solid black; width: auto; padding: 0 0.3em; font-family: sans-serif; font-size: x-small; }
.quotebox-by span { font-family: STZhongsong,"华文中宋",serif; font-weight: bold; font-size: small; }

/* Infobox */
 
.toaruinfobox { float:right; border: 1px solid #bcbcbc; padding: 2px; background: #FFFFFF; border-collapse: separate; border-spacing: 4px; width: 275px; margin-bottom: 1em; margin-left: 1em; }
.toaruinfobox .toaruinfobox_row th { vertical-align:top; padding-right: 0.5em; text-align:right; font-size: 0.9em; line-height: 1.5em; font-weight: bold; }
.toaruinfobox .toaruinfobox_row td { text-align:left; font-size: 0.9em; line-height: 1.5em; padding: 0px; }
.toaruinfobox .toaruinfobox_header { padding: 0; color: #ffffff; background: #1a2421; text-align: center; font-size: 1em; line-height: 1.6em; }
.toaruinfobox_header a:link, .toaruinfobox_header a:visited, .toaruinfobox_top a:link, .toaruinfobox_top a:visited { color: #FFFFFF !important; text-decoration: underline !important;}
.toaruinfobox .toaruinfobox_top { padding: 0; color: #ffffff; background: #1a2421; text-align: center; }
.toaruinfobox .toaruinfobox_image { text-align: center;}
.toaruinfobox .toaruinfobox_imagecaption { font-size: 0.9em; }
.toaruinfobox .toaruinfobox_supertitle, .toaruinfobox .toaruinfobox_subtitle { font-size: 0.9em; line-height: 1.5em; }
.toaruinfobox .toaruinfobox_title { font-size: 1.2em; font-weight: bold; line-height: 1.5em; }

/* Navbox */ 

.navbox { border: 1px solid #BCBCBC; padding: 2px; width: 100%; margin: auto; clear: both; font-size: 88%; text-align: center; background-color: #FFFFFF; margin-top: 1em; }
.navbox table, .navbox-subgroup { border-spacing: 4px; }
.navbox-subgroup { margin: -4px -4px; }
.navbox + .navbox { margin: 6px 0 0 0; } /* single pixel border between adjacent navboxes */
.navbox tr, .navbox-columns-table tr { background-color: #FFFFFF; }
.navbox table td { }
.navbox-even { background-color: #FFFFFF; } /* even row striping */
.navbox-odd { background-color: #FFFFFF; } /* odd row striping */
.navbox-title, .navbox-abovebelow, table.navbox th { border: 0px; text-align: center; padding-left: 1em; padding-right: 1em; color:#FFFFFF; background-color:#1a2421; } /* title and above/below styles */
.navbox-group { border: 0px; border-spacing: 4px; white-space: nowrap; text-align: right; font-weight: bold; padding-left: 1em; padding-right: 1em; color:#FFFFFF; background-color:#1a2421; } /* group style */
.navbox-subgroup { background-color: #FFFFFF; } /* background color */
.navbox-list { border-color: #FFFFFF; } /* must match background color */
.navbox-title, navbox th {}
.navbox-title a:link, .navbox-title a:visited, .navbox-group a:link, .navbox-group a:visited, .navbox-abovebelow a:link, .navbox-abovebelow a:visited { color: #FFFFFF !important; text-decoration: underline !important;}
.navbox-abovebelow, .navbox-group, .navbox-subgroup .navbox-title { background-color:#1a2421; } /* level 2 color */
.navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow { background-color:#1a2421; } /* level 3 color */
.navbox .collapseButton { width: 6em; } /* In navboxes, the show/hide button balances the vde links from [[Template:Tnavbar]], so they need to be the same width. */
.navbox .collapseButton { float: right; font-weight: normal; text-align: right; width: auto; } /* 'show'/'hide' buttons created dynamically by the CollapsibleTables JavaScript in [[MediaWiki:Common.js]] are styled here so they can be customised. */
a#collapsibleButton0 { color: rgb(254,195,86) !important; }

/* Spoilers */

.sp { clear: left; }
.sp_banner { cursor: pointer; font-size: 14px; float: left; margin: 3px 0px 3px 12px; }
.sp_ico, .sp_wrn { display: inline-block; background-color:#ffffff; padding: 6px;}
.sp_ico { z-index: 1; position: relative; margin-right: 6px; }
.sp_ico div, .sp_ico img{ display: table-cell; }
.sp_wrn { margin-left: -3em; }
.sp_wrn>div { padding: 0 2.4em 0 3em; }
.sp_wrn a:link, .sp_wrn a:visited { color: #FFFFFF !important; text-decoration: underline !important;}
.sp_wrn_blurb { min-height:64px; height: 64px; display: table-cell; vertical-align: middle; }
 
.sp_index .sp_ico, .sp_index .sp_wrn { border: 1px solid #bcbcbc; color: #FFFFFF; }
.sp_index .sp_ico>div, .sp_index .sp_wrn>div { background-color: #3d83bc; }
 
.sp_railgun .sp_ico, .sp_railgun .sp_wrn { border: 1px solid #bcbcbc; color: #FFFFFF; }
.sp_railgun .sp_ico>div, .sp_railgun .sp_wrn>div { background-color: #ea4729; }
 
.sp_acc .sp_ico, .sp_acc .sp_wrn { border: 1px solid #bcbcbc; color: #FFFFFF; }
.sp_acc .sp_ico>div, .sp_acc .sp_wrn>div { background-color: #808080; }
 
.sp_multi .sp_ico, .sp_multi .sp_wrn { border: 1px solid #bcbcbc; color: #FFFFFF; }
.sp_multi .sp_ico>div, .sp_multi .sp_wrn>div { background-color: #b435d3; }
 
.sp_none .sp_ico, .sp_none .sp_wrn { border: 1px solid #bcbcbc; color: #FFFFFF; }
.sp_none .sp_ico>div, .sp_none .sp_wrn>div { background-color: #1a2421; }

/* Pathnav */

.pathnavbox { clear: both; border-width: 1px; border-style: solid none; border-color: #BCBCBC; padding: 0.3em 0.6em; margin: 0 0 0.5em 0; font-size: 90%; }
.pathnavbox ul { list-style: none none; margin-top: 0; margin-bottom: 0;} 
.pathnavbox > ul { margin: 0;} 
.pathnavbox ul li { margin: 0;}

/* 黑幕（Heimu）模板，即正常情况下隐藏文字，鼠标放置即可现形 */
.heimu,.heimu a,a .heimu {
    border: none;
    background-color: #252525!important;
    color: #252525!important;
    cursor: help
}
 
.heimu:hover,.heimu:active {
    color: #fff!important;
}
 
.heimu a:hover,a:hover .heimu {
    border: none;
    cursor: pointer
}

/* infoboxclass */
.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;
}

/* 定义旋转动画帧数 */
@keyframes spin {
	from   	{transform: rotate(0deg);}
    to 		{transform: rotate(360deg);}
}
 
/* 让图片在 img-spin class中旋转 */
.img-spin img {
	animation: spin 10s infinite linear;
}
 
/*  用img-glow class containers鼠标放置图片之上闪亮*/
.img-glow img {
    -webkit-filter: brightness(100%);
    filter: brightness(100%);
    transition: filter 0.5s, -webkit-filter 0.5s;
}
 
.img-glow img:hover {
    -webkit-filter: brightness(150%);
    filter: brightness(150%);
    transition: filter 0.5s, -webkit-filter 0.5s;
}

/** 使字体按帧显示“红-黄-红-黄-红”的高亮模板update **/
/* 定义动画帧 */
@keyframes update {
    0%    {color: red;text-shadow: 0 0 3px orange, 0 0 5px yellow;}
    25%   {color: orange;text-shadow: 0 0 3px yellow, 0 0 5px red;}
    50%   {color: yellow;text-shadow: 0 0 3px red, 0 0 5px orange;}
    75%   {color: orange;text-shadow: 0 0 3px yellow, 0 0 5px red;}
    100%  {color: red;text-shadow: 0 0 3px orange, 0 0 5px yellow;}
}
 
/* apply 'update' animation to span update class */
.update {
    animation: update 2s infinite linear;
}

/**用于让圆形图片伸展为方形的模板circle**/
/* circle class for Franchise Overview images */
.circle img {
    border-radius: 50%;
    -webkit-transition:  border-radius 1s; /* Safari */
    transition: border-radius 1s;
}
 
.circle img:hover {
    border-radius: 0%;
}

/**  缩进  **/
.textIndent{
text-indent:2em;
}

/** 新闻标题专用标亮 **/
.news {
    text-shadow: 0 0 6px #FC9146;
    color:red;
}

<span class="news">hello world</span>