helialprofile.png
Welcome to IOPWiki, Commander. You can contribute to this wiki without an account. Learn how to contribute and join our Discord server.

Difference between revisions of "MediaWiki:Mobile.css"

Welcome to IOP Wiki. This website is maintained by the Girls' Frontline community and is free to edit by anyone.
Jump to navigation Jump to search
 
(19 intermediate revisions by 5 users not shown)
Line 2: Line 2:
  
 
/*Mainpage no Title*/
 
/*Mainpage no Title*/
−
body.page-Main_Page.action-view h1.firstHeading, body.page-Main_Page.action-submit h1.firstHeading { display: none; }
 
  
 
/*Page Background*/
 
/*Page Background*/
  
 +
/*Disable section editing */
 +
.mw-editsection { display:none!important; }
  
  
−
/* logo */
+
/* For the background images on T-Doll pages */
 +
.bg-character {
 +
    display: none;
 +
}
 +
 
 +
.bg-rarity {
 +
    display: none;
 +
}
 +
 
 +
/* Things to be hidden on mobile */
 +
.tooltip-content,
 +
#serverTabSpan,
 +
#banner-blank,
 +
#banner-cn,
 +
#banner-en,
 +
#banner-tw,
 +
#banner-kr,
 +
#banner-jp,
 +
.jcarousel-item.banners,
 +
#mainmenu {
 +
  display: none;
 +
}
  
−
#mw-panel #p-logo .mw-wiki-logo {
+
#content.mw-body {
−
    background-image: none;
+
  background-color: rgba(12,12,12,0.90);
−
    background-color: transparent;
+
  border: none;
−
    width: 176px;
+
  color: rgba(250,250,250,1);
−
    height: 199px;
+
  text-shadow: 0 0 0.2em black,0 0 0.2em black;
 
}
 
}
  
−
div#mw-panel div.portal div.body ul li a {color: #FFCC00;text-shadow: 0 0 0.2em black, 0 0 0.2em black;}
+
.edit-page {
−
div#mw-panel div.portal div.body ul li a:visited {color: #EEAA00;text-shadow: 0 0 0.2em black, 0 0 0.2em black;}
+
  text-indent: 0;
 +
}
  
−
div#mw-panel div.portal h3 {color: #FFFFFF;text-shadow: 0 0 0.2em black, 0 0 0.2em black;}
+
.card-bg {
−
#mw-panel.collapsible-nav .portal.collapsed h3 a {color: rgb(250,250,250);}
+
  background-image:url("//en.gfwiki.com/images/5/5a/Infobox_bg.png");
−
#mw-panel.collapsible-nav .portal h3 a {color: rgb(250,250,250);text-decoration: none;}
+
  width:256px;
 +
  height:456px;
 +
  padding:10px;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
  position: relative;
 +
}
 +
 
 +
/* For compatibility. Move to card-bg class if possible. */
 +
.profiletable .card-bg {
 +
  height:auto;
 +
  margin: 0;
 +
  display: inline-block;
 +
}
  
−
a {color: #FFCC00;}
+
.card-bg .raritystars {
−
a:visited {color: #EEAA00;}
+
  position: absolute;
 +
  top: 11px;
 +
  right: 15px;
 +
  z-index: 3;
 +
}
  
 +
.card-bg .raritystars.rarityEXTRA {
 +
  top: inherit;
 +
  bottom: 120px;
 +
}
  
 +
.card-bg .dollname {
 +
  position: absolute;
 +
  margin-left: 2px;
 +
  z-index: 4;
 +
  text-align: left;
 +
  font-size: 250%;
 +
  text-shadow: none;
 +
  color: black;
 +
  font-weight: bold;
 +
  font-family: times new roman;
 +
  bottom: 50px;
 +
}
  
 +
.card-bg .indexnumber {
 +
  position: absolute;
 +
  bottom: 3px;
 +
  width: 66px;
 +
  z-index: 4;
 +
  font-size: 245%;
 +
  text-shadow: none;
 +
  color: white;
 +
  font-family: courier new;
 +
  letter-spacing: -6px;
 +
  text-align: center;
 +
  right: 8px;
 +
  line-height: 1;
 +
}
  
−
/* header */
+
.card-bg .namefield {
 +
  position: absolute;
 +
  z-index: 3;
 +
  bottom: 52px;
 +
}
  
−
div#mw-page-base {
+
.card-bg .classificationsymbol {
−
    background: none;
+
  position: absolute;
−
    height: 200px;
+
  margin-left: 1px;
−
    background-image: url(http://gfwiki.com/images/a/a6/Header.png), url(http://gfwiki.com/images/7/7b/Bannerbg.png);
+
  margin-top: 1px;
−
    background-position: center,top;
+
  z-index: 3;
−
    background-repeat: no-repeat,repeat-x;
+
}
−
    background-size: auto 200px;
+
 
 +
.card-bg .profilebackground {
 +
  position: absolute;
 +
  z-index: 2;
 +
}
 +
 
 +
.card-bg .dollprofileimage {
 +
  margin-top: 21px;
 +
  min-width: 256px;
 +
  margin-bottom: 94px;
 +
}
 +
 
 +
/* Charactertabber */
 +
.charactertabber {
 +
  width: 100%;
 +
  border-bottom: 2px solid #808080;
 +
}
 +
 
 +
.charactertabber td {
 +
  padding: 8px;
 +
  background-color: #808080;
 +
  font-weight: bold;
 +
  opacity: 0.45;
 +
  white-space: nowrap;
 +
}
 +
 
 +
.charactertabber td:hover {
 +
  opacity: 1;
 +
}
 +
 
 +
.charactertabber td.active {
 +
  background-color: #f0b000;
 +
  font-weight: bold;
 +
  color: white;
 +
  opacity: 1;
 +
}
 +
 
 +
.charactertabber td.filler {
 +
  width: 100%;
 +
  opacity: 0;
 +
}
 +
 
 +
.obtainflagcontainer {
 +
  float: left;
 +
  color: black;
 +
  text-shadow: none;
 +
  display: inline-block;
 +
  width: 150px;
 +
}
 +
 
 +
.obtainflag {
 +
  border: 1px solid transparent;
 +
  border-radius:2px;
 +
  margin-right:2px;
 +
  padding-left: 2px;
 +
  padding-right: 2px;
 +
  clear: both;
 +
}
 +
 
 +
.obtainflag.obtain-normal { background:green;  }
 +
.obtainflag.obtain-heavy  { background:orange; }
 +
.obtainflag.obtain-drop  { background:yellow; }
 +
.obtainflag.obtain-reward { background:salmon; }
 +
.obtainflag.obtain-hoc-fragments { background: #f9d988; }
 +
.obtainflag.notpossible  { opacity: 0.25;    }
 +
 
 +
/* TileGrid */
 +
.tilegridtable {
 +
  background: rgba(62, 62, 62);
 +
  padding: 10px;
 +
}
 +
.tilegridtable td {
 +
  background: rgba(0, 0, 0, 0.5);
 +
}
 +
.tilegridtable td.standing {
 +
  background: rgba(255, 255, 255, 1);
 +
}
 +
.tilegridtable td.buff {
 +
  background: rgba(0, 255, 222, 1);
 +
}
 +
 
 +
/* Equipment named card */
 +
.equipmentnamedcard {
 +
  width: 80px;
 +
  text-align: center;
 +
  display: inline-block;
 +
  margin-right: 15px;
 +
  vertical-align: top;
 +
}
 +
 
 +
.equipmentnamedcard .equipmentcard {
 +
  margin-left: 5px;
 +
  margin-right: 5px;
 +
}
 +
 
 +
.equipmentnamedcard .equipname {
 +
  font-size: 0.9em;
 +
}
 +
 
 +
.equipmentnamedcard .equipname small {
 +
  display: none;
 +
}
 +
 
 +
/* Equipment cards */
 +
.equipmentcard {
 +
  display: inline-block;
 +
  background-color: #303030;
 +
  border: 2px solid #d0d0d0;
 +
  width: 64px;
 +
  height: 60px;
 +
  position: relative;
 +
  overflow: hidden;
 +
}
 +
 
 +
.equipmentcard .equipmentcardfiller {
 +
  position: absolute;
 +
  z-index: 5;
 +
}
 +
 
 +
.equipmentcard img.typeicon {
 +
  position: absolute;
 +
  z-index: 2;
 +
  top: 0;
 +
  left: 0;
 +
}
 +
 
 +
.equipmentcard .raritystars {
 +
  position: absolute;
 +
  margin-top: 1px;
 +
  margin-left: auto;
 +
  margin-right: 1px;
 +
  height: 8px;
 +
  z-index: 3;
 +
  top: 0px;
 +
  right: 0px;
 +
}
 +
 
 +
.equipmentcard .equipimage {
 +
  position: absolute;
 +
  margin-top: 3px;
 +
  top: 0;
 +
  left: 0;
 +
}
 +
 
 +
/* Stats Graph */
 +
line.emphased {
 +
  stroke-width: 3pt
 +
}
 +
 
 +
line.radial {
 +
  stroke: #333;
 +
  stroke-width: 4pt;
 +
}
 +
 
 +
svg {
 +
  fill: none;
 +
  stroke: #777;
 +
  stroke-opacity: 1;
 +
  stroke-width: 1pt;
 +
}
 +
 
 +
text {
 +
  fill: white;
 +
  font-size: 2.5em;
 +
  font-weight: normal;
 +
  stroke: none;
 +
  text-anchor: middle;
 
}
 
}
  
  
−
/* For the background images on T-Doll pages */
+
polygon {
−
.bg-character {
+
  stroke-width: 3pt;
−
    display: none;
+
  fill-opacity: 0.5;
 +
}
 +
.graph-orange {
 +
  stroke: #ff7733;
 +
  fill: orange;
 +
}
 +
.graph-red {
 +
  stroke: #bd0b0b;
 +
  fill: red;
 +
}
 +
.graph-green {
 +
  stroke: #007f00;
 +
  fill: green;
 +
}
 +
.graph-blue {
 +
  stroke: #00007f;
 +
  fill: blue;
 +
}
 +
 
 +
li.gallerybox div.thumb {
 +
  background-color: #f9f9f91a;
 
}
 
}
  
−
.bg-rarity {
+
pre {
−
    display: none;
+
  color: black;
 +
  text-shadow: none;
 
}
 
}
  
−
/*For Template:DollBG on t-doll pages*/
+
 
 +
/*For Template:DollBG on t-dproll pages*/
 
#bg-character {
 
#bg-character {
 
     position: fixed;
 
     position: fixed;
Line 69: Line 331:
 
}
 
}
  
 +
 +
 +
/* Tabs extension*/
 +
.tabs-tabbox {margin:0;}
 +
 +
.tabs-tabbox > .tabs-container {
 +
    border: none;
 +
padding: 0;
 +
margin-top: 0;
 +
}
 +
 +
 +
.tabs-tabbox > .tabs-input:checked + .tabs-label, .tabs-input-0:checked + .tabs-input-1 + .tabs-label {
 +
    background-color: #F0b000;
 +
    border-radius: 15px;
 +
    color:#4E443C;
 +
    border: none;
 +
    text-shadow:none;
 +
    z-index:5;
 +
}
 +
 +
 +
.tabs-tabbox > .tabs-label {
 +
    background-color: #4E443C;
 +
    border-radius: 15px;
 +
    color:#F0b000;
 +
    border: none;
 +
    text-shadow:none;
 +
    z-index:5;
 +
    font-weight: bold;
 +
}
 +
 +
/*gallery tabs*/
 +
.tabs-gallery { display:inline-block;}
 +
.tabs-gallery > .tabs-container {margin-top: -24px;}
 +
.tabs-gallery > .tabs-label {
 +
    -moz-transition: all .2s ease-in;
 +
    -o-transition: all .2s ease-in;
 +
    -webkit-transition: all .2s ease-in;
 +
    transition: all .2s ease-in;
 +
opacity:0.5;
 +
}
 +
.tabs-gallery > .tabs-label:hover {opacity:1;}
 +
 +
 +
/*vertical*/
 +
.verticaltabber {
 +
display:flex;
 +
flex-wrap:wrap;
 +
}
 +
 +
.verticaltabber > .tabber {display:flex;}
 +
.verticaltabber > .tabber > .tabbertab {display:flex;}
 +
.verticaltabber > .tabber > .tabbertab > p {margin:0;}
 +
 +
.verticaltabber > .tabber ul.tabbernav {order:2;}
 +
.verticaltabber > .tabber ul.tabbernav li {display:flex;}
 +
.verticaltabber > .tabber ul.tabbernav li a {margin: 0 0 3px 0;width:100%;font-style:italic;}
 +
.verticaltabber > .tabber ul.tabbernav li:first-child a {margin: 0 0 3px 0;width:100%;font-style:normal;}
 +
 +
.verticaltabber > .tabber .tabs {margin:auto;}
 +
 +
 +
.paddedtabber-2px > .tabber {padding:2px;}
 +
 +
 +
 +
/*              tabs styled tabber                */
 +
 +
/* tab body*/
 +
.tabstabber > .tabber {padding:0;}
 +
.tabstabber > .tabber .tabbertab {padding: 2px;background-color: transparent;}
 +
 +
.tabstabber > .tabber ul.tabbernav {margin: 10px 0 2px 0;}
 +
 +
 +
.tabstabber > .tabber > .tabbertab > p {margin:0;}
 +
 +
/* inactive tab */
 +
.tabstabber > .tabber ul.tabbernav li a:link {
 +
    background-color: #4E443C;
 +
    border-radius: 15px;
 +
    color:#F0b000;
 +
    border: none;
 +
    text-shadow:none;
 +
    font-weight: bold;   
 +
padding: 3px 6px;
 +
margin: 2px;
 +
}
 +
.tabstabber > .tabber ul.tabbernav li:first-child a:link {margin-left: 10px;}
 +
/* active tab */
 +
.tabstabber > .tabber ul.tabbernav li.tabberactive a, .tabstabber > .tabber ul.tabbernav li.tabberactive a:link {background-color: #F0b000;color:#4E443C;}
 +
 +
 +
/*gradient divs*/
 +
.gradientDivs {
 +
width:100%;
 +
}
 +
.gradientDivs > div{
 +
background: -moz-radial-gradient(at left top,rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.25) 10%, transparent 70%); /* FF3.6-15 */
 +
background: -webkit-radial-gradient(at left top,rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.25) 10%, transparent 70%); /* Chrome10-25,Safari5.1-6 */
 +
background: radial-gradient(at left top,rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.25) 10%, transparent 70%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 +
padding: 1em;
 +
overflow: hidden;
 +
max-width: 800px;
 +
height:90px;
 +
position:relative;
 +
}
 +
 +
