SG Dark Grey Userstyle


A darker version of steamgifts, steamtrades, and sgtools primarily designed for daytime use where as SGv2 Dark is designed for nighttime use . Works on www.steamgifts.com, www.steamtrades.com, www.sgtools.info . Compatible with most scripts found in the addon registry.

Note: Style is now hosted on github as userstyles.org is no longer supported.


Install Stylus for either Firefox, Chrome or Opera and then install the style using one of these methods:

📦 Install the usercss which supports automatic updates and customization.
📦 Install manually from GitHub with no customization. The style is in Mozilla format.
📦 Install script which supports automatic updates but no customization.


Last updated January 12 2024 version 2.4.0
Note: please report any bugs or if you have any suggestions.


Screenshots

Screenshot Album

View attached image.
View attached image.
View attached image.
View attached image.
View attached image.
View attached image.
View attached image.
View attached image.
View attached image.
View attached image.
View attached image.
6 years ago*

Comment has been collapsed.

Your download link seems to be broken.

https://userstyles.org/styles/141670/sg-dark-grey

6 years ago
Permalink

Comment has been collapsed.

Scripts ¯\(ツ)

6 years ago
Permalink

Comment has been collapsed.

Working now, and thanks, Squished :3

6 years ago
Permalink

Comment has been collapsed.

add pictures :D
also, i prefer Mully blue style closer to purple

6 years ago
Permalink

Comment has been collapsed.

Updating Sgv2 Dark atm pics to follow. Toying with adding setting to let users change main color/background only problem is that always gets reverted to default when style is updated, userstyles.org does not save your settings yet 😒

6 years ago
Permalink

Comment has been collapsed.

Nice to see you post this on the boards MashedTuber! There's a flavor out there for everyone and you've got the best ice cream. ;D

6 years ago
Permalink

Comment has been collapsed.

Hey, thanks for making this and I'm wondering if it's possible to disable new toolbars, buttons etc?

6 years ago
Permalink

Comment has been collapsed.

Nothing is configurable at the moment.

6 years ago
Permalink

Comment has been collapsed.

This doesn't appear darker to me then the current "Dark", does that mean the current dark is going to brighten up?

edit: i found the mix i like between the two.
this version in script form edited with bgcolor from old one. xD

background-color:#0f0f0b
View attached image.
6 years ago*
Permalink

Comment has been collapsed.

The two styles are meant to be different and will not be affecting each other in any way, SG Dark Grey is and will always be brighter than SGv2 Dark. Primary use of SG Dark Grey is for brighter environments than SGv2 Dark would be used in, not that you couldn't use it whenever you want but that is the design goal.

6 years ago*
Permalink

Comment has been collapsed.

i see ^^

i think you got it backwards in description then, which is what confused me. xD

A darker version primarily designed for daytime use...

6 years ago
Permalink

Comment has been collapsed.

I will clarify that :)

6 years ago
Permalink

Comment has been collapsed.

Version 1.0.5

6 years ago*
Permalink

Comment has been collapsed.

Version 1.0.6

6 years ago*
Permalink

Comment has been collapsed.

thanks ^^

6 years ago
Permalink

Comment has been collapsed.

you're welcome MR. shiny new 10

6 years ago*
Permalink

Comment has been collapsed.

Version 1.0.9

Version 1.0.8

Version 1.0.7

6 years ago*
Permalink

Comment has been collapsed.

Version 1.1

6 years ago
Permalink

Comment has been collapsed.

I looked at the screenshots and dayum, this is a sexy theme indeed!
BUT... is there the possibilty of an userscript? Maybe with a settings menu likewise your other theme has? I prefer to fix the page width for example which isn't given as i can see on the pictures.

6 years ago
Permalink

Comment has been collapsed.

So far my only plan is to use CSS variables with the advanced settings on userstyles.org. That will allow easy adjustments and they offer to use as CSS or as a script.

6 years ago
Permalink

Comment has been collapsed.

That's good to hear, thanks!

6 years ago
Permalink

Comment has been collapsed.

Version 1.2

  • Gridview updates for ESGST, SG₂O, SG++
6 years ago
Permalink

Comment has been collapsed.

Version 1.3

6 years ago
Permalink

Comment has been collapsed.

ty again. ^^

6 years ago
Permalink

Comment has been collapsed.

Version 1.5

