Adressbar top autohide bookmarks



  • So for those who want adressbar above tabbar, like you know, llogic peoples, with autohide bookmark here is an unclean one who autohide bookmarks but can't type anything in the adressbar and I'm tired of trying to do something who could take like 5 minutes for a css "expert"...

    #header {
        position: sicky;
    	background: none;
    	z-index: 0;
    }
    .toolbar-addressbar {/* adressbar settings*/
        position: relative !important;
    	margin-top: 40px;
        margin-left: 30px;
        margin-bottom: 60px;
    	padding-bottom: -50px;
    	width: 1500px;
    	height: 22px;
    	z-index: 1
    	background: none;
    	}
    #browser.address-top.tabs-top #main {
        margin-top: -70px;/* change the adressbar height, higher make it lower*/
    }
    .bookmark-bar{
    	position: fixed !important;
    	top: 30px;
    	width: 100%;
    	height: 22px;
    	z-index: 99;
    }
    
    #browser.address-top.tabs-top #tabs-container.top {
        top: 30px;/* change the tabbar height, higher make it lower*/
        position: relative;
        z-index: 999;/* zindex tabbar*/
        padding-top: 10px;/* main window height, lower make it lower*/
        height: 20px;
    	}
    #browser.address-top.tabs-top #titlebar,
    #browser.address-top.tabs-off #titlebar,
    #tabs-container .newtab,
    #tabs-container .sync-and-trash-container,
    .topmenu button.vivaldi-horizontal-icon,
    #header {
        z-index: 1;
    }
    .toolbar-addressbar {/* adressbar settings*/
        
    	margin-top: 40px;
        margin-left: 30px;
        margin-bottom: 30px;
    	padding-bottom: 0px;
    	width: 1500px;
    	height: 22px;
    	z-index: 9;
    	}
    #browser.address-top.tabs-top #main {
        margin-top: -70px;/* change the adressbar height, higher make it lower*/
    }
    
    }
    
    #browser.address-top.tabs-top #tabs-container.top {
        top: 25px;/* change the tabbar height, higher make it lower*/
        position: relative !important;
        z-index:0;/* zindex tabbar*/
        padding-top: 0px;/* main window height, lower make it lower*/
        height: 2px;
    	}
      /*Auto hide bookmark bar*/
    .toolbar{
    	z-index: 4;
    }
    
    .toolbar.toolbar-addressbar {
        background-color: #f6f6f6;
    }
    
    .bookmark-bar{
    	position: fixed !important;
    	top: 70px;
    	width: 100%;
    	transform: translateY(-100%);
    	transition: transform 0.2s !important;
    	z-index: 1;
    }
    
    .bookmark-bar:hover{
    	transform: translateY(0);
    }
    
    .toolbar:hover ~ .bookmark-bar{
    	transform: translateY(0);
    }
    
    #header:hover ~ #main .bookmark-bar{
    	transform: translateY(0);
    }
    
    .webpanel-header{
    	z-index: 0;
    }
      
    .tabs-container {
    transition: 0s;  /* zero it if you don't want to add a fade */
    transition-delay:0s; /* delay will last for 2 seconds */
    }
    
    .tabs-container:hover {
    transition-delay:0s; /* the delaying happens here */
    }
    	#PersonalToolbar:hover
    


  • 0_1565266297905_Video_1565271004.gif

    /* Remove header */
    #header {
        min-height: 0;
        z-index: auto;
    }
    /* Keep Vivaldi menu button + Window buttons */
    .vivaldi,
    .window-buttongroup {
        z-index: 999;
    }
    /* Vivaldi menu button position */
    .vivaldi {
        position: relative !important;
        top: -5px !important;
    }
    /* Keep horizontal menu */
    .topmenu {
        position: absolute;
    }
    /* Horizontal menu position */
    .topmenu>nav {
        left: -28px;
        top: 4px;
    }
    .toolbar-addressbar {
        position: relative !important;
    	z-index: 99;
    	margin-top: 29px;
        margin-left: 30px;
        margin-bottom: 40px;
    	padding-bottom: 0px;
    	width: 1500px;
    	height: 22px;
    }
    #browser.address-top.tabs-top #main {
        margin-top: -70px;
    }
    #browser.address-top.tabs-top #tabs-container.top {
        position: relative;
        z-index: 999;
        top: 23px;
        margin-top: 1px;
        padding-top: 10px;
        height: 18px;
    }
    .bookmark-bar{
    	position: fixed !important;
    	z-index: 1;
    	top: 63px;
    	height: 22px;
    	width: 100%;
    	transform: translateY(-100%);
    	transition: transform 0.2s !important;
    }
    /*Auto hide bookmark bar*/
    .bookmark-bar:hover{
    	transform: translateY(0);
    }
    
    .toolbar:hover ~ .bookmark-bar{
    	transform: translateY(0);
    }
    
    #header:hover ~ #main .bookmark-bar{
    	transform: translateY(0);
    }
    .webpanel-header{
    	z-index: 0;
    }
      .tabs-container {
    transition: 0s;  /* zero it if you don't want to add a fade */
    transition-delay:0s; /* delay will last for 2 seconds */
    }
    .tabs-container:hover {
    transition-delay:0s; /* the delaying happens here */
    }
    #PersonalToolbar:hover
    

    "Final" version most of the code come from contributors of the forum but don't remember the names.



  • @Hytnex - thats excellent - have been trying to achieve the tabs under the address bar - managed it but always had a space at the top for the other buttons

    couple of things dont work for me - the address bar is too wide and blocks the minimise button - guess thats a screen res thing - i just change it to a lower number or a % - not sure if that is better for all screen res

    .toolbar-addressbar {
        position: relative !important;
    	z-index: 99;
    	margin-top: 29px;
        margin-left: 30px;
        margin-bottom: 40px;
    	padding-bottom: 0px;
    	width: 88%
    	height: 22px;
    }
    

    i also see an extra line under the address box - sure i have seen a fix for that somewhere

    and one i guess you have also not found a way round - the tabbar is higher than the tabs - again i have seen something - i think its a js mod to reduce the height

    all that sounds picky - its not meant to be - am well impressed



  • Well thx I'm glad it helped, and yeah was wondering how it would act on different screen size, guess there is an automatic way to fix that, as for minimised window.

    Indeed tried many things but haven't find a way to change tabs height with css only.

    In my first post i added some comments in the code that might help you even though some might be cryptic or useless, i believe for the "extra line under the adress box" you want to change top value in :

    #browser.address-top.tabs-top #tabs-container.top {
        position: relative;
        z-index: 999;
        top: 23px;
    

    and you will have to change top value for bookmarkbar accordingly

    .bookmark-bar{
    	position: fixed !important;
    	z-index: 1;
    	top: 63px;
    


  • Ok think i saw what you were talking about and actually the problem was coming from margin/padding it might be not optimised... but looks a bit better.
    What i have problem with is to center the adressfield/searchfield so that the letters don't get cut and it aligns with the other adressbar elements, tried some change in the html but no chance so far...and haven't find any simple way to change elements width depending on screensize.(for reference it works on a 22" widescreen)

    /* Remove header */
    #header {
        min-height: 0;
    	z-index: auto;
    }
    /* Keep Vivaldi menu button + Window buttons */
    .vivaldi,
    .window-buttongroup {
        z-index: 999;
    }
    /* Vivaldi menu button position */
    .vivaldi {
        position: relative !important;
        top: -5px !important;
    }
    /* Keep horizontal menu */
    .topmenu {
        position: absolute;
    }
    /* Horizontal menu position */
    .topmenu>nav {
        left: -28px;
        top: 4px;
    	}
    .toolbar-addressbar {
        position: relative !important;
    	z-index: 99;
    	margin-bottom: 32px;/* main window height*/
    	padding-bottom: 0px;
    	margin-top: 40px;
        margin-left: 30px;
    	width: 1500px;
    	height: 22px;
    }
    #browser.address-top.tabs-top #main {
        margin-top: -70px;
    }
    #browser.address-top.tabs-top #tabs-container.top {
        position: relative;
        z-index: 999;
        width: 100%;
    	top: 25px;
        margin-top: 1px;
        padding-top: 0px;
    	margin-bottom: 0px;
    	padding-bottom: 0px;
        height: 22px;
    }
    .bookmark-bar{
    	position: fixed !important;
    	z-index: 1;
    	top: 52px;
    	height: 22px;
    	width: 100%;
    	transform: translateY(-100%);
    	transition: transform 0.2s !important;
    }
    /*Auto hide bookmark bar*/
    .bookmark-bar:hover{
    	transform: translateY(0);
    }
    .toolbar:hover ~ .bookmark-bar{
    	transform: translateY(0);
    }
    #header:hover ~ #main .bookmark-bar{
    	transform: translateY(0);
    }
    .webpanel-header{
    	z-index: 0;
    }
    .tabs-container {
        transition: 0s;  /* zero it if you don't want to add a fade */
        transition-delay:0s; /* delay will last for 2 seconds */
    }
    .tabs-container:hover {
        transition-delay:0s; /* the delaying happens here */
    }
    #PersonalToolbar:hover
    


  • @Hytnex - set a gap on the right so that it fills to that point

    .toolbar-addressbar {
        position: relative !important;
    	z-index: 99;
    	margin-top: 32px;
            margin-left: 30px;
            margin-bottom: 40px; 
    	padding-bottom: -5px;
    /*	width: 88%; */
    	padding: 0 140px 0 0;
    	height: 24px;
    }
    

Log in to reply
 

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