.gradientDivs > h4 {
 +
background-color: rgba(255,255,255,0.25);
 +
display: table;
 +
padding: 3px 6px 3px 6px;
 +
margin-left: 0.25em;
 +
}
 +
.gradientDivs > h4 > .mw-editsection {display:none;}
 +
.gradientDivs > div > div{background: linear-gradient(115deg,rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 60%, transparent 90%);width:80%;padding:0 5px 0 5px;}
 +
.gradientDivs > div > p {width:75%;text-align:right;position:absolute;bottom:1em;}
  
  
Line 75: Line 455:
 
div.thumbinner {
 
div.thumbinner {
 
     border: 0;
 
     border: 0;
−
     background-color: rgba(250,250,250,0.6);
+
     background-color: rgba(255,255,255,0.25);
 
}
 
}
  
 
.card-bg {
 
.card-bg {
−
background-image:url("http://gfwiki.com/images/5/5a/Infobox_bg.png");
+
background-image:url("/images/5/5a/Infobox_bg.png");
 
width:256px;
 
width:256px;
 
height:456px;
 
height:456px;
Line 85: Line 465:
 
}
 
}
 
.card-bg-small {
 
.card-bg-small {
−
background-image:url("http://gfwiki.com/images/thumb/5/5a/Infobox_bg.png/138px-Infobox_bg.png");
+
background-image:url("/images/thumb/5/5a/Infobox_bg.png/138px-Infobox_bg.png");
 
width:128px;
 
width:128px;
 
height:228px;
 
height:228px;
 
padding:5px;
 
padding:5px;
 +
display:inline-block;
 +
}
 +
 +
.card-bg-small.unreleased,
 +
.unreleased {
 +
  opacity: 0.25;
 +
}
 +
 +
.card-bg-small .pad {
 +
position:absolute;
 +
z-index:5
 +
}
 +
 +
.card-bg-small .name {
 +
position:absolute;
 +
margin-left:2px;
 +
margin-top:178px;
 +
z-index:4;
 +
text-align:left;
 +
font-size:125%;
 +
text-shadow:none;
 +
color: black;
 +
font-weight: bold;
 +
font-family: "Times New Roman", Times, serif;
 +
text-overflow: ellipsis;
 +
    width: 126px;
 +
    white-space: nowrap;
 +
    overflow: hidden;
 +
}
 +
 +
.card-bg-small .index {
 +
position:absolute;
 +
margin-top:206px;
 +
width:128px;
 +
z-index:4;
 +
font-size:110%;
 +
text-shadow:none;
 +
text-align:right;
 +
color: white;
 +
font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
 +
letter-spacing: -3px
 +
}
 +
 +
.card-bg-small .rarity-stars {
 +
position:absolute;
 +
margin-top:178px;
 +
z-index:3
 +
}
 +
 +
.card-bg-small .rarity-class {
 +
position:absolute;
 +
margin-left:1px;
 +
margin-top:1px;
 +
z-index:3
 
}
 
}
  
 +
.card-bg-small .infobox-border {
 +
position:absolute;
 +
z-index:2
 +
}
  
 +
.card-bg-small .doll-image {
 +
margin-top:10px;
 +
height:167px;
 +
display: inline-block;
 +
}
 +
 +
.icon-bg-2star-small {
 +
background-image:url("/images/thumb/7/72/BG_2star_S.png/60px-BG_2star_S.png");
 +
padding:5px;
 +
}
  
  
−
/*For construction tables*/
 
