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

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.