Chrome-style tabs



  • EDIT: Solved!! Scroll down for the final code, or see here: https://forum.vivaldi.net/topic/36887/chrome-style-tabs/3

    crosspost from: https://forum.vivaldi.net/topic/36878/how-to-change-bookmarks-bar-colour-also-1px-border-below-address-bar/13

    😕 Sorry. Am back again... Do any of you nice people know how I could fix a 1px transparent gap that appears when "Remove Tab Spacing in Maximised Windows" is enabled?
    All the modifications you've helped me with so far work perfectly with Vivaldi's default square tabs.

    When trying to implement custom CSS for Chrome-shaped tabs, I get more 1px lines:

    Remove tab spacing enabled (note 1px transparent gap)
    remove tab spacing enabled

    Remove tab spacing disabled (note: no problem)
    remove tab spacing disabled

    When I combine it with Safari-style undertabs, it isn't present, but toptabs have the problem shown in the screenshots.

    /* Chrome-style trapezoid tabs
    ------------------------------------------------------------------------------------------------------------
    by Darren J. de Lima. 
    28/04/2019
    
    Reshapes Vivaldi's square tabs to trapezoids, like Chrome pre-v70.
    Known bugs: it ain't perfect, clipping off the ends of tabs. Also only looks good when tabs are set to top. Also tabs don't ever overlap, like Chrome did.
    */
    
    /* Clip rectangular tabs to Chrome trapezoids */
    #tabs-container.top .tab {
    	clip-path: polygon(5% 0%, 95% 0%, 100% 100%, 0% 100%);
    }
    
    /* Invert trapezoids when tabs set to bottom (I recommend my safari-style-bottom.css) */
    #tabs-container.bottom .tab {
    	clip-path: polygon(0% 0%, 100% 0%, 95% 100%, 5% 100%);
    }
    


  • With Safari-style undertabs, I have no problem:
    safari-style undertabs

    Safari Code I'm using:

    /* Safari-style bottom tabs and bookmark bar
    Source: https://www.reddit.com/r/vivaldibrowser/comments/6p4xfy/tabs_beneath_url_bar/
    Source: https://forum.vivaldi.net/topic/15834/tabs-on-bottom-for-1-8/41?page=3
    Source: https://forum.vivaldi.net/topic/23138/modding-the-address-bar-top-window-to-get-it-to-look-like-safari-browser
    
    Instructions: set Tabs and Bookmark Bar to appear at "Bottom" and set menu position to "Horizonal Menu" (Optional) and Vivaldi will look like Safari.
    
    */
    
    /* Hide header if Menu Position is "Vivaldi Button" (still accessible via Alt key). It will still show up if set to "Horizontal Menu". 
    Source: https://github.com/rafaeljvieira/vivalditricks/blob/master/Skin/Slim%20Top%20Max.md
    */
    #header {
    	min-height: 0 !important;
    	z-index: auto !important;
    }
    
    
    /* Change order of Tabs, Bookmarks Bar and Address Bar, when Tabs and Bookmark Bar are set to "Bottom": */
    #tabs-container.bottom {
        order: -1;
    /* Fix 1px gaps: */
    /* Gets rid of line bit attached to the tabs. Prevents 1px hangovers on New Tab/Trash/Cloud buttons when "Apply Accent Colour to Window" is disabled. */
    	border-top: 1px; 
    /*	border-bottom: 1px; */
    }
    	/* Space above tabs */
    	/*padding-top: 1px; */
    }
    
    .bookmark-bar-top .bookmark-bar {
      order: -2;
    }
    
    .toolbar.toolbar-addressbar {
        order: -3;
    }
    
    /* Keep Tab Stacks indicator at top of tabs: Comment to switch OFF (Recommended: OFF) */
    /* Switch 
    .stacks-on.tabs-bottom .tab-strip .tab-group-indicator {
        bottom: 28px;
    }
      Switch */
      
    


  • I managed to fix it! I guess CSS clipping is a bit funky; had do set some clips to 102%. Here's the code (works with Vivaldi v2.5). This will give you Chrome Trapezoid-shaped tabs. Enjoy!!!

    /* Chrome-style trapezoid tabs
    ------------------------------------------------------------------------------------------------------------
    by Darren J. de Lima. 
    28/04/2019
    
    Reshapes Vivaldi's square tabs to trapezoids, like Chrome pre-v70.
    Known bugs: it ain't perfect, clipping off the ends of tabs.  Also tabs don't ever overlap, like Chrome did.
    */
    
    /* Note: using 102% on vertical clipping, to ensure no transparent 1px lines appear. It works! */
    
    /* Clip rectangular tabs to Chrome trapezoids */
    #tabs-container.top .tab {
    	clip-path: polygon(5% 0%, 95% 0%, 100% 102%, 0% 102%);
    }
    
    /* Invert trapezoids when tabs set to bottom (I recommend my safari-style-bottom.css) */
    #tabs-container.bottom .tab {
    	clip-path: polygon(0% 0%, 100% 0%, 95% 102%, 5% 102%);
    }
    
    /* Clipping the New Tab button to shape; applies to all the buttons (doesn't look good). Also, I can't figure out how to do a conditional check to invert the button shape direction for bottom tabs */
    /*#browser:not(.ui-transparent-tabs) .toolbar-tabbar > .button-toolbar > button {
    /*	clip-path: polygon(0% 0%, 80% 25%, 100% 102%, 0% 102%); /* Funky! (especially if you experiment with clipping other stuff ;) */
    /*	clip-path: polygon(5% 0%, 95% 0%, 100% 102%, 0% 102%); /* Less funky alternative */
    /*}
    */
    
    


  • Small bug I noticed is present (and have no idea how to fix):

    When windows are not maximised full-screen, tab stack indicators disappear. Works perfectly in full-screen mode, though... Can anyone help me?


Log in to reply
 

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