Move Tab Close Button To Right Side Of Tab
-
I know this is a small thing but it's annoying. Firefox and Chrome both have the close tab button on the right side of the tab. Years of using those browsers have trained me when switching tabs to click left of center. Vivaldi puts the tab close button the left side, and my biggest issue with Vivaldi after a week is closing tabs when I'm trying just to switch to them. I checked preferences, there wasn't a way to re-position them. Can something be added, or can the tab close be moved? Or can the tab close be made visible all the time so as to remind me? I'm on a Mac. Chromium is open source. Can I tweak this myself?
-
On Windows the close button is on the right of the tab. Maybe it's a Mac UI thing?
There's a setting to remove the close button from tabs. Get the latest Snapshot or Beta 3.
-
add this to your custom.css file:
.tab .close { /* move close button to right and always show */ display: inline !important; order:1 !important; } .tab .tab-audio{ /* move audio button to left */ order:-1 !important; } .tab .favicon{ /* always show favicon, on Mac it disappears when you mouseover */ display: inline !important; margin-left: 6px !important; }
See this post for instructions how to create a custom.css file on Mac:
https://vivaldi.net/en-US/forum/all/3073-vivaldi-ui-customisations -
Thanks! Adding my customisations to custom.css I managed to move the tab close button to the left in Linux Mint running MATE (having the same behaviour as in Mac OSX regarding hovering with the favicon). It might come a surprise to some (even to most Linux/KDE/Gnome/etc developers) but not everyone went to Linux from Windows. I have been using GUIs for more than 3 decades, the 1st thing I do after installing an OS is moving the close window/tab widgets to the left (if I can).
.tab .close { /* move close button to the left */ order:-1 !important; } .linux:not(alt) .tab-position .tab:hover.tab:not(.button-off) .favicon,.mac .tab-position .tab:hover.tab:not(.button-off) .favicon,.tab-position .tab:hover.tab-small .close { display: none } .linux:not(alt) .tab-position .tab:hover.tab-small:not(.active) .favicon,.linux.alt .tab-position .tab:hover.tab.pinned .favicon,.mac .tab-position .tab:hover.tab-small:not(.active) .favicon,.mac .tab-position .tab:hover.tab.pinned .favicon,.tab-position .tab:hover.active.tab-small .close,.tab-position .tab:hover .close,.tab-position .tab:hover.tab.pinned .favicon { display: flex }