MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
m Small bugfix on active button |
No edit summary |
||
(172 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
/* CSS placed here will be applied to all skins */ | /* CSS placed here will be applied to all skins */ | ||
/* Also see MediaWiki:Gadget-DesignTokens.css */ | |||
#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: var(--iopw-sys-palette-input); | |||
&::selection { | |||
color: var(--iopw-sys-palette-on-primary); | |||
background-color: var(--iopw-sys-palette-primary); | |||
} | |||
} | |||
/*Disable section editing */ | /*Disable section editing */ | ||
.mw-editsection { display:none!important; } | .mw-editsection { display:none!important; } | ||
.mw-editform .editOptions { | |||
color: var(--iopw-sys-palette-gray-99); | |||
background-color: #8a8a8a2b; | |||
} | |||
.mw-message-box { | |||
text-shadow: none; | |||
} | |||
.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); | |||
} | |||
.mw-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 */ | /* For the background images on T-Doll pages */ | ||
Line 17: | Line 122: | ||
.bg-rarity { | .bg-rarity { | ||
display: none; | 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; | |||
} | } | ||
Line 143: | Line 682: | ||
overflow: hidden; | overflow: hidden; | ||
max-width: 800px; | max-width: 800px; | ||
} | } | ||
Line 155: | Line 692: | ||
.gradientDivs > h4 > .mw-editsection {display:none;} | .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 > 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; | .gradientDivs > div > p {width:75%;text-align:right;} | ||
/* 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); | |||
} | |||
.obtain-panel { | |||
display: grid; | |||
grid: auto / minmax(auto, max-content) 1fr; | |||
grid-gap: 0.3rem; | |||
& .obtainflagcontainer { | |||
color: var(--iopw-sys-palette-gray-00); | |||
text-shadow: none; | |||
display: flex; | |||
gap: 0.3rem; | |||
align-items: flex-start; | |||
flex-wrap: wrap; | |||
/* Remove in the future: */ | |||
float: none; | |||
width: none; | |||
} | |||
& .obtainflag { | |||
border-radius: 0.2rem; | |||
padding-left: 0 0.2rem; | |||
white-space: nowrap; | |||
/* Remove in the future: */ | |||
border: none; | |||
clear: both; | |||
} | |||
} | |||
.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-gacha { background:pink; } | |||
.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;} | |||
.entity-name { | |||
display: inline-block; | |||
& .entity-icon { | |||
width: 1rem; | |||
display: inline-block; | |||
height: 1rem; | |||
vertical-align: text-bottom; | |||
background-size: contain; | |||
background-position: center; | |||
margin-right: 0.1rem; | |||
} | |||
} | |||
/** GFL1 Fairy name */ | |||
.gfl-name-fairy { | |||
&.fairy-battle { | |||
color: var(--gfl-sys-unit-fairy-battle); | |||
text-shadow: 0 0 0.2rem var(--gfl-sys-unit-fairy-battle); | |||
} | |||
&.fairy-strategy { | |||
color: var(--gfl-sys-unit-fairy-strategy); | |||
text-shadow: 0 0 0.2rem var(--gfl-sys-unit-fairy-strategy); | |||
} | |||
} | |||
/** GFL1 Equipment name */ | |||
.gfl-name-equip { | |||
&.rarity-2 { | |||
color: var(--gfl-sys-rarity-2star); | |||
text-shadow: 0 0 0.2rem var(--gfl-sys-rarity-2star); | |||
} | |||
&.rarity-3 { | |||
color: var(--gfl-sys-rarity-3star); | |||
text-shadow: 0 0 0.2rem var(--gfl-sys-rarity-3star); | |||
} | |||
&.rarity-4 { | |||
color: var(--gfl-sys-rarity-4star); | |||
text-shadow: 0 0 0.2rem var(--gfl-sys-rarity-4star); | |||
} | |||
&.rarity-5 { | |||
color: var(--gfl-sys-rarity-5star); | |||
text-shadow: 0 0 0.2rem var(--gfl-sys-rarity-5star); | |||
} | |||
} | |||
/* Equipment named card */ | |||
.equipmentnamedcard { | |||
width: 5rem; | |||
text-align: center; | |||
display: inline-block; | |||
margin-right: 1rem; | |||
vertical-align: top; | |||
} | |||
.equipmentnamedcard .equipmentcard { | |||
margin-left: 0.3125rem; | |||
margin-right: 0.3125rem; | |||
} | |||
.equipmentnamedcard .equipname { | |||
font-size: 0.9em; | |||
} | |||
.equipmentnamedcard .equipname small { | |||
display: none; | |||
} | |||
/* Equipment cards */ | |||
.equipmentcard { | |||
display: inline-block; | |||
position: relative; | |||
overflow: hidden; | |||
background-color: var(--iopw-sys-palette-gray-20); | |||
border: 2px solid var(--iopw-sys-palette-gray-80); | |||
width: 4rem; | |||
height: 3.75rem; | |||
background-repeat: no-repeat; | |||
background-size: auto 0.45rem, contain; | |||
background-position: top right, top left; | |||
&.rarity2 { background-image: url(/images/2/25/2Stars.png), url(/images/9/96/2starE.png); } | |||
&.rarity3 { background-image: url(/images/d/dd/3Stars.png), url(/images/9/91/3starE.png); } | |||
&.rarity4 { background-image: url(/images/4/41/4Stars.png), url(/images/2/2e/4starE.png); } | |||
&.rarity5 { background-image: url(/images/8/81/5Stars.png), url(/images/d/d4/5starE.png); } | |||
& .overlay-link { | |||
position: absolute; | |||
width: 100%; | |||
height: 100%; | |||
top: 0; | |||
left: 0; | |||
} | |||
& .type { | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
width: 1.6rem; | |||
} | |||
& .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*/ | /*image*/ | ||
.mediawiki .thumb .thumbimage { | |||
width: 100%; | |||
height: 100%; | |||
} | |||
div.thumbinner { | div.thumbinner { | ||
border: 0; | border: 0; | ||
background-color: rgba(255,255,255,0.25); | background-color: rgba(255,255,255,0.25); | ||
} | |||
.layout-image { | |||
display: block; | |||
height: 100%; | |||
width: 100%; | |||
background-repeat: no-repeat; | |||
} | |||
.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 { | |||
background-size: contain; | |||
background-position-y: 0.8rem; | |||
} | |||
& .rarity-class { | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
background-position: 0.075rem 0.075rem; | |||
pointer-events: none; | |||
} | |||
& .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; | |||
user-select: none; | |||
} | |||
& .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; | |||
user-select: none; | |||
} | |||
&.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 { | .card-bg { | ||
background-image:url("/images/5/5a/Infobox_bg.png"); | |||
width:auto; | |||
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 { | .card-bg-small { | ||
background-image:url(" | 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 { | .icon-bg-2star-small { | ||
background-image:url("// | background-image: url("/images/thumb/7/72/BG_2star_S.png/60px-BG_2star_S.png"); | ||
padding: | padding: 0.3125rem; | ||
display: inline-block; | |||
width: 3.125rem; | |||
height: 3.125rem; | |||
background-size: contain; | |||
& img { | |||
height: 100%; | |||
width: 100%; | |||
} | |||
} | |||
.gfl-item { | |||
display: flex; | |||
padding: 0.3125rem; | |||
position: relative; | |||
& h3 { | |||
display: none; | |||
} | |||
& .container { | |||
background-color: rgba(0, 0, 0, 0.5); | |||
width: 21.25rem; | |||
padding: 0.625rem 0.625rem 1.875rem 0.625rem; | |||
} | |||
& .item-background { | |||
background-image: url("/images/thumb/7/72/BG_2star_S.png/60px-BG_2star_S.png"); | |||
background-size: cover; | |||
padding: 0.3125rem; | |||
float: left; | |||
margin-right: 1.25rem; | |||
width: 3.125rem; | |||
height: 3.125rem; | |||
& img { | |||
height: 100%; | |||
width: 100%; | |||
} | |||
} | |||
& .item-name { | |||
background: rgba(127, 127, 127, 0.4); | |||
display: flex; | |||
padding: 0.1rem 0.3125rem | |||
} | |||
& .item-desc { | |||
border: 1px darkgrey solid; | |||
width: 100%; | |||
margin-bottom: 0.5rem; | |||
padding: 0.5rem; | |||
text-align: justify; | |||
} | |||
& .item-addon { | |||
position: absolute; | |||
left: 1rem; | |||
bottom: 1rem; | |||
} | |||
} | } | ||
Line 191: | Line 1,488: | ||
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 */ | /* for color inversion */ | ||
Line 233: | Line 1,645: | ||
.floatright { | |||
margin: 0; | |||
float: right; | |||
} | |||
.floatleft { | |||
margin: 0; | |||
float: left; | |||
} | |||
/* plain links*/ | /* plain links*/ | ||
Line 272: | Line 1,676: | ||
} | } | ||
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; | |||
} | |||
.gfwiki-message-box + .gfwiki-message-box { | |||
margin-top: 1rem; | |||
} | |||
.darken {filter:brightness(30%);} | .darken {filter:brightness(30%);} | ||
Line 277: | Line 1,696: | ||
/* Tables */ | /* Tables */ | ||
.gf-table th { | .mw-templatedata-doc-wrap .mw-templatedata-doc-params th, | ||
color: | .gf-table th, | ||
font-size: | .cargoTable th, | ||
background-color: | .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-align: center; | ||
text-shadow: none; | |||
text-shadow:none; | |||
} | } | ||
.gf-table th a {color: #875e00} | .gf-table th a {color: #875e00} | ||
.mw-templatedata-doc-wrap .mw-templatedata-doc-params > tbody > tr > td, | |||
.gf-table > tbody > tr > td { | .gf-table > tbody > tr > td, | ||
.cargoTable > tbody > tr > td { | |||
background-color: rgba(0, 0, 0, 0.6); | background-color: rgba(0, 0, 0, 0.6); | ||
padding: 5px; | 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 { | .gf-table-lightcell > tbody > tr > td { | ||
Line 308: | Line 1,739: | ||
background: rgba(0, 0, 0, 0.6); | background: rgba(0, 0, 0, 0.6); | ||
} | } | ||
.gf-table-darkcell > tbody > tr > td { | .gf-table-darkcell > tbody > tr > td { | ||
background: rgba(0, 0, 0, 0.6); | 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; | |||
} | } | ||
Line 350: | Line 1,799: | ||
button.gf-button:hover { | button.gf-button:hover { | ||
opacity:1; | opacity:1; | ||
} | |||
button.gf-button:disabled, | |||
button.gf-button:disabled:hover { | |||
color: #a2a2a2; | |||
opacity:0.75; | |||
} | } | ||
Line 402: | Line 1,857: | ||
} | } | ||
/* mutilmediaViewer 信息栏修复 */ | /* mutilmediaViewer 信息栏修复 */ | ||
.mw-mmv-image-metadata { | |||
margin-top: 0; | |||
} | |||
.mw-mmv-image-metadata-column.mw-mmv-image-metadata-desc-column { | .mw-mmv-image-metadata-column.mw-mmv-image-metadata-desc-column { | ||
width: 30%; | width: 30%; | ||
Line 512: | Line 1,970: | ||
} | } | ||
#timerwidgets{width:240px;float:left;} | #timerwidgets{width:240px;float:left;} | ||
# | #newestadditions{width:auto;margin-left:0;} | ||
#twitter-widget-0{height:267px!important;} | #twitter-widget-0{height:267px!important;} | ||
.updates{max-height:136.833px;} | .updates{max-height:136.833px;} | ||
Line 521: | Line 1,979: | ||
.mainpage{width:800px;} | .mainpage{width:800px;} | ||
#timerwidgets{width:345px;float:left;} | #timerwidgets{width:345px;float:left;} | ||
# | #newestadditions{width:450px;float:left;margin-left:5px;} | ||
#twitter-widget-0{height:373px!important;} | #twitter-widget-0{height:373px!important;} | ||
#aboutgame{width:800px;} | #aboutgame{width:800px;} | ||
#aboutwiki{width:800px; margin-left: 0.5em;} | |||
.updates{max-height:198.25px;} | .updates{max-height:198.25px;} | ||
.promotions{max-height:164px;} | .promotions{max-height:164px;} | ||
Line 533: | Line 1,992: | ||
.rightcol{width:240px;margin-left:2em;} | .rightcol{width:240px;margin-left:2em;} | ||
#timerwidgets{width:240px;} | #timerwidgets{width:240px;} | ||
# | #newestadditions{width:240px;margin-left:0;min-height: 0;max-height: 479px;margin-bottom:5px;} | ||
#twitter-widget-0{height:479px!important;} | #twitter-widget-0{height:479px!important;} | ||
.updates{max-height:136.833px;} | .updates{max-height:136.833px;} | ||
Line 544: | Line 2,003: | ||
.rightcol{width:360px;margin-left:2em;} | .rightcol{width:360px;margin-left:2em;} | ||
#timerwidgets{width:360px;} | #timerwidgets{width:360px;} | ||
# | #newestadditions{width:360px;margin-left:0px;min-height: 0;max-height: 361px;} | ||
#twitter-widget-0{height: 361px !important;} | #twitter-widget-0{height: 361px !important;} | ||
.updates{max-height:217.017px;} | .updates{max-height:217.017px;} | ||
Line 555: | Line 2,014: | ||
.rightcol{width:480px;} | .rightcol{width:480px;} | ||
#timerwidgets{width:235px;} | #timerwidgets{width:235px;} | ||
# | #newestadditions{width:240px;margin-left:5px;min-height: 269px;max-height: 269px;} | ||
#twitter-widget-0{height:269px!important;} | #twitter-widget-0{height:269px!important;} | ||
#aboutgame{width:480px;margin-left:2em;} | #aboutgame,#aboutwiki{width:480px;margin-left:2em;} | ||
.updates{max-height:133.917px;} | .updates{max-height:133.917px;} | ||
.promotions{max-height:118.05px;} | .promotions{max-height:118.05px;} | ||
Line 566: | Line 2,025: | ||
.rightcol{width:600px;} | .rightcol{width:600px;} | ||
#timerwidgets{width:295px;} | #timerwidgets{width:295px;} | ||
# | #newestadditions{width:300px;min-height: 0;max-height: 329px;} | ||
#twitter-widget-0{height:329px!important;} | #twitter-widget-0{height:329px!important;} | ||
#aboutgame{width:600px;} | #aboutgame,#aboutwiki{width:600px;} | ||
.updates{max-height:169px;} | .updates{max-height:169px;} | ||
.promotions{max-height:143.117px;} | .promotions{max-height:143.117px;} | ||
Line 581: | Line 2,040: | ||
} | } | ||
# | #aboutgame,#aboutwiki,#newestadditions{ | ||
# | |||
padding:0.5em; | padding:0.5em; | ||
background-color: #3f3f3f; | background-color: #3f3f3f; | ||
Line 599: | Line 2,047: | ||
border-style: solid; | border-style: solid; | ||
box-shadow: 0px 0px 10px #000; | box-shadow: 0px 0px 10px #000; | ||
background-image:url(" | 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; | ||
Line 607: | Line 2,055: | ||
} | } | ||
#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{ | #mainmenu{ | ||
background-image:url(" | background-image:url("/images/8/86/BG_homescreen.jpg"); | ||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
background-size: cover; | background-size: cover; | ||
Line 620: | Line 2,144: | ||
border-style: solid; | border-style: solid; | ||
box-shadow: 0px 0px 10px #000 | 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; | |||
filter: brightness(50%); | |||
transition: 0.35s ease-in-out; | |||
& .mw-file-element { | |||
object-fit: cover; | |||
width: 100%; | |||
height: 100%; | |||
} | |||
} | |||
& .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{ | #directory{ | ||
background-image:url(" | 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 650: | Line 2,238: | ||
visibility:hidden; | visibility:hidden; | ||
position:absolute; | position:absolute; | ||
} | |||
.banners .jcarousel-item { | |||
max-height: 200px; | |||
} | |||
.banners .jcarousel-item img { | |||
display: block; | |||
max-width: 100%; | |||
max-height: 100%; | |||
object-fit: contain; | |||
} | } | ||
.updates{ | .updates{ | ||
background-image: url(" | 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; | ||
Line 796: | Line 2,395: | ||
border:none; | border:none; | ||
color:rgb(63,63,63); | 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; | |||
display: block; | |||
} | |||
.tooltiptext .tooltiptext-content { | |||
margin: 17px; | |||
margin-bottom: 20px; | |||
display: block; | |||
} | |||
.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; | |||
} | } | ||
Line 812: | Line 2,665: | ||
#description { | #description { | ||
overflow-y:auto; | 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: 126px; | |||
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; | |||
bottom: -30px; | |||
} | |||
.pnc-index-entry .hero { | |||
position: absolute; | |||
} | |||
.pnc-index-entry .front { | |||
position: absolute; | |||
bottom: -28px; | |||
} | |||
.pnc-index-entry .company { | |||
position: absolute; | |||
top: 12px; | |||
left: 40px; | |||
width: 120px; | |||
opacity: 20%; | |||
} | |||
.pnc-index-entry .rarity { | |||
position: relative; | |||
top: 190px; | |||
left: 4px; | |||
} | |||
.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; | |||
} | |||
/* More readable standard toggle button */ | |||
.mw-collapsible-toggle-default .mw-collapsible-text{ | |||
color: #3877df; | |||
} | } |
Latest revision as of 16:52, 13 December 2024
/* CSS placed here will be applied to all skins */
/* Also see MediaWiki:Gadget-DesignTokens.css */
#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: var(--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;
}
.mw-message-box {
text-shadow: none;
}
.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);
}
.mw-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;
}
.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;}
/* 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);
}
.obtain-panel {
display: grid;
grid: auto / minmax(auto, max-content) 1fr;
grid-gap: 0.3rem;
& .obtainflagcontainer {
color: var(--iopw-sys-palette-gray-00);
text-shadow: none;
display: flex;
gap: 0.3rem;
align-items: flex-start;
flex-wrap: wrap;
/* Remove in the future: */
float: none;
width: none;
}
& .obtainflag {
border-radius: 0.2rem;
padding-left: 0 0.2rem;
white-space: nowrap;
/* Remove in the future: */
border: none;
clear: both;
}
}
.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-gacha { background:pink; }
.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;}
.entity-name {
display: inline-block;
& .entity-icon {
width: 1rem;
display: inline-block;
height: 1rem;
vertical-align: text-bottom;
background-size: contain;
background-position: center;
margin-right: 0.1rem;
}
}
/** GFL1 Fairy name */
.gfl-name-fairy {
&.fairy-battle {
color: var(--gfl-sys-unit-fairy-battle);
text-shadow: 0 0 0.2rem var(--gfl-sys-unit-fairy-battle);
}
&.fairy-strategy {
color: var(--gfl-sys-unit-fairy-strategy);
text-shadow: 0 0 0.2rem var(--gfl-sys-unit-fairy-strategy);
}
}
/** GFL1 Equipment name */
.gfl-name-equip {
&.rarity-2 {
color: var(--gfl-sys-rarity-2star);
text-shadow: 0 0 0.2rem var(--gfl-sys-rarity-2star);
}
&.rarity-3 {
color: var(--gfl-sys-rarity-3star);
text-shadow: 0 0 0.2rem var(--gfl-sys-rarity-3star);
}
&.rarity-4 {
color: var(--gfl-sys-rarity-4star);
text-shadow: 0 0 0.2rem var(--gfl-sys-rarity-4star);
}
&.rarity-5 {
color: var(--gfl-sys-rarity-5star);
text-shadow: 0 0 0.2rem var(--gfl-sys-rarity-5star);
}
}
/* Equipment named card */
.equipmentnamedcard {
width: 5rem;
text-align: center;
display: inline-block;
margin-right: 1rem;
vertical-align: top;
}
.equipmentnamedcard .equipmentcard {
margin-left: 0.3125rem;
margin-right: 0.3125rem;
}
.equipmentnamedcard .equipname {
font-size: 0.9em;
}
.equipmentnamedcard .equipname small {
display: none;
}
/* Equipment cards */
.equipmentcard {
display: inline-block;
position: relative;
overflow: hidden;
background-color: var(--iopw-sys-palette-gray-20);
border: 2px solid var(--iopw-sys-palette-gray-80);
width: 4rem;
height: 3.75rem;
background-repeat: no-repeat;
background-size: auto 0.45rem, contain;
background-position: top right, top left;
&.rarity2 { background-image: url(/images/2/25/2Stars.png), url(/images/9/96/2starE.png); }
&.rarity3 { background-image: url(/images/d/dd/3Stars.png), url(/images/9/91/3starE.png); }
&.rarity4 { background-image: url(/images/4/41/4Stars.png), url(/images/2/2e/4starE.png); }
&.rarity5 { background-image: url(/images/8/81/5Stars.png), url(/images/d/d4/5starE.png); }
& .overlay-link {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
& .type {
position: absolute;
top: 0;
left: 0;
width: 1.6rem;
}
& .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*/
.mediawiki .thumb .thumbimage {
width: 100%;
height: 100%;
}
div.thumbinner {
border: 0;
background-color: rgba(255,255,255,0.25);
}
.layout-image {
display: block;
height: 100%;
width: 100%;
background-repeat: no-repeat;
}
.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 {
background-size: contain;
background-position-y: 0.8rem;
}
& .rarity-class {
position: absolute;
top: 0;
left: 0;
background-position: 0.075rem 0.075rem;
pointer-events: none;
}
& .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;
user-select: none;
}
& .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;
user-select: none;
}
&.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:auto;
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: 0.3125rem;
display: inline-block;
width: 3.125rem;
height: 3.125rem;
background-size: contain;
& img {
height: 100%;
width: 100%;
}
}
.gfl-item {
display: flex;
padding: 0.3125rem;
position: relative;
& h3 {
display: none;
}
& .container {
background-color: rgba(0, 0, 0, 0.5);
width: 21.25rem;
padding: 0.625rem 0.625rem 1.875rem 0.625rem;
}
& .item-background {
background-image: url("/images/thumb/7/72/BG_2star_S.png/60px-BG_2star_S.png");
background-size: cover;
padding: 0.3125rem;
float: left;
margin-right: 1.25rem;
width: 3.125rem;
height: 3.125rem;
& img {
height: 100%;
width: 100%;
}
}
& .item-name {
background: rgba(127, 127, 127, 0.4);
display: flex;
padding: 0.1rem 0.3125rem
}
& .item-desc {
border: 1px darkgrey solid;
width: 100%;
margin-bottom: 0.5rem;
padding: 0.5rem;
text-align: justify;
}
& .item-addon {
position: absolute;
left: 1rem;
bottom: 1rem;
}
}
.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 {
margin: 0;
float: right;
}
.floatleft {
margin: 0;
float: left;
}
/* 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;
}
.gfwiki-message-box + .gfwiki-message-box {
margin-top: 1rem;
}
.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 {
margin-top: 0;
}
.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;
filter: brightness(50%);
transition: 0.35s ease-in-out;
& .mw-file-element {
object-fit: cover;
width: 100%;
height: 100%;
}
}
& .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;
display: block;
}
.tooltiptext .tooltiptext-content {
margin: 17px;
margin-bottom: 20px;
display: block;
}
.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: 126px;
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;
bottom: -30px;
}
.pnc-index-entry .hero {
position: absolute;
}
.pnc-index-entry .front {
position: absolute;
bottom: -28px;
}
.pnc-index-entry .company {
position: absolute;
top: 12px;
left: 40px;
width: 120px;
opacity: 20%;
}
.pnc-index-entry .rarity {
position: relative;
top: 190px;
left: 4px;
}
.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;
}
/* More readable standard toggle button */
.mw-collapsible-toggle-default .mw-collapsible-text{
color: #3877df;
}