(CSS) How to target the background of window controls



  • Hi!
    I'm messing around with CSS to make Vivaldi more similar to elementary OS's theme and for some reason I can't change the background of the window controls to have the gradient (see screenshot).

    I thought that .window-buttongroup would work, but it doesn't. The code I'm trying to place there is:

    .window-buttongroup {
        background-image: linear-gradient(#e6e6e6, #d0d0d0) !important;
        border-top-width: 0px !important;
        border-top-right-radius: 4px !important;
        border-bottom: 1px solid #979797 !important;
        box-shadow:
            inset 0 1px 0 0 rgba(255,255,255, 0.2),
            inset 0 -1px 0 0 rgba(255,255,255, 0.2) !important;    
    }
    

    The same code (with different selectors) worked just fine for the rest of the address bar, including the vivaldi button background.

    Screenshot:
    screenshot

    Any ideas? Thanks in advance!!



  • @NeoMahler Can't test it, since I'm not on Linux, but @Tiamarth has changed the window buttongroup successfully for his Arc theme. You might wanna take a look at it.

    https://forum.vivaldi.net/topic/16892/arc-for-vivaldi
    https://github.com/Tiamarth/Arc-for-Vivaldi/blob/master/README.md

    Following the full excerpt for window buttongroup from his arc.css file:

    /* better positioning on window buttons */
    .linux .window-buttongroup {margin-top: 4.5px;}
    .linux .maximized .window-buttongroup {margin: initial;}
    .linux #browser:not(.tabs-top) .window-buttongroup {margin-top: 4px;}
    .linux #browser:not(.tabs-top).address-off .window-buttongroup,
    .linux #browser:not(.tabs-top).address-bottom .window-buttongroup {margin-top: -1px;}
    .linux .window-minimize {margin-right: 5px !important;}
    .linux .window-maximize {margin-right: 5px !important;}
    .linux .window-close {margin-right: -7px !important;}
    /* remove background on window buttons */
    .window-buttongroup button {
        width: 30px;
        background-color: rgba(0,0,0,0) !important;
    }
    .window-buttongroup button:hover {background-color: rgba(0,0,0,0) !important;}
    .window-buttongroup button:active {background-color: rgba(0,0,0,0) !important;}
    .isblurred #browser .window-buttongroup img {opacity: 0.3;}
    /* hide default window buttons svgs */
    .window-buttongroup svg {display: none;}
    /* apply arc window buttons */
    /* minimize */
    .window-minimize {background: url('arc/titlebutton-minimize.png') no-repeat;}
    /* maximize */
    .window-maximize {background: url('arc/titlebutton-maximize.png') no-repeat;}
    /* close */
    .window-close {background: url('arc/titlebutton-close.png') no-repeat;}
    /* on hover */
    .window-minimize:hover {background: url('arc/titlebutton-minimize-hover.png') no-repeat !important;}
    .window-maximize:hover {background: url('arc/titlebutton-maximize-hover.png') no-repeat !important;}
    .window-close:hover {background: url('arc/titlebutton-close-hover.png') no-repeat !important;}
    /* on hover:active */
    .window-minimize:hover:active {background: url('arc/titlebutton-minimize-active.png') no-repeat !important;}
    .window-maximize:hover:active {background: url('arc/titlebutton-maximize-active.png') no-repeat !important;}
    .window-close:hover:active {background: url('arc/titlebutton-close-active.png') no-repeat !important;}
    /* on dark theme */
    .acc-dark.color-behind-tabs-on .window-minimize,.theme-dark .window-minimize {background: url('arc/titlebutton-minimize-dark.png') no-repeat;}
    .acc-dark.color-behind-tabs-on .window-maximize,.theme-dark .window-maximize {background: url('arc/titlebutton-maximize-dark.png') no-repeat;}
    .acc-dark.color-behind-tabs-on .window-close,.theme-dark .window-close {background: url('arc/titlebutton-close-dark.png') no-repeat;}
    /* on dark theme:hover */
    .acc-dark.color-behind-tabs-on .window-minimize:hover,.theme-dark .window-minimize:hover {background: url('arc/titlebutton-minimize-hover-dark.png') no-repeat !important;}
    .acc-dark.color-behind-tabs-on .window-maximize:hover,.theme-dark .window-maximize:hover {background: url('arc/titlebutton-maximize-hover-dark.png') no-repeat !important;}
    .acc-dark.color-behind-tabs-on .window-close:hover,.theme-dark .window-close:hover {background: url('arc/titlebutton-close-hover-dark.png') no-repeat !important;}
    /* on dark theme:hover:active */
    .acc-dark.color-behind-tabs-on .window-minimize:hover:active,.theme-dark .window-minimize:hover:active {background: url('arc/titlebutton-minimize-active-dark.png') no-repeat !important;}
    .acc-dark.color-behind-tabs-on .window-maximize:hover:active,.theme-dark .window-maximize:hover:active {background: url('arc/titlebutton-maximize-active-dark.png') no-repeat !important;}
    .acc-dark.color-behind-tabs-on .window-close:hover:active,.theme-dark .window-close:hover:active {background: url('arc/titlebutton-close-active-dark.png') no-repeat !important;}
    /* on light theme dark accent behind tabs */
    #browser:not(.tabs-top).acc-dark.color-behind-tabs-on .window-minimize {background: url('arc/titlebutton-minimize.png') no-repeat !important;}
    #browser:not(.tabs-top).acc-dark.color-behind-tabs-on .window-maximize {background: url('arc/titlebutton-maximize.png') no-repeat !important;}
    #browser:not(.tabs-top).acc-dark.color-behind-tabs-on .window-close {background: url('arc/titlebutton-close.png') no-repeat !important;}
    /* on light theme dark accent behind tabs:hover */
    #browser:not(.tabs-top).acc-dark.color-behind-tabs-on .window-minimize:hover {background: url('arc/titlebutton-minimize-hover.png') no-repeat !important;}
    #browser:not(.tabs-top).acc-dark.color-behind-tabs-on .window-maximize:hover {background: url('arc/titlebutton-maximize-hover.png') no-repeat !important;}
    #browser:not(.tabs-top).acc-dark.color-behind-tabs-on .window-close:hover {background: url('arc/titlebutton-close-hover.png') no-repeat !important;}
    /* on light theme dark accent behind tabs:hover:active */
    #browser:not(.tabs-top).acc-dark.color-behind-tabs-on .window-minimize:hover:active {background: url('arc/titlebutton-minimize-active.png') no-repeat !important;}
    #browser:not(.tabs-top).acc-dark.color-behind-tabs-on .window-maximize:hover:active {background: url('arc/titlebutton-maximize-active.png') no-repeat !important;}
    #browser:not(.tabs-top).acc-dark.color-behind-tabs-on .window-close:hover:active {background: url('arc/titlebutton-close-active.png') no-repeat !important;}
    /* on inactive window:base */
    .isblurred .window-minimize {background: url('arc/titlebutton-minimize-backdrop.png') no-repeat;}
    .isblurred .window-maximize {background: url('arc/titlebutton-maximize-backdrop.png') no-repeat;}
    .isblurred .window-close {background: url('arc/titlebutton-close-backdrop.png') no-repeat;}
    /* on inactive window:dark */
    .acc-dark.isblurred .window-minimize,.theme-dark.isblurred .window-minimize {background: url('arc/titlebutton-minimize-backdrop-dark.png') no-repeat;}
    .acc-dark.isblurred .window-maximize,.theme-dark.isblurred .window-maximize {background: url('arc/titlebutton-maximize-backdrop-dark.png') no-repeat;}
    .acc-dark.isblurred .window-close,.theme-dark.isblurred .window-close {background: url('arc/titlebutton-close-backdrop-dark.png') no-repeat;}
    


  • @luetage thanks! I didn't know about the arc theme.

    Still, it doesn't quite work. For some reason, I can target the buttons themselves, but not their background. By "background" I don't mean the small rectangular boxes with the icons, but the "general background" of both buttons. I guess I could make the buttons bigger so that they use all space and then style them, but it seems a bit messy.



  • @NeoMahler How did you test the arc code?



  • @luetage so, when I paste the arc.css file into my custom.css file and restart the browser, I see changes.

    The problem is styling the color behind the buttons, which arc doesn't seem to style.



  • @NeoMahler For the arc css to work you also need to load the background pictures, which you probably haven't done. This will take care of the backgrounds. Since the images aren't in your installation, the backgrounds aren't set.



  • @luetage it works now, but that's not what I was asking. Maybe I didn't explain myself clearly enough. I can target the buttons, and also the little boxes that "hold" them. But I want to change what's behind (or around) them, painted in red in the following screenshot:
    screenshot

    As you can see in the original screenshot, they don't have the gradient of the rest of the headerbar.



  • I think we need the whole CSS that modifies header.



  • @potmeklecbohdan sure! I've posted the full code on pastebin: https://pastebin.com/bfLf8zMN. The part that modifies the header color is at the top, but I've pasted it anyway in case you want to test it.



  • @NeoMahler I think it's simple. Just remove the right margin from addressbar and change the right padding. I don't see any better way because if I click the area to inspect it I'm “redirected” to #main, which is much bigger so the gradient wouldn't be the same.



  • @potmeklecbohdan oh! That was it. I'm basing it on another theme, and the margin was already there. Thank you! 🙂



  • @NeoMahler Or another way is using z-index.
    Edit: that's the code I used to get it look like part of the toolbar (for .window-buttongroup):

    margin: 0;
    height: 49px;
    width: 64px;
    background-image: linear-gradient(#e6e6e6, #d0d0d0) !important;
    z-index: 1;
    


  • @potmeklecbohdan your previous suggestion worked. The code looks cleaner that way, I think. Thank you!

    Anyway, now I have another problem. I have moved the close button to the left side and added margin to the menu and back buttons, but both the close and the menu buttons are not clickable. Apparently, is the back button's margin fault, because if I use padding instead, it works fine. The relevant part of the code is:

    button.vivaldi { /* Vivaldi button */
        margin-left: 35px;
        margin-top: 12px;
        z-index: 1; 
        border-top-width: 0px !important;
    }
    .window-close {
        position: fixed !important;
        left: 5px;
        top: 13px;
        z-index: 2;
    }
    button.back {
        margin-left: 60px !important;
    }
    

    I have been playing with the z-indexs, but it doesn't seem to work. Any ideas?



  • @NeoMahler There wasn't really a misunderstanding. I just can't test any of this because I'm on macOS. The window buttongroup is completely different there. The window buttons and the icon for triggering the menu are the only dividing factor on Vivaldi between different operating systems. Anything else is the same as far as I know.



  • @luetage I see, makes sense. Thanks for your attentiveness anyway! 😃



  • @NeoMahler Remove the margin of back button and padding of addressbar and the value (92px?) use as margin of addressbar. Then use window-buttongroup as the background for close and (partially) menu buttons.

    Edit: why not to use window-buttongroup as background for the whole top bar? But that's just a thought…



  • @potmeklecbohdan awesome! Thanks to your help my css is now usable 😛



  • @NeoMahler One special task for you: make it usable also if you'll change settings (e. g. I had a problem with the back button) and theme (for “help” see vivaldi://themecolors)



  • @potmeklecbohdan That's a good find, didn't know the page. I'm always looking up the color variables in devtools, but this is more convenient.




 

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