−
@media only screen and (min-width: 1600px) {
 
 
.variable-columns {
 
.variable-columns {
−
-ms-column-count: 3;
+
-ms-column-width: 450px;
−
-moz-column-count: 3;
+
-moz-column-width: 450px;
−
-webkit-column-count: 3;
+
-webkit-column-width: 450px;
−
column-count: 3;
+
column-width: 450px;
 
}
 
}
 +
 +
/* for color inversion */
 +
.invertcolor{-webkit-filter:invert(1);filter:invert(1)}
 +
.invertcolor-50{-webkit-filter:invert(1);filter:invert(0.5)}
 +
 +
/*For construction tables*/
 +
 +
.multi-column-table tbody {display:block;}
 +
.multi-column-table tr {display:table;}
 +
.multi-column-table td {display:table-cell;}
 +
.multi-column-table tbody, .multi-column-table tr {min-width:100%;}
 +
.multi-column-table table {width: 100%; max-width: 100%;}
 +
 +
 +
.multi-column-table tbody {
 +
    column-width:450px;
 +
    -moz-column-width:450px;
 +
    -webkit-column-width:450px;
 
}
 
}
  
−
@media only screen and (min-width: 1080px) and (max-width: 1599px) {
+
.multi-column-200px tbody {
−
.variable-columns {
+
-ms-column-width: 200px;
−
-ms-column-count: 2;
+
    -moz-column-width:200px;
−
-moz-column-count: 2;
+
    -webkit-column-width:200px;
−
-webkit-column-count: 2;
+
    column-width:200px;
−
column-count: 2;
 
−
}
 
 
}
 
}
  
−
@media only screen and (max-width: 1079px) {
+
.multi-column-300px tbody {
−
.variable-columns {
+
-ms-column-width: 300px;
−
-ms-column-count: 1;
+
    -moz-column-width:300px;
−
-moz-column-count: 1;
+
    -webkit-column-width:300px;
−
-webkit-column-count: 1;
+
    column-width:300px;
−
column-count: 1;
 
−
}
 
 
}
 
}
  
