High-contrast border on overlays

[GeopJr]

Forwarding from https://github.com/GeopJr/Tuba/pull/1428

I added some styles for HC, specifically the typical HC border around the controls (box-shadow: inset 0 0 0 1px var(--border-color);) and made the background opaque.

I doubt it's possible for clapper-gtk*, but it can be done at least in clapper-app

*because hc is only on libadwaita/handy afaik

[Rafostar]

I doubt it's possible for clapper-gtk

Probably not, thanks to libadwaita. Normally this would be possible with listening to changes of settings::gtk-theme-name, but like usual Adwaita broke that with their own AdwStyleManager.

Probably the answer here is to add separate -hc stylesheet and load/unload them when user settings do change. Since we cannot listen to settings::gtk-theme-name to do this automatically (as this would broke apps that use libadwaita), it appears that best solution is to:

1. Introduce a convenience function like void clapper_gtk_update_style (gboolean is_dark, gboolean is_hc);
2. Tell users to connect libadwaita style manager notify::dark and notify::high-contrast and call above with current values.

This is gonna be low priority for now.

feat(Visualizer): audio controls match clapper

I am fine with apps theming ClapperGtkSimpleControls widget however they like as long as no complaints will be filled when/if due to some changes in it their theming broke. But remember that if you desire a higher level/support of styling in Tuba, you can always assemble your own custom controls panel using individual widgets from clapper-gtk lib instead of forcing yourself to match Clapper simple controls panel.

[GeopJr]

Probably not, thanks to libadwaita. Normally this would be possible with listening to changes of settings::gtk-theme-name, but like usual Adwaita broke that with their own AdwStyleManager.

I mean, it requires interacting with the portals so that makes sense. The 'appropriate' solution IMO would be using Xdp/libportal and listening to the portal orrrr if it's possible, use libadwaita at runtime if found, orrrrr, maybe play with css variables (https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1-latest/css-variables.html#opacity) since they change automatically

or just leave it as is I guess, apps can set their own hc styles like I did.

I am fine with apps theming ClapperGtkSimpleControls widget however they like as long as no complaints will be filled when/if due to some changes in it their theming broke.

you can always assemble your own custom controls panel using individual widgets from clapper-gtk lib

Just in case there's been a misunderstanding, the visualizer uses gstreamer directly and the controls it has are custom and used to follow the gtkvideo ones. That PR changed those controls to look like clapper's. No style changes have been done to ClapperGtkSimpleControls apart from the hc ones and adding accent color to the seekbar (through css vars).

If you are suggesting I use ClapperGtkSimpleControls for it, I don't think it's possible as I need a lot more control over the seekbar etc. If you are suggesting I make my own controls for Clapper to future proof the style, I'll think about it but it's not entirely for consistency, clapper's control design is just much better than the gtk controls one :) (Though I'm also considering moving away from the 'video controls' UX for the visualizer and do maybe a circular seekbar)

[Rafostar]

If you are suggesting I use ClapperGtkSimpleControls for it, I don't think it's possible as I need a lot more control over the seekbar etc. If you are suggesting I make my own controls for Clapper to future proof the style, I'll think about it but it's not entirely for consistency

No, I am just saying that you do not have to force yourself to match Clapper stock design in your non-clapper stuff :-)

"future proof the style" is part of it, but also ClapperGtkSimpleControls is just pre-made "simple" controls panel. clapper-gtk provided widgets are designed to work "automatically". For example you can take ClapperGtkTogglePlayButton put it inside some widget hierarchy (boxes, grids and other containers) and finally put whatever you made as an "fading-overlay" of ClapperGtkVideo. The button will still automatically work. Zero lines of code (can be done entirely from UI/blueprint file). And then you can style your custom overlay however you like.

[GeopJr]

Starting with the next GTK release, this should now be easily possible with media queries

@media (prefers-contrast: more) {
  clapper-gtk-lead-container>box {
	background-color: rgba(38,38,38,1);
	box-shadow: inset 0 0 0 1px var(--border-color);
  }
}