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:

  • @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, add top 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.

  • @dude99

    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.

  • @dude99

    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.


Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.