opggdark.user.css

/* ==UserStyle==
@name         OP.GG Dark Mode
@version      1.4.1
@description A dark theme of OP.GG.
@namespace    John-Paul-R
@preprocessor uso
@author       John Paul Rutigliano <jp@jpcode.dev> (https://www.jpcode.dev)
@homepageURL https://github.com/John-Paul-R/opggdark
@supportURL https://github.com/John-Paul-R/opggdark/issues
@updateURL https://github.com/John-Paul-R/opggdark/raw/master/opggdark.user.css
@license GPL-3.0-or-later
@var text backgroundImg "Background image URL: two double quotes for dndbeyond background choice, url for custom or blank for background color" ""
@var color background "Background Color" "#121212"
@var color header "Headers" "#202020"
@var color element1 "Element BG" "#282828"
@var color border "Border color" "#454545"
@var color background "Background Color" "#121212"
@var color opggColor "OPGG's Accent Color" "#293856"
@var text filter "Icons filter - for dark backgrounds: invert(100%) for light background: none" "invert(100%)"
@var text zindex "Z-index for dice: above 60001 for above results; below 60001 for below results" "60000"



==/UserStyle== */

@-moz-document regexp("https:\\/\\/.+\\.op\\.gg.+") {
/* AllPages */
/*  Navbar */
    .l-menu,
    .l-wrap .gnb .opgg-header__logo,
    .l-wrap .gnb .navi__item--default {
        background-color: #293856;
    }
/*     Search */
    .gnb-list-item__search .gnb-list-item__select {
        background: hsl(221, 50%, 15%);
        color: hsl(221, 65%, 80%);
    }
    .gnb-list-item__search,
    .gnb-list-item__search .gnb-list-item__list,
    .summoner-search-history__list{
        background: #202020;
    }
    .gnb-list-item__search input,
    .gnb-list-item__search .gnb-list-item__list .gnb-list-item__option{
        color: #d3d3d3;
    }
    .summoner-search-history__title li.active,
    .RecentSummonerListWrap{
        background: #202020;
        color: #d3d3d3;
    }
    .gnb-list-item__search .gnb-list-item__list .gnb-list-item__option:hover {
        background: #282828;
    }
    .summoner-search-history__title li {
        background: #282828;
        color: #b1b1b1;
    }
    .summoner-search-history__list .Item>a:hover {
        color: #d3d3d3;
    }
    .summoner-search-history__list .Item>a {
        color: #b1b1b1;
    }
/*     Region/Language-Settings */
    .modal {
        border-color: #454545;
        background-color: #282828;
    }
    .modal * {
        border-color: #454545;
    }
    .modal-header {
        background: #202020;
        border-color: #454545;
    }
    .modal-footer {
        background-color: #202020
    }
    .modal__title,
    .setting-status__label{
        color: #d3d3d3;   
    }
    li.setting-list__item--active a {
        color: #4a90e2;
    }
    .setting-list__item a {
        color: #b1b1b1;
    }
/*     Footer */
    .l-wrap--index .footer,
    .footer {
        color: #a1a1a1;
    }
}

@-moz-document regexp("https:\\/\\/.+\\.op\\.gg.+") {
/*  Hoempage */
    .l-wrap--index {
        background: #293856;
    }
    .first-time-user,
    .summoner-search-form{
        background: #202020;
    }
    .first-time-user__content {
        background: #282828;
    }
    .first-time-user__title,
    .first-time-user__item h1,
    .summoner-search-form__text{
        color: #d3d3d3;
    }
    .first-time-user,
    .first-time-user * {
        border-color: #454545
    }
    
}