−
@media only screen and (max-width: 799px) {
+
 
 +
@media only screen and (max-width: 820px) {
 
div#mw-panel {display:none;}
 
div#mw-panel {display:none;}
 
div#left-navigation{margin-left:0;}
 
div#left-navigation{margin-left:0;}
Line 146: Line 607:
 
.mw-body a:visited, .mw-body a.external:visited, .mw-body a.extiw:visited { color: #EEAA00; } /* visited links */
 
.mw-body a:visited, .mw-body a.external:visited, .mw-body a.extiw:visited { color: #EEAA00; } /* visited links */
 
.mw-body a.new { color: #DD0000; } /* new links */
 
.mw-body a.new { color: #DD0000; } /* new links */
 +
 +
/* plain links*/
 +
 +
.plainlinks {
 +
padding:0;
 +
background:none;
 +
}
 +
 +
/* Spoiler Text */
 +
.spoiler {
 +
    -moz-transition: all .1s ease-in;
 +
    -o-transition: all .1s ease-in;
 +
    -webkit-transition: all .1s ease-in;
 +
    transition: all .1s ease-in;
 +
    -webkit-filter: blur(3px); /* Safari 6.0 - 9.0 */
 +
    filter: blur(3px);
 +
}
 +
 +
.spoiler:hover {
 +
    filter: none;
 +
}
 +
 +
 +
.darken {filter:brightness(30%);}
  
  
 
/* Tables */
 
/* Tables */
 
.gf-table th {
 
.gf-table th {
−
color: white;
+
color: #322300;
 
font-size: 110%;
 
font-size: 110%;
 
background-color: #f0b000;
 
background-color: #f0b000;
 
text-align: center;
 
text-align: center;
−
vertical-align: top;
 
 
padding: 5px;
 
padding: 5px;
 +
text-shadow:none;
 
}
 
}
  
−
.gf-table td {
+
.gf-table th a {color: #875e00}
−
background-color: transparent;
+
 
−
color: white;
+
 
−
background: rgba(0, 0, 0, 0.6);
+
.gf-table > tbody > tr > td {
−
vertical-align: top;
+
background-color: rgba(0, 0, 0, 0.6);
 
padding: 5px;
 
padding: 5px;
 
}
 
}
  
  
−
.gf-table-lightcell td {
+
.gf-table-lightcell > tbody > tr > td {
 
background: rgba(0, 0, 0, 0.3);
 
background: rgba(0, 0, 0, 0.3);
 
}
 
}
  
−
.gf-table-darkcell {
+
.gf-table-layered > tbody > tr > td {
 +
background: rgba(0, 0, 0, 0.3);
 +
color:rgb(200,200,200);
 +
}
 +
 
 +
.gf-table-layered > tbody > tr > th {
 +
color:white;
 
background: rgba(0, 0, 0, 0.6);
 
background: rgba(0, 0, 0, 0.6);
 
}
 
}
 +
 +
 +
.gf-table-darkcell > tbody > tr > td {
 +
background: rgba(0, 0, 0, 0.6);
 +
}
 +
 +
/*equipment*/
 +
.greenrow > td {color:green}
 +
.redrow > td {color:red}
  
  
Line 179: Line 679:
  
  
 +
/* picture preview*/
  
 +
.mw-mmv-image img.gif, .mw-mmv-image img.png, .mw-mmv-image img.svg, .mw-mmv-image img.tiff, .mw-mmv-image img.tif {
 +
    background: none;
 +
}
  
 +
.mw-mmv-image img.gif:hover, .mw-mmv-image img.png:hover, .mw-mmv-image img.svg:hover, .mw-mmv-image img.tiff:hover, .mw-mmv-image img.tif:hover {
 +
    background: url(/extensions/MultimediaViewer/resources/mmv/ui/checker.png?bdcf5) repeat;
 +
}
 +
 +
 +
.mw-mmv-overlay {
 +
    position: fixed;
 +
    top: 0;
 +
    left: 0;
 +
    right: 0;
 +
    bottom: 0;
 +
    background-color: rgba(0,0,0,0.8);
 +
    opacity: 0.73;
 +
}
 +
body.mediawiki.mw-mmv-lightbox-open #mw-page-base,
 +
body.mediawiki.mw-mmv-lightbox-open #mw-head-base,
 +
body.mediawiki.mw-mmv-lightbox-open #mw-navigation,
 +
body.mediawiki.mw-mmv-lightbox-open #content,
 +
body.mediawiki.mw-mmv-lightbox-open #footer,
 +
body.mediawiki.mw-mmv-lightbox-open #globalWrapper {
 +
    display: inherit;
 +
}
 +
body.mediawiki.mw-mmv-lightbox-open > *  {
 +
    display: inherit;
 +
}
 +
body.mediawiki.mw-mmv-lightbox-open > script,
 +
body.mediawiki.mw-mmv-lightbox-open > style {
 +
    display: none;
 +
}
 +
body.mediawiki.mw-mmv-lightbox-open {
 +
    overflow: hidden;
 +
}
 +
body .mw-mmv-wrapper {
 +
    position: fixed;
 +
}
 +
/* mutilmediaViewer 信息栏修复 */
 +
.mw-mmv-image-metadata-column.mw-mmv-image-metadata-desc-column {
 +
    width: 30%;
 +
}
 +
.mw-mmv-image-metadata-column.mw-mmv-image-metadata-links-column {
 +
    width: 70%;
 +
    max-width: 70%;
 +
}
 +
ul.mw-mmv-image-links li {
 +
    float: left;
 +
    padding: .3em 1em;
 +
}
 +
div.mw-mmv-image-desc-div,
 +
div.mw-mmv-image-links-div{
 +
    display:block
 +
}
 +
div.metadata-panel-is-closed .mw-mmv-image-links li.mw-mmv-license-li {
 +
    height:inherit;
 +
    line-height:inherit;
 +
}
  
−
/*                    main page                    */
 
 
/* fading effects*/
 
/* fading effects*/
  
Line 209: Line 767:
 
}
 
}
  
−
@media screen and (min-width: 0px)
+
 
 +
 
 +
/*                    main page                    */
 +
 
 +
 
 +
/*MAIN PAGE CONTENTS*/
 +
 
 +
@keyframes glowing {
 +
0% {
 +
  box-shadow: 0px 0px 10px #000;
 +
  border-color:grey;
 +
  }
 +
45% {
 +
  box-shadow:0 0 10px #c40400;
 +
  border-color:red;
 +
  }
 +
55% {
 +
  box-shadow:0 0 10px #c40400;
 +
  border-color:red;
 +
  }
 +
100% {
 +
  box-shadow: 0px 0px 10px #000;
 +
  border-color:grey;
 +
}
 +
}
 +
.button-glow {
 +
animation:glowing 3000ms infinite
 +
}
 +
 
 +
.GamesThumbContainer{
 +
display:inline-block;
 +
width:230px;
 +
height:125px;
 +
padding:2px;
 +
}
 +
 
 +
.GameThumb{
 +
display:flex;
 +
position:absolute;
 +
justify-content:center;
 +
width:230px;
 +
height:125px;
 +
flex-direction:column;
 +
text-align:center;
 +
background-color: rgba(0,0,0,0.5);
 +
font-size:1.5em;
 +
text-shadow: 0px 0px 5px #000000;
 +
}
 +
 
 +
.GameThumb a{
 +
margin:2px;
 +
}
 +
 
 
.rightcol, .leftcol {
 
.rightcol, .leftcol {
 
     max-width: 800px;
 
     max-width: 800px;
Line 217: Line 827:
 
}
 
}
 
.leftcol {
 
.leftcol {
−
max-width: 800px;
 
−
width:100%;
 
 
     float: left;
 
     float: left;
 
     position: relative;
 
     position: relative;
−
    right:0;
 
 
     margin-bottom:5px;
 
     margin-bottom:5px;
 
}
 
}
Line 232: Line 839:
 
#timerwidgets{float:left}
 
#timerwidgets{float:left}
  
 +
#flexible-panel{width:100%;display:none}
  
−
.test{
+
.mainpage{
−
/*line-height:1.2 !important; MediaWiki resizes line height, destroying placements.*/
 
 
margin-left:auto;
 
margin-left:auto;
 
margin-right:auto; /*Mediawiki max space for 1080p is some 1600px*/
 
margin-right:auto; /*Mediawiki max space for 1080p is some 1600px*/
Line 242: Line 849:
 
/* small screen less than 800px content width*/
 
/* small screen less than 800px content width*/
 
@media only screen and (max-width: 1040px) {
 
@media only screen and (max-width: 1040px) {
−
.test{
+
.mainpage{
−
/*line-height:1.2 !important; MediaWiki resizes line height, destroying placements.*/
 
 
width:100%;
 
width:100%;
 
}
 
}
 
#timerwidgets{width:240px;float:left;}
 
#timerwidgets{width:240px;float:left;}
 
#twitterbox{width:auto;margin-left:245px;}
 
#twitterbox{width:auto;margin-left:245px;}
−
#twitter-widget-0{height:274px!important;}
+
#twitter-widget-0{height:267px!important;}
 +
.updates{max-height:136.833px;}
 +
.promotions{max-height:120.133px;}
 
}
 
}
 
/* over 800px, not resize for page necessary*/
 
/* over 800px, not resize for page necessary*/
 
@media only screen and (min-width: 1040px) {
 
@media only screen and (min-width: 1040px) {
−
.test{
+
.mainpage{width:800px;}
−
width:800px;
 
−
height:auto;
 
−
}
 
 
#timerwidgets{width:345px;float:left;}
 
#timerwidgets{width:345px;float:left;}
 
#twitterbox{width:450px;float:left;margin-left:5px;}
 
#twitterbox{width:450px;float:left;margin-left:5px;}
−
#twitter-widget-0{height:379px!important;}
+
#twitter-widget-0{height:373px!important;}
 +
#aboutgame,#aboutwiki{width:800px;}
 +
.updates{max-height:198.25px;}
 +
.promotions{max-height:164px;}
 
}
 
}
 +
  
 
@media only screen and (min-width: 1360px) {
 
@media only screen and (min-width: 1360px) {
−
.test{
+
.mainpage{width:1068px;}
−
/*line-height:1.2 !important; MediaWiki resizes line height, destroying placements.*/
 
−
    width:-moz-fit-content;
 
−
    width:-webkit-fit-content;
 
−
    width:-ms-fit-content;
 
−
}
 
 
.rightcol{width:240px;margin-left:2em;}
 
.rightcol{width:240px;margin-left:2em;}
 
#timerwidgets{width:240px;}
 
#timerwidgets{width:240px;}
−
#twitterbox{width:240px;margin-left:0px;}
+
#twitterbox{width:240px;margin-left:0;min-height: 479px;max-height: 479px;margin-bottom:5px;}
 +
#twitter-widget-0{height:479px!important;}
 +
.updates{max-height:136.833px;}
 +
.promotions{max-height:120.133px;}
 +
 
}
 
}
  
 
@media only screen and (min-width: 1480px) {
 
@media only screen and (min-width: 1480px) {
 +
.mainpage{width:1188px;}
 
.rightcol{width:360px;margin-left:2em;}
 
.rightcol{width:360px;margin-left:2em;}
 
#timerwidgets{width:360px;}
 
#timerwidgets{width:360px;}
−
#twitterbox{width:360px;margin-left:0px;}
+
#twitterbox{width:360px;margin-left:0px;min-height: 361px;max-height: 361px;}
 +
#twitter-widget-0{height: 361px !important;}
 +
.updates{max-height:217.017px;}
 +
.promotions{max-height:170.267px;}
 
}
 
}
  
  
 
@media only screen and (min-width: 1600px) {
 
@media only screen and (min-width: 1600px) {
 +
.mainpage{width:1308px;}
 
.rightcol{width:480px;}
 
.rightcol{width:480px;}
 
#timerwidgets{width:235px;}
 
#timerwidgets{width:235px;}
−
#twitterbox{width:240px;margin-left:5px;}
+
#twitterbox{width:240px;margin-left:5px;min-height: 269px;max-height: 269px;}
 
#twitter-widget-0{height:269px!important;}
 
#twitter-widget-0{height:269px!important;}
 +
#aboutgame,#aboutwiki{width:480px;margin-left:2em;}
 +
.updates{max-height:133.917px;}
 +
.promotions{max-height:118.05px;}
 
}
 
}
  
 
@media only screen and (min-width: 1720px) {
 
@media only screen and (min-width: 1720px) {
 +
.mainpage{width:1428px;}
 
.rightcol{width:600px;}
 
.rightcol{width:600px;}
 
#timerwidgets{width:295px;}
 
#timerwidgets{width:295px;}
−
#twitterbox{width:300px;}
+
#twitterbox{width:300px;min-height: 329px;max-height: 329px;}
 
#twitter-widget-0{height:329px!important;}
 
#twitter-widget-0{height:329px!important;}
 +
#aboutgame,#aboutwiki{width:600px;}
 +
.updates{max-height:169px;}
 +
.promotions{max-height:143.117px;}
 
}
 
}
  
Line 297: Line 917:
 
background-color: rgba(150,150,150,0.8);
 
background-color: rgba(150,150,150,0.8);
 
border: rgb(150,150,150);
 
border: rgb(150,150,150);
−
border-width: 0.25em;
+
border-width: 3px;
 
border-style: solid;
 
border-style: solid;
 
box-shadow: 0px 0px 10px #000;
 
box-shadow: 0px 0px 10px #000;
 
}
 
}
  
−
#aboutgame{
+
#twitterbox{
 +
background-image:url(/images/c/c6/BG_twitter.png);
 +
background-repeat: no-repeat;
 +
background-size: contain;
 +
background-position:center;
 +
border-radius: 4px;
 +
background-color:#fff;
 +
position:relative;
 +
z-index:3;
 +
}
 +
 
 +
#aboutgame,#aboutwiki,#newestadditions{
 
padding:0.5em;
 
padding:0.5em;
 
background-color: #3f3f3f;
 
background-color: #3f3f3f;
 
border: rgb(150,150,150);
 
border: rgb(150,150,150);
−
border-width: 0.25em;
+
border-width: 3px;
 
border-style: solid;
 
border-style: solid;
 
box-shadow: 0px 0px 10px #000;
 
box-shadow: 0px 0px 10px #000;
−
background-image:url("http://gfwiki.com/images/1/10/Aboutgame.png");
+
background-image:url("/images/1/10/Aboutgame.png");
 
background-repeat: no-repeat;
 
background-repeat: no-repeat;
 
background-position: -1.5em -0.2em,left top;
 
background-position: -1.5em -0.2em,left top;
 
overflow:hidden;
 
overflow:hidden;
 +
display:inline-block;
 +
box-sizing:border-box;
 
}
 
}
  
 +
#newestadditions {
 +
width:100%;
 +
overflow:auto;
 +
white-space:nowrap;
 +
}
 +
 +
#newestadditions h4{
 +
  margin: 0;
 +
  padding: 0;
 +
  border-bottom: thin solid gray;
 +
}
  
 
#mainmenu{
 
#mainmenu{
−
background-image:url("http://gfwiki.com/images/8/86/BG_homescreen.jpg");
+
background-image:url("/images/8/86/BG_homescreen.jpg");
 
background-repeat: no-repeat;
 
background-repeat: no-repeat;
 
background-size: cover;
 
background-size: cover;
Line 325: Line 969:
 
position:relative;
 
position:relative;
 
border: rgb(150,150,150);
 
border: rgb(150,150,150);
−
border-width: 0.25em;
+
border-width: 3px;
 
border-style: solid;
 
border-style: solid;
 
box-shadow: 0px 0px 10px #000
 
box-shadow: 0px 0px 10px #000
Line 331: Line 975:
  
 
#directory{
 
#directory{
−
background-image:url("http://gfwiki.com/images/e/e8/BG_main_directory.png");
+
background-image:url("/images/e/e8/BG_main_directory.png");
 
background-color: #3f3f3f;
 
background-color: #3f3f3f;
 
border: rgb(150,150,150);
 
