☰

Theme & Font Changer

Theme Changer + Font Changer for Black Logs

  1. // ==UserScript==
  2. // @name         Theme & Font Changer
  3. // @namespace    https://logs.blackrussia.online/
  4. // @version      0.4.1.0
  5. // @description  Theme Changer + Font Changer for Black Logs
  6. // @author       Lukky
  7. // @match        https://logs.blackrussia.online/gslogs/*
  8. // @icon         https://freepngimg.com/thumb/eagle/20-eagle-black-siluet-png-image-download-thumb.png
  9. // @license      Lukky
  10. // ==/UserScript==
  11. (function() {
  12.     'use strict';
  13.  
  14.     scriptInit();
  15.  
  16.     const styleButton = createStyleButton('div.container-fluid span.badge.bg-success');
  17.     const styleContainerBg = createStyleContainerBg('main');
  18.  
  19.     function replaceTableHeading() {
  20.         const titleElement = document.querySelector('div.container-fluid span.badge.bg-success');
  21.         const tableHeading = document.querySelector('#log-table-heading');
  22.         if (titleElement && tableHeading) {
  23.             tableHeading.textContent += ' - ' + titleElement.textContent;
  24.         };
  25.     }
  26.  
  27.     function createStyleButton(element) {
  28.  
  29.         const fontStyles = document.createElement('style');
  30.         fontStyles.textContent = `@import url('https://fonts.googleapis.com/css2?family=Bad+Script&family=Comfortaa&family=Fira+Sans&family=Marmelad&family=Montserrat&family=Neucha&family=Play&family=Roboto:ital@1&family=Sofia+Sans&family=Ubuntu&display=swap');`;
  31.         document.head.appendChild(fontStyles);
  32.  
  33.         const styleToggle = document.createElement('button');
  34.         styleToggle.className = 'style-button';
  35.         styleToggle.id = 'style-modal-toggle';
  36.         styleToggle.href = '#!';
  37.         styleToggle.tabIndex = '0';
  38.         styleToggle.dataset.bsToggle = 'modal';
  39.         styleToggle.dataset.bsTarget = '#container-background';
  40.         styleToggle.textContent = 'STYLE';
  41.         styleToggle.style.color = '#ffffff';
  42.         styleToggle.style.background = 'transparent';
  43.         styleToggle.style.border = '3px solid #ffffff';
  44.         styleToggle.style.borderRadius = '10px';
  45.         styleToggle.style.boxShadow = '0px 0px 10px #ffffff';
  46.         styleToggle.style.width = '10%';
  47.  
  48.         const replaceElement = document.querySelector(element);
  49.         replaceElement.replaceWith(styleToggle);
  50.     }
  51.  
  52.     function createStyleContainerBg(element) {
  53.  
  54.         const containerBg = document.createElement('div');
  55.         containerBg.className = 'modal fade';
  56.         containerBg.id = 'container-background';
  57.         containerBg.tabIndex = '-1';
  58.         containerBg.style.dispaly = 'none';
  59.         containerBg.ariaHidden = 'true';
  60.  
  61.         const parentElement = document.querySelector(element);
  62.         parentElement.parentNode.insertBefore(containerBg, parentElement);
  63.  
  64.         const containerContent = document.createElement('div');
  65.         containerContent.className = 'modal-dialog modal-dialog-centered';
  66.         containerContent.id = 'style-container-content';
  67.         containerBg.appendChild(containerContent);
  68.  
  69.         const styleContainer = document.createElement('div');
  70.         styleContainer.className = 'modal-content';
  71.         containerContent.appendChild(styleContainer);
  72.  
  73.         const styleContHead = document.createElement('div');
  74.         const styleContBody = document.createElement('div');
  75.         styleContHead.className = 'modal-header';
  76.         styleContBody.className = 'modal-body';
  77.         styleContBody.style.display = 'flex';
  78.         styleContBody.style.flexDirection = 'column';
  79.         styleContainer.appendChild(styleContHead);
  80.         styleContainer.appendChild(styleContBody);
  81.  
  82.         const styleTitle = document.createElement('h5');
  83.         styleTitle.className = 'style-title';
  84.         styleContHead.appendChild(styleTitle);
  85.  
  86.         const styleTitleText = document.createElement('span');
  87.         styleTitleText.className = 'badge bg-success';
  88.         styleTitleText.textContent = 'STYLE';
  89.         styleTitle.appendChild(styleTitleText);
  90.         styleTitle.insertAdjacentText('beforeend', '-Переключатель Тем-');
  91.  
  92.         const styleClose = document.createElement('button');
  93.         styleClose.type = 'button';
  94.         styleClose.className = 'btn-close';
  95.         styleClose.dataset.bsDismiss = 'modal';
  96.         styleClose.ariaLabel = 'Close';
  97.         styleContHead.appendChild(styleClose);
  98.  
  99.         const switchStyleElement = document.createElement('label');
  100.         switchStyleElement.className = 'switch';
  101.         switchStyleElement.innerHTML = `
  102.             <input type="checkbox" id="styleToggleCheck">
  103.             <span class="slider round" style="padding-right: 20px; box-shadow: 0px 0px 5px #fff"></span>
  104.             <span class="addingText" style="display: block; width: max-content; margin: 5px; padding-left: 50px"> Включить Переливание Текста </span>
  105.         `;
  106.         styleContBody.appendChild(switchStyleElement);
  107.  
  108.         var styleToggleCheck = document.getElementById('styleToggleCheck');
  109.         if (localStorage.getItem('styleThemeEnabled') === 'true') {
  110.             styleToggleCheck.checked = true;
  111.             applyTextGradient();
  112.         }
  113.         styleToggleCheck.addEventListener('change', function() {
  114.             if (styleToggleCheck.checked) {
  115.                 applyTextGradient();
  116.                 localStorage.setItem('styleThemeEnabled', 'true');
  117.             } else {
  118.                 removeTextGradient();
  119.                 localStorage.setItem('styleThemeEnabled', 'false');
  120.             }
  121.         });
  122.         function applyTextGradient() {
  123.             const textGradient = document.createElement('style');
  124.             textGradient.id = 'text-gradient';
  125.             textGradient.textContent = `.td-category[data-v-2d76ca92] a[data-v-2d76ca92] {
  126.     background: linear-gradient(45deg, #00ffff, #0045ff, #00ffff);
  127.     background-size: 150% 150%;
  128.     animation: gradientCategory 5s linear infinite;
  129.     color: transparent !important;
  130.     -webkit-background-clip: text;
  131.     font-style: italic;
  132.     font-weight: 700;
  133.     text-decoration: none;
  134.     text-shadow: 0px 0px 10px #08f;
  135.     padding-right: 3px;
  136. }
  137. @keyframes gradientCategory {
  138.     0% {background-position: 0% 100%;}
  139.     100% {background-position: 1200% 100%;}
  140. }
  141. .td-player-name[data-v-2d76ca92] a[data-v-2d76ca92] {
  142.     background: linear-gradient(45deg, #ffff00, #ff4400, #ffff00);
  143.     background-size: 150% 150%;
  144.     animation: gradientCategory 5s linear infinite;
  145.     color: transparent !important;
  146.     -webkit-background-clip: text;
  147.     font-style: italic;
  148.     font-weight: 700;
  149.     text-decoration: none;
  150.     text-shadow: 0px 0px 10px #f80;
  151.     padding-right: 3px;
  152. }
  153. .navbar-brand {
  154.     background: linear-gradient(45deg, #00ccff, #ff4400, #00ccff);
  155.     background-size: 150% 150%;
  156.     animation: gradientCategory 5s linear infinite;
  157.     color: transparent !important;
  158.     -webkit-background-clip: text;
  159.     font-style: italic;
  160.     font-weight: 700;
  161.     text-decoration: none;
  162.     text-shadow: 0px 0px 10px #888;
  163.     padding-right: 3px;
  164. }`;
  165.             document.head.appendChild(textGradient);
  166.         }
  167.         function removeTextGradient() {
  168.             var textGradient = document.querySelector('#text-gradient');
  169.             document.head.removeChild(textGradient);
  170.         }
  171.  
  172.         const fontSelectorBlock = document.createElement('label');
  173.         fontSelectorBlock.className = 'font-selector-block';
  174.         styleContBody.appendChild(fontSelectorBlock);
  175.  
  176.         const fontSelector = document.createElement('select');
  177.         fontSelector.id = 'font-selector';
  178.         fontSelector.style.width = '40%';
  179.         fontSelector.style.borderRadius = '20px';
  180.         fontSelector.style.border = '1px solid #fff';
  181.         fontSelector.style.background = '#222';
  182.         fontSelector.style.color = '#fff';
  183.         fontSelector.style.fontSize = '18px';
  184.         fontSelector.style.textAlign = 'center';
  185.         fontSelector.style.padding = '4px';
  186.         fontSelector.style.marginTop = '25px';
  187.         fontSelector.style.marginRight = '10px';
  188.         fontSelector.style.boxShadow = '0px 0px 5px #fff';
  189.         fontSelector.style.cursor = 'pointer';
  190.         const storedFont = localStorage.getItem('selectedFont') || 'Roboto';
  191.         const fonts = ['Bad Script', 'Comfortaa', 'Fira Sans', 'Marmelad', 'Montserrat', 'Neucha', 'Play', 'Roboto', 'Sofia Sans', 'Ubuntu'];
  192.         fonts.forEach(font => {
  193.             const option = document.createElement('option');
  194.             option.value = font;
  195.             option.textContent = font;
  196.             if (font === storedFont) {
  197.                 option.selected = true;
  198.                 document.body.style.fontFamily = font;
  199.             }
  200.             fontSelector.appendChild(option);
  201.         });
  202.         fontSelector.addEventListener('change', function() {
  203.             const selectedFont = this.value;
  204.             document.body.style.fontFamily = selectedFont;
  205.             localStorage.setItem('selectedFont', selectedFont);
  206.         });
  207.         fontSelectorBlock.appendChild(fontSelector);
  208.  
  209.         const fontSelectorText = document.createElement('span');
  210.         fontSelectorText.className = 'addingText';
  211.         fontSelectorText.textContent = 'Выбор Шрифта';
  212.         fontSelectorBlock.appendChild(fontSelectorText);
  213.  
  214.         const colorSelectorBlock = document.createElement('label');
  215.         colorSelectorBlock.className = 'color-selector-block';
  216.         styleContBody.appendChild(colorSelectorBlock);
  217.  
  218.         const colorSelector = document.createElement('select');
  219.         colorSelector.id = 'color-selector';
  220.         colorSelector.style.width = '40%';
  221.         colorSelector.style.borderRadius = '20px';
  222.         colorSelector.style.border = '1px solid #fff';
  223.         colorSelector.style.background = '#222';
  224.         colorSelector.style.color = '#fff';
  225.         colorSelector.style.fontSize = '18px';
  226.         colorSelector.style.textAlign = 'center';
  227.         colorSelector.style.padding = '4px';
  228.         colorSelector.style.marginTop = '25px';
  229.         colorSelector.style.marginRight = '10px';
  230.         colorSelector.style.boxShadow = '0px 0px 5px #fff';
  231.         colorSelector.style.cursor = 'pointer';
  232.         const storedColor = localStorage.getItem('selectedColor') || 'WHITE';
  233.         const colors = ['WHITE', 'PINK', 'CYAN', 'KHAKI', 'SKYBLUE', 'PALEGREEN'];
  234.         colors.forEach(color => {
  235.             const option = document.createElement('option');
  236.             option.value = color;
  237.             option.textContent = color;
  238.             if (color === storedColor) {
  239.                 option.selected = true;
  240.                 applySelectedStyle(color);
  241.             }
  242.             colorSelector.appendChild(option);
  243.         });
  244.         colorSelector.addEventListener('change', function() {
  245.             const selectedColor = this.value;
  246.             localStorage.setItem('selectedColor', selectedColor);
  247.             applySelectedStyle(selectedColor);
  248.         });
  249.         colorSelectorBlock.appendChild(colorSelector);
  250.  
  251.         const colorSelectorText = document.createElement('span');
  252.         colorSelectorText.className = 'addingText';
  253.         colorSelectorText.textContent = 'Выбор Цвета';
  254.         colorSelectorBlock.appendChild(colorSelectorText);
  255.  
  256.         const brightnessSliderBlock = document.createElement('label');
  257.         brightnessSliderBlock.className = 'brightness-slider-block';
  258.         styleContBody.appendChild(brightnessSliderBlock);
  259.  
  260.         const storedBright = localStorage.getItem('savedBrightness') || '100';
  261.         const htmlContent = document.querySelector('html');
  262.         const brightnessSlider = document.createElement('input');
  263.         htmlContent.style.filter = `brightness(${storedBright}%)`
  264.         brightnessSlider.id = 'brightness-slider';
  265.         brightnessSlider.type = 'range';
  266.         brightnessSlider.min = '30';
  267.         brightnessSlider.max = '100';
  268.         brightnessSlider.style.marginTop = '25px';
  269.         brightnessSlider.style.marginRight = '10px';
  270.         brightnessSlider.value = storedBright;
  271.         brightnessSlider.addEventListener('input', function() {
  272.             const brightnessValue = this.value;
  273.             localStorage.setItem('savedBrightness', brightnessValue);
  274.             htmlContent.style.filter = `brightness(${brightnessValue}%)`;
  275.         });
  276.         const filterHeading = document.querySelector('#log-filter-heading');
  277.         if (filterHeading) {
  278.             filterHeading.parentNode.insertBefore(brightnessSlider, filterHeading.nextSibling);
  279.         }
  280.         const sliderStyle = document.createElement('style');
  281.         sliderStyle.textContent = `input[type=range]  {width: 40%; border-radius: 10px; -webkit-appearance: none; -moz-appearance: none; appearance: none; box-shadow: 0px 0px 5px #fff;}
  282.                                    input[type=range]::-webkit-slider-runnable-track {border-radius: 10px; height: 15px; border: 2px solid #fff; background-color: #222;}
  283.                                    input[type=range]::-webkit-slider-thumb {background: #444; border: 1px solid #fff; box-shadow: 0px 0px 2px #fff; border-radius: 25px; cursor: pointer; width: 15px; height: 30px; -webkit-appearance: none; margin-top: -8px;}
  284.                                    input[type=range]::-moz-range-track {border-radius: 10px/100%; height: 5px; border: 1px solid cyan; background-color: #fff;}
  285.                                    input[type=range]::-moz-range-thumb {background: #ecf0f1; border: 1px solid cyan; border-radius: 10px/100%; cursor: pointer;}`;
  286.         document.head.appendChild(sliderStyle);
  287.         brightnessSliderBlock.appendChild(brightnessSlider);
  288.  
  289.         const brightnessSliderText = document.createElement('span');
  290.         brightnessSliderText.className = 'addingText';
  291.         brightnessSliderText.textContent = 'Выбор Яркости';
  292.         brightnessSliderBlock.appendChild(brightnessSliderText);
  293.  
  294.         const nickColorBlock = document.createElement('label');
  295.         nickColorBlock.className = 'color-picker-nickname';
  296.         styleContBody.appendChild(nickColorBlock);
  297.  
  298.         const colorNickElement = document.createElement('input');
  299.         const nickColor = localStorage.getItem('playerNameColor') || '#ff8800';
  300.         colorNickElement.type = 'color';
  301.         colorNickElement.style.marginTop = '20px';
  302.         colorNickElement.style.marginRight = '10px';
  303.         colorNickElement.style.width = '40%';
  304.         colorNickElement.value = nickColor;
  305.         colorNickElement.addEventListener('input', function() {
  306.             const selectedColor = colorNickElement.value;
  307.             const tdElements = document.querySelectorAll('td.td-player-name[data-v-2d76ca92=""]');
  308.             localStorage.setItem('playerNameColor', selectedColor);
  309.             tdElements.forEach(function(td) {
  310.                 const playerNick = td.querySelector('a');
  311.                 if (playerNick) {
  312.                     playerNick.style.color = selectedColor;
  313.                     playerNick.style.textShadow = '0px 0px 1px' + selectedColor;
  314.                 }
  315.             });
  316.         });
  317.         nickColorBlock.appendChild(colorNickElement);
  318.  
  319.         const colorNickText = document.createElement('span');
  320.         colorNickText.className = 'addingText';
  321.         colorNickText.textContent = 'Цвет Никнеймов';
  322.         nickColorBlock.appendChild(colorNickText);
  323.  
  324.         const categoryColorBlock = document.createElement('label');
  325.         nickColorBlock.className = 'color-picker-category';
  326.         styleContBody.appendChild(categoryColorBlock);
  327.  
  328.         const colorCategoryElement = document.createElement('input');
  329.         const categoryColor = localStorage.getItem('categoryColor') || '#0088ff';
  330.         colorCategoryElement.type = 'color';
  331.         colorCategoryElement.style.marginTop = '20px';
  332.         colorCategoryElement.style.marginRight = '10px';
  333.         colorCategoryElement.style.width = '40%';
  334.         colorCategoryElement.value = categoryColor;
  335.         colorCategoryElement.addEventListener('input', function() {
  336.             const selectedColor = colorCategoryElement.value;
  337.             const tdElements = document.querySelectorAll('td.td-category[data-v-2d76ca92=""]');
  338.             localStorage.setItem('categoryColor', selectedColor);
  339.             tdElements.forEach(function(td) {
  340.                 const category = td.querySelector('a');
  341.                 if (category) {
  342.                     category.style.color = selectedColor;
  343.                     category.style.textShadow = '0px 0px 1px' + selectedColor;
  344.                 }
  345.             });
  346.         });
  347.         categoryColorBlock.appendChild(colorCategoryElement);
  348.  
  349.         const colorCategoryText = document.createElement('span');
  350.         colorCategoryText.className = 'addingText';
  351.         colorCategoryText.textContent = 'Цвет Категорий';
  352.         categoryColorBlock.appendChild(colorCategoryText);
  353.     }
  354.  
  355.     function applySavedColors() {
  356.         const savedNick = localStorage.getItem('playerNameColor');
  357.         const savedCategory = localStorage.getItem('categoryColor');
  358.         const savedColors = document.createElement('style');
  359.         savedColors.textContent = `.td-player-name[data-v-2d76ca92] a[data-v-2d76ca92] {
  360.         color: ${savedNick};
  361.         text-shadow: 0px 0px 1px ${savedNick};
  362.         }
  363.         .td-category[data-v-2d76ca92] a[data-v-2d76ca92] {
  364.         color: ${savedCategory};
  365.         text-shadow: 0px 0px 1px ${savedCategory};
  366.         }`
  367.         document.head.appendChild(savedColors);
  368.     }
  369.  
  370.     function applySelectedStyle(color) {
  371.     const currentStyleElement = document.getElementById('customStyle');
  372.     if (currentStyleElement) {
  373.         currentStyleElement.remove();
  374.     }
  375.     const styleElement = document.createElement('style');
  376.     styleElement.id = 'customStyle';
  377.     styleElement.textContent = `h1, h2, h3, h4, h5, h6 { color: ${color.toLowerCase()} !important; filter: contrast(0.8); text-shadow: 0px 0px 10px ${color.toLowerCase()} !important;}
  378.     #log-filter[data-v-2d76ca92] .form-label[data-v-2d76ca92] {color: ${color.toLowerCase()} !important; filter: contrast(0.8); text-shadow: 0px 0px 2px ${color.toLowerCase()} !important;}
  379.     #log-filter-section[data-v-2d76ca92] {border: 1px solid ${color.toLowerCase()} !important;}
  380.     .navbar-dark .navbar-nav .nav-link {color: ${color.toLowerCase()} !important; filter: contrast(0.8); text-shadow: 0px 0px 2px ${color.toLowerCase()} !important;}
  381.     #log-table[data-v-2d76ca92]>:not(:last-child)>:last-child>*, .table>:not(:last-child)>:last-child>* {color: ${color.toLowerCase()} !important; border-bottom: 1px solid ${color.toLowerCase()} !important;}
  382.     #log-table[data-v-2d76ca92] .first-row[data-v-2d76ca92] td[data-v-2d76ca92] {color: ${color.toLowerCase()} !important; text-shadow: 0px 0px 2px ${color.toLowerCase()} !important;}
  383.     #log-table[data-v-2d76ca92]>:not(caption)>*>*, .table-borderless>:not(caption)>*>* {border-bottom: 1px solid ${color.toLowerCase()} !important;}
  384.     #log-table[data-v-2d76ca92] .second-row[data-v-2d76ca92] td[data-v-2d76ca92] {color: ${color.toLowerCase()} !important; text-shadow: 0px 0px 2px ${color.toLowerCase()} !important;}
  385.     .form-control {color: ${color.toLowerCase()} !important; border: 1px solid ${color.toLowerCase()} !important;}
  386.     .input-group.has-validation>.dropdown-toggle:nth-last-child(n+4), .input-group.has-validation>:nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu), .input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3), .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {color: ${color.toLowerCase()} !important; border: 1px solid ${color.toLowerCase()} !important;}
  387.     .autoComplete_wrapper>input {border: 1px solid ${color.toLowerCase()} !important;}
  388.     .dp__input{border: 1px solid ${color.toLowerCase()} !important;};
  389.     ` ;
  390.     document.head.appendChild(styleElement);
  391.     }
  392.  
  393.     function applySwitchStyle() {
  394.     const switchStyle = document.createElement('style');
  395.     switchStyle.textContent = `
  396.         .switch {
  397.             position: relative;
  398.             display: inline-block;
  399.             width: 60px;
  400.             height: 34px;
  401.             padding-left: 20px;
  402.         }
  403.         .switch input { display: none; }
  404.         .slider {
  405.             position: absolute;
  406.             cursor: pointer;
  407.             top: 0;
  408.             left: 0;
  409.             right: 0;
  410.             bottom: 0;
  411.             background-color: #ccc;
  412.             transition: all .4s ease;
  413.         }
  414.         .slider:before {
  415.             position: absolute;
  416.             content: "";
  417.             height: 26px;
  418.             width: 26px;
  419.             left: 4px;
  420.             bottom: 4px;
  421.             background-color: white;
  422.             transition: all .4s ease;
  423.         }
  424.         input:checked + .slider {
  425.             background-color: #222;
  426.         }
  427.         input:focus + .slider {
  428.             box-shadow: 0 0 1px #222;
  429.         }
  430.         input:checked + .slider:before {
  431.             transform: translateX(26px);
  432.         }
  433.         .slider.round {
  434.             border-radius: 34px;
  435.         }
  436.         .slider.round:before {
  437.             border-radius: 50%;
  438.         }
  439.     `;
  440.     document.head.appendChild(switchStyle);};
  441.  
  442.     function applyBodyStyle() {
  443.         const bodyStyle = document.createElement('style');
  444.         bodyStyle.textContent = `
  445.         .bg-dark {
  446.     bs-bg-opacity: 0;
  447.     background: #000 !important;
  448. }
  449. .modal-header {
  450.     border-top-left-radius: 25px !important;
  451.     border-top-right-radius: 25px !important;
  452. }
  453. .modal-body {
  454.     border-bottom-left-radius: 25px !important;
  455.     border-bottom-right-radius: 25px !important;
  456. }
  457. .modal-content {
  458.     border-radius: 25px;
  459. }
  460. .modal-open {
  461.     padding-right: 0px !important;
  462. }
  463. .modal-backdrop {
  464.     height: 100%;
  465.     width: 100%;
  466. }
  467. .modal.fade.show {
  468.     padding-right: 80px !important;
  469.     padding-left: 80px !important;
  470. }
  471. .addingText {
  472.     font-size: 20px;
  473.     font-style: italic;
  474.     font-weight: 800;
  475. }
  476. h1, h2, h3, h4, h5, h6 {
  477.     color: #fff;
  478.     text-shadow: 0px 0px 10px #fff;
  479. }
  480. #game-logs-app {
  481.   background: #000;
  482. }
  483. body {
  484.     background-color: #000;
  485.     background-size: 100%;
  486. }
  487. .navbar-dark .navbar-brand, .navbar-dark .navbar-brand:focus, .navbar-dark .navbar-brand:hover {
  488.     color: #fff;
  489.     font-weight: 900;
  490. }
  491. @keyframes textGradient {
  492.     0% { background-position: 0% 50%; }
  493.     100% { background-position: 1200% 50%; }
  494. }
  495. .bg-success {
  496.     background: #000 !important;
  497.     border: 1px solid #fff;
  498.     box-shadow: 0px 0px 10px #fff;
  499. }
  500. .badge {
  501.     border-radius: 7px;
  502.     color: #fff;
  503.     display: inline-block;
  504.     font-size: .75em;
  505.     font-weight: 500;
  506.     line-height: 1;
  507.     padding: 0.35em 0.65em;
  508.     text-align: center;
  509.     vertical-align: baseline;
  510.     white-space: nowrap;
  511. }
  512. .navbar-dark .navbar-nav .nav-link {
  513.     color: #fff;
  514.     text-shadow: 0px 0px 10px #fff;
  515. }
  516. .bi-arrow-left::before {
  517.     color: #fff;
  518. }
  519. #log-table[data-v-2d76ca92]>:not(:last-child)>:last-child>*, .table>:not(:last-child)>:last-child>* {
  520.     border: 1px solid #111;
  521.     border-bottom: 1px solid #fff;
  522.     background: #111;
  523.     color: #fff;
  524. }
  525. #log-table[data-v-2d76ca92] .first-row[data-v-2d76ca92] td[data-v-2d76ca92] {
  526.     text-align: center;
  527.     background: #111;
  528.     color: #fff;
  529.     text-shadow: 0px 0px 2px #fff;
  530. }
  531. .td-category[data-v-2d76ca92] a[data-v-2d76ca92] {
  532.     color: #08f;
  533.     -webkit-background-clip: text;
  534.     font-style: italic;
  535.     font-weight: 700;
  536.     text-decoration: none;
  537.     text-shadow: 0px 0px 1px #08f;
  538.     padding-right: 3px;
  539. }
  540. .td-player-name[data-v-2d76ca92] a[data-v-2d76ca92] {
  541.     color: #f80;
  542.     -webkit-background-clip: text;
  543.     font-style: italic;
  544.     font-weight: 700;
  545.     text-decoration: none;
  546.     text-shadow: 0px 0px 1px #f80;
  547.     padding-right: 3px;
  548. }
  549. #log-table[data-v-2d76ca92] .second-row[data-v-2d76ca92] td[data-v-2d76ca92] {
  550.     padding: 0.5rem 0.5rem 0.5rem 1.5rem;
  551.     background: #000;
  552.     color: #fff;
  553.     text-shadow: 0px 0px 2px #fff;
  554. }
  555. .td-index[data-v-2d76ca92] {
  556.     background: linear-gradient(90deg, rgba(51,51,51,1) 0%, rgba(17,17,17,1) 100%) !important;
  557.     color: #fff;
  558. }
  559. #log-table[data-v-2d76ca92]>:not(caption)>*>*, .table-borderless>:not(caption)>*>* {
  560.     border: 1px solid rgba(0,0,0,0);
  561.     border-bottom: 1px solid #fff;
  562. }
  563. .bi-sort-down::before {
  564.     color: #f90;
  565.     text-shadow: 0px 0px 2px #f90;
  566. }
  567. .bi-sort-up::before {
  568.     color: #f90;
  569.     text-shadow: 0px 0px 2px #f90;
  570. }
  571. #log-table[data-v-2d76ca92] .first-row[data-v-2d76ca92] td[data-v-2d76ca92] {
  572.     border: 1px solid rgba(0,0,0,0);
  573.     text-align: center;
  574. }
  575. #log-filter-section[data-v-2d76ca92] {
  576.     background: #000;
  577.     border: 1px solid #fff;
  578.     border-radius: 25px;
  579.     height: 830px;
  580.     margin-left: 1rem;
  581.     min-width: 20rem;
  582.     overflow-y: auto;
  583. }
  584. #log-filter[data-v-2d76ca92] .form-label[data-v-2d76ca92] {
  585.     color: #fff;
  586.     font-weight: 500;
  587. }
  588. #log-filter[data-v-2d76ca92] .close-btn[data-v-2d76ca92] {
  589.     height: 41px;
  590.     background: #000;
  591.     border-bottom-left-radius: 10px;
  592.     border: 1px solid #000;
  593. }
  594. .btn-primary, .submit-btn {
  595.     background-color: #000;
  596.     border: 3px solid #0af;
  597.     border-radius: 10px;
  598.     color: #0ff;
  599. }
  600. .btn-outline-danger {
  601.     border: 3px solid #f00;
  602.     color: #f00;
  603.     border-radius: 10px;
  604. }
  605. .input-group.has-validation>.dropdown-toggle:nth-last-child(n+4), .input-group.has-validation>:nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu), .input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3), .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
  606.     border-bottom-right-radius: 0;
  607.     border-top-right-radius: 0;
  608.     background: #111;
  609.     color: #fff;
  610.     border: 1px solid #fff;
  611. }
  612. .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback):not(.field-error) {
  613.     border-bottom-left-radius: 0;
  614.     border-top-left-radius: 0;
  615.     margin-left: -1px;
  616.     background: #000;
  617.     color: #fff;
  618. }
  619. .form-control {
  620.     -webkit-appearance: none;
  621.     -moz-appearance: none;
  622.     appearance: none;
  623.     background-clip: padding-box;
  624.     background-color: #fff;
  625.     border: 1px solid #fff;
  626.     border-radius: 0.25rem;
  627.     color: #fff;
  628.     display: block;
  629.     font-size: 1rem;
  630.     font-weight: 400;
  631.     line-height: 1.5;
  632.     padding: 0.375rem 0.75rem;
  633.     transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  634.     width: 100%;
  635. }
  636. .form-control:focus {
  637.     background-color: #fff;
  638.     border-color: #fff;
  639.     box-shadow: 0px 0px 10px #fff;
  640.     color: #212529;
  641.     outline: 0;
  642. }
  643. .multiselect-search {
  644.     -webkit-appearance: none;
  645.     -moz-appearance: none;
  646.     appearance: none;
  647.     background: #000;
  648.     border: 0;
  649.     border-radius: var(--ms-radius,4px);
  650.     bottom: 0;
  651.     box-sizing: border-box;
  652.     color: #fff;
  653.     font-family: inherit;
  654.     font-size: inherit;
  655.     left: 0;
  656.     outline: none;
  657.     padding-left: var(--ms-px,.875rem);
  658.     position: absolute;
  659.     right: 0;
  660.     top: 0;
  661.     width: 100%;
  662. }
  663. .multiselect-option {
  664.     align-items: center;
  665.     box-sizing: border-box;
  666.     cursor: pointer;
  667.     background: #000;
  668.     display: flex;
  669.     font-size: var(--ms-option-font-size,1rem);
  670.     justify-content: flex-start;
  671.     line-height: var(--ms-option-line-height,1.375);
  672.     padding: var(--ms-option-py,.5rem) var(--ms-option-px,.75rem);
  673.     text-align: left;
  674.     text-decoration: none;
  675. }
  676. .multiselect .multiselect-option.is-pointed {
  677.     background-color: #222;
  678.     color: #fff;
  679. }
  680. .multiselect .multiselect-option.is-pointed.is-selected {
  681.     background-color: #666;
  682.     color: #fff;
  683. }
  684. .multiselect .multiselect-option.is-selected {
  685.     background-color: #444;
  686.     color: #fff;
  687. }
  688. .autoComplete_wrapper>input {
  689.     background-color: #000;
  690.     background-origin: border-box;
  691.     background-position: left 1.05rem top 0.8rem;
  692.     background-repeat: no-repeat;
  693.     background-size: 1.4rem;
  694.     border: 1px solid #fff;
  695.     border-radius: 4px;
  696.     box-sizing: border-box;
  697.     color: #f90;
  698.     font-size: 1rem;
  699.     height: 2.45rem;
  700.     margin: 0;
  701.     outline: none;
  702.     padding: 0 1rem;
  703.     text-overflow: ellipsis;
  704.     transition: all .4s ease;
  705.     width: 100%;
  706. }
  707. .autoComplete_wrapper>input:focus {
  708.     border: 1px solid #f90;
  709.     color: #f90;
  710. }
  711. .autoComplete_wrapper>ul>li {
  712.     background-color: #000;
  713.     color: #fff;
  714.     font-size: 1rem;
  715.     margin: 0;
  716.     overflow: hidden;
  717.     padding: 0.3rem 0.5rem;
  718.     text-align: left;
  719.     text-overflow: ellipsis;
  720.     transition: all .2s ease;
  721.     white-space: nowrap;
  722. }
  723. .autoComplete_wrapper>ul>li:hover, .autoComplete_wrapper>ul>li[aria-selected=true] {
  724.     background-color: #222;
  725. }
  726. .autoComplete_wrapper>ul>li mark {
  727.     background-color: transparent;
  728.     color: #f90;
  729.     font-weight: 700;
  730. }
  731. .form-control {
  732.     -webkit-appearance: none;
  733.     -moz-appearance: none;
  734.     appearance: none;
  735.     background-clip: padding-box;
  736.     background-color: #000;
  737.     border: 1px solid #fff;
  738.     border-radius: 0.25rem;
  739.     color: #fff;
  740.     display: block;
  741.     font-size: 1rem;
  742.     font-weight: 400;
  743.     line-height: 1.5;
  744.     padding: 0.375rem 0.75rem;
  745.     transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  746.     width: 100%;
  747. }
  748. .form-control:focus {
  749.     background-color: #000;
  750.     border-color: #fff;
  751.     box-shadow: 0px 0px 10px #fff;
  752.     color: #fff;
  753.     outline: 0;
  754. }
  755. .dp__input {
  756.     background-color: #111;
  757.     border: 1px solid #fff;
  758.     border-radius: 5px;
  759.     box-sizing: border-box;
  760.     color: #fff;
  761.     font-family: -apple-system,blinkmacsystemfont,Segoe UI,roboto,oxygen,ubuntu,cantarell,Open Sans,Helvetica Neue,sans-serif;
  762.     font-size: 1rem;
  763.     line-height: 1.5rem;
  764.     outline: none;
  765.     padding: 6px 30px;
  766.     transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  767.     width: 100%;
  768. }
  769. #loading-overlay[data-v-173ec149] {
  770.     height: 100%;
  771.     width: 100%;
  772. }
  773. #loading-overlay-heading[data-v-173ec149] {
  774.     font-size: 2rem;
  775.     font-weight: 500;
  776.     letter-spacing: 1px;
  777.     padding: 1rem;
  778.     text-align: center;
  779.     text-transform: uppercase;
  780.     background: linear-gradient(90deg, #ffffff, #444444, #ffffff);
  781.     background-size: 150% 150%;
  782.     background-clip: text;
  783.     -webkit-background-clip: text;
  784.     color: transparent !important;
  785.     filter: saturate(0);
  786.     animation: textGradient 5s linear infinite;
  787.     text-shadow: none !important;
  788. }
  789. #loading-overlay[data-v-173ec149] .spinner[data-v-173ec149] {
  790.     border-width: 0.375rem;
  791.     color: #fff;
  792.     height: 4rem;
  793.     width: 4rem;
  794. }
  795. #loading-overlay-container[data-v-173ec149] {
  796.     align-items: center;
  797.     display: flex;
  798.     flex-direction: column;
  799.     background-color: #000;
  800.     height: 100%;
  801.     justify-content: center;
  802.     width: 100%;
  803. }
  804. #placeholder-pic[data-v-9c1e68e2] {
  805.     display: block;
  806.     opacity: 0;
  807.     margin: auto;
  808.     max-height: 20rem;
  809. }
  810. #content-placeholder[data-v-9c1e68e2] {
  811.     background-image: url(https://snipboard.io/8kBudo.jpg);
  812.     background-repeat: no-repeat;
  813.     background-size: contain;
  814.     background-position: center;
  815. }
  816. .bi-question-circle-fill::before {
  817.     color: #666;
  818.     text-shadow: 0px 0px 10px #000;
  819. }
  820. .modal-header {
  821.     background: #000;
  822.     border: 1px solid #fff;
  823.     align-items: center;
  824.     border-bottom: 1px solid #dee2e6;
  825.     border-top-left-radius: calc(0.3rem - 1px);
  826.     border-top-right-radius: calc(0.3rem - 1px);
  827.     display: flex;
  828.     flex-shrink: 0;
  829.     justify-content: space-between;
  830.     padding: 1rem;
  831. }
  832. .modal-body {
  833.     background: #000;
  834.     border: 1px solid #fff;
  835.     color: #fff;
  836.     flex: 1 1 auto;
  837.     padding: 1rem;
  838.     position: relative;
  839. }
  840. .fade {
  841.     transition: opacity .15s linear;
  842.     backdrop-filter: blur(5px);
  843. }
  844. .show-filter-btn[data-v-2d76ca92] {
  845.     background: #328;
  846.     border-bottom-left-radius: 10px;
  847.     border: 0;
  848.     height: 44px;
  849.     opacity: 1;
  850.     position: fixed;
  851.     right: 0;
  852.     top: 0;
  853.     z-index: 1059;
  854. }
  855. body::-webkit-scrollbar {
  856.   width: 16px;
  857. }
  858. body::-webkit-scrollbar-track {
  859.   background: #222;
  860.   border-left: 1px solid #fff;
  861. }
  862. body::-webkit-scrollbar-thumb {
  863.   background-color: #fff;
  864.   border-radius: 20px;
  865.   border: 1px solid #222;
  866. }
  867. .multiselect-dropdown::-webkit-scrollbar {
  868.   width: 12px;
  869. }
  870. .multiselect-dropdown::-webkit-scrollbar-track {
  871.   background: #222;
  872.   border-left: 1px solid #fff;
  873. }
  874. .multiselect-dropdown::-webkit-scrollbar-thumb {
  875.   background-color: #fff;
  876.   border-radius: 20px;
  877.   border: 1px solid #222;
  878. }
  879. .autoComplete_wrapper>ul::-webkit-scrollbar {
  880.   width: 12px;
  881. }
  882. .autoComplete_wrapper>ul::-webkit-scrollbar-track {
  883.   background: #222;
  884.   border-left: 1px solid #fff;
  885. }
  886. .autoComplete_wrapper>ul::-webkit-scrollbar-thumb {
  887.   background-color: #fff;
  888.   border-radius: 20px;
  889.   border: 1px solid #222;
  890. }
  891. input#playerNameInput::placeholder {
  892.   color: #a60;
  893. }
  894. .multiselect.is-open.is-active {
  895. box-shadow: 0px 0px 10px #fff;
  896. }
  897. .autoComplete_wrapper>input:hover {
  898.     color: #a60;
  899.     transition: all .3s ease;
  900.   }
  901. .dp__input_icons {
  902.     color: #0ff;
  903.   }
  904. .dp__month_year_row {
  905.     background: #111;
  906.     color: #fff;
  907.   }
  908. .dp__inner_nav svg {
  909.     color: #0ff;
  910.   }
  911. .dp__calendar_header, .dp__calendar_wrap {
  912.     background: #111;
  913.   }
  914. .dp__calendar_header_item {
  915.     color: #fff;
  916.   }
  917. .dp__cell_inner {
  918.     color: #fff;
  919.   }
  920. .dp__active_date, .dp__range_end, .dp__range_start {
  921.     background: #666;
  922.     color: #fff;
  923.   }
  924. .dp__date_hover:hover, .dp__date_hover_end:hover, .dp__date_hover_start:hover {
  925.     background: #444;
  926.     color: #fff;
  927. 		transition: all .5s ease-in-out;
  928.   }
  929. .dp__cell_disabled, .dp__cell_offset {
  930.     color: #444;
  931.   }
  932. .dp__button {
  933.     background: #222;
  934. }
  935. .dp__button_bottom {
  936.     background: #222;
  937.     color: #0ff;
  938.   }
  939. .dp__button:hover {
  940.     background: #328;
  941.     color: #077;
  942.     transition: all .5s ease-in-out;
  943.   }
  944. .dp__month_year_select:hover {
  945.     background: #222;
  946.     color: #fff;
  947.     transition: all .5s ease-in-out;
  948.   }
  949. .dp__overlay_cell, .dp__overlay_cell_active {
  950.     background: #444;
  951.   }
  952. .dp__overlay_container {
  953.     background: #000;
  954.   }
  955. .dp__overlay_cell_disabled, .dp__overlay_cell_disabled:hover {
  956.     background: #111;
  957.     color: #444;
  958.   }
  959. .dp__time_display {
  960.     color: #aaa;
  961.   }
  962. .dp__time_display:hover {
  963.     background: #111;
  964.     color: #fff;
  965.     transition: all .3s ease-in-out;
  966.   }
  967. .dp__inc_dec_button:hover {
  968.     background: #222;
  969.     color: #0ff;
  970.     transition: all .3s ease-in-out;
  971.   }
  972. .dp__cell_in_between, .dp__overlay_cell:hover {
  973.     background: #666;
  974.     color: #fff;
  975.     transition: all .3s ease-in-out;
  976.   }
  977. .dp__overlay_cell_pad {
  978.     padding: 10px 0;
  979.     color: #999;
  980.   }
  981. .dp__inner_nav:hover {
  982.     background: #328;
  983.     color: #fff;
  984.     transition: all .3s ease-in-out;
  985.   }
  986. .dp__today {
  987.     border: 1px solid #fff;
  988.   }
  989. .btn-outline-danger:hover {
  990.     background-color: #900;
  991.     border-color: #fff;
  992.     color: #fff;
  993.     transition: all .2s ease-in-out;
  994.   }
  995. .btn-primary:hover, .submit-btn:hover {
  996.     background-color: #033;
  997.     border-color: #fff;
  998.     color: #fff;
  999.     transition: all .2s ease-in-out;
  1000.   }
  1001. #next-page-btn[data-v-2d76ca92], .btn-secondary, .close-btn, .icon-btn, .show-filter-btn {
  1002.     background-color: #222;
  1003.     border-color: #fff;
  1004.     color: #fff;
  1005. }
  1006. #next-page-btn[data-v-2d76ca92]:hover, .btn-secondary:hover, .close-btn:hover, .icon-btn:hover, .show-filter-btn:hover {
  1007.     background-color: #444;
  1008.     border-color: #aaa;
  1009.     color: #fff;
  1010. }
  1011. #prev-page-btn[data-v-2d76ca92], .btn-outline-secondary {
  1012.     border-color: #fff;
  1013.     color: #fff;
  1014. }
  1015. #prev-page-btn[data-v-2d76ca92]:hover, .btn-outline-secondary:hover {
  1016.     background-color: #444;
  1017.     border-color: #aaa;
  1018.     color: #fff;
  1019. }
  1020. .lookup-comment[data-v-2d76ca92] {
  1021.     color: #fff;
  1022.     font-size: .9rem;
  1023.     font-weight: 400;
  1024. }
  1025. .accessible-servers .page-intro {
  1026.     color: #0ff;
  1027.     font-size: 1.15rem;
  1028.     font-weight: 300;
  1029.     text-align: center;
  1030.     text-shadow: 0px 0px 10px #fff;
  1031. }
  1032. a {
  1033.     color: #faf;
  1034.     text-decoration: none;
  1035. }
  1036. .dropdown-item:focus, .dropdown-item:hover {
  1037.     background-color: #444;
  1038.     color: #1e2125;
  1039. }
  1040. .dropdown-menu {
  1041.     background-color: #222;
  1042. }
  1043. .accessible-servers .game-logs-link {
  1044.     font-size: 1.5rem;
  1045.     text-shadow: 0px 0px 10px #f0f;
  1046. }
  1047. a:hover {
  1048.     color: #f0f;
  1049. }
  1050. #placeholder-msg[data-v-9c1e68e2] {
  1051.     color: #0aa;
  1052.     font-size: 1.25rem;
  1053.     padding: 1rem;
  1054.     text-align: center;
  1055. }
  1056. strong {
  1057.     color: #0ff;
  1058. }
  1059. .modal [type=button], .modal [type=submit] {
  1060.     margin-left: 0.5rem;
  1061.     filter: invert(1);
  1062. }
  1063. .lookup-symbol[data-v-2d76ca92] {
  1064.     color: #fff;
  1065.     font-size: 1.125rem;
  1066.     font-weight: 500;
  1067.     width: 1.75rem;
  1068.     text-shadow: 0px 0px 10px #fff;
  1069. }
  1070. .lookup-comment[data-v-2d76ca92] {
  1071.     color: #fff;
  1072.     font-size: .9rem;
  1073.     font-weight: 400;
  1074.     text-shadow: 0px 0px 10px #fff;
  1075. }
  1076. .dropdown-menu show {
  1077.     position: absolute;
  1078.     inset: 0px auto auto 0px;
  1079.     margin: 0px;
  1080.     transform: translate(-1px, 40px);
  1081.     background: #328;
  1082. }
  1083. .alert-danger, .alert-modal.failure .modal-content, .default-error-page .exception {
  1084.     background-color: #000;
  1085.     border: 5px solid #f11;
  1086.     border-radius: 50px;
  1087.     color: #fff;
  1088. }
  1089.     `;
  1090.         document.head.appendChild(bodyStyle);};
  1091.  
  1092.     function applyColorPickerStyle() {
  1093.         const colorPickerStyle = document.createElement('style');
  1094.         colorPickerStyle.textContent = `
  1095.         input[type="color"]::-webkit-color-swatch-wrapper {
  1096.   padding: 2px;
  1097. }
  1098.  
  1099. input[type="color"]::-webkit-color-swatch {
  1100.   border: none;
  1101.   border-radius: 20px;
  1102. }
  1103. input[type="color"] {
  1104.   -webkit-appearance: none;
  1105.   border: 2px solid #fff;
  1106.   background: #000;
  1107.   border-radius: 20px;
  1108.   overflow: hidden;
  1109.   outline: none;
  1110.   cursor: pointer;
  1111.   box-shadow: 0px 0px 5px #fff;
  1112. }`;
  1113.         document.head.appendChild(colorPickerStyle);
  1114.     }
  1115.  
  1116.     function replaceSpinnerImage() {
  1117.         const spinnerElement = document.querySelector('div.spinner.spinner-border[data-v-173ec149=""]');
  1118.         if (spinnerElement) {
  1119.             const gifImageUrl = 'https://rb.ru/media/upload_tmp/2018/d1.gif';
  1120.             const gifImage = document.createElement('img');
  1121.             gifImage.src = gifImageUrl;
  1122.             gifImage.style.width = '160px';
  1123.             gifImage.style.height = '120px';
  1124.             gifImage.style.filter = 'saturate(0)';
  1125.             spinnerElement.replaceWith(gifImage);
  1126.         }
  1127.     }
  1128.  
  1129.     function addListener() {
  1130.         const inputNameElement = document.querySelector('#playerNameInput');
  1131.         const transactionData = document.querySelector('#log-filter-form__transaction-desc');
  1132.         inputNameElement.addEventListener('keydown', function(event) {
  1133.             if (event.keyCode === 13) {
  1134.                 const otherElement = document.querySelector('.btn.btn-primary');
  1135.                 otherElement.click();
  1136.             }
  1137.         });
  1138.         transactionData.addEventListener('keydown', function(event) {
  1139.             if (event.keyCode === 13) {
  1140.                 event.preventDefault();
  1141.                 const otherElement = document.querySelector('.btn.btn-primary');
  1142.                 otherElement.click();
  1143.             }
  1144.         });
  1145.     }
  1146.  
  1147.     function setPageTitle() {
  1148.         const titleElement = document.querySelector('div.container-fluid span.badge.bg-success');
  1149.         document.title += ' - ' + titleElement.textContent;
  1150.     }
  1151.  
  1152.     function scriptInit() {
  1153.         applySwitchStyle();
  1154.  
  1155.         applyBodyStyle();
  1156.  
  1157.         applyColorPickerStyle();
  1158.  
  1159.         replaceTableHeading();
  1160.  
  1161.         replaceSpinnerImage();
  1162.  
  1163.         addListener()
  1164.  
  1165.         applySavedColors();
  1166.  
  1167.         setPageTitle();
  1168.     }
  1169. })();