@-moz-document regexp("https:\\/\\/.+\\.op\\.gg\\/summoner\\/userName=") {
/*     SummonerBlank */
    .SummonerLayout.tabWrap,
    .l-container,
    .l-wrap.l-wrap--summoner {
        background-color: /*[[background]]*/;
    }
    .SummonerBlankLayout>.Header>.Title {
        color: #d3d3d3;
    }
    .SummonerBlankLayout>.Content>.List>.Item {
        color: #b1b1b1;
    }
}
@-moz-document regexp("https:\\/\\/.+\\.op\\.gg\\/summoner(\\/champions)?\\/userName=.+") {

/*     Summoner */
/* Background */
    .SummonerLayout.tabWrap,
    .l-container{
        background-color: /*[[background]]*/;
    }
    .SummonerLayout>.Menu>.MenuList>.Item.inGame>a {
        background-color: #282828;
        color: hsl(202, 48%, 73%);
    }
    .SummonerLayout>.Menu>.MenuList>.Item.inGame>a:hover {
        background-color: #202020;
    }
    .SummonerLayout>.Menu>.MenuList>.Item.inGame.active>a {
        background-color: /*[[background]]*/
    }
    .SpectatorError,.l-wrap.l-wrap--summoner {
        background-color: #282828;
        border-color: #333333;
    }
    .SpectatorError h2 {
        color: #d3d3d3;
    }
    .SpectatorError p {
        color: #b1b1b1;
    }

    /* Elements */
    .Box {
    background-color: #303030 !important;
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
    background-size: cover !important;
    }
    .Box,
    .sub-tier {
        border: 1px solid hsl(180, 5%, 35%);
        box-shadow: 0 1px hsl(180, 4%, 28%);
    }
    .opscore-banner__header {
        background-color: #282828;
    }
    .opscore-banner__content-badge-description.ACE { 
        color: hsl(289, 59%, 65%)
    }
    .opscore-banner,
    .Button.White{
        border: 1px solid hsl(180, 5%, 35%);
    }
    .ChampionBox {
        border-bottom: 1px solid hsl(180, 5%, 28%);
    }
    .GameAverageStats tr>.MostChampion,
    .GameAverageStats tr>.PositionStats,
    .GameAverageStats tr>.Title,
    .GameListContainer>.Header>.Navigation>.Actions>.Action>.ChampionMatchSearchWrap,
    .Box>.Tab>.TabList>.Item{
        border-left: 1px solid hsl(180, 5%, 28%);
    }
    .ChampionWinRatioBox, .PositionWinRatioBox,
    .ChampionStatsTable>.Body>.Row>.Cell,
    .Box>.Navigation,
    .ChampionStatsTable>.Header>.Row>.HeaderCell{
        border-bottom: 1px solid hsl(180, 5%, 28%);
    }
    .Box>.Title {
        border-bottom: 1px solid hsl(180, 5%, 35%);
    }
    .SummonerLayout>.Header>.PastRank>.PastRankList>.Item,
    .MatchBuild .Title,
    .GameDetailTableWrap>.Summary,
    .MatchDetailHeader ul li,
    .MatchTeamAnalysisHeader ul li a,
    .MatchTeamAnalysisHeader ul{
        background-color: #282828;
        color: #d3d3d3;
        border-color: #454545;
    }
    .GameDetailTableWrap>.Summary>.Team>.ObjectScore, .GameDetailTableWrap>.Summary>.Team>.ObjectScore,
    .summary-graph>.total--container>.text{
        color: #d3d3d3;
    }
    .MatchDetailHeader ul li.active a,
    .MatchDetailHeader ul li.active,
    .GameItem.extended.Win>.GameDetail .MatchDetailHeader li.active a,
    .GameItem.extended.Lose>.GameDetail .MatchDetailHeader li.active a{
        background-color: #282828 !important;
        color: #d3d3d3 !important;
        border-color: #656565 !important;
    }
    .MatchDetailLayout .MatchDetailContent>.Content>div {
        border-color: #454545;
    }

    .Button.SemiRound.White,
    .SummonerRatingMedium,
    .sub-tier,
    .Item.tabHeader,
    .Header.Box,
    #right_search_champion,
    .Input,
    .opscore-Banner__content {
        background-color: #282828 !important;
    }
    .Button.SemiRound.White {
    color: #d0d0d0;
    }

    .SummonerLayout>.Header>.Profile>.Information>.Name,
    .ChampionInfo>.ChampionName>a,
    .Box>.Tab>.TabList>.Item.active,
    .Box>.Tab>.TabList>.Item:hover,
    .Box>.Navigation .List>.Item a.Link:hover,
    .SummonerRatingMedium>.TierRankInfo>.TierInfo>.LeaguePoints,
    .GameAverageStats tr>.KDA>.KDARatio>.KDARatio,
    .GameAverageStats tr>.MostChampion ul li .Name,
    .GameAverageStats tr>.PositionStats>ul>li .PositionStatContent .Name,
    .GameAverageStats tr>.PositionStats>ul>li .PositionStatContent .WinRatio span,
    .SpectateSummoner>.Box>.Title,
    .SpectateSummoner>.Box>.Title>small,
    .SpectateSummoner>.Box>.Content>.Table>.Body>.Row>.Cell.SummonerName>.SummonerName,
    .SpectateSummoner>.Box>.Content>.Table>.Header>.Row>.HeaderCell{
        color: #d3d3d3 !important;
    }
    
    .Box>.Tab>.TabList>.Item,
    .Box>.Navigation .List>.Item a.Link,
    .SummonerRatingMedium,
    .GameAverageStats tr>.Title,
    .GameAverageStats tr>.Summary .WinRatioGraph .Text,
    .GameAverageStats tr>.MostChampion ul li div.WonLose,
    .GameAverageStats tr>.PositionStats>ul>li .PositionStatContent .WinRatio,
    .GameAverageStats tr>.KDA>.KDA>.Kill, .GameAverageStats tr>.KDA>.KDA>.Assist,
    .GameItem>.Content>.KDA>.KDA>.Kill, .GameItem>.Content>.KDA>.KDA>.Assist,
    .SummonerLayout>.Header>.Profile>.Information>.Rank>.LadderRank>.Link,
    .GameAverageStats tr>.MostChampion ul li .KDA,
    .MostChampionContent>.MoreButton>.Action,
    .GameMoreButton>.Button,
    .GameItem>.Content>.Stats>.MMR b,
    .GameItem>.Content>.GameStats>.GameType,
    .SpectateSummoner>.Box>.Content>.Table>.Body>.Row>.Cell.CurrentSeasonTierRank,
    .SpectateSummoner>.Box>.Content>.Table>.Body>.Row>.Cell.RuneMastery>.Button{
        color: #b1b1b1;
    }

    .item.tabHeader.active,
    .Content.tabItems,
    .ChampionWinRatioBox,
    .HeaderCell,
    .GameAverageStats,
    .Message,
    .GameDetail {
    background-color: #282828 !important;
    }   
    .SummonerLayout>.Menu>.MenuList>.Item>a {
        background-color: #282828;
        color: #d3d3d3;
        border: 1px solid hsl(180, 5%, 35%);
    }
    .SummonerLayout>.Menu>.MenuList>.Item>a:hover {
        background-color: #121212;
        color: #d3d3d3;
    }
    .SummonerLayout>.Menu>.MenuList>.Item.active>a {
        background-color: /*[[background]]*/;
        color: #d3d3d3;
        border: 1px solid hsl(180, 5%, 35%);
        border-bottom-color: /*[[background]]*/
    }
    .SummonerLayout>.Menu,
    .Box>.Tab>.TabList>.Item{
        border-bottom: 1px solid hsl(180, 5%, 35%);
    }
    .Box>.Tab>.TabList>.Item.active {
        border-bottom-color: #282828;
    }

    .GameItem.Lose .Content.tabItem.MatchDetailContent-overview,
    .GameItem.Lose .Content,
    .GameItem.Lose>.Content>.StatsButton,
    .GameItem.extended.Lose>.GameDetail .MatchDetailHeader .tabHeaders,
    .GameItem.extended.Lose>.GameDetail .MatchDetailHeader li a,
    .GameItem.extended.Lose>.Content>div{
        background-color: hsl(0, 33%, 16%) !important;
        border-color: hsl(0, 33%, 30%) !important;
    }
    .GameItem.Lose.Remake .Content {
        background-color: hsl(0, 0%, 16%) !important;
        border-color: hsl(0, 0%, 30) !important;

    }
    .GameItem.Win .Content.tabItem.MatchDetailContent-overview,
    .GameItem.Win .Content,
    .GameItem.Win>.Content>.StatsButton,
    .GameItem.extended.Win>.GameDetail .MatchDetailHeader li a,
    .GameItem.extended.Win>.GameDetail .MatchDetailHeader .tabHeaders,
    .GameItem.extended.Win>.Content>div{
        background-color: hsl(231, 33%, 16%) !important;
        border-color: hsl(231, 33%, 35%) !important;
    }
    .GameItem.Lose.Remake .Content.tabItem.MatchDetailContent-overview {
    background-color: #343434 !important;

    }

    .ChampionStatsTable>.Body>.Row.TopRanker {
        background-color: #282828;
    }
    .Content.tabItems tr {
        background-color: #202020;
    }
    
    .SummonersMostGameTable>.Body>.Row.Odd>.Cell {
        background-color: #303030;
    }
    .SummonersMostGameTable>.Body>.Row>.Cell {
        background-color: #2a2a2a;
    }
    
    .ChampionStatsTable>.Body>.Row>.Cell.ChampionName>a,
    .ChampionStatsTable>.Body>.Row>.Cell.ChampionName,
    .ChampionStatsTable>.Body>.Row>.Cell {
    color: #999;
    }
    .GameDetailTable>.Header {
        border-color: #454545;
    }

    .Box,
    div.GameItem>.Content>.GameStats,
    div.GameItem>.Content>.GameSettingInfo>.ChampionName a,
    div.GameItem>.Content>.Stats,
    div.GameItem>.Content>.FollowPlayers.Names>.Team>.Summoner>.SummonerName {
    color: #888 !important;
    }
    div.GameItem>.Content>.KDA>.KDARatio .KDARatio,
    div.GameItem>.Content b,
    div.GameItem>.Content>.FollowPlayers.Names>.Team>.Summoner.Requester>.SummonerName>.Link,
    div.GameItem>.Content>.Items .Trinket {
    color: #bbb;
    }

    .OPScore.Text,
    .Name,
    .KDA .KDARatio,
    .KDA.normal,
    .Box .Title
    {
    color: #888;
    }
    .SpectateSummoner>.Box>.Content>.Table>.Body>.Row:nth-child(even)  {
    background-color: #282828;
    }
    .SpectateSummoner>.Box>.Content>.Table>.Body>.Row:nth-child(odd)  {
    background-color: #333333;
    }

/*     Game Stats Dropdown */
    .GameDetailTable.Result-LOSE>.Content>.Row.isRequester {
        background-color: hsl(0, 33%, 25%);

    }
    .GameDetailTable.Result-WIN>.Content>.Row.isRequester {
        background-color: hsl(231, 33%, 25%);

    }
    .GameDetailTable>.Content>.Row>.Cell.SummonerName>.Link,
    .GameDetailTable>.Content>.Row>.Cell.Tier, 
    .GameDetailTable>.Content>.Row>.Cell.OPScore>.Text,
    .GameDetailTable>.Content>.Row>.Cell.KDA>.KDA,
    .GameDetailTable>.Content>.Row>.Cell.Damage>.ChampionDamage,
    .GameDetailTable>.Content>.Row>.Cell.Ward,
    .GameDetailTable>.Content>.Row>.Cell.CS>.CS,
    .MatchBuild>.ItemBuild>.List>.Item>.Time,
    .GameItem>.Content>.KDA>.KDARatio,
    .ChampionStatsTable>.Body>.Row>.Cell.RatioGraph>.WinRatioGraph>.WinRatio,
    .ChampionStatsTable>.Body>.Row>.Cell.Value,
    .GameItem.Remake>.Content>.GameStats>.GameResult{
        color: #b1b1b1;
    }
    .GameDetailTable>.Content>.Row>.Cell.CS,
    .GameDetailTable>.Content>.Row>.Cell.KDA>.KDARatio,
    .GameDetailTable>.Header>.Row>.HeaderCell,
    .MatchAnalysisListItemContent h4,
    .MatchBuild>.SkillBuild>.Content>.SideContent>.Item>.HotKey,
    .MatchBuild>.SkillBuild>.Content>.RealContent .SkillBuildTable>.Content>.Row>.Cell.Label,
    .perk-page__title-container .perk-page__title,
    .SummonersMostGameTable>.Body>.Row>.Cell.SummonerName>.Link,
    .Box>.Title,
    .sub-tier__league-point,
    div.GameItem>.Content>.KDA>.KDARatio .KDARatio, div.GameItem>.Content b, div.GameItem>.Content>.FollowPlayers.Names>.Team>.Summoner.Requester>.SummonerName>.Link, div.GameItem>.Content>.Items .Trinket,
    .ChampionStatsTable>.Body>.Row>.Cell.KDA>.KDA,
    .ChampionStatsTable>.Body>.Row>.Cell.ChampionName>a, .ChampionStatsTable>.Body>.Row>.Cell.ChampionName, .ChampionStatsTable>.Body>.Row>.Cell,
    .ChampionStatsTable>.Header>.Row>.HeaderCell,
    .opscore-banner__header,
    .GameItem.extended>.GameDetail .MatchDetailHeader li a{
        color: #d3d3d3;
    }
    .opscore-banner__content {
        background-color: #282828;
        color: #d3d3d3;
    }
    .opscore-banner__footer {
        background-color: #232323;
        color: #b1b1b1;
    }
    .GameDetailTable>.Content>.Row>.Cell.Items>.Item>.noItem {
        background: #454545;
    }
/*     .GameDetailTableWrap>.Summary {} */
    
}
.GameListContainer>.Header>.Navigation>.Actions>.Action>.ChampionMatchSearchWrap>.Content>.SelectMatchChampionList>.Item.Recent {
    background-color: #353535f4;
    border-color: #656565;
}
.GameListContainer>.Header>.Navigation>.Actions>.Action>.ChampionMatchSearchWrap>.Content>.SelectMatchChampionList>.Item.All {
    background-color: #282828f5;
    border-color: #656565;
}
.GameListContainer>.Header>.Navigation>.Actions>.Action>.ChampionMatchSearchWrap>.Content>.SelectMatchChampionList>.Item>.Header {
    border-color: #656565;
}

