Add initial webkit theming

[Foldex]

Should serve as decent starting point, and a marked improvement over Steam's endless sea of blue gradients.

[tkashkin]

I don't think the skin should change anything other than colors and scrollbars by default, at least before the webkit.css is polished enough. Making it an optional patch would be good.

Do you know if Steam can load separate CSS files with @import rules? Should be much easier to make some parts of the stylesheet optional if it works.

[Foldex]

I don't think the skin should change anything other than colors and scrollbars by default, at least before the webkit.css is polished enough. Making it an optional patch would be good.

Fair enough, it's only a vaguely adwaita-ish WIP as I'm being lazy with the details for now. I'll have to do some digging through libadwaita with a finer tooth comb later. Is colors and scrollbars a hardline stance for the minimal version, or can I wiggle in one or two elements that otherwise would look out of place?

Do you know if Steam can load separate CSS files with @import rules? Should be much easier to make some parts of the stylesheet optional if it works.

Was the first thing I tried, sadly it seems unsupported as far as I could tell. We could still split it into separate files and make the installer script concat combinations together for different versions though. If not that, we can always fall back onto the big ugly patch plan.

[tkashkin]

Is colors and scrollbars a hardline stance for the minimal version, or can I wiggle in one or two elements that otherwise would look out of place?

Not really a hard requirement, I just don't want the skin to change too much of the library UI initially, at least not by default. Bigger changes can be added over time and enabled by default after some testing and polishing.

[Foldex]

Added the ability to select a minimal or more full web theme to the installer. Since the full webkit.css is being generated rather than sitting in the Adwaita folder, this does mean manual installs simply copying that folder won't have any web theme applied. You fine with that?

[tkashkin]

Yes, I'm fine with that. Let me know when the base part is ready for review.

---

Some code style preferences:

• Indent with tabs instead of spaces
• Put brackets on a separate line

selector1,
selector2
{
	property: value;
}

[ghost]

Looks awesome so far! Is there plans to fix the friends list page with that blue gradient on the top?

Thank you both for your hard work!! It is very appritiated :)

[Foldex]

Looks awesome so far! Is there plans to fix the friends list page with that blue gradient on the top?

The base version of the theme doesn't touch chat, but the latest full version should have the chat pretty much entirely themed. Do you have a screenshot of that?

Thank you both for your hard work!! It is very appritiated :)

:+1:

@tkashkin

The base theme should be good enough for a review at this point. Pretty much only basic colors for the Library/Collections/Downloads page, and scrollbars.

The full theme implements Chat/Game Details view fairly well, but they're not included in base for now. The more rounded aesthetic and basic Store/Community background colors are here as well, but I'm not too interested in theming every aspect of those pages.

[tkashkin]

@Foldex

The base theme looks good, so far I've noticed a few small issues:

1. Home and Collections buttons look a bit weird without a background:

2. Some of the search bar corners are not rounded.

3. Search bar has no background when filters popup is visible:

4. Full game name tooltip is blue when the game is not selected and transparent when it is selected:

5. Library scrollbar background is slightly blue, can be hard to notice:

6. What's New shelf has a darker background in the default skin and it seems to look better (or maybe I'm just used to its default style). It will probably look better with --view_bg_color as a background and maybe with a bottom border, see the screenshots view in GNOME Software for example:

---

I think the sidebar buttons (Home, Collections), filter dropdown and search field can be rounded to 6px in the base theme, it's a small enough change that should make the sidebar look better.

[Foldex]

1-6 should be fixed now.

[ghost]

Here is a screenshot of that friends pannel thing btw, not sure if it is a feature or not.

Cheers!

[Foldex]

It did stand out and was simple enough to fix, but I'll be upfront and say support for the web portions that just load Steam's website is going to be minimal from me.

Those areas are much larger in scope compared to the core areas of the client, and things like the Store are much more likely to undergo changes for special events and the like, leading to a higher burden of maintenance.

Aside from very glaring issues, it's mostly just a background change to somewhat fit in and is probably staying behind the full flag for this reason.

[tkashkin]

@Foldex

I've tweaked game list paddings a bit to make it look more similar to libadwaita sidebars. I've also tried to increase the list item height, but it seems to be hardcoded to 24px in JS, same issue as in VGUI menus and lists.

The only remaining issue I've noticed is when multiple games are selected:

I wasn't able to fix it easily without breaking other things, maybe you'll be able to do that.

Other than this the base theme seems to be ready to merge.

[Foldex]

@tkashkin

I've also tried to increase the list item height, but it seems to be hardcoded to 24px in JS, same issue as in VGUI menus and lists.

Yeah, the list is constructed and positioned on the fly with hardcoded values. It might still be possible to do something about that, but it'd likely be pretty messy.

The only remaining issue I've noticed is when multiple games are selected:

Should be fixed, hopefully it doesn't break anything you had just fixed.

Other than this the base theme seems to be ready to merge.

Assuming the latest batch of changes is without problem, sounds good to me.

I guess we can leave discussion about refining full to another PR.

[tkashkin]

@Foldex

A couple of very small and probably not even that important issues left:

1. Hover a selected game with download progress or cloud sync error when there's enough width (no overlay):

2. Same, but with multiple games selected and with overlay:

I can wait for you to try to fix this or I can merge this PR now and leave this to be fixed later.

[Foldex]

@tkashkin Whac-a-Mole round three?

[tkashkin]

@Foldex Everything seems to be fixed now, thanks.