Panel header modification



  • This is an updated repost of a recent request ---> original thread
    I had quite a bit of fun improving this further. It's about hiding the search bar and toolbar icons in the panel by default, but showing them when hovering the header. What you get from it is more vertical space for viewing content like bookmarks and notes.

    /* bookmarks panel */
    
    .panel.panel-bookmarks header:hover > .toolbar.icons {
    	display: flex;
    }
    
    .panel.panel-bookmarks header:hover h1 {
    	color: #fd3563;
    }
    
    .panel.panel-bookmarks header {
    	margin-bottom: -9px;
    	transition: margin 0.4s;
    	transition-timing-function: linear;
    }
    
    .panel.panel-bookmarks header:hover {
    	margin-bottom: 0px;
    }
    
    .panel.panel-bookmarks .toolbar.icons {
    	display: none;
    }
    

    picture

    0_1498264898739_panel-header.png


    This can be done for all panels, but the bookmarks panel is the obvious candidate for the treatment.
    The other patients: #downloads.panel, #notes-panel.panel, #history-panel.panel



  • Same as above, but simplified and with smoother transition.

    .panel.panel-bookmarks header:hover > .toolbar.icons {
    	max-height: 68px;
    	margin-bottom: 0px;
    	opacity: 1;
    }
    
    .panel.panel-bookmarks header:hover h1 {
    	color: #fd3563;
    }
    
    .panel.panel-bookmarks .toolbar.icons {
    	max-height: 0px;
    	margin-bottom: -9px;
    	opacity: 0;
    	transition: max-height 0.5s ease-out, opacity 0.5s ease-out, margin 0.5s ease-out;
    }
    


  • Looks good, thanks for sharing



  • Latest snapshot 1.11.890.4 changed the spacing of the panel headers. New code:

    .panel.panel-bookmarks header:hover > .toolbar.icons, #notes-panel.panel header:hover > .toolbar.icons {
    	max-height: 68px;
    	margin-bottom: 0px;
    	opacity: 1;
    }
    
    .panel.panel-bookmarks header:hover h1, #notes-panel.panel header:hover > h1 {
    	color: #fd3563;
    }
    
    .panel.panel-bookmarks .toolbar.icons, #notes-panel.panel .toolbar.icons {
    	max-height: 0px;
    	margin-bottom: -6px;
    	opacity: 0;
    	transition: max-height 0.5s ease-out, opacity 0.5s ease-out, margin 0.5s ease-out;
    }
    


  • They changed the panel headers up again in 1.11.904.3. This time I fought back harder ^^

    .panel header {
    	padding-top: 9px;
    }
    
    .panel header h1 {
    	margin-bottom: 5px;
    }
    
    .panel.panel-bookmarks header:hover > .toolbar.icons, #notes-panel.panel header:hover > .toolbar.icons {
    	max-height: 68px;
    	margin-bottom: 0px;
    	opacity: 1;
    }
    
    .panel.panel-bookmarks header:hover h1, #notes-panel.panel header:hover > h1 {
    	color: #fd3563;
    }
    
    .panel.panel-bookmarks .toolbar.icons, #notes-panel.panel .toolbar.icons {
    	max-height: 0px;
    	margin-bottom: -7px;
    	opacity: 0;
    	transition: max-height 0.5s ease-out, margin 0.5s ease-out,  opacity 0.5s ease-out;
    }
    


  • Bah, more arbitrary changes by the V team. Thanks for staying on top of it


Log in to reply
 

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