.highcharts-container > svg {
    background-color: #282828;
}
.highcharts-container > svg > path {
    fill: #323232 !important;
}
.highcharts-container div b{
    color: #d3d3d3 !important;
}
.highcharts-container div {
    color: #b3b3b3;
}
g.highcharts-axis > path {
    stroke: #454545 !important;
}

@-moz-document regexp("https:\\/\\/.+\\.op\\.gg\\/(champion|aram|urf)\\/statistics") {
/*     ChampionList */
    .l-wrap.l-wrap--champion,
    .l-container{
        background-color: /*[[background]]*/;
    }
    
    /* Elements */
    .champion-index-trend-header,
    .champion-list-filter {
        background-color: #202020;
    }
    .l-champion-index-content .l-champion-index-content--main,
    .champion-index-trend-content,
    .champion-index-trend-position__item{
        background-color: #282828;
    }

/*     Champion Stats Table */
    .champion-index-table__cell:first-child,
    .champion-index-table__cell,
    .champion-index-table__cell:last-child,
    .l-champion-index-content .l-champion-index-content--side,
    .l-champion-index-content .l-champion-index-content--main,
    .champion-list-filter,
    .champion-index-trend-header{
        border-color: #565656;
    }
    .champion-index-table__cell,
    .champion-index-trend-position__item.active a,
    .champion-list-filter__keyword input{
        background-color: #303030;
    }
    .champion-index-trend-position__item {
        border-color: #454545;
    }

    
    .Button.SemiRound.White {
    color: #d0d0d0;
    }

    .champion-index__champion-item__name,
    .champion-index-table__name {
        color: #d3d3d3 !important;
    }
    
    .champion-list-filter__type__item a:hover,
    .champion-index-trend-header__filter a:hover,
    .champion-index-trend-position__item.active a{
        color: #d3d3d3;
    }
    .GameItem>.Content>.GameStats>.GameType,
    .champion-index__version,
    .champion-list-filter__type__item a,
    .champion-index-trend-header__filter a,
    .champion-index-table__header,
    .champion-list-filter__keyword input{
        color: #b1b1b1;
    }
    .champion-list-filter__type__item--active a,
    .champion-list-filter__type__item--active a:hover {
        color: #4990e2;
    }

}

