MediaWiki:Common.css
Замечание. Возможно, после сохранения вам придётся очистить кэш своего браузера, чтобы увидеть изменения.
@import '/wiki/index.php?title=MediaWiki:Legacy.css&ctype=text%2Fcss&action=raw';
@import '//use.fontawesome.com/releases/v5.13.0/css/all.css';
@font-face {
font-family: Cormorant SC;
font-weight: 700;
src: url(/static/fonts/Cormorant/CormorantSC-Bold.woff2) format("woff2"),
url(/static/fonts/Cormorant/CormorantSC-Bold.woff) format("woff");
}
@font-face {
font-family: Cormorant SC;
font-weight: 400;
src: url(/static/fonts/Cormorant/CormorantSC-Regular.woff2) format("woff2"),
url(/static/fonts/Cormorant/CormorantSC-Regular.woff) format("woff");
}
@font-face {
font-family: Futura PT;
font-weight: 400;
src: url(/static/fonts/FuturaPT/FuturaPT-Book.woff2) format("woff2"),
url(/static/fonts/FuturaPT/FuturaPT-Book.woff) format("woff");
}
@font-face {
font-family: Futura PT;
font-weight: 500;
src: url(/static/fonts/FuturaPT/FuturaPT-Demi.woff2) format("woff2"),
url(/static/fonts/FuturaPT/FuturaPT-Demi.woff) format("woff");
}
@font-face {
font-family: Futura PT;
font-weight: 600;
src: url(/static/fonts/FuturaPT/FuturaPT-Demi.woff2) format("woff2"),
url(/static/fonts/FuturaPT/FuturaPT-Demi.woff) format("woff");
}
@font-face {
font-family: FrizQuadrataC;
font-weight: 400;
font-style: normal;
src: url(/static/fonts/FrizQuadrataC/game.woff) format("woff"),
url(/static/fonts/FrizQuadrataC/game.woff2) format("woff2");
}
@font-face {
font-family: la-icons;
src: url(/static/fonts/icons/la-icons.eot?394b66a6ec503a2c070b8ca8227394dd?#iefix) format("embedded-opentype"),
url(/static/fonts/icons/la-icons.woff2?394b66a6ec503a2c070b8ca8227394dd) format("woff2"),
url(/static/fonts/icons/la-icons.woff?394b66a6ec503a2c070b8ca8227394dd) format("woff"),
url(/static/fonts/icons/la-icons.ttf?394b66a6ec503a2c070b8ca8227394dd) format("truetype"),
url(/static/fonts/icons/la-icons.svg?394b66a6ec503a2c070b8ca8227394dd#la-icons) format("svg");
}
i[class*=" icon-"]:before,
i[class^=icon-]:before {
font-family: la-icons !important;
font-style: normal;
font-variant: normal;
font-weight: 400 !important;
line-height: 1;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-archetype-assassin:before {
content:"\F101"
}
.icon-archetype-magician:before {
content:"\F102"
}
.icon-archetype-monk:before {
content:"\F103"
}
.icon-archetype-shooter:before {
content:"\F104"
}
.icon-archetype-warrior:before {
content:"\F105"
}
.icon-arrow-decor:before {
content:"\F106"
}
.icon-arrow:before {
content:"\F107"
}
.icon-check:before,
.inventory__results .success-message__icon:before {
content:"\F108"
}
.icon-class-arcana:before {
content:"\F109"
}
.icon-class-bard:before {
content:"\F10A"
}
.icon-class-battlemaster:before {
content:"\F10B"
}
.icon-class-berserker:before {
content:"\F10C"
}
.icon-class-blades:before {
content:"\F10D"
}
.icon-class-blaster:before {
content:"\F10E"
}
.icon-class-demonic:before {
content:"\F10F"
}
.icon-class-destroyer:before {
content:"\F110"
}
.icon-class-devilhunter:before {
content:"\F111"
}
.icon-class-fighter:before {
content:"\F112"
}
.icon-class-hawkeye:before {
content:"\F113"
}
.icon-class-hunter:before {
content:"\F114"
}
.icon-class-infighter:before {
content:"\F115"
}
.icon-class-lancemaster:before {
content:"\F116"
}
.icon-class-magician:before {
content:"\F117"
}
.icon-class-soulmaster:before {
content:"\F118"
}
.icon-class-summoner:before {
content:"\F119"
}
.icon-class-warlord:before {
content:"\F11A"
}
.icon-class-warrior:before {
content:"\F11B"
}
.icon-copy-past:before {
content:"\F11C"
}
.icon-cross:before {
content:"\F11D"
}
.icon-crystal:before {
content:"\F11E"
}
.icon-download:before {
content:"\F11F"
}
.icon-friend:before {
content:"\F120"
}
.icon-lock:before {
content:"\F121"
}
.icon-logo:before {
content:"\F122"
}
.icon-refresh:before {
content:"\F123"
}
.icon-search:before {
content:"\F124"
}
.icon-shopping-cart:before {
content:"\F125"
}
.icon-social-discord:before {
content:"\F126"
}
.icon-social-facebook:before {
content:"\F127"
}
.icon-social-forum:before {
content:"\F128"
}
.icon-social-instagram:before {
content:"\F129"
}
.icon-social-mail:before {
content:"\F12A"
}
.icon-social-odnoklassniki:before {
content:"\F12B"
}
.icon-social-reddit:before {
content:"\F12C"
}
.icon-social-steam-simple:before {
content:"\F12D"
}
.icon-social-steam:before {
content:"\F12E"
}
.icon-social-twitch:before {
content:"\F12F"
}
.icon-social-twitter:before {
content:"\F130"
}
.icon-social-vkontakte-clean:before {
content:"\F131"
}
.icon-social-vkontakte:before {
content:"\F132"
}
.icon-social-weibo:before {
content:"\F133"
}
.icon-social-youtube:before {
content:"\F134"
}
.icon-stopwatch:before {
content:"\F135"
}
.error__icon:before,
.icon-triangle:before {
content:"\F136"
}
.error__icon:after,
.icon-warning:before {
content:"\F137"
}
/* (begin) reset modules=skins.vector.styles */
@media screen {
body {
background-color: #000;
}
.mw-body {
border: 0;
}
#mw-panel .portal .body {
background-image: none;
}
#mw-page-base {
background-image: none;
background-color: transparent;
}
.mw-body,
.parsoid-body {
background-color: transparent;
}
}
/* (end) reset modules=skins.vector.styles */
* {
border: 0;
margin: 0;
outline: none;
padding: 0;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
*,
:after,
:before {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body,
html {
cursor: default;
height: 100%;
min-height: 100%;
width: 100%;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html {
background: #000;
}
body {
background: #000;
color: #9e9e9e;
display: none;
font: normal 14px/1.4 Futura PT, sans-serif;
overflow-y: scroll;
overflow-x: auto;
}
a {
color: inherit;
cursor: pointer;
outline: none;
text-decoration: underline;
-webkit-transition: all .1s linear;
transition: all .1s linear;
}
a:hover {
text-decoration: none;
}
a[href^=tel] {
color: inherit;
text-decoration: none;
}
a.new {
cursor: default;
text-decoration: none;
pointer-events: none;
}
b {
font-weight: 700;
}
strong {
color: #fff;
font-weight: normal;
}
img {
display: inline-block;
max-width: 100%;
vertical-align: top;
}
.center img {
display: block;
margin: 0 auto;
}
li,
ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td {
padding: 0;
vertical-align: top;
}
pre {
font: 14px/1.4 monospace;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}
input,
select,
textarea {
box-sizing: border-box;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
display: none;
}
input[type=search] {
-webkit-appearance: textfield;
}
button {
-webkit-appearance: none;
border: 0;
border-radius: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
::selection {
background: #666;
color: #fff;
text-shadow: none;
}
::-moz-selection {
background: #666;
color: #fff;
text-shadow: none;
}
#ca-talk,
#ca-watch,
#catlinks,
#contentSub,
#feedlinks,
#footer-icons,
#footer-info,
#left-navigation,
#mw-editpage-watch,
#mw-helplink,
#mw-indicator-mw-helplink,
#mw-navigation > h2,
#mw-head-base,
#mw-page-base,
#n-help-mediawiki,
#ooui-php-18.mw-hide-minor-edits,
#p-cactions > input,
#p-lang,
#p-logo,
#p-navigation,
#p-search,
#pt-mytalk,
#pt-watchlist,
#t-print,
#toc {
display: none !important;
}
.mw-helplink,
.mw-search-profile-tabs,
.suggestions,
.page-Служебная_Источники_книг,
.page-Служебная_Список_наблюдения,
.page-Обсуждение {
display: none !important;
}
body.preloader-active {
display: block;
overflow: hidden;
}
.preloader {
background-color: #000;
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 10000;
}
.preloader--hidden {
opacity: 0;
transition: opacity .4s, visibility .4s;
visibility: hidden;
}
.preloader__image {
height: 335px;
left: 50%;
opacity: 0;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 300px;
}
.preloader__image--0 {
animation: glow .25s linear forwards;
}
.preloader__image--1 {
animation: glow .25s linear .25s forwards;
}
.preloader__image--2 {
animation: glow .25s linear .5s forwards;
}
.preloader__image--3 {
animation: glow .25s linear .75s forwards;
}
.preloader__image--4 {
animation: glow .75s ease-in 1s alternate infinite;
}
@keyframes glow {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#footer {
line-height: 23px;
min-height: 240px;
padding: 60px 0 20px;
}
.footer__groups,
.footer__group,
.footer-social,
.footer-social a {
-webkit-box-align: center;
align-items: center;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
}
.footer__groups {
padding: 0 0 20px;
}
.footer__group {
height: 50px;
margin: 0 5px;
opacity: .4;
-webkit-transition: opacity .35s ease-out;
transition: opacity .35s ease-out;
}
a.footer__group:hover {
opacity: 1;
}
.footer__group.type-sg {
width: 88px;
}
.footer__group.type-mg {
width: 90px;
}
.footer__copyright {
color: #666;
margin: 0 auto;
max-width: 665px;
text-align: center;
}
.footer-social {
padding: 0 0 40px;
}
.footer-social a {
color: #888;
font-size: 30px;
height: 30px;
margin: 0 6px;
text-decoration: none;
width: 30px;
}
.footer-social a:hover {
color: #fff;
}
.footer-pegi {
border: 1px solid #666;
border-radius: 360px;
height: 50px;
margin: 0 10px;
padding: 2px;
width: 50px;
}
.footer-pegi span {
-webkit-box-align: center;
align-items: center;
background: #666;
border-radius: 360px;
color: #000;
display: -webkit-box;
display: flex;
font-size: 26px;
height: 44px;
-webkit-box-pack: end;
justify-content: flex-end;
width: 44px;
}
@media only screen and (min-width: 769px) {
#footer {
font-size: 18px;
}
.footer__group {
margin: 0 8px;
}
.footer__group.type-sg {
width: 147px;
}
.footer__group.type-mg {
width: 146px;
}
.footer-social a {
font-size: 50px;
height: 50px;
margin: 0 10px;
width: 50px;
}
}
#mw-navigation,
#mw-head,
#mw-panel,
#right-navigation {
display: -webkit-box;
display: flex;
}
#mw-navigation {
-webkit-box-align: center;
align-items: center;
background: #000;
height: 30px;
-webkit-box-pack: justify;
justify-content: space-between;
left: 0;
padding: 0 20px;
position: fixed;
text-transform: uppercase;
top: 0;
width: 100%;
z-index: 5;
}
#mw-navigation,
.user-edit #mw-head {
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
}
#mw-navigation h3,
#mw-navigation a {
color: #888;
display: block;
font-size: 11px;
font-weight: 500;
letter-spacing: .06em;
line-height: 14px;
margin-left: 19px;
text-decoration: none;
-webkit-transition: color .35s ease-out;
transition: color .35s ease-out;
}
#mw-navigation a:hover {
color: #fff;
}
#mw-panel a:first-child {
margin-left: 0;
}
#mw-navigation ul {
background: #000;
display: none;
padding: 10px 0 0;
position: absolute;
}
#mw-head ul {
right: -20px;
}
#mw-panel ul {
left: 10px;
}
#mw-navigation li a {
display: inline-block;
margin-left: 0;
padding: 10px 20px;
white-space: nowrap;
}
#p-cactions,
#p-personal,
#p-tb,
#p-views {
position: relative;
}
#p-cactions:hover ul,
#p-personal:hover ul,
#p-tb:hover ul,
#p-views:hover ul {
display: -webkit-box;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
}
#p-personal,
#p-cactions,
#p-tb,
#p-views {
display: none !important;
}
.user-edit #god-game,
.user-edit #god-support,
.user-edit #god-download {
display: none !important;
}
.user-edit #p-personal,
.user-edit #p-cactions,
.user-edit #p-tb,
.user-edit #p-views,
.user-edit .mw-search-profile-tabs {
display: block !important;
}
@media only screen and (min-width: 1012px) {
#mw-navigation {
padding: 0 40px;
}
}
@media (max-width: 768px) {
#mw-panel {
display: none;
}
}
.navigation {
height: 50px;
position: fixed;
top: 30px;
width: 100%;
z-index: 4;
}
.navigation__hamburger {
display: none;
}
.navigation__menu {
background-color: rgba(0,0,0,.6);
color: #fff;
display: -webkit-box;
display: flex;
font: 13px/24px Futura PT, sans-serif;
font-weight: 500;
-webkit-box-pack: center;
justify-content: center;
letter-spacing: .08em;
max-height: 50px;
overflow: hidden;
padding: 0 20px;
-webkit-transition: all .35s ease-out;
transition: all .35s ease-out;
width: 100%;
}
.navigation__menu:hover {
background-color: #000;
max-height: 700px;
-webkit-transition: all 1.35s ease-out;
transition: all 1.35s ease-out;
}
.navigation__menu:hover .navigation__menu-dropdown {
opacity: 1;
}
.navigation__menu-list {
display: -webkit-box;
display: flex;
-webkit-box-pack: justify;
justify-content: space-between;
max-width: 1012px;
width: 100%;
}
.navigation__menu-item {
position: relative;
}
.navigation__menu-item .icon {
display: none;
}
.navigation__menu-dot {
border: 1px solid hsla(0,0%,100%,.4);
height: 6px;
margin: 22px 0 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
width: 6px;
}
.navigation__menu-dot:last-child {
display: none;
}
.navigation__menu-link {
-webkit-box-align: center;
align-items: center;
border-bottom: 2px solid transparent;
color: #fff;
cursor: pointer;
display: -webkit-box;
display: flex;
margin: 12px 0;
text-decoration: none;
text-transform: uppercase;
-webkit-transition: border-color .35s ease-out;
transition: border-color .35s ease-out;
white-space: nowrap;
}
.navigation__menu-link:visited {
color: #fff;
}
.navigation__menu-link.active,
.navigation__menu-link:hover {
border-color: #c00;
}
.navigation__menu-dropdown {
margin: 0;
opacity: 0;
padding: 5px 0 10px;
-webkit-transition: opacity .35s ease-out .35s;
transition: opacity .35s ease-out .35s;
width: 10px;
}
.navigation__menu-dropdown-link {
background: none;
color: #9e9e9e;
cursor: pointer;
display: block;
text-decoration: none;
text-transform: uppercase;
max-width: 100%;
padding: 0 0 5px;
-webkit-transition: color .35s ease-out;
transition: color .35s ease-out;
white-space: nowrap;
}
.navigation__menu-dropdown-link:hover {
color: #fff;
}
.header {
-webkit-box-align: center;
align-items: center;
background: url(/wiki/images/b/b2/Header_bg.jpg) center/auto 100% no-repeat;
display: -webkit-box;
display: flex;
height: 290px;
-webkit-box-pack: center;
justify-content: center;
margin: 30px 0 0;
overflow: hidden;
padding: 50px 0 0;
position: relative;
width: 100%;
}
.header:after {
background-image: linear-gradient(0deg, #000 0, transparent 35%);
bottom: 0;
content: "";
height: 100%;
left: 0;
position: absolute;
width: 100%;
}
.logo {
background: url(/wiki/images/c/c9/Logo.png) center no-repeat;
display: block;
height: 180px;
width: 490px;
z-index: 2;
}
@media (max-width: 1011px) {
.navigation__menu {
font-size: 10px;
}
.navigation__menu-list {
max-width: none;
}
.header {
height: 242px;
}
.logo {
background-size: auto 92px;
height: 144px;
width: 392px;
}
}
@media (max-width: 768px) {
.navigation {
background-color: rgba(0,0,0,.8);
}
.navigation.type-opened .navigation__mobile {
opacity: 1;
visibility: visible;
}
.navigation__mobile {
background: url(/wiki/images/8/81/Navigation-mobile-bg.jpg) no-repeat;
background-size: cover;
background-position: 50%;
height: calc(100vh - 30px);
opacity: 0;
overflow: auto;
-webkit-transition: opacity .35s ease-out;
transition: opacity .35s ease-out;
visibility: hidden;
}
.navigation__hamburger {
background: none;
cursor: pointer;
display: block;
height: 28px;
left: 18px;
outline: none;
position: absolute;
top: 10px;
width: 28px;
z-index: 2;
}
.navigation__hamburger:after,
.navigation__hamburger:before {
background-color: #eee;
content: "";
display: block;
height: 2px;
left: 0;
position: absolute;
top: 13px;
-webkit-transition: -webkit-transform .35s ease-out;
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
transition: transform .35s ease-out, -webkit-transform .35s ease-out;
width: 28px;
}
.navigation__hamburger:before {
-webkit-transform: translateY(-4px);
transform: translateY(-4px);
}
.navigation__hamburger:after {
-webkit-transform: translateY(4px);
transform: translateY(4px);
}
.navigation__hamburger.type-opened:before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.navigation__hamburger.type-opened:after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.navigation__menu {
font-size: 18px;
line-height: 30px;
overflow-y: auto;
-webkit-transform: none;
transform: none;
}
.navigation__menu,
.navigation__menu:hover {
background-color: transparent;
max-height: none;
}
.navigation__menu-list {
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin: 122px 0 24px;
max-width: none;
}
.navigation__menu-item {
margin: 0 0 35px;
text-align: center;
width: 100%;
}
.navigation__menu-item .icon {
display: inline-block;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.navigation__menu-item.type-opened .icon {
-webkit-transform: rotate(-90deg) translateY(5px) translateX(2px);
transform: rotate(-90deg) translateY(5px) translateX(2px);
}
.navigation__menu-item.type-opened .navigation__menu-dropdown {
display: block;
}
.navigation__menu-dot {
display: none;
}
.navigation__menu-link {
display: inline-block;
height: auto;
margin: 0;
padding: 0;
}
.navigation__menu-dropdown {
display: none;
margin: auto;
opacity: 1;
padding: 10px 0 0;
width: 100%;
}
.header {
height: 194px;
}
.logo {
background-size: auto 28px;
height: 50px;
position: fixed;
top: 30px;
width: 114px;
z-index: 5;
}
}
#content {
background: #1c1c1c;
font-size: 20px;
line-height: 1.4;
margin: 0 auto;
max-width: 1012px;
min-height: 300px;
overflow: hidden;
padding: 24px 34px;
position: relative;
}
#firstHeading {
background: transparent;
border: 0;
color: #fff;
font-family: Cormorant SC;
font-size: 40px;
font-weight: 400;
line-height: 1.4;
padding: 8px 0 32px;
text-align: center;
word-spacing: .02em;
}
#content h2,
#content h3,
#content h4,
#content h5,
#content h6 {
border: 0 !important;
color: #fff;
}
#content h2 {
font-family: Cormorant SC;
font-size: 30px;
font-weight: 400;
margin: 72px 0 32px;
text-align: center;
word-spacing: .02em;
}
#content h2,
#content h3,
#content h4,
#content h5 {
line-height: 1.4;
}
#content h3,
#content h4,
#content h5 {
font-size: 18px;
font-weight: 500;
}
#content h6 {
font-size: 16px;
font-family: Futura PT;
line-height: 22px;
font-weight: 500;
}
#content p {
margin: 0 0 24px;
}
#content table {
font-size: 18px;
margin-bottom: 80px;
width: 100%;
}
#content table tr:nth-child(2n) {
background-color: hsla(0,0%,100%,.1);
}
#content table td,
#content table th {
padding: 10px 20px;
text-align: left;
}
#content table th {
border-bottom: 1px solid #fff;
color: #fff;
}
.jquery-tablesorter th.headerSort,
.jquery-tablesorter th.headerSortUp,
.jquery-tablesorter th.headerSortDown {
background-image: none;
}
.jquery-tablesorter th.headerSort.without-sort {
pointer-events: none;
}
.jquery-tablesorter th.headerSort:not(.without-sort):after {
border: 5px solid transparent;
border-top-color: #9e9e9e;
content: "";
display: inline-block;
height: 1px;
margin-left: 8px;
position: relative;
top: 3px;
width: 1px;
}
.jquery-tablesorter th.headerSort.headerSortUp:after {
border-top-color: #c00;
top: -4px;
transform: rotate(180deg);
}
.jquery-tablesorter th.headerSort.headerSortDown:after {
border-top-color: #c00;
}
.table_middle td {
vertical-align: middle;
}
#content ol,
#content ul {
list-style: none;
margin-bottom: 24px;
}
#content ol li,
#content ul li {
margin-bottom: 10px;
padding: 0 0 0 30px;
position: relative;
}
#content ol li:before,
#content ul li:before {
color: #c00;
display: inline-block;
left: 0;
position: absolute;
width: 30px;
}
#content ul li:before {
content: "\2022";
}
#content ol {
counter-reset: li;
}
#content ol li {
counter-increment: li;
}
#content ol li:before {
content: counter(li) ".";
}
#content ol ol,
#content ol ul,
#content ul ol,
#content ul ul {
margin: 0 0 0 30px;
}
#content iframe,
#content img,
#content video {
max-width: 100%;
}
#content img {
height: auto !important;
}
@media (max-width: 1011px) {
#content {
max-width: 752px;
padding: 24px 28px;
}
#bodyContent {
margin: 0 auto;
width: 624px;
}
#firstHeading {
margin: 0 auto;
width: 624px;
}
}
@media (max-width: 768px) {
#content {
font-size: 16px;
line-height: 20px;
max-width: 360px;
padding: 24px 28px;
}
#bodyContent {
margin: 0 auto;
width: 304px;
}
#firstHeading {
font-size: 32px;
line-height: 1.4;
margin: 0 auto;
padding: 8px 0 24px;
width: 304px;
}
#content p {
margin: 0 0 20px;
}
#content table {
font-size: 16px;
}
#content table tr {
display: block;
padding: 10px 0;
}
#content table td,
#content table th {
display: block;
padding: 5px 15px;
}
#content table th {
display: none;
}
}
button,
.button {
-webkit-box-align: center;
align-items: center;
background: none;
color: #fff;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
font-family: Futura PT;
font-size: 14px;
height: 40px;
-webkit-justify-content: center;
justify-content: center;
line-height: 24px;
line-height: 1;
min-width: 260px;
outline: none;
position: relative;
text-align: center;
text-decoration: none;
text-transform: uppercase;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
white-space: nowrap;
}
button,
.button:not(.button--disabled) {
cursor: pointer;
}
button span:nth-child(2),
.button span {
border-bottom: 2px solid transparent;
border-top: 2px solid transparent;
display: block;
height: 38px;
line-height: 34px;
margin: 0 -15px;
position: relative;
width: calc(100% - 80px);
z-index: 2;
}
button:after,
button:before,
.button:after,
.button:before {
content: "";
display: block;
height: 40px;
width: 40px;
}
button:after,
.button:after {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
button span:nth-child(2),
.button--base span {
background: #c00;
}
button:after,
button:before,
.button--base:after,
.button--base:before {
background: url(/images/button-decor-base.svg) 50% no-repeat;
}
button:hover span:nth-child(2),
.button--base:hover span {
background: transparent;
border-bottom-color: #c00;
border-top-color: #c00;
}
button:hover:after,
button:hover:before,
.button--base:hover:after,
.button--base:hover:before {
background: url(/images/button-decor-inverse.svg) 50% no-repeat;
}
.button--inversed span {
background: transparent;
border-bottom-color: #c00;
border-top-color: #c00;
}
.button--inversed:after,
.button--inversed:before {
background: url(/images/button-decor-inverse.svg) 50% no-repeat;
}
.button--inversed:hover span {
background: #c00;
border-bottom-color: transparent;
border-top-color: transparent;
}
.button--inversed:hover:after,
.button--inversed:hover:before {
background: url(/images/button-decor-base.svg) 50% no-repeat;
}
.button--disabled span {
background: #888;
}
.button--disabled:after,
.button--disabled:before {
background: url(/images/button-decor-disable.svg) 50% no-repeat;
}
.button--disabled:hover span {
background: #888;
border-bottom-color: #888;
border-top-color: #888;
}
.button--disabled:hover:after,
.button--disabled:hover:before {
background: url(/images/button-decor-disable.svg) 50% no-repeat;
}
.button--small {
font-family: Futura PT;
font-size: 11px;
height: 24px;
line-height: 14px;
min-width: auto;
}
.button--small span {
border-bottom-width: 1px;
border-top-width: 1px;
height: 22px;
letter-spacing: 1px;
line-height: 20px;
margin: 0 -10px;
width: calc(100% - 48px);
}
.button--small:after,
.button--small:before {
height: 24px;
width: 24px;
}
.button--centered {
margin: 20px auto;
}
.button-big {
-webkit-box-align: center;
align-items: center;
background: none;
color: #fff;
cursor: pointer;
display: -webkit-box;
display: flex;
font-family: Cormorant SC;
font-size: 22px;
height: 130px;
-webkit-box-pack: center;
justify-content: center;
letter-spacing: .08em;
position: relative;
width: 430px;
}
.button-big:after,
.button-big:before {
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
content: "";
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
-webkit-transition: opacity .5s ease-out;
transition: opacity .5s ease-out;
width: 100%;
}
.button-big:before {
opacity: 0;
background-image: url(/images/button_big_hover.png);
}
.button-big:after {
background-image: url(/images/button_big.png);
}
.button-big:hover:before {
opacity: 1;
}
.button-big:hover:after {
opacity: 0;
}
.button-big span {
z-index: 1;
}
.button-link a {
text-decoration: none;
}
.button-banners {
display: -webkit-box;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: justify;
justify-content: space-between;
margin: 0 0 8px;
}
.button-banner {
height: 180px;
margin: 0 0 16px;
overflow: hidden;
width: 304px;
}
.button-banner a {
-webkit-box-align: end;
align-items: flex-end;
display: -webkit-box;
display: flex;
height: 100%;
padding: 20px;
position: relative;
text-decoration: none;
width: 100%;
}
.button-banner a:after {
background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, transparent), to(rgba(0, 0, 0, .7)));
background: linear-gradient(180deg, transparent 20%, rgba(0, 0, 0, .7));
content: "";
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
#content .button-banner img {
height: 100% !important;
}
.button-banner img {
left: 0;
-o-object-fit: cover;
object-fit: cover;
position: absolute;
top: 0;
-webkit-transition: all .2s ease-out;
transition: all .2s ease-out;
width: 100%;
}
.button-banner:hover img {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
.button-banner span {
color: #fff;
font-size: 24px;
font-family: Futura PT;
line-height: 30px;
z-index: 2;
}
form .input,
form input[type=search],
form input[type=text] {
background: none;
border: 0;
border-bottom: 1px solid hsla(0,0%,100%,.5);
caret-color: #c00;
color: #fff;
font-family: Futura PT;
font-size: 18px;
line-height: 30px;
line-height: 2.2;
-webkit-transition: all .2s;
transition: all .2s;
}
@media (max-width: 1011px) {
form .input,
form input[type=search],
form input[type=text] {
font-size: 16px;
line-height: 22px;
}
}
form .input::-webkit-input-placeholder,
form input[type=search]::-webkit-input-placeholder,
form input[type=text]::-webkit-input-placeholder {
color: hsla(0,0%,100%,.5);
}
form .input::-moz-placeholder,
form input[type=search]::-moz-placeholder,
form input[type=text]::-moz-placeholder {
color: hsla(0,0%,100%,.5);
}
form .input:-ms-input-placeholder,
form input[type=search]:-ms-input-placeholder,
form input[type=text]:-ms-input-placeholder {
color: hsla(0,0%,100%,.5);
}
form .input::-ms-input-placeholder,
form input[type=search]::-ms-input-placeholder,
form input[type=text]::-ms-input-placeholder {
color: hsla(0,0%,100%,.5);
}
form .input::placeholder,
form input[type=search]::placeholder,
form input[type=text]::placeholder {
color: hsla(0,0%,100%,.5);
}
form .input:focus,
form .input:hover,
form input[type=search]:focus,
form input[type=search]:hover,
form input[type=text]:focus,
form input[type=text]:hover {
border-bottom: 1px solid #fff;
outline: none;
}
form .input:focus::-webkit-input-placeholder,
form .input:hover::-webkit-input-placeholder,
form input[type=search]:focus::-webkit-input-placeholder,
form input[type=search]:hover::-webkit-input-placeholder,
form input[type=text]:focus::-webkit-input-placeholder,
form input[type=text]:hover::-webkit-input-placeholder {
color: #fff;
}
form .input:focus::-moz-placeholder,
form .input:hover::-moz-placeholder,
form input[type=search]:focus::-moz-placeholder,
form input[type=search]:hover::-moz-placeholder,
form input[type=text]:focus::-moz-placeholder,
form input[type=text]:hover::-moz-placeholder {
color: #fff;
}
form .input:focus:-ms-input-placeholder,
form .input:hover:-ms-input-placeholder,
form input[type=search]:focus:-ms-input-placeholder,
form input[type=search]:hover:-ms-input-placeholder,
form input[type=text]:focus:-ms-input-placeholder,
form input[type=text]:hover:-ms-input-placeholder {
color: #fff;
}
form .input:focus::-ms-input-placeholder,
form .input:hover::-ms-input-placeholder,
form input[type=search]:focus::-ms-input-placeholder,
form input[type=search]:hover::-ms-input-placeholder,
form input[type=text]:focus::-ms-input-placeholder,
form input[type=text]:hover::-ms-input-placeholder {
color:#fff;
}
form .input:focus::placeholder,
form .input:hover::placeholder,
form input[type=search]:focus::placeholder,
form input[type=search]:hover::placeholder,
form input[type=text]:focus::placeholder,
form input[type=text]:hover::placeholder {
color: #fff;
}
form .input--error {
border-bottom: 1px solid #c00;
}
form .error {
color: #c00;
font-family: Futura PT;
font-size: 14px;
line-height: 24px;
line-height: 1;
}
form [type=radio]:checked,
form [type=radio]:not(:checked) {
position: absolute;
left: -9999px;
}
form [type=radio]:checked + label,
form [type=radio]:not(:checked) + label {
color: #fff;
cursor: pointer;
display: inline-block;
line-height: 20px;
padding-left: 28px;
position: relative;
}
form [type=radio]:checked+label:after,
form [type=radio]:checked+label:before,
form [type=radio]:not(:checked) + label:after,
form [type=radio]:not(:checked) + label:before {
border-radius: 50%;
content: "";
position: absolute;
-webkit-transition: all .2s ease;
transition: all .2s ease;
}
form [type=radio]:checked+label:before,
form [type=radio]:not(:checked) + label:before {
background: none;
border: 1px solid #888;
height: 18px;
left: 0;
top: 0;
width: 18px;
}
form [type=radio]:checked + label:after,
form [type=radio]:not(:checked) + label:after {
background: #c00;
height: 10px;
left: 4px;
top: 4px;
width: 10px;
}
form [type=radio]:checked + label:before {
border-color: #c00;
}
form [type=radio]:checked + label:after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
form [type=radio]:not(:checked) + label:hover:before {
border-color: #fff;
}
form [type=radio]:not(:checked) + label:after {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
.spoilers {
border-bottom: 1px solid hsla(0,0%,100%,.2);
margin: 32px 0;
}
.spoiler {
border-top: 1px solid hsla(0,0%,100%,.2);
}
.spoiler__title {
color: #fff;
cursor: pointer;
font-weight: 400;
margin-bottom: 10px;
padding: 20px 0 10px 45px;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.spoiler__content,
.spoiler__title {
font-family: Futura PT;
font-size: 18px;
line-height: 22px;
}
.spoiler__content {
box-sizing: content-box;
height: 0;
opacity: 0;
overflow: hidden;
padding-left: 45px;
padding-right: 45px;
-webkit-transition: all .15s linear;
transition: all .15s linear;
}
.spoiler.type-opened .spoiler__content {
height: auto;
padding-bottom: 20px;
opacity: 1;
}
.spoiler__marker {
border: 1px solid #c00;
height: 18px;
left: 10px;
position: absolute;
top: 15px;
-webkit-transform: rotate(45deg) translateY(50%);
transform: rotate(45deg) translateY(50%);
-webkit-transition: all .15s ease-out;
transition: all .15s ease-out;
width: 18px;
}
.spoiler__marker-symbol {
height: 100%;
position: relative;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
width: 100%;
}
.spoiler__marker-symbol:after,
.spoiler__marker-symbol:before {
background-color: #c00;
content: "";
left: 50%;
position: absolute;
top: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
-webkit-transition: -webkit-transform .35s ease-out;
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
transition: transform .35s ease-out,-webkit-transform .35s ease-out;
z-index: 1;
}
.spoiler__marker-symbol:before {
height: 2px;
width: 10px;
}
.spoiler__marker-symbol:after {
height: 10px;
width: 2px;
}
.spoiler.type-opened .spoiler__marker {
background: #c00;
}
.spoiler.type-opened .spoiler__marker-symbol:after,
.spoiler.type-opened .spoiler__marker-symbol:before {
background-color: #fff;
-webkit-transition: -webkit-transform .35s ease-out;
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
transition: transform .35s ease-out,-webkit-transform .35s ease-out;
}
.spoiler.type-opened .spoiler__marker-symbol:after {
-webkit-transform: translate(-50%,-50%) rotate(90deg);
transform: translate(-50%,-50%) rotate(90deg);
}
.spoiler:hover .spoiler__marker {
background: #c00;
}
.spoiler:hover .spoiler__marker-symbol:after,
.spoiler:hover .spoiler__marker-symbol:before {
background-color: #fff;
-webkit-transition: -webkit-transform .35s ease-out;
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
transition: transform .35s ease-out,-webkit-transform .35s ease-out;
}
.controller-close {
background-color: transparent;
border: 2px solid #c00;
border-radius: 50%;
cursor: pointer;
height: 30px;
position: relative;
-webkit-transition: background-color .35s ease-out;
transition: background-color .35s ease-out;
width: 30px;
}
.controller-close:after,
.controller-close:before {
background: #fff;
content: "";
height: 14px;
left: 50%;
margin: -7px 0 0 -1px;
position: absolute;
top: 50%;
width: 2px;
}
.controller-close:before {
-webkit-transform:rotate(45deg);
transform: rotate(45deg);
}
.controller-close:after {
-webkit-transform:rotate(-45deg);
transform: rotate(-45deg);
}
.controller-close:hover {
background-color: #c00;
}
@media only screen and (min-width: 768px) {
.controller-close {
height: 48px;
width: 48px;
}
.controller-close:after,
.controller-close:before {
height: 24px;
margin: -12px 0 0 -1px;
}
}
.controller-arrow {
background: none;
border: none;
color: #fff;
cursor: pointer;
font-size: 45px;
margin-top: -24px;
position: absolute;
text-shadow: 0 2px 3px rgba(0,0,0,.6);
top: 50%;
-webkit-transition: color .35s ease-out;
transition: color .35s ease-out;
z-index: 2;
}
.controller-arrow:hover {
color: hsla(0,0%,100%,.4);
}
.controller-arrow .icon-arrow-decor,
.controller-arrow .icon-arrow-decor:before {
display: block;
}
.controller-arrow--prev {
left: 18px;
}
.controller-arrow--prev .icon-arrow-decor {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.controller-arrow--next {
right: 18px;
}
.controller-arrow--next .icon-arrow-decor {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.controller-arrow--black {
color: #000;
}
.controller-arrow--black:hover {
color: rgba(0,0,0,.4);
}
@media only screen and (min-width: 768px) {
.controller-arrow--prev {
left: 40px;
}
.controller-arrow--next {
right: 40px;
}
}
body.popup-opened {
overflow: hidden !important;
}
.popup {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.popup .popup__overlay {
padding: 100px 60px;
}
.popup__overlay {
-webkit-box-align: center;
align-items: center;
background-color: rgba(0,0,0,0.8);
bottom: 0;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
left: 0;
overflow-y: scroll;
overflow-x: hidden;
position: fixed;
right: 0;
top: 0;
z-index: 5;
}
.popup__wrap {
cursor: auto;
max-width: 1012px;
position: relative;
-webkit-transform: translateX(9px);
transform: translateX(9px);
width: 100%;
}
.popup__closer {
position: absolute;
right: -50px;
top: -50px;
}
.popup__arrow--prev {
left: -60px;
}
.popup__arrow--next {
right: -60px;
}
@media (max-width: 768px) {
.popup__wrap {
-webkit-transform: none;
transform: none;
}
}
@media (max-height: 700px) {
.popup__closer {
top: 0px;
}
}
.popup__video-wrapper {
max-width: 1012px;
position: relative;
width: 100%;
}
.popup__video-height {
padding-top: 56.25%;
position: relative;
width: 100%;
}
.popup__video-iframe {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.error {
color: #fff;
font-family: Futura PT;
font-size: 18px;
line-height: 1.4;
padding: 20px 10px;
text-align: center;
}
.error__icon {
display: inline-block;
position: relative;
}
.error__icon:after,
.error__icon:before {
font-family: la-icons!important;
font-style: normal!important;
text-transform: none!important;
font-variant: normal!important;
font-weight: 400!important;
line-height: 1;
speak: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.error__icon:before {
color: #c00;
font-size: 44px;
height: 44px;
line-height: 44px;
}
.error__icon:after {
color: #fff;
font-size: 18px;
height: 18px;
left: 13px;
line-height: 1;
position: absolute;
speak: none;
top: 14px;
font-family: la-icons!important;
font-style: normal;
text-transform: none;
font-variant: normal;
font-weight: 400!important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.error-page-active #content {
display: none !important;
}
.error-page-active .header,
.error-page-active .header:after {
background: none;
position: absolute;
}
.error-page {
background-color: #fff;
background-image: url(/wiki/images/4/48/Error-page-bg.jpg);
background-position: bottom;
background-repeat: no-repeat;
background-size: cover;
}
.error-page__wrap {
-webkit-box-align: center;
align-items: center;
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-pack: end;
justify-content: flex-end;
margin: 0 auto;
max-width: 1012px;
padding: 180px 0 235px;
position: relative;
text-align: center;
}
.error-page__wrap:after {
background-image: url(/wiki/images/2/23/Error-page-art.png);
background-position: bottom;
background-repeat: no-repeat;
background-size: cover;
bottom: 0;
content: "";
display: block;
height: 526px;
position: absolute;
width: 100%;
z-index: 2;
}
.error-page__num {
background: -webkit-gradient(linear,left top,left bottom,from(#eee),to(#666));
background: linear-gradient(180deg,#eee,#666);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: #eee;
font-family: Cormorant SC;
font-size: 500px;
line-height: 70px;
line-height: 1;
letter-spacing: .04em;
margin: -15px 0 0;
word-spacing: .02em;
z-index: 1;
}
.error-page__title {
color: #fff;
font-family: Futura PT;
font-size: 24px;
font-weight: 400;
line-height: 30px;
margin-bottom: 10px;
z-index: 2;
}
.error-page__text {
color: #fff;
font-family: Futura PT;
font-size: 18px;
line-height: 30px;
z-index: 2;
}
.error-page__text a {
text-decoration: underline;
}
.error-page__text a:hover {
text-decoration: none;
}
@media only screen and (min-width: 769px) {
.error-page-active .header {
display: none;
}
}
@media (max-width: 1011px) {
.error-page__wrap:after {
height: 425px;
}
.error-page__num {
font-size: 400px;
margin: -15px 0 0;
}
}
@media (max-width: 768px) {
.error-page__wrap {
-webkit-box-pack: center;
justify-content: center;
min-height: 70vh;
padding: 120px 0 70px;
}
.error-page__wrap:after {
display: none;
}
.error-page__num {
font-size: 110px;
margin: 0 0 25px;
-webkit-box-ordinal-group: 2;
order: 1;
}
.error-page__title {
-webkit-box-ordinal-group: 3;
order: 2;
}
.error-page__text {
-webkit-box-ordinal-group: 4;
order: 3;
}
}
#searchText {
margin: 32px auto 0;
position: relative;
width: 304px;
}
#searchText input {
font-size: 18px;
line-height: 30px;
padding: 5px 0 5px 25px;
width: 100%;
}
#searchText .oo-ui-icon-search {
left: 0;
line-height: 41px !important;
position: absolute;
}
#searchText .oo-ui-icon-search:before {
color: #fff;
content: "\F124";
font-family: la-icons !important;
font-size: 16px;
}
#search .oo-ui-actionFieldLayout-button {
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
}
#search .oo-ui-actionFieldLayout-button button {
margin: 65px 0 0;
}
.mw-search-nonefound {
border-top: 1px solid #c00;
color: #c00;
display: block;
font-size: 14px;
line-height: 1;
margin: 0 auto 15px;
min-height: 50px;
padding: 5px 10px 20px !important;
position: relative;
text-align: center;
top: -1px;
width: 304px;
}
.mw-search-nonefound + button {
margin-top: 0 !important;
}
.mw-search-createlink + .mw-search-nonefound,
.searchresults .searchresult,
.searchresults .mw-search-result-data {
display: none;
}
.results-info {
-webkit-box-align: center;
align-items: center;
display: -webkit-box;
display: flex;
margin: 60px 0 0;
}
.results-info:after,
.results-info:before {
background: hsla(0, 0%, 100%, .2);
content: "";
display: block;
height: 2px;
width: 100%;
}
.results-info span {
margin: 0 30px;
text-align: center;
width: 100%;
}
.mw-search-results div {
display: inline-block;
}
ul + .mw-search-visualclear:nth-last-of-type(1) {
background: hsla(0, 0%, 100%, .2);
height: 2px;
margin: 0 0 20px;
width: 100%;
}
.mw-search-pager-bottom {
color: #666;
text-align: center;
}
.mw-search-pager-bottom a {
color: #fff;
text-decoration: none;
}
.mw-search-pager-bottom a:hover {
color: #c00;
}
#simpleSearch {
-webkit-box-align: center;
align-items: center;
display: -webkit-box;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin: 32px auto 40px;
max-width: 624px;
position: relative;
padding: 0 0 0 30px;
}
@media (max-width: 768px) {
#simpleSearch {
padding: 0;
}
}
#searchInput {
font-size: 18px;
line-height: 30px;
margin: 0 0 24px;
padding: 5px 0 5px 25px;
width: 304px;
}
#searchButton {
background: transparent;
color: transparent;
cursor: pointer;
height: 100%;
position: absolute;
width: 100%;
}
.search-form__button {
margin: 0 auto 24px;
}
.search-form__icon {
color: #fff;
font-size: 16px;
line-height: 42px !important;
position: absolute;
top: 0;
}
/* (begin) game wiki */
@media (width: 1012px) {
* {
transition: none !important;
}
.user-anon .navigation {
top: 0;
}
.user-anon #mw-navigation,
.user-anon #footer {
display: none;
}
.header {
height: 242px;
margin: 0;
}
.logo {
background-size: auto 92px;
height: 144px;
width: 392px;
}
}
/* (end) game wiki */
.web-iframe .header,
.web-iframe #mw-navigation,
.web-iframe .navigation,
.web-iframe #footer,
.web-iframe #firstHeading {
display: none !important;
}
.web-iframe {
background: none;
overflow: hidden;
}
.web-iframe #content {
background: none;
margin: 0;
max-width: 100%;
overflow: visible;
padding: 0;
}
@media (max-width: 1011px) {
.web-iframe #content {
padding: 0;
}
.web-iframe #bodyContent,
.web-iframe #firstHeading {
margin: 0;
width: 100%;
}
}
@media (max-width: 768px) {
.web-iframe #content {
padding: 0;
}
.web-iframe #bodyContent,
.web-iframe #firstHeading {
margin: 0;
width: 100%;
}
}
.keyboard {
border: 1px solid #666;
border-radius: 5px;
display: inline-block;
font-size: 16px;
margin: 4px 5px 2px;
min-width: 30px;
padding: 1px 5px 0;
text-align: center;
white-space: nowrap;
}
.button-box {
display: -webkit-box;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
justify-content: space-evenly;
margin: 32px 0;
}
.button-box a {
text-decoration: none;
}
.button-box__item {
width: 260px;
}
.text_center {
text-align: center;
}
.flex-group {
display: -webkit-box;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: justify;
justify-content: space-between;
}
.flex-group__item {
width: 304px;
}
.flex_center {
-webkit-box-align: center;
align-items: center;
display: -webkit-box;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
justify-content: center;
}
.flex_column {
-webkit-flex-direction: column;
flex-direction: column;
}
.full-box {
position: relative;
right: 34px;
width: 1012px;
}
.full-box iframe {
height: 569px;
width: 100%;
}
@media (max-width: 1011px) {
.full-box {
right: 64px;
width: 752px;
}
.full-box iframe {
height: 423px;
width: 100%;
}
}
@media (max-width: 768px) {
.full-box {
right: 28px;
width: 360px;
}
.full-box iframe {
height: 202px;
width: 100%;
}
}
.rarity-common .item__header,
.rarity-common .infobox__header,
.rarity-common .infobox__item__type {
color: #fbfbfb;
}
.rarity-uncommon .item__header,
.rarity-uncommon .infobox__header,
.rarity-uncommon .infobox__item__type {
color: #8cf801;
}
.rarity-rare .item__header,
.rarity-rare .infobox__header,
.rarity-rare .infobox__item__type {
color: #00aaf2;
}
.rarity-epic .item__header,
.rarity-epic .infobox__header,
.rarity-epic .infobox__item__type {
color: #c841f4;
}
.rarity-legendary .item__header,
.rarity-legendary .infobox__header,
.rarity-legendary .infobox__item__type {
color: #f18d00;
}
.rarity-relic .item__header,
.rarity-relic .infobox__header,
.rarity-relic .infobox__item__type {
color: #f95d00;
}
.rarity-common .infobox__item {
background-image: radial-gradient(ellipse at bottom,hsla(0,0%,98.4%,.4) 0,hsla(0,0%,98.4%,0) 70%);
}
.rarity-uncommon .infobox__item {
background-image: radial-gradient(ellipse at bottom,rgba(140,248,1,.4) 0,rgba(140,248,1,0) 70%);
}
.rarity-rare .infobox__item {
background-image: radial-gradient(ellipse at bottom,rgba(0,170,242,.4) 0,rgba(0,170,242,0) 70%);
}
.rarity-epic .infobox__item {
background-image: radial-gradient(ellipse at bottom,rgba(200,65,244,.4) 0,rgba(200,65,244,0) 70%);
}
.rarity-legendary .infobox__item {
background-image: radial-gradient(ellipse at bottom,rgba(241,141,0,.4) 0,rgba(241,141,0,0) 70%);
}
.rarity-relic .infobox__item {
background-image: radial-gradient(ellipse at bottom,rgba(249,93,0,.4) 0,rgba(249,93,0,0) 70%);
}
.infobox {
background: #262626;
color: #fbfbfb;
font-family: FrizQuadrataC;
font-size: 14px;
margin: 0 16px 16px 0;
width: 304px;
}
.infobox__wrap {
padding: 0 10px;
}
.infobox__header {
-webkit-box-align: center;
align-items: center;
background: #303030;
font-size: 17px;
-webkit-box-pack: center;
justify-content: center;
padding: 5px;
text-align: center;
text-shadow: 0 0 2px #000;
width: 100%;
}
.infobox__hr {
background: #1c1c1c;
height: 1px;
}
.infobox__header,
.infobox__item {
display: -webkit-box;
display: flex;
}
.infobox__item {
background-position: -50px 0;
background-repeat: no-repeat;
height: 70px;
margin: 5px 0 15px;
text-shadow: 0 0 2px #000;
}
.infobox__item__img {
-webkit-box-align: end;
align-items: flex-end;
display: -webkit-box;
display: flex;
height: 100%;
margin-right: 10px;
width: 64px;
}
.infobox__item__img img {
height: auto;
}
.infobox__item__info {
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
justify-content: space-around;
}
.infobox__info__level {
color: #a9a9a9;
margin-bottom: 15px;
text-align: right;
}
.infobox__info__level span {
color: #f5f4cf;
}
.infobox__info__condition {
color: #fbfbfb;
margin-bottom: 17px;
}
.infobox__info__description {
color: #dfc578;
margin-bottom: 10px;
}
.infobox__info__warning {
color: #f42c2c;
margin: 17px 0 10px;
}
.itemdic .infobox__info__warning {
color: #fff;
}
.infobox__info__demand {
margin-bottom: 15px;
}
.infobox__info__demand span {
color: #a9a9a9;
}
.infobox__filter {
color: #a9a9a9;
margin-bottom: 15px;
}
.infobox__filter span {
-webkit-box-align: center;
align-items: center;
background: #303030;
border-radius: 2px;
color: #fff;
cursor: pointer;
display: -webkit-inline-box;
display: inline-flex;
height: 24px;
-webkit-justify-content: center;
justify-content: center;
margin: 0 2px;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 24px;
}
.infobox__filter span:first-child {
margin-left: 5px;
}
.infobox__filter span:hover,
.infobox__filter span.type-active {
background: #c00;
}
.filter-hide {
display: none;
}
.infobox_type_mod .infobox__hr {
left: -10px;
position: relative;
width: 304px;
}
.infobox_type_mod .infobox__info__target {
color: #fbfbfb;
margin-bottom: 15px;
}
.infobox_type_mod .infobox__condition {
color: #a9a9a9;
}
.infobox_type_mod .infobox__limitation {
color: #f42c2c;
}
.infobox_type_mod .infobox__condition,
.infobox_type_mod .infobox__limitation {
margin-bottom: 10px;
}
.infobox_type_mod .infobox__condition__header,
.infobox_type_mod .infobox__limitation__header {
color: #fbfbfb;
margin: 10px 0;
width: 100%;
}
.infobox_type_mod .infobox__condition > div:not(.infobox__condition__header),
.infobox_type_mod .infobox__limitation > div:not(.infobox__limitation__header) {
background-color: #303030;
border-bottom: 1px solid #262626;
padding-bottom: 5px;
padding-right: 5px;
padding-top: 5px;
width: 100%;
}
.infobox_type_mod .infobox__limitation > div:not(.infobox__limitation__header) {
padding-left: 5px;
}
.infobox_type_mod .infobox__condition__lvl span,
.infobox_type_mod .infobox__condition__gs span,
.infobox_type_mod .infobox__condition__party span,
.infobox_type_mod .infobox__condition__time span,
.infobox_type_mod .infobox__condition__item span:nth-last-child(1) {
color: #fbfbfb;
float: right;
}
.infobox_type_mod .infobox__condition__lvl,
.infobox_type_mod .infobox__condition__gs,
.infobox_type_mod .infobox__condition__party,
.infobox_type_mod .infobox__condition__time {
padding-left: 30px;
}
.infobox_type_mod .infobox__condition__item,
.infobox_type_mod .infobox__condition__quest {
width: 100%;
}
.infobox_type_mod .infobox__condition__quest {
padding-left: 5px;
}
.infobox_type_mod .infobox__condition__quest span,
.infobox_type_mod .infobox__limitation__item span {
padding: 0 3px 0 0;
text-align: center;
width: 25px;
}
.infobox_type_mod .infobox__condition__lvl {
background: url(/wiki/images/6/68/Etc_18.png) 5px 50%/auto 19px no-repeat;
}
.infobox_type_mod .infobox__condition__gs {
background: url(/wiki/images/2/21/Icon_gs_small.png) 5px 50%/auto 19px no-repeat;
}
.infobox_type_mod .infobox__condition__party {
background: url(/wiki/images/c/ca/Icon_party.png) 5px 50%/auto 19px no-repeat;
}
.infobox_type_mod .infobox__condition__time {
background: url(/wiki/images/1/11/Hourglass.png) 5px 50%/auto 19px no-repeat;
}
.button-banners {
display: -webkit-box;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
justify-content: space-between;
width: 100%;
}
.button-banner {
max-width: 304px;
position: relative;
}
.button-banner__title {
color: #fff;
font-size: 24px;
line-height: 30px;
pointer-events: none;
position: absolute;
z-index: 2;
}
.home-promo__banner-link:after {
background: -webkit-gradient(linear,left top,left bottom,color-stop(20%,transparent),to(rgba(0,0,0,.7)));
background: linear-gradient(180deg,transparent 20%,rgba(0,0,0,.7));
content: "";
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
.item {
position: relative;
width: 144px;
}
.item-info {
background: #262626;
border-radius: 8px;
color: #fbfbfb;
filter: drop-shadow(2px 2px 2px rgba(0,0,0,1));
font-family: FrizQuadrataC;
font-size: 14px;
overflow: hidden;
position: relative;
}
.item-info:before {
content: "";
height: 128px;
position: absolute;
width: 100%;
}
.item-info.rarity-common:before {
background: linear-gradient(0deg, transparent 0, hsla(0,0%,98.4%,.5) 100%);
}
.item-info.rarity-uncommon:before {
background: linear-gradient(0deg, transparent 0, rgba(140,248,1,.5) 100%);
}
.item-info.rarity-rare:before {
background: linear-gradient(0deg, transparent 0, rgba(0,170,242,.5) 100%);
}
.item-info.rarity-epic:before {
background: linear-gradient(0deg, transparent 0, rgba(200,65,244,.5) 100%);
}
.item-info.rarity-legendary:before {
background: linear-gradient(0deg, transparent 0, rgba(241,141,0,.5) 100%);
}
.item-info.rarity-relic:before {
background: linear-gradient(0deg, transparent 0, rgba(249,93,0,.5) 100%);
}
.item__img {
height: 128px;
position: relative;
width: 100%;
}
.item__img img {
height: 64px;
position: relative;
width: 64px;
}
.item__header {
height: 40px;
margin: 0 auto 5px;
max-width: 140px;
overflow: hidden;
}
.item__status {
display: -webkit-box;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
font-style: italic;
position: absolute;
margin: 3px 8px;
}
.item__quantity {
color: #888;
font-size: 12px;
position: absolute;
top: 108px;
width: 100%;
}
.item__decors,
.item__decors div,
.item__decors div:before {
position: absolute;
}
.item__decors .item__decor-1 {
border: 1px solid rgba(136,136,136,.5);
height: 56px;
overflow: hidden;
transform: rotate(45deg);
width: 56px;
}
.item__decors .item__decor-1:before {
border: 1px solid rgba(136,136,136,.5);
content: "";
height: 56px;
transform: rotate(45deg);
width: 56px;
}
.item__decors .item__decor-2 {
-webkit-box-align: center;
align-items: center;
display: -webkit-box;
display: flex;
height: 20px;
overflow: hidden;
width: 100px;
}
.item__decors .item__decor-2:before {
border: 1px solid rgba(136,136,136,.3);
content: "";
height: 62px;
left: 19px;
transform: rotate(45deg);
width: 62px;
}
.item__decors .item__decor-3 {
-webkit-box-align: center;
align-items: center;
display: -webkit-box;
display: flex;
height: 100px;
overflow: hidden;
width: 20px;
}
.item__decors .item__decor-3:before {
border: 1px solid rgba(136,136,136,.3);
content: "";
height: 62px;
left: -21px;
transform: rotate(45deg);
width: 62px;
}
.item__price {
-webkit-box-align: end;
align-items: flex-end;
border-top: 1px solid #121212;
display: -webkit-inline-box;
display: inline-flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
height: 50px;
-webkit-box-pack: center;
justify-content: center;
position: relative;
padding: 5px 50px 5px 0;
width: 100%;
}
.item__price_without-discount {
color: #888;
font-size: 12px;
position: relative;
}
.item__price_without-discount::before {
border-bottom: 1px solid #c00;
content: '';
left: -5px;
position: absolute;
right: -5px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.item__price_final {
font-size: 16px;
}
.item__price_money {
position: absolute;
right: 10px;
width: 30px;
}
.item__price_sale {
background: #c00;
font-size: 12px;
padding: 2px 0;
position: absolute;
right: -30px;
text-align: center;
top: 10px;
transform: rotate(45deg);
width: 100px;
}
.item-tooltip {
display: none;
left: 100%;
padding: 0 0 0 3px;
position: absolute;
top: 0;
}
.item-tooltip,
.item:hover {
z-index: 1
}
.item:hover .item-tooltip,
.item-tooltip:hover {
display: block;
}
.item-tooltip .infobox {
filter: drop-shadow(2px 2px 2px rgba(0,0,0,1));
margin: 0;
outline: 1px solid #000;
}
@media only screen and (min-width: 1012px) {
.item:nth-child(6n) .item-tooltip,
.item:nth-child(6n-1) .item-tooltip {
left: -307px;
padding: 0 3px 0 0;
}
}
@media (max-width: 1011px) and (min-width: 769px) {
.item:nth-child(4n) .item-tooltip,
.item:nth-child(4n-1) .item-tooltip {
left: -307px;
padding: 0 3px 0 0;
}
}
@media (max-width: 768px) {
.item-tooltip {
top: auto;
left: 0;
padding: 3px 0 0;
}
.item:nth-child(2n) .item-tooltip {
right: 0;
}
}
.marishop {
background: url(/wiki/images/9/9d/Marishop-bg.png) center top no-repeat;
border-top: 1px solid #000;
padding-top: 200px;
padding-left: 34px;
padding-right: 34px;
}
@media (max-width: 1011px) {
.marishop {
padding-left: 28px;
padding-right: 28px;
}
}
.infobox {
background: #262626;
color: #fbfbfb;
font-family: FrizQuadrataC;
font-size: 14px;
margin: 0 0 16px;
width: 304px;
}
.infobox__header,
.infobox-item,
.infobox-item__img,
.infobox-item__info {
display: -webkit-box;
display: flex;
}
.infobox-wrap {
padding: 0 10px;
}
.infobox__header {
-webkit-box-align: center;
align-items: center;
background: #303030;
font-size: 17px;
-webkit-box-pack: center;
justify-content: center;
padding: 10px 5px;
text-align: center;
text-shadow: 0 0 2px #000;
width: 100%;
}
.infobox__hr {
background: #1c1c1c;
height: 1px;
left: -10px;
position: relative;
width: 304px;
}
.infobox-item {
background-position: -50px 0;
background-repeat: no-repeat;
height: 70px;
margin: 5px 0 15px;
text-shadow: 0 0 2px #000;
}
.infobox-item__img {
-webkit-box-align: end;
align-items: flex-end;
height: 100%;
margin-right: 10px;
width: 64px;
}
.infobox-item__img img {
height: auto;
}
.infobox-item__info {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
justify-content: space-around;
}
.infobox-info__description {
color: #dfc578;
margin-bottom: 10px;
}
.infobox-list {
color: #a9a9a9;
padding: 0 0 10px;
}
.infobox-list__header {
color: #fbfbfb;
margin: 10px 0;
width: 100%;
}
.infobox-list__item {
background-color: #303030;
border-bottom: 1px solid #262626;
overflow: auto;
padding: 5px;
width: 100%;
}
.infobox-list__item span {
color: #fbfbfb;
float: right;
text-align: right;
}
.infobox-readmore {
border-top: 1px solid #1c1c1c;
padding: 5px 0 7px 95px;
font-size: 14px;
line-height: 24px;
}
.infobox-readmore a {
text-decoration: none;
}
.infobox-readmore .icon {
color: #c00;
display: inline-block;
margin: 2px 0 0 10px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transition: all .15s linear;
transition: all .15s linear;
}
.infobox-readmore a:hover .icon {
margin-left: 15px;
}
[data-type="compound"] .infobox__header {
color: #00aaf2;
}
[data-type="prefix"] .infobox__header,
[data-type="postfix"] .infobox__header {
color: #8cf801;
}
.honortitle_infobox .infobox-item__type {
-webkit-box-align:center;
align-items:center;
display:-webkit-box;
display: flex;
}
.layout-scrollbar {
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-color: #575757 #303030;
scrollbar-width: thin;
}
.layout-scrollbar::-webkit-scrollbar {
height: .375rem;
width: .375rem;
}
.layout-scrollbar::-webkit-scrollbar-thumb {
background-color: #575757;
}
.layout-scrollbar::-webkit-scrollbar-thumb:horizontal,
.layout-scrollbar::-webkit-scrollbar-thumb:vertical {
min-width: 1.5rem;
}
.layout-scrollbar::-webkit-scrollbar-track {
background-color: #303030;
}