Skip to content

GOG.com - Dark Theme by pabli

Imported and mirrored from https://github.com/pabli24/GOG-Dark/raw/master/GOG-Dark.user.css

Screenshot of GOG.com - Dark Theme

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...

Reviews

No reviews yet.