Skip to content

Instantly share code, notes, and snippets.

@codemedic
Last active July 14, 2023 13:56
Show Gist options
  • Save codemedic/f11cc460b8d9544f9afc to your computer and use it in GitHub Desktop.
Save codemedic/f11cc460b8d9544f9afc to your computer and use it in GitHub Desktop.
CSS for KDE Konsole minimal, lighter, dark tabs
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));
}
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;
}
@Acemond
Copy link

Acemond commented Nov 5, 2019

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

@sachaz
Copy link

sachaz commented Apr 2, 2020

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

@kogaba
Copy link

kogaba commented Apr 30, 2022

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

@bay-systems
Copy link

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;
}

@codemedic
Copy link
Author

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.

@codemedic
Copy link
Author

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
Copy link
Author

codemedic commented Mar 29, 2023

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

font-weight: bold;

not work for me.

@roachsinai Could it be your font?

@codemedic
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment