CSS for KDE Konsole minimal, lighter, dark tabs

konsole-with-palette-colours.css

QTabBar,
QTabBar::tab
{
    font-family: "Noto Sans";
    font-size: 11px;
    height: 16px;
    padding: 2px;
    border: 0px;
    border-bottom: 3px solid palette(dark);
    background-color: palette(dark);
    color: palette(text);
}

QTabBar::tab:hover
{
    text-decoration: underline;
}

QTabBar::tab:selected
{
    font-weight: bold;
    background-color: palette(window);
    border: 0px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 palette(window), stop: 0.85 palette(window), stop: 1 palette(highlight));
}

konsole.css

QWidget, QTabWidget::pane, QTabWidget::tab-bar {
    background-color: rgb(45, 45, 45);
}
QTabBar::tab {
    color: rgb(120, 120, 120);
    background-color: rgb(45, 45, 45);
    font-size: 10px;
    height: 25px;
    padding: 0px;
    border: 0px;
}
QTabBar::tab:selected, QTabBar::tab:hover {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #1e5799, stop: 0.01 #2989d8, stop: 0.11 rgb(45, 45, 45));
    color: #4F89CC;
}

screenshot.png

How to get these settings activated? I found my konsolerc file here: ~/.kde/share/config/konsolerc , but how to connect the two files? Thanks.

Edit: Found it! Settings -> Configure Konsole... -> TabBar, and there specify the user-defined stylesheet.

Thank you for this! I was wondering for a long time how to make the tab bar thinner. GitHub is a really cool way to share this config info.

I have a revised version with use palette-colours; konsole-with-palette-colours.css.

Do you know how to write a selector for a tab with unread data?

@jabbalaci Is still possible to do that? I can't find that settings

Is it possible to distinguish between tabs in which a process is running and tabs that are currently idle? Maybe by defining a css-logic that applies whenever the string "bash" is found in the tab title?

What does palette() mean there?

@rubyFeedback qt palette.

https://gist.github.com/codemedic/f11cc460b8d9544f9afc#file-konsole-with-palette-colours-css-L21, this line

font-weight: bold;

not work for me.

Hey!

This is GREAT info. THANKS!

How would one change the fonts, etc. at the top of the konsole? You know, where "File", "Edit", etc. are shown?

Best regards,

George...

How do you know the different possible variables to pass to the "palette()" method in the CSS file? Are there any other options?

thanks using this !
Is a way to reduce the width of the vertical scroll bar ?

Thank you. If anybody have a white line on top, use this:
QTabBar
{
qproperty-drawBase: 0;
}

Thanks for this gist. Very helpful. There isn't a required location to install the CSS but for what it's worth I use: .kde/share/config/konsole.css I like the condensed font so you can sqeeze more text into tabs.

Here's my variant:

QTabBar::tab {
    font-family: Noto Sans;
    font-style: SemiCondensed Light;
    font-weight: 400;
    font-size: 8pt;
    height: 14px;
    min-width: 35px;
    max-width: 120px;
    padding: 3;
    border: 0;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}   
QTabBar::tab:selected {
    background: rgb(76, 56, 83);
    color: rgb(255, 255, 255);
    font-weight: 600;
}

thanks using this ! Is a way to reduce the width of the vertical scroll bar ?

@sachaz Sorry. I am one of those who dislike scrollbars in their terminal. I have it turned off.

How do you know the different possible variables to pass to the "palette()" method in the CSS file? Are there any other options?

@Acemond Give this a try. Sorry for the (very) late reply.

codemedic/f11cc460b8d9544f9afc#file-konsole-with-palette-colours-css-L21, this line

font-weight: bold;

not work for me.

@roachsinai Could it be your font?

What does palette() mean there?

@rubyFeedback palette here is qt palette. In effect, it gives us a way to refer to colours from the current theme / colour scheme set by the DE.