Modyfing width of pinned tabs only



  • I'm getting my feet wet in editing Vivaldi. I'm currently trying to get all pinned tabs to favicon only size. I've got that part working so far. My problem is the .tab-position class.
    So:
    I can set .tab.pinned to width 30px. This displays correctly. But every tab is enclosed in the .tap-position class. So the actual Size of the tab isn't changed. Only the displaying part. This keeps me from getting the flex arrangement to work.

    Can i set the width of .tab-position depending on which subclass is present? in the common.css i found lines like
    .tab-position .tab:not(.pinned)
    But this doesn't seem to work. Any tips on how to get this working?



  • I don't think CSS allows for selecting a parent based on the child. Your best bet would probably be either the :has() selector or the $subject identifier, however they're only a working draft and no-one has implementations for it yet:

    https://caniuse.com/#feat=css-has
    https://www.w3.org/TR/2011/WD-selectors4-20110929/#subject

    What your code of .tab-position .tab:not(.pinned) is doing is finding a .tab within a .tab-position which is not also .pinned. In other words, it's selecting the .tab.

    It would be possible to do it using a javascript but that's a whole other task to solve.



  • After going back and thinking about it some more, i came to the same conclusion.

    I'm happy to report though, that i found a working solution. Not displaying the Tab title on pinned tabs and setting all div's below to autosize did the trick. Some testing with the flex settings later i have a working solution. Including dynamic width and wrap around. The Solution in CSS will be attached below. Now on to the Tab Coloring ;)
    0_1504112264392_Vivaldi 1.PNG

    .tabs-left .tab-position .tab .tab-header .title {
    	width: 180px !important;
    }
    
    .tabs-left .tab-position .tab.pinned .title {
    	display: none !important;
    }
    
    .tabs-left .tab-position .tab.pinned .close {
    	display: none !important;
    }
    
    .tabs-left .tab-position .tab.pinned  .tab-header{
    	width: 30px !important;
    }
    
    .tabs-left .tab-position .tab.pinned .progress-indicator {
    	width: 30px !important;
    }
    
    .tabs-left .tab-position .tab.pinned {
    	width: auto !important;
    	flex: none !important;
    } 
    
    .tabs-left .tab-position {
    	position: initial !important;
    	width: auto !important;
    	flex: 0 0 auto !important;
    }
    
    #tabs-container.left .tab-strip {
    	display: flex !important;
    	flex-flow: row wrap !important;
    	position: initial !important;
    }
    
    #tabs-container.left .resize {
    	display: initial !important;
    }
    
    #tabs-container.left .newtab {
    	position: sticky !important;
    }


  • Edited the Code:

    • First line wasn't shown
    • Fixed "New Tab Icon" Posistion
    • limited to .tabs-left
    • deleted unneede code


  • I put this to test, seems like the pinned tabs still all need their own row when I copy the code. But if this works on your version all is fine -- glad you worked it out in the end!



  • Ahh, I found out why. The version you posted only works for tabs on the left. Maybe you should put the .tabs-left selector in front of the commands, so people don't try this on the right side. This will also prevent the code from triggering for top and bottom tabs, which really messes them up.

    You also have one empty line in there:

    .tab-position .tab {
    	
    } 
    


  • @luetage Oh man, yeah, we already talked about that... I'll add that now and will see if i can get this working on the right side too later today. Thanks for pointing this out... again :thumbsup:


  • Vivaldi Voice

    Would be nice to have in settings of Vivaldi choosing the width of PIN tabs perhaps from few preset figures.



  • @rudric You can change it in my CSS Code.

    .tab-position .tab.pinned  .tab-header{
    	width: 60px !important;
    }
    
    .tab-position .tab.pinned .progress-indicator {
    	width: 60px !important;
    }
    

    Just change the pixel value. For proper "sizing":
    the tab header is set to 180px. The favicon is 30px. You can do the math to get however many or fev pinns per row as you want.
    0_1504197081624_Vivaldi 2.PNG


  • Vivaldi Voice

    :thumbsup:



  • Just wanted to pop in to say thank you for this temporary solution!!

    While there are some minor bugs with stacked tabs, and with rearranging the pinned tabs, it works as well as I need it to.

    Hopefully this will work well enough until a true solution is implemented by the Vivaldi Team. If not, maybe I'll start diving into the CSS myself and start playing around a bit more.


Log in to reply
 

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