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
Size85 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.4.1
@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 forum "Forum Theme (for 'carbon' color scheme)" 1
@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== */
// bg1 #1d1d1d #ccc
// bg2 #222 #e1e1e1
// bg3 #1e1e1e #d2d2d2
// bgh #2d2d2d #e5e5e5 #ececec
// text1 #ccc #212121
// text2 #eee #262626 #1a1a1a
// text3 #bbb #595959 gray
// text4 #aaa #4c4c4c #404040
// textw #fff #000000
// textb #000 #ffffff
// textp #fba6ff #78387b #86328a
// border1 rgba(0,0,0,.08)
// border2 #242424
// border3 #333
i = !important
@-moz-document regexp("https?:\/\/(www|support)?\.gog\.com\/(?!u|feed|profile).*") {
html, body {
background: bg1
color: text1
}
}
@-moz-document domain("gog.com") {
:root {
color-scheme: dark
}
/* official dark theme /games body.dark-theme */
body, [customcolors] {
--c-background: bg1 i //#212121
--c-accent: rgb(201, 154, 255) i
--c-accent-supportive: rgb(179, 112, 255) i
--c-accent-contrast: rgb(0, 0, 0) i
--c-ui-primary: bg2 i //#303030
--c-ui-primary--hover-lighten: bgh i //#3d3d3d
--c-ui-primary--active-lighten: #565656 i
--c-ui-tertiary: rgb(64, 64, 64) i
--c-text-primary: text1 i //#f2f2f2
--c-text-secondary: text2 i //#ededed
--c-text-tertiary: rgb(217, 217, 217) i
--c-contrast: rgb(255, 255, 255) i
--c-contrast-85: rgba(255, 255, 255, .85) i
--c-contrast-20: rgba(255, 255, 255, .2) i
--c-contrast-15: rgba(255, 255, 255, .15) i
--c-contrast-10: rgba(255, 255, 255, .1) i
--c-ui-hover: rgba(201, 154, 255, .7) i
--c-button-primary-disabled-content: rgba(255, 255, 255, .85) i
--gradient-button-accent-body: linear-gradient(180deg, rgb(214, 178, 255), rgb(201, 154, 255)) i
--gradient-button-accent-border: linear-gradient(180deg, rgb(225, 199, 255), rgb(197, 139, 255)) i
--gradient-button-accent-disabled: linear-gradient(180deg, rgba(214, 178, 255, .3), rgba(201, 154, 255, .3)) i
--c-button-accent-content: rgb(0, 0, 0) i
--c-button-accent-pressed-body: rgb(201, 154, 255) i
--c-button-accent-pressed-border: rgb(197, 139, 255) i
--c-button-accent-disabled-content: rgba(255, 255, 255, .85) i
--gradient-button-secondary-body: linear-gradient(180deg, rgb(107, 107, 107), rgb(88, 88, 88)) i
--gradient-button-secondary-border: linear-gradient(180deg, rgb(132, 132, 132), rgb(88, 88, 88)) i
--gradient-button-secondary-disabled: linear-gradient(180deg, rgba(242, 242, 242, .3), rgba(237, 237, 237, .3)) i
--c-button-secondary-content: rgb(255, 255, 255) i
--c-button-secondary-pressed-body: rgb(88, 88, 88) i
--c-button-secondary-pressed-border: rgb(64, 64, 64) i
--c-button-secondary-disabled-content: rgba(255, 255, 255, .85) i
--c-usp-tooltip-bg: var(--c-background) i
--c-dots-loader: rgb(0, 0, 0) i
--c-dots-loader-opacity: rgba(0, 0, 0, .2) i
}
if sb {
//chrome
::-webkit-scrollbar {
width: 8px
height: 8px
background-color: rgba(0, 0, 0, 0)
}
::-webkit-scrollbar-thumb {
background-color: #444
}
::-webkit-scrollbar-thumb:hover {
background-color: #777 i
}
::-webkit-scrollbar-corner {
background-color: #444
}
//firefox, chrome 121+
html {
scrollbar-color: #444 bg i
scrollbar-width: thin i
}
}
.content, .wrapper {
background-color: bg1
}
/* text headers titles */
.big-spots__header, .big-spot__subtitle, .big-spot__title, .module-header, .module-header__btn.is-active,
.gogmix__title, .product-row__title, .product-tile__title, .header__title>strong, product-price,
.news-item, .takeover__content {
color: text2 i
}
/* search */
.menu-search__result {
background: bg3
}
.menu-search__result.is-focused, .menu-search__results, .menu-search__results .list--rows {
background: 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: bg3
color: text4
}
.menu-search__results-more:hover {
background: bgh
}
.menu-product__title {
color: text2
}
.menu-product .menu-product__price-btn {
border: 1px solid border3
color: text2
}
.menu-product {
border-bottom: 1px solid border3
}
.menu-product:hover {
background: bgh
}
.highlighted {
background: #867400
}
.menu-search__product-wishlist svg {
stroke: text4
}
i.menu-product__os-icon.menu-product__os-icon--windows.menu-product__os-icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='45'%3E%3Cpath fill='%23aaa' d='M12.882 15.997c-1.491-0.766-2.94-1.155-4.309-1.155-0.186 0-0.373 0.006-0.561 0.022-1.746 0.145-3.341 0.605-4.367 0.963-0.272 0.1-0.551 0.205-0.838 0.322l-2.807 9.731c1.928-0.713 3.634-1.061 5.196-1.061 2.526 0 4.36 0.944 5.875 1.916 0.718-2.435 2.439-8.315 2.953-10.073-0.373-0.228-0.752-0.455-1.141-0.666zM16.511 18.471l-2.826 9.817c0.838 0.48 3.659 2.002 5.819 2.002 1.744 0 3.695-0.447 5.964-1.369l2.699-9.437c-1.832 0.591-3.59 0.891-5.233 0.891-2.998 0-5.097-0.972-6.422-1.905zM9.151 11.525c2.41 0.025 4.192 0.944 5.669 1.891l2.898-9.917c-0.611-0.35-2.213-1.222-3.371-1.519-0.762-0.178-1.563-0.269-2.413-0.269-1.619 0.030-3.387 0.436-5.403 1.244l-2.764 9.706c2.025-0.764 3.77-1.136 5.378-1.136 0.001 0 0.004 0 0.004 0zM32 6.191c-1.838 0.713-3.631 1.077-5.345 1.077-2.865 0-4.978-0.994-6.347-1.949l-2.873 9.945c1.93 1.241 4.009 1.871 6.191 1.871 1.78 0 3.623-0.427 5.483-1.271l-0.006-0.069 0.117-0.028 2.779-9.576z'/%3E%3C/svg%3E")
background-size: 17px 15px
background-position: 17px 15px
width: 12px
height: 12px
}
i.menu-product__os-icon.menu-product__os-icon--mac.menu-product__os-icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='45'%3E%3Cpath fill='%23aaa' d='M24.734 17.003c-0.040-4.053 3.305-5.996 3.454-6.093-1.88-2.751-4.808-3.127-5.851-3.171-2.492-0.252-4.862 1.467-6.127 1.467-1.261 0-3.213-1.43-5.28-1.392-2.716 0.040-5.221 1.579-6.619 4.012-2.822 4.897-0.723 12.151 2.028 16.123 1.344 1.944 2.947 4.127 5.051 4.049 2.026-0.081 2.793-1.311 5.242-1.311s3.138 1.311 5.283 1.271c2.18-0.041 3.562-1.981 4.897-3.931 1.543-2.255 2.179-4.439 2.216-4.551-0.048-0.022-4.252-1.632-4.294-6.473zM20.705 5.11c1.117-1.355 1.871-3.235 1.665-5.11-1.609 0.066-3.559 1.072-4.713 2.423-1.036 1.199-1.942 3.113-1.699 4.951 1.796 0.14 3.629-0.913 4.747-2.264z'/%3E%3C/svg%3E")
background-size: 17px 15px
background-position: 17px 16px
width: 12px
height: 12px
margin-left: 2px
}
i.menu-product__os-icon.menu-product__os-icon--linux.menu-product__os-icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='45'%3E%3Cpath fill='%23aaa' d='M44.4,27.3c-1,0.7-3.2-0.6-4.4-1.3c-1.1-0.7-2-0.5-2-0.5l0,0c0,2.1-1.3,5.7-1.9,7.1l0,0l-0.6,1.4c2.1,0.6,5.3,1.7,5.3,2.9 c0,0,0,0.1,0,0.1c0.1,0.2,0.1,0.5,0.1,0.7c0,1.8-1.8,3.3-3.9,3.3h-9.7c-1.4,0-2.6-0.6-3.3-1.5h-3.1C20.2,40.4,19,41,17.6,41H8 c-2.2,0-3.9-1.5-3.9-3.4c0-0.2,0-0.5,0.1-0.7c0,0,0-0.1,0-0.1c0-1.2,3.2-2.4,5.3-3l-0.6-1.5l0,0c-0.6-1-1.9-4.9-1.9-6.9l0,0.1 c0,0-0.9-0.2-2,0.5c-1.1,0.7-3.4,2.1-4.3,1.3c-1-0.7-0.5-1.3,0.2-2.2c0.8-0.9,8.1-7,8.3-8.7c0.2-1.7,0.5-7.4,0.7-8 C10,7.7,12.4,0.2,22.2,0v0c0,0-0.6,0-1.2,0c0,0,0,0,0,0c0.2,0,0.5,0,0.7,0c0.2,0,0.5,0,0.8,0c0.3,0,0.5,0,0.8,0c0.2,0,0.4,0,0.6,0 c0,0,0,0,0,0c-0.6,0-1.1,0-1.1,0v0C33.1,0.2,35,7.7,35.2,8.3c0.2,0.6,0.6,6.3,0.7,8c0.2,1.7,7.5,7.8,8.3,8.7 C45,26,45.4,26.6,44.4,27.3z M28,15.6c1.3-0.6,2.3-2,2.3-3.5c0-2.1-1.7-3.9-3.7-3.9c-1.5,0-2.8,0.9-3.4,2.3l-0.6-0.7l-0.6,0.7 c-0.6-1.3-1.9-2.3-3.4-2.3c-2.1,0-3.7,1.7-3.7,3.9c0,1.6,0.9,3,2.3,3.5 M19.2,16.1L19.2,16.1c0-0.1-0.1-0.3-0.1-0.4 c0-0.1,0-0.1,0-0.2c0-0.2,0.1-0.3,0.2-0.5c0.5-0.5,1.2-0.9,1.4-0.9h1.6h1.5c0.2,0,0.8,0.5,1.3,0.9c0.1,0.1,0.2,0.3,0.2,0.4 c0,0.2,0,0.3,0,0.5 M25.4,16.3L25.4,16.3c-0.1,0.2-0.1,0.3-0.1,0.3s-1.5,2-2,2.6c-0.5,0.6-0.9,0.5-0.9,0.5s-0.5,0.1-1-0.5 c-0.5-0.6-2-2.6-2-2.6s0-0.1-0.1-0.2l0,0c-5,4-6.3,13.3-6,15.2c0,0.2,0.1,0.5,0.2,0.8c0.7-0.1,0.2,1,1.2,1c3.7,0,6.5,1.4,6.9,3.2 c0.2,0.3,0.2,0.6,0.2,0.9c0,0.4-0.1,0.7-0.3,1h2c-0.2-0.3-0.3-0.6-0.3-1c0-0.4,0.2-0.8,0.4-1.1c0.7-1.7,3.3-3,6.8-3 c1,0,0.5-1.1,1.2-1c0.1-0.3,0.1-0.5,0.2-0.8C32,29.6,31.1,20.8,25.4,16.3z M23.8,13.1c-0.4,0-0.8-0.7-0.8-1.6c0-0.9,0.4-1.6,0.8-1.6 s0.8,0.7,0.8,1.6C24.6,12.4,24.3,13.1,23.8,13.1z M21.2,13.1c-0.4,0-0.8-0.7-0.8-1.6c0-0.9,0.4-1.6,0.8-1.6c0.4,0,0.8,0.7,0.8,1.6 C22,12.4,21.6,13.1,21.2,13.1z'/%3E%3C/svg%3E")
background-size: 12px 11px
background-position: 12px 11px
margin-left: 2px
}
.menu-search__no-results {
background: bg2
}
.menu-search-empty__btn {
background: bg2
color: text1
}
.menu-search-empty__btn:hover {
background: bgh
}
/* */
.about-gog {
background: #343e48
}
....