@-moz-document regexp("https:\\/\\/.+\\.op\\.gg\\/multi\\/query=.*") {
/*     MultiQuery */
    .l-container {
        background-color: /*[[background]]*/;
    }
    

    /* Navbar */
    .l-menu,
    .l-wrap .gnb .opgg-header__logo,
    .l-wrap .gnb .navi__item--default,
    .MultiSearchLayout>.Header>.MultiSearchInputBox>.FormItem>.ButtonBox>.SearchButton,
    .multi2__item button.prev-seasons__btn--active{
        background-color: #293856;
    }

    /* Elements */
    .multi2__box,
    .MultiSearchLayout>.Header{
        background-color: #202020;
    }
    .multi2 .most-champions, .multi2 .recent-champions,
    .multi2__recent-champion,
    .MultiSearchLayout>.Header>.MultiSearchInputBox,
    .MultiSearchLayout>.Header>.MultiSearchInputBox>.FormItem>.TextArea{
        background-color: #282828;
    }
    .multi2__item .prev-seasons__btn {
        background-color: #454545;
        color: #d3d3d3;
    }
    .multi2__item button.prev-seasons__btn--active {
        color: #fff;
    }

    .multi2__item .summoner-summary .summoner-name .name{
        color: hsl(206, 26%, 90%);
    }
    .multi2__item .summoner-summary .lp {
        color: hsl(206, 26%, 85%);
    }
    .champion-index-table__cell {
        background-color: #303030;
    }
    .multi2 .recent-matches .recent-games__item .is-win--false{
        background-color: hsl(0, 33%, 25%) !important;
        color: hsl(0, 33%, 80%) !important;
    }
    .multi2 .recent-matches .recent-games__item .is-win--true{
        background-color: hsl(231, 33%, 25%) !important;
        color: hsl(231, 33%, 80%) !important;
    }
    .multi2 .recent-matches .recent-games__item .remake{
        background-color: hsl(231, 0%, 25%) !important;
        color: hsl(231, 0%, 80%) !important;
    }
    
    .MultiSearchLayout>.Header>.MultiSearchInputBox>.FormItem>.TextArea {
    color: #d0d0d0;
    }

    .champion-index__champion-item__name,
    .champion-index-table__name,
    .multi2 .recent-matches .title,
    .multi2__box>.content .content-title{
        color: #d3d3d3!important;
    }
    .multi2__box>.content .content-subtitle,
    .multi2__recent-champion .label{
        color: #b1b1b1;
    }
    
/*     Images */
/*     .multi2 .recent-matches .positions .position__icon--TOP {
        filter: invert()
    } */
    
/*      Borders */
    .multi2__item {
        border-right: 1px solid #454545;
    }
    .multi2 .recent-matches,
    .multi2 .most-champions, .multi2 .recent-champions,
    .multi2__recent-champion,
    .MultiSearchLayout>.Header>.MultiSearchInputBox>.FormItem>.ButtonBox{
        border-top: 1px solid #454545;
    }
    .multi2 .recent-matches .positions .position__info .role-rate,
    .multi2 .recent-matches .recent-games__item .time-stamp,
    .multi2 .most-champions__stats .kda, .multi2 .recent-champions__stats .kda,
    .multi2 .most-champions__stats .game-count, .multi2 .recent-champions__stats .game-count,
    .multi2 .most-champions__stats .win-ratio, .multi2 .recent-champions__stats .win-ratio{
        color: hsl(207, 12%, 70%);
    }
    .multi2__recent-champion .toggle-button .slider {
        background-color: hsl(206, 13%, 45%);
    }
    .multi2__recent-champion .toggle-button .slider:before {
        background-color: #eee;
    }
    .multi2 .recent-matches .positions .position__info .win-rate {
        color: hsl(221, 65%, 70%);
    }
    .multi2 .most-champions__stats .win-ratio .red, .multi2 .recent-champions__stats .win-ratio .red {
        color: hsl(346, 70%, 55%);
    }
    .multi2__item .summoner-summary .tier-position .most-position,
    .multi2__item .summoner-summary .tier-position .tier,
    .multi2 .recent-matches .positions .position__icon{
        background-color: hsl(240, 14%, 27%);
    }
    .multi2__item .summoner-summary .tier-position .most-position__icon{
        filter: brightness(125%);
    }
}

