Black Theme for gg.deals
/* ==UserStyle==
@name GG.deals - Black Theme
@namespace github.com/pabli24
@version 1.0.4
@description Black Theme for gg.deals
@author Pabli
@license MIT
@homepageURL https://github.com/pabli24/GGdeals-Black
@supportURL https://github.com/pabli24/GGdeals-Black/issues
@preprocessor stylus
==/UserStyle== */
@-moz-document url-prefix("https://gg.deals") {
body, .settings-menu, .site-banner-content-widget .banner-background-container::before, .presets-with-background {
color: #fff;
background-color: #000;
}
.game-header-box, .header-game-prices-wrapper,
.hoverable-box, .presets-with-background .hoverable-box, .game-box-bg.game-description-wrapper, .game-box-bg.system-requirements, .game-info-widget .game-info-content, .game-box-bg, .games-hover-boxes .game-hover-box, .games-hover-boxes .game-hover-box .game-details-wrapper, #news-card #comments #disqus_thread, .top-search #global-search-form .input-wrapper,
.content-background-box .contact-form-content .collapse-group .collapse-wrapper .form-control.collapsed, .filter-content .radio-list .filter-radio-item:not(.badge-filter).active, .hoverable-box.archived, .hoverable-box.archived:active, .hoverable-box.archived:hover, .hoverable-box.ext-hover, .hoverable-box.ext-hover:hover, .hoverable-box.game-item-column-head, .hoverable-box.game-item-column-head:hover, .hoverable-box.game-items-header, .hoverable-box.game-items-header:hover, .hoverable-box.inactive, .hoverable-box.inactive:active, .hoverable-box.inactive:hover, .hoverable-box.no-hover, .hoverable-box.no-hover:hover, .hoverable-box.options-active, .hoverable-box.options-active:hover, .pagination ul.bottom-pagination li.page .page-current-input:focus, .flash-container-wrapper, .action-box.btn.btn-white, .page-social-widget .social-widget-box, .similar-deals-container span.fake-link, .page-social-widget.compact .social-widget-box .social-box-content, .similar-deals-container .similar-deals-spoiler, .platform-tab.badge.badge-big.active, .games-box .game-item.game-items-header, .news-article .btn-show-more-container:not(.no-bg) {
background-color: #111; //#353347
}
.action-btn.action-ext, .action-btn.color-btn, .games-box .game-item .game-cta.shop-icon-cta .shop-icon, .game-info-widget .game-info-heading.in-content, .deal-cta-btn, .game-info-widget .game-info-footer, .search-bar-input, form .collapse-group.active .collapse-wrapper a.form-control.collapsed, .styled-form .form-group.collapse-group .collapse-wrapper .form-control, .top-search #global-search-form .search-results, .game-item-bottom-info,
.main-page-top-section .portrait-items-slider .swiper-wrapper .swiper-slide .most-popular-portrait-item, .main-page-top-section .portrait-items-slider .swiper-wrapper .swiper-slide .most-popular-portrait-item .game-info-wrapper .game-info-title-wrapper::before, .main-page-top-section .portrait-items-slider .swiper-wrapper .swiper-slide .most-popular-portrait-item .game-info-price-wrapper::after {
background: #111;
}
.action-btn.action-desktop-btn.disabled {
background-color: #222 !important;
color: #666 !important;
}
.filter-view .view-action .item .svg-icon {
color: #666;
}
.badge.badge-big.active .svg-icon, .filter-reset-button-container .filter-reset-button:hover, .game-single-actions .game-action-wrap .deactivate .icon-collection>use, .game-single-actions .game-action-wrap .deactivate .title, .game-single-actions .game-action-wrap:hover .deactivate .title, .game-single-actions .game-action-wrap:hover .deactivate.icon-collection>use, .game-single-actions .game-action-wrap:hover .deactivate:active .icon-collection>use, .game-single-actions .game-action-wrap:hover .deactivate:active .title, .game-single-actions .game-action-wrap:hover .deactivate:focus .icon-collection>use, .game-single-actions .game-action-wrap:hover .deactivate:focus .title, .games-box .game-item.ignored .game-price .price-inner, .games-box .game-item.ignored .price-label, .games-box .game-item.ignored .price-label.price-old, .games-box .game-item.ignored .shop-price-wrapper .price .price-inner, .games-box .game-item.ignored .shop-price-wrapper .price-label, .games-box .game-item.inactive .game-price .price-inner, .games-box .game-item.inactive .price-label, .games-box .game-item.inactive .price-label.price-old, .games-box .game-item.inactive .shop-price-wrapper .price .price-inner, .games-box .game-item.inactive .shop-price-wrapper .price-label {
color: #ddd; //#4f4d6a
}
.action-btn:not(.action-ext).disabled .svg-icon, .action-btn:not(.action-ext).disabled:hover .svg-icon, .action-btn:not(.action-ext).inactive .svg-icon, .action-btn:not(.action-ext).inactive:hover .svg-icon, .btn-action.disabled .svg-icon, .btn-action.disabled:hover .svg-icon, .btn-action.inactive .svg-icon, .btn-action.inactive:hover .svg-icon, .game-info-stats li.owned-game.active .icon-collection, .game-info-stats li.owned-game:hover .icon-collection, .game-single-actions .game-action-wrap .deactivate .icon-collection, .game-single-actions .game-action-wrap:hover .deactivate.icon-collection, .game-single-actions .game-action-wrap:hover .deactivate:active .icon-collection, .game-single-actions .game-action-wrap:hover .deactivate:focus .icon-collection {
fill: #ddd; //#4f4d6a
}
.game-single-actions .game-action-wrap .deactivate .user-count {
color: #ddd; //#747198
border-color: #777; //#7f7da1
}
.game-single-actions .game-action-wrap:hover .deactivate, .game-single-actions .game-action-wrap:hover .deactivate:active, .game-single-actions .game-action-wrap:hover .deactivate:focus, .game-single-actions .game-action-wrap:hover .deactivate:active .user-count, .game-single-actions .game-action-wrap:hover .deactivate:focus .user-count {
background-color: #444; //#c5c4d4
border-color: #777; //#7f7da1
}
.menu-profile-dropdown > .dropdown-menu {
background: #151515;
}
body.search-opened .navbar-new .main-menu-wrapper .top-search #global-search-form .input-wrapper .search-input {
background-color: #111;
}
body::before {
background: rgba(0, 0, 0, .2);
}
body.full-overlay:after, body .mfp-bg, body .modal-backdrop {
background-color: rgba(0, 0, 0, .7);
}
.highcharts-background {
fill: #111;
}
.highcharts-container .highcharts-grid-line, .highcharts-container .highcharts-grid-line[style] {
stroke: #222 !important;
}
.btn-action, .btn.btn-blue {
background: #134972; //#279af1
}
.btn-action:hover, .btn.btn-blue:focus, .btn.btn-blue:not(.disabled):hover,
.btn.btn-blue:focus:focus, .btn.btn-blue:not(.disabled):hover:focus {
background: #106cb1; //#38a2f2 #41a6f3
}
.action-btn.action-ext.action-desktop-btn, .action-btn.color-btn.action-desktop-btn {
background-color: #134972;
}
.action-btn.action-ext:hover:not(.disabled):not(.color-btn), .action-btn.color-btn:hover:not(.disabled):not(.color-btn), .games-box .game-item.cta-full:hover .game-cta .action-btn.action-ext {
background-color: #106cb1;
}
.action-box.sync-box.in-progress, .single-news-container, .popup-modal .modal-content, .styled-form .collapse-form .form-actions {
background: #050505;
}
.navbar-new {
background-color: #000;
color: #c0c4c6;
}
.game-tabs-container-wrapper.is-sticked .game-tabs-container,
.game-tabs-container-wrapper.is-sticked .game-tabs-container ul.nav.nav-game::after {
background-color: #151515;
}
.footer-wrapper {
background: #050505;
}
.filters-bottom-container {
border-top: 1px solid #222;
}
.widget-side-box .widget-side-header, .following-tabs, .game-lowest-prices-content.game-lowest-prices-content, .game-requirements-content.game-lowest-prices-content, #news-preset-tabs .mp-news-col-left .item.news-list-item, #news-preset-tabs .mp-news-col-right .item.list-item {
border-bottom: 1px solid #222;
}
.widget-side-box .widget-side-item-row::after,
.game-tabs-container-wrapper ul.nav.nav-game::after,
.mainpage #news-presets #news-preset-tabs .nav::after,
.menu-profile-dropdown .menu-profile-list .menu-profile-list-item.avatar-item::after,
.navbar-new .main-menu-wrapper .bottom-mobile-menu::before,
.filter-form .filter-line::before,
.top-search #global-search-form .search-results .search-results-news-empty::before,
.filter-content .filter-radio-item:not(.badge-filter):hover, .filter-content .filter-switch:not(.single-filter-switch):hover, .games-box .game-item.game-item-v2.game-portrait-item.with-checkbox.selected, .hoverable-box:hover, .similar-deals-container span.fake-link:hover, .sync-box.connected:hover, .sync-box.disconnected:hover, form .collapse-group .collapse-wrapper .item.radio-item:hover, .similar-deals-container .similar-deals-spoiler:hover, .game-info-box-wrapper .game-info-box .how-long-to-beat-wrapper .how-long-to-beat-single, #news-preset-tabs .mp-news-col-left .item.news-list-item::before, #news-preset-tabs .mp-news-col-right .item.list-item::before, .presets-with-background .hoverable-box:hover {
background: #222; //#3d3c53
}
.btn-show-more, .game-single-actions .game-action-wrap .game-action, .badge.badge-big, .browse-all, .swiper .swiper-pagination.gallery-pagination .swiper-pagination-bullet::before, .score-bar, .badge {
background: #222;
}
.btn.btn-grey-light, .btn.btn-red.inverse {
color: #eee;
background-color: #222 !important;
}
.btn.btn-grey-light:hover {
color: #eee;
background-color: #444 !important;
}
.badge.badge-trigger {
color: #ddd;
border: 1px solid #222;
}
.game-single-actions .game-action-wrap:hover .deactivate {
border-color: #8e8e8e;
}
.game-single-actions .game-action-wrap .deactivate, .search-bar-input {
border: 1px solid #464646;
background-color: #111;
}
.game-single-actions .game-action-wrap .user-count {
border-left: 1px solid #111;
}
.game-single-actions .game-action-wrap .deactivate .user-count, .game-single-actions .game-action-wrap:hover .deactivate .user-count {
border-color: #777;
}
.game-single-actions .game-action-wrap .deactivate .title {
color: #ccc;
}
.following-tabs .following-tab .tab-link {
color: #ccc;
}
.badge:not(.active):hover, a.badge:not(.active):hover, .browse-all:hover, .btn-show-more:hover {
background: #444;
color: #dcdce5;
}
.game-single-actions .game-action-wrap:hover .activate, .game-single-actions .game-action-wrap:hover .activate:active, .game-single-actions .game-action-wrap:hover .activate:focus, .alert::before {
background-color: #444;
}
.games-box .game-item.border-top-desktop, .games-box .shop-item.border-top-desktop,
.games-box.games-box-related-list .game-item, .item-list.list-layout, .game-info-widget .game-info-details .game-info-details-section .games-box.game-info-inner-deals .deal-item, .top-search #global-search-form .search-results, .navbar-new .menu-notifications-dropdown .notifications-menu .notifications-content .notification-date-separator+.notification-item, .news-article .news-content .article-games-box, .news-article .news-content .article-games-box.games-box, .top-search #global-search-form .search-results .search-results-games .global-search-item.search-result-game:first-child, .top-search #global-search-form .search-results .search-results-trending-item:first-child, .similar-deals-container, .similar-deals-container span.fake-link, .similar-deals-container .similar-deals-spoiler, .news-deals-container .list .list-items .game-item, .item.mp-portrait-item, .games-box .game-item.game-items-header + div .game-item:first-child, .game-item-info-inner, .news-article .btn-show-more-container:not(.no-bg) {
border-top: 1px solid #353535; //#23222f
}
.game-info-widget .games-box.game-info-inner-deals .deal-item {
border-top: 1px solid #353535 !important;
}
.game-info-widget .game-info-details .game-info-details-section .games-box.game-info-inner-deals .deal-item:last-child, .top-search #global-search-form .search-results .search-results-trending-item, #deals-presets-toggle .presets-widget-heading {
border-bottom: 1px solid #353535;
}
.games-box .game-item .game-cta {
border-left: 1px solid #353535;
}
.top-search #global-search-form .search-results .search-results-col.search-results-col-news, .dynamic-content-tabs .nav::after, .filter-form .filter-line:not(.no-border)::before {
background: #353535;
}
.item-list.list-layout:hover {
background-color: #222 !important;
}
.filter-content .filter-radio-item:not(.badge-filter):hover, .filter-content .filter-switch:not(.single-filter-switch):hover, .hoverable-box:hover, .sync-box.connected:hover, .sync-box.disconnected:hover, form .collapse-group .collapse-wrapper .item.radio-item:hover, .games-hover-boxes .game-hover-box.active:not(.options-active):not(.static) .game-details-wrapper, .games-hover-boxes .game-hover-box:hover:not(.options-active):not(.static) .game-details-wrapper, .dropdown-toggle-inside .notifications-menu-dropdown-list .item:not(.active):hover, .filter-list>.filter-content .list.dropdown-option-layout .item:not(.active):hover, .filter-list>.list.dropdown-option-layout .item:not(.active):hover, .menu-profile-dropdown .menu-profile-list .menu-profile-list-item .menu-profile-list-link:hover, .user-menu-dropdown>.filter-content .list.dropdown-option-layout .item:not(.active):hover, .user-menu-dropdown>.list.dropdown-option-layout .item:not(.active):hover, [data-filter-type~=checkboxes-list]>.filter-content .list.dropdown-option-layout .item:not(.active):hover, [data-filter-type~=checkboxes-list]>.list.dropdown-option-layout .item:not(.active):hover, [data-filter-type~=filter-list]>.filter-content .list.dropdown-option-layout .item:not(.active):hover, [data-filter-type~=filter-list]>.list.dropdown-option-layout .item:not(.active):hover, [data-filter-type~=page-size-radio-list]>.filter-content .list.dropdown-option-layout .item:not(.active):hover, [data-filter-type~=page-size-radio-list]>.list.dropdown-option-layout .item:not(.active):hover, [data-filter-type~=radio-list]>.filter-content .list.dropdown-option-layout .item:not(.active):hover, [data-filter-type~=radio-list]>.list.dropdown-option-layout .item:not(.active):hover, .navbar-new .main-menu-wrapper .bottom-mobile-menu .bottom-mobile-menu-item .bottom-mobile-menu-link:hover, .action-box:not(.in-progress):not(.not-hover):hover.btn.btn-white {
background-color: #222;
}
.navbar-new .main-menu-wrapper .top-menu .top-menu-list .top-menu-list-item.more.open, .navbar-new .main-menu-wrapper .top-menu .top-menu-list .top-menu-list-item.more:hover, .navbar-new .main-menu-wrapper .top-side-menu .top-side-menu-list .top-side-menu-item.open, .navbar-new .main-menu-wrapper .top-side-menu .top-side-menu-list .top-side-menu-item:hover:not(.login), .steam-login:hover, .steam-login:active, .steam-login:focus {
background-color: rgba(255, 255, 255, .1);
}
.steam-login {
background-color: rgba(0, 0, 0, 0);
}
.game-info-widget .game-link {
color: #8f849a;
color: #aaa;
}
.label.no-label, .price-info-box-wrapper .game-lowest-prices-content .game-lowest-price-row .game-lowest-price-details-row .game-lowest-price-col, .game-info-widget .game-info-heading .game-info-subheading, .game-lowest-prices-options .filter-switch .switch-label {
color: #aaa;
}
.styled-form .form-control::placeholder {
color: #888 !important;
}
#global-search-form input::placeholder {
color: #888 !important;
}
.filter-content .search-bar-input>label, .search-bar-input>label {
color: #888;
}
.btn.btn-blue.disabled:focus, .games-box .game-item.inactive .game-info-title, .games-box .game-item.inactive .game-tags .tags .tag .title, .games-box .game-item.inactive .game-tags .tags .tag .value, .games-box .game-item.inactive .game-tags .tags .tag a, .games-box .game-item.inactive.games-list-layout .game-info-wrapper.column-wrapper .game-tags .tags .tag .title, .games-box .game-item.inactive.games-list-layout .game-info-wrapper.column-wrapper .game-tags .tags .tag .value, .games-box .game-item.inactive.games-list-layout .game-info-wrapper.column-wrapper .game-tags .tags .tag a, .hoverable-box.inactive .platform-icon .svg-icon, .hoverable-box.inactive:not(:hover) .platform-icon .svg-icon, .user-alerts-page .game-item.alert-item.inactive .game-active-icons, .user-alerts-page .game-item.alert-item.inactive .game-info-title, .user-alerts-page .game-item.alert-item.inactive .game-tags .tags .tag .title, .user-alerts-page .game-item.alert-item.inactive .game-tags .tags .tag .value, .game-info-widget .games-box.game-info-inner-deals .deal-item .deal-info.deal-info-price .price-wrapper .price-label {
color: #777; //#a39aac
}
.games-box .game-item .price-wrapper .price-old, .games-box .game-item .game-info-wrapper .unavailable-label {
color: #777;
}
.game-header-container.game-header .game-info-details .game-main-description p {
color: rgba(255, 255, 255, .5);
}
@keyframes blink { 0% { color: #f00 } 100% { color: #fff }}
.switch-label.light {
animation: blink 1s linear infinite;
}
.switch-label.dark {
font-size: 0px !important;
}
.switch-label.dark:after {
font-size: 12px !important;
content: "Black";
vertical-align: middle;
}
.switch-label-wrapper > .switch-label.dark:after {
font-size: 14px !important;
}
.gg-theme-switcher .switch, .gg-theme-switcher .switch::after {
background: #333;
}
.mass-container .mass-container-bottom {
background: #111; //#f4f5f6
}
.main-title, .news-section .item.news-item .news-title-wrapper .news-title, .social-widget-box h4, .pagination ul.bottom-pagination .page-current-input, .pagination ul.bottom-pagination .pjax-link, .pagination ul.bottom-pagination li.page.next-page .pjax-link, .news-heading .news-heading-title h1, .news-content .lead, .widget-heading, .games-box .game-item .game-info-title, .price .price-inner, .widget-side-box .widget-side-title h3, .widget-side-box .widget-side-item-title, .news-content h2, .news-content h3, .news-heading-expired-info .heading-expired, .section-title, .mainpage .presets-container .preset-title-link, .item-list .main-wrap .title-line .title, .mp-portrait-header .part-title.preset-title .preset-title-link, .item-list.portrait-item .game-info-wrapper .game-info-title, .dynamic-content-tabs .menu-item.active .part-title, .item.mp-portrait-item .main-wrap .title-line .title, .game-header-box h1, .following-tabs .following-tab.active .tab-link, ul.nav.nav-game li.menu-item.active a, .platform-tab.badge.badge-big.active, .game-page .widget-heading, .game-boxes-heading .offers-amount, .game-about-heading h2, .header-game-prices-wrapper .header-game-prices-content .game-price-anchor-link, .games-hover-boxes .game-hover-box .game-details-title, .games-hover-boxes .game-hover-box .game-details-content .price .price-inner, .price-info-box-wrapper .game-lowest-prices-content .game-lowest-price-row .game-lowest-price-inner-row .game-lowest-price-col, .label.code {
color: #fff;
}
.page-info-widget:not(#footer-main-description) .main-description, .widget-side-box .widget-side-deal-store, .news-article.expired .row-news .news-heading .news-heading-title h1 {
color: rgba(255,255,255,.4);
}
.filter-form .filter-line .filter-dropdown > .current .text::after {
border-color: #c5c4d4 transparent transparent;
}
.badge.badge-big.active, .badge.active, a.badge.active {
background: #dcdce5;
color: #4f4d6a;
}
.presets-wrapper .presets-heading, .news-section .item.news-item .news-lead, .social-widget-box, .social-widget-box a, #footer-main-description h3:first-child, #footer-main-description h3, #ggdeals-footer .gg-footer-content h4, #ggdeals-footer .gg-footer-content .footer-link-list li > a, #ggdeals-footer .footer-links-col .footer-links-list li .footer-link, .news-content, .news-heading-expired-info .content-expired, .news-single-tags-container .news-single-tags-label, #footer-main-description .main-title, #footer-main-description h2, ul.nav.nav-game li.menu-item {
color: rgba(255,255,255,.8);
}
.page-info-widget:not(#footer-main-description) .main-description a.read-more-btn, #footer-main-description .main-description p, #ggdeals-footer .gg-footer-content .about.disclaimer p, .dynamic-content-tabs .menu-item .part-title, #footer-main-description .main-description a, .game-description-wrapper .game-description, #footer-main-description .main-description ul li, .game-header-container.game-header .game-info-editions-wrapper .game-editions-list-widget .game-info-label, .game-info-inner-heading, .game-info-widget .game-info-details-content, .platform-icon.platform-link-icon, .grey-light-link, .game-boxes-heading .heading-info-link, .game-content-box .system-requirements-text strong, .game-content-box .system-requirements-text, .game-content-box.empty-state p, .game-connected-list.game-ranking-entries .game-connected-single, .game-lowest-price-current .game-lowest-current-heading, .game-lowest-current-details, .alert-info-box, .game-single-actions .game-action-wrap {
color: rgba(255,255,255,.6);
}
.pagination ul.bottom-pagination li.page.disabled .pjax-link {
color: rgba(255,255,255,.4) !important;
}
.pagination ul.bottom-pagination li.page.selected {
border: 1px solid #fff;
}
#ggdeals-footer .gg-footer-content .gg-footer-logo .logo {
filter: grayscale(1) invert(1);
opacity: .7;
}
.badge, .footer-soc-list .soc-link, .browse-all {
color: #dcdce5;
}
#ggdeals-footer .footer-copyrights-col .copyrights, .tags .tag .title, .tags .tag, .tags .svg-icon, .header-game-prices-wrapper .header-game-prices-content .game-info-price-label, .header-game-prices-wrapper .game-subscriptions-list-widget .game-subscriptions-label {
color: rgba(255,255,255,.4);
}
.filter-form .filter-line .filters-line-container .filter.single-checkbox > .single-filter-switch label, .filter-form .filter-line .filter-dropdown > .current, #ggdeals-footer .footer-b2t-col .go-to-top, .collapsible-showHide, .filter-form .filter-line .filter-dropdown.filter-sort > .current, .news-heading .news-share li .news-share-btn, .filter-link-button {
color: #c5c4d4;
}
.news-content .lead {
border-left: 2px solid #fff;
}
.btn-show-more {
color: #dcdce5 !important;
}
#news-card .btn-show-more-container {
border-bottom: 1px solid #353535;
}
.news-heading-expired-info, .news-deals-container {
background: #4d4d4d;
}
.news-deals-container .search-bar-input {
border: 1px solid #5b5b5b;
}
.news-deals-container .list .list-items .game-item, .item.mp-portrait-item, .games-box .game-item.game-items-header + div .game-item:first-child, .game-item-info-inner, .news-article .btn-show-more-container:not(.no-bg) {
border-top: 1px solid #353535;
}
.label.code {
border: 1px dashed #fff;
}
}