Dark Theme for GOG.com
gog com gogcom good old games store website dark theme mode style css
GOG.com - Dark Theme by pabli
Imported and mirrored from https://github.com/pabli24/GOG-Dark/raw/master/GOG-Dark.user.css
Details
Authorpabli
LicenseCC-BY-SA-4.0 (https://creativecommons.org/licenses/by-sa/4.0/)
Categorygog
Created
Updated
Size48 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name GOG.com - Dark Theme
@namespace https://github.com/pabli24/GOG-Dark
@version 0.3.5
@description Dark Theme for GOG.com
@author Pabli (https://github.com/pabli24)
@license CC-BY-SA-4.0
@homepageURL https://github.com/pabli24/GOG-Dark
@supportURL https://github.com/pabli24/GOG-Dark/issues
@preprocessor stylus
@var checkbox sb "Dark scrollbar" 1
@var color bg1 "Background 1" #1d1d1d
@var color bg2 "Background 2" #222
@var color bg3 "Background 3" #1e1e1e
@var color bgh "Background hover" #2d2d2d
@var color text1 "Text 1" #ccc
@var color text2 "Text 2" #eee
@var color text3 "Text 3" #bbb
@var color text4 "Text 4" #aaa
@var color textw "Text white" #fff
@var color textb "Text black" #000
@var color textp "Text pink" #fba6ff
@var color border1 "Border 1" rgba(0,0,0,.08)
@var color border2 "Border 2" #242424
@var color border3 "Border 3" #333
==/UserStyle== */
@-moz-document domain("gog.com") {
/* official dark theme /games body.dark-theme */
body {
--c-background: #212121 !important;
--c-accent: #c99aff !important;
--c-accent-supportive: #b370ff !important;
--c-accent-contrast: black !important;
--c-ui-primary: #303030 !important;
--c-ui-primary--hover-lighten: #3d3d3d !important;
--c-ui-primary--active-lighten: #565656 !important;
--c-ui-tertiary: #404040 !important;
--c-text-primary: #f2f2f2 !important;
--c-text-secondary: #ededed !important;
--c-text-tertiary: #d9d9d9 !important;
--c-contrast: white !important;
--c-contrast-85: rgba(255, 255, 255, .85) !important;
--c-contrast-20: rgba(255, 255, 255, .2) !important;
--c-contrast-15: rgba(255, 255, 255, .15) !important;
--c-contrast-10: rgba(255, 255, 255, .1) !important;
--c-ui-hover: rgba(201, 154, 255, .7) !important;
--c-button-primary-disabled-content: rgba(255, 255, 255, .85) !important;
--gradient-button-accent-body: linear-gradient(180deg, #d6b2ff, #c99aff) !important;
--gradient-button-accent-border: linear-gradient(180deg, #e1c7ff, #c58bff) !important;
--gradient-button-accent-disabled: linear-gradient(180deg, rgba(214, 178, 255, .3), rgba(201, 154, 255, .3)) !important;
--c-button-accent-content: black !important;
--c-button-accent-pressed-body: #c99aff !important;
--c-button-accent-pressed-border: #c58bff !important;
--c-button-accent-disabled-content: rgba(255, 255, 255, .85) !important;
--gradient-button-secondary-body: linear-gradient(180deg, #6b6b6b, #585858) !important;
--gradient-button-secondary-border: linear-gradient(180deg, #848484, #585858) !important;
--gradient-button-secondary-disabled: linear-gradient(180deg, rgba(242, 242, 242, .3), rgba(237, 237, 237, .3)) !important;
--c-button-secondary-content: white !important;
--c-button-secondary-pressed-body: #585858 !important;
--c-button-secondary-pressed-border: #404040 !important;
--c-button-secondary-disabled-content: rgba(255, 255, 255, .85) !important;
}
:root {
color-scheme: dark;
--bg: bg1 // #1d1d1d; #ccc
--bg2: bg2 // #222; #e1e1e1
--bg3: bg3 // #1e1e1e; #d2d2d2
--bg-hover: bgh // #2d2d2d; #e5e5e5 #ececec
--text1: text1 // #ccc; #212121
--text2: text2 // #eee; #262626 #1a1a1a
--text3: text3 // #bbb; #595959 gray
--text4: text4 // #aaa; #4c4c4c #404040
--textw: textw // #fff; #000000
--textb: textb // #000; #ffffff
--textp: textp // #fba6ff; #78387b #86328a
--border: border1 // rgba(0,0,0,.08);
--border2: border2 // #242424;
--border3: border3 // #333;
}
if sb {
//chrome
::-webkit-scrollbar {
width: 8px
background-color: rgba(0, 0, 0, 0)
}
::-webkit-scrollbar-thumb {
background-color: #444
}
::-webkit-scrollbar-thumb:hover {
background: #777 !important
}
::-webkit-scrollbar-corner {
background: #444
}
//firefox
html {
scrollbar-color: #444 bg !important
scrollbar-width: thin !important
}
}
/* text headers titles */
.big-spots__header, .module-header, .module-header__btn.is-active,
.gogmix__title, .product-row__title, .product-tile__title, .header__title>strong,
.news-item {
color: var(--text2);
}
/* top page background */
.big-spots__blurs:before {
background: linear-gradient(to right,var(--bg),rgba(0, 0, 0, 0));
}
.big-spots__blurs:after {
background: linear-gradient(to left,var(--bg),rgba(0, 0, 0, 0));
}
.big-spots__blurs > div:after {
background: linear-gradient(to top,var(--bg) 15%,rgba(0, 0, 0, .2));
content: '';
position: absolute;
width: 100%;
height: 100%;
}
.frontpage-wrapper:before {
background: linear-gradient(to top,var(--bg) 50%,rgba(0, 0, 0, .3));
content: '';
position: absolute;
width: 100vw;
height: 100vw;
}
@media (min-width: 801px){
.frontpage-wrapper:before {
background: linear-gradient(to top,var(--bg) 50%,rgba(0, 0, 0, 0.3));
}
}
@media (min-width: 1367px) {
.frontpage-wrapper:before {
background: linear-gradient(to top,var(--bg) 60%,rgba(0, 0, 0, 0.3));
}
}
@media (min-width: 1681px) {
.frontpage-wrapper:before {
background: linear-gradient(to top,var(--bg) 70%,rgba(0, 0, 0, 0.3));
}
}
/* search */
.menu-search__result {
background: var(--bg3);
}
.menu-search__result.is-focused {
background: var(--bg2);
}
.menu-search__results, .menu-search__results .list--rows {
background: var(--bg2);
}
.menu-search__results-more {
box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, .1), 0px 1px 3px 0px rgba(255, 255, 255, .1);
background: var(--bg3);
color: var(--text4);
}
.menu-search__results-more:hover {
background: var(--bg-hover);
}
.menu-product__title {
color: var(--text2);
}
.menu-product .menu-product__price-btn {
border: 1px solid var(--border3);
color: var(--text2);
}
.menu-product {
border-bottom: 1px solid var(--border3);
}
.menu-product:hover {
background: var(--bg-hover);
}
.highlighted {
background: #867400;
}
.menu-search__no-results {
background: var(--bg2);
}
.menu-search-empty__btn {
background: var(--bg2);
color: var(--text1);
}
.menu-search-empty__btn:hover {
background: var(--bg-hover);
}
/* */
.about-gog {
background: #343e48;
}
.about-gog__header {
background-color: #343e48;
}
.about-gog__header:hover {
background-color: rgba(255, 255, 255, 0.05);
}
.about-gog__header~.about-gog__header {
border-color: #29323a;
}
.about-gog__icon {
text-shadow: 0 0 30px hsla(0, 0%, 0%, 0.75);
}
.footer__dropdown-item {
color: var(--text2);
}
.carousel-pagination.big-arrows .arrow-icon {
fill: #fff;
}
.carousel-pagination__page {
background: rgba(255, 255, 255, 0.2);
}
.galaxy-section-wrapper {
box-shadow: 0 -1px 0 0 rgba(255, 255, 255, .1), 0 1px 0 0 rgba(255, 255, 255, .1);
}
.explore-galaxy {
border-left: 1px solid var(--border3);
}
.galaxy-section,
.tooltip-content__text {
color: var(--text4);
}
.galaxy-tooltip__trigger,
.tooltip-content__header {
color: var(--textp);
}
.tooltip-icon-wrapper--icon {
stroke: var(--textp);
}
.custom-section__flashdeals-counter-wrapper {
border: 2px dashed var(--textp);
color: var(--textp);
}
/* price */
.price-btn, .price-text--discount {
border: 1px solid var(--border3);
}
.price-btn, .price-text, .price-text--discount {
color: var(--text1);
}
.price-text--discount {
background: #38505c;
}
.big-spot.is-hovered .price-btn--active,
.btn--green, .is-buyable.gogmix:hover .price-btn--active, .product-row.is-buyable:hover .price-btn--active {
background: linear-gradient(180deg,#5d7100,#354600);
color: var(--textw);
}
.big-spot.is-hovered .price-btn--active,
.is-buyable.gogmix:hover .price-btn--active, .product-row.is-buyable:hover .price-btn--active {
border-color: var(--border3);
}
/* */
.product-row--grid,
.list--grid .product-row,
.list--rows--no-border .product-row {
background: var(--bg2);
}
.list--grid .is-owned.gogmix, .list--grid .product-row.is-owned,
.is-owned.gogmix, .product-row.is-owned,
.order__related-games .product-row.is-owned {
background: var(--bg3);
}
.product-tile__label--in-library {
background: hsla(0, 0%, 10%, 0.7);
color: var(--text3);
}
.product-tile__label--is-wishlisted {
background: #845810;
}
.product-tile__label--is-upcoming {
background: #0f3854;
}
.product-tile__label--in-cart {
background: #364800;
}
.product-tile__content,
.product-tile--active .product-tile__content,
.catalog__body--slide-desktop .product-tile__content,
.catalog__body--slide-desktop .product-tile--active .product-tile__content,
.catalog__body--slide-desktop .product-tile__title,
body .catalog__body--slide-desktop:not(.catalog__body--list-view) .product-tile__content {
background: var(--bg2);
}
.product-tile:hover .product-tile__content {
background: var(--bg-hover);
}
.product-tile--list.product-tile--active .product-tile__title,
body .catalog__body--slide-desktop:not(.catalog__body--list-view) .product-tile__title,
body .catalog__body--slide-desktop:not(.catalog__body--list-view) .product-tile__price-discounted {
color: var(--text4);
}
.product-tile--list.product-tile--active .product-tile__content,
body .catalog__body--slide-desktop:not(.catalog__body--list-view) .product-tile--active .product-tile__content {
background: var(--bg2);
}
.product-tile--list.product-tile--active {
border-bottom: 1px solid var(--border3);
}
.section-title--with-border {
border-bottom: 1px solid var(--border3...