Version 1.4

6 years ago*
Permalink

Comment has been collapsed.

Version 1.7

Version 1.6

  • Updated for steamgifts design changes to the bottom of the homepage.
  • Changes for ESGST v6.Beta.19.7 .
6 years ago*
Permalink

Comment has been collapsed.

ESGST gridview related "bug":

View attached image.
6 years ago
Permalink

Comment has been collapsed.

have you considered using red for "esgst-dh-highlighted"?

i personally edit line 3938 & 3941 to:

.esgst-popup .popup__keys__list .esgst-ggl-member, .table .esgst-dh-highlighted, .table .esgst-dh-highlighted.table__row-outer-wrap, .table .GHHighlight {
    background-color: hsla(0, 100%, 45%, 0.15)!important
}
.rhPopupResults .GHHighlight {
    background-color: hsla(0, 100%, 45%, 0.33)!important

and i think it looks much better that way. =)
just something to consider.

6 years ago
Permalink

Comment has been collapsed.

Version 1.9.3

  • ESGST up to date as of v6.Beta.25.1

Version 1.9.2

  • Updated for steamgifts tooltip changes.
  • ESGST up to date as of v6.Beta.24.0

Version 1.9.1

  • Fixed ESGST giveaway filters width.

Version 1.9

Version 1.8

6 years ago*
Permalink

Comment has been collapsed.

Heya, can you tell me which lines i have to adjust to get a fixed page witdh and full image opacity? :)

6 years ago
Permalink

Comment has been collapsed.

Delete

.page__inner-wrap, nav, #header nav, #content, .footer__inner-wrap, .featured__inner-wrap, .offer__inner-wrap {
    max-width: 100%;
}

And if using ESGST add

.sidebar + div .esgst-fmph, .sidebar + div .esgst-fmph-background, .sidebar--wide + div .esgst-gf-container-fixed {
    max-width: 1169px;
}
.sidebar--wide + div .esgst-fmph, .sidebar--wide + div .esgst-fmph-background, .sidebar--wide + div .esgst-gf-container-fixed {
    max-width: 1041px;
}
.page__limit-width .esgst-fmph, .page__limit-width .esgst-fmph-background {
    max-width: 980px !important;
}
6 years ago
Permalink

Comment has been collapsed.

Ooops i completely missed opacity, although i'm pretty sure on this style it is a brightness filter instead of opacity.

Change to your desired brightness

.nav__avatar-inner-wrap, .global__image-inner-wrap, .global__image-outer-wrap--game-large img, .global__image-outer-wrap--game-xlarge img, .featured__column.featured__column--width-fill.text-right > a, .profile_avatar, .nav_avatar, .table .avatar, .author_avatar, [data-google-query-id], .adsbygoogle, .giveaway_image_thumbnail, .giveaway_image_avatar, .featured_giveaway_image_avatar, .table_image_avatar, .table_image_thumbnail, .table_image_flag, .gridview-avatar {
    filter: brightness(80%);
}

ESGST gridview brightness

.esgst-gv-view .giveaway_image_thumbnail, .esgst-gv-view .giveaway_image_thumbnail_missing {
    filter: brightness(70%);
}
.esgst-gv-container:hover .giveaway_image_thumbnail, .esgst-gv-container:hover .giveaway_image_thumbnail_missing, .esgst-gv-container:hover .esgst-gv-icons {
    filter: brightness(90%);
}

SG++ gridview brightness

.SGPP__gridTile:hover .giveaway_image_thumbnail, .SGPP__gridTileIcons {
    opacity: 1;
    filter: brightness(1.1);
}

SG20 gridview brightness

.giveaway-gridview:hover .faded, .giveaway-gridview:hover .giveaway_image_thumbnail {
    opacity: 1;
    filter: brightness(1);
}
6 years ago
Permalink

Comment has been collapsed.

Ah, it's brightness and not opacity, that's why i didn't find the right lines.
Thanks for your answer, will switch from your Dark Theme to this now. :)

Just another question because i'm curious: if you compare script to style, which one is more performant and/or stable?

6 years ago
Permalink

Comment has been collapsed.

If you are comparing the same style then performance between script and a style plugin should be relatively the same. The script version would depend on script order as well otherwise you would need to mark a lot !important to override.

