MediaWiki:Common.css
Замечание. Возможно, после сохранения вам придётся очистить кэш своего браузера, чтобы увидеть изменения.
@import '//use.fontawesome.com/releases/v5.13.0/css/all.css'; @font-face { font-family: CoreSansD37; font-style: normal; font-weight: 400; src: url(//sf.mail.ru/static/sf.mail.ru/pages/invasionpass/dist/assets/fonts/CoreSansD37/CoreSansD37CnRegular.woff) format("woff"), url(//sf.mail.ru/static/sf.mail.ru/pages/invasionpass/dist/assets/fonts/CoreSansD37/CoreSansD37CnRegular.ttf) format("truetype"), url(//sf.mail.ru/static/sf.mail.ru/pages/invasionpass/dist/assets/fonts/CoreSansD37/CoreSansD37CnRegular.svg) format("svg"); } @font-face { font-family: CoreSansD45Medium; font-style: normal; font-weight: 400; src: url(//sf.mail.ru/static/sf.mail.ru/pages/BattleRoyale/static/fonts/CoreSansD45/CoreSansD45Medium.woff) format("woff"), url(//sf.mail.ru/static/sf.mail.ru/pages/BattleRoyale/static/fonts/CoreSansD45/CoreSansD45Medium.ttf) format("truetype"), url(//sf.mail.ru/static/sf.mail.ru/pages/BattleRoyale/static/fonts/CoreSansD45/CoreSansD45Medium.svg) format("svg"); } @font-face { font-family: CoreSansD47CnMedium; font-style: normal; font-weight: 400; src: url(//sf.mail.ru/static/sf.mail.ru/pages/BattleRoyale/static/fonts/CoreSansD47/CoreSansD47CnMedium.woff) format("woff"), url(//sf.mail.ru/static/sf.mail.ru/pages/BattleRoyale/static/fonts/CoreSansD47/CoreSansD47CnMedium.ttf) format("truetype"), url(//sf.mail.ru/static/sf.mail.ru/pages/BattleRoyale/static/fonts/CoreSansD47/CoreSansD47CnMedium.svg) format("svg"); } @font-face { font-family: CoreSansD57CnBold; font-style: normal; src: url(//sf.mail.ru/static/sf.mail.ru/pages/BattleRoyale/static/fonts/CoreSansD57/CoreSansD57CnBold.woff) format("woff"), url(//sf.mail.ru/static/sf.mail.ru/pages/BattleRoyale/static/fonts/CoreSansD57/CoreSansD57CnBold.ttf) format("truetype"), url(//sf.mail.ru/static/sf.mail.ru/pages/BattleRoyale/static/fonts/CoreSansD57/CoreSansD57CnBold.svg) format("svg"); } @font-face { font-family: CoreSansD67; font-style: normal; font-weight: 400; src: url(//sf.mail.ru/static/sf.mail.ru/pages/invasionpass/dist/assets/fonts/CoreSansD67/CoreSansD67CnHeavy.woff2) format("woff2"), url(//sf.mail.ru/static/sf.mail.ru/pages/invasionpass/dist/assets/fonts/CoreSansD67/CoreSansD67CnHeavy.woff) format("woff"), url(//sf.mail.ru/static/sf.mail.ru/pages/invasionpass/dist/assets/fonts/CoreSansD67/CoreSansD67CnHeavy.ttf) format("truetype"); } @font-face { font-family: CoreSansM45Regular; font-style: normal; font-weight: normal; src: url(/sites/sf.mail.ru/themes/main/fonts/CoreSansM45Regular.woff) format("woff"), url(/sites/sf.mail.ru/themes/main/fonts/CoreSansM45Regular.ttf) format("truetype"), url(/sites/sf.mail.ru/themes/main/fonts/CoreSansM45Regular.eot?#iefix) format("embedded-opentype"); } /* (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-color: transparent; background-image: none; } .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 { -webkit-box-sizing: border-box; box-sizing: border-box; } body, html { background: #000; cursor: default; height: 100%; min-height: 100%; width: 100%; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { color: #999; display: none; font: normal 20px/1.4 CoreSansD37, sans-serif; overflow-y: scroll; overflow-x: auto; } a { color: inherit; cursor: pointer; outline: none; text-decoration: underline; -webkit-transition: all .1s linear; -o-transition: all .1s linear; transition: all .1s linear; } a:hover { text-decoration: none; } a[href^=tel] { color: inherit; text-decoration: 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-left: auto; margin-right: 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; 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, .mw-helplink, .mw-search-profile-tabs, .suggestions, .oo-ui-defaultOverlay, .page-Служебная_Источники_книг, .page-Служебная_Список_наблюдения, .page-Обсуждение { display: none !important; } #footer { line-height: 23px; min-height: 240px; padding-bottom: 20px; padding-top: 60px; } .footer__groups, .footer__group, .footer-social, .footer-social a { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .footer__groups { padding-bottom: 20px; } .footer__group { height: 50px; margin-left: 5px; margin-right: 5px; opacity: .4; -webkit-transition: opacity .35s ease-out; -o-transition: opacity .35s ease-out; transition: opacity .35s ease-out; } .footer__group:hover { opacity: 1; } .footer__group.type-at { width: 60px; } .footer__group.type-mg { width: 90px; } .footer__copyright { color: #666; margin-left: auto; margin-right: auto; max-width: 665px; text-align: center; } .footer-social { padding-bottom: 40px; } .footer-social a { color: #888; font-size: 30px; height: 30px; margin-left: 6px; margin-right: 6px; text-decoration: none; width: 30px; } .footer-social a:hover { color: #fff; } .footer-pegi { border: 1px solid #666; border-radius: 360px; height: 50px; margin-left: 10px; margin-right: 10px; padding: 2px; width: 50px; } .footer-pegi span { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: #666; border-radius: 360px; color: #000; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 31px; height: 44px; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; width: 44px; } @media only screen and (min-width: 768px) { #footer { font-size: 18px; } .footer__group { margin-left: 8px; margin-right: 8px; } .footer__group.type-at { width: 85.71px; } .footer__group.type-mg { width: 146px; } .footer-social a { font-size: 40px; height: 50px; margin-left: 10px; margin-right: 10px; width: 50px; } } #mw-navigation, #mw-head, #mw-panel, #right-navigation { display: -webkit-box; display: -ms-flexbox; display: flex; } #mw-navigation { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: #000; height: 30px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; left: 0; padding-left: 20px; padding-right: 20px; position: fixed; text-transform: uppercase; top: 0; width: 100%; z-index: 100; } #mw-navigation, .user-edit #mw-head { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } #mw-navigation h3, #mw-navigation a { color: #888; display: block; font-size: 12px; letter-spacing: 2px; line-height: 15px; margin-left: 19px; text-decoration: none; -webkit-transition: color .35s ease-out; -o-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-top: 10px; 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: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } #p-personal, #p-cactions, #p-tb, #p-views, .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-left: 40px; padding-right: 40px; } } @media (max-width: 768px) { #mw-panel { display: none; } } .header { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: url(//sf.cdn.gmru.net/wiki/s3/sfwiki-prod/Header_bg.jpg) center/auto 100% no-repeat; display: -webkit-box; display: -ms-flexbox; display: flex; height: 240px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 30px; overflow: hidden; position: relative; width: 100%; } .header::after { background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #000), color-stop(35%, transparent)); background-image: -o-linear-gradient(bottom, #000 0, transparent 35%); background-image: linear-gradient(0deg, #000 0, transparent 35%); bottom: 0; content: ""; height: 100%; left: 0; position: absolute; width: 100%; } .logo { background: url(//sf.cdn.gmru.net/wiki/s3/sfwiki-prod/Logo.png) center no-repeat; display: block; height: 180px; width: 420px; z-index: 95; } @media (max-width: 1011px) { .header { height: 192px; } .logo { background-size: auto 92px; height: 144px; width: 336px; } } @media (max-width: 768px) { .header { height: 144px; } .logo { background-size: auto 69px; height: 108px; width: 252px; } } #content { background: #1e1e1e; font-size: 22px; line-height: 1.4; margin-left: auto; margin-right: auto; max-width: 1012px; min-height: 300px; min-width: 1012px; overflow: hidden; padding: 24px 34px; position: relative; } #firstHeading { background: transparent; border: 0; color: #fff; font-family: CoreSansD67; font-size: 44px; font-weight: 400; letter-spacing: 1.5px; line-height: 1.4; padding-bottom: 32px; padding-top: 8px; text-align: center; text-transform: uppercase; word-spacing: .02em; } #content h2, #content h3, #content h4, #content h5, #content h6 { border: 0 !important; color: #fff; } #content h2 { font-family: CoreSansD67; font-size: 30px; margin-bottom: 40px; margin-top: 80px; text-transform: uppercase; word-spacing: 1.5px; } #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: CoreSansD37; line-height: 22px; font-weight: 500; } #content p { margin-bottom: 24px; } #content a { color: #987e54; cursor: pointer; text-decoration: none; } #content a:hover { color: #e2b75a; } #content table { font-size: 18px; margin-bottom: 80px; margin-top: 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: #999; content: ""; display: inline-block; height: 1px; margin-left: 8px; position: relative; top: 3px; width: 1px; } .jquery-tablesorter th.headerSortUp::after { border-top-color: #d8b059; top: -4px; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .jquery-tablesorter th.headerSortDown::after { border-top-color: #d8b059; } #content ol, #content ul { list-style: none; } #content ul:not([class]) { margin-bottom: 40px; margin-top: 40px; } #content ol li, #content ul li { margin-bottom: 10px; padding-left: 30px; position: relative; } #content ol li::before, #content ul li::before { color: #d8b059; 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-left: 30px; } #content iframe, #content img, #content video { max-width: 100%; } #content img { height: auto !important; } @media (max-width: 1011px) { #content { max-width: 752px; min-width: 752px; padding: 24px 28px; } #bodyContent { margin-left: auto; margin-right: auto; width: 624px; } #firstHeading { margin-left: auto; margin-right: auto; width: 624px; } } @media (max-width: 768px) { #content { font-size: 18px; line-height: 20px; max-width: 360px; min-width: 360px; padding: 24px 28px; } #bodyContent { margin-left: auto; margin-right: auto; width: 304px; } #firstHeading { font-size: 32px; line-height: 1.4; margin-left: auto; margin-right: auto; padding-bottom: 24px; padding-top: 8px; width: 304px; } #content p { margin-bottom: 20px; } #content table { font-size: 16px; } #content table tr { display: block; padding-bottom: 10px; padding-top: 10px; } #content table td, #content table th { display: block; padding: 5px 15px; } #content table th { display: none; } } kbd { border: 1px solid #666; border-radius: 5px; display: inline-block; font-family: inherit; font-size: 16px; margin: 4px 4px 2px; min-width: 30px; padding: 1px 5px; text-align: center; white-space: nowrap; } .preloader { background-color: #000; bottom: 0; left: 0; position: fixed; right: 0; top: 0; z-index: 10000; } .preloader--active { display: block; overflow: hidden; } .preloader--hidden { opacity: 0; -webkit-transition: opacity .4s, visibility .4s; -o-transition: opacity .4s, visibility .4s; transition: opacity .4s, visibility .4s; visibility: hidden; } .preloader__img { -webkit-animation: glow 1.5s ease-in alternate infinite; animation: glow 1.5s ease-in alternate infinite; left: 50%; opacity: 0; position: absolute; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 200px; } @-webkit-keyframes glow { from { opacity: 1; } to { opacity: .5; } } @keyframes glow { from { opacity: 1; } to { opacity: .5; } } .buttons { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; margin-bottom: 40px; margin-top: 24px; } .buttons a { margin-top: 16px; text-decoration: none; } button, .button { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: #d7ad55; color: #000; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; font: 17px/50px CoreSansM45Regular; height: 50px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; left: 10px; 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; width: 274px; } button::before, .button::before, button::after, .button::after { content: ""; display: block; height: 0; position: absolute; top: 0; width: 0; } button::before, .button::before { border-bottom: 50px solid #d7ad55; border-left: 10px solid transparent; left: -10px; } button::after, .button::after { border-top: 50px solid #d7ad55; border-right: 10px solid transparent; right: -10px; } button:hover, .button:hover { background: #e2b75a; } button:hover::before, .button:hover::before { border-bottom: 50px solid #e2b75a; } button:hover::after, .button:hover::after { border-top: 50px solid #e2b75a; } .button--disabled { cursor: default; pointer-events: none; } .layout-scrollbar { overflow-y: auto; -ms-scroll-chaining: none; overscroll-behavior: contain; scrollbar-color: #575757 #303030; scroll-snap-type: y mandatory; scrollbar-width: thin; } .layout-scrollbar::-webkit-scrollbar { height: .375rem; width: .375rem; } .layout-scrollbar::-webkit-scrollbar-thumb { background-color: #575757; } .layout-scrollbar::-webkit-scrollbar-thumb:hover { background-color: #6d6d6d; } .layout-scrollbar::-webkit-scrollbar-thumb:active { background-color: #bbb; } .layout-scrollbar::-webkit-scrollbar-thumb:horizontal, .layout-scrollbar::-webkit-scrollbar-thumb:vertical { min-width: 1.5rem; } .layout-scrollbar::-webkit-scrollbar-track { background-color: #303030; } 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: #d8b059; color: #fff; font-family: CoreSansD37; font-size: 18px; line-height: 30px; line-height: 2.2; -webkit-transition: all .2s; -o-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: CoreSansD37; font-size: 14px; 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; -o-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: #d8b059; height: 10px; left: 4px; top: 4px; width: 10px; } form [type=radio]:checked + label::before { border-color: #d8b059; } form [type=radio]:checked + label::after { opacity: 1; -webkit-transform: scale(1); -ms-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); -ms-transform: scale(0); transform: scale(0); } .spoilers { margin-bottom: 20px; margin-top: 20px; } .spoiler { border: 1px solid #987e54; } .spoiler__title { color: #987e54; cursor: pointer; font: 17px/40px CoreSansM45Regular; margin-bottom: 20px; margin-top: 20px; padding-left: 20px; position: relative; text-transform: uppercase; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .spoiler__content, .spoiler__title { font-family: CoreSansD37; font-size: 16px; line-height: 22px; } .spoiler__content { box-sizing: content-box; height: 0; opacity: 0; overflow: hidden; padding-left: 45px; -webkit-transition: all .15s linear; -o-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 #d8b059; height: 18px; left: 10px; position: absolute; top: 15px; -webkit-transform: rotate(45deg) translateY(50%); -ms-transform: rotate(45deg) translateY(50%); transform: rotate(45deg) translateY(50%); -webkit-transition: all .15s ease-out; -o-transition: all .15s ease-out; transition: all .15s ease-out; width: 18px; } .spoiler__marker-symbol { height: 100%; position: relative; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); width: 100%; } .spoiler__marker-symbol::after, .spoiler__marker-symbol::before { background-color: #d8b059; content: ""; left: 50%; position: absolute; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: -webkit-transform .35s ease-out; transition: -webkit-transform .35s ease-out; -o-transition: 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: #d8b059; } .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; -o-transition: 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); -ms-transform: translate(-50%, -50%) rotate(90deg); transform: translate(-50%, -50%) rotate(90deg); } .spoiler:hover .spoiler__marker { background: #d8b059; } .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; -o-transition: 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 #00366e; border-radius: 50%; cursor: pointer; height: 30px; position: relative; -webkit-transition: background-color .35s ease-out; -o-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-left: -1px; margin-top: -7px; position: absolute; top: 50%; width: 2px; } .controller-close::before { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .controller-close::after { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .controller-close:hover { background-color: #d8b059; } @media only screen and (min-width: 768px) { .controller-close { height: 48px; width: 48px; } .controller-close::after, .controller-close::before { height: 24px; margin-left: -1px; margin-top: -12px; } } 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; -ms-flex-align: center; align-items: center; background-color: rgba(0,0,0,.8); bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-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); -ms-transform: translateX(9px); transform: translateX(9px); width: 100%; } .popup__closer { position: absolute; right: -50px; top: -50px; } @media (max-width: 768px) { .popup__wrap { -webkit-transform: none; -ms-transform: none; transform: none; } } @media (max-height: 700px) { .popup__closer { top: 0; } } .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-page-active #content { display: none !important; } .error-page-active .header { display: none; } .error-page { background: url(//sf.cdn.gmru.net/wiki/s3/sfwiki-prod/Error-page-bg.jpg) no-repeat 50% 0; } .error-page__wrap { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin-left: auto; margin-right: auto; max-width: 1012px; padding-top: 250px; position: relative; text-align: center; } .error-page__num { background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#666)); background: -o-linear-gradient(top, #eee, #666); background: linear-gradient(180deg, #eee, #666); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #eee; font-family: CoreSansD67; font-size: 300px; line-height: 70px; line-height: 1; letter-spacing: .04em; margin-bottom: 50px; margin-top: 15px; word-spacing: .02em; z-index: 1; } .error-page__title { color: #fff; font-family: CoreSansD37; font-size: 24px; font-weight: 400; line-height: 30px; margin-bottom: 10px; z-index: 2; } .error-page__text { color: #fff; font-family: CoreSansD37; 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 (max-width: 1011px) { .error-page__num { font-size: 200px; } } @media (max-width: 768px) { .error-page__wrap { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 70vh; padding-bottom: 70px; padding-top: 120px; } .error-page__num { font-size: 110px; margin-bottom: 25px; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .error-page__title { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .error-page__text { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } } .breadcrumbs { background: #000; color: #666; display: none; font-size: 18px; letter-spacing: .5px; line-height: 1.4; margin-left: auto; margin-right: auto; max-width: 1012px; padding: 10px 34px; } .breadcrumbs.breadcrumbs_state_visible { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .breadcrumbs a { color: #666; text-decoration: none; white-space: nowrap; } .breadcrumbs a:hover { color: #fff; } .breadcrumbs__dot { font-size: 10px; padding-left: 8px; padding-right: 8px; } @media (max-width: 1011px) { .breadcrumbs { margin-left: auto; margin-right: auto; max-width: 752px; padding: 10px 64px; } } @media (max-width: 768px) { .breadcrumbs { font-size: 16px; line-height: 20px; max-width: 360px; padding: 10px 28px; } } .text_center { text-align: center; } .flex-group { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .flex-group__item { width: 304px; } .flex_center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .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%; } } .about-game__img_gradient { margin-bottom: 24px; padding: 0 !important; } .about-game__img_gradient::after { background-image: linear-gradient(0deg, #1e1e1e 0, transparent 50%); bottom: 0; content: ""; height: 100%; left: 0; position: absolute; width: 100%; } .class-item { background: url(//sf.cdn.gmru.net/wiki/s3/sfwiki-prod/Class-frame.png) no-repeat; } .class-item:hover { background: url(//sf.cdn.gmru.net/wiki/s3/sfwiki-prod/Class-frame_active.png) no-repeat; } .class-item__body { height: 494px; margin: 7px 11px; overflow: hidden; position: relative; text-align: center; } .class-item__img { min-width: 846px; position: absolute; left: -100%; } .class-item__gradient, .class-item__header, .class-item__role, .class-item__icon { position: relative; z-index: 1; } .class-item__gradient::before { background-image: linear-gradient(0deg, transparent, #0f0f0f); content: ""; height: 200px; left: 0; position: absolute; top: 5px; width: 100%; } .class-item__header { color: #fff; font-family: CoreSansD57CnBold; padding-top: 16px; text-align: center; text-transform: uppercase; } .class-item__role { padding-bottom: 5px; } .class-item__icon img { background: #0f0f0f; border-radius: 50%; } .class-item__link { bottom: 0; margin-bottom: 30px; position: absolute; width: 100%; } .class-item__link a { -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #fff !important; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; height: 54px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-left: auto; margin-right: auto; position: relative; text-transform: uppercase; width: 216px; } .class-item__link a:hover { opacity: .8; } .class-item:hover .class-item__link a { background: url(//sf.cdn.gmru.net/wiki/s3/sfwiki-prod/Btn.png) no-repeat; } .class-page__bg { height: 500px; margin-bottom: 25px; position: relative; text-align: center; } .class-page__bg_blue { background: url(//sf.cdn.gmru.net/wiki/s3/sfwiki-prod/Class-bg_blue.png) center no-repeat; } .class-page__bg_red { background: url(//sf.cdn.gmru.net/wiki/s3/sfwiki-prod/Class-bg_red.png) center no-repeat; } .class-page__bg_green { background: url(//sf.cdn.gmru.net/wiki/s3/sfwiki-prod/Class-bg_green.png) center no-repeat; } .class-page__icon { margin-left: auto; margin-right: auto; text-align: left; width: 304px; } .class-page__icon img { margin-left: 24px; margin-right: 24px; opacity: .4; position: absolute; top: 40px; } .class-page__img { position: relative; z-index: 1; } @media (max-width: 1011px) { .class-page__img { min-width: 2256px; position: absolute; left: -100%; } } @media (max-width: 768px) { .class-page__img { min-width: 1080px; position: absolute; left: -100%; } }