Tabs | Two Rows of Text

Hadden89

// EDIT: A small revision which doesn't rely on external fonts.

Adapt font-size (small might be fine) and letter-spacing to your own tastes:

.tab-position .tab .title  {
    align-items: start; white-space: pre-line;
    line-height: 9px; height: 18px;  font-size: smaller;
    text-transform: uppercase; letter-spacing: .2px;
} 
.tab-position .tab .title:not(:has(.tab-title-edit)) {
    mask-image: none; /* better visibility on unstacked tabs */
}

Old Code:

Code was simplified a bit. I always used this with SegoeUI (MS default) but is better to install a suitable font with a fixed size like this to avoid cropped letters ( q y p g j ): https://www.freebestfonts.com/bankgothic-lt-bt-font

According to the font you choose to use, you may need to tweak some values.
.tab-position .tab .title  {
   font-family: "BankGothic Lt BT"; font-size: small;
   align-items: start; white-space: pre-line;
  line-height: 9px; height: 18px;
} 

HKayn

Great stuff!

One small suggestion: You can include the URL to the font right in the stylesheet without requiring the user to install it.

@font-face {
  font-family: BankGothicLtBT;
  src: url(https://www.freebestfonts.com/download?fn=406);
}

.tab-position .tab .title  {
	font-family: BankGothicLtBT; font-size: small;
	align-items: start; white-space: pre-line;
	line-height: 9px; height: 18px;
}

sphera

The specified upside CSS properties relate to the font.

.tab-position .tab {
	height: 60px;
}

but it works quite close, but wrong
pls, how to change the height of the tabs themselves ?

sjudenim

@sphera

That's done in 2 stages. We can increase just the tab height with this

.tab-position .tab .tab-header { flex: 0 0 60px !important; }

but we will also need to increase the container that tabs sit in to match the new height (otherwise the tabs will be cropped)

#tabs-container.top, #tabs-container.bottom {  height: 60px !important; }

The title is centered by default so using @Hadden89 's font code would be better (imo) if you are going to increase the height to make use of that space. It's worth noting that if you want to use a different font you will most likely need to adjust the line-height as well as the height

sphera

@sjudenim
Thank you, I'm already close to my dream (Multi-line tabs names).

I can't understand what the property is responsible for

#tabs-container.top, #tabs-container.bottom {  height: 60px !important; }

All of its changes occur somewhere outside of visibility.
2. Which property is responsible for the height of the preview ?

sjudenim

@sphera said in Tabs | Two Rows of Text v2:

@sjudenim
Thank you, I'm already close to my dream (Multi-line tabs names).

I can't understand what the property is responsible for
#tabs-container.top, #tabs-container.bottom {  height: 60px !important; }
All of its changes occur somewhere outside of visibility.
2. Which property is responsible for the height of the preview ?

That is to increase the tab container for tabs (on top as well as on the bottom) in order to accommodate the new tab size.
I took a quick peak and found this selector #vivaldi-tooltip .tooltip .tooltip-item .thumbnail-image . Seems like that would be it but I didn't test it. It has a max-height value so you will need add !important after your value to override it.

sphera

@sjudenim said in Tabs | Two Rows of Text v2:

.tooltip

most likely, this is a preview in the hint. And what is the selector in preview under tab names ?
the height of the entire container tab name + preview -- does not change. , it is constant. How to increase its height ?

Hadden89

@Hadden89 New version which use text-transform to uppercase the default font.
Of course, you can still add your font family from the OS if you will (better sans-serif).