[Tutorial] How to disable specific CSS code during Editor mode

[dude99]

Some CSS mod will break the Editor mode GUI & prevent proper Drag & Drop button between toolbar containers. Here is a simple CSS code you can apply to disable a full line of code temporary during Editor mode, just insert it in the beginning of any line of code you want to disable during Editor mode:

#app:not(:has(.toolbar-editor)) 

or

#browser:not(:has(.toolbar-editor)) 

NOTE: Pls enable chrome://flags/#enable-experimental-web-platform-features for this code to work properly.

---

This is made possible with the new :has() psuedo selector. If you have other awesome ideas & tricks about :has(), please don't be shy, feel free to share it with the community!

Happy modding!

[dude99]

Example of this piece of code in Automate Status Bar (demo above): https://forum.vivaldi.net/post/259761

---

---

---

More example of it's usage in Automate Mainbar (demo above):

.address-top:not(:has(.toolbar-editor)) .toolbar-mainbar {margin-bottom: -34px; transition: margin-top .1s ease-out 0s !important;}

.address-top.hasfocus:not(:has(.toolbar-editor)) #header:not(:hover) + #main:is(:hover, :focus-within) > .mainbar:not(:focus-within):not(:hover):not(:has(.button-pressed)) > .toolbar-mainbar {margin-top: -34px; transition: margin-top .1s linear .6s !important;}

/* drag & drop when mainbar is hidden */
.address-top.hasfocus #header:not(:hover) + #main:is(:hover, :focus-within) > .mainbar:not(:focus-within):not(:hover) input:is(.vivaldi-addressfield, .vivaldi-searchfield) {height:35px !important; transition: height 0s .7s !important;}

Noticed I didn't use #app or #browser in this example, because .address-top is a "top level" class which attached to #browser, so this lazy shorthand will also work in certain situation... (only use this trick if you are creatively lazy like me LOL)

[Mrxyzl]

Awesome, this help hours of code instead

[antiquealivetw]

You are really godsend! Desperately need this auto hide feature. Reason for me to choose Vivaldi over Chrome!