Welcome to IOPWiki, Commander.
With the release of the new game, we encourage contributions to topics related to Girls' Frontline 2. Learn how to contribute, read the maintenance guide, and join our Discord server to discuss major changes.
If you or someone you know can help deciphering the game files, contact our administrator.

MediaWiki:Common.css

Welcome to IOP Wiki. This website is maintained by the Girls' Frontline community and is free to edit by anyone.
Revision as of 04:40, 25 January 2018 by Pianoforte (talk | contribs)
Jump to navigation Jump to search

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/* 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;
}


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


.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
}



.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{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{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{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{
	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;
}


#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;
}


.gf-droplist {
	background-color:rgba(250,250,250,0.9);
	text-align:center;
	border: none;
	color: rgb(63,63,63);
}


/* For droplists on T-Doll pages */
.skill {
	background-color: #f0b000;
	width:60px;
	height:21px;
	text-align:center;
	border:none;
	color:rgb(63,63,63);
}

@-moz-document url-prefix() {
	.skill, .gf-droplist{
		-moz-appearance: none;
		text-indent: -5px;	
		text-overflow: "";
		background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%);	
		background-position: calc(100% - 10px) calc(0.5em + 2px), calc(100% - 5px) calc(0.5em + 2px), calc(100% - 2.5em) 0.5em;
		background-size: 5px 5px, 5px 5px, 1px 1.5em;
		background-repeat: no-repeat;
	}
}

#description {
	overflow-y:auto;	
}
Retrieved from "http://iopwiki.com/index.php?title=MediaWiki:Common.css&oldid=33233"