If you are comparing SG Dark Grey to SGv2 Dark then performance will be better on SG Dark Grey, there are a lot of box-shadows on SGv2 Dark that can be slower on older sysytems.

6 years ago
Permalink

Comment has been collapsed.

the script typically briefly flashes white for me, so i switched to style instead. and yes, performance on this dark grey seems to be the best (especially the style version). if it's just not quite dark enough for you, you can change the background color to the same one as the dark them by using this edit.

@squished, thank you for the update. ^^

6 years ago
Permalink

Comment has been collapsed.

Todays Tampermonkey update (4.4) added

  1. Experimental
    • 'Instant' injection mode

Seems to be doing a much better job at eliminating the flashes.

6 years ago
Permalink

Comment has been collapsed.

Version 1.9.8

  • ESGST up to date as of v6.Beta.35.1
  • Patreon updates.
  • Started converting to variables for upcoming 2.0 feature.

Version 1.9.7

  • Steamgifts region list/group list update

Version 1.9.6

  • ESGST up to date as of v6.Beta.31.15

Version 1.9.5

  • ESGST up to date as of v6.Beta.31.3

Version 1.9.4

  • ESGST up to date as of v6.Beta.30.4
6 years ago*
Permalink

Comment has been collapsed.

Thanks for updating! :)

Tiny bug i noticed:
The font color of the user names should be white, but they're not. The exact same issue for blacklisted users.
This occurs only on the main giveaway page and in the discussion section, within discussions or on user profiles everything seems fine.
Edit: also happens in SteamTrades.

View attached image.
6 years ago*
Permalink

Comment has been collapsed.

Have you not heard blue is the new white 😜 actually i think the steamgifts update added a class to that which broke it.

Edit: Fixed in Version 1.9.5

6 years ago*
Permalink

Comment has been collapsed.

It's fixed in discussions and ST, thanks for that. But on the mainpage the font is still blueish... :D

6 years ago
Permalink

Comment has been collapsed.

Whereabouts on the main page, i'm probably not running same settings in ESGST.

Edit: giveaways i take it, fixed now.

6 years ago*
Permalink

Comment has been collapsed.

It is indeed, thank you very much! :)

6 years ago
Permalink

Comment has been collapsed.

Version 1.9.8.1

  • ESGST up to date as of v6.Beta.37.3
  • SG++ settings added missing CSS.
6 years ago
Permalink

Comment has been collapsed.

Deleted

This comment was deleted 3 years ago.

6 years ago
Permalink

Comment has been collapsed.

v6.Beta.38.0 (October 2, 2017)

  • Made some style changes to the code.
  • Removed obsolete classes and renamed a few classes.
  • Opening the giveaway description is now mandatory in Enter/Leave Giveaway Button.

Added the following features:

  • 2.16 Giveaway Popup

That broke some visuals... especially related to Comment Formatting Helper and the new Giveaway Popup Button. ^^

6 years ago
Permalink

Comment has been collapsed.

😭

6 years ago
Permalink

Comment has been collapsed.

Luckily this is probably going to be the last class name changing for a while, until I decide to clone SG's classes completely, since all classes are now in their v6 format (prefixed by "esgst-" and in lowercase separated by dashes).

6 years ago
Permalink

Comment has been collapsed.

Roger, btw you broke the 3 heading buttons in the comment formatting helper 😉

6 years ago
Permalink

Comment has been collapsed.

Version 1.9.8.3

  • ESGST filter and ESGST steamtrades update

Version 1.9.8.2

  • ESGST up to date as of v6.Beta.38.4
6 years ago*
Permalink

Comment has been collapsed.

This needs some minor updates after the recent ESGST changes. :)

6 years ago
Permalink

Comment has been collapsed.

He's been a busy beaver i see, will try to get this this weekend.

6 years ago
Permalink

Comment has been collapsed.

Thank you! ^^

6 years ago
Permalink

Comment has been collapsed.

Should be good to go, let me know if i missed anything ;)

6 years ago
Permalink

Comment has been collapsed.

It's looking very good, thanks alot. :)
One tiny thing you missed is the new popup on hover for Giveaway Countries Loader. You can see it here for example.
Edit: and found this by accident. ^^

View attached image.
6 years ago*
Permalink

Comment has been collapsed.

Had that :P he snuck in a class change, corrected now.

6 years ago
Permalink

Comment has been collapsed.

Sign in through Steam to add a comment.