@-moz-document regexp("https?:\\/\\/.+\\.op\\.gg\\/champion\\/.+\\/statistics\\/.+") {
/*     Champion */
    .l-wrap.l-wrap--champion {
        background-color: #121212;
    }
    .champion-overview__header,
    .champion-box-header,
    .champion-skill-build__table th,
    .champion-stats__table__header{
        background: #202020;
        color: #b1b1b1;
    }
    .l-champion-statistics-menu,
    .champion-stats-summary-rune__item{
        background: #202020;
    }
    .champion-overview__sub-header,
    .champion-stats-summary-rune__item.active{
        background: #232323;
    }
    .champion-overview__header h2,
    .champion-box-header__title h4,
    .champion-overview__stats--pick strong,
    .champion-stats-summary-ranking__table__summoner span,
    .champion-stats-summary-ranking__table__gamecount b,
    .champion-box--trend .champion-stats-trend-average,
    .champion-overview__sub-header,
    .champion-stats-summary-rune__name,
    .champion-stats-summary-rune__rate strong, .champion-stats-summary-rune__rate span,
    .tablesorter-header-inner,
    .champion-stats__single__item span,
    .champion-stats__table__cell--pickrate em,
    .champion-stats__filter__item__value span,
    .champion-stats__filter__item.active > span{
        color: #d3d3d3;
    }
    .champion-overview__stats--pick span,
    .champion-overview__stats--win strong,
    .champion-stats-summary-ranking__table__gamecount,
    .champion-stats-menu__list__item a,
    .champion-stats-summary-rune__rate span,
    .champion-skill-build__table td,
    .champion-stats__table__cell,
    .champion-stats__filter__item__value b{
        color: #b1b1b1;
    }
    .champion-overview__table,
    .champion-box-content,
    .champion-box{
        background-color: #282828;
        border: solid 1px #454545;
    }
    .champion-stats-summary-ranking__table tr,
    .champion-skill-build__table td{
        background-color: #282828;
    }
    .l-champion-statistics-menu,
    .champion-overview__header,
    .champion-overview__table.champion-overview__table--summonerspell tbody tr, .champion-overview__table.champion-overview__table--rune tbody tr,
    .champion-overview__sub-header,
    .champion-overview__border:before,
    .champion-overview__row--first,
    .champion-box-header,
    .champion-box--trend .champion-stats-trend,
    .champion-stats-summary-ranking__table tr,
    .champion-stats-summary-rune__item,
    .champion-skill-build__table th,
    .champion-skill-build__table td,
    .champion-stats__table__header{
        border-color: #454545;
    }
    
    .champion-stats-header__position--active,
    .line-banner{
        background-color: /*[[opggColor]]*/;
    }
    .champion-stats-header__tab__item.active {
        background-color: #394660;
        color: #d3d3d3;
        border-color: #d3d3d3;
    }
    .champion-overview__header a > img,
    .champion-box-header__link > img {
        filter: brightness(40%) contrast(200%);
    }
    .champion-stats__table__cell,
    .champion-stats__filter__item.active,
    .champion-stats__filter__item--all{
        background-color: #303030;
    }
    tr:nth-child(even) .champion-stats__table__cell,
    .champion-stats__filter__item{
        background-color: #2a2a2a;
    }
}
@-moz-document regexp("https:\\/\\/.+\\.op\\.gg\\/statistics\\/(champion|tier).?") {
/*     Champion */
    .l-wrap {
        background-color: #121212;
    }
    .StatisticsFilter>.Header>.Row>.HeaderCell,
    .StatisticsChampionTable>.Header>.Row>.HeaderCell{
        background-color: /*[[header]]*/;
        color: #d3d3d3;
    }
    .StatisticsChampionTable>.Content>.Row.Top>.Cell {
        background-color: hsl(45, 18%, 18%);
    }
    .StatisticsChampionTable>.Content>.Row>.Cell,
    .StatisticsChampionTable>.Header>.Row>.HeaderCell,
    .StatisticsFilter>.Header>.Row>.HeaderCell{
        border-color: /*[[border]]*/
    }
    .Box,
    .StatisticsFilter>.Content>.Row>.Cell{
        border-color: /*[[border]]*/;
        box-shadow: 0 1px #353535;
        background: /*[[element1]]*/;
    }
    .StatisticsChampionTable>.Content>.Row>.Cell,
    .PageHeaderWrap>.Menu>.MenuList>.Item .Link,
    .StatisticsTierLayout>.ContentWrap>.Content .Box>.Title{
        color: #d3d3d3;
    }
    .PageHeaderWrap>.PageDescription>.Text {
        color: #b1b1b1;
    }
    .StatisticsFilter>.Content>.Row>.Cell>.ButtonWrap::-webkit-scrollbar{
        background-color: /*[[element1]]*/;
    }
    .StatisticsFilter>.Content>.Row>.Cell>.ButtonWrap::-webkit-scrollbar-thumb {
        background: hsl(180, 5%, 22%);
    }
    .StatisticsFilter>.Content>.Row>.Cell>.ButtonWrap::-webkit-scrollbar-track {
        background-color: #303030;
    }
/*     
    .Box>.Title+.Content.statsLeagueBox, .Box>.Navigation+.Content {
        background: /*[[element1]
    } */
}