border: rgb(150,150,150);
Line 340: Line 984:
 
max-width:800px;
 
max-width:800px;
 
position:relative;
 
position:relative;
−
border-width: 0.25em;
+
border-width: 3px;
 
border-style: solid;
 
border-style: solid;
 
box-shadow: 0px 0px 10px #000;
 
box-shadow: 0px 0px 10px #000;
Line 346: Line 990:
 
}
 
}
  
−
#updates{
+
 
−
background-image: url("http://gfwiki.com/images/thumb/6/6f/BG_factory.png/395px-BG_factory.png");
+
.banners{
 +
max-width:800px;
 +
max-height:198px;
 +
width:auto;
 +
height:auto;
 +
border: rgb(150,150,150);
 +
border-width: 0.25em;
 +
border-style: solid;
 +
box-shadow: 0 0 10px #000;
 +
visibility:hidden;
 +
position:absolute;
 +
}
 +
 
 +
.updates{
 +
background-image: url("/images/thumb/6/6f/BG_factory.png/395px-BG_factory.png");
 
background-repeat: no-repeat;
 
background-repeat: no-repeat;
 
background-size: cover;
 
background-size: cover;
 
width:360px;
 
width:360px;
 
width:auto;
 
width:auto;
 +
border: rgb(150,150,150);
 +
border-width: 3px;
 +
border-style: solid;
 +
box-shadow: 0px 0px 10px #000;
 +
margin-bottom:5px;
 +
visibility:hidden;
 +
position:absolute;
 +
}
 +
 +
#banner-blank {
 +
visibility:visible;
 +
position:inherit;
 +
}
 +
 +
#update-blank {
 +
visibility:visible;
 +
position:inherit;
 +
}
 +
 +
.promotions {
 +
max-width:360px;
 +
height:auto;
 +
width:auto;
 +
overflow:hidden;
 +
background-color:#232323;
 
border: rgb(150,150,150);
 
border: rgb(150,150,150);
 
border-width: 0.25em;
 
border-width: 0.25em;
 
border-style: solid;
 
border-style: solid;
−
box-shadow: 0px 0px 10px #000;
+
box-shadow: 0 0 10px #000;
 
margin-bottom:5px;
 
margin-bottom:5px;
 +
visibility:hidden;
 +
position:absolute;
 
}
 
}
  
 +
#promotion-blank {
 +
visibility:visible;
 +
position:inherit;
 +
}
  
 
.dropdown {
 
.dropdown {
Line 389: Line 1,078:
 
}
 
}
  
 +
.serverTabSpan {
 +
    position: absolute;
 +
    margin: -5px 0 0 5px;
 +
}
 +
 +
.serverTabLinks:hover {
 +
    opacity: 0.8;
 +
}
 +
.serverTabLinks {
 +
    border: none;
 +
    border-radius: 1px;
 +
    border: none;
 +
    text-shadow: none;
 +
    z-index: 5;
 +
    padding: 3px 6px;
 +
    margin: 2px 2px;
 +
    font-weight: bold;
 +
    font-size: 40%;
 +
    transition: all .2s ease-in;
 +
    opacity: 0.5;
 +
}
 +
 +
.serverTabLinks-active {
 +
    opacity: 0.9!important;
 +
}
 +
 +
 +
 +
.tabButtonLane {
 +
display: flex;
 +
  padding-top:1px
 +
}
 +
.tabButtonLane > button {
 +
background-color: rgba(100,100,100,0.3);
 +
color: white;
 +
font-weight: bold;
 +
display: inline-block;
 +
padding: 4px 10px;
 +
margin-left: 3px;
 +
border: none;
 +
text-shadow: 0 0 0.2em black,0 0 0.2em black;
 +
font-size: 1em;
 +
cursor: pointer;
 +
}
 +
 +
.tabButtonLane > button:hover {
 +
    background-color: rgba(100,100,100,0.45);
 +
}
 +
 +
.tabButtonLane > .tabButton-active {
 +
    background-color: rgba(100,100,100,0.7)!important;
 +
}
 +
 +
.enemyname {
 +
  color: #FF0012;
 +
  text-shadow: 0px 0px 3px #EC5151;
 +
  display: inline-block;
 +
}
 +
 +
.enemyname.boss {
 +
  /* background-image: url('/images/1/1e/Boss_Icon_Small.png');*/
 +
  background-image: url('/images/f/fc/Boss_Skull_Icon.png');
 +
  background-size: 12px;
 +
  background-repeat: no-repeat;
 +
  padding-left: 14px;
 +
  background-position-y: 3px;
 +
  background-position-x: 0;
 +
}
 +
 +
/* PNC specifics =========================== */
 +
 +
/* Character index */
 +
.pnc-index-entry {
 +
position: relative;
 +
display: inline-block;
 +
height: 250px;
 +
width: 128px;
 +
overflow: hidden;
 +
margin-right: 20px;
 +
border-radius: 5px;
 +
}
 +
.pnc-index-entry .file {
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
}
 +
.pnc-index-entry .card {
 +
position: absolute;
 +
top: 14px;
 +
left: 2px;
 +
width: 124px;
 +
}
 +
.pnc-index-entry .back {
 +
position: absolute;
 +
top: 20px;
 +
left: 0px;
 +
}
 +
.pnc-index-entry .hero {
 +
position: absolute;
 +
top: 0px;
 +
left: 1px;
 +
width: 126px;
 +
}
 +
.pnc-index-entry .front {
 +
position: absolute;
 +
bottom: 0px;
 +
}
 +
.pnc-index-entry .company {
 +
position: absolute;
 +
top: 12px;
 +
left: 40px;
 +
width: 120px;
 +
opacity: 20%;
 +
}
 +
.pnc-index-entry .rarity {
 +
position: absolute;
 +
bottom: 32px;
 +
left: 4px;
 +
height: 16px;
 +
}
 +
.pnc-index-entry .name {
 +
position: absolute;
 +
bottom: 10px;
 +
left: 8px;
 +
width: 120px;
 +
color: lightgray;
 +
font-size: 20px;
 +
}
 +
.pnc-index-entry .heroclass {
 +
position: absolute;
 +
top: 15px;
 +
left: 4px;
 +
width: 16px;
 +
}
 +
 +
/* Template:hero name */
 +
.heroname {
 +
  background-size: 9px;
 +
  background-repeat: no-repeat;
 +
  padding-left: 10px;
 +
  /*white-space:wrap;*/
 +
}
 +
 +
.heroname.star1 {
 +
color:#2999F3;
 +
text-shadow: 0px 0px 3px #2999F3;
 +
}
 +
 +
.heroname.star2 {
 +
color:#B470E1;
 +
text-shadow: 0px 0px 3px #B470E1;
 +
}
 +
 +
.heroname.star3 {
 +
color:#FC8C10;
 +
text-shadow: 0px 0px 3px #FC8C10;
 +
}
 +
 +
.heroname.medic {
 +
  background-image: url('/images/3/30/Icon_PNC_Hero_Class_white_Medic.png')
 +
}
 +
 +
.heroname.guard {
 +
  background-image: url('/images/8/80/Icon_PNC_Hero_Class_white_Guard.png')
 +
}
 +
 +
.heroname.warrior {
 +
  background-image: url('/images/f/f8/Icon_PNC_Hero_Class_white_Warrior.png')
 +
}
 +
 +
.heroname.specialist {
 +
  background-image: url('/images/8/8a/Icon_PNC_Hero_Class_white_Specialist.png')
 +
}
 +
 +
/* Fix gray fonts on dark background */
 +
.content .thumbcaption {
 +
color:white;
 +
}
  
−
.content table {
+
.heading-holder .tagline {
−
    float: none !important;
+
color:white;
−
    margin-left: auto!important;
 
−
    margin-right: auto!important;
 
−
    width:100%!important;
 
 
}
 
}

Latest revision as of 17:16, 4 February 2024

/* CSS placed here will be applied to all skins */

/*Mainpage no Title*/

/*Page Background*/

/*Disable section editing */
.mw-editsection { display:none!important; }


/* For the background images on T-Doll pages */
.bg-character {
    display: none;
}

.bg-rarity {
    display: none;
}

/* Things to be hidden on mobile */
.tooltip-content,
#serverTabSpan,
#banner-blank,
#banner-cn,
#banner-en,
#banner-tw,
#banner-kr,
#banner-jp,
.jcarousel-item.banners,
#mainmenu {
  display: none;
}

#content.mw-body {
  background-color: rgba(12,12,12,0.90);
  border: none;
  color: rgba(250,250,250,1);
  text-shadow: 0 0 0.2em black,0 0 0.2em black;
}

.edit-page {
  text-indent: 0;
}

