With the release of the Global Beta, we encourage contributions to topics related to Girls' Frontline 2. Learn how to contribute and join our Discord server to discuss major changes.
MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
Fixed a styling problem in FlowThread management |
m Some small corrections for Wiki editor |
||
| Line 38: | Line 38: | ||
color: var(--iopw-sys-palette-gray-99); | color: var(--iopw-sys-palette-gray-99); | ||
background-color: #8a8a8a2b; | background-color: #8a8a8a2b; | ||
} | |||
.mediawiki .wikiEditor-ui-toolbar .page-characters div span { | |||
height: auto; | |||
font-size: 1.25rem; | |||
} | |||
.mediawiki #msupload-dropzone { | |||
height: auto; | |||
} | } | ||
Revision as of 00:33, 29 June 2024
/* CSS placed here will be applied to all skins */
/* Replicate into MediaWiki:Mobile.css as necessary */
/*Mainpage no Title*/
/* Small update for the MediaWiki Version 1.32.2 and Vector 22:07, 14 October 2018 */
#pagehistory li.selected {
color: var(--iopw-sys-palette-gray-70);
}
#pagehistory .selected {
color: #e7c554;
background-color: rgba(108, 108, 108, 0.75);
}
#pt-notifications-notice .mw-echo-notifications-badge::before,
#pt-notifications-alert .mw-echo-notifications-badge::before {
background-color: var(--iopw-sys-palette-gray-99);
}
.mediawiki textarea,
.mediawiki input[type='search'],
.mediawiki input[type='number'],
.mediawiki input[type='text'] {
color: var(--iopw-sys-palette-on-input);
background-color: (--iopw-sys-palette-input);
&::selection {
color: var(--iopw-sys-palette-on-primary);
background-color: var(--iopw-sys-palette-primary);
}
}
/*Disable section editing */
.mw-editsection { display:none!important; }
.mw-editform .editOptions {
color: var(--iopw-sys-palette-gray-99);
background-color: #8a8a8a2b;
}
.mediawiki .wikiEditor-ui-toolbar .page-characters div span {
height: auto;
font-size: 1.25rem;
}
.mediawiki #msupload-dropzone {
height: auto;
}
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-etnabled .oo-ui-tagMultiselectWidget-handle {
border: 1px solid #a2a9b138;
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagMultiselectWidget-handle {
background-color: color-mix(in srgb, var(--iopw-sys-palette-gray-50) var(--iopw-sys-transparency-75), transparent);
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagItemWidget.oo-ui-widget-enabled {
background-color: #78787899;
}
.oo-ui-tagItemWidget.oo-ui-widget-enabled {
color: var(--iopw-sys-palette-gray-90);
}
.oo-ui-tagItemWidget.oo-ui-widget-enabled:hover {
color: var(--iopw-sys-palette-gray-80);
}
.oo-ui-tagItemWidget {
border: var(--iopw-sys-border-width) var(--iopw-sys-border-style) var(--iopw-sys-palette-gray-50);
}
.oo-ui-buttonElement-framed > .oo-ui-buttonElement-button {
border-style: none;
border-radius: 15px;
text-shadow: none;
}
.mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-title {
color: var(--iopw-sys-palette-gray-90);
}
.mw-rcfilters-ui-filterTagMultiselectWidget-views-select {
background-color: color-mix(in srgb, var(--iopw-sys-palette-gray-90) var(--iopw-sys-transparency-75), transparent);
}
.rcfilters-container .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
background-color: var(--iopw-sys-palette-primary-darker);
color: var(--iopw-sys-palette-on-primary);
border: none;
text-shadow: none;
}
.tabstabber > .tabber ul.tabbernav li a:link {
background-color: var(--iopw-sys-palette-surface-dim);
color: var(--iopw-sys-palette-primary);
}
.tocnumber {
color: var(--iopw-sys-palette-gray-99);
}
.toctogglelabel {
color: var(--iopw-sys-palette-primary-darker);
}
.references-section h2:last-child {
display: none;
}
.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
background-color: #83838347;
border: 1px solid #d1cec842;
}
/* For the background images on T-Doll pages */
.bg-character {
display: none;
}
.bg-rarity {
display: none;
}
/** Flowthread Styling **/
#flowthread {
clear: both;
margin-top: var(--iopw-sys-size-8);
color: var(--iopw-comp-comment-font-color);
border-top: thick solid gray;
padding-top: 10px;
}
#flowthread,
.comment-container {
& .comment-body textarea,
& .comment-preview {
margin: 0;
padding: var(--iopw-sys-size-2);
resize: none;
width: 100%;
display: block;
font-family: var(--iopw-comp-comment-font);
font-size: var(--iopw-comp-comment-post-font-size);
line-height: var(--iopw-sys-size-5);
border-width: var(--iopw-sys-border-width) var(--iopw-sys-border-width) medium;
border-style: var(--iopw-sys-border-style) var(--iopw-sys-border-style) none;
border-color: var(--iopw-sys-palette-gray-70) var(--iopw-sys-palette-gray-70) var(--iopw-sys-palette-gray-50);
border-radius: var(--iopw-comp-comment-border-radius);
}
& .comment-body textarea {
background: var(--iopw-sys-palette-input);
color: var(--iopw-sys-palette-on-input);
height: calc(var(--iopw-sys-size-12) + var(--iopw-sys-size-3));
}
& .comment-preview {
min-height: var(--iopw-sys-size-16);
padding: var(--iopw-sys-size-4);
background: color-mix(in srgb, var(--iopw-sys-palette-gray-60) var(--iopw-sys-transparency-75), transparent);
}
& .comment-toolbar {
position: relative;
height: auto;
color: var(--iopw-sys-palette-gray-30);
padding: var(--iopw-sys-size-2);
font-size: var(--iopw-comp-comment-control-font-size);
line-height: initial;
border: var(--iopw-sys-border-width) var(--iopw-sys-border-style) var(--iopw-sys-palette-gray-40);
border-radius: 0px 0px var(--iopw-comp-comment-border-radius) var(--iopw-comp-comment-border-radius);
background: color-mix(in srgb, var(--iopw-sys-palette-gray-40) var(--iopw-sys-transparency-50), transparent);
}
& .comment-submit {
font-family: var(--iopw-comp-comment-font);
position: absolute;
height: var(--iopw-sys-size-7);
text-shadow: none;
color: var(--iopw-sys-palette-gray-30);
font-size: var(--iopw-comp-comment-control-font-size);
font-weight: var(--iopw-sys-font-weight-bold);
border: var(--iopw-sys-border-width) var(--iopw-sys-border-style) var(--iopw-sys-palette-gray-99);
transition: all 0.3s ease-out;
box-shadow: 0px 0px 0px var(--iopw-sys-palette-gray-99) inset, 0px 0px 0px var(--iopw-sys-palette-gray-99);
cursor: pointer;
margin: 0;
padding: 0 var(--iopw-sys-size-3);
border-radius: 0;
outline: 0;
background: linear-gradient(0deg, transparent 10%, var(--iopw-sys-palette-primary) 30%, var(--iopw-sys-palette-primary-lighter) 100%),
repeating-linear-gradient(135deg, var(--iopw-sys-palette-primary) 0px, var(--iopw-sys-palette-primary) 0.15rem, var(--iopw-sys-palette-primary-lighter) 0.15rem, var(--iopw-sys-palette-primary-lighter) 0.3rem, var(--iopw-sys-palette-primary-lighter) 0.3rem);
clip-path: polygon(0% 0%, 100% 0, 100% calc(100% - 0.5rem), calc(100% - 0.5rem) 100%, 0 100%);
top: 0;
bottom: 0;
margin-top: auto;
margin-bottom: auto;
right: var(--iopw-sys-size-1);
width: auto;
align-items: center;
display: flex;
justify-content: center;
&::after {
background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 55%, rgba(255,255,255,0.3) 70%, rgba(255,255,255,0.2) 90%, rgba(255,255,255,0.8) 100%);
content: "";
width: 100%;
height: 100%;
display: block;
position: absolute;
}
}
& .comment-submit:hover {
box-shadow: 0px 0px 0px var(--iopw-sys-palette-gray-99) inset, 0 5px 11px 0 rgba(0, 0, 0, 0.18)
}
& .comment-submit:active {
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15) inset, 0px 0px 0px var(--iopw-sys-palette-gray-99)
}
& .flowthread-btn {
position: static;
float: none;
width: var(--iopw-sys-size-6);
height: var(--iopw-sys-size-6);
margin: 0;
padding: 0;
border-radius: var(--iopw-comp-border-radius);
outline: 0;
border: var(--iopw-sys-border-width) var(--iopw-sys-border-style) var(--iopw-sys-palette-gray-60);
background-color: var(--iopw-sys-palette-gray-50);
background-repeat: no-repeat;
background-position: center;
transition: all 0.3s ease-out;
cursor: pointer;
}
& .flowthread-btn::-moz-focus-inner,
& .comment-submit::-moz-focus-inner {
border: 0
}
& .flowthread-btn:hover {
border: var(--iopw-sys-border-width) var(--iopw-sys-border-style) var(--iopw-sys-palette-gray-80);
box-shadow: 0px 0px 0px var(--iopw-sys-palette-gray-99) inset, 0 5px 11px 0 rgba(0, 0, 0, 0.18);
background-color: var(--iopw-sys-palette-primary-lighter);
}
& .flowthread-btn:active,
& .flowthread-btn.on {
border: var(--iopw-sys-border-width) var(--iopw-sys-border-style) var(--iopw-sys-palette-gray-80);
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15) inset, 0px 0px 0px var(--iopw-sys-palette-gray-99);
background-color: var(--iopw-sys-palette-primary-darker);
}
& .flowthread-btn.on:hover {
border: var(--iopw-sys-border-width) var(--iopw-sys-border-style) var(--iopw-sys-palette-gray-80);
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15) inset, 0 5px 11px 0 rgba(0, 0, 0, 0.18)
}
& .flowthread-btn.on:active {
border: var(--iopw-sys-border-width) var(--iopw-sys-border-style) var(--iopw-sys-palette-gray-80);
box-shadow: 0px 0px 0px white inset, 0 0 0 0 white
}
& .flowthread-btn-preview {
width: 0;
margin: 0;
opacity: 0;
background-image: url(/extensions/FlowThread/assets/preview.svg?a181a)
}
& .flowthread-btn-wikitext {
background-image: url(/extensions/FlowThread/assets/wikitext.svg?e4407)
}
& .flowthread-btn-wikitext.on+.flowthread-btn-preview {
width: var(--iopw-sys-size-6);
margin: 0 0 0 var(--iopw-sys-size-1);
opacity: 1
}
& .comment-reply::before,
& .comment-like::before,
& .comment-report::before,
& .comment-delete::before,
& .comment-recover::before {
content: "";
background: transparent url(/extensions/FlowThread/assets/sprites.png?e1980) no-repeat scroll 0% 0%;
opacity: 0.6;
display: inline-block;
width: 0.9375;
height: 0.625rem;
transition: opacity 0.15s linear 0s;
font-size: 0.5625rem;
vertical-align: middle
}
& .comment-reply,
& .comment-like,
& .comment-report,
& .comment-delete {
margin-left: 0.3125rem;
cursor: pointer;
transition: color 0.15s linear 0s
}
& .comment-reply:hover,
& .comment-like:hover,
& .comment-report:hover,
& .comment-delete:hover {
opacity: 1.0;
color: var(--iopw-sys-palette-gray-30)
}
& .comment-reply:hover::before,
& .comment-like:hover::before,
& .comment-report:hover::before,
& .comment-delete:hover::before {
opacity: 1.0
}
& .comment-reply::before {
background-position: 0px 0px
}
& .comment-like::before {
background-position: 0px -14px
}
& .comment-like[liked]::before {
background-position: 0px -27px
}
& .comment-report::before {
background-position: 0px -50px
}
& .comment-report[reported]::before {
background-position: 0px -62px
}
& .comment-delete::before {
background-position: 0px -40px
}
& .comment-avatar img {
width: var(--iopw-sys-size-12);
height: auto;
}
& .comment-thread>div:not(:first-child) .comment-avatar img {
width: var(--iopw-sys-size-7);
height: auto;
}
& .comment-thread>div:not(:first-child) .comment-body {
padding-left: calc(var(--iopw-sys-size-8) + var(--iopw-sys-size-2));
}
& .comment-thread .comment-replybox {
margin-left: calc(var(--iopw-sys-size-12) + var(--iopw-sys-size-3));
}
& .comment-avatar {
float: left;
cursor: pointer
}
& .comment-container {
margin-top: var(--iopw-sys-size-4)
}
& .comment-text {
font-size: var(--iopw-comp-comment-post-font-size);
line-height: var(--iopw-sys-size-6);
margin: var(--iopw-sys-size-2) 0;
word-wrap: break-word;
max-width: calc(var(--iopw-sys-size-2) * 70);
/* Added to guard against malacious position:absolute */
position: relative;
overflow: hidden;
min-height: var(--iopw-sys-size-4);
}
& .comment-markchecked {
margin-left: 0.3125rem
}
& .comment-markchecked,
& .comment-recover {
margin-left: 0.3125rem;
cursor: pointer;
transition: color 0.15s linear 0s
}
& .comment-recover::before {
background-position: 0px 0px
}
& .comment-recover:hover::before {
opacity: 1.0
}
& .comment-recover:hover,
& .comment-markchecked:hover {
opacity: 1.0;
color: var(--iopw-sys-palette-gray-50)
}
& .comment-selected {
padding-left: var(--iopw-sys-size-4);
background: var(--iopw-sys-palette-gray-80);
}
& .comment-replybox .comments-guideline {
border-top: 2px solid gray;
padding: 15px;
font-size: var(--iopw-comp-comment-control-font-size);
}
& .comment-thread {
border-top: var(--iopw-sys-border-width) var(--iopw-sys-border-style) var(--iopw-sys-palette-gray-30);
}
& .comment-post {
padding: calc(var(--iopw-sys-size-2) + var(--iopw-sys-size-0-5));
}
& .comment-body {
padding-left: calc(var(--iopw-sys-size-12) + var(--iopw-sys-size-3));
}
& .comment-user {
color: var(--iopw-sys-palette-gray-60);
font-size: var(--iopw-comp-comment-control-font-size);
margin-right: var(--iopw-sys-size-2);
&>a {
color: var(--iopw-sys-palette-primary);
font-size: inherit;
}
}
& .comment-footer {
font-size: var(--iopw-comp-comment-control-font-size);
margin-right: var(--iopw-sys-size-2);
color: var(--iopw-sys-palette-gray-60);
}
& .comment-footer span:not(.comment-time) {
color: var(--iopw-sys-palette-primary);
&:hover {
color: var(--iopw-sys-palette-primary-lighter);
}
}
& .comment-post .comment-report, .comment-post .comment-delete {
display: none;
}
& .comment-post:hover .comment-report, .comment-report[reported], .comment-post:hover .comment-delete {
display: initial;
}
& .comment-thread .comment-thread {
margin-left: calc(var(--iopw-sys-size-8) + var(--iopw-sys-size-2));
}
& .comment-paginator {
border-top: var(--iopw-sys-border-width) var(--iopw-sys-border-style) rgba(0,0,0,0.13);
text-align: right;
padding: var(--iopw-sys-size-2);
}
& .comment-paginator span {
color: var(--iopw-sys-palette-primary);
border-radius: var(--iopw-comp-comment-border-radius);
font-size: var(--iopw-comp-comment-control-font-size);
margin: 0 0.1875rem;
padding: 0.125rem 0.3125rem;
border: var(--iopw-sys-border-width) var(--iopw-sys-border-style) transparent;
cursor: pointer;
}
& .comment-paginator span:hover {
color: var(--iopw-sys-palette-primary-lighter);
background-color: var(--iopw-sys-palette-on-primary);
}
& .comment-paginator span[current] {
border: var(--iopw-comp-comment-border);
color: var(--iopw-sys-palette-on-primary);
background-color: var(--iopw-sys-palette-primary);
text-shadow: none;
}
& .comment-bannotice {
border-top: var(--iopw-sys-border-width) var(--iopw-sys-border-style) rgba(0,0,0,0.13);
font-size: var(--iopw-comp-comment-post-font-size);
text-align: center;
padding: var(--iopw-sys-size-4);
color: var(--iopw-sys-palette-gray-50);
}
& .comment-container-top {
border: var(--iopw-comp-comment-border);
border-radius: var(--iopw-comp-comment-border-radius);
}
& .comment-container-top[disabled] {
display: none;
}
/* The title bar */
& .comment-container-top > div:first-child {
background: color-mix(in srgb, var(--iopw-sys-palette-gray-99) var(--iopw-sys-transparency-50), transparent);
line-height: var(--iopw-sys-size-6);
color: var(--iopw-sys-palette-gray-99);
text-indent: 0;
font-size: var(--iopw-sys-size-4);
height: auto;
text-align: center;
border-radius: var(--iopw-comp-comment-border-radius) var(--iopw-comp-comment-border-radius) 0 0;
}
& .comment-container-top > div:last-child {
border-radius: 0 0 var(--iopw-comp-comment-border-radius) var(--iopw-comp-comment-border-radius);
}
& .comment-container-top:not([disabled]) + .comment-container > div:first-child {
border-top: 0;
}
}
#flowthread a.pager-disable,
a.pager-disable {
color: var(--iopw-sys-palette-font-negative);
cursor: text;
text-decoration: none
}
/* Category */
#catlinks {
border: thin solid gray;
padding: 5px;
}
/* Reference to the main article of an information */
div.hatnote {
padding-left: 1.6em;
margin-bottom: 0.5em;
font-style: italic;
}
/*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;}
/* 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: var(--iopw-sys-transparency-50);
}
.graph-orange {
stroke: #ff7733;
fill: orange;
}
.graph-red {
stroke: #bd0b0b;
fill: red;
}
.graph-green {
stroke: #007f00;
fill: green;
}
.graph-blue {
stroke: #00007f;
fill: blue;
}
/* Charactertabber */
.charactertabber {
width: 100%;
border-bottom: var(--iopw-ref-border-width-thick) var(--iopw-ref-border-style) var(--iopw-sys-palette-gray-50);
}
.charactertabber td {
padding: 0.5rem;
background-color: var(--iopw-sys-palette-gray-50);
font-weight: bold;
opacity: 0.45;
white-space: nowrap;
}
.charactertabber td:hover {
opacity: 1;
}
.charactertabber td.active {
background-color: var(--iopw-sys-palette-primary);
font-weight: var(--iopw-sys-font-weight-bold);
color: var(--iopw-sys-palette-on-surface);
opacity: 1;
}
.charactertabber td.filler {
width: 100%;
opacity: 0;
}
/* HOC Matrix styling */
.hoc-matrix {
display: inline-block;
}
.hoc-matrix .hoc-matrix-row {
display: block;
line-height: 0.1;
white-space: nowrap;
}
.hoc-matrix .hoc-matrix-element {
display: inline-block;
height: 15px;
width: 15px;
border: thin solid #4a4a4a;
}
.hoc-matrix .hoc-matrix-element.hoc-matrix-element-type-0 {
background-color: var(--iopw-sys-palette-gray-50);
}
.hoc-matrix.chipcolor-blue .hoc-matrix-element.hoc-matrix-element-type-1 {
background-color: var(--gfl-sys-palette-hoc-chip-blue);
}
.hoc-matrix.chipcolor-blue .hoc-matrix-element.hoc-matrix-element-type-2 {
background-color: var(--gfl-sys-palette-hoc-chip-blue-alt);
}
.hoc-matrix.chipcolor-orange .hoc-matrix-element.hoc-matrix-element-type-1 {
background-color: var(--gfl-sys-palette-hoc-chip-orange);
}
.hoc-matrix.chipcolor-orange .hoc-matrix-element.hoc-matrix-element-type-2 {
background-color: var(--gfl-sys-palette-hoc-chip-orange-alt);
}
/* Stattable (The one with digimind upgrade tabs) */
.upgradeablestattable {
max-width: 1040px;
min-width: 510px;
display: flex;
flex-direction: column;
}
.upgradeablestattable .header {
color: var(--iopw-sys-palette-on-primary);
font-size: 110%;
background-color: var(--iopw-sys-palette-primary);
text-align: center;
padding: 5px;
text-shadow: none;
font-weight: bold;
display: flex;
flex-direction: column;
}
.upgradeablestattable .stattabcontainer {
display: flex;
flex-flow: wrap;
}
.upgradeablestattable .stattabcontainer .tabbertab {
display: flex;
flex-flow: wrap;
background-color: rgba(100, 100, 100, 0.3);
}
.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.obtain-assimilation { background-color: #8abfee; }
.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);
}
.gamebanner {
display: inline-block;
margin-right: 20px;
}
/* Fairies */
.fairy-sidebar-profile {
position: absolute;
margin-top: -25px;
margin-left: -56px;
}
/* HOC named card */
.profile-card { position: relative; display:inline-block; height:190px; width:128px;}
.profile-card .profileimage { position: absolute; top: 21px; left: 5px; width:118px }
.profile-card .profilebackground { transform:scaleX(-1); position: absolute; top: 0; left: 0; }
.profile-card .namefield { position: absolute; top: 139px; right: 5px; overflow:hidden; width:119px}
.profile-card .classificationsymbol { position: absolute; top: 5px; right: 5px;}
.profile-card .cardtitle { position: absolute; text-decoration: none; color: black; top: 138px; left: 8px; font-size: 125%; text-shadow: none; color: black; font-weight: bold; font-family: "Times New Roman",Times,serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.profile-card .range { background-image: url('/images/b/b1/HOC_Range.png'); background-size: 13px 13px; background-repeat: no-repeat; padding-left: 14px; padding-right: 2px; position: absolute; top: 6px; left: 6px; font-size: 12px; font-weight: bold; color: orange; background-color: black; line-height: 14px; }
.profile-card .indexnumber { position: absolute; bottom: 5px; left: 80px; color: white;}
/* 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;
}
.event-node-difficulties .tabs-content {
width: 100%;
}
.event-map-summary {
float: right;
width: 450px;
max-width: 450px;
}
.event-map-overview {
float: right;
}
.enemylist-entry {
display: inline-block;
overflow: hidden;
width: 130px;
height: 190px;
padding: 5px;
position: relative;
}
.enemylist-entry .enemylist-entry-box {
position: absolute;
z-index: 5;
overflow: hidden;
height: 190px;
}
.enemylist-entry .enemylist-entry-name {
position: absolute;
left: 10px;
top: 144px;
z-index: 4;
text-align: left;
font-size: 125%;
text-shadow: none;
color: black;
font-weight: bold;
font-family: "Times New Roman",Times,serif;
display: block;
width: 116px;
height: 26px;
background-position-x: -10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-left: 2px;
}
.enemylist-entry .enemylist-entry-name.sangvisferri {
background-image: url('/images/e/ee/Infobox_name_sangvisferri.png');
}
.enemylist-entry .enemylist-entry-name.kcco {
background-image: url('/images/5/52/Infobox_name_kcco.png');
}
.enemylist-entry .enemylist-entry-name.paradeus {
background-image: url('/images/3/32/Infobox_name_paradeus.png');
}
.enemylist-entry .enemylist-entry-name.collab {
background-image: url('/images/c/c0/Infobox_name_EXTRAstar.png');
}
.enemylist-entry .enemylist-entry-name.other {
background-image: url('/images/c/ce/Infobox_name_other.png');
}
.enemylist-entry .enemylist-entry-profile {
position: absolute;
width: 118px;
top: 25px;
left: 10px;
}
.enemylist-entry .enemylist-entry-faction {
position: absolute;
top: 164px;
left: 12px;
opacity: 0.5;
}
.enemylist-entry .enemylist-entry-classification-boss {
position: absolute;
top: 13px;
left: 20px;
height: 18px;
}
.enemylist-entry .enemylist-entry-frame {
position: absolute;
}
.ombox,
table.ombox,
.ombox.ombox-notice {
border: 2px solid #929292;
background-color: #5151511f;
background-image: radial-gradient(#727272 5%, transparent 5%), radial-gradient(#727272 5%, transparent 5%);
background-size: 6px 6px;
padding: 5px;
margin-left: auto;
margin-right: auto;
}
/*image*/
div.thumbinner {
border: 0;
background-color: rgba(255,255,255,0.25);
}
.gfl-doll-card {
width: 8rem;
height: 14.25rem;
position: relative;
border: thin solid var(--iopw-sys-palette-gray-99);
background-size: 8rem 14.25rem;
display: inline-block;
background-image: url(/images/thumb/5/5a/Infobox_bg.png/138px-Infobox_bg.png);
/* Background calc until Infobox gets rid of its shadow */
background-size: calc(100% + 10px);
background-position: -5px calc(-0.75rem - 5px);
& .doll-image {
margin-top: 0.75rem;
width: 100%;
height: auto;
object-fit: contain;
}
& .rarity-class {
position: absolute;
top: 0.05rem;
left: 0.05rem;
width: 3.3125rem;
height: auto;
}
& .index {
bottom: 0.165rem;
width: 100%;
font-size: 1.0rem;
letter-spacing: -0.1875rem;
padding-right: 0.35rem;
line-height: 1rem;
text-shadow: none;
text-align: right;
color: white;
font-family: var(--iopw-sys-typeface-mono),var(--iopw-sys-typeface-mono-alt),var(--iopw-sys-typeface-mono-fallback);
position: absolute;
left: 0;
}
& .card-frame {
width: 100%;
background: url("/images/thumb/2/2c/Infobox_border.png/128px-Infobox_border.png") top left no-repeat;
height: 100%;
background-size: contain;
position: absolute;
top: 0;
left: 0;
}
& > .plainlinks.card-frame > .external.text {
color: transparent;
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
}
& .name {
top: 11rem;
font-size: 1rem;
width: 100%;
padding: 0.1rem;
background-repeat: no-repeat;
background-size: contain;
line-height: 1.5rem;
background-position: center;
text-align: left;
text-shadow: none;
color: black;
font-weight: var(--iopw-sys-font-weight-bold);
font-family: var(--iopw-sys-typeface-fancy);
text-overflow: ellipsis;
white-space: nowrap;
left: 0;
position: absolute;
overflow: hidden;
}
&.doll-rarity-2 .name { background-image: url("/images/b/b1/Infobox_name_2star.png"); }
&.doll-rarity-3 .name { background-image: url("/images/c/c1/Infobox_name_3star.png"); }
&.doll-rarity-4 .name { background-image: url("/images/8/81/Infobox_name_4star.png"); }
&.doll-rarity-5 .name { background-image: url("/images/2/26/Infobox_name_5star.png"); }
&.doll-rarity-6 .name { background-image: url("/images/a/a0/Infobox_name_6star.png"); }
&.doll-rarity-EXTRA .name { background-image: url("/images/c/c0/Infobox_name_EXTRAstar.png"); }
}
.card-bg {
background-image:url("/images/5/5a/Infobox_bg.png");
width:256px;
height:456px;
padding:10px;
margin-left: auto;
margin-right: auto;
position: relative;
}
.withborders{
border:grey 2px solid;
}
/* 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;
}
.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;
}
li.gallerybox div.thumb {
background-color: #f9f9f91a;
backdrop-filter: blur(var(--iopw-sys-size-1));
}
.chibiAnimationContainer {
height: 300px;
width: 300px;
margin-left: auto;
margin-right: auto;
max-height: 260px;
max-width: 240px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.chibiAnimationContainer .chibiScreenshotButton {
position: absolute;
top: 5px;
right: 5px;
width: 20px;
height: 20px;
display: inline-block;
background-image: url('/images/8/8e/Screencap.png');
background-size: 20px 20px;
background-repeat: no-repeat;
}
.chibi-costume-switcher {
width: 240px;
}
.profiletable {
overflow: hidden;
}
.profiletable .tdoll_chibi,
.profiletable .chibiAnimationContainer,
.chibiAnimationContainer.commander-chibi {
background: repeating-linear-gradient(-55deg,#22222266,#22222266 10px,#33333366 10px,#33333366 20px);
}
.profiletable .tdoll_chibi .chibiAnimation,
.profiletable .chibiAnimationContainer .chibiAnimation {
margin-top: 80px;
}
.profiletable .tdoll_chibi .chibiAnimationClickArea,
.profiletable .chibiAnimationContainer .chibiAnimationClickArea {
height: 260px;
}
.tdoll_chibi .chibiAnimation,
.chibiAnimationContainer .chibiAnimation {
flex-shrink: 0;
pointer-events: none;
}
.commander-chibi-container {
display: inline-block;
}
.commander-chibi-container .chibiAnimationClickArea {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.commander-chibi-container .chibiAnimation {
position: absolute;
}
.notification {
margin-bottom: 10px;
display: inline-block;
font-size: 0.8em;
font-style: italic;
color: #71fdff;
}
.profiletable.boss {
background-image: url('/images/f/fc/Boss_Skull_Icon.png');
background-repeat: no-repeat;
background-position-x: 5px;
background-position-y: 5px;
}
.gf-table.stattable {
display: inline-block;
vertical-align: top;
}
.gf-table.stattable + .gf-table.stattable {
margin-left: 10px;
}
.gf-table.stattable .statlabel {
background:rgba(127, 127, 127, 0.2);
}
.gf-table.stattable .statlabel.statlabelgradient {
background: linear-gradient(135deg, rgba(127, 127, 127, 0.4) 85%, rgba(0, 0, 0, 0.5) 85%);
}
.gf-table.stattable .statvalue {
background:rgba(0, 0, 0, 0.25);
padding-left:10px;
padding-right:10px;
text-align:center
}
.gf-table.stattable .statcomment {
font-style: italic;
}
/* 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 */
a, .mw-body a.external { color: var(--iopw-sys-palette-primary); } /* normal unvisited links */
a:visited .mw-body a:visited, .mw-body a.external:visited, .mw-body a.extiw:visited { color: var(--iopw-sys-palette-primary-darker); } /* visited links */
.mw-body a.new { color: var(--iopw-sys-palette-font-negative); } /* new links */
.mw-body a.extiw, .mw-body a.external {
background-position: center right;
background-repeat: no-repeat;
background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22%3E %3Cpath fill=%22%23fff%22 stroke=%22%2336c%22 d=%22M1.5 4.518h5.982V10.5H1.5z%22/%3E %3Cpath fill=%22%2336c%22 d=%22M5.765 1H11v5.39L9.427 7.937l-1.31-1.31L5.393 9.35l-2.69-2.688 2.81-2.808L4.2 2.544z%22/%3E %3Cpath fill=%22%23fff%22 d=%22M9.995 2.004l.022 4.885L8.2 5.07 5.32 7.95 4.09 6.723l2.882-2.88-1.85-1.852z%22/%3E %3C/svg%3E");
padding-right: 13px;
}
/* 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;
}
div.spoiler {
display: inline-block;
}
.gfwiki-message-box {
padding: 4px;
min-height: 75px;
border: thin solid gray;
background: #323232;
background: rgba(50,50,50,0.5);
overflow: auto;
}
.darken {filter:brightness(30%);}
/* Tables */
.mw-templatedata-doc-wrap .mw-templatedata-doc-params th,
.gf-table th,
.cargoTable th,
.gf-table.testcasetable th.testcasedescription {
color: var(--iopw-sys-palette-on-primary);
font-size: var(--iopw-sys-size-4);
background-color: var(--iopw-sys-palette-primary);
padding: var(--iopw-sys-size-2);
text-align: center;
text-shadow: none;
}
.gf-table th a {color: #875e00}
.mw-templatedata-doc-wrap .mw-templatedata-doc-params > tbody > tr > td,
.gf-table > tbody > tr > td,
.cargoTable > tbody > tr > td {
background-color: rgba(0, 0, 0, 0.6);
padding: 5px;
}
.gf-table-borders {
border: grey 2px solid;
border-collapse: collapse;
}
.gf-table-borders td {
border: grey 1px solid;
}
.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);
}
.mw-templatedata-doc-wrap .mw-templatedata-doc-params {
color: white;
color: rgba(250,250,250,1);
text-shadow: 0 0 0.2em black,0 0 0.2em black;
}
.mw-templatedata-doc-wrap table.wikitable {
border: none;
border-collapse: separate;
background-color: transparent;
}
.mw-templatedata-doc-wrap table.wikitable > * > tr > th,
.mw-templatedata-doc-wrap table.wikitable > * > tr > td {
border: none;
}
.mw-templatedata-format {
font-weight: normal;
}
/* General button style */
button.gf-button {
padding: 3px 6px;
margin: 2px 2px;
border-radius: 15px;
border: thin solid transparent;
text-shadow:none;
font-family: arial;
font-weight: bold;
font-size: 1em;
background-color: #4E443C;
color:#F0b000;
-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;
}
button.gf-button.enabled {
border: thin solid #F0b000;
opacity:0.75;
}
button.gf-button.active {
color:#4E443C;
background-color: #F0b000;
border-radius: 15px;
border: none;
text-shadow:none;
opacity:1;
}
button.gf-button:hover {
opacity:1;
}
button.gf-button:disabled,
button.gf-button:disabled:hover {
color: #a2a2a2;
opacity:0.75;
}
/*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;}
#newestadditions{width:auto;margin-left:0;}
#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;}
#newestadditions{width:450px;float:left;margin-left:5px;}
#twitter-widget-0{height:373px!important;}
#aboutgame{width:800px;}
#aboutwiki{width:800px; margin-left: 0.5em;}
.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;}
#newestadditions{width:240px;margin-left:0;min-height: 0;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;}
#newestadditions{width:360px;margin-left:0px;min-height: 0;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;}
#newestadditions{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;}
#newestadditions{width:300px;min-height: 0;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;
}
#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;
}
.newestadditiongroup {
display: inline-block;
width: 47%;
margin-top: 5px;
}
.newestadditiongroup table {
width: 100%;
}
.newestadditiongroup td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 0;
}
.mainpage-link-collection {
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
}
.mainpage-link-collection .mainpage-link-section {
display: flex;
flex-wrap: wrap;
flex-direction: row;
position: relative;
padding-top: 2.3em;
margin-right: 0;
margin-bottom: 10px;
}
.mainpage-link-collection .mainpage-link-section-title {
position: absolute;
top: 0;
left: 5px;
font-size: 1.5em;
margin: 0;
padding: 0;
}
.mainpage-link-collection .mainpage-link-group {
border: 3px solid rgb(150, 150, 150);
padding: 0.5em;
min-width: 300px;
position: relative;
background-color:#3f3f3f;
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;
margin-right: 10px;
}
.mainpage-link-collection .mainpage-link-group-title {
margin: 0;
padding: 0;
border-bottom: thin solid gray;
}
.mainpage-link-collection .mainpage-link-group li {
list-style: none;
}
#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
}
.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;
}
.game-thumb-container {
display: flex;
flex-wrap: wrap;
gap: var(--iopw-sys-size-2);
justify-content: center;
& .game-thumb {
position: relative;
width: 14.375rem;
height: 7.8125rem;
}
& .game-thumb-img {
position: absolute;
object-fit: cover;
filter: brightness(50%);
transition: 0.35s ease-in-out;
}
& .game-thumb:hover .game-thumb-img {
filter: brightness(90%);
}
& .game-thumb .game-thumb-link a {
position: absolute;
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
text-align: center;
font-size: var(--iopw-sys-size-5);
padding: 1rem;
}
}
#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;
}
.banners .jcarousel-item {
max-height: 200px;
}
.banners .jcarousel-item img {
display: block;
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.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: -6px 0 0 6px;
}
.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);
}
/* Tile Search Engine */
div.tileSearchDiv {
display: inline-block;
margin-right: 15px;
}
table.userselectiongridtable td {
height: 20px;
width: 20px;
border: thin solid gray;
}
table.userselectiongridtable td.active {
background-color: cyan;
}
table.userselectionpositiontable td {
height: 20px;
width: 20px;
border: thin solid gray;
}
table.userselectionpositiontable td.active {
background-color: white;
}
table.minigridtable td {
height: 3px;
width: 3px;
background-color: rgba(0,0,0,0.5);
}
table.tilesearchdolls tr[data-tile1="1"] table.minigridtable tr:nth-child(3) td:nth-child(1),
table.tilesearchdolls tr[data-tile2="1"] table.minigridtable tr:nth-child(3) td:nth-child(2),
table.tilesearchdolls tr[data-tile3="1"] table.minigridtable tr:nth-child(3) td:nth-child(3),
table.tilesearchdolls tr[data-tile4="1"] table.minigridtable tr:nth-child(2) td:nth-child(1),
table.tilesearchdolls tr[data-tile5="1"] table.minigridtable tr:nth-child(2) td:nth-child(2),
table.tilesearchdolls tr[data-tile6="1"] table.minigridtable tr:nth-child(2) td:nth-child(3),
table.tilesearchdolls tr[data-tile7="1"] table.minigridtable tr:nth-child(1) td:nth-child(1),
table.tilesearchdolls tr[data-tile8="1"] table.minigridtable tr:nth-child(1) td:nth-child(2),
table.tilesearchdolls tr[data-tile9="1"] table.minigridtable tr:nth-child(1) td:nth-child(3) {
background-color: cyan;
}
table.tilesearchdolls tr[data-tile1="0"] table.minigridtable tr:nth-child(3) td:nth-child(1),
table.tilesearchdolls tr[data-tile2="0"] table.minigridtable tr:nth-child(3) td:nth-child(2),
table.tilesearchdolls tr[data-tile3="0"] table.minigridtable tr:nth-child(3) td:nth-child(3),
table.tilesearchdolls tr[data-tile4="0"] table.minigridtable tr:nth-child(2) td:nth-child(1),
table.tilesearchdolls tr[data-tile5="0"] table.minigridtable tr:nth-child(2) td:nth-child(2),
table.tilesearchdolls tr[data-tile6="0"] table.minigridtable tr:nth-child(2) td:nth-child(3),
table.tilesearchdolls tr[data-tile7="0"] table.minigridtable tr:nth-child(1) td:nth-child(1),
table.tilesearchdolls tr[data-tile8="0"] table.minigridtable tr:nth-child(1) td:nth-child(2),
table.tilesearchdolls tr[data-tile9="0"] table.minigridtable tr:nth-child(1) td:nth-child(3) {
background-color: white;
}
table.tilesearchdolls>tbody>tr { display: none; }
table.tilesearchdolls>tbody>tr.works { display: inherit; }
/* Documentational stuff */
.testcasetable {
width: 100%;
}
.testcasetable th,
.gf-table.testcasetable th {
background: rgba(50,50,50,0.5);
text-align: left;
padding-left: 5px;
padding-right: 5px;
color: lightgray;
}
.testcasetable > tr >td,
.testcasetable > tbody > tr >td {
width: 100%;
}
.testcasetable .testcasedescription {
width: 100%;
}
.mw-templatedata-doc-wrap .mw-templatedata-doc-params > tbody > tr > td.mw-templatedata-doc-param-status-required,
table > tbody > tr > td.cell-yes,
table > tbody > tr > td.cell-no {
color: white;
vertical-align: middle;
text-align: left;
}
.mw-templatedata-doc-wrap .mw-templatedata-doc-params > tbody > tr > .mw-templatedata-doc-param-type + td.mw-templatedata-doc-param-status-required,
table > tbody > tr > td.cell-yes {
background-color: #AB8C63;
}
.mw-templatedata-doc-wrap .mw-templatedata-doc-params > tbody > tr > .mw-templatedata-doc-param-type + td,
table > tbody > tr > td.cell-no {
background-color: #67718A;
}
.mw-templatedata-doc-wrap dt {
float: left;
clear: left;
margin-right: 5px;
}
.navbox {
position: relative;
border: thin solid lightgray;
width: 100%;
margin: 1em auto 0;
background: rgba(0,0,0,0.5);
box-sizing: border-box;
}
.navbox + .navbox {
margin-top: -1px;
}
/* Only style the navbox headers, not the childs of childs */
.navbox>tr>th,
.navbox>tbody>tr>th,
.navbox>thead>tr>th {
background: rgba(255,255,255,0.5);
border: none;
color: white;
}
.navbox th .navboxpopularizer {
float: right;
padding: 0 1em;
}
.navbox .navboxlist {
border: none;
width: 90%;
margin-left: auto;
margin-right: auto;
background: rgba(0,0,0,0.5);
}
.navboxlist table,
.navboxlist-table {
border: none;
width: 100%;
background: rgba(0,0,0,0.0);
}
.navboxlist table .navboxlist-oddrow,
.navboxlist-table .navboxlist-oddrow {
background: linear-gradient(115deg,rgba(100,100,100,0.2) 0%, transparent 100%);
}
/* Definition for tooltips */
.tooltip {
position: relative;
text-decoration-line: underline;
text-decoration-style: dotted;
text-decoration-color: gray;
}
.tooltip .tooltipcontainer {
visibility: hidden;
width: 300px;
/* Position the tooltip */
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -150px; /* Use half of the width, to center the tooltip */
}
.tooltip .tooltiptext {
height: 100%;
width: 100%;
position: relative;
background-color: #222222;
background-clip:content-box;
color: lightgray;
padding: 17px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
.tooltiptext .tooltiptext-content {
margin: 17px;
margin-bottom: 20px;
}
.tooltiptext-corners {
z-index: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAlCAYAAAAqXEs9AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAB3RJTUUH4gkQDhoCnuyTOgAAAqpJREFUWMPFmL2O00AUhc/4J469kDjJFlQ0CIUCiQeg5BXS0RDyCLwCEmIlXgBRpSZbUNDvNjQ020UrSkSklTYbR0mcxT+XImPixDOOvRs7I0WR7LHn073n3LljBvHQAJj8v9TBBNdqHIRwgBEHUgHYAEIccLBYigzHcd6HYXib9eGrq6thu90+BaBkiHwuoIcA5kQU5Hl44jinDdt+x6Mbf+dcAjXfBXsv8eqK0ur3+891XVezzA+CgDHGdkaoyQXsbEVomUHYIX/H3gwgddP5+c8/Jycfm6qqluo2aapMs9q4uPhBlYpRqsuUlHsHqUMFVWLKUYc3n9GKgTkWQC24T6SeBVDPD8QYcDNTSOZeIoJtgYFtAx1xKJlKfABOfqCbmULX33814UomGMCzN+bYcw2WrBA2ACcldf7dIgSXRz+UVCbfB1AVpE0FUE+FuruGQsB63b4+0gK2LaGa9ZetFq1LoEypnuJADwaDwavRaOT3er1PAJ7sYjrWAqaboST+AeRQFgCPz5EDqZ1OZwhA6Xa7i/04LuBCNgVOjFIXZC6MexquMBJrKLVsICaMxBpqsycsASiCmkiWi8oBlQkULTWR2F39L/5t23ur0raP7YMJRW7XxvS4AYsSpZwAhEKg6v1hbGk0XjxaVF4+dWllfSprt9f4Lynks0vLO7u0vHiaSnCZ2NLJzdTP1aAVDMUOURjzQ4k05GVdy6ovyUycAULMPcYCn7agpsIUraFWJ3hNcDcTECnA8PPvlqgfar9tjeHH+yHi+9lUUg6inqaW32VVnfDlW3156zFh41zRiGmeLoiFtqMX8gFM8wMZOrEPX1tu+qwZk/dC6VAFiTpIWVQVtCOluCwNypI6r2Db+xJnyctBwUC7eqEkVAnfECMoS3KiNTY+G/0Dnsrgv/SoxVYAAAAASUVORK5CYII='), url('data:image/png;base64,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'), url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAB3RJTUUH4gkQDhgL1QZJHAAAAaVJREFUOMu1lT1P20AYx39nX5xLAlYxEgtDkceCxEC7MvIl+jEy8JXoABII9WN0QWJgapTBDBGBAOnFL7kOdlKH+BIS1L90Op3l5+fn5Z7HIgy/PFCpBMiw6eDgG5eXZ97F+fn303b7l9dqpf1+P42iKJXgAW6FWRN4BMYs0mazydHhYc0oVet2uzqKotSBJ4uhAbaWQoda8xjHGGOmzxwQQJ98f6sx4FsiyfWqNfedDs4sdLI9W8A1QBWez4ezEwT+8clJ8PuuY7KnPCoRhmGpUB7QsvgUA6/T0/7+V3N19SOYnIUQYkO6n17STDjzhsNqpvCK4lnlvKSZKIVflq42UUCzDjRYpgqoAB5m89sooHWg0bDldxF0Ah7+81CVPTagtheCpf17Ol/alpFwVU8/pv8ClUkSr2WYJIm2Qm9ubufbxCwpb/6WtR4yjvX1LNCYIAiOpZR7a0Y/AtgDPpfWbq/X+2lWVFGfbUDIYmh65XQppbw1PDTF5TaiGJpTua5LlmUjIF2F6Pt+fTAYPE9aZ+uDN0gU42v0jo56380C/rz9mf0F/562M0QxvvYAAAAASUVORK5CYII='), url('data:image/png;base64,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');
background-attachment: local;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
background-position: top left, top right, bottom right, bottom left;
}
.tooltiptext-borders-l {
position: absolute;
top: 30px;
bottom: 40px;
left: 0;
width: 20px;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAACCAYAAACt+Hc7AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAB3RJTUUH4gkQDhowVjvCugAAAChJREFUCNdjZGBgEGRABZyfP39eePHiTeO4uDAGLPIkAyYsYmwMVAYAIvkHb69H/GoAAAAASUVORK5CYII=');
background-repeat: repeat-y;
background-position: top left;
}
.tooltiptext-borders-r {
position: absolute;
top: 30px;
bottom: 20px;
left: 0;
right: 0;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAACCAYAAACt+Hc7AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAB3RJTUUH4gkQDhof/er/4wAAACpJREFUCNdjVFJS+s9AOXi/aNEqBn199bO8vLzxDAwM35ElmRioD9jQBQDWZwcb/aOfmQAAAABJRU5ErkJggg==');
background-repeat: repeat-y;
background-position: top right;
}
.tooltiptext-borders-t {
position: absolute;
top: 0;
left: 36px;
right: 103px;
height: 38px;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAnCAYAAAAy9QloAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAB3RJTUUH4gkQDhoP4F3vhwAAAOhJREFUOMu1lMsNwjAQRJ9NSFAACVIBpAIOtJQKqCHVUBsRB5QPEjaHxJCP7RwQK/n2tLszO7IA9nhKMlO/AwGgvUCe5ycfILTWpbdDll1qb4c0TYu/y0xsk4Gb6aA6K/pPAbEBKkfzCIiR0AClE+qWdEM9FQ22cSOZVafACRh5wmfUEHI4KT77BG6TO+ClhOcSNUJf0b7QicPxXIw3H1xTCk170cIK9VQk1oCPZO4mkJzy0Vzk1kA4l8kNsDTA0wJoYAuESHjghlbI72FsRi3MDgq4zxllh0YqVG9c+wJ7DsrBD+NIVFtvbtw4Rw1j9KMAAAAASUVORK5CYII=');
background-repeat: repeat-x;
background-position: top left;
}
.tooltiptext-borders-b {
position: absolute;
bottom: 1px;
left: 130px;
right: 20px;
height: 20px;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAVCAYAAABPPm7SAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAB3RJTUUH4gkQDhkdOMnNDAAAALdJREFUOMvNlMsOwiAQRQ+1Nmo0UT+hS7/f7yJojFaI4qKQaMPQNmy8GxZMztx5gGrbkyYpB7wYUw0NsEhcbQADvLOACi5CkAf2fUgeoDKZPLAOpwiAHvII51ANsBMhX/4scBPyLIHtGCBC7gKkCeVkAQDPUE5KkwAAnQDxwPGnH5kZSU2NkFVcJEkK0KObWFGoYkDtnC0CKGOuusiBtd25yEGYyRTF5+mHgMOMhD7xocx2/Gd78AFOSyj+CS+viAAAAABJRU5ErkJggg==');
background-repeat: repeat-x;
background-position: top left;
}
/* New Tooltip engine */
#tooltip {
position: absolute;
z-index: 999;
font-size: 0.875em;
line-height: 1.6;
}
.tooltip-inline .tooltip-content.uninitialized {
display: none;
}
@-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;
}
.loading .chibiAnimationClickArea,
.loading {
background-image: url('/images/8/88/gfloading.gif');
background-repeat: no-repeat;
background-attachment: local;
background-position: bottom right;
background-size: 50px;
}
.loading2 {
background-image: url("/images/5/5e/gf_loading2.gif");
background-repeat: no-repeat;
background-attachment: local;
background-position: bottom right;
background-size: 18px;
}
.lazy-img {
background-image: url("/images/5/5e/gf_loading2.gif");
background-repeat: no-repeat;
background-position: center;
}
.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: 17px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.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: 11px;
/*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')
}
.heroname.sniper {
background-image: url('/images/8/87/Icon_PNC_Hero_Class_white_Sniper.png')
}
/* Hide tagline */
.heading-holder .tagline {
display:none;
}