GSM Arena - Dark X by Saadski

/* ==UserStyle==
@name         GSM Arena - Dark X
@version      20250210.01.24
@namespace    https://userstyles.world/user/Saadski
@description  Dark theme for GSM Arena.
@author       Saadski
@license      No License
==/UserStyle== */

@-moz-document domain("gsmarena.com") {
/*SCROLLBAR*/
/* width */
::-webkit-scrollbar
{
    height: 10px !important;
    width: 10px !important;
}

/* Track */
/* Scrollbar Corner */
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner
{
    background: #141414 !important;
}

/* Handle */
::-webkit-scrollbar-thumb
{
    background: #3A3A3A !important;
    border-radius: 1px !important;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover
{
    background: #3A3A3A !important;
}

::selection
{
    background: #353535B0 !important;
    color: #000 !important;
}

/* check boxes*/
input[type="checkbox"]
{
    filter: invert(100%)hue-rotate(150deg)saturate(0)brightness(0.5) !important;
}

[class="svg-icon checked"]
{
    filter: invert(0) brightness(0.5) !important;
}

:root
{
    --dark0: rgb(33, 33, 33);
    --dark: rgb(28, 28, 28);
    --dark1: rgb(27, 27, 27);
    --darker: rgb(18, 18, 18);
    --darker2: rgb(12, 12, 12);
    --darker3: rgb(8, 8, 8);
    --bw: rgb(67, 67, 67);
    --light: rgb(146, 146, 146);
    --light1: rgb(193, 193, 193);
    --lighter: rgb(233, 233, 233);
    --accent: rgb(95, 95, 95);
    --shadow: rgba(0, 0, 0, 0.07);
    --tp: #fff0;
    --ol: #090909F2;
}

*
{
    border-color: var(--dark0) !important;
    color: var(--light)!important;
    /*text-shadow: 1px 1px 2px var(--dark0);*/
}

html,
body,
#body
{
    background: var(--darker2);
}

/* Killed */
[id="subHeader"],
[class="adv"],
[id="div-gpt-ad-opt300x250gsmarenadesktop-0"],
[class="ad-label"],
[class="adv bottom-728"],
[class="adv banner-mpu"],
[class="ad-label"],
[id="div-gpt-ad-300x250atfgsmarenadesktop-0"],
[class="adv banner-mpu sticky-mpu"],
[class="adv banner-mpu"],
[class="pgAdWrapper"]
{
    display: none !important;
}

.top-bar,
#header,
#header:after,
.article-info-line.page-specs.light
{
    background: var(--darker3);
}

.brandmenu-v2,
.price-balloon,
.main-menu-list,
table.pricing.inline.widget td,
.pricing.inline.widget + .module-phones.module-related li span,
.news-item,
#review-body .audio-comparison-widget .loudness .lufs
{
    background: var(--darker2)
}

#topsearch .search-buttons a,
.main,
.pad,
.module.price h5,
.section-heading + div,
.section-heading + ul.clearfix,
.module-phones .more,
#specs-list .tr-hover:hover td,
.button,
.button-links a,
.button-links button,
.button-mini,
.review-nav,
.nav-pages a,
.candidate-search,
.compare-link-list a,
.phone-results,
#body .main,
.gsma-RelatedArticles-list,
.review-pages .page-options a:hover
{
    background: var(--darker)
}

.bootstrap-select > .btn,
.dropdown-menu li.selected a,
.form-control,
.bootstrap-select.btn-group .no-results,
.framed,
.makers a,
.diff-toggle-box,
#specs-list table tr:hover td,
.st-text select[name=selCountries],
#all-opinions,
.uinreply-msg
{
    background: var(--darker) !important
}

.footer-logo
{
    filter: invert(1)saturate(0)
}

#topsearch #topsearch-text,
#specs-list p,
#specs-list table,
.pricing.inline.widget + .module-phones.module-related ul,
.user-thread,
.sub-footer,
.dropdown-menu,
.noUi-handle:after,
.noUi-handle:before,
.noUi-base,
.nav-pages a:hover,
.nav-pages strong,
.pages-next-prev a,
.compare-candidate.compare-col,
.compare-candidate h3,
.compare-link-list,
.candidate-search .st-input-cmp,
.autocomplete li a:hover,
.module .section-heading,
.gsma-RelatedArticles-item,
.article-tags a,
#footer-side .footer-inner,
.search-band form input.searchFor,
.popular-tags-list-item a,
.review-item-content,
.article-blurb,
.breadcrumbs .crumb,
.article-pages span,
#review-body .benchmark-widget .result > .flex-row > span,
#review-body .audio-comparison-widget .segments li,
#review-body .audio-comparison-widget .loudness .score,
.pricecut .button,
#body > div > div.st-text > table.st-table.full-width.column-border,
#wrapper #outer .gray-button,
img + font,
.binkies-color-swatch.selected
{
    background: var(--dark)
}

.review-pages,
.review-pages .page-options,
.binkies-color-swatch,
.sub-header
{
    background: var(--darker2) !important
}

.input-on-green,
#sort-comments
{
    background: var(--dark) !important
}

.noUi-handle
{
    background: var(--dark);
    cursor: default;
    box-shadow: inset 0 0 1px var(--dark), inset 0 1px 7px var(--dark), 0 3px 6px -3px var(--dark) !important;
}

.module.price .pricing-container
{
    border: 1px solid #f2f2f2;
    background-color: var(--dark);
}

.module-news-l li time,
.reviews-xl-snazzy .module-review-xl-title strong
{
    background: var(--dark0);
    text-shadow: 0px 0px 0px var(--dark0);
}

#body > aside > div.module.price > div > div.pricing-scroll-container > div > ul > li > img,
#body > div > table > tbody > tr > td > img,
#body > aside > div.module.price.deals > div > a > div > div.row3 > img,
.pricecut .store img,
.compare.pricing.widget .offer img
{
    filter: contrast(0)brightness(0.7)
}

.link-network-detail,
.article-blurb-findings li:before,
#review-body .audio-comparison-widget .active .listen-radio-button:before
{
    color: var(--accent) !important
}

.pf-button,
.pf-results,
.tabs .tab-phone a,
.tabs .tab-tablet a,
.article-info-name,
.article-info-meta-link a,
.article-info-meta .head-icon,
.diff-toggle-box .diff-toggle .diff-off,
.diff-toggle-box .diff-toggle .diff-on,
.compare-link-list a,
.feat-item-title,
.search-band strong,
.selected,
.article-pages strong,
#review-body .benchmark-widget.bar-chart .value,
#review-body .benchmark-widget.mobile .value,
h3,
h2,
h1,
.feat-item .meta-item-comments,
.feat-item .meta-item-time,
.review-column-list-item .meta-line *,
.meta-item-comments .head-icon,
.meta-item-time .head-icon
{
    color: var(--lighter) !important;
}

.uavatar .avatar-box
{
    color: var(--darker2) !important
}

.specs-spotlight-features .pattern,
.specs-spotlight-features .pattern *,
.specs-spotlight-features a:hover,
.specs-spotlight-features a:hover *,
.accent span[data-spec],
.accent span,
[data-spec="displayres-hl"],
[data-spec="videopixels-hl"],
[data-spec="chipset-hl"],
[data-spec="battype-hl"],
.accented .head-icon
{
    color: var(--dark) !important;
    text-shadow: 1px 1px 2px var(--lighter) !important
}

.price-balloon:after,
.price-balloon:before
{
    border-right: 10px solid var(--darker2);
}

#user-comments .user-thread
{
    box-shadow: 0 20px 0 var(--tp);
}

.makers strong
{
    background: hsla(0, 0%, 50%, .13);
}

.disabled,
a.disabled
{
    background: var(--darker) !important;
    border: 1px solid var(--dark0)!important;
}

.makers.compare-mode li:after,
.makers.compare-mode li.checked:after
{
    box-shadow: 0px 0 0 #fff, 0 0px 0 #fff, 0px 0 0 #fff !important;
    background-color: var(--tp);
}

.gsma-RelatedArticles-item.review
{
    box-shadow: 2px 2px 0px var(--dark), 3px 3px 0px var(--darker), 5px 5px 0px var(--darker2), 6px 6px 0px var(--darker3);
}

.module.module-arenaev .arenaev-content .title:before
{
    border-top: 10px solid var(--dark0);
}

#review-body .image-row:after,
center + br + font:after,
center ~ font:after
{
    border-bottom: 85px solid var(--darker2);
}

.green thead th
{
    background: #a4c08d42;
}

.green tbody tr:nth-child(odd)
{
    background-color: #e8f6e942;
}

.blue thead th
{
    background: #82A2BD42;
}

.blue tbody tr:nth-child(odd)
{
    background-color: #e8eff642;
}

.module-rankings .purple tbody tr:nth-child(odd)
{
    background-color: #fff2ee42;
}

[id="speakerphone-chart"]
{
    filter: invert(1)hue-rotate(180deg)
}

#review-body .audio-comparison-widget .flex-row > :last-child
{
    filter: invert(0)hue-rotate(180deg)brightness(0.3)
}

.noUi-background
{
    background: var(--dark);
    box-shadow: inset 0 1px 1px var(--dark);
}

.uinreply-msg:after
{
    background: linear-gradient(180deg, hsla(0, 0%, 97%, 0) 10%, hsla(0, 0%, 0%, .6) 74%);
}

#specs-list .review-comparisons
{
    background: var(--tp) !important
}

.specs-box .info
{
    background: var(--dark)
}

.specs-box em
{
    background: var(--darker)
}

.compare-candidate .version-select
{
    background: var(--darker)
}

#subHeader2,
#subHeader2 .specs
{
    background: var(--darker)
}

#subHeader2 .subHeader2-inner
{
    background: var(--dark)
}
}