@-moz-document regexp("https:\\/\\/.+\\.op\\.gg\\/ranking\\/.*?") {
/*     Champion */
    .l-wrap {
        background-color: #121212;
    }

    .Box
    {
        border-color: /*[[border]]*/;
        box-shadow: 0 1px #353535;
        background: /*[[element1]]*/;
    }
    .PageHeaderWrap>.Menu>.MenuList>.Item .Link {
        color: #d3d3d3;
    }
    .PageHeaderWrap>.PageDescription>.Text {
        color: #b1b1b1;
    }
    .ranking-highest__item,
    .ranking-summary-summoner__item {
        background-color: /*[[element1]]*/;
        border-color: #454550;
    }
    .ranking-highest__rank,
    .ranking-summary-summoner__rank {
        color: #d3d3d3;
        background-color: #454550;
    }
    .ranking-highest__name,
    .ranking-summary-summoner__name,
    .ranking-summary-champion__label {
        color: #d3d3d3;
    }
    .ranking-highest__item span,
    .ranking-highest__item b,
    .ranking-highest__level,
    .ranking-summary-summoner__gamecount {
        color: #b1b1b1;
    }
    
    .ranking-table,
    .ranking-table * {
        border-color: #454545;
    }
    .ranking-table thead th {
        background-color: #353535;
    }
    .ranking-table tbody tr {
        background-color: #252525;
        color: #d3d3d3;
    }
    .ranking-table tbody tr:nth-child(even) {
        background-color: #2a2a2a;
    }
    .ranking-table td {
        color: #b1b1b1;
    }
    .ranking-table__cell.ranking-table__cell--summoner *,
    .ranking-table__header,
    .winratio__text,
    .ranking-pagination__desc span{
        color: #d3d3d3;
    }
    .ranking-pagination__item,
    .ranking-pagination__item a{
        background-color: #353535;
        color: #d3d3d3;
        border-color: #454545;
    }
    .ranking-pagination__item.ranking-pagination__item--disable,
    .ranking-pagination__item.ranking-pagination__item--disable a {
        background-color: #555555;
    }
    
    .ranking-summary-champion__image {
        border: 1px solid #454545;
    }
    
    ::-webkit-scrollbar{
        background-color: /*[[element1]]*/;
    }
    ::-webkit-scrollbar-thumb {
        background: #454545;
    }
    ::-webkit-scrollbar-track {
        background-color: #303030;
    }
    
    .ChampionRankingFilterBox.Box,
    .ChampionRankingFilterBox>.SearchChampion,
    .ChampionRankingFilterBox>.SelectChampion {
        background-color: #202020;
        border-color: #454545;
    }
    
    .ChampionRankingFilterBox>.SearchChampion>.SearchChampionForm>.SearchInput,
    .PageHeaderWrap>.Menu>.Actions>.SearchItem>.FormItem>.InputText>.Input {
        background-color: #303030;
        color: #b1b1b1;
        border-color: #454545;
    }
    .ranking-summary-summoner__button {
        background-color: #353535;
        border-color: #454545;
    }
    .ranking-summary-summoner__button:hover {
        background-color: #505050;
    }
    
    .ranking-summary__item,
    .ranking-summary-summoner-footer {
        border-color: #454545;
    }
/*     
    .Box>.Title+.Content.statsLeagueBox, .Box>.Navigation+.Content {
        background: /*[[element1]
    } */
}