User:ThePokegeek5000/RuHTML

  surviv.io - 2d battle royale game               <meta content="https://surviv.io/img/title.png" property="og:image"> <link rel="canonical" href="http://surviv.io"> <link rel="apple-touch-icon-precomposed" href="img/icon_app.png"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <!- Global site tag (gtag.js) - Google Analytics -> <script src="http://www.googletagservices.com/activeview/js/current/osd.js?cb=%2Fr20100101"> <script src="https://cdn.ampproject.org/rtv/011905291911450/amp4ads-host-v0.js"> <script src="https://securepubads.g.doubleclick.net/gpt/pubads_impl_rendering_2019052302.js"> <script async="" type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> <script async="" type="text/javascript" src="http://api.adinplay.com/libs/aiptag/assets/adsbygoogle.js"> <script async="" src="//c.amazon-adsystem.com/aax2/apstag.js"> <script type="text/javascript" async="" src="https://www.google-analytics.com/analytics.js"> window.adsBlocked = false; window.adBlockDetected = function { window.adsBlocked = true; } window.alert = function { } /* Cookie consent */ var cfg = {}; var consented = true; var webview = false; var version = '1.0.0'; try { cfg = JSON.parse(localStorage.getItem('surviv_config')) || {}; if (cfg.cookiesConsented != undefined) { consented = cfg.cookiesConsented; } webview = localStorage.getItem('surviv_webview'); version = localStorage.getItem('surviv_version') || '1.0.0'; } catch (e) { } window.cookiesConsented = consented; if (window.cookiesConsented) { document.write("<script async src='https://www.googletagmanager.com/gtag/js?id=UA-108811301-1' onerror='adBlockDetected;'>\x3C/script>"); window.dataLayer = window.dataLayer || []; function gtag{dataLayer.push(arguments);} gtag('js', new Date); gtag('config', 'UA-108811301-1', { 'anonymize_ip': true }); }    /* Platform detection */ window.phoneDetected = false; let ua = navigator.userAgent.toLowerCase; (function(a){if(/iphone|ipod|(android(.*mobile))|webos|(windows(.*phone)(?!.*touch))|blackberry/i.test(ua)) window.phoneDetected = true;})(navigator.userAgent||navigator.vendor||window.opera); window.webviewDetected = new RegExp("[?&]webview=true","gi").test(window.location.href) || webview; window.webviewVersion = (new RegExp("[?&]version=([0-9\.]+)","i").exec(window.location.href) || [])[1] || version; <script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-108811301-1" onerror="adBlockDetected;"> <!- AIP -> document.write("<script async src='//api.adinplay.com/libs/aiptag/pub/SRV/surviv.io/tag.min.js'>\x3C/script>"); var aiptag = aiptag || {}; aiptag.gdprConsent = window.cookiesConsented; aiptag.consented = window.cookiesConsented; aiptag.cmd = aiptag.cmd || []; aiptag.cmd.display = aiptag.cmd.display || []; <script async="" src="//api.adinplay.com/libs/aiptag/pub/SRV/surviv.io/tag.min.js"> <!- Fonts -> <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700" rel="stylesheet"> <link href="css/app.8e8f625f.css" rel="stylesheet"><script async="" type="text/javascript" charset="UTF-8" src="//imasdk.googleapis.com/js/sdkloader/ima3.js"> <link rel="preload" href="https://adservice.google.com/adsid/integrator.js?domain=kugahi.com" as="script"><script type="text/javascript" src="https://adservice.google.com/adsid/integrator.js?domain=kugahi.com"> <script src="https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019052302.js" async=""> <link rel="prefetch" href="http://tpc.googlesyndication.com/safeframe/1-0-33/html/container.html"> <canvas tabindex="1" id="cvs" width="1960" height="1208" style=""> <a id="btn-game-settings" class="btn-game-tab-select btn-game-menu btn-game-menu-selected btn-darken" data-tab="settings"></a> <a id="btn-game-keybinds" class="btn-game-tab-select btn-game-menu btn-darken" data-tab="keybinds"></a> <a id="btn-game-fullscreen" class="btn-fullscreen-toggle btn-game-menu btn-darken" data-l10n="game-full-screen">Полный экран</a> <a id="btn-game-move-style" class="btn-double-row btn-game-touch-style btn-darken"></a> <a id="btn-game-aim-style" class="btn-double-row btn-game-touch-style btn-darken"></a> <a id="btn-game-aim-line" class="btn-game-menu btn-darken locked-on-icon" data-l10n="game-aim-line">Aim Line</a> <a id="btn-game-sound" class="btn-sound-toggle btn-game-menu btn-darken audio-on-icon" data-l10n="game-sound">Звук</a> <p class="slider-text" data-l10n="index-master-volume">Уровень Громкости <input type="range" min="0" max="100" value="100" class="slider sl-master-volume"> <p class="slider-text" data-l10n="index-sfx-volume"> Громкость Эффектов <input type="range" min="0" max="100" value="100" class="slider sl-sound-volume"> <p class="slider-text" data-l10n="index-music-volume">Громкость Музыки <input type="range" min="0" max="100" value="100" class="slider sl-music-volume"> <a id="btn-game-quit" class="btn-quit btn-game-menu btn-darken" data-l10n="game-quit-game">Выйти из Игры</a> <a class="js-btn-keybind-restore btn-keybind-restore btn-game-menu btn-darken" data-l10n="game-restore-defaults">Restore Defaults</a> <a id="btn-game-resume" class="btn-game-menu btn-darken" data-l10n="game-return-to-game">Вернуться в Игру</a> <div id="ui-emote-middle" class="ui-emote-middle ui-emote-circle ui-emote-parent" data-key="middle" data-id="0"> <div id="ui-emote-right" class="ui-emote-right ui-emote-quarter ui-emote-parent" data-key="right" data-id="2"> <div id="ui-emote-bottom" class="ui-emote-bottom ui-emote-quarter ui-emote-parent" data-key="bottom" data-id="3"> <div id="ui-emote-left" class="ui-emote-left ui-emote-quarter ui-emote-parent" data-key="left" data-id="4"> <div id="ui-team-ping-bottom-left" class="ui-emote-bottom-left ui-emote-eighth ui-emote-parent" data-id="4"> Бинт Левый Щелчок, чтобы восстановить 15 здоровья. 0            <img class="ui-loot-image" src="img/loot/loot-medical-bandage.svg"> Аптечка Левый Щелчок, чтобы восстановить 100 здоровья. 0            <img class="ui-loot-image" src="img/loot/loot-medical-healthkit.svg"> Сода Левый Щелчок, чтобы увеличить адреналин на 25. Адреналин со временем восстанавливает здоровье. 0            <img class="ui-loot-image" src="img/loot/loot-medical-soda.svg"> Таблетки Левый Щелчок, чтобы увеличить адреналин на 50. 0            <img class="ui-loot-image" src="img/loot/loot-medical-pill.svg"> .50 AE               Патроны для DEagle 50. 0            <img class="ui-loot-image" src="img/loot/loot-ammo-box.svg"> <div class="ui-loot-overlay" style="background: rgba(30,30,30,0.75)"> 9мм Патроны для M9, G18C, M93R, P30L, MP5, MAC-10, UMP9, CZ-3A1 и Vector. 0            <img class="ui-loot-image" src="img/loot/loot-ammo-box.svg"> <div class="ui-loot-overlay" style="background: rgba(255,153,0,0.75)"> .308 Subsonic Патроны для AWM-S. 0            <img class="ui-loot-image" src="img/loot/loot-ammo-box.svg"> <div class="ui-loot-overlay" style="background: rgba(49,56,0,0.75)"> 12 калибр Патроны для M870, M1100, SPAS-12, Сайга-12, USAS-12, Super 90 и MP220. 0            <img class="ui-loot-image" src="img/loot/loot-ammo-box.svg"> <div class="ui-loot-overlay" style="background: rgba(255,0,0,0.75)"> Flare Патроны для Flare Gun. 0            <img class="ui-loot-image" src="img/loot/loot-ammo-box.svg"> <div class="ui-loot-overlay" style="background: rgba(255,85,0,0.75)"> 7.62мм Патроны для AK-47, SCAR-H, M39, Винтовка Мосина, SV-98, M1, BAR, AN-94, Печенег, Гроза, OT-38 и DP-28. 0            <img class="ui-loot-image" src="img/loot/loot-ammo-box.svg"> <div class="ui-loot-overlay" style="background: rgba(0,102,255,0.75)"> .45 ACP Патроны M1911, M1A1, Model 94, Vector для Peacemaker. 0            <img class="ui-loot-image" src="img/loot/loot-ammo-box.svg"> <div class="ui-loot-overlay" style="background: rgba(121,0,255,0.75)"> 5.56мм Патроны для FAMAS, M416, QBB-97, Mk 12 и M249. 0            <img class="ui-loot-image" src="img/loot/loot-ammo-box.svg"> <div class="ui-loot-overlay" style="background: rgba(3,123,0,0.75)"> <img id="mag-glass-white" src="img/gui/mag-glass.svg"> <img id="ui-minimize-img" src="img/gui/minimize.svg"> 0                    0 : 0             0             0             0           В живых 0          Убийства 1 x               2 x                4 x                8 x                15 x           Ожидание игроков ...           Наблюдение за Not Enough Space! 0            0           <img class="ui-armor-image ui-loot-image" src=""> <img class="ui-armor-image ui-loot-image" src=""> <img class="ui-armor-image ui-loot-image" src=""> <img class="ui-armor-image ui-loot-image" src=""> <img class="ui-armor-image ui-loot-image" src=""> 1              <img class="ui-weapon-image" src=""> 2              <img class="ui-weapon-image" src=""> 3              <img class="ui-weapon-image" src=""> 4              0               <img class="ui-weapon-image" src=""> <a class="menu-option btn-darken" id="btn-spectate-next-player" data-l10n="game-next-teammate">Следующий Напарник</a> <a class="menu-option btn-darken" id="btn-spectate-prev-player" data-l10n="game-previous-teammate">Предыдущий Напарник</a> <a class="menu-option btn-darken" id="btn-spectate-view-stats" data-l10n="game-view-match-stats">Посмотреть Статистику Матча</a> <a class="menu-option btn-darken btn-quit" id="btn-spectate-quit" data-l10n="game-leave-game">Покинуть Игру</a> Твои Результаты <div id="surviv-io_300x250_2"> <div id="surviv-io_300x250_mobile_2"> if (window.webviewDetected) { var swapTag = window.phoneDetected ? 'surviv-io_300x250_mobile_2' : 'surviv-io_300x250_2' document.getElementById(swapTag).id = 'surviv-io_300x250_webview_2'; }     <a href="https://www.amazon.com/s?rh=n%3A7141123011%2Cp_4%3Asurviv.io&amp;ref=w_bl_sl_s_ap_web_7141123011" target="_blank"></a> Please consider supporting us by disabling your adblocker. Сейчас стримят! <a href="https://www.twitch.tv/canon1013" target="_blank" class="btn-streamer btn-darken" style="background-image: url(&quot;https://static-cdn.jtvnw.net/jtv_user_pictures/98c7e08b-9451-4b85-874b-89bf9a184310-profile_image-300x300.png&quot;);">canon1013 13 viewers </a> <a href="https://www.twitch.tv/notsashaa" target="_blank" class="btn-streamer btn-darken" style="background-image: url(&quot;https://static-cdn.jtvnw.net/jtv_user_pictures/c2e6c104-cab8-4e05-842f-c2d95d4ea13a-profile_image-300x300.png&quot;);">NotSashaa 5 viewers </a> <a href="https://www.twitch.tv/kryptopow" target="_blank" class="btn-streamer btn-darken" style="background-image: url(&quot;https://static-cdn.jtvnw.net/jtv_user_pictures/452fd4ef-1eb1-4a20-8ce9-cd1edc29a368-profile_image-300x300.jpg&quot;);">kryptopow 2 viewers </a> <a href="" target="_blank" class="btn-streamer btn-darken"></a> Рекомендуемые Ютуберы <a href="https://www.youtube.com/watch?v=gRkMeWKxpVE" target="_blank" class="btn-youtuber btn-darken">Демастер</a> <!- Accounts Modals -> <h2 id="modal-account-name-title" data-l10n="index-create-account">Create Account <p id="modal-account-name-desc" class="modal-settings-text" data-l10n="index-set-account-name">Set your account name <input type="text" class="menu-option player-name-input" tabindex="0" placeholder="Enter name" id="modal-account-name-input" maxlength="16"> <h3 id="modal-account-name-finish" class="finish" data-l10n="index-finish">Finish <h2 id="modal-account-name-title" data-l10n="index-delete-account">Delete Account <p id="modal-account-delete-desc" class="modal-settings-text" data-l10n="index-delete-account-desc">Enter "DELETE" to delete your account: <input type="text" class="menu-option player-name-input" tabindex="0" placeholder="" id="modal-account-delete-input" maxlength="16"> <h3 id="modal-account-delete-finish" class="finish" data-l10n="index-confirm">Confirm <h2 data-l10n="index-customize-avatar">Customize Avatar <div id="customize-account-avatar" class="ui-emote-middle ui-emote-circle ui-emote-parent" data-slot="customizeAvatar" data-id=""> Done <h2 data-l10n="index-account">Account <p data-l10n="index-log-in-with">Log in with Facebook Google Twitch Discord <a href="/stats" target="_blank" class="btn-player-stats-link menu-option menu-option-mobile-account btn-darken" data-l10n="index-my-stats">My Stats</a> <div class="btn-account-settings btn-account-turq menu-option menu-option-mobile-account btn-darken btn-standard" data-l10n="index-settings">Настройки <div class="btn-account-link btn-account-turq menu-option menu-option-mobile-account btn-darken btn-standard" data-l10n="index-link-account">Link Account <div class="btn-account-logout btn-account-grey menu-option menu-option-mobile-account btn-darken btn-standard" data-l10n="index-log-out">Log Out <div class="btn-account-change-avatar btn-account-turq menu-option menu-option-mobile-account btn-darken btn-standard" data-l10n="index-change-avatar">Change Avatar <div class="btn-account-change-name btn-account-turq menu-option menu-option-mobile-account btn-darken btn-standard" data-l10n="index-change-account-name">Change Account Name <div class="btn-account-delete btn-account-turq menu-option menu-option-mobile-account btn-darken btn-standard" data-l10n="index-delete-account">Delete Account <div class="btn-account-back btn-account-grey menu-option menu-option-mobile-account btn-darken btn-standard" data-l10n="index-back">Back <p data-l10n="index-link-account-to">Link account to                     Facebook Google Twitch Discord <div class="btn-account-back btn-account-grey menu-option menu-option-mobile-account btn-darken btn-standard" data-l10n="index-back">Back <!- Accounts -> Log in to track your stats! <a href="/stats" target="_blank" class="btn-leaderboard-stats-link menu-option btn-darken" data-l10n="index-leaderboards">Leaderboards</a> <p data-l10n="index-log-in-with">Log in with Facebook Google Twitch Discord <a href="/stats" target="_blank" class="btn-leaderboard-stats-link menu-option btn-darken" data-l10n="index-leaderboards">Leaderboards</a> <a href="/stats" target="_blank" class="btn-player-stats-link menu-option btn-darken" data-l10n="index-my-stats">My Stats</a> <div class="btn-account-settings btn-account-turq menu-option btn-darken btn-standard" data-l10n="index-settings">Настройки <div class="btn-account-link btn-account-turq menu-option btn-darken btn-standard" data-l10n="index-link-account">Link Account <div class="btn-account-logout btn-account-grey menu-option btn-darken btn-standard" data-l10n="index-log-out">Log Out <div class="btn-account-change-avatar btn-account-turq menu-option btn-darken btn-standard" data-l10n="index-change-avatar">Change Avatar <div class="btn-account-change-name btn-account-turq menu-option btn-darken btn-standard" data-l10n="index-change-account-name">Change Account Name <div class="btn-account-delete btn-account-turq menu-option btn-darken btn-standard" data-l10n="index-delete-account">Delete Account Back <p data-l10n="index-link-account-to">Link account to                 Facebook Google Twitch Discord Back Rotate to landscape for a better experience. <a href="https://www.amazon.com/s?rh=n%3A7141123011%2Cp_4%3Asurviv.io&amp;ref=w_bl_sl_s_ap_web_7141123011" target="_blank"></a> Please consider supporting us by disabling your adblocker. <div class="ad-block-med-rect" id="surviv-io_300x250" data-google-query-id="CJqHzJn8zuICFQ_EwAodviwMNQ"> <div id="google_ads_iframe_/421469808/surviv.io_300x250_0__container__" style="border: 0pt none;"><iframe id="google_ads_iframe_/421469808/surviv.io_300x250_0" title="3rd party ad content" name="google_ads_iframe_/421469808/surviv.io_300x250_0" width="300" height="250" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" srcdoc="" style="border: 0px; vertical-align: bottom;" data-google-container-id="1" data-load-complete="true"> if (window.webviewDetected) { if (window.webviewVersion < '1.0.8') { document.getElementById('surviv-io_300x250').id = 'surviv-io_300x250_webview'; aiptag.cmd.display.push(function { aipDisplayTag.display('surviv-io_300x250_webview'); }); }                } else { aiptag.cmd.display.push(function { aipDisplayTag.display('surviv-io_300x250'); }); }                   <input type="text" class="menu-option player-name-input" tabindex="0" placeholder="Enter your name here" id="player-name-input-solo" maxlength="16"> <a class="btn-darken menu-option player-options-btn" id="btn-customize"></a> <select id="server-select-main" class="server-select menu-option btn-hollow btn-hollow-selected"> <optgroup id="server-opts" label="Регион" data-l10n="index-region"> <option value="na" data-label="Северная Америка" data-l10n="index-north-america">Северная Америка [1,703 players] <option value="sa" data-label="Южная Америка" data-l10n="index-south-america">Южная Америка [234 players] <option value="eu" data-label="Европа" data-l10n="index-europe">Европа [325 players] <option value="as" data-label="Азия" data-l10n="index-asia">Азия [863 players] <option value="kr" data-label="Южная Корея" data-l10n="index-korea">Южная Корея [322 players] <a class="btn-green btn-darken menu-option" id="btn-start-mode-0" data-label="Играть Соло" data-l10n="index-play-solo">Играть Соло</a> <a class="btn-green btn-darken menu-option" id="btn-start-mode-1" data-label="Играть в Дуэте" data-l10n="index-play-duo">Играть в Дуэте</a> <a class="btn-green btn-darken menu-option" id="btn-start-mode-2" data-label="Играть в Отряд" data-l10n="index-play-squad">Играть в Отряд</a> <a class="btn-darken menu-option btn-team-option" id="btn-join-team" data-l10n="index-join-team">Войти в команду</a> <a class="btn-darken menu-option btn-team-option" id="btn-create-team" data-l10n="index-create-team">Создать Команду</a> Как играть <h1 data-l10n="index-controls">Управление Перемещение : W, A, S, D                     Целиться : Мышь Ударить / Выстрелить : Левый Щелчок Сменить Оружие : 1-4 или Колесо Прокрутки <p class="hide-on-mobile"> Убрать оружие из рук : 3 или Е <p class="hide-on-mobile"> Смена на Предыдущее Оружие : Q                     <p class="hide-on-mobile"> Switch Gun Slots : T or drag gun to other slot Перезарядка : R                     Смена прицела : Левый щелчок на Прицел Подобрать добычу / Добычу / оживление : F                     Медицинский Предмет change on Медикамент : Левый Щелчок на Предмет или цифры от 0-7 Выкинуть предмет : Правый Щелчок на Предмет Отменить действие : X                     Посмотреть Карту : M или G                      <p class="hide-on-mobile"> Переключить режим просмотра : V                      Использование команд : Удерживая C зажать Правую кнопку мыши и водить мышкой, затем выбрав команду отпустить Использование Эмодзи : Зажать Правую кнопку мыши и водить мышкой, затем отпустить Правую кнопку мыши <h1 data-l10n="index-how-to-play">Как играть <p data-l10n="index-tips-1-desc">Цель surviv.io - остаться последним выжившим. В одном раунде у вас только одна жизнь и нет возможности возродиться. <h1 data-l10n="index-tips-2">PUBG в 2D <p data-l10n="index-tips-2-desc">Если вы играли в другие игры жанра Королевской Битвы (такие как PUBG, Fortnite или H1Z1), то вы уже знаете правила. По сути, surviv.io - это двумерный PUBG (только меньше лагает). <h1 data-l10n="index-tips-3">Убивай и добывай <p data-l10n="index-tips-3-desc">Вы начнете игру без каких-либо предметов или оружия, у вас есть только простой рюкзак. Передвигайтесь по карте, чтобы найти полезные вещи: оружие, боеприпасы, прицелы и медикаменты. Убивайте других игроков и забирайте себе их вещи! <h1 data-l10n="index-tips-4">Красный - опасный! <p data-l10n="index-tips-4-desc">Другие игроки - это не единственное, что может вас ранить. По ходу игры Красная Зона будет надвигаться с краёв карты и наносить всё больше урона, если вы окажетесь в ней. Так что посматривайте на карту и будьте осторожны! <a class="btn-darken menu-option" id="btn-team-leave" data-l10n="index-leave-team">Покинуть Команду</a> Присоединение к Команде ...                       Создание Команды ...                        Ссылка-приглашение : <a id="team-copy-url" class="copy-item btn-darken"></a> <a id="team-hide-url" class="hide-item btn-darken"></a> Код приглашения : <select id="team-server-select" class="btn-hollow btn-hollow-selected server-select menu-option"> <optgroup id="team-server-opts" label="Region"> <option value="na" data-label="Северная Америка" data-l10n="index-north-america">Северная Америка <option value="sa" data-label="Южная Америка" data-l10n="index-south-america">Южная Америка <option value="eu" data-label="Европа" data-l10n="index-europe">Европа <option value="as" data-label="Азия" data-l10n="index-asia">Азия <option value="kr" data-label="Южная Корея" data-l10n="index-korea">Южная Корея <a class="btn-hollow btn-hollow-selected btn-darken team-menu-option btn-team-queue" id="btn-team-queue-mode-1" data-l10n="index-duo">Дуэт</a> <a class="btn-hollow btn-hollow-selected btn-darken team-menu-option btn-team-queue" id="btn-team-queue-mode-2" data-l10n="index-squad">Отряд</a> <a class="btn-hollow btn-hollow-selected btn-darken team-menu-option btn-team-fill" id="btn-team-fill-auto" data-l10n="index-auto-fill">Автозаполнение</a> <a class="btn-hollow btn-darken team-menu-option btn-team-fill" id="btn-team-fill-none" data-l10n="index-no-fill">Не заполнять</a> <a class="btn-green btn-darken menu-option" id="btn-start-team" data-label="Играть" data-l10n="index-play">Играть</a> Есть ссылка на команду или код? Напиши его сюда: Invalid link! <input type="text" class="menu-option" contenteditable="false" tabindex="0" autofocus="" placeholder="Paste team link or enter code here" id="team-link-input"> <a class="btn-darken menu-option btn-team-option" id="btn-team-mobile-link-join" data-l10n="index-join-team">Войти в команду</a> <a class="btn-darken menu-option" id="btn-team-mobile-link-leave" data-l10n="index-back-to-main">Вернуться в главное меню</a> What's New! May 30, 2019 Clubbed to death The Island's finest (and only) club is open for business. First constructed in 1977 by a wealthy arms dealer, this expansive building also houses an underground bath and steam rooms. Be on the lookout for our newest weapon, the Groza assault rifle. The 7.62's answer to the HK416, this bullpup has the bite to back up it's bark. Rumor has it an even more powerful, suppressed version is stored inside the club's main vault. Club admission is free, but don't arrive fashionably late ... or you'll be wearing a full metal jacket. May 18, 2019 Out of refills The faction badges are going back into storage. Our next update will arrive by the end of the month, and it's going to be a doozy! Follow us on <a href="https://www.instagram.com/surviviogame/" target="_blank">Instagram</a> for official leaks and sneak peeks. May 10, 2019 Pills here 50v50 is back for round three, and brings with it role three: the medic. Each medic is granted a bright white helmet that won't at all draw attention to their location. Medics also get full meds and a special perk: Mass Medicate. This perk makes all medical items and revives affect every nearby teammate. So get cozy with your team's medic, spam the medical emote (hold C and then right click!), and get healed. Just keep an eye out for bullets and frags. And MIRVs and strobes. And stay away from that smoky barrel ...                          May 1, 2019 Oven roasted Well done, survivrs! Your collective efforts helped us to better understand the chaotic nature of these Island-grown potatoes. FSTMS division chief Dr. Spud Solanum says, "We've learned enough to proceed to phase two: weaponized tubers! Our first prototype will be ready in thirty days ... probably." <a href="https://facebook.com/surviviogame" target="_blank" class="btn-social btn-darken btn-facebook"></a> <a href="https://twitter.com/survivio" target="_blank" class="btn-social btn-darken btn-twitter"></a> <a href="https://www.instagram.com/surviviogame/" target="_blank" class="btn-social btn-darken btn-instagram"></a> <a href="https://discord.gg/survivio" target="_blank" class="btn-social btn-darken btn-discord"></a> <a href="https://www.youtube.com/c/survivio?sub_confirmation=1" target="_blank" class="btn-social btn-darken btn-youtube"></a> <div class="ad-block-leaderboard-bottom" id="surviv-io_728x90" data-google-query-id="CI7U7pn8zuICFVefAQodDtcGtA"> <div id="google_ads_iframe_/421469808/surviv.io_728x90_0__container__" style="border: 0pt none;"><iframe id="google_ads_iframe_/421469808/surviv.io_728x90_0" title="3rd party ad content" name="google_ads_iframe_/421469808/surviv.io_728x90_0" width="728" height="90" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" srcdoc="" data-google-container-id="2" style="border: 0px; vertical-align: bottom;" data-load-complete="true"> if (window.webviewDetected) { if (window.webviewVersion < '1.0.8') { document.getElementById('surviv-io_728x90').id = 'surviv-io_728x90_webview'; aiptag.cmd.display.push(function { aipDisplayTag.display('surviv-io_728x90_webview'); }); }          } else { aiptag.cmd.display.push(function { aipDisplayTag.display('surviv-io_728x90'); }); }         <a href="https://play.google.com/store/apps/details?id=io.surviv.surviv_io_mobile" target="_blank" class="btn-download-android btn-download-app btn-darken"></a> <a href="https://itunes.apple.com/us/app/surviv-io/id1401727934?ls=1&amp;mt=8" target="_blank" class="btn-download-ios btn-download-app btn-darken"></a> <a href="changelog.html" target="_blank">ver 0.7.7</a> <a href="proxy.txt" target="_blank" data-l10n="index-proxy-sites">прокси сайты</a> <select class="language-select"> Dansk Deutsch English Español Français Italiano Nederlands Polski Português Русский Svenska Tiếng Việt Türkçe 日本語 한국어 ภาษาไทย <option value="zh-cn">中文简体 <option value="zh-tw">中文繁體 <a href="https://play.google.com/store/apps/details?id=io.surviv.surviv_io_mobile" target="_blank" class="btn-download-android btn-download-app-mobile btn-darken"></a> <a href="https://itunes.apple.com/us/app/surviv-io/id1401727934?ls=1&amp;mt=8" target="_blank" class="btn-download-ios btn-download-app-mobile btn-darken"></a> <!- Modals -> <h2 data-l10n="index-customize-keybinds">Customize Keybinds Share your keybinds with this code : aFvc42SfhpoFlrJKVkA1fx+5afasdf9034hfSF09nASqqF Load keybinds using a code here : Invalid code! <input type="text" class="menu-option" contenteditable="false" tabindex="0" autofocus="" placeholder="Paste a keybind code here" id="keybind-code-input"> <a class="btn-game-menu btn-darken" id="btn-keybind-code-load" data-l10n="index-keybind-apply">Load</a> <a class="js-btn-keybind-share btn-game-menu btn-darken" data-l10n="game-share">Share</a> <a class="js-btn-keybind-restore btn-game-menu btn-darken" data-l10n="game-restore-defaults">Restore Defaults</a> <h2 data-l10n="index-customize-loadout">Настраиваемые эмоции <div id="customize-emote-top" class="ui-emote-top ui-emote-quarter ui-emote-parent" data-slot-idx="0" data-id=""> <div id="customize-emote-right" class="ui-emote-right ui-emote-quarter ui-emote-parent" data-slot-idx="1" data-id=""> <div id="customize-emote-bottom" class="ui-emote-bottom ui-emote-quarter ui-emote-parent" data-slot-idx="2" data-id=""> <div id="customize-emote-left" class="ui-emote-left ui-emote-quarter ui-emote-parent" data-slot-idx="3" data-id=""> <div id="customize-emote-win" class="ui-emote-middle ui-emote-circle ui-emote-parent" data-slot-idx="4" data-id=""> <div id="customize-emote-death" class="ui-emote-middle ui-emote-circle ui-emote-parent" data-slot-idx="5" data-id=""> Follow to unlock emotes! <a href="https://twitter.com/intent/follow?region=follow_link&amp;screen_name=survivio&amp;tw_p=followbutton" target="_blank" id="btn-twitter-follow-unlock" class="menu-option btn-darken btn-social-unlock" data-lock-reason="twitter" data-l10n="index-twitter-follow">Следовать в Twitter</a> Subscribe to unlock emotes! <a href="https://www.youtube.com/c/survivio?sub_confirmation=1" target="_blank" id="btn-youtube-subscribe-unlock" class="menu-option btn-darken btn-social-unlock" data-lock-reason="youtube" data-l10n="index-youtube-subscribe">Подписаться на YouTube</a> Like to unlock emotes! <a href="https://www.facebook.com/surviviogame/" target="_blank" id="btn-facebook-like-unlock" class="menu-option btn-darken btn-social-unlock" data-lock-reason="facebook" data-l10n="index-facebook-like">Лайкнуть в Facebook</a> Follow to unlock emotes! <a href="https://www.instagram.com/surviviogame/" target="_blank" id="btn-instagram-follow-unlock" class="menu-option btn-darken btn-social-unlock" data-lock-reason="instagram" data-l10n="index-instagram-follow">Instagram Follow</a> <h2 data-l10n="index-settings">Настройки <select class="language-select"> Dansk Deutsch English Español Français Italiano Nederlands Polski Português Русский Svenska Türkçe 日本語 한국어 ภาษาไทย <option value="zh-cn">中文简体 <option value="zh-tw">中文繁體 <input id="highResTex" type="checkbox"><p class="modal-settings-checkbox-text" data-l10n="index-high-resolution">Высокое разрешение (проверьте, чтобы увеличить качество изображения) <input id="screenShake" type="checkbox"><p class="modal-settings-checkbox-text" data-l10n="index-screen-shake">Дрожание экрана <input id="anonPlayerNames" type="checkbox"><p class="modal-settings-checkbox-text" data-l10n="index-anon-player-names">Anonymize player names <p class="modal-slider-text" data-l10n="index-master-volume">Уровень Громкости <input type="range" min="0" max="100" value="50" class="slider sl-master-volume" id=""> <p class="modal-slider-text" data-l10n="index-sfx-volume"> Громкость Эффектов <input type="range" min="0" max="100" value="50" class="slider sl-sound-volume" id=""> <p class="modal-slider-text" data-l10n="index-music-volume">Громкость Музыки <input type="range" min="0" max="100" value="50" class="slider sl-music-volume" id=""> <a href="#" class="btn-cookie-settings footer-after">cookie settings</a> <a href="privacy.html" target="_blank" class="footer-after" data-l10n="index-privacy">Конфиденциальность</a> <a href="attribution.txt" target="_blank" class="footer-after" data-l10n="index-attributions">атрибуции</a> <a href="hof.html" target="_blank" data-l10n="index-hof">HOF</a> <!-            Featured YouTuber <a href='' target='_blank' class='btn-youtuber btn-darken'></a> ->           <a href="/stats" target="_blank" class="btn-leaderboard-stats-link menu-option btn-darken" data-l10n="index-leaderboards">Leaderboards</a> <a href="https://facebook.com/surviviogame" target="_blank" class="btn-social btn-darken btn-facebook"></a> <a href="https://twitter.com/survivio" target="_blank" class="btn-social btn-darken btn-twitter"></a> <a href="https://www.instagram.com/surviviogame/" target="_blank" class="btn-social btn-darken btn-instagram"></a> <a href="https://discord.gg/survivio" target="_blank" class="btn-social btn-darken btn-discord"></a> <!- <a href='https://www.youtube.com/c/survivio?sub_confirmation=1' target='_blank' class='btn-social btn-darken btn-youtube'></a> -> <a href="changelog.html" class="footer-after">ver 0.7.7</a> <a href="#" class="btn-cookie-settings footer-after">cookie settings</a> <a href="privacy.txt" target="_blank" class="footer-after">privacy</a> <a href="attribution.txt" target="_blank">attributions</a> Alert <p class="modal-settings-text"> <h3 class="close close-footer">OK New Update! <p class="modal-settings-text">A new version of surviv.io is available! Press "OK" below to reload the page. <h3 id="force-refresh" class="close close-footer">OK Cookie Settings <p class="modal-settings-text">We use cookies to personalize content and ads, to provide social media features, and to analyze our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you've provided to them or that they've collected from your use of their services. You consent to our cookies if you continue to use our website. Click <a href="#" id="btn-cookie-opt-out" class="close">here</a> to opt out of using cookies. <h3 class="close close-footer"> Got it! <script type="text/javascript" src="js/manifest.f3ef410c.js"> <script type="text/javascript" src="js/vendor.68755964.js"> <script type="text/javascript" src="js/app.ff782cb1.js"> /* Breaks in Bootstrap 4 are: * * extra large devices (wide screens): 1200px, * large devices (desktops): 992px, * medium devices (tablets): 768px, * small devices (phones): 576px * * However... iPhone X landscape width: 812px * https://mydevice.io/devices/ */ img { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; user-drag: none; } -webkit-filter: none; filter: none; } .click-through { pointer-events: none; } cursor: crosshair; left: 0; position: absolute !important; top: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } -webkit-filter: none; filter: none; height: 100%; left: 0px; position: absolute; top: 0px; width: 100%; } color: #FFF; pointer-events: all; position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%) scale(1); transform: translateX(-50%) translateY(-50%) scale(1); z-index: 10; } @media screen and (min-width: 851px) and (max-height: 768px), (max-width: 1200px) { #ui-center { -webkit-transform: translateX(-50%) translateY(-50%) scale(0.85); transform: translateX(-50%) translateY(-50%) scale(0.85); } } @media screen and (max-width: 850px) { #ui-center { pointer-events: all; -webkit-transform: translateX(-50%) translateY(-50%) scale(0.85); transform: translateX(-50%) translateY(-50%) scale(0.85); z-index: 10; } } @media (max-width: 850px) and (max-height: 300px) { #ui-center { -webkit-transform: translateX(-50%) translateY(-50%) scale(0.775); transform: translateX(-50%) translateY(-50%) scale(0.775); } } background-color: rgba(0, 0, 0, 0.5); border-radius: 5px; box-sizing: border-box; display: none; margin: 10px auto; padding: 10px 15px; } @media screen and (max-width: 850px) { #ui-game-menu { height: initial; padding: 4px 10px; width: 190px; } } @media (max-width: 850px) and (max-height: 300px) { #ui-game-menu { margin-top: 0px; } } bottom: 4px; display: inline-block; font-size: 14px; position: relative; } @media screen and (max-width: 850px) { #ui-game-menu p { bottom: 0px; font-size: 12px; margin-bottom: 8px; margin-top: 6px; } } .ui-game-menu-desktop { height: 495px; width: 350px; } .btns-game-double-row { display: flex; position: relative; } .btns-game-double-row > .btn-game-container { position: relative; width: 100%; } .btns-game-double-row > .btn-game-container > .btn-double-row { display: inline-block; } .btns-game-double-row > div:not(:last-child) { margin-right: 2px; } .game-menu-icon-toggle { background-size: 22px; background-position: center; background-repeat: no-repeat; bottom: 13px; display: inline-block; height: 22px; left: 60%; pointer-events: none; position: absolute; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 22px; } .btn-game-touch-style { background-color: #50afab; background-position: 4px 4px; background-repeat: no-repeat; background-size: 20px; border: 0px; border-bottom: none; border-radius: 5px; box-shadow: inset 0 -2px #387c79; box-sizing: border-box; color: white; cursor: pointer; display: block; font-size: 14px; height: 30px; line-height: 30px; margin: auto; margin-top: 2px; margin-bottom: 4px; position: relative; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); width: 100%; } .movement-icon { background-image: url(../img/gui/movement.svg); } .target-icon { background-image: url(../img/gui/target.svg); } .aim-line-on-icon { background-image: url(../img/gui/checked.svg); } .aim-line-off-icon { background-image: url(../img/gui/close.svg); } text-align: center; color: white; line-height: 36px; font-size: 16px; background-color: transparent; border: 2px solid; border-color: white; box-shadow: none; cursor: pointer; flex: 1; } border: 2px solid !important; border-color: #00ff00 !important; background-color: rgba(0, 0, 0, 0.35); } .game-menu-icon-static { background-size: 36px; background-position: center; background-repeat: no-repeat; bottom: 13px; display: inline-block; height: 26px; left: 50%; pointer-events: none; position: absolute; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 36px; } .settings-icon { background-image: url(../img/gui/cog.svg); } .keybind-icon { background-image: url(../img/gui/keyboard.svg); } display: block; height: initial; } .ui-game-tab-settings-desktop { height: 340px; } display: none; height: 345px; } margin-top: 20px; } height: 295px; overflow-y: scroll; pointer-events: all; } position: absolute; bottom: 52px; } position: absolute; color: white; width: 92px; height: 36px; top: 174px; left: 96px; background: rgba(0, 0, 0, 0.4); border-radius: 5px; } bottom: 3px; display: none; font-size: 24px; left: 12px; position: absolute; text-align: center; width: 92px; } color: #ff0000; display: inline-block; font-size: 24px; font-weight: bold; position: relative; } color: #00d2ff; display: inline-block; font-size: 24px; font-weight: bold; position: relative; } height: 190px; width: 190px; left: -4px; top: -22px; z-index: 0; background-color: transparent; } display: none; } left: 124px; } .ui-map-wrapper-mobile { bottom: initial; color: #FFF; display: block; font-size: 16px; left: 6px; top: 46px; } .ui-map-wrapper-mobile .ui-players-alive { left: 4px; } .ui-map-wrapper-mobile #ui-map-counter-default { position: relative; display: inline-block; font-size: 24px; text-align: center; bottom: 10px; left: 9px; } .ui-map-wrapper-mobile .ui-map-icon { padding: 6px; display: inline-block; height: 24px; width: 18px; margin-left: 0px; background-size: 24px; background-repeat: no-repeat; background-position: 6px 6px; } .ui-map-wrapper-mobile #ui-map-info { position: absolute; color: white; width: 92px; height: 36px; top: 174px; left: -2px; background: rgba(0, 0, 0, 0.4); border-radius: 5px; } .ui-map-wrapper-mobile #ui-spec-counter { position: absolute; color: white; width: 68px; height: 28px; top: 135px; left: 60px; background: rgba(0, 0, 0, 0.4); border-radius: 5px; } .ui-map-wrapper-mobile #ui-spec-counter-icon { padding: 6px; display: inline-block; height: 24px; width: 18px; margin-left: 2px; background-size: 20px; background-repeat: no-repeat; background-position: 6px 4px; background-image: url(../img/gui/eye.svg); } .ui-map-wrapper-mobile #ui-spec-counter-number { position: relative; display: inline-block; font-size: 20px; width: 24px; text-align: center; bottom: 15px; left: 0px; } .ui-map-wrapper-mobile .gas-icon { background-image: url(../img/gui/gas.svg); } .ui-map-wrapper-mobile .danger-icon { background-image: url(../img/gui/danger.svg); } .ui-map-wrapper-mobile .alive-icon { background-image: url(../img/gui/player-gui.svg); } .ui-map-wrapper-mobile .icon-pulse { -webkit-animation: pulse 2s linear infinite; animation: pulse 2s linear infinite; } .ui-map-wrapper-mobile .ui-settings-button { position: absolute; color: white; border-radius: 5px; pointer-events: all; } .ui-map-wrapper-mobile .ui-settings-button img { position: absolute; left: 6px; top: 6px; height: 36px; width: 36px; background-size: 36px; background-repeat: no-repeat; transform: scale(1); -webkit-transition: all 100ms ease-in; -webkit-transform: scale(1); -ms-transition: all 100ms ease-in; -ms-transform: scale(1); -moz-transition: all 100ms ease-in; -moz-transform: scale(1); transition: all 100ms ease-in; transition: opacity 0.25s ease-out; -moz-transition: opacity 0.25s ease-out; -webkit-transition: opacity 0.25s ease-out; -o-transition: opacity 0.25s ease-out; } .ui-map-wrapper-mobile .ui-settings-button .map-img-after { display: none; } .ui-map-wrapper-mobile .ui-settings-button:hover { -webkit-transform: scale(1); transform: scale(1); } .ui-map-wrapper-desktop { position: absolute; bottom: 12px; left: 12px; } position: absolute; z-index: 1; } position: relative; } cursor: pointer; left: 2px; top: -18px; height: 48px; width: 48px; opacity: 0.8; background-color: rgba(0, 0, 0, 0.4); background-size: 48px; background-repeat: no-repeat; background-position: center; background-image: url(../img/gui/cog.svg); z-index: 1; } /** * ui-big-map */ display: none; height: 100%; width: 100%; } height: 100%; left: 50%; margin: auto; pointer-events: all; position: fixed; top: 0px; -webkit-transform: translateX(-50%); transform: translateX(-50%); } display: none; position: absolute; margin-left: auto; height: 64px; width: 64px; right: 6px; top: 6px; border-radius: 6px; background-color: rgba(0, 0, 0, 0.5); background-repeat: no-repeat; background-size: 48px; background-position: center; background-image: url(../img/gui/close.svg); pointer-events: all; } /** * ui-right-center */ position: absolute; color: #FFF; opacity: 0.75; transition: opacity 0.25s ease-out; -moz-transition: opacity 0.25s ease-out; -webkit-transition: opacity 0.25s ease-out; -o-transition: opacity 0.25s ease-out; } .ui-right-center-desktop { top: 40%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 12px; } .ui-right-center-mobile { height: 100%; left: 50%; top: 10px; -webkit-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1); width: 100%; } .ui-right-center-tablet { height: initial; left: initial; top: 12px !important; -webkit-transform: scale(0.8); transform: scale(0.8); -webkit-transform-origin: top right; transform-origin: top right; right: 6px; width: initial; } .ui-right-center-tablet-ipad-browser { height: initial; left: initial; top: 12px !important; -webkit-transform: scale(0.65); transform: scale(0.65); -webkit-transform-origin: top right; transform-origin: top right; right: 6px; width: initial; } @media (max-height: 600px) { .ui-right-center-tablet { -webkit-transform: scale(0.55); transform: scale(0.55); } .ui-right-center-tablet-ipad-browser { -webkit-transform: scale(0.55); transform: scale(0.55); } } /** * ui-bottom-right */ .ui-bottom-right-tablet { bottom: 25% !important; right: 6px !important; -webkit-transform: scale(0.8) !important; transform: scale(0.8) !important; -webkit-transform-origin: right !important; transform-origin: right !important; } .ui-bottom-right-tablet-ipad-webview { bottom: 25% !important; right: 6px !important; -webkit-transform: scale(0.75) !important; transform: scale(0.75) !important; -webkit-transform-origin: right !important; transform-origin: right !important; } .ui-bottom-right-tablet-ipad-browser { bottom: 30% !important; right: 6px !important; -webkit-transform: scale(0.65) !important; transform: scale(0.65) !important; -webkit-transform-origin: right !important; transform-origin: right !important; } @media (max-height: 600px) { .ui-bottom-right-tablet-webview { bottom: 25% !important; -webkit-transform: scale(0.65) !important; transform: scale(0.65) !important; -webkit-transform-origin: right !important; transform-origin: right !important; } .ui-bottom-right-tablet-browser { bottom: 30% !important; -webkit-transform: scale(0.6) !important; transform: scale(0.6) !important; -webkit-transform-origin: right !important; transform-origin: right !important; } } /** * ui-bottom-center-right */ .ui-bottom-center-right-tablet { left: 72% !important; -webkit-transform: scale(0.65) !important; transform: scale(0.65) !important; } background: rgba(0, 0, 0, 0.4); background-image: url(../img/gui/emote.svg); background-position: center; background-repeat: no-repeat; background-size: 28px; border-radius: 21px; display: none; height: 42px; position: absolute; right: 108px; top: 0px; width: 42px; } @media screen and (max-width: 850px) { #ui-emote-button { background-size: 20px; border-radius: 14px; bottom: 18px; height: 28px; right: 4px; top: initial; width: 28px; } } /** * ui-top-left */ .ui-top-left-tablet { left: 120px !important; } /** * ui-spectate-options-wrapper */ .ui-spectate-options-wrapper-tablet { bottom: 12px !important; top: initial !important; } .ui-killfeed-wrapper-tablet { top: 60px !important; } @media (max-width: 850px) and (max-height: 320px) { .ui-slider-container { margin-bottom: 0px; } } @media (max-width: 850px) and (max-height: 320px) { .ui-slider-container > p { width: 75px; } } @media screen and (max-width: 850px) { .ui-slider-container > .slider-text { margin-bottom: 0px; } } @media (max-width: 850px) and (max-height: 320px) { .ui-slider-container > .slider { bottom: 3px; width: 85px; } } @media screen and (max-width: 850px) { .ui-slider-container > .slider::-webkit-slider-thumb { width: 24px; height: 24px; } } @media screen and (max-width: 850px) { .ui-slider-container > .slider::-moz-range-thumb { width: 24px; height: 24px; } } background-image: url("../img/surviv_logo_full.png"); background-repeat: no-repeat; background-size: 250px; background-position: center; height: 125px; position: absolute; left: 20px; top: 8px; width: 250px; } @media (max-width: 1280px), (max-height: 768px) { #ui-stats-logo { background-size: 175px; height: 90px; width: 175px; } } @media screen and (max-width: 850px) { #ui-stats-logo { background-size: 124px; bottom: 4px; height: 64px; left: initial; right: 8px; top: initial; width: 124px; } } .ui-hidden { display: none; } .btn-game-menu { /* Added from .menu-option in menu.less */ text-align: center; line-height: 38px; display: block; width: 100%; height: 40px; border: 0px; border-radius: 5px; box-sizing: border-box; position: relative; margin: auto; margin-top: 5px; margin-bottom: 5px; color: white; font-size: 16px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); background-color: #50afab; border-bottom: 2px solid #387c79; box-shadow: inset 0 -2px #387c79; background-repeat: no-repeat; cursor: pointer; } background-size: 34px; background-position: 4px 2px; background-image: url(../img/gui/minimize.svg); } background-size: 44px; background-position: 2px -3px; } background-size: 24px; background-position: 8px 6px; } margin-top: 40px; background-size: 44px; background-position: -2px -3px; background-image: url(../img/gui/quit.svg); } margin-top: 30px; background-size: 44px; background-position: -2px -3px; background-image: url(../img/gui/resume.svg); } /**    * ui-top-center */ position: absolute; color: #FFF; top: 80px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } text-align: center; width: 100vw; padding: 8px; } display: none; color: white; text-shadow: 2px 2px 0px #000000; font-size: 32px; font-weight: bold; } font-size: 32px; font-weight: bold; } .top-center-text .spectate-text { display: inline-block; text-shadow: 2px 2px 0px #000000; font-size: 24px; font-weight: bold; overflow: hidden; height: 32px; } @media (max-width: 1024px) { .top-center-text .spectate-text { font-size: 18px; } } .top-center-text .spectate-desc { color: white; margin-right: 8px; } .ui-spectate-mode { display: none; } position: relative; } max-width: 250px; white-space: nowrap; text-overflow: ellipsis; color: cyan; } /**    * ui-top-center-scopes */ /* Taken from ui-top-center */ position: absolute; color: #FFF; top: 0%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 100%; } margin-top: 12px; text-align: center; } @media (max-height: 768px), (max-width: 1200px) { #ui-top-center-scopes { -webkit-transform: scale(0.85); transform: scale(0.85); } } .ui-zoom { background: rgba(0, 0, 0, 0.3); border-radius: 36px; width: 64px; height: 64px; opacity: 0.6; display: inline-block; } .ui-zoom-hover:hover { opacity: 1.0; } .ui-zoom-active { vertical-align: baseline; opacity: 1.0; transform: scale(1); -webkit-transition: all 100ms ease-in; -webkit-transform: scale(1); -ms-transition: all 100ms ease-in; -ms-transform: scale(1); -moz-transition: all 100ms ease-in; -moz-transform: scale(1); transition: all 100ms ease-in; transition: opacity 0.25s ease-out; -moz-transition: opacity 0.25s ease-out; -webkit-transition: opacity 0.25s ease-out; -o-transition: opacity 0.25s ease-out; } .ui-zoom .ui-zoom-image { width: 64px; height: 64px; opacity: 0.4; padding: 2px; } .ui-zoom .ui-zoom-text { margin-top: 14px; width: 100%; } .ui-zoom .ui-zoom-level { font-size: 32px; text-align: center; width: 100%; /*cursor: inherit;*/ } .ui-zoom .ui-zoom-append { font-size: 24px; } .ui-zoom-inactive { display: none; margin-left: -8px; margin-right: -8px; -webkit-transition: all 100ms ease-in; -webkit-transform: scale(0.5); -ms-transition: all 100ms ease-in; -ms-transform: scale(0.5); -moz-transition: all 100ms ease-in; -moz-transform: scale(0.5); transition: all 100ms ease-in; transform: scale(0.5); } .ui-zoom-inactive:hover { cursor: pointer !important; opacity: 1.0; } /**    * ui-team-pings and ui-emotes */ .ui-emote-wheel { z-index: 3; display: none; position: fixed; } .ui-emote-parent { opacity: 0.75; } .ui-emote-hl { z-index: 2; display: none; } .ui-emote { position: fixed; width: 256px; height: 256px; background-size: 256px; background-repeat: no-repeat; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .ui-emote-bg-circle { opacity: 0.5; background-image: url(../img/gui/ping-part-circle.svg); } .ui-emote-bg-quarter { opacity: 0.5; background-image: url(../img/gui/ping-part-quarter.svg); } .ui-emote-bg-eighth { opacity: 0.5; background-image: url(../img/gui/ping-part-eighth.svg); } .ui-emote-middle .ui-emote-image { width: 24px !important; height: 24px !important; background-size: 24px !important; background-image: url(../img/gui/close.svg); } .ui-emote-top .ui-emote-image { margin-top: -78px; background-image: url(../img/gui/ping-team-danger.svg); } .ui-emote-right .ui-emote { -webkit-transform: translate(-50%, -50%) rotate(90deg); transform: translate(-50%, -50%) rotate(90deg); } .ui-emote-right .ui-emote-image { margin-left: 78px; background-image: url(../img/gui/ping-team-coming.svg); } .ui-emote-bottom .ui-emote { -webkit-transform: translate(-50%, -50%) rotate(180deg); transform: translate(-50%, -50%) rotate(180deg); } .ui-emote-bottom .ui-emote-image { margin-top: 78px; background-image: url(../img/gui/ping-team-help.svg); } .ui-emote-left .ui-emote { -webkit-transform: translate(-50%, -50%) rotate(270deg); transform: translate(-50%, -50%) rotate(270deg); } .ui-emote-left .ui-emote-image { margin-left: -78px; background-image: url(../img/gui/ping-team-help.svg); } .ui-emote-top-left .ui-emote-image { margin-left: -80px; margin-top: -30px; background-image: url(../img/loot/loot-ammo-box.svg); } .ui-emote-bottom-left .ui-emote { -webkit-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg); } .ui-emote-bottom-left .ui-emote-image { margin-left: -80px; margin-top: 30px; background-image: url(../img/loot/loot-medical-healthkit.svg); } .ui-emote-circle .ui-emote-hl { background-image: url(../img/gui/ping-part-circle-highlight.svg); } .ui-emote-quarter .ui-emote-hl { background-image: url(../img/gui/ping-part-quarter-highlight.svg); } .ui-emote-eighth .ui-emote-hl { background-image: url(../img/gui/ping-part-eighth-highlight.svg); } .ui-emote-image { z-index: 1; position: fixed; background-repeat: no-repeat; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .ui-emote-image-large { width: 64px; height: 64px; background-size: 64px; } .ui-emote-image-small { width: 35px; height: 35px; background-size: 35px; } /**    * ui-team-indicators */ .ui-team-indicator { z-index: 2; display: none; position: fixed; top: 0px; left: 0px; border-radius: 32px; width: 64px; height: 64px; background-size: 64px; background-repeat: no-repeat; background-image: url(../img/gui/indicator.svg); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .ui-team-indicator-pos { opacity: 0.75; position: relative; border-radius: 24px; width: 32px; height: 32px; top: 23px; left: 32px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .ui-team-indicator-image { width: 32px; height: 32px; background-size: 32px; background-repeat: no-repeat; background-image: url(../img/gui/ping-team-danger.svg); } .ui-indicator-ping-border { z-index: 0; display: none; position: fixed; top: 0px; left: 0px; width: 160px; height: 160px; position: relative; background-size: 160px; background-repeat: no-repeat; background-image: url(../img/gui/ping-border.svg); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } /**    * ui-top-left */ position: absolute; color: #FFF; font-size: 16px; top: 12px; left: 12px; display: block; } @media (max-height: 768px), (max-width: 1200px) { #ui-top-left { -webkit-transform-origin: top left; transform-origin: top left; -webkit-transform: scale(0.85); transform: scale(0.85); } } .ui-bg-standard { background: rgba(0, 0, 0, 0.24); border-radius: 5px; } .ui-team-member { display: none; position: relative; width: 200px; height: 32px; padding: 4px; margin-bottom: 8px; } .ui-team-member-name { font-weight: bold; text-shadow: 1px 1px 0px #000000; font-size: 16px; max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ui-team-member-color { position: absolute; top: 5px; right: 5px; border-radius: 7px; width: 14px; height: 14px; } .ui-background-yellow { background-color: #ffff00; } .ui-background-blue { background-color: blue; } .ui-background-red { background-color: red; } .ui-background-purple { background-color: #ff00ff; } .ui-background-cyan { background-color: #00ffff; } .ui-background-orange { background-color: #ff5400; } .ui-team-member-status { display: none; position: absolute; top: 4px; right: -38px; width: 32px; height: 32px; background-size: 32px; background-repeat: no-repeat; } .ui-team-member-status-downed { border-radius: 16px; display: block !important; background-image: url(../img/gui/down.svg) !important; } .ui-team-member-status-dead { display: block !important; background-image: url(../img/gui/skull-team.svg) !important; opacity: 0.5 !important; } .ui-team-member-status-disconnected { display: block !important; background-image: url(../img/gui/close.svg) !important; opacity: 0.5 !important; } .ui-team-member-health { margin-top: 4px; } .ui-team-member-health .ui-bar-inner { background-color: white; z-index: 1; position: absolute; border-radius: 4px; width: 200px; height: 10px; transition: width 0.0s; transition-property: width; transition-duration: 0.0s; transition-timing-function: ease-out; transition-delay: initial; } .ui-team-member-health .ui-bar-danger { background: rgba(255, 0, 0, 0.8); -webkit-animation-name: pulse; animation-name: pulse; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-delay: 0; animation-delay: 0; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-fill-mode: none; animation-fill-mode: none; -webkit-animation-play-state: running; animation-play-state: running; } .ui-team-member-health .ui-health-depleted { z-index: 0; background: #929292; transition: width 1.0s; transition-property: width; transition-duration: 1.0s; transition-timing-function: ease-out; transition-delay: initial; } color: #FFF; display: block; left: 12px; position: absolute; top: 12px; } @media (max-height: 768px), (max-width: 1200px) { #ui-spectate-options-wrapper { -webkit-transform: scale(0.85); transform: scale(0.85); -webkit-transform-origin: top left; transform-origin: top left; } } position: relative; pointer-events: all; width: 100%; } display: inline-block; padding: 8px 8px 0px 8px; text-align: center; width: 192px; } position: relative; color: white; font-size: 16px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); background: #50afab; border-bottom: 2px solid #387c79; box-shadow: inset 0 -2px #387c79; cursor: pointer; } margin-bottom: 24px; } vertical-align: top; display: none; } text-align: center; font-size: 24px; font-weight: bold; padding: 8px; } width: 100%; background-color: transparent; margin: auto; margin-right: 0px; border-collapse: collapse; } padding: 0px 8px 8px 16px; font-size: 18px; } .ui-spectate-stats-category { width: 130px; color: rgba(255, 255, 255, 0.75); } .ui-spectate-stats-value { width: 75px; color: white; } position: absolute; color: #FFF; font-size: 16px; top: 12px; right: 12px; display: flex; font-weight: bold; text-align: center; width: 85px; display: inline-block; } @media (max-height: 768px), (max-width: 1200px) { #ui-leaderboard-wrapper { -webkit-transform-origin: top right; transform-origin: top right; -webkit-transform: scale(0.85); transform: scale(0.85); } } display: none; background: rgba(0, 0, 0, 0.4); border-radius: 5px; margin-bottom: 8px; padding: 8px; height: 64px; width: 72px; } display: none; background: rgba(0, 0, 0, 0.4); border-radius: 5px; height: 74px; line-height: 38px; margin-bottom: 8px; padding: 4px; width: 78px; } color: #ff0000; display: block; font-size: 36px; position: relative; } color: #00d2ff; display: block; font-size: 36px; position: relative; } .ui-players-alive { position: relative; font-size: 54px; } .ui-leaderboard-header { font-size: 24px; margin-bottom: 8px; } display: none; margin-top: 32px; } background: rgba(0, 0, 0, 0.4); border-radius: 5px; margin-bottom: 8px; padding: 8px; height: 64px; width: 72px; } .ui-player-kills { position: relative; font-size: 54px; } .ui-kill-counter-header { font-size: 24px; margin-bottom: 8px; } position: absolute; color: #FFF; font-size: 16px; top: 12px; right: 12px; display: flex; } @media screen and (min-width: 851px) and (max-height: 768px), (max-width: 1200px) { #ui-killfeed-wrapper { -webkit-transform-origin: top right; transform-origin: top right; -webkit-transform: scale(0.85); transform: scale(0.85); } } display: inline-block; margin-left: 24px; height: 100px; } width: 800px; } position: absolute; right: 100px; background-color: rgba(0, 0, 0, 0.4); padding: 4px 8px; border-radius: 2px; height: 22px; line-height: 24px; } .killfeed-div div { float: left; font-size: 16px; font-weight: bold; color: #EFEEEE; } max-width: 550px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /** * ui-right-center */ opacity: 1; } width: 90px; } .ui-ammo { background: rgba(0, 0, 0, 0.4); border-radius: 5px; display: inline-block; height: 52px; margin-bottom: 5px; margin-left: 3px; margin-right: 3px; width: 35px; } .ui-ammo > .ui-loot-count { position: absolute; font-size: 20px; font-weight: bold; top: 28px; text-align: center; width: 100%; } .ui-ammo-row { display: flex; } .ui-ammo-row > div:not(:last-child) { margin-right: 10px; } .ui-ammo > .ui-loot-image { bottom: 0; height: 22px; margin-top: 5px; position: absolute; right: 6px; top: 0; width: 22px; } .ui-ammo > .ui-loot-overlay { bottom: 0; height: 22px; margin-top: 5px; position: absolute; right: 6px; top: 0; width: 22px; } opacity: 0 !important; } margin-bottom: 32px; } .ui-medical > .ui-loot-image { position: absolute; height: 30px; width: 30px; background-size: 30px; background-repeat: no-repeat; right: 5px; margin-top: 1px; top: 0; bottom: 0; } .ui-medical:hover { cursor: pointer !important; } .ui-loot { background: rgba(0, 0, 0, 0.4); border-radius: 5px; width: 85px; height: 32px; margin-left: auto; margin-bottom: 5px; } .ui-loot:hover { opacity: 1 !important; } .ui-outline-hover { border: 2px solid rgba(0, 255, 0, 0); } .ui-outline-hover:hover { -webkit-transition: border 100ms ease-out; -moz-transition: border 100ms ease-out; -o-transition: border 100ms ease-out; border: 2px solid #00ff00; } .ui-scale-hover { transform: scale(1); -webkit-transition: all 100ms ease-in; -webkit-transform: scale(1); -ms-transition: all 100ms ease-in; -ms-transform: scale(1); -moz-transition: all 100ms ease-in; -moz-transform: scale(1); transition: all 100ms ease-in; } .ui-scale-hover:hover { -webkit-transition: all 100ms ease-in; -webkit-transform: scale(1.1); -ms-transition: all 100ms ease-in; -ms-transform: scale(1.1); -moz-transition: all 100ms ease-in; -moz-transform: scale(1.1); transition: all 100ms ease-in; transform: scale(1.1); } .ui-loot > .ui-loot-count { position: absolute; font-size: 24px; font-weight: bold; left: 10px; top: 2px; text-align: center; } @media (max-height: 864px), (max-width: 1024px) { .ui-right-center-desktop { top: 42%; -webkit-transform-origin: right; transform-origin: right; -webkit-transform: translateY(-50%) scale(0.8); transform: translateY(-50%) scale(0.8); } #ui-medical-interactive { margin-bottom: 8px; } } @media (max-height: 640px) { .ui-right-center-desktop { top: 42%; -webkit-transform-origin: right; transform-origin: right; -webkit-transform: translateY(-50%) scale(0.7); transform: translateY(-50%) scale(0.7); } #ui-medical-interactive { margin-bottom: 8px; } } /**    * ui-upper-center */ position: absolute; display: flex; color: #FFF; top: 180px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } display: none; color: yellow; text-shadow: 2px 2px 0px #000000; font-size: 32px; font-weight: bold; text-align: center; width: 100vw; } /**    * ui-lower-center */ position: absolute; color: #FFF; bottom: 40%; left: 50%; } @media screen and (min-width: 851px) and (max-height: 768px), (max-width: 1200px) { #ui-lower-center { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: scale(0.85); transform: scale(0.85); bottom: 33%; } } display: flex; } background: rgba(0, 0, 0, 0.4); background-size: 80%; background-position: center; background-repeat: no-repeat; border-radius: 5px; font-weight: 700; margin-left: -24px; text-align: center; } .ui-interaction-large { font-size: 42px; height: 48px; width: 48px; } .ui-interaction-small { font-size: 26px; height: 36px; line-height: 36px; min-width: 24px; padding-left: 10px; padding-right: 10px; } background: rgba(0, 0, 0, 0.4); border-radius: 5px; margin-left: 10px; padding: 0px 15px; height: 48px; } margin-top: 10px; font-size: 24px; text-align: center; } /**    * ui-bottom-left */ position: absolute; bottom: 52px; } position: absolute; color: white; width: 100px; height: 36px; bottom: 218px; left: 82px; background: rgba(0, 0, 0, 0.4); border-radius: 5px; } padding: 6px; display: inline-block; height: 24px; width: 24px; margin-left: 2px; background-size: 24px; background-repeat: no-repeat; background-position: 6px 6px; } .gas-icon { background-image: url(../img/gui/gas.svg); } .danger-icon { background-image: url(../img/gui/danger.svg); } .icon-pulse { -webkit-animation: pulse 2s linear infinite; animation: pulse 2s linear infinite; } position: relative; display: inline-block; font-size: 24px; text-align: center; bottom: 10px; left: 0px; } position: absolute; color: white; width: 68px; height: 28px; bottom: 218px; left: 6px; background: rgba(0, 0, 0, 0.4); border-radius: 5px; } padding: 6px; display: inline-block; height: 24px; width: 18px; margin-left: 2px; background-size: 20px; background-repeat: no-repeat; background-position: 6px 4px; background-image: url(../img/gui/eye.svg); } position: relative; display: inline-block; font-size: 20px; width: 24px; text-align: center; bottom: 15px; left: 0px; } position: relative; left: 16px; bottom: 12px; } cursor: pointer; } .ui-settings-button { position: absolute; color: white; border-radius: 5px; height: 48px; width: 48px; pointer-events: all; opacity: 0.5; background: rgba(0, 0, 0, 0.4); } left: 185px; } .ui-settings-button img { position: absolute; left: 6px; top: 6px; height: 36px; width: 36px; background-size: 36px; background-repeat: no-repeat; transform: scale(1); -webkit-transition: all 100ms ease-in; -webkit-transform: scale(1); -ms-transition: all 100ms ease-in; -ms-transform: scale(1); -moz-transition: all 100ms ease-in; -moz-transform: scale(1); transition: all 100ms ease-in; transition: opacity 0.25s ease-out; -moz-transition: opacity 0.25s ease-out; -webkit-transition: opacity 0.25s ease-out; -o-transition: opacity 0.25s ease-out; } .ui-settings-button .map-img-after { display: none; } .ui-settings-button:hover { opacity: 1; -webkit-transition: all 100ms ease-in; -webkit-transform: scale(1.1); -ms-transition: all 100ms ease-in; -ms-transform: scale(1.1); -moz-transition: all 100ms ease-in; -moz-transform: scale(1.1); transition: all 100ms ease-in; transform: scale(1.1); } /**    * ui-bottom-center-0 */ position: absolute; color: #FFF; bottom: 12px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } @media (max-height: 768px), (max-width: 1200px) { #ui-bottom-center-0 { -webkit-transform-origin: bottom; transform-origin: bottom; -webkit-transform: translateX(-50%) scale(0.85); transform: translateX(-50%) scale(0.85); } } /* Taken from ui-bottom-center-0 */ position: absolute; color: #FFF; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); bottom: 62px; } margin-bottom: 12px; text-align: center; opacity: 1.0; } display: inline-block; width: 175px; height: 56px; text-align: center; text-shadow: 2px 2px #000000; } background: rgba(0, 0, 0, 0.4); border-radius: 5px; font-size: 44px; font-weight: bold; width: 100px; height: 50px; -webkit-transform: translateX(-50%); transform: translateX(-50%); left: 50%; position: relative; text-align: center; } background: rgba(0, 0, 0, 0.4); border-radius: 5px; font-size: 24px; font-weight: bold; line-height: 32px; width: 65px; height: 32px; left: 82%; position: absolute; text-align: center; top: 18px; } display: inline-flex; width: 412px; } background: rgba(0, 0, 0, 0.4); height: 10px; margin-bottom: 8px; } border-top-left-radius: 3px; border-bottom-left-radius: 3px; width: 100px; margin-right: 3px; } background: #ff901a; } width: 100px; margin-left: 3px; margin-right: 3px; } background: #ff751a; } width: 150px; margin-left: 3px; margin-right: 3px; } background: #ff6616; } border-top-right-radius: 3px; border-bottom-right-radius: 3px; width: 50px; margin-left: 3px; } background: #ff5600; } .ui-boost-base .ui-bar-inner { border-radius: inherit; width: 0px; height: 10px; } .ui-health-flair { background-size: 64px; background-repeat: no-repeat; background-position: center; display: none; height: 64px; position: absolute; width: 64px; z-index: 2; } left: -32px; top: 13px; -webkit-transform: rotate(270deg); transform: rotate(270deg); } right: -32px; top: 13px; -webkit-transform: rotate(90deg); transform: rotate(90deg); } background: rgba(0, 0, 0, 0.4); border-radius: 5px; width: 400px; height: 32px; padding: 6px; } z-index: 1; position: absolute; border-radius: 5px; width: 100%; height: 32px; transition: width 0.0s; transition-property: width; transition-duration: 0.0s; transition-timing-function: ease-out; transition-delay: initial; } width: 400px; position: relative; } background: rgba(255, 0, 0, 0.8); -webkit-animation-name: pulse; animation-name: pulse; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-delay: 0; animation-delay: 0; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-fill-mode: none; animation-fill-mode: none; -webkit-animation-play-state: running; animation-play-state: running; } z-index: 0; background: #929292; transition: width 1.0s; transition-property: width; transition-duration: 1.0s; transition-timing-function: ease-out; transition-delay: initial; } .health-bar-pulse { -webkit-animation: pulsewhite 1s linear infinite; animation: pulsewhite 1s linear infinite; } @-webkit-keyframes pulsewhite { 0% {   background-color: rgba(0, 0, 0, 0.6); } 50% {    background-color: rgba(255, 255, 255, 0.6); } 100% {    background-color: rgba(0, 0, 0, 0.6); } } @keyframes pulsewhite { 0% {   background-color: rgba(0, 0, 0, 0.6); } 50% {    background-color: rgba(255, 255, 255, 0.6); } 100% {    background-color: rgba(0, 0, 0, 0.6); } } @-webkit-keyframes pulse { 0% {   background-color: rgba(0, 0, 0, 0.8); } 50% {    background-color: rgba(255, 0, 0, 0.8); } 100% {    background-color: rgba(0, 0, 0, 0.8); } } @keyframes pulse { 0% {   background-color: rgba(0, 0, 0, 0.8); } 50% {    background-color: rgba(255, 0, 0, 0.8); } 100% {    background-color: rgba(0, 0, 0, 0.8); } } /**    * ui-bottom-center-1 */ z-index: 3; position: absolute; color: #FFF; bottom: 220px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } @media (max-height: 768px), (max-width: 1200px) { #ui-bottom-center-1 { -webkit-transform-origin: bottom; transform-origin: bottom; -webkit-transform: translateX(-50%) scale(0.85); transform: translateX(-50%) scale(0.85); bottom: 138px; } } display: none; text-align: center; background: rgba(0, 0, 0, 0.4); color: #FFF; border-radius: 5px; padding: 8px; } font-size: 18px; } font-weight: bold; color: #ff4100; font-size: 32px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); } /**    * ui-bottom-center-2 */ position: absolute; color: #FFF; bottom: 160px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } color: white; opacity: 0; text-shadow: 2px 2px 0px #000000; font-size: 32px; font-weight: bold; text-align: center; width: 100vw; } /** * ui-bottom-center-left */ bottom: 12px; color: #FFF; pointer-events: auto; position: absolute; right: 73%; } @media (max-height: 768px), (max-width: 1200px) { #ui-bottom-center-left { right: 75%; -webkit-transform: scale(0.7); transform: scale(0.7); } } border: 2px solid transparent; display: none; left: 4px; } border: 2px solid transparent; display: none; right: 0px; } .ui-perk-pulse { -webkit-animation-name: perkPulse; -webkit-animation-duration: 1.5s; -webkit-animation-iteration-count: 2; } @-webkit-keyframes perkPulse { from { background-color: rgba(0, 0, 0, 0.4); -webkit-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0); } 50% {    background-color: rgba(255, 210, 0, 0.75); -webkit-box-shadow: 0px 0px 30px #ffd200; } to { background-color: rgba(0, 0, 0, 0.4); -webkit-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0); } } /* Tooltip container */ .tooltip-perk { position: relative; } /* Tooltip text */ .tooltip-perk .tooltip-text { visibility: hidden; width: 180px; background-color: black; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; position: absolute; z-index: 1; left: 50%; opacity: 0.75; bottom: 115%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .tooltip-perk .tooltip-text::after { content: " "; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: black transparent transparent transparent; } .tooltip-perk-title { font-size: 18px; font-weight: bold; padding: 4px; color: yellow; } .tooltip-perk-description { font-size: 16px; padding: 4px; } .tooltip-perk-description span { font-size: 16px; } .tooltip-perk:hover .tooltip-text { visibility: visible; } /** * ui-bottom-center-right */ position: absolute; color: #FFF; bottom: 12px; left: 73%; } @media (max-height: 768px), (max-width: 1200px) { #ui-bottom-center-right { left: 75%; -webkit-transform: scale(0.7); transform: scale(0.7); } } .ui-armor-counter { position: absolute; bottom: 0px; display: block; width: 48px; height: 60px; background: rgba(0, 0, 0, 0.4); border-radius: 5px; margin-left: 4px; } right: 4px; } left: 60px; border: 2px solid transparent; } .ui-armor-level { position: relative; font-size: 16px; font-weight: bold; bottom: 24px; text-align: center; text-shadow: 1px 1px #000000; /*cursor: inherit;*/ } .ui-armor-counter-inner { z-index: 1; position: absolute; background: rgba(25, 25, 25, 0.75); border-radius: 5px; width: 100%; height: 0px; bottom: 0px; } .ui-armor-counter .ui-armor-count { z-index: 2; text-shadow: 2px 2px #000000; position: relative; font-size: 18px; font-weight: bold; margin-top: -28px; text-align: center; } .ui-armor-counter .ui-armor-image { margin: auto; left: 0; right: 0; bottom: 0; top: 0; z-index: 0; position: absolute; height: 36px; width: 36px; } .ui-ability-cooldown { font-size: 38px; font-weight: bold; left: 50%; position: absolute; text-align: center; text-shadow: 2px 2px #000000; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; z-index: 2; } @media screen and (max-width: 850px) { .ui-ability-cooldown { font-size: 20px; } } .ui-ability-key { font-size: 20px; font-weight: bold; left: 2px; position: absolute; bottom: -2px; } .ui-perk-mobile { bottom: 0px !important; left: -50px; pointer-events: all; top: 4px !important; -webkit-transform: translateX(-50%); transform: translateX(-50%); } /** * ui-bottom-right */ position: absolute; color: #FFF; bottom: 12px; right: 12px; } @media (max-height: 768px), (max-width: 1200px) { #ui-bottom-right { -webkit-transform-origin: bottom right; transform-origin: bottom right; -webkit-transform: scale(0.7); transform: scale(0.7); } } width: 192px; } .ui-weapon-info { margin-bottom: 5px; border-radius: 5px; border: 2px solid transparent; } .ui-weapon-switch { position: absolute; right: 0px; opacity: 0.6; border-radius: 5px; border: 2px solid transparent; width: 160px; height: 60px; margin-left: auto; pointer-events: all; cursor: pointer !important; } bottom: 210px; } bottom: 140px; } bottom: 70px; } bottom: 0px; } .ui-weapon-name { position: absolute; font-size: 18px; font-weight: bold; right: 8px; margin-top: 38px; text-align: center; } .ui-weapon-number { position: absolute; font-size: 24px; font-weight: bold; right: 8px; text-align: center; } .ui-weapon-exp { display: none; position: absolute; height: 32px; width: 32px; font-size: 18px; font-weight: bold; line-height: 34px; right: 78px; margin-top: 26px; text-align: center; } .ui-weapon-image { display: none; position: relative; height: 60px; width: 60px; left: 4px; background-size: 60px; background-repeat: no-repeat; } height: 52px; width: 52px; left: 4px; top: 4px; background-size: 52px; } .ui-weapon-dragged { position: fixed !important; width: 160px !important; right: initial !important; bottom: initial !important; pointer-events: none !important; } /**    * ui-stats, end game screen */ display: none; } display: none; opacity: 0; position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.75); pointer-events: none; z-index: 2; } border-radius: 5px; color: #FFF; height: 100%; left: 50%; position: absolute; text-align: center; top: 0%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 100%; z-index: 3; } @media (max-height: 860px) { #ui-stats-contents { top: 0%; } } margin-top: 75px; } @media (max-height: 768px) { #ui-stats-contents-inner { margin-top: 25px; } } @media screen and (max-width: 850px) { #ui-stats-contents-inner { margin-top: 0px; } } @media (max-height: 768px) { #ui-stats-header { -webkit-transform: scale(0.75); transform: scale(0.75); -webkit-transform-origin: top; transform-origin: top; } } .ui-stats-header-title { font-weight: bold; font-size: 48px; margin: 20px; color: gold; } .ui-stats-header-reason { font-size: 24px; } .ui-stats-header-overview { display: inline; margin: 10px; } .ui-stats-header-overview div { display: inline; padding-bottom: 12px; border-bottom: 2px solid rgba(255, 255, 255, 0.25); } .ui-stats-header-overview div:not(:first-child) { margin-left: 100px; } .ui-stats-header-red-team { color: #cc0000; font-weight: bold; } .ui-stats-header-blue-team { color: #007eff; font-weight: bold; } span.ui-stats-header-stat { font-size: 32px; } span.ui-stats-header-value { margin-left: 24px; font-size: 48px; font-weight: bold; } position: relative; left: 50%; margin: auto; margin-top: 50px; height: 190px; display: flex; } @media (max-height: 768px) { #ui-stats-info-box { margin-top: -30px; -webkit-transform: scale(0.9); transform: scale(0.9); -webkit-transform-origin: left; transform-origin: left; } } @media (max-width: 1024px) { #ui-stats-info-box { -webkit-transform: scale(0.85); transform: scale(0.85); -webkit-transform-origin: left; transform-origin: left; } } .ui-stats-info-player { position: relative; width: 250px; background-color: rgba(0, 0, 0, 0.75); border-radius: 4px; border: 2px solid black; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .ui-stats-info-status:after { content: ""; display: block; position: absolute; top: 15%; left: 25%; background-image: url(../img/gui/skull.svg); background-repeat: no-repeat; background-size: 128px; width: 100%; height: 100%; opacity: 0.1; z-index: -1; } .ui-stats-info-player-name { color: gold; font-size: 24px; font-weight: bold; font-style: italic; margin-top: 8px; margin-bottom: 8px; margin-left: auto; margin-right: auto; max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ui-stats-info-player-badge { background-size: 56px; background-repeat: no-repeat; background-position: center; height: 56px; left: auto; position: absolute; top: -40px; width: 100%; } .ui-stats-info-player-red-leader { background-image: url(../img/gui/star-red.svg); } .ui-stats-info-player-red-ribbon { background-image: url(../img/gui/ribbon-red.svg); } .ui-stats-info-player-blue-leader { background-image: url(../img/gui/star-blue.svg); } .ui-stats-info-player-blue-ribbon { background-image: url(../img/gui/ribbon-blue.svg); } .ui-stats-info { display: flex; height: 36px; margin: auto; } .ui-stats-info > div { padding: 8px; font-size: 18px; line-height: 12px; text-align: left; font-weight: bold; } .ui-stats-info > div:first-child { width: 55%; margin-right: 4px; text-align: right; font-weight: normal; } .ui-stats-reason { display: flex; height: 72px; margin: auto; } .ui-stats-reason div { padding: 8px; margin: auto; width: 100%; text-align: center; font-size: 16px; } .ui-stats-reason .ui-stats-reason-dead { color: red; } .ui-stats-reason .ui-stats-reason-alive { color: lawngreen; } position: absolute; left: 50%; margin-top: 20px; min-height: 60px; z-index: 1; } @media (max-height: 768px) { #ui-stats-options { margin-top: 8px; -webkit-transform: scale(0.9); transform: scale(0.9); -webkit-transform-origin: top; transform-origin: top; } } .ui-stats-restart { position: absolute; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 200px; margin: auto; margin-bottom: 20px; } .ui-stats-spectate { position: absolute; -webkit-transform: translateX(-50%); transform: translateX(-50%); left: 102px; width: 125px; background: #50afab; border-bottom: 2px solid #387c79; box-shadow: inset 0 -2px #387c79; } .ui-stats-ad-container { display: none; margin-top: 80px; } @media (max-height: 768px) { .ui-stats-ad-container { margin-top: 70px; } } /* Tooltip container */ .tooltip { position: relative; } /* Tooltip text */ .tooltip .tooltip-text { visibility: hidden; width: 240px; background-color: black; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; position: absolute; z-index: 1; right: 110%; opacity: 0.75; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .tooltip .tooltip-text::after { content: " "; position: absolute; top: 50%; left: 100%; margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent transparent black; } .tooltip-title { font-size: 18px; font-weight: bold; padding: 4px; color: yellow; } .tooltip-description { font-size: 16px; padding: 4px; } .tooltip-description span { font-size: 16px; } .tooltip:hover .tooltip-text { visibility: visible; } /**    * editor */ position: absolute; color: #FFF; top: 0%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } position: absolute; color: #FFF; font-size: 16px; top: 12px; right: 12px; } .ui-editor-header { text-align: center; font-weight: bold; font-size: 16px; padding: 8px; } .ui-editor-info { background: rgba(0, 0, 0, 0.4); border-radius: 5px; font-size: 36px; margin-bottom: 8px; padding: 8px; } .ui-editor-list { margin: 0px; list-style: none; } padding: 0px; } /*    * Profiler */ position: absolute; color: #FFF; font-size: 16px; top: 12px; left: 12px; text-align: center; display: flex; } .ui-profiler-list { background: rgba(0, 0, 0, 0.4); border-radius: 5px; margin-right: 16px; padding: 8px; } .ui-profiler-list-header { font-size: 16px; font-weight: bold; margin-bottom: 8px; } .ui-profiler-list ul { list-style: none; text-align: left; padding: 0px; margin: 0px; } .ui-profiler-list li { display: flex; } .kv { font-family: monospace; font-size: 14px; font-weight: normal; } .kv:last-child { width: 100%; text-align: right; } /* Hide mobile-only elements */ display: none; } @media screen and (max-width: 850px) { * {   -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /** * ui-touches */ .ui-touch-down { display: none; position: fixed; background-color: rgba(0, 0, 0, 0.5); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .ui-touch-down-landscape { width: 112px; height: 112px; border-radius: 56px; } .ui-touch-down-portrait { width: 96px; height: 96px; border-radius: 48px; } .ui-touch-pos { display: none; position: fixed; background-color: rgba(0, 0, 0, 0.5); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .ui-touch-pos-landscape { width: 64px; height: 64px; border-radius: 32px; } .ui-touch-pos-portrait { width: 48px; height: 48px; border-radius: 24px; } .btn-game-menu { position: relative; margin: auto; margin-top: 2px; margin-bottom: 4px; color: white; font-size: 14px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); background-color: #50afab; border-bottom: 2px solid #387c79; box-shadow: inset 0 -2px #387c79; background-repeat: no-repeat; cursor: pointer; text-align: center; line-height: 30px; display: block; width: 100%; height: 30px; border: 0px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-sizing: border-box; } #btn-game-fullscreen { background-size: 22px; background-position: 4px 2px; background-image: url(../img/gui/minimize.svg); } #btn-game-aim-line { background-size: 18px; background-position: 6px 5px; margin-bottom: 8px; } #btn-game-sound { background-size: 30px; background-position: 3px 0px; margin-bottom: 8px; } #btn-game-quit { margin-top: 20px; background-size: 34px; background-position: -2px -3px; background-image: url(../img/gui/quit.svg); } #btn-game-resume { margin-top: 20px; background-size: 34px; background-position: -1px -1px; background-image: url(../img/gui/resume.svg); } /**     * ui-top-center */ #ui-top-center { position: absolute; color: #FFF; top: 15%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } #ui-top-center .top-center-text { text-align: center; width: 100vw; padding: 4px; } #ui-waiting-text { display: none; color: white; text-shadow: 1px 1px 0px #000000; font-size: 16px; font-weight: bold; } #ui-waiting-text span { font-size: 16px; font-weight: bold; } .top-center-text .spectate-text { display: inline-block; text-shadow: 1px 1px 0px #000000; font-size: 16px; font-weight: bold; overflow: hidden; height: 32px; } .top-center-text .spectate-desc { color: white; margin-right: 8px; } .ui-spectate-mode { display: none; } #ui-spectate-text { position: relative; } #spectate-player { max-width: 250px; white-space: nowrap; text-overflow: ellipsis; color: cyan; } /** * ui-top-center-scopes */ #ui-top-center-scopes-wrapper { position: absolute; color: #FFF; left: 6px; top: 132px; -webkit-transform: initial; transform: initial; width: initial; } #ui-top-center-scopes { margin-top: 6px; text-align: center; color: white; } .ui-zoom { display: inline-block; margin-left: -12px; margin-right: -12px; -webkit-transform: scale(0.6); transform: scale(0.6); background: rgba(0, 0, 0, 0.3); border-radius: 32px; width: 42px; height: 42px; opacity: 0.3; pointer-events: all; } .ui-zoom-active { vertical-align: baseline; opacity: 1.0; margin-left: 0px; margin-right: 0px; -webkit-transition: all 100ms ease-in; -webkit-transform: scale(1); -ms-transition: all 100ms ease-in; -ms-transform: scale(1); -moz-transition: all 100ms ease-in; -moz-transform: scale(1); transition: all 100ms ease-in; transition: opacity 0.25s ease-out; -moz-transition: opacity 0.25s ease-out; -webkit-transition: opacity 0.25s ease-out; -o-transition: opacity 0.25s ease-out; } .ui-zoom .ui-zoom-image { width: 48px; height: 48px; opacity: 0.4; padding: 2px; } .ui-zoom .ui-zoom-text { margin-top: 14px; width: 100%; } .ui-zoom .ui-zoom-level { font-size: 24px; line-height: 16px; text-align: center; width: 100%; /*cursor: inherit;*/ } .ui-zoom .ui-zoom-append { font-size: 24px; } .ui-zoom-inactive { display: none; margin-left: -8px; margin-right: -8px; transition: all 100ms ease-in; -webkit-transform: scale(0.6); transform: scale(0.6); } /**     * ui-team-pings and ui-emotes */ .ui-emote-wheel { z-index: 3; display: none; position: fixed; } .ui-emote-parent { opacity: 1.0; } .ui-emote-hl { z-index: 2; display: none; } .ui-emote { position: fixed; width: 256px; height: 256px; background-size: 256px; background-repeat: no-repeat; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .ui-emote-bg-circle { opacity: 0.65; background-image: url(../img/gui/ping-part-circle.svg); } .ui-emote-bg-quarter { opacity: 0.65; background-image: url(../img/gui/ping-part-quarter.svg); } .ui-emote-bg-eighth { opacity: 0.65; background-image: url(../img/gui/ping-part-eighth.svg); } .ui-emote-middle .ui-emote-image { width: 24px !important; height: 24px !important; background-size: 24px !important; background-image: none !important; } .ui-emote-top .ui-emote-image { margin-top: -78px; background-image: url(../img/gui/ping-team-danger.svg); } .ui-emote-right .ui-emote { -webkit-transform: translate(-50%, -50%) rotate(90deg); transform: translate(-50%, -50%) rotate(90deg); } .ui-emote-right .ui-emote-image { margin-left: 78px; background-image: url(../img/gui/ping-team-coming.svg); } .ui-emote-bottom .ui-emote { -webkit-transform: translate(-50%, -50%) rotate(180deg); transform: translate(-50%, -50%) rotate(180deg); } .ui-emote-bottom .ui-emote-image { margin-top: 78px; background-image: url(../img/gui/ping-team-help.svg); } .ui-emote-left .ui-emote { -webkit-transform: translate(-50%, -50%) rotate(270deg); transform: translate(-50%, -50%) rotate(270deg); } .ui-emote-left .ui-emote-image { margin-left: -78px; background-image: url(../img/gui/ping-team-help.svg); } .ui-emote-top-left .ui-emote-image { margin-left: -80px; margin-top: -30px; background-image: url(../img/loot/loot-ammo-box.svg); } .ui-emote-bottom-left .ui-emote { -webkit-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg); } .ui-emote-bottom-left .ui-emote-image { margin-left: -80px; margin-top: 30px; background-image: url(../img/loot/loot-medical-healthkit.svg); } .ui-emote-circle .ui-emote-hl { background-image: url(../img/gui/ping-part-circle-highlight.svg); } .ui-emote-quarter .ui-emote-hl { background-image: url(../img/gui/ping-part-quarter-highlight.svg); } .ui-emote-eighth .ui-emote-hl { background-image: url(../img/gui/ping-part-eighth-highlight.svg); } .ui-emote-image { z-index: 1; position: fixed; background-repeat: no-repeat; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .ui-emote-image-large { width: 80px; height: 80px; background-size: 64px; background-position: center; } .ui-emote-image-small { width: 35px; height: 35px; background-size: 35px; } /**     * ui-team-indicators */ .ui-team-indicator { z-index: 2; display: none; position: fixed; top: 0px; left: 0px; border-radius: 32px; width: 64px; height: 64px; background-size: 64px; background-repeat: no-repeat; background-image: url(../img/gui/indicator.svg); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .ui-team-indicator-pos { opacity: 0.75; position: relative; border-radius: 24px; width: 32px; height: 32px; top: 23px; left: 32px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .ui-team-indicator-image { width: 32px; height: 32px; background-size: 32px; background-repeat: no-repeat; background-image: url(../img/gui/ping-team-danger.svg); } .ui-indicator-ping-border { z-index: 0; display: none; position: fixed; top: 0px; left: 0px; width: 160px; height: 160px; position: relative; background-size: 160px; background-repeat: no-repeat; background-image: url(../img/gui/ping-border.svg); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } /** * ui-top-left */ #ui-top-left { position: absolute; color: #FFF; font-size: 16px; top: 6px; left: 6px; display: block; } .ui-bg-standard { background: rgba(0, 0, 0, 0.24); border-radius: 5px; } #ui-team { position: fixed; left: 128px; } .ui-team-member { display: none; position: relative; width: 110px; height: 20px; padding: 4px; margin-bottom: 4px; } .ui-team-member-name { font-weight: bold; text-shadow: 1px 1px 0px #000000; font-size: 10px; max-width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ui-team-member-color { position: absolute; top: 4px; right: 4px; border-radius: 9px; width: 9px; height: 9px; } .ui-background-yellow { background-color: yellow; } .ui-background-blue { background-color: blue; } .ui-background-red { background-color: red; } .ui-background-purple { background-color: purple; } .ui-background-cyan { background-color: cyan; } .ui-team-member-status { display: none; position: absolute; top: 2px; right: -24px; width: 20px; height: 20px; background-size: 20px; background-repeat: no-repeat; } .ui-team-member-status-downed { border-radius: 16px; display: block !important; background-image: url(../img/gui/down.svg) !important; } .ui-team-member-status-dead { display: block !important; background-image: url(../img/gui/skull-team.svg) !important; opacity: 0.5 !important; } .ui-team-member-status-disconnected { display: block !important; background-image: url(../img/gui/close.svg) !important; opacity: 0.5 !important; } .ui-team-member-health { margin-top: 2px; } .ui-team-member-health .ui-bar-inner { background-color: white; z-index: 1; position: absolute; border-radius: 4px; width: 110px; height: 5px; transition: width 0.0s; transition-property: width; transition-duration: 0.0s; transition-timing-function: ease-out; transition-delay: initial; } .ui-team-member-health .ui-bar-danger { background: rgba(255, 0, 0, 0.8); -webkit-animation-name: pulse; animation-name: pulse; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-delay: 0; animation-delay: 0; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-fill-mode: none; animation-fill-mode: none; -webkit-animation-play-state: running; animation-play-state: running; } .ui-team-member-health .ui-health-depleted { z-index: 0; background: #929292; transition: width 1.0s; transition-property: width; transition-duration: 1.0s; transition-timing-function: ease-out; transition-delay: initial; } #ui-spectate-options-wrapper { bottom: 6px; position: fixed; left: 6px; top: initial !important; } #ui-spectate-options { bottom: 0px; z-index: 1; position: absolute; pointer-events: all; width: 100%; } #ui-spectate-buttons { display: inline-block; width: 124px; padding: 8px 8px 4px 8px; text-align: center; } #ui-spectate-options a { position: relative; color: white; height: 28px; margin-bottom: 2px; line-height: 26px; font-size: 12px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); background: #50afab; border-bottom: 2px solid #387c79; box-shadow: none; cursor: pointer; } #btn-spectate-prev-player { margin-bottom: 12px !important; } #btn-spectate-view-stats { margin-bottom: 12px !important; } #ui-spectate-stats { position: absolute; top: 0px; left: 146px; width: 160px; display: none; } #ui-spectate-stats-header { text-align: center; font-size: 16px; font-weight: bold; padding: 6px; color: white; } #ui-spectate-stats-table { width: 100%; background-color: transparent; margin: auto; margin-right: 0px; margin-bottom: 4px; border-collapse: collapse; } #ui-spectate-stats tbody, #ui-spectate-stats td, #ui-spectate-stats th { padding: 0px 2px 2px 14px; font-size: 10px; } .ui-spectate-stats-category { width: 75px; color: rgba(255, 255, 255, 0.75); } .ui-spectate-stats-value { width: 75px; color: white; } /**     * ui-top-right */ #ui-top-right { position: absolute; color: #FFF; font-size: 16px; top: 6px; left: 6px; display: flex; } #ui-leaderboard { font-weight: bold; text-align: center; width: 56px; display: inline-block; } #ui-leaderboard-alive { background: rgba(0, 0, 0, 0.4); border-radius: 5px; margin-bottom: -16px; padding: 8px; height: 32px; width: 40px; } .ui-players-alive-pulse { -webkit-animation-name: pulseAlive; animation-name: pulseAlive; -webkit-animation-duration: 2.0s; animation-duration: 2.0s; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-fill-mode: none; animation-fill-mode: none; -webkit-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes pulseAlive { 0% {     color: #ffffff; }   20% {      color: #ff0000; }   40% {      color: #ffffff; }   100% {      color: #ffffff; } }  @keyframes pulseAlive { 0% {     color: #ffffff; }   20% {      color: #ff0000; }   40% {      color: #ffffff; }   100% {      color: #ffffff; } }  .ui-leaderboard-header { font-size: 12px; } #ui-killfeed-wrapper { top: 24px; left: 6px; right: initial; } #ui-killfeed { position: absolute; margin: initial; top: 135px; } #ui-killfeed-contents { width: 800px; } #ui-killfeed-contents .killfeed-div { position: absolute; background-color: rgba(0, 0, 0, 0.4); padding: 3px 3px; border-radius: 2px; height: 8px; line-height: 8px; right: initial; } .killfeed-div span, .killfeed-div div { float: left; font-size: 8px; line-height: 8px; font-weight: bold; color: #EFEEEE; } .killfeed-red span, .killfeed-red div { color: #d1777c !important; } .killfeed-blue span, .killfeed-blue div { color: deepskyblue !important; } #ui-killfeed-contents .killfeed-red { color: #d1777c; } #ui-killfeed-contents .killfeed-blue { color: deepskyblue; } #ui-killfeed .killfeed-name { max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /** * ui-right-center */ #ui-ammo-interactive { position: absolute; right: 4px; top: 0px; width: 90px; } .ui-ammo > .ui-loot-image { position: absolute; height: 11px; width: 11px; right: 2px; margin-top: 2px; } .ui-ammo > .ui-loot-overlay { position: absolute; height: 11px; width: 11px; right: 2px; margin-top: 2px; } .ui-ammo { background: rgba(0, 0, 0, 0.4); border-radius: 5px; width: 85px; height: 32px; margin-left: auto; margin-bottom: 5px; } .ui-ammo > .ui-loot-count { position: absolute; font-size: 24px; font-weight: bold; left: 10px; top: 2px; text-align: center; } .ui-ammo-row { display: flex; } .ui-ammo-row > div:not(:last-child) { margin-right: 10px; } #ui-loot-ph1 { opacity: 0 !important; } #ui-ammo-interactive > .ui-ammo { display: inline-block; background: rgba(0, 0, 0, 0.4); border-radius: 5px; width: 38px; height: 14px; margin-left: auto; margin-bottom: 2px; } .ui-ammo > .ui-loot-count { position: absolute; font-size: 12px; font-weight: bold; width: 16px; left: 3px; margin-top: -1px; text-align: center; } #ui-medical-interactive { display: inline-flex; left: 68%; position: absolute; top: 0px; -webkit-transform: translateX(-50%); transform: translateX(-50%); } #ui-medical-interactive > .ui-loot { display: inline-block; background: rgba(0, 0, 0, 0.4); border-radius: 5px; width: 44px; height: 18px; margin-left: 6px; margin-bottom: 2px; } .ui-medical > .ui-loot-image { position: absolute; height: 18px; width: 18px; background-size: 18px; background-repeat: no-repeat; right: 2px; margin-top: 0px; } .ui-medical > .ui-loot-count { position: absolute; font-size: 16px; font-weight: bold; left: 4px; width: 16px; margin-top: -3px; text-align: center; } .ui-loot { background: rgba(0, 0, 0, 0.4); border-radius: 5px; width: 85px; height: 32px; margin-left: auto; margin-bottom: 5px; } .ui-loot:hover { opacity: 1 !important; } .ui-outline-hover { border: 2px solid rgba(0, 255, 0, 0); } .ui-outline-hover:hover { -webkit-transition: border 100ms ease-out; -moz-transition: border 100ms ease-out; -o-transition: border 100ms ease-out; border: 2px solid rgba(0, 255, 0, 0); } .ui-scale-hover { transform: scale(1); -webkit-transition: all 100ms ease-in; -webkit-transform: scale(1); -ms-transition: all 100ms ease-in; -ms-transform: scale(1); -moz-transition: all 100ms ease-in; -moz-transform: scale(1); transition: all 100ms ease-in; } .ui-scale-hover:hover { -webkit-transition: all 100ms ease-in; -webkit-transform: scale(1.1); -ms-transition: all 100ms ease-in; -ms-transform: scale(1.1); -moz-transition: all 100ms ease-in; -moz-transform: scale(1.1); transition: all 100ms ease-in; transform: scale(1.1); } #ui-debug-button { display: none; background: rgba(0, 0, 0, 0.4); position: absolute; border-radius: 13px; height: 26px; width: 26px; background-size: 18px; bottom: 10px; right: 38px; background-position: center; background-image: url(../img/gui/mag-glass.svg); background-repeat: no-repeat; pointer-events: auto; z-index: 1; } /** * ui-upper-center */ #ui-upper-center { position: absolute; display: flex; color: #FFF; top: 84px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } #ui-announcement { display: none; color: yellow; text-shadow: 1px 1px 0px #000000; font-size: 16px; font-weight: bold; text-align: center; width: 100vw; } /**     * ui-lower-center */ #ui-lower-center { bottom: 44%; color: #FFF; left: 60%; position: absolute; -webkit-transform: scale(1); transform: scale(1); } #ui-interaction { display: flex; } #ui-interaction-press { background: rgba(0, 0, 0, 0.4); border-radius: 5px; margin-left: -20px; font-size: 34px; width: 44px; height: 44px; background-size: 36px; background-position: center; background-repeat: no-repeat; } #ui-interaction-outer { background: rgba(0, 0, 0, 0.4); border-radius: 5px; margin-left: 6px; padding: 0px 6px; height: 28px; } #ui-interaction-outer #ui-interaction-description { margin-top: 5px; font-size: 16px; text-align: center; } /** * ui-bottom-center-0 */ #ui-bottom-center-0 { position: absolute; color: #FFF; bottom: 6px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } /** * ui-equipped-ammo */ #ui-equipped-ammo-wrapper { /* Taken from ui-bottom-center-0 */ position: absolute; color: #FFF; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); bottom: 78px; } #ui-equipped-ammo { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); text-align: center; opacity: 1.0; } #ui-bullet-counter { display: inline-block; width: 175px; height: 28px; text-align: center; text-shadow: 1px 1px #000000; } #ui-bullet-counter > #ui-current-clip { background: rgba(0, 0, 0, 0.4); border-radius: 5px; font-size: 28px; font-weight: bold; line-height: 30px; width: 60px; height: 32px; -webkit-transform: translateX(-50%); transform: translateX(-50%); left: 50%; position: relative; text-align: center; } #ui-bullet-counter > #ui-remaining-ammo { background: rgba(0, 0, 0, 0.4); border-radius: 5px; font-size: 16px; font-weight: bold; line-height: 22px; width: 44px; height: 22px; left: 122px; position: absolute; text-align: center; top: 10px; } #ui-bullet-counter > #ui-reload-button-container { height: 36px; left: 162px; position: absolute; top: 3px; width: 36px; } #ui-reload-button-container > #ui-reload-button { background: rgba(0, 0, 0, 0.4); background-position: 4px 3px; background-image: url(../img/gui/bullets.svg); background-repeat: no-repeat; background-size: 14px; border-radius: 11px; height: 22px; left: 50%; position: absolute; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 22px; } #ui-boost-counter { display: inline-flex; width: 206px; } #ui-boost-counter .ui-boost-base { background: rgba(0, 0, 0, 0.4); height: 6px; margin-bottom: 0px; } #ui-boost-counter-0 { border-top-left-radius: 3px; border-bottom-left-radius: 3px; width: 50px; margin-right: 3px; } #ui-boost-counter-0 .ui-bar-inner { background: #ff901a; } #ui-boost-counter-1 { width: 50px; margin-left: 3px; margin-right: 3px; } #ui-boost-counter-1 .ui-bar-inner { background: #ff751a; } #ui-boost-counter-2 { width: 75px; margin-left: 3px; margin-right: 3px; } #ui-boost-counter-2 .ui-bar-inner { background: #ff6616; } #ui-boost-counter-3 { border-top-right-radius: 3px; border-bottom-right-radius: 3px; width: 25px; margin-left: 3px; } #ui-boost-counter-3 .ui-bar-inner { background: #ff5600; } .ui-boost-base .ui-bar-inner { border-radius: inherit; width: 0px; height: 6px; } .ui-health-flair { background-size: 36px; background-repeat: no-repeat; background-position: center; display: none; height: 36px; position: absolute; width: 36px; z-index: 2; } #ui-health-flair-left { left: -17px; top: 14px; -webkit-transform: rotate(270deg); transform: rotate(270deg); } #ui-health-flair-right { right: -17px; top: 14px; -webkit-transform: rotate(90deg); transform: rotate(90deg); } #ui-health-counter { background: rgba(0, 0, 0, 0.4); border-radius: 5px; width: 200px; height: 18px; padding: 4px; } #ui-health-counter .ui-bar-inner { z-index: 1; position: absolute; border-radius: 5px; width: 100%; height: 18px; transition: width 0.0s; transition-property: width; transition-duration: 0.0s; transition-timing-function: ease-out; transition-delay: initial; } #ui-health-container { width: 200px; position: relative; } #ui-health-counter .ui-bar-danger { background: rgba(255, 0, 0, 0.8); -webkit-animation-name: pulse; animation-name: pulse; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-delay: 0; animation-delay: 0; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-fill-mode: none; animation-fill-mode: none; -webkit-animation-play-state: running; animation-play-state: running; } #ui-health-counter #ui-health-depleted { z-index: 0; background: #929292; transition: width 1.0s; transition-property: width; transition-duration: 1.0s; transition-timing-function: ease-out; transition-delay: initial; } .health-bar-pulse { -webkit-animation: pulsewhite 1s linear infinite; animation: pulsewhite 1s linear infinite; } @-webkit-keyframes pulsewhite { 0% {     background-color: rgba(0, 0, 0, 0.6); }   50% {      background-color: rgba(255, 255, 255, 0.6); }   100% {      background-color: rgba(0, 0, 0, 0.6); } }  @keyframes pulsewhite { 0% {     background-color: rgba(0, 0, 0, 0.6); }   50% {      background-color: rgba(255, 255, 255, 0.6); }   100% {      background-color: rgba(0, 0, 0, 0.6); } }  @-webkit-keyframes pulse { 0% {     background-color: rgba(0, 0, 0, 0.8); }   50% {      background-color: rgba(255, 0, 0, 0.8); }   100% {      background-color: rgba(0, 0, 0, 0.8); } }  @keyframes pulse { 0% {     background-color: rgba(0, 0, 0, 0.8); }   50% {      background-color: rgba(255, 0, 0, 0.8); }   100% {      background-color: rgba(0, 0, 0, 0.8); } }  /**     * ui-bottom-center-1 */ #ui-bottom-center-1 { z-index: 3; position: absolute; color: #FFF; bottom: 23%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } #ui-kills { display: none; text-align: center; background: rgba(0, 0, 0, 0.4); color: #FFF; border-radius: 5px; padding: 6px; } #ui-kill-text { font-size: 10px; } #ui-kill-count { font-weight: bold; color: #ff4100; font-size: 18px; margin-bottom: -3px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); } /**     * ui-bottom-center-2 */ #ui-bottom-center-2 { position: absolute; color: #FFF; bottom: 82px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } #ui-pickup-message { color: white; text-shadow: 1px 1px 0px #000000; font-size: 16px; font-weight: bold; text-align: center; width: 100vw; } /** * ui-bottom-center-left */ #ui-bottom-center-left { bottom: initial; color: #FFF; right: 70%; opacity: 0.75; position: absolute; bottom: 6px; } /** * ui-bottom-center-right */ #ui-bottom-center-right { bottom: initial; color: #FFF; left: 70%; opacity: 0.75; position: absolute; bottom: 6px; } .ui-armor-counter { position: absolute; bottom: 0px; display: block; width: 20px; height: 24px; background: rgba(0, 0, 0, 0.4); border-radius: 5px; margin-left: 2px; } #ui-armor-helmet { right: 4px; } #ui-armor-backpack { left: 30px; } .ui-armor-level { display: none; } .ui-armor-counter-inner { z-index: 1; position: absolute; background: rgba(25, 25, 25, 0.75); border-radius: 5px; width: 100%; height: 0px; bottom: 0px; } .ui-armor-counter .ui-armor-count { z-index: 2; text-shadow: 1px 1px #000000; position: relative; font-size: 18px; font-weight: bold; margin-top: -28px; text-align: center; } .ui-armor-counter .ui-armor-image { margin: auto; left: 0; right: 0; bottom: 0; top: 0; z-index: 0; position: absolute; height: 18px; width: 18px; } /** * ui-bottom-right */ #ui-bottom-right { bottom: initial; color: #FFF; position: absolute; right: 6px; top: 225px; -webkit-transform-origin: bottom right; transform-origin: bottom right; -webkit-transform: scale(1); transform: scale(1); } #ui-weapon-container { width: 88px; } .ui-weapon-info { margin-bottom: 5px; border-radius: 5px; border: 2px solid transparent; } .ui-weapon-switch { position: absolute; right: 0px; opacity: 0.6; border-radius: 5px; border: 2px solid transparent; width: 68px; height: 28px; margin-left: auto; pointer-events: all; } #ui-weapon-id-1 { bottom: 105px; } #ui-weapon-id-2 { bottom: 70px; } #ui-weapon-id-3 { bottom: 35px; } #ui-weapon-id-4 { bottom: 0px; } .ui-weapon-name { position: absolute; font-size: 10px; font-weight: bold; right: 4px; width: 48px; margin-top: 14px; text-align: right; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .ui-weapon-number { display: none; position: absolute; font-size: 24px; font-weight: bold; right: 8px; text-align: center; } .ui-weapon-exp { display: none; position: absolute; height: 16px; width: 16px; font-size: 8px; font-weight: bold; line-height: 18px; right: 34px; margin-top: 10px; text-align: center; } .ui-weapon-image { display: none; position: relative; height: 28px; width: 28px; left: 2px; bottom: 0px; -webkit-transform: rotate(10deg); transform: rotate(10deg); } #ui-weapon-id-4 .ui-weapon-image { height: 24px; width: 24px; left: 0px; top: 0px; background-size: 24px; } #ui-emote-button { background-size: 20px; border-radius: 14px; bottom: 18px; height: 28px; right: 4px; top: initial; width: 28px; } /** * ui-stats, end game screen */ #ui-stats-contents { border-radius: 5px; color: #FFF; height: 100%; left: 50%; position: absolute; text-align: center; top: 0%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 100%; } #ui-stats-header { margin-top: 14px; } .ui-stats-header-title { font-weight: bold; font-size: 24px; margin: 6px; color: gold; } .ui-stats-header-reason { font-size: 12px; } .ui-stats-header-overview { position: fixed; top: 4px; right: 12px; margin: 5px; } .ui-stats-header-overview div { display: block; padding-bottom: 6px; border-bottom: 2px solid rgba(255, 255, 255, 0.25); } .ui-stats-header-overview div:not(:first-child) { margin: initial; } span.ui-stats-header-stat { font-size: 22px; } span.ui-stats-header-value { margin-left: 12px; font-size: 28px; font-weight: bold; } #ui-stats-info-box { position: relative; left: 50%; margin: auto; margin-top: -8px; height: 100px; display: flex; } .ui-stats-info-player { position: relative; width: 125px; background-color: rgba(0, 0, 0, 0.75); border-radius: 4px; border: 2px solid black; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .ui-stats-info-status:after { background-image: url(../img/gui/skull.svg); background-position: center; background-repeat: no-repeat; background-size: 70px; content: ""; display: block; height: 100%; left: initial; opacity: 0.1; position: absolute; top: 0%; width: 100%; z-index: -1; } .ui-stats-info-player-name { color: gold; font-size: 12px; font-weight: bold; font-style: italic; margin-top: 4px; margin-bottom: 4px; margin-left: auto; margin-right: auto; max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ui-stats-info-player-badge { background-size: 24px; background-repeat: no-repeat; background-position: center; height: 56px; left: auto; position: absolute; top: -34px; width: 100%; } .ui-stats-info { display: flex; height: 18px; margin: auto; } .ui-stats-info > div { padding: 4px; font-size: 9px; line-height: 6px; text-align: left; font-weight: bold; } .ui-stats-info > div:first-child { width: 55%; margin-right: 4px; text-align: right; font-weight: normal; } .ui-stats-reason { display: flex; height: 72px; margin: auto; } .ui-stats-reason div { padding: 8px; margin: auto; width: 100%; text-align: center; font-size: 16px; } .ui-stats-reason .ui-stats-reason-dead { color: red; } .ui-stats-reason .ui-stats-reason-alive { color: lawngreen; } #ui-stats-options { position: absolute; left: 50%; margin-top: 2px; min-height: 30px; -webkit-transform: scale(1.1); transform: scale(1.1); z-index: 1; } .ui-stats-restart { position: absolute; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 130px; margin: auto; margin-bottom: 20px; } .ui-stats-spectate { position: absolute; -webkit-transform: translateX(-50%); transform: translateX(-50%); left: 68px; width: 88px; background: #50afab; border-bottom: 2px solid #387c79; box-shadow: none; } .ui-stats-ad-container { display: none; margin-top: 8px; -webkit-transform: scale(0.7); transform: scale(0.7); } /* Tooltip container */ .tooltip { position: relative; } /* Tooltip text */ .tooltip .tooltip-text { visibility: hidden !important; width: 240px; background-color: black; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; position: absolute; z-index: 1; right: 110%; opacity: 0.75; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .tooltip .tooltip-text::after { content: " "; position: absolute; top: 50%; left: 100%; margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent transparent black; } .tooltip-title { font-size: 18px; font-weight: bold; padding: 4px; color: yellow; } .tooltip-description { font-size: 16px; padding: 4px; } .tooltip-description span { font-size: 16px; } .tooltip-perk .tooltip-text { visibility: hidden !important; } .tooltip-perk:hover .tooltip-text { visibility: hidden !important; } /**     * editor */ #ui-editor-top-center { position: absolute; color: #FFF; top: 0%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } #ui-editor-top-right { position: absolute; color: #FFF; font-size: 16px; top: 6px; right: 6px; } .ui-editor-header { text-align: center; font-weight: bold; font-size: 16px; padding: 8px; } .ui-editor-info { background: rgba(0, 0, 0, 0.4); border-radius: 5px; font-size: 36px; margin-bottom: 8px; padding: 8px; } .ui-editor-list { margin: 0px; padding: 0px; list-style: none; } .ui-editor-list li div { font-family: monospace; font-size: 14px; } /*     * Profiler */ #ui-profiler-top-left { position: absolute; color: #FFF; font-size: 16px; top: 6px; left: 6px; text-align: center; display: flex; } .ui-profiler-list { background: rgba(0, 0, 0, 0.4); border-radius: 5px; margin-right: 16px; padding: 8px; } .ui-profiler-list-header { font-size: 16px; font-weight: bold; margin-bottom: 8px; } .ui-profiler-list ul { list-style: none; text-align: left; padding: 0px; margin: 0px; } .ui-profiler-list li { display: flex; } .kv { font-family: monospace; font-size: 14px; font-weight: normal; } .kv:last-child { width: 100%; text-align: right; } /* Hide desktop-only elements */ #ui-settings-container-desktop, #ui-leaderboard-wrapper { display: none; } /* Show mobile-only elements */ #ui-settings-container-mobile { display: block; } } @media screen and (max-width: 850px) and (max-height: 360px), screen and (max-width: 850px) and (max-width: 640px) { #ui-top-center { -webkit-transform-origin: top; transform-origin: top; -webkit-transform: translateX(-50%) scale(0.85); transform: translateX(-50%) scale(0.85); } } @media screen and (max-width: 850px) and (max-height: 360px), screen and (max-width: 850px) and (max-width: 640px) { #ui-bottom-center-0 { -webkit-transform-origin: bottom; transform-origin: bottom; -webkit-transform: translateX(-50%) scale(0.85); transform: translateX(-50%) scale(0.85); } } @media screen and (max-width: 850px) and (max-height: 360px), screen and (max-width: 850px) and (max-width: 640px) { #ui-bottom-right { top: 200px; -webkit-transform-origin: top right; transform-origin: top right; -webkit-transform: scale(0.8); transform: scale(0.8); } } @media screen and (max-width: 850px) and (max-width: 850px) and (orientation: landscape) { .ui-stats-header-overview .ui-stats-header-left { position: fixed; top: -4px; left: 12px; } .ui-stats-header-overview .ui-stats-header-right { position: fixed; top: -4px; right: 12px; } } @media screen and (max-width: 850px) and (max-height: 360px) and (max-width: 640px) { .ui-stats-ad-container { margin-top: 0px; -webkit-transform: scale(0.6); transform: scale(0.6); } } @media screen and (max-width: 850px) and (max-width: 850px) and (max-height: 320px) { .ui-stats-ad-container { position: fixed; right: 10px; top: 24px; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: bottom right; transform-origin: bottom right; } } @media screen and (max-width: 850px) and (orientation: portrait) { #ui-stats-contents { margin-top: 32px; margin-bottom: 16px; } #ui-stats-header-overview { position: initial; } #ui-stats-info-box { display: inline-block; left: initial; -webkit-transform: scale(0.9); transform: scale(0.9); -webkit-transform-origin: initial; transform-origin: initial; margin-top: 2px; width: 100%; } .ui-stats-ad-container { width: 100%; } .ui-stats-info-player { display: inline-block; left: initial !important; margin: 8px; -webkit-transform: none; transform: none; } .ui-stats-header-overview { display: inline-block; position: initial; width: 175px; } .ui-stats-header-overview div { position: initial; margin-bottom: 8px; } #ui-top-center { top: 134px; left: 50%; } #ui-top-center-scopes-wrapper { display: none; bottom: 42px; top: initial; } #ui-team { top: 40px; } .ui-team-member { height: 18px; margin-bottom: 4px; } #ui-upper-center { top: 180px; } #ui-bottom-center-0 { top: -15px; bottom: initial; left: 100px; -webkit-transform: scale(0.85); transform: scale(0.85); } #ui-bottom-center-1 { bottom: 28%; } #ui-bottom-center-2 { bottom: 218px; } #ui-lower-center { bottom: 38%; left: 38%; } #ui-boost-counter { position: relative; top: 40px; left: 2px; } #ui-bottom-right { bottom: 20px; right: 6px; top: initial; } #ui-weapon-id-1 { right: 240px; bottom: initial; } #ui-weapon-id-2 { right: 160px; bottom: initial; } #ui-weapon-id-3 { right: 80px; bottom: initial; } #ui-weapon-id-4 { bottom: initial; } .ui-weapon-info { display: inline-block; } #ui-bottom-center-right { bottom: 9px; left: 30px; top: initial; } .ui-right-center-mobile { top: 6px; } #ui-emote-button { background-size: 20px; border-radius: 14px; bottom: initial; height: 28px; left: initial; right: 4px; top: 62%; width: 28px; } #ui-debug-button { top: 242px; } #ui-ammo-interactive { margin-top: 4px; } #ui-ammo-interactive > .ui-ammo { display: block; } #ui-medical-interactive { display: inline-block; left: initial; right: 8px; -webkit-transform: initial; transform: initial; } #ui-medical-interactive > .ui-loot { display: block; } #ui-equipped-ammo { left: initial; position: initial; -webkit-transform: none; transform: none; } #ui-equipped-ammo-wrapper { bottom: initial; color: #FFF; left: initial; position: absolute; right: 6px; top: 44%; -webkit-transform: none; transform: none; } #ui-bullet-counter { width: initial; } #ui-bullet-counter > #ui-current-clip { left: 50%; } #ui-bullet-counter > #ui-remaining-ammo { left: initial; right: 0px; top: 36px; } #ui-bullet-counter > #ui-reload-button-container { left: 36px; top: 56px; } #ui-reload-button-container > #ui-reload-button { left: initial; right: 0px; } #big-map-collision { left: initial; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } #big-map-close { bottom: initial; top: 12px; } #ui-spectate-options-wrapper { bottom: 42px; -webkit-transform: scale(0.7); transform: scale(0.7); } #ui-spectate-options { position: absolute; bottom: 12px; } #ui-spectate-stats { bottom: 0px; top: initial; } #ui-ammo-interactive { top: 96px; } #ui-ammo-interactive > .ui-ammo { margin-bottom: 2px; } } @media screen and (max-width: 850px) and (orientation: portrait) and (min-height: 668px) { #ui-stats-contents { margin-top: 32px; } #ui-stats-info-box { -webkit-transform: scale(1); transform: scale(1); } .ui-stats-ad-container { margin-top: 20px; -webkit-transform: scale(1); transform: scale(1); } #ui-stats-options { display: block; left: initial; position: initial; margin: auto; margin-top: 24px; width: 100%; } .ui-stats-restart { display: block; position: initial; -webkit-transform: initial; transform: initial; margin-bottom: 0px; } .ui-stats-spectate { display: block; margin: auto; margin-top: 6px; position: initial; -webkit-transform: initial; transform: initial; } } @media screen and (max-width: 850px) and (orientation: portrait) and (max-height: 667px) { #ui-stats-contents { margin-top: 0px; } .ui-stats-ad-container { margin-top: 20px; } } @media screen and (max-width: 850px) and (orientation: portrait) and (max-height: 568px) and (max-width: 375px) { #ui-bottom-center-right { left: 22px; -webkit-transform: scale(0.8); transform: scale(0.8); } #ui-bottom-right { right: 0px; } #ui-bottom-center-0 { top: -20px; left: 84px; -webkit-transform: scale(0.7); transform: scale(0.7); } }
 * 1) cvs {
 * 1) game-area-wrapper {
 * 1) ui-game {
 * 1) ui-center {
 * 1) ui-game-menu {
 * 1) ui-game-menu p {
 * 1) btn-game-tabs > .btn-game-container > .btn-game-menu {
 * 1) btn-game-tabs > .btn-game-container > .btn-game-menu-selected {
 * 1) ui-game-tab-settings {
 * 1) ui-game-tab-keybinds {
 * 1) ui-game-tab-keybinds > .btn-keybind-restore {
 * 1) ui-game-tab-keybinds > #ui-keybind-list {
 * 1) ui-map-container {
 * 1) ui-alive-info {
 * 1) ui-alive-info > #ui-map-counter-faction {
 * 1) ui-alive-info > #ui-map-counter-faction > .ui-players-alive-red {
 * 1) ui-alive-info > #ui-map-counter-faction > .ui-players-alive-blue {
 * 1) ui-map-expand-mobile {
 * 1) ui-map-expand img {
 * 1) ui-map-minimize {
 * 1) ui-map-wrapper {
 * 1) ui-settings-container-mobile {
 * 1) ui-menu-display {
 * 1) big-map {
 * 1) big-map-collision {
 * 1) big-map-close {
 * 1) ui-right-center {
 * 1) ui-emote-button {
 * 1) ui-stats-logo {
 * 1) btn-game-fullscreen {
 * 1) btn-game-sound {
 * 1) btn-game-aim-line {
 * 1) btn-game-quit {
 * 1) btn-game-resume {
 * 1) ui-top-center {
 * 1) ui-top-center .top-center-text {
 * 1) ui-waiting-text {
 * 1) ui-waiting-text span {
 * 1) ui-spectate-text {
 * 1) spectate-player {
 * 1) ui-top-center-scopes-wrapper {
 * 1) ui-top-center-scopes {
 * 1) ui-top-left {
 * 1) ui-spectate-options-wrapper {
 * 1) ui-spectate-options {
 * 1) ui-spectate-buttons {
 * 1) ui-spectate-options a {
 * 1) btn-spectate-prev-player {
 * 1) ui-spectate-stats {
 * 1) ui-spectate-stats-header {
 * 1) ui-spectate-stats-table {
 * 1) ui-spectate-stats tbody,
 * 2) ui-spectate-stats td,
 * 3) ui-spectate-stats th {
 * 1) ui-leaderboard-wrapper {
 * 1) ui-leaderboard-alive {
 * 1) ui-leaderboard-alive-faction {
 * 1) ui-leaderboard-alive-faction .ui-players-alive-red {
 * 1) ui-leaderboard-alive-faction .ui-players-alive-blue {
 * 1) ui-kill-counter-wrapper {
 * 1) ui-kill-counter {
 * 1) ui-killfeed-wrapper {
 * 1) ui-killfeed {
 * 1) ui-killfeed-contents {
 * 1) ui-killfeed-contents .killfeed-div {
 * 1) ui-killfeed .killfeed-text {
 * 1) ui-right-center:hover {
 * 1) ui-ammo-interactive {
 * 1) ui-loot-ph1 {
 * 1) ui-medical-interactive {
 * 1) ui-upper-center {
 * 1) ui-announcement {
 * 1) ui-lower-center {
 * 1) ui-interaction {
 * 1) ui-interaction-press {
 * 1) ui-interaction-outer {
 * 1) ui-interaction-outer #ui-interaction-description {
 * 1) ui-map-container {
 * 1) ui-map-info {
 * 1) ui-gas-icon {
 * 1) ui-gas-timer {
 * 1) ui-spec-counter {
 * 1) ui-spec-counter-icon {
 * 1) ui-spec-counter-number {
 * 1) ui-settings-container-desktop {
 * 1) ui-settings-container-desktop div {
 * 1) ui-map-minimize {
 * 1) ui-bottom-center-0 {
 * 1) ui-equipped-ammo-wrapper {
 * 1) ui-equipped-ammo {
 * 1) ui-bullet-counter {
 * 1) ui-bullet-counter #ui-current-clip {
 * 1) ui-bullet-counter #ui-remaining-ammo {
 * 1) ui-boost-counter {
 * 1) ui-boost-counter .ui-boost-base {
 * 1) ui-boost-counter-0 {
 * 1) ui-boost-counter-0 .ui-bar-inner {
 * 1) ui-boost-counter-1 {
 * 1) ui-boost-counter-1 .ui-bar-inner {
 * 1) ui-boost-counter-2 {
 * 1) ui-boost-counter-2 .ui-bar-inner {
 * 1) ui-boost-counter-3 {
 * 1) ui-boost-counter-3 .ui-bar-inner {
 * 1) ui-health-flair-left {
 * 1) ui-health-flair-right {
 * 1) ui-health-counter {
 * 1) ui-health-counter .ui-bar-inner {
 * 1) ui-health-container {
 * 1) ui-health-counter .ui-bar-danger {
 * 1) ui-health-counter #ui-health-depleted {
 * 1) ui-bottom-center-1 {
 * 1) ui-kills {
 * 1) ui-kill-text {
 * 1) ui-kill-count {
 * 1) ui-bottom-center-2 {
 * 1) ui-pickup-message {
 * 1) ui-bottom-center-left {
 * 1) ui-perk-0 {
 * 1) ui-perk-1 {
 * 1) ui-bottom-center-right {
 * 1) ui-armor-helmet {
 * 1) ui-armor-backpack {
 * 1) ui-bottom-right {
 * 1) ui-weapon-container {
 * 1) ui-weapon-id-1 {
 * 1) ui-weapon-id-2 {
 * 1) ui-weapon-id-3 {
 * 1) ui-weapon-id-4 {
 * 1) ui-weapon-id-4 .ui-weapon-image {
 * 1) ui-stats {
 * 1) ui-stats-bg {
 * 1) ui-stats-contents {
 * 1) ui-stats-contents-inner {
 * 1) ui-stats-info-box {
 * 1) ui-stats-options {
 * 1) ui-editor-top-center {
 * 1) ui-editor-top-right {
 * 1) ui-editor-info-list {
 * 1) ui-profiler-top-left {
 * 1) ui-settings-container-mobile {

<iframe id="google_osd_static_frame_399873576605" name="google_osd_static_frame" style="display: none; width: 0px; height: 0px;"> <iframe sandbox="allow-scripts allow-same-origin" id="31b2d0afe9ed34a" frameborder="0" allowtransparency="true" marginheight="0" marginwidth="0" width="0" hspace="0" vspace="0" height="0" style="height:0px;width:0px;display:none;" scrolling="no" src="https://eus.rubiconproject.com/usync.html"> <iframe sandbox="allow-scripts allow-same-origin" id="321827aac260598" frameborder="0" allowtransparency="true" marginheight="0" marginwidth="0" width="0" hspace="0" vspace="0" height="0" style="height:0px;width:0px;display:none;" scrolling="no" src="//ads.pubmatic.com/AdServer/js/showad.js#PIX&amp;kdntuid=1&amp;p=156857"> <iframe sandbox="allow-scripts allow-same-origin" id="33a0fa46141a2c8" frameborder="0" allowtransparency="true" marginheight="0" marginwidth="0" width="0" hspace="0" vspace="0" height="0" style="height:0px;width:0px;display:none;" scrolling="no" src="https://de.tynt.com/deb/v2?m=xch&amp;rt=html&amp;id=bfoUuQkJmr6yoHaKkGJozW"> <iframe sandbox="allow-scripts allow-same-origin" id="34c3fc66f643acc" frameborder="0" allowtransparency="true" marginheight="0" marginwidth="0" width="0" hspace="0" vspace="0" height="0" style="height:0px;width:0px;display:none;" scrolling="no" src="http://us-u.openx.net/w/1.0/pd?plm=6&amp;ph=6e284d01-da78-4466-a0be-10c82bd3e67f&amp;gdpr=0"> <iframe sandbox="allow-scripts allow-same-origin" id="358307c9c003b12" frameborder="0" allowtransparency="true" marginheight="0" marginwidth="0" width="0" hspace="0" vspace="0" height="0" style="height:0px;width:0px;display:none;" scrolling="no" src="//acdn.adnxs.com/ib/static/usersync/v3/async_usersync.html"> <iframe sandbox="allow-scripts allow-same-origin" id="367a2aa275a25a3" frameborder="0" allowtransparency="true" marginheight="0" marginwidth="0" width="0" hspace="0" vspace="0" height="0" style="height:0px;width:0px;display:none;" scrolling="no" src="//ads.pubmatic.com/AdServer/js/showad.js#PIX&amp;kdntuid=1&amp;p=156857"> <iframe sandbox="allow-scripts allow-same-origin" id="375fa004512aca8" frameborder="0" allowtransparency="true" marginheight="0" marginwidth="0" width="0" hspace="0" vspace="0" height="0" style="height:0px;width:0px;display:none;" scrolling="no" src="http://us-u.openx.net/w/1.0/pd?plm=6&amp;ph=6e284d01-da78-4466-a0be-10c82bd3e67f&amp;gdpr=0"> <iframe sandbox="allow-scripts allow-same-origin" id="38b978982a7f826" frameborder="0" allowtransparency="true" marginheight="0" marginwidth="0" width="0" hspace="0" vspace="0" height="0" style="height:0px;width:0px;display:none;" scrolling="no" src="//acdn.adnxs.com/ib/static/usersync/v3/async_usersync.html"> -->