(CSS) How to target the background of window controls

  • @potmeklecbohdan oh, no, homework.

    That should be doable, I think. The main problem will be gradients, but I suppose that instead of hard-coding the grey colors, I could make a semi-transparent gradient overlaying the header bard and the tabs. This page will be useful indeed!

    As soon as I finish the "structure" (which now is basically changing the icons to elementary's standards and some small details), I'll try to make it adaptable to the selected color theme. I'll keep you updated!

  • The theme is mostly done, with color support, using variables. It still needs some fine-tuning (and I want to make the code less messy too), but the main problem that I don't know how to fix concerns icons. I followed @luetage's guide version II, but when I try to define the path the icon just... does not appear or, in some cases, appears over the default one. For now I'm using the other method, defining a background image. But this has the problem of not adapting to the color theme, which is especially bad in dark themes.

    The full theme is here: https://gist.github.com/NeoMahler/7ac6d13a2c4ce777983069799e040cd4. Icon stuff is between lines 112 and 199.

    I'll appreciate any help you can give me! 🙂

  • @NeoMahler You have to show the version with paths, the background images work of course.

  • @luetage of course, sorry about that 😅

    Updated gist: https://gist.github.com/NeoMahler/7ac6d13a2c4ce777983069799e040cd4

    Basically, all icons (except the menu and extension toggles, but I'm using the defaults for those) disappear, although the buttons are still clickable.

  • @NeoMahler First of all you should use more exact selectors. For the home button that would be button .button-toolbar.home svg path. But more importantly these paths can't work. You have a starting point of M400 something for the path, but the viewbox is only 26px high and wide. Your path isn't viable. As far as I know changing the viewbox is only possible with javascript. Either create your own paths with correct points for the existing viewbox, or switch to javascript.

  • @luetage I see. I just copied the paths from the original svg elementary icons. I'll see what can I do. Thanks!

  • @NeoMahler It looks much better now, I was too lazy for switching themes, but:

    • remove the .linux part of the second selector
    • I'm not sure, but .window-buttongroup's height should be 39px
    • I don't see any use of .close svg path and the code block
    • maybe (for win compatibility) set also size of window control buttons

    And about the icons you know what you need.


Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.