.card-bg {
  background-image:url("//en.gfwiki.com/images/5/5a/Infobox_bg.png");
  width:256px;
  height:456px;
  padding:10px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

/* For compatibility. Move to card-bg class if possible. */
.profiletable .card-bg {
  height:auto;
  margin: 0;
  display: inline-block;
}

.card-bg .raritystars {
  position: absolute;
  top: 11px;
  right: 15px;
  z-index: 3;
}

.card-bg .raritystars.rarityEXTRA {
  top: inherit;
  bottom: 120px;
}

.card-bg .dollname {
  position: absolute;
  margin-left: 2px;
  z-index: 4;
  text-align: left;
  font-size: 250%;
  text-shadow: none;
  color: black;
  font-weight: bold;
  font-family: times new roman;
  bottom: 50px;
}

.card-bg .indexnumber {
  position: absolute;
  bottom: 3px;
  width: 66px;
  z-index: 4;
  font-size: 245%;
  text-shadow: none;
  color: white;
  font-family: courier new;
  letter-spacing: -6px;
  text-align: center;
  right: 8px;
  line-height: 1;
}

.card-bg .namefield {
  position: absolute;
  z-index: 3;
  bottom: 52px;
}

.card-bg .classificationsymbol {
  position: absolute;
  margin-left: 1px;
  margin-top: 1px;
  z-index: 3;
}

.card-bg .profilebackground {
  position: absolute;
  z-index: 2;
}

.card-bg .dollprofileimage {
  margin-top: 21px;
  min-width: 256px;
  margin-bottom: 94px;
}

/* Charactertabber */
.charactertabber {
  width: 100%;
  border-bottom: 2px solid #808080;
}

.charactertabber td {
  padding: 8px;
  background-color: #808080;
  font-weight: bold;
  opacity: 0.45;
  white-space: nowrap;
}

.charactertabber td:hover {
  opacity: 1;
}

.charactertabber td.active {
  background-color: #f0b000;
  font-weight: bold;
  color: white;
  opacity: 1;
}

.charactertabber td.filler {
  width: 100%;
  opacity: 0;
}

.obtainflagcontainer {
  float: left;
  color: black;
  text-shadow: none;
  display: inline-block;
  width: 150px;
}

.obtainflag {
  border: 1px solid transparent;
  border-radius:2px;
  margin-right:2px;
  padding-left: 2px;
  padding-right: 2px;
  clear: both;
}

.obtainflag.obtain-normal { background:green;  }
.obtainflag.obtain-heavy  { background:orange; }
.obtainflag.obtain-drop   { background:yellow; }
.obtainflag.obtain-reward { background:salmon; }
.obtainflag.obtain-hoc-fragments { background: #f9d988; }
.obtainflag.notpossible   { opacity: 0.25;     }

/* TileGrid */
.tilegridtable {
  background: rgba(62, 62, 62);
  padding: 10px;
}
.tilegridtable td {
  background: rgba(0, 0, 0, 0.5);
}
.tilegridtable td.standing {
  background: rgba(255, 255, 255, 1);
}
.tilegridtable td.buff {
  background: rgba(0, 255, 222, 1);
}

/* Equipment named card */
.equipmentnamedcard {
  width: 80px;
  text-align: center;
  display: inline-block;
  margin-right: 15px;
  vertical-align: top;
}

.equipmentnamedcard .equipmentcard {
  margin-left: 5px;
  margin-right: 5px;
}

.equipmentnamedcard .equipname {
  font-size: 0.9em;
}

.equipmentnamedcard .equipname small {
  display: none;
}

/* Equipment cards */
.equipmentcard {
  display: inline-block;
  background-color: #303030;
  border: 2px solid #d0d0d0;
  width: 64px;
  height: 60px;
  position: relative;
  overflow: hidden;
}

.equipmentcard .equipmentcardfiller {
  position: absolute;
  z-index: 5;
}

.equipmentcard img.typeicon {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
}

.equipmentcard .raritystars {
  position: absolute;
  margin-top: 1px;
  margin-left: auto;
  margin-right: 1px;
  height: 8px;
  z-index: 3;
  top: 0px;
  right: 0px;
}

.equipmentcard .equipimage {
  position: absolute;
  margin-top: 3px;
  top: 0;
  left: 0;
}

/* Stats Graph */
line.emphased {
  stroke-width: 3pt
}

line.radial {
  stroke: #333;
  stroke-width: 4pt;
}

svg {
  fill: none;
  stroke: #777;
  stroke-opacity: 1;
  stroke-width: 1pt;
}

text {
  fill: white;
  font-size: 2.5em;
  font-weight: normal;
  stroke: none;
  text-anchor: middle;
}


polygon {
  stroke-width: 3pt;
  fill-opacity: 0.5;
}
.graph-orange {
  stroke: #ff7733;
  fill: orange;
}
.graph-red {
  stroke: #bd0b0b;
  fill: red;
}
.graph-green {
  stroke: #007f00;
  fill: green;
}
.graph-blue {
  stroke: #00007f;
  fill: blue;
}

li.gallerybox div.thumb {
  background-color: #f9f9f91a;
}

pre {
  color: black;
  text-shadow: none;
}


/*For Template:DollBG on t-dproll pages*/
#bg-character {
    position: fixed;
    height: 1280px;
    min-height:500px;
    top:10%;
    left:0;
    z-index: -2;
}

#bg-rarity {
    position: fixed;
    top:15%;
    right:5%;
    z-index: -3;
    width:650px;
}



/* Tabs extension*/
.tabs-tabbox {margin:0;}

.tabs-tabbox > .tabs-container {
    border: none;
	padding: 0;
	margin-top: 0;
}


.tabs-tabbox > .tabs-input:checked + .tabs-label, .tabs-input-0:checked + .tabs-input-1 + .tabs-label {
    background-color: #F0b000;
    border-radius: 15px;
    color:#4E443C;
    border: none;
    text-shadow:none;
    z-index:5;
}


.tabs-tabbox > .tabs-label {
    background-color: #4E443C;
    border-radius: 15px;
    color:#F0b000;
    border: none;
    text-shadow:none;
    z-index:5;
    font-weight: bold;
}

/*gallery tabs*/
.tabs-gallery {	display:inline-block;}
.tabs-gallery > .tabs-container {margin-top: -24px;}
.tabs-gallery > .tabs-label {
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
	opacity:0.5;
}
.tabs-gallery > .tabs-label:hover {opacity:1;}


/*vertical*/
.verticaltabber {
	display:flex;
	flex-wrap:wrap;
}

.verticaltabber > .tabber {display:flex;}
.verticaltabber > .tabber > .tabbertab {display:flex;}
.verticaltabber > .tabber > .tabbertab > p {margin:0;}

.verticaltabber > .tabber ul.tabbernav {order:2;}
.verticaltabber > .tabber ul.tabbernav li {display:flex;}
.verticaltabber > .tabber ul.tabbernav li a {margin: 0 0 3px 0;width:100%;font-style:italic;}
.verticaltabber > .tabber ul.tabbernav li:first-child a {margin: 0 0 3px 0;width:100%;font-style:normal;}

.verticaltabber > .tabber .tabs {margin:auto;}


.paddedtabber-2px > .tabber {padding:2px;}



/*               tabs styled tabber                 */

/* tab body*/
.tabstabber > .tabber {padding:0;}
.tabstabber > .tabber .tabbertab {padding: 2px;background-color: transparent;}

.tabstabber > .tabber ul.tabbernav {margin: 10px 0 2px 0;}


.tabstabber > .tabber > .tabbertab > p {margin:0;}

/* inactive tab */
.tabstabber > .tabber ul.tabbernav li a:link {
    background-color: #4E443C;
    border-radius: 15px;
    color:#F0b000;
    border: none;
    text-shadow:none;
    font-weight: bold;    
	padding: 3px 6px;
	margin: 2px;
}
.tabstabber > .tabber ul.tabbernav li:first-child a:link {margin-left: 10px;}
/* active tab */
.tabstabber > .tabber ul.tabbernav li.tabberactive a, .tabstabber > .tabber ul.tabbernav li.tabberactive a:link {background-color: #F0b000;color:#4E443C;}


/*gradient divs*/
.gradientDivs {
	width:100%;	
}
.gradientDivs > div{
	background: -moz-radial-gradient(at left top,rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.25) 10%, transparent 70%); /* FF3.6-15 */
	background: -webkit-radial-gradient(at left top,rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.25) 10%, transparent 70%); /* Chrome10-25,Safari5.1-6 */
	background: radial-gradient(at left top,rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.25) 10%, transparent 70%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	padding: 1em;
	overflow: hidden;
	max-width: 800px;
	height:90px;
	position:relative;
}

.gradientDivs > h4 {
	background-color: rgba(255,255,255,0.25);
	display: table;
	padding: 3px 6px 3px 6px;
	margin-left: 0.25em;
}
.gradientDivs > h4 > .mw-editsection {display:none;}
.gradientDivs > div > div{background: linear-gradient(115deg,rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 60%, transparent 90%);width:80%;padding:0 5px 0 5px;}	
.gradientDivs > div > p {width:75%;text-align:right;position:absolute;bottom:1em;}


/*image*/

div.thumbinner {
    border: 0;
    background-color: rgba(255,255,255,0.25);
}

.card-bg {
	background-image:url("/images/5/5a/Infobox_bg.png");
	width:256px;
	height:456px;
	padding:10px;
}
.card-bg-small {
	background-image:url("/images/thumb/5/5a/Infobox_bg.png/138px-Infobox_bg.png");
	width:128px;
	height:228px;
	padding:5px;
	display:inline-block;
}

