Window buttons mod for macOS and Linux
-
@potmeklecbohdan That's not the case for the macOS version, there might be something else going on. Maybe it's fixable with css.
-
Another update. I got rid of the svgs entirely, coded the round buttons and added transitions. Looks much smoother now and displays correctly in all configurations (hopefully). OP has been edited accordingly.
-
I made another update too, expanding the titlebar and the window buttongroup to full height. The hover triggers earlier and more consistent - it behaves just like on Mailspring now, down to the millisecond. Additionally I forgot to disable the coloring of the minimize button in fullscreen mode on graphite. What I noticed is that proper Vivaldi just makes the background of the minimize button transparent in fullscreen, which always bugged me. There is a slight outline, but it looks like there's a gaping hole between the buttons. In the mod it shows the
isblurred
color now (same as window not in focus), which looks better in my opinion. Anyway, OP has been edited. I'm pretty happy with it now. If someone should notice any inconsistency or problem, please let me know. -
Recently I'm trying to get rid of all fixed colors in Vivaldi. The macOS window buttons have a fixed color, therefore I made a new version of this mod which uses the foreground and accent foreground colors for all window buttons instead. That's the same color as the new tab / trash button and makes the tab bar look more consistent and it has the advantage that the buttons are always visible, even on very colorful themes and all accents from currently active tabs.
/* window buttons */ #browser.mac .window-buttongroup button svg { display: none; } #browser.mac #titlebar { height: 100%; } #browser.mac .window-buttongroup { -webkit-app-region: no-drag; height: 100%; margin: 0; padding: 14px 8px 0; } #browser.mac #titlebar.tabless .window-buttongroup { margin-top: 0px; padding-top: 5px; } .stacks-off.fullscreen#browser.mac .window-buttongroup, .tabs-at-edge#browser.mac .window-buttongroup { margin-top: 0px; padding-top: 9px; } #browser.mac .window-buttongroup button { margin-top: 3px; height: 6px; width: 12px; opacity: 0.2; background-color: var(--colorFg); border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 2px; transition-duration: 150ms; transition-property: margin, height, border-radius; } .color-behind-tabs-on#browser.mac .window-buttongroup button { background-color: var(--colorAccentFg); } #browser.mac .window-buttongroup:hover button { margin-top: 0px; height: 12px; border-radius: 50%; } #browser:not(.fullscreen).hasfocus#browser.mac .window-buttongroup button.window-minimize, .hasfocus#browser.mac .window-buttongroup button.window-maximize, .hasfocus#browser.mac .window-buttongroup button.window-close { background-color: var(--colorFgFaded); border-color: var(--colorFgFadedMore); opacity: 1; } #browser:not(.fullscreen).color-behind-tabs-on.hasfocus#browser.mac .window-buttongroup button.window-minimize, .color-behind-tabs-on.hasfocus#browser.mac .window-buttongroup button.window-maximize, .color-behind-tabs-on.hasfocus#browser.mac .window-buttongroup button.window-close { background-color: var(--colorAccentFgFaded); border-color: var(--colorAccentFgAlpha); }
-
I disabled dragging for the
.window-buttongroup
div to reenable the hover. In recent versions of Vivaldi the hover is only being triggered when you are directly over a button and that's not how it's supposed to work. Disabling the dragging fixes it. -
@raed Can you drag the window when clicking on an empty space in the panel container?
-
@raed The panel container is the element enclosing the panels (bookmarks, history, notes, webpanels, etc). Click somewhere between the
+
button and the settings button to test dragging. -
@raed That's the tabbar, I am talking about the panels container. This one:
panels
-
@raed Yeah, I can select text.
My question wasn't related to this mod, but to find the differences in the implementation of draggable regions on elements between macOS and Windows. Seems like the same underlying issues exist, but the unrecognized hover and click is likely contained to macOS only.
-
For people under linux, I have adapted it :
/* window */ body { border-radius: 0; } .win.normal #tabs-tabbar-container.top, .linux.normal #tabs-tabbar-container.top { padding-top: 5px; } /* SVG disposition */ button.window-minimize svg { transform: translate(-4px, -3px); } button.window-close svg, button.window-maximize svg { transform: translate(-4px, 0); } /* Layout of buttons */ #browser.linux .window-buttongroup button svg { display: none; z-index: 2; fill: black; opacity: 0.75; height: 9px !important; } #browser.linux .window-buttongroup button { margin: 0 5px 0 3px; } #browser.linux #titlebar { height: 100%; } #browser.linux .window-buttongroup { -webkit-app-region: no-drag; height: 100%; margin: 0; padding: 7px 6px 0 6px; } .stacks-off.fullscreen#browser.linux .window-buttongroup, .tabs-at-edge#browser.linux .window-buttongroup { margin: 0; padding-top: 3px; } #browser.linux .window-buttongroup button, #browser.linux .window-buttongroup button:hover { margin-top: 8px 5px 5px 6px; height: 16px; width: 16px; opacity: 0.2; background-color: var(--colorFg); border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 100%; transition-duration: 150ms; transition-property: margin, height, border-radius; } :not(.fullscreen).hasfocus#browser.linux .window-buttongroup.graphite button.window-minimize, .hasfocus#browser.linux .window-buttongroup.graphite button.window-maximize, .hasfocus#browser.linux .window-buttongroup.graphite button.window-close { opacity: 1; background-color: #8e8e93; border-color: #727277; } :not(.fullscreen).hasfocus#browser.linux .window-buttongroup:not(.graphite) button.window-minimize { opacity: 1; background-color: #f7bb3f; border-color: #dc9e34; } .hasfocus#browser.linux .window-buttongroup:not(.graphite) button.window-maximize { opacity: 1; background-color: #34c749; border-color: #1fa42d; } .hasfocus#browser.linux .window-buttongroup:not(.graphite) button.window-close { opacity: 1; background-color: #f8625e; border-color: #de4947; } /* Animation */ #browser.linux .window-buttongroup button:hover svg { display: block; }
-
@clementlyara Looks nice, good job. A suggestion: you could post an image for preview purposes. Have added a link to your post to OP.
-
Thanks, here are some previews after adding the stylesheet :
-
Tried porting it to Windows with the help of GPT, would love help from someone who actually understands custom.css to make it even better
Tab position: LeftPossible improvements:
- Move the buttons to the left
When Vivaldi is not on foreground the close button has a sort of red tint to it when I believe it's supposed to be a shade of gray
Here are some previews:
Here is the code:
/* window */ body { border-radius: 0; } .win.normal #tabs-tabbar-container.top { padding-top: 5px; } /* SVG disposition */ button.window-minimize svg { transform: translate(-4px, -1px); } button.window-close svg { transform: translate(0px, -1px); /* Adjust the translation values as needed */ } button.window-maximize svg { transform: translate(-4px, 0); } /* Layout of buttons */ #browser.win .window-buttongroup button svg { display: none; z-index: 2; fill: black; opacity: 0.75; height: 9px !important; } #browser.win .window-buttongroup button { margin: 0 5px 0 3px; position: relative; /* Add this line */ top: -1px; /* Add this line */ } #browser.win #titlebar { height: 100%; } #browser.win .window-buttongroup { height: 100%; margin: 0; padding: 7px 6px 0 6px; } .stacks-off.fullscreen#browser.win .window-buttongroup, .tabs-at-edge#browser.win .window-buttongroup { margin: 0; padding-top: 3px; } #browser.win .window-buttongroup button, #browser.win .window-buttongroup button:hover { margin-top: 8px 5px 5px 6px; height: 16px; width: 16px; opacity: 0.2; background-color: var(--colorFg); border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 100%; transition-duration: 150ms; transition-property: margin, height, border-radius; } #browser.win .window-buttongroup button.window-close { background-color: #f8625e; border-color: #de4947; border-radius: 50%; padding: 0; display: flex; align-items: center; justify-content: center; width: 16px; } :not(.fullscreen).hasfocus#browser.win .window-buttongroup button.window-minimize, .hasfocus#browser.win .window-buttongroup button.window-maximize, .hasfocus#browser.win .window-buttongroup button.window-close { opacity: 1; background-color: #8e8e93; border-color: #727277; border-radius: 50%; } :not(.fullscreen).hasfocus#browser.win .window-buttongroup:not(.graphite) button.window-minimize { opacity: 1; background-color: #f7bb3f; border-color: #dc9e34; } .hasfocus#browser.win .window-buttongroup:not(.graphite) button.window-maximize { opacity: 1; background-color: #34c749; border-color: #1fa42d; } .hasfocus#browser.win .window-buttongroup:not(.graphite) button.window-close { opacity: 1; background-color: #f8625e; border-color: #de4947; } /* Animation */ #browser.win .window-buttongroup button:hover svg { display: block; } #browser.win .window-buttongroup button.window-close:hover { background-color: #f8625e; border-color: #de4947; }
- Move the buttons to the left
-
@clementlyara said in Window buttons mod for macOS and Linux:
Thanks, here are some previews after adding the stylesheet :
-
Hi,
Does not work here W11 22H2 / 23H2I guess I'll need to tweak it, let's what can be done.
-
For some reason it looks good at the Settings PopUp but not on the Window.
Just noticed,
Not touched yet