LeagueOfGraphs (Darker) by zaltroscrown

/* ==UserStyle==
@name         LeagueOfGraphs (Darker)
@version      20220813.07.49
@namespace    userstyles.world/user/zaltroscrown
@description  An even darker theme for League of Graphs website by Zaltros Crown.
@author       zaltroscrown
@license      No License
==/UserStyle== */

@-moz-document url-prefix("https://www.leagueofgraphs.com") {
:root {
    --fg: #999999;
    --bg1: #111;
    --bg2: #191919;
    --bg3: #252525;
    --bg4: #333;
    --border: #444;
    --border2: #555;
}

body.game-lol{
    background-color: var(--bg1);
}
.top-bar, .top-bar .title-area, .top-bar-section ul li, .top-bar-section .has-form, .top-bar-section li:not(.has-form) a:not(.button), .top-bar-section li.active:not(.has-form) a:not(.button){ /*Generic background*/
    background-color: var(--bg1);
}
#pageContent, .top-bar-section li:not(.has-form) a:not(.button):hover, .top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button), .top-bar-section ul li:hover:not(.has-form) > a, .top-bar-section li.active:not(.has-form) a:not(.button):hover, #footer{
    background-color: var(--bg2);
    border-color: var(--border);
}
.top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button):hover, #sidebar, #sidebar #sidebar-bottom #site-infos, #sidebar #sidebar-bottom #site-links{ /*Left side drop down*/
    background-color: var(--bg3);
    border-color: var(--border);
}
#sidebar #sidebar-accordion .sidebar-navigation:not(.active) > a:not(:hover), #sidebar #sidebar-accordion .sidebar-navigation.active > a, #sidebar #sidebar-accordion .sidebar-navigation .sidebar-subnavigation a{
    background-color: var(--bg3);
    border-left: 3px solid;
    border-color: var(--border);
}
#sidebar #sidebar-accordion .sidebar-navigation > a:hover, #sidebar #sidebar-accordion .sidebar-navigation.active > a:hover, #sidebar #sidebar-accordion .sidebar-navigation .sidebar-subnavigation a:hover, #sidebar #sidebar-accordion .sidebar-navigation .sidebar-subnavigation .active > a{
    background-color: var(--bg4);
    border-left: 3px solid var(--border);
}
.top-bar #searchArea .search_field, .top-bar #searchArea .search_button, #autocomplete-area-topnav{ /*search bar*/
    background-color: var(--bg3);
    color: var(--fg);
    border-radius: 20px;
    overflow: hidden;
}
#autocomplete-area-topnav table td:hover{
    background-color: var(--bg4);
}
.nightmode-toggle .switch input:checked + .slider{ /*dark theme switch*/
    background-color: var(--border);
}
.infobanner.info{ /*Download the Porofessor app button in the center*/
    color: var(--fg);
    background-color: var(--bg4);
    border-color: var(--border);
}
button, .button{
    color: var(--fg);
    background-color: var(--border);
    border-radius: 20px;
}
button:hover, button:focus, .button:hover, .button:focus{
    color: var(--fg);
    background-color: var(--border2);
}
#mainContent .tabsContainer, .box, .data_table th, #mainContent .tabsContainer .tabs, #mainContent .tabsContainer .tabs .tab.active, #mainContent .tabsContainer .tabs .tab:hover, .summoner-rankings .other-league .rowTitle, .summoner-rankings .rankingHistoryGraph, #filters-menu #filtersMenuSearchForm .container, #filters-menu #filtersMenuSearchForm .container .hidder, #filters-menu #filtersMenuSearchForm .container form input, #filters-menu .filters-dropdown-dropdowns-container .dropdown, #filters-menu .filters-dropdown-dropdowns-container .dropdown.multiColumnsFilterDropdown .multiColumnsFilterSearchField, #filters-menu .filters-dropdown-dropdowns-container .dropdown.multiColumnsFilterDropdown .multiColumnsFilterSearchField input, #filters-menu .filters-dropdown-dropdowns-container .dropdown li.current, .data_table.probuildsTable tr td, .perksTableContainer .perksTableContainerTable th, #comments form input, #comments form textarea, .perksTableContainer, .comments-separator, .skillsOrdersTableContainer .skillsOrdersTable tr td.graphCell, .skillsOrdersTableContainer, .data_table .even, .matchPlayersTabs .content .match-subTabs-content .content, .matchPlayersTabs .content, .tabs .tab{ /* Main information*/
    background-color: var(--bg3) !important;
    border-color: var(--border) !important;
}
.skillsOrdersTableContainer .skillsOrdersTable tr td.skillCell, .skillsOrdersTableContainer .skillsOrdersTable tr td.skillIconCell{
    background-color: var(--bg3);
}
.skillsOrdersTableContainer .skillsOrdersTable tr td.skillCell.active{
    background-color: var(--bg4);
    color: var(--fg);
}
#mainContent .tabsContainer, .box{
    border-radius: 20px;
    overflow: hidden;
}
.recentGamesTable tr.recentGamesTableHeader th .recentGamesFilterContainer, .recentGamesTable tr.recentGamesTableHeader .recentGamesFilterContainer .dropdown, .recentGamesTable tr.recentGamesTableHeader .recentGamesFilterContainer .dropdown ul li:hover, .recentGamesTable tr.recentGamesTableHeader .recentGamesFilterContainer .dropdown ul li.current, .recentGamesTable tr.recentGamesTableHeader .recentGamesFilterContainer .dropdown.multiColumnsFilterDropdown .multiColumnsFilterSearchField, .recentGamesTable tr.recentGamesTableHeader .recentGamesFilterContainer .dropdown.multiColumnsFilterDropdown .multiColumnsFilterSearchField input, .recentGamesTable tr.recentGamesTableHeader .recentGamesFilterContainer .dropdown.multiColumnsFilterDropdown .multiColumnsFilterSearchField input:focus, #filters-menu .filters-dropdown-dropdowns-container .dropdown li:hover, .data_table.probuildsTable tr td.itemsTd .itemsBlock .emptyItem, .matchBox .matchTable tr.playerRow td.itemsColumn .emptyItem, .matchPlayersTabs .firstLevelTab.active, .matchPlayersTabs .firstLevelTab:hover{
    background-color: var(--bg4) !important;
    border-color: var(--border) !important;
}
progressbar .progress-bar-container{
    border: 1px solid var(--border);
}
.recentGamesTable tr.recentGamesTableHeader .recentGamesFilterContainer .dropdown a:hover{
    background-color: var(--border);
}
.data_table td, .box-title{
    border-color: var(--border) !important;
}
#filters-menu, #filters-menu .filter, .tabs .tab{
    background-color: var(--bg3);
    box-shadow: none;
}
#filters-menu .filter:hover, #filters-menu .tabs .tab.active a, #filters-menu .tabs .tab:hover a, #tooltip, .recentGamesTable .itemsColumnDark .itemsBlock .emptyItem, progressbar .progress-bar-container, #autocomplete-area-homepage table td.active, #autocomplete-area-homepage table td:hover{
    background-color: var(--bg4) !important;
    color: var(--fg) !important;
}
.champions_see_more_button, .see_more_ajax_button, .replay_button_super_small, .replay_button_small,  .replay_button_small:disabled, .see_record_rankings_button, .see_more_button, .replay_watch_button{
    background-color: var(--border)!important;
    color: var(--fg)!important;
    border-radius: 20px;
}
.champions_see_more_button:hover, .champions_see_more_button:focus, .champions_see_more_button:active, .see_more_ajax_button:hover, .see_more_ajax_button:focus, .see_more_ajax_button:active, .replay_button_super_small:hover, .replay_button_super_small:focus, .replay_button_super_small:active, .replay_button_small:hover, .replay_button_small:focus, .replay_button_small:active, .see_record_rankings_button:hover, .see_record_rankings_button:focus, .see_record_rankings_button:active, .see_more_button:hover, .see_more_button:focus, .see_more_button:active, .replay_watch_button:hover, .replay_watch_button:focus, .replay_watch_button:active{
    background-color: var(--border2)!important;
    color: var(--fg)!important;
    border-radius: 20px;
}
ul.pagination li.current-page, ul.pagination li.current-page a, ul.pagination li:hover a{ /*page numbers*/
    background-color: var(--border);
    color: var(--fg);
    border-radius: 20px;
    border-color: var(--border);
}
ul.pagination li:hover{ 
    background-color: var(--border2);
    color: var(--fg);
    border-radius: 20px;
    border-color: var(--border);
}
ul.pagination li{
    background-color: var(--bg4);
    border-radius: 20px;
    border-color: var(--border);
}
}