.card-bg-small.unreleased,
.unreleased {
  opacity: 0.25;
}

.card-bg-small .pad {
	position:absolute;
	z-index:5
}

.card-bg-small .name {
	position:absolute;
	margin-left:2px;
	margin-top:178px;
	z-index:4;
	text-align:left;
	font-size:125%;
	text-shadow:none;
	color: black;
	font-weight: bold;
	font-family: "Times New Roman", Times, serif;
	text-overflow: ellipsis;
    width: 126px;
    white-space: nowrap;
    overflow: hidden;
}

.card-bg-small .index {
	position:absolute;
	margin-top:206px;
	width:128px;
	z-index:4;
	font-size:110%;
	text-shadow:none;
	text-align:right;
	color: white;
	font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
	letter-spacing: -3px
}

.card-bg-small .rarity-stars {
	position:absolute;
	margin-top:178px;
	z-index:3
}

.card-bg-small .rarity-class {
	position:absolute;
	margin-left:1px;
	margin-top:1px;
	z-index:3
}

.card-bg-small .infobox-border {
	position:absolute;
	z-index:2
}

.card-bg-small .doll-image {
	margin-top:10px;
	height:167px;
	display: inline-block;
}

.icon-bg-2star-small {
	background-image:url("/images/thumb/7/72/BG_2star_S.png/60px-BG_2star_S.png");
	padding:5px;
}


	.variable-columns {
		-ms-column-width: 450px;
		-moz-column-width: 450px;
		-webkit-column-width: 450px;
		column-width: 450px;
	}

/* for color inversion */
.invertcolor{-webkit-filter:invert(1);filter:invert(1)}
.invertcolor-50{-webkit-filter:invert(1);filter:invert(0.5)}

/*For construction tables*/

.multi-column-table tbody {display:block;}
.multi-column-table tr {display:table;}
.multi-column-table td {display:table-cell;}
.multi-column-table tbody, .multi-column-table tr {min-width:100%;}
.multi-column-table table {width: 100%; max-width: 100%;}


.multi-column-table tbody {
    column-width:450px;
    -moz-column-width:450px;
    -webkit-column-width:450px;
}

.multi-column-200px tbody {
	-ms-column-width: 200px;
    -moz-column-width:200px;
    -webkit-column-width:200px;
    column-width:200px;
}

.multi-column-300px tbody {
	-ms-column-width: 300px;
    -moz-column-width:300px;
    -webkit-column-width:300px;
    column-width:300px;
}


@media only screen and (max-width: 820px) {
	div#mw-panel {display:none;}
	div#left-navigation{margin-left:0;}
	.mw-body {margin-left:0;}
}





/* floatright */
div.floatright, table.floatright {margin: 0;}
/* floatleft */
div.floatleft, table.floatleft {margin: 0;}





/* standard link colors */
.mw-body a, .mw-body a.extiw { color: #FFCC00; } /* normal unvisited links */
.mw-body a.external  { color: #FFCC00; } /* normal unvisited links */
.mw-body a:visited, .mw-body a.external:visited, .mw-body a.extiw:visited { color: #EEAA00; } /* visited links */
.mw-body a.new { color: #DD0000; } /* new links */

/* plain links*/

.plainlinks {
	padding:0;
	background:none;
}

/* Spoiler Text */
.spoiler {
    -moz-transition: all .1s ease-in;
    -o-transition: all .1s ease-in;
    -webkit-transition: all .1s ease-in;
    transition: all .1s ease-in;
    -webkit-filter: blur(3px); /* Safari 6.0 - 9.0 */
    filter: blur(3px);
}

.spoiler:hover {
    filter:	none;
}


.darken {filter:brightness(30%);}


/* Tables */
.gf-table th {
	color: #322300;
	font-size: 110%;
	background-color: #f0b000;
	text-align: center;
	padding: 5px;
	text-shadow:none;
}

.gf-table th a {color: #875e00}


.gf-table > tbody > tr > td {
	background-color: rgba(0, 0, 0, 0.6);
	padding: 5px;
}


.gf-table-lightcell > tbody > tr > td {
	background: rgba(0, 0, 0, 0.3);
}

.gf-table-layered > tbody > tr > td {
	background: rgba(0, 0, 0, 0.3);
	color:rgb(200,200,200);
}

.gf-table-layered > tbody > tr > th {
	color:white;
	background: rgba(0, 0, 0, 0.6);
}


.gf-table-darkcell > tbody > tr > td {
	background: rgba(0, 0, 0, 0.6);
}

/*equipment*/
.greenrow > td {color:green}
.redrow > td {color:red}





/* picture preview*/

.mw-mmv-image img.gif, .mw-mmv-image img.png, .mw-mmv-image img.svg, .mw-mmv-image img.tiff, .mw-mmv-image img.tif {
    background: none;
}

.mw-mmv-image img.gif:hover, .mw-mmv-image img.png:hover, .mw-mmv-image img.svg:hover, .mw-mmv-image img.tiff:hover, .mw-mmv-image img.tif:hover {
    background: url(/extensions/MultimediaViewer/resources/mmv/ui/checker.png?bdcf5) repeat;
}


.mw-mmv-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.8);
    opacity: 0.73;
}
body.mediawiki.mw-mmv-lightbox-open #mw-page-base,
body.mediawiki.mw-mmv-lightbox-open #mw-head-base,
body.mediawiki.mw-mmv-lightbox-open #mw-navigation,
body.mediawiki.mw-mmv-lightbox-open #content,
body.mediawiki.mw-mmv-lightbox-open #footer,
body.mediawiki.mw-mmv-lightbox-open #globalWrapper {
    display: inherit;
}
body.mediawiki.mw-mmv-lightbox-open > *  {
    display: inherit;
}
body.mediawiki.mw-mmv-lightbox-open > script,
body.mediawiki.mw-mmv-lightbox-open > style {
    display: none;
}
body.mediawiki.mw-mmv-lightbox-open {
    overflow: hidden;
}
body .mw-mmv-wrapper {
    position: fixed;
}
/* mutilmediaViewer 信息栏修复 */
.mw-mmv-image-metadata-column.mw-mmv-image-metadata-desc-column {
    width: 30%;
}
.mw-mmv-image-metadata-column.mw-mmv-image-metadata-links-column {
    width: 70%;
    max-width: 70%;
}
ul.mw-mmv-image-links li {
    float: left;
    padding: .3em 1em;
}
div.mw-mmv-image-desc-div,
div.mw-mmv-image-links-div{
    display:block
}
div.metadata-panel-is-closed .mw-mmv-image-links li.mw-mmv-license-li {
    height:inherit;
    line-height:inherit;
}

/* fading effects*/

.hover-button { 
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
	opacity:0.75;
}

.hover-button:hover { 
	opacity:1;
}

.hover-button50 { 
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
	opacity:0.5;
}

.hover-button50:hover { 
	opacity:1;
}



/*                     main page                    */


/*MAIN PAGE CONTENTS*/

@keyframes glowing {
 0% {
  box-shadow: 0px 0px 10px #000;
  border-color:grey;
  }
 45% {
  box-shadow:0 0 10px #c40400;
  border-color:red;
  }
 55% {
  box-shadow:0 0 10px #c40400;
  border-color:red;
  }
 100% {
  box-shadow: 0px 0px 10px #000;
  border-color:grey;
 }
}
.button-glow {
 animation:glowing 3000ms infinite
}

.GamesThumbContainer{
	display:inline-block;
	width:230px;
	height:125px;
	padding:2px;
}

.GameThumb{
	display:flex; 
	position:absolute; 
	justify-content:center; 
	width:230px; 
	height:125px; 
	flex-direction:column; 
	text-align:center; 
	background-color: rgba(0,0,0,0.5);
	font-size:1.5em; 
	text-shadow: 0px 0px 5px #000000;
}

.GameThumb a{
	margin:2px;
}

.rightcol, .leftcol {
    max-width: 800px;
	width:100%;
	margin-left:auto;
	margin-right:auto;
}
.leftcol {
    float: left;
    position: relative;
    margin-bottom:5px;
}

.rightcol{
	float:left;
	height:auto;
}

#timerwidgets{float:left}

#flexible-panel{width:100%;display:none}

.mainpage{
	margin-left:auto;
	margin-right:auto;	/*Mediawiki max space for 1080p is some 1600px*/
    padding:0;
}

/* small screen less than 800px content width*/
@media only screen and (max-width: 1040px) {
	.mainpage{
		width:100%;
	}
	#timerwidgets{width:240px;float:left;}
	#twitterbox{width:auto;margin-left:245px;}
	#twitter-widget-0{height:267px!important;}
	.updates{max-height:136.833px;}
	.promotions{max-height:120.133px;}
}
/* over 800px, not resize for page necessary*/
@media only screen and (min-width: 1040px) {
	.mainpage{width:800px;}
	#timerwidgets{width:345px;float:left;}
	#twitterbox{width:450px;float:left;margin-left:5px;}
	#twitter-widget-0{height:373px!important;}
	#aboutgame,#aboutwiki{width:800px;}
	.updates{max-height:198.25px;}
	.promotions{max-height:164px;}
}


@media only screen and (min-width: 1360px) {
	.mainpage{width:1068px;}
	.rightcol{width:240px;margin-left:2em;}
	#timerwidgets{width:240px;}
	#twitterbox{width:240px;margin-left:0;min-height: 479px;max-height: 479px;margin-bottom:5px;}
	#twitter-widget-0{height:479px!important;}
	.updates{max-height:136.833px;}
	.promotions{max-height:120.133px;}
	
}

@media only screen and (min-width: 1480px) {
	.mainpage{width:1188px;}
	.rightcol{width:360px;margin-left:2em;}
	#timerwidgets{width:360px;}
	#twitterbox{width:360px;margin-left:0px;min-height: 361px;max-height: 361px;}
	#twitter-widget-0{height: 361px !important;}
	.updates{max-height:217.017px;}
	.promotions{max-height:170.267px;}
}


@media only screen and (min-width: 1600px) {
	.mainpage{width:1308px;}
	.rightcol{width:480px;}
	#timerwidgets{width:235px;}
	#twitterbox{width:240px;margin-left:5px;min-height: 269px;max-height: 269px;}
	#twitter-widget-0{height:269px!important;}
	#aboutgame,#aboutwiki{width:480px;margin-left:2em;}
	.updates{max-height:133.917px;}
	.promotions{max-height:118.05px;}
}

@media only screen and (min-width: 1720px) {
	.mainpage{width:1428px;}
	.rightcol{width:600px;}
	#timerwidgets{width:295px;}
	#twitterbox{width:300px;min-height: 329px;max-height: 329px;}
	#twitter-widget-0{height:329px!important;}
	#aboutgame,#aboutwiki{width:600px;}
	.updates{max-height:169px;}
	.promotions{max-height:143.117px;}
}

.homepage-panel{
	background-color: rgba(150,150,150,0.8);
	border: rgb(150,150,150);
	border-width: 3px;
	border-style: solid;
	box-shadow: 0px 0px 10px #000;
}

#twitterbox{
	background-image:url(/images/c/c6/BG_twitter.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position:center;
	border-radius: 4px;
	background-color:#fff;
	position:relative;
	z-index:3;
}

#aboutgame,#aboutwiki,#newestadditions{
	padding:0.5em;
	background-color: #3f3f3f;
	border: rgb(150,150,150);
	border-width: 3px;
	border-style: solid;
	box-shadow: 0px 0px 10px #000;
	background-image:url("/images/1/10/Aboutgame.png");
	background-repeat: no-repeat;	
	background-position: -1.5em -0.2em,left top;
	overflow:hidden;
	display:inline-block;
	box-sizing:border-box;
}

#newestadditions {
	width:100%;
	overflow:auto;
	white-space:nowrap;
}

#newestadditions h4{
  margin: 0;
  padding: 0;
  border-bottom: thin solid gray;
}

#mainmenu{
	background-image:url("/images/8/86/BG_homescreen.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	margin-top:5px;
	max-width:800px;
	height:300px;
	position:relative;
	border: rgb(150,150,150);
	border-width: 3px;
	border-style: solid;
	box-shadow: 0px 0px 10px #000
}

#directory{
	background-image:url("/images/e/e8/BG_main_directory.png");
	background-color: #3f3f3f;
	border: rgb(150,150,150);
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: auto 100%;
	margin-top:5px;
	max-width:800px;
	position:relative;
	border-width: 3px;
	border-style: solid;
	box-shadow: 0px 0px 10px #000;
	padding:0.5em;
}


.banners{
	max-width:800px;
	max-height:198px;
	width:auto;
	height:auto; 
	border: rgb(150,150,150);
	border-width: 0.25em;
	border-style: solid;
	box-shadow: 0 0 10px #000;
	visibility:hidden;
	position:absolute;
}

.updates{
	background-image: url("/images/thumb/6/6f/BG_factory.png/395px-BG_factory.png");
	background-repeat: no-repeat;
	background-size: cover;
	width:360px;
	width:auto;
	border: rgb(150,150,150);
	border-width: 3px;
	border-style: solid;
	box-shadow: 0px 0px 10px #000;
	margin-bottom:5px;
	visibility:hidden;
	position:absolute;
}

#banner-blank {
	visibility:visible;
	position:inherit;
}

#update-blank {
	visibility:visible;
	position:inherit;
}

.promotions {
	max-width:360px;
	height:auto;
	width:auto;
	overflow:hidden;
	background-color:#232323;
	border: rgb(150,150,150);
	border-width: 0.25em;
	border-style: solid;
	box-shadow: 0 0 10px #000;
	margin-bottom:5px;
	visibility:hidden;
	position:absolute;
}

#promotion-blank {
	visibility:visible;
	position:inherit;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    z-index:3;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    text-decoration: none;
    display: block;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}

.dropdown-content a:hover {opacity:0;}

.dropdown:hover .dropdown-content {
    bottom: 100%;
    display: block;
    left:1em;
}

.serverTabSpan {
    position: absolute;
    margin: -5px 0 0 5px;
}

.serverTabLinks:hover {
    opacity: 0.8;
}
.serverTabLinks {
    border: none;
    border-radius: 1px;
    border: none;
    text-shadow: none;
    z-index: 5;
    padding: 3px 6px;
    margin: 2px 2px;
    font-weight: bold;
    font-size: 40%;
    transition: all .2s ease-in;
    opacity: 0.5;
}

.serverTabLinks-active {
    opacity: 0.9!important;
}



.tabButtonLane {
	display: flex;
  padding-top:1px
}
.tabButtonLane > button {
background-color: rgba(100,100,100,0.3);
color: white;
font-weight: bold;
display: inline-block;
padding: 4px 10px;
margin-left: 3px;
border: none;
text-shadow: 0 0 0.2em black,0 0 0.2em black;
font-size: 1em;
cursor: pointer;
}

.tabButtonLane > button:hover {
	    background-color: rgba(100,100,100,0.45);
}

.tabButtonLane > .tabButton-active {
	    background-color: rgba(100,100,100,0.7)!important;
}

.enemyname {
  color: #FF0012;
  text-shadow: 0px 0px 3px #EC5151;
  display: inline-block;
}

.enemyname.boss {
  /* background-image: url('/images/1/1e/Boss_Icon_Small.png');*/ 
  background-image: url('/images/f/fc/Boss_Skull_Icon.png');
  background-size: 12px;
  background-repeat: no-repeat;
  padding-left: 14px;
  background-position-y: 3px;
  background-position-x: 0;
}

/* PNC specifics =========================== */

/* Character index */
.pnc-index-entry {
	position: relative;
	display: inline-block;
	height: 250px;
	width: 128px;
	overflow: hidden;
	margin-right: 20px;
	border-radius: 5px;
}
.pnc-index-entry .file {
	position: absolute;
	top: 0;
	left: 0;
}
.pnc-index-entry .card {
	position: absolute;
	top: 14px;
	left: 2px;
	width: 124px;
}
.pnc-index-entry .back {
	position: absolute;
	top: 20px;
	left: 0px;
}
.pnc-index-entry .hero {
	position: absolute;
	top: 0px;
	left: 1px;
	width: 126px;
}
.pnc-index-entry .front {
	position: absolute;
	bottom: 0px;
}
.pnc-index-entry .company {
	position: absolute;
	top: 12px;
	left: 40px;
	width: 120px;
	opacity: 20%;
}
.pnc-index-entry .rarity {
	position: absolute;
	bottom: 32px;
	left: 4px;
	height: 16px;
}
.pnc-index-entry .name {
	position: absolute;
	bottom: 10px;
	left: 8px;
	width: 120px;
	color: lightgray;
	font-size: 20px;
}
.pnc-index-entry .heroclass {
	position: absolute;
	top: 15px;
	left: 4px;
	width: 16px;
}

/* Template:hero name */
.heroname {
  background-size: 9px;
  background-repeat: no-repeat;
  padding-left: 10px;
  /*white-space:wrap;*/
}

.heroname.star1 {
	color:#2999F3;
	text-shadow: 0px 0px 3px #2999F3; 
}

.heroname.star2 {
	color:#B470E1;
	text-shadow: 0px 0px 3px #B470E1; 
}

.heroname.star3 {
	color:#FC8C10;
	text-shadow: 0px 0px 3px #FC8C10; 
}

.heroname.medic {
  background-image: url('/images/3/30/Icon_PNC_Hero_Class_white_Medic.png')
}

.heroname.guard {
  background-image: url('/images/8/80/Icon_PNC_Hero_Class_white_Guard.png')
}

.heroname.warrior {
  background-image: url('/images/f/f8/Icon_PNC_Hero_Class_white_Warrior.png')
}

.heroname.specialist {
  background-image: url('/images/8/8a/Icon_PNC_Hero_Class_white_Specialist.png')
}

/* Fix gray fonts on dark background */
.content .thumbcaption {
	color:white;
}

.heading-holder .tagline {
	color:white;
}
Retrieved from "http://iopwiki.com/index.php?title=MediaWiki:Mobile.css&oldid=134701"