Add new row for Extensions | Vivaldi
Mon Nov 29 2021 10:58:16 GMT+0000 (Coordinated Universal Time)
Saved by
@pirate
/* multi-row extensions toolbar */
.address-top .toolbar-extensions {position: absolute; top: 34px; left: unset !important; right: 3px !important; box-shadow: 4px 0 var(--colorBg); display: flex; flex-flow: row wrap; max-width: 100%; border-radius: 0 0 0 var(--radius); z-index:0; transition: visibility 0s .1s !important;}
.address-top #header:not(:hover) ~ #main .UrlBar:not(:focus-within):not(:hover) .toolbar-extensions:not(:focus-within):not(:hover) {visibility: hidden; transition: visibility 0s .7s !important;}
.address-top.color-behind-tabs-off .toolbar-extensions {box-shadow: 4px 0 var(--colorAccentBg);}
.toolbar-extensions:not(:focus-within):not(:hover) {box-shadow: none; opacity: .5; background: transparent;}
.toolbar-extensions .ExtensionIcon--Hidden {order:1; background: transparent;}
.toolbar-extensions .ExtensionIcon--Hidden:hover {border-radius: 50%; background: transparent; transition: .3s ease-out !important;}
.toolbar-extensions > .button-toolbar:not(.ExtensionIcon) {order:99;}
.toolbar-extensions:after {display:none !important;}
content_copyCOPY
IMHO current extension buttons wrapper layout design are very broken when there are too many active extension buttons, it either shrink the addressfield into unusable state or cramp all extension buttons into inaccessible mess... LOL
Drop down menu is only a bandage solution, because you will still need to hide most of the active extension buttons most of the time, & require extra clicks to access 'em.
2ndRowExtensionButtons.gif
That's why I made a CSS mod to move the extension buttons wrapper to 2nd row, directly bottom to addressbar, it will wrap to multiple rows when it's overflowed. It only reveal when you mouseover/focus on the addressbar, else it will be semi-transparent or completely hidden, & only applicable to top position addressbar:
https://forum.vivaldi.net/topic/67096/add-an-option-to-display-extensions-on-the-next-line
Comments