How to enable drag & drop into hidden addressfield/searchfield?
-
I use this mod to hide the header/titlebar & addressbar during maximized window mode:
/* hide header on maximized */ #browser:not(.native):not(.horizontal-menu):not(.tabs-top).maximized #header { background-color: black; min-height: 1px; } /* show titlebar */ #browser:not(.native):not(.horizontal-menu):not(.tabs-top).maximized #header:hover #pagetitle { z-index: 1; top: 35px; opacity: 0.9; background: linear-gradient(180deg, var(--colorBg) 73%, transparent); } /* windows button mod */ #browser:not(.native):not(.horizontal-menu):not(.tabs-top).maximized .window-buttongroup button { border-top: 1px solid transparent; } #browser:not(.native):not(.horizontal-menu):not(.tabs-top).maximized #header:hover .window-buttongroup button.window-minimize { border-top: 1px dotted gold; } #browser:not(.native):not(.horizontal-menu):not(.tabs-top).maximized #header:hover .window-buttongroup button.window-maximize { border-top: 1px dotted skyblue; } #browser:not(.native):not(.horizontal-menu):not(.tabs-top).maximized #header:hover .window-buttongroup button.window-close { border-top: 1px dotted deeppink; } #browser:not(.native):not(.horizontal-menu):not(.tabs-top).maximized .window-buttongroup button.window-minimize:hover { border-top: 1px solid yellow !important; } #browser:not(.native):not(.horizontal-menu):not(.tabs-top).maximized .window-buttongroup button.window-maximize:hover { border-top: 1px solid aqua !important; } #browser:not(.native):not(.horizontal-menu):not(.tabs-top).maximized .window-buttongroup button.window-close:hover { border-top: 1px solid red !important; } /* auto-hide addressbar */ .address-top .toolbar-addressbar:after, .address-top .toolbar-mailbar:after {display: none;} .toolbar-addressbar {max-height: 0; transition: max-height 0.15s ease 0.5s !important;} #header:hover ~ #main .toolbar-addressbar, .toolbar-addressbar:hover, .toolbar-addressbar:focus-within { max-height: 35px; transition: max-height 0s !important; } .toolbar-addressbar:not(:hover) ~ .inner .webpage { transition: top 0.15s ease 0.5s !important } #header:hover ~ #main .webpage, .toolbar-addressbar:focus-within ~ .inner .webpage, .toolbar-addressbar:hover ~ .inner .webpage { top: -34px; transition: top 0s ease 0s !important } /* always show pageload indicator */ .addressfield .pageload.progressing .pageload-indicator { position: fixed; z-index: 2; width: 100%; height: 3px; border-radius: 0; opacity: 1 !important; background-color: transparent; } .addressfield .pageload:not(.unstarted).progressing .pageload-indicator::-webkit-progress-value { background-image: repeating-linear-gradient(145deg, DodgerBlue, DodgerBlue 5px, LightSkyBlue 5px, LightSkyBlue 10px); box-shadow: 0 0.5px 0 white inset; transition: width 0.4s !important; }
The problem is i can't drag & drop link or webpage item into the addressfield/searchfield anymore, because when dragging an item Vivaldi won't activate :hover function on the header, which then won't reveal the addressbar for drag & drop.
So anyone have any idea how to solve this problem?
-
Have you written the mod yourself? If not I'd suggest you post your question in the original thread, then the author will be notified. -- Or mention them.
-
Do you mean that the Hover state isn't set when a drag operation is in progress? I can't test or check this right now, but that sounds like an engine bug. I would expect the cursor to always initiate hover events.
-
@luetage Yes, i wrote these codes myself. Have tried multiple versions, but all of 'em also no longer react to drag & drop after modding.
@lonm I'm not an CSS expert but the tab bar also have the same problem. Once i mod auto-hide function into 'em then they all no longer react to drag & drop. Not sure if this is a bug or Vivaldi simply doesn't support auto-hide function officially...
-
Finally, i manage to made drag & drop works on tabbar but still unable to drop item into intended zone on the tabbar, cuz the hidden tabbar won't show up!
/* automate tabbar */ #tabs-container.left, #tabs-container.right { position: absolute; z-index: 1; height: 100vh; min-width: 276px; background-color: transparent; visibility: hidden; transition: background-color 0.1s ease 0.5s, visibility 0s ease 0.6s !important; } #tabs-container:hover, #tabs-container:focus-within {background-color: var(--colorBg); visibility: visible; transition: background-color 0.1s ease 0s, visibility 0s ease 0s !important;} #tabs-container.left .fullheight {visibility: visible; left: 0;} #tabs-container.right .fullheight.alternate {visibility: visible; right: 0; left: initial;} #tabs-container.right {right: 0;} .tab-strip {overflow-y: hidden !important;} .tab-strip:hover {overflow-y: auto !important;} #tabs-container:not(.top):not(.bottom) .sync-and-trash-container { order: -1; }
Please VOTE if you want mouseover to work during drag & drop item from webpage to browser GUI: https://forum.vivaldi.net/post/192858
-
@dude99 Ok, take my upvote. I just tried the mod but it does strange things to my setup. I put the tab bar on the left to test it and it overflows into the address bar when shown. But yeah, can't really judge since I'm on osx.
-
@luetage
Oh, addtop 0; bottom 0;
in#tab container
to fix that.
I'm too lazy to add those cuz it kinda works on my setup. -
@dude99 Nah, it's ok, I'm too lazy to test it again ^^
If it works for you, all is fine. -
When something is being dragged it becomes the top most element, so I don't think you will be able to trigger the tab bar. Have you tried adding a
transition-delay
to keep it open longer so you can drag something onto it after it's been triggered? -
@sjudenim I notice this behavior on IMDb website, i drag a link over People who liked this also liked... section, those movie poster didn't show the movie details during d&d, but normally it will switch the detail section to the movie which the pointer mouseover.
My setup for hiding delay is 0.6s But it's too short for drag&drop. I know we can increase the delay to much longer, but that would be counter productive most of the time when i don't do drag& drop, or simply want to access the toolbar & then get back into browsing ASAP.
I guess Drag & drop state always ignoring mouseover event is a FEATURE? That's kinda weird decision. What's the purpose of such behavior?
Thanks for sharing idea & info.
-
To be fair, what we are doing to the tab bar is not the intended behaviour by the dev team. So I don't think you can blame them when our hacks/mods don't fully function the way we want them to.
There might be a way to create a trigger using
js
if dragged items have a defined selector but I wouldn't know how to begin to go about looking into that -
Yeah i know autohide isn't a supported feature, that's why many user have demanding it in feature request forum for years. Until dev support autohide feature, we have to resort to mods.
Anyway, is there any CSS syntax refer to drag or drop state, like
:hover
? If there is indeed a function for that then we can simply add drag/drop state alongside:hover
to trigger the "show toolbar" function during d&d. -
Update for v2.10, optimized for minimal GUI with addressbar on top & vertical tabbar setup, not tested on horizontal tabbar...
/* automate addressbar */ .address-top .toolbar-addressbar {position:absolute; left:1px; right: 1.5px; top:0; box-shadow: 2px 0 var(--colorAccentBg), -1px 0 var(--colorAccentBg); transition: top 0s 0s !important;} .address-top #header:not(:hover) ~ #main .toolbar-addressbar:not(:focus-within):not(:hover) {top:-34px; transition: top .1s linear .5s !important;} /* drag & drop */ #header:not(:hover) ~ #main .toolbar-addressbar:not(:focus-within):not(:hover) .addressfield input {height:40px !important; transition: height 0s .6s !important;} #header:not(:hover) ~ #main .toolbar-addressbar:not(:focus-within):not(:hover) .searchfield input {height:31px; transition: height 0s .6s !important;}
This mod will add 2px of invisible drop zone below the header when Addressbar is hidden during normal window.
If you want more display area for webpage when maximized window, this mod will give you extra 60px horizontal screen space by hiding header, titlebar, & addressbar when not needed:/* compact header */ #browser:not(.native):not(.horizontal-menu):not(.tabs-top).maximized #header {background:black; min-height:1px;} /* automate titlebar */ #browser:not(.native):not(.horizontal-menu):not(.tabs-top).maximized #header:hover #pagetitle {z-index:1; width: fit-content; height:26px; padding:5px; margin: -1px auto; border-radius: var(--radius); background-color: var(--colorBgIntenser);} .maximized #header:hover ~ #main > .toolbar-addressbar > .addressfield input {opacity:.15;} /* sliding title */ #header:hover #pagetitle {animation: slide 15s ease-in 1.5s infinite !important;} @keyframes slide { 0%, 91%, 100% {transform:translateX(0); overflow:visible;} 89%, 90% {transform:translateX(-80%);}} /* compact windows button */ #browser:not(.native):not(.horizontal-menu):not(.tabs-top).maximized #header:hover button.vivaldi {border-top: 1px dashed white; left: -6px;} #browser:not(.native):not(.horizontal-menu):not(.tabs-top).maximized .window-buttongroup button {border-top: 1px solid transparent;} #browser:not(.native):not(.horizontal-menu):not(.tabs-top).maximized #header:hover .window-buttongroup button.window-minimize {border-top: 1px solid white; margin-right: 2.5px;} #browser:not(.native):not(.horizontal-menu):not(.tabs-top).maximized #header:hover .window-buttongroup button.window-maximize {border-top: 1px solid cyan; margin-right: 2.5px;} #browser:not(.native):not(.horizontal-menu):not(.tabs-top).maximized #header:hover .window-buttongroup button.window-close {border-top: 1px solid red;} #browser:not(.native):not(.horizontal-menu):not(.tabs-top).maximized .window-buttongroup button:hover {border-top: 1px dotted lavender !important;} #browser:not(.native):not(.horizontal-menu):not(.tabs-top).maximized .window-buttongroup button:hover:after {position:absolute; z-index:99; padding:0 6px; border-radius: var(--radiusHalf); top:5px;} #browser:not(.native):not(.horizontal-menu):not(.tabs-top).maximized .window-buttongroup button.window-minimize:hover:after {content:"Minimize"; color:gray; background: beige; right:60px;} #browser:not(.native):not(.horizontal-menu):not(.tabs-top).maximized .window-buttongroup button.window-maximize:hover:after {content:"Restore"; color:darkblue; background: aliceblue; right:30px;} #browser:not(.native):not(.horizontal-menu):not(.tabs-top).maximized .window-buttongroup button.window-close:hover:after {content:"Close"; color:firebrick; background: MISTYROSE; right:6px;} /* drag & drop for addressfield & searchfield when maximized */ .maximized #header:not(:hover) ~ #main .toolbar-addressbar:not(:focus-within):not(:hover) :is(.addressfield, .searchfield) input {animation: dnd 0s .6s forwards !important;} @keyframes dnd {to {position: fixed; margin-top: -3px;}}
Mouse over the top screen edge during maximized mode to reveal header (windows button), titlebar, & addressbar. You can drag & drop item on the top screen edge during maximized mode. Title will began to slide if you mouseover the top edge screen for over 1.5 second, this is good for very long title that can't be fully display within single screen width.
You can save even more horizontal screen space with compact statusbar mod: https://forum.vivaldi.net/post/259761
That's all... Happy New Year! -