CSS to make tab icons larger

scampbll

I was trying to figure this out on my own but I'm giving up because I need to move on (I've figured out how to inspect elements in the ui and all that, but the specifics are eluding me). I've applied a few CSS tweaks, but I was hoping to figure out one to make the tab icons larger, maybe 24-30 px instead of 16. I have tabs on the left, reduced to just the icons. If I could mirror the change in the panel on the right, that would be even more awesome.

Thanks for any help.

barbudo2005

@scampbll Use this CSS:

.tab-position .tab .tab-header .favicon

{-webkit-transform:scale(1.5) !important;}

scampbll

That helps a lot, thanks! If you have a quick fix to put a little more space around them that would be lovely, but if not I can probably figure out how to adjust it from there.

Added: I figured out padding-left for the left margin, havn't figured out the text or minimum tab panel width yet.

scampbll

Second update: I've gotten this far, which looks pretty good except everything's still too crowded vertically. Obviously there's some kind of relative scaling that I haven't grasped yet. I can manually adjust tab-position to 36px and it works, but if I put that in the CSS it still comes out at 30px.

.tab-position .tab .tab-header .favicon {-webkit-transform:scale(1.5) !important; }
.tab-position .tab {padding-left:4px; padding-right:4px; padding-top:4px; padding-bottom:4px;}
#tabs-container.left, #tabs-container.right  {min-width:36px;}

scampbll

I'm giving up again. Adding

.tab-position {min-height:36px;}

fixed the individual icons, but I can't figure out how to adjust the relative position. I thought surely it was the flex-basis: 30px that showed up on .tab-position .tab .tab-header, but I was able to overwrite that in the CSS and still no change.

scampbll

Just to be clear, I'm trying to get from

to

I know it's the tab-position top element that needs to change, I just can't figure out where it's coming from, if not the flex-basis: 30px. Anybody know?

scampbll

Got it! I can't say if it's the best way, but this is working:

#tabs-container.left, #tabs-container.right  {min-width:40px;}
.tab-position .tab .tab-header .favicon {-webkit-transform:scale(1.5) !important; }
.tab-position .tab {padding-left:6px; padding-right:6px; padding-top:6px; padding-bottom:6px;}
.tab-position {position: relative; top: 0 !important; height:40px !important;}
.tab-position .tab .title {margin-left:3px;}
#tabs-container .newtab {position: relative !important; top: auto !important;}

scampbll

I updated this a little. Changed the resizing to fixed values except for SVGs, and added panel bar support (not sure if it will work on the left side, but if it doesn't you can just change ".panel-group {right: 40px !important;}" to say left). I ended up not resizing the actual web panel icons because if there's a notification icon it gets cut off. But they all have more room for clicking.

/* larger tab and panel icons */
#tabs-container {
	min-width:40px;
	}
.tab-position {
	position: relative; 
	top: 0 !important; 
	height: 40px !important;
	}
.tab-position .tab {
    padding: 2px;
	}
.tab-position .tab .tab-header {
    flex-basis: 36px !important;
    padding: 5px;
	}
.tab-position .tab .favicon {
	flex-basis: 26px;
    min-width: 26px !important;
    min-height: 26px !important;
	}
.tab-position .tab .favicon > img, .tab-position .tab .favicon > svg {
	width: 24px !important; 
	height: 24px !important
	}
.tab-position .tab .title {
	margin-left:3px;
	}
.tab-position .tab .progress-indicator {
	right: 3px; 
	bottom: 1px; 
	left: 3px;
	}
#tabs-container .newtab {
	height: 40px !important;
	position: relative !important; 
	top: auto !important;
	}
#tabs-container .button-toolbar > button {
	width: 36px;
	height: 36px;
	}
#tabs-container .sync-and-trash-container .button-toolbar > button svg, #switch .addwebpanel-wrapper > button svg, #switch > button svg {
	-webkit-transform:scale(1.25);
	}
#panels-container, #switch {
	min-width:40px;
	}
#switch > button, #switch .addwebpanel-wrapper > button {
	position: relative;
	top: 0 !important; 
	width:40px; 
	height:40px;
	}
.panel-group {
	right:40px !important;
	}

scampbll

The suggestion here can be added to resize the web panel icons. I tried 24px and that doesn't seem to cut off the notifications. Maybe what I did before was resizing the notifications, too.

scampbll

The 3.6 update broke my original code, probably related to the new tab functionality. Here's a revision that works for me, but probably breaks a lot if you have any other layout. Purely brute force, and I disabled the ability to resize the tab bar (something I'd been meaning to do anyway because I was always catching it by accident) because I didn't have time to iron out that particular issue.

#tabs-tabbar-container, #tabs-container, .tab-strip {
	min-width:40px !important;
	max-width:40px !important;
	}
.tab-position {
    height: 40px !important;
    position: relative;
    --PositionY: 0px !important;
	}
.newtab {
	top: 0px !important;
	left: 2px !important;
	}	
.tab-position .tab {
    padding: 2px;
	}
.tab-position .tab .tab-header {
    padding: 5px;
	flex-basis: 40px !important;
	}
.tab-position .tab .favicon {
    min-width: 26px !important;
    min-height: 26px !important;
	}
.tab-position .tab .favicon > img, .tab-position .tab .favicon > svg {
	width: 24px !important; 
	height: 24px !important
	}
.tab-position .tab .title {
	margin-left:3px;
	}
.tab-position .tab .progress-indicator {
	right: 3px; 
	bottom: 1px; 
	left: 3px;
	}
#tabs-container .button-toolbar > button {
	width: 36px;
	height: 36px;
	}
#tabs-container .sync-and-trash-container .button-toolbar > button svg, #switch .addwebpanel-wrapper > button svg, #switch > button svg {
	-webkit-transform:scale(1.25);
	}
#panels-container, #switch {
	min-width:40px;
	}
#switch > button, #switch .addwebpanel-wrapper > button {
	position: relative;
	top: 0 !important; 
	width:40px; 
	height:40px;
	}
.panel-group {
	right:40px !important;
	}
#switch button.webviewbtn img {
    width: 24px;
    height: 24px;
}

GuerinDLC

Thanks a lot that's almost exactly what i was trying to achieve !
i spent some time trying to style it on my own but there was some inline CSS positionning each tab every 30px i couldn't deal with... looks like the transform:scale method i was about to give a try tonight was the right answer actually !!

thank you for sparing me the hard work ^^

~~i might just try to add the close tab button back... even though i can double click tabs to close them...~~

edit : lol i just had to bring the close button back to the left and voilà !