MediaWiki:Styles.css
Замечание. Возможно, после сохранения вам придётся очистить кэш своего браузера, чтобы увидеть изменения.
@import "//use.fontawesome.com/releases/v5.13.0/css/all.css"; @font-face { font-family: Plumb; font-style: normal; font-weight: 400; src: url(//wf.cdn.gmru.net/static/general/fonts/Plumb/plumb-light.woff) format("woff"), url(//wf.cdn.gmru.net/static/general/fonts/Plumb/plumb-light.ttf) format("truetype"); } @font-face { font-family: Plumb; font-style: normal; font-weight: 700; src: url(//wf.cdn.gmru.net/static/general/fonts/Plumb/plumb-medium.woff) format("woff"), url(//wf.cdn.gmru.net/static/general/fonts/Plumb/plumb-medium.ttf) format("truetype"); } @font-face { font-family: Quantico; font-style: normal; font-weight: 400; src: url(//wf.cdn.gmru.net/static/general/fonts/Quantico/Quantico.woff) format("woff"), url(//wf.cdn.gmru.net/static/general/fonts/Quantico/Quantico.woff2) format("woff2"), url(//wf.cdn.gmru.net/static/general/fonts/Quantico/Quantico.ttf) format("truetype"), url(//wf.cdn.gmru.net/static/general/fonts/Quantico/Quantico.svg) format("svg"); } *, ::after, ::before { -webkit-box-sizing: border-box; box-sizing: border-box; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; outline: none; vertical-align: baseline; -webkit-tap-highlight-color: rgba(0,0,0,0); } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } html { height: 101%; -ms-touch-action: manipulation; touch-action: manipulation; -webkit-text-size-adjust: 100%; } body { background: #000; color: #acacac; font: 400 20px/1.2 Plumb, Arial, Helvetica, sans-serif; -webkit-text-decoration-skip: objects; text-decoration-skip: objects; text-rendering: optimizeSpeed; width: 100%; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; -moz-osx-font-smoothing: grayscale; } @media (max-width: 719px) { body { font-size: 14px; } } a { background-color: transparent; color: inherit; cursor: pointer; text-decoration: none; -webkit-transition: all .1s linear; -o-transition: all .1s linear; transition: all .1s linear; } a:hover { text-decoration: underline; } a.new { color: inherit; cursor: default; text-decoration: none; pointer-events: none; } abbr[title] { cursor: help; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } b { font-weight: 700; } blockquote, q { quotes: none; } blockquote::before, blockquote::after, q::before, q::after { content: ""; content: none; } button { overflow: visible; text-transform: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } button, [type="button"], [type="reset"], [type="submit"] { cursor: pointer; -webkit-appearance: none; } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border: none; padding: 0; } button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: none; } cite { font-style: normal; } code { font-family: monospace; } del { text-decoration: line-through; } em, i { font-style: italic; } iframe { border: none; } input { outline: none; overflow: visible; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; } 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; } img { border: 0; display: block; max-width: 100%; } legend { -webkit-box-sizing: border-box; box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } li { list-style: none; } pre { font-family: monospace; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; overflow-x: auto; overflow-y: hidden; white-space: pre-wrap; word-wrap: break-word; } progress { vertical-align: baseline; } s { text-decoration: line-through; } select { -webkit-appearance: none; -moz-appearance: none; appearance: none; text-transform: none; } select::-ms-expand { display: none; } strong { color: #fff; font-weight: 400; } summary { display: list-item; } table { border-collapse: collapse; border-spacing: 0; } template { display: none; } textarea { overflow: auto; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; } button, input, optgroup, select, textarea { padding: 0; margin: 0; border: none; border-radius: 0; -webkit-box-shadow: none; box-shadow: none; background-color: transparent; font: inherit; color: inherit; letter-spacing: inherit; } [type="checkbox"], [type="radio"] { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } [type="search"] { -webkit-appearance: textfield; outline-offset: -2px; } [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } [hidden] { display: none !important; } :focus { outline: none; } ::-webkit-input-placeholder, ::-moz-placeholder, :-moz-placeholder, :-ms-input-placeholder { color: inherit; opacity: 1; -webkit-transition: opacity .3s; -moz-transition: opacity .3s; -ms-transition: opacity .3s; transition: opacity .3s; } :focus::-webkit-input-placeholder, :focus::-moz-placeholder, :focus:-moz-placeholder, :focus:-ms-input-placeholder { opacity: 0; } ::-ms-clear { display: none; } @media (prefers-reduced-motion: reduce) { * { -webkit-animation-duration: 0.01ms !important; animation-duration: 0.01ms !important; -webkit-animation-iteration-count: 1 !important; animation-iteration-count: 1 !important; -webkit-transition-duration: 0.01ms !important; -o-transition-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .flex { display: -webkit-box; display: -ms-flexbox; display: flex; } .align-c-start { -ms-flex-line-pack: start; align-content: flex-start; } .align-c-center { -ms-flex-line-pack: center; align-content: center; } .align-c-end { -ms-flex-line-pack: end; align-content: flex-end; } .align-c-between { -ms-flex-line-pack: justify; align-content: space-between; } .align-c-around { -ms-flex-line-pack: distribute; align-content: space-around; } .align-c-evenly { -ms-flex-line-pack: space-evenly; align-content: space-evenly; } .align-i-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .align-i-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .align-i-end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .flex-dir-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .flex-dir-row-r { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .flex-dir-col { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .flex-dir-col-r { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .flex-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; } .flex-wrap-r { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; } .flex-wrap-no { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .justify-c-start { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .justify-c-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .justify-c-end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .justify-c-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .justify-c-around { -ms-flex-pack: distribute; justify-content: space-around; } .justify-c-evenly { -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; } .center img { margin-left: auto; margin-right: auto; } #ca-talk, #ca-watch, #catlinks, #contentSub, #f-copyrightico, #f-list, #f-poweredbyico, #jump-to-nav, #n-portal, #p-logo, #p-navigation, #p-search, #pt-anonuserpage, #pt-anontalk, #pt-mytalk, #pt-watchlist, #siteSub, #t-print, #toc, #top, .js-image-popup, .printfooter, .site_footer { display: none !important; } #globalWrapper { background: url(//wf.cdn.gmru.net/wiki/images/6/6d/Bg-glitch.png) no-repeat; margin: auto; max-width: 1920px; overflow: hidden; } #column-one { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: #000; border-bottom: 1px solid #333; display: none; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; height: 30px; left: 0; padding-left: 20px; padding-right: 20px; position: fixed; top: 0; width: 100%; z-index: 99; } #p-personal { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } #p-tb { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } #p-cactions { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } #p-cactions, #p-personal, #p-tb, #p-views { position: relative; } #column-one h5, #column-one a { color: #acacac; font: 12px/14px Plumb; letter-spacing: .06em; text-decoration: none; text-transform: none; -webkit-transition: color .35s ease-out; -o-transition: color .35s ease-out; transition: color .35s ease-out; } #column-one a:hover { color: #fff; } #column-one h5 { margin-left: 20px; } #column-one ul { background: #000; display: none; padding: 10px 0; position: absolute; right: -20px; } #column-one li a { display: inline-block; margin-left: 0; padding: 0 20px 5px; white-space: nowrap; } #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; } .header, .header__col { display: -webkit-box; display: -ms-flexbox; display: flex; } .header { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; background: #000; background-clip: content-box; border-bottom: 1px solid #333; -webkit-box-sizing: content-box; box-sizing: content-box; height: 48px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; left: 0; position: fixed; width: 100%; z-index: 98; } .user-admin .header { margin-top: 30px; } .header__link { background: transparent; color: #acacac; cursor: pointer; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; font: 700 12px/48px Quantico; outline: none; padding: 0 24px; text-decoration: none; text-transform: uppercase; -webkit-transition: all .15s linear; -o-transition: all .15s linear; transition: all .15s linear; } .header__link:hover { background: #333; color: #fff; text-decoration: none; } .header__col--l .header__link { border-right: 1px solid #333; } .header__link-icon { background-position-y: 50%; background-position-x: 50%; background-repeat: no-repeat; background-size: auto 20px; cursor: pointer; font-size: 0; padding: 0 24px; } .header__link--search { background-image: url("data:image/svg+xml;utf8,<svg fill='rgb(172,172,172)' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 139.9' width='25'><path d='M118.1,124.2L95.9,102c-1.9-1.9-4.8-2.3-6.9-0.9c-22.3,14.4-52.3,7.9-67-14.5c-10.2-15.6-10.2-36.6,0-52.3c8.2-12.5,21.2-20.5,35.8-22c14.6-1.4,28.9,3.6,39.2,13.9c12.6,12.5,17.2,30.9,12.2,48l-11.3-3.3c3.8-12.9,0.3-26.8-9.2-36.3C80.7,26.7,70,22.9,58.9,24c-11,1.1-20.9,7.2-27.1,16.7c-7.7,11.8-7.7,27.6,0,39.4c11.3,17.3,33.7,22.2,50.8,11.1c6.7-4.4,15.9-3.3,21.7,2.5l22.2,22.2L118.1,124.2z'/></svg>"); } .header__link--search:hover { background-image: url("data:image/svg+xml;utf8,<svg fill='rgb(255,255,255)' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 139.9' width='25'><path d='M118.1,124.2L95.9,102c-1.9-1.9-4.8-2.3-6.9-0.9c-22.3,14.4-52.3,7.9-67-14.5c-10.2-15.6-10.2-36.6,0-52.3c8.2-12.5,21.2-20.5,35.8-22c14.6-1.4,28.9,3.6,39.2,13.9c12.6,12.5,17.2,30.9,12.2,48l-11.3-3.3c3.8-12.9,0.3-26.8-9.2-36.3C80.7,26.7,70,22.9,58.9,24c-11,1.1-20.9,7.2-27.1,16.7c-7.7,11.8-7.7,27.6,0,39.4c11.3,17.3,33.7,22.2,50.8,11.1c6.7-4.4,15.9-3.3,21.7,2.5l22.2,22.2L118.1,124.2z'/></svg>"); } .header__link--feedback { background-image: url("data:image/svg+xml;utf8,<svg fill='rgb(172,172,172)' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 139.9' width='25'><path d='M52.8,128.4l-9.4-7l17.3-23.1c3.5-4.6,9-7.4,14.8-7.4h37.9c3.7,0,6.7-3,6.7-6.7V33.3c0-3.7-3-6.7-6.7-6.7H26.7c-3.7,0-6.7,3-6.7,6.7v50.7c0,3.7,3,6.7,6.7,6.7h14.9v11.8H26.7c-10.2,0-18.5-8.3-18.5-18.5V33.3c0-10.2,8.3-18.5,18.5-18.5h86.6c10.2,0,18.5,8.3,18.5,18.5v50.7c0,10.2-8.3,18.5-18.5,18.5H75.4c-2.1,0-4.1,1-5.4,2.7L52.8,128.4z'/></svg>"); } .header__link--feedback:hover { background-image: url("data:image/svg+xml;utf8,<svg fill='rgb(255,255,255)' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 139.9' width='25'><path d='M52.8,128.4l-9.4-7l17.3-23.1c3.5-4.6,9-7.4,14.8-7.4h37.9c3.7,0,6.7-3,6.7-6.7V33.3c0-3.7-3-6.7-6.7-6.7H26.7c-3.7,0-6.7,3-6.7,6.7v50.7c0,3.7,3,6.7,6.7,6.7h14.9v11.8H26.7c-10.2,0-18.5-8.3-18.5-18.5V33.3c0-10.2,8.3-18.5,18.5-18.5h86.6c10.2,0,18.5,8.3,18.5,18.5v50.7c0,10.2-8.3,18.5-18.5,18.5H75.4c-2.1,0-4.1,1-5.4,2.7L52.8,128.4z'/></svg>"); } .header__link--support { background-image: url("data:image/svg+xml;utf8,<svg fill='rgb(172,172,172)' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 139.9' width='25'><path d='M71.9,101.2H60.1V85.5c0-11.5,9.3-20.8,20.8-20.8h15c5,0,9-4.1,9-9V36.3c0-5-4.1-9-9-9H44c-5,0-9,4.1-9,9v14.1H23.2V36.3c0-11.5,9.3-20.8,20.8-20.8h52c11.5,0,20.8,9.3,20.8,20.8v19.4c0,11.5-9.3,20.8-20.8,20.8h-15c-5,0-9,4.1-9,9V101.2z'/><rect xmlns='http://www.w3.org/2000/svg' x='59.5' y='111.7' width='13.1' height='12'/></svg>"); } .header__link--support:hover { background-image: url("data:image/svg+xml;utf8,<svg fill='rgb(255,255,255)' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 139.9' width='25'><path d='M71.9,101.2H60.1V85.5c0-11.5,9.3-20.8,20.8-20.8h15c5,0,9-4.1,9-9V36.3c0-5-4.1-9-9-9H44c-5,0-9,4.1-9,9v14.1H23.2V36.3c0-11.5,9.3-20.8,20.8-20.8h52c11.5,0,20.8,9.3,20.8,20.8v19.4c0,11.5-9.3,20.8-20.8,20.8h-15c-5,0-9,4.1-9,9V101.2z'/><rect xmlns='http://www.w3.org/2000/svg' x='59.5' y='111.7' width='13.1' height='12'/></svg>"); } .header__link--download { background: #981313; border: 1px solid #981313; color: #fff; line-height: 46px; margin: 0 0 0 20px; padding: 0 24px; position: relative; text-transform: uppercase; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .header__link--download:hover { background: #fff; color: #000; } .header__link--download::before { left: -4px; } .header__link--download::after { left: -7px; } .header__link--download::after, .header__link--download::before { background: #981313; content: ""; display: block; height: calc(100% + 2px); position: absolute; top: -1px; width: 1px; } .header__logo { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; height: 48px; padding: 0 24px; } .header__logo--wf { border-right: 1px solid #333; padding-bottom: 1px; } .nav__menu-list { color: #acacac; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0 8px; text-transform: uppercase; } .nav__menu-title { font: 700 12px/48px Quantico; margin: 0 16px; position: relative; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .nav__menu-item:hover .nav__menu-title::after, .nav__menu-item:hover .nav__menu-title::before { color: #981313; font-weight: 400; position: absolute; } .nav__menu-item:hover .nav__menu-title::after { content: "}"; right: -8px; } .nav__menu-item:hover .nav__menu-title::before { content: "{"; left: -8px; } .nav__menu-marker { border-color: transparent transparent #fff; border-style: solid; border-width: 0 4px 7px; bottom: 1px; display: block; height: 0; left: 0; margin: auto; opacity: 0; position: absolute; right: 0; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; width: 0; } .nav__menu-item:hover .nav__menu-marker { opacity: 1; } .nav__menu-dropdown { background: #000; border: 1px solid #333; border-top: 0; margin: 1px 0 0 -9px; opacity: 0; padding: 8px 0; position: absolute; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: left top 0; -ms-transform-origin: left top 0; transform-origin: left top 0; -webkit-transition: -webkit-transform .3s ease; transition: -webkit-transform .3s ease; -o-transition: transform .3s ease; transition: transform .3s ease; transition: transform .3s ease, -webkit-transform .3s ease; } .nav__menu-item:hover .nav__menu-dropdown { opacity: 1; -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); } .nav__menu-dropdown a { display: block; font: 12px/28px Quantico; padding: 0 24px; text-decoration: none; } .nav__menu-dropdown a:hover { color: #fff; } .header-bg { background: url(//wf.cdn.gmru.net/wiki/images/9/98/Bg.jpg) center/auto 100% no-repeat; height: 300px; margin-top: 49px; overflow: hidden; position: relative; width: 100%; } .user-admin .header-bg { margin-top: 79px; } .header-bg::after { background-image: -o-linear-gradient(bottom, #000 0, transparent 35%); background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #000), color-stop(35%, transparent)); background-image: linear-gradient(0deg, #000 0, transparent 35%); bottom: 0; content: ""; height: 100%; left: 0; position: absolute; width: 100%; } #column-content { margin: auto; padding: 0 8px; width: 1280px; } #content h1, #content h2, #content h3, #content h4, #content h5, #content h6 { color: #fff; font-family: Quantico; line-height: 1.2; text-align: center; text-transform: uppercase; word-wrap: break-word; } #content h1 { font-size: 48px; margin: 64px 0 32px; text-align: center; } #content h2 { font-size: 32px; margin: 64px 0 32px; } #content h3 { font-size: 20px; margin: 24px 0; } #content p { margin: 32px 0; } @media (max-width: 1279px) { #column-content { width: 720px; } #content h1 { font-size: 36px; } #content h2 { font-size: 24px; } #content h3 { font-size: 18px; } } @media (max-width: 719px) { #column-content { width: 320px; } #content h1 { font-size: 18px; } #content h2 { font-size: 16px; } #content h3 { font-size: 14px; } #content p { margin: 16px 0; } } #content a { text-decoration: underline; } #content p { margin: 0 0 30px; } #content ol > li::before, #content ul > li::before { color: /**/; display: inline-block; left: 0; position: absolute; width: 30px; } #content ol { counter-reset: li; } #content ol > li { counter-increment: li; } #content ol > li::before { content: counter(li) "."; } #content ul {} #content ul > li::before { content: "\2022"; } #content ol ol, #content ol ul, #content ul ol, #content ul ul { margin: 0 0 0 30px; } #content img { height: auto !important; } @media screen and (max-width: 720px) { #content p { margin: 0 0 10px; } } #footer { color: #494e53; padding: 64px 0 32px; } .footer-social, .footer-social a, .footer__groups, .footer__group { -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-social, .footer__groups { margin: 0 0 32px; } .footer-social a { color: #494e53; font-size: 40px; height: 48px; margin: 0 12px; text-decoration: none; width: 48px; } .footer-social a:hover { color: #fff; } .footer__group { height: 48px; margin: 0 8px; } .footer__group.type-crytek { width: 120px; } .footer__group.type-cryengine { width: 190px; } .footer__group.type-mg { width: 170px; } .footer-pegi { margin: 0 8px; width: 40px; } .footer__copyright { font: 14px/18px Plumb, sans-serif; margin: auto; text-align: center; } @media (max-width: 720px) { .footer-social a { font-size: 30px; height: 30px; width: 30px; } .footer__groups { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .footer__copyright { max-width: 300px; } }