Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

QDockWidgets border distortion in Linux



  • Hi!

    Please tell me how to solve this problem: different operating systems display the QDockWidgets borders differently:

    Normal border (OS Windows 8)

    normal_border.png

    Distorted border (OS Linux)

    distorted_border.png

    Here is the StyleSheet that I applied.

    /**************************************************************************
    **  QDockWidget
    **************************************************************************/
    
    QDockWidget {
        font-size: 8pt;
        titlebar-close-icon: url(:/resources/icons/16x16/cil-x.png);
        titlebar-normal-icon: url(:/resources/icons/16x16/cil-pin.png);
        color: #A0A5AA;
    }
    QDockWidget::title {
        padding-left: 12px;
        padding-top: 3px;
        padding-bottom: 3px;
        text-align: center left;
        border-left: 1px solid #32363F;
        border-top: 1px solid #32363F;
        border-right: 1px solid #32363F;
        background: #25272C;
    }
    QDockWidget::close-button,
    QDockWidget::float-button {
        icon-size: 20px;
        padding-top: 0px;
        padding-bottom: 0px;
        border: none;
        background: #25272C;
    }
    QDockWidget::close-button:hover,
    QDockWidget::float-button:hover {
        background: rgb(52, 59, 72);
    }
    QDockWidget::close-button:pressed,
    QDockWidget::float-button:pressed {
        background-color: rgb(85, 170, 255);
    }
    QDockWidget::close-button {
        min-width: 20px;
        min-height: 20px;
        width: 20px;
        height: 20px;
        top: 1px; bottom: 0px; right: 1px;
        subcontrol-position: center right;
        subcontrol-origin: margin;
        position: absolute;
    
    }
    QDockWidget::float-button {
        min-width: 20px;
        min-height: 20px;
        width: 20px;
        height: 20px;
        top: 1px; bottom: 0px; right: 24px;
        subcontrol-position: center right;
        subcontrol-origin: margin;
        position: absolute;
    
    }
    
    QTabBar, QDockWidget QTabBar {
        color: #A0A5AA;
    }
    QTabBar::tab, QDockWidget QTabBar::tab {
    }
    
    QTabBar::tab:top, QDockWidget QTabBar::tab:top {
        min-width: 50px;
        padding-top: 3px;
        padding-bottom: 3px;
        padding-left: 10px;
        padding-right: 10px;
        border-bottom: 1px solid #32363F;
        background-color: #292930;
    }
    QTabBar::tab:top:selected, QDockWidget QTabBar::tab:top:selected {
        padding-top: 3px;
        padding-bottom: 3px;
        padding-left: 10px;
        padding-right: 10px;
        margin-bottom: -1px;
        border: 1px solid #32363F;
        background-color: #292930;
    }
    QTabBar::tab:top:!selected, QDockWidget QTabBar::tab:top:!selected {
        background-color: #292930;
    }
    
    QTabBar::tab:bottom, QDockWidget QTabBar::tab:bottom {
        min-width: 50px;
        padding-top: 3px;
        padding-bottom: 3px;
        padding-left: 10px;
        padding-right: 10px;
        border: none;
        background-color: #292930;
    }
    QTabBar::tab:bottom:selected, QDockWidget QTabBar::tab:bottom:selected {
        padding-top: 3px;
        padding-bottom: 3px;
        padding-left: 10px;
        padding-right: 10px;
        margin-top: -1px;
        border-left: 1px solid #32363F;
        border-right: 1px solid #32363F;
        border-bottom: 1px solid #32363F;
        border-top: none;
        background-color: #25272C;
    }
    QTabBar::tab:bottom:!selected, QDockWidget QTabBar::tab:bottom:!selected {
        background-color: #292930;
    }
    

    Thanks!


  • Lifetime Qt Champion

    Hi
    Do you mean when they are floating ?



  • @mrjj

    No, on the contrary, it happens when they are docked.


  • Lifetime Qt Champion

    @Helge1980
    Hi
    Ok i tried your stylesheet fast in my linux mint box with Qt5.9 and didn't see anything like that.

    What Qt version and Linux distro do you see this in ?



  • @mrjj

    I tested on Manjaro Linux, Qt5.15


  • Lifetime Qt Champion

    @Helge1980
    Ok, QDockWidget did get an update at some point.
    Maybe why i dont see it in mine.

    So with no style sheet the borders look normal ?

    it might be the padding. it might need more padding on that linux.



  • @mrjj

    If I disable styles, it looks like this:

    without_theme.png

    Please tell me, if I need to increase padding, where exactly? I want to see if it works


  • Lifetime Qt Champion

    @Helge1980
    Hi
    Ok so it must be the stylesheet somehow.
    I mean the padding-xxxxx ones.
    Not sure which. Installing a Manjaro linux to try the stylesheet live.

    Hmm. Mine is not dark like yours. do you have a dark theme in the distro ?

    odd. mine looks nothing like yours
    alt text



  • @mrjj

    Yes, I have a dark theme enabled.

    Here's my full qss file just in case (The file is very large, so I will delete it when the topic closes.)
    The only thing I have here is my own variables are defined through the decorator "@",
    because I made my own parser for qss files.

    @mainBackground = #2C2C34;
    
    @tableBackground = #16181F;
    @tableAlternateBackground = #13151C;
    @tableRowSelectedBackground = #1C252F;
    @tableTextColor = #B4B4B4;
    @tableTextSelected = #D2D2D2;
    @tableGrid = #373C47;
    
    @frameLeftRightBackground = #292930;
    @frameLeftRightBorder = #32363F;
    @frameSourceOutputBackground = #292930;
    @frameSourceOutputText = #A0A5AA;
    @frameSourceOutputBorder = #32363F;
    @frameHintBackground = #202A30;
    @frameBottomBackground = #202A30;
    @frameHeaderBackground = #25272C;
    
    @scrollBackground = #171920;
    @scrollHandle = #1C1E26;
    @scrollAddLineSubLine = #191B22;
    
    @headerTextColor = #A0A5AA;
    @headerBackground = #1C2026;
    @headerBorder = #27272C;
    
    
    /**************************************************************************
    **  QWidget
    **************************************************************************/
    
    QMainWindow {
        background: @mainBackground;
    }
    QMainWindow::separator {
        width: 1px;
        height: 1px;
        background: @mainBackground;
    }
    /*
    QMainWindow::separator {
      background-color: @mainBackground;
      border: none;
      spacing: 0px;
      padding: 0px;
    }
    
    QMainWindow::separator:horizontal {
      width: 1px;
      margin: 0px;
    }
    
    QMainWindow::separator:vertical {
      height: 1px;
      margin: 0px;
    }
    */
    
    QWidget {
        background: @frameLeftRightBackground;
    }
    QWidget#centralwidget {
        background: #175C7F;
    }
    QWidget#widget_main {
        background: #175C7F;
    }
    
    
    /**************************************************************************
    **  QFrame
    **************************************************************************/
    
    QFrame {
        border: none;
        background-color: @mainBackground;
    }
    QFrame#frameLeft,
    QFrame#frameRight,
    QFrame#frame_preview,
    QFrame#frame_source,
    QFrame#frame_output,
    QFrame#frame_task {
        border-left: 1px solid @frameSourceOutputBorder;
        border-bottom: 1px solid @frameSourceOutputBorder;
        border-right: 1px solid @frameSourceOutputBorder;
        border-top: none;
        background-color: @frameLeftRightBackground;
    }
    QFrame#frameTaskHeader {
        border-top: 1px solid @frameSourceOutputBorder;
        background-color: @frameHeaderBackground;
    }
    
    QFrame#frame_middle,
    QFrame#frameAltTab_1,
    QFrame#frameAltTab_2
    {
        border: none;
        background-color: @mainBackground;
    }
    QFrame#frame_bottom {
        border: none;
        /*border-top: 1px solid @frameSourceOutputBorder;*/
        background-color: @frameBottomBackground;
    }
    QFrame#frame_top {
        border: none;
        background-color: @frameHintBackground;
    }
    QFrame#frameTab_1, QFrame#frameTab_2, QFrame#frameTab_3, QFrame#frameTab_4,
    QFrame#frameLeftTab_1, QFrame#frameLeftTab_2 {
        background-color: @frameLeftRightBackground;
    }
    
    
    /**************************************************************************
    **  QToolTip
    **************************************************************************/
    
    QToolTip {
        border: 1px solid #282828;
        border-radius: 2px;
        color: #ffffff;
        background-color: #1B1D23;
    }
    
    
    /**************************************************************************
    **  QMenu
    **************************************************************************/
    
    QMenu {
        background-color: #1B1D23;
    }
    QMenu::item {
        color: #EFEFEF;
        background-color: transparent;
    }
    QMenu::item:selected {
        background-color: #05282D;
    }
    
    
    /**************************************************************************
    **  QScrollBar
    **************************************************************************/
    
    QScrollBar {
        background: transparent;
    }
    QScrollBar:horizontal {
        height: 10px;
        margin: 0px 15px 0 15px;
        border: none;
        border-radius: 0px;
        background: @scrollBackground;
    }
    QScrollBar:vertical {
        width: 10px;
        margin: 15px 0 15px 0;
        border: none;
        border-radius: 0px;
        background: @scrollBackground;
    }
    QScrollBar::handle:horizontal {
        min-width: 25px;
        border-radius: 0px;
        background: @scrollHandle;
    }
    QScrollBar::handle:vertical {
        min-height: 25px;
        border-radius: 0px;
        background: @scrollHandle;
    }
    QScrollBar::add-line:horizontal {
        width: 14px;
        border: none;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
        background: @scrollAddLineSubLine;
        subcontrol-position: right;
        subcontrol-origin: margin;
        image: url(:/resources/icons/16x16/cil-caret-right.png);
    }
    QScrollBar::add-line:vertical {
        height: 14px;
        border: none;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        background: @scrollAddLineSubLine;
        subcontrol-position: bottom;
        subcontrol-origin: margin;
        image: url(:/resources/icons/16x16/cil-caret-bottom.png);
    }
    QScrollBar::sub-line:horizontal {
        width: 14px;
        border: none;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        background: @scrollAddLineSubLine;
        subcontrol-position: left;
        subcontrol-origin: margin;
        image: url(:/resources/icons/16x16/cil-caret-left.png);
    }
    QScrollBar::sub-line:vertical {
        height: 14px;
        border: none;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        background: @scrollAddLineSubLine;
        subcontrol-position: top;
        subcontrol-origin: margin;
        image: url(:/resources/icons/16x16/cil-caret-top.png);
    }
    QScrollBar::up-arrow:horizontal,
    QScrollBar::down-arrow:horizontal {
        background: none;
    }
    QScrollBar::up-arrow:vertical,
    QScrollBar::down-arrow:vertical {
        background: none;
    }
    QScrollBar::add-page:horizontal,
    QScrollBar::sub-page:horizontal {
        background: none;
    }
    QScrollBar::add-page:vertical,
    QScrollBar::sub-page:vertical {
        background: none;
    }
    
    
    /**************************************************************************
    **  QHeaderView
    **************************************************************************/
    
    QHeaderView {
        color: @headerTextColor;
        background-color: transparent;
    }
    QHeaderView::section:horizontal {
        height: 28px;
        border-top: 1px solid @headerBorder;
        border-bottom: 1px solid @headerBorder;
        border-right: 1px solid @headerBorder;
        border-radius: 0px;
        background-color: @headerBackground;
    }
    QHeaderView::section:vertical {
        border-bottom: 1px solid @headerBorder;
        /*border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;*/
        background-color: @headerBackground;
    }
    QHeaderView::up-arrow {
        width: 13px;
        height: 9px;
        subcontrol-position: center right;
        subcontrol-origin: padding;
    }
    QHeaderView::down-arrow {
        width: 13px;
        height: 9px;
        subcontrol-position: center right;
        subcontrol-origin: padding;
    }
    
    
    /**************************************************************************
    **  QTableWidget
    **************************************************************************/
    
    QTableWidget {
        outline: none;
        padding-bottom: 0px;
        border-radius: 0px;
        color: @headerTextColor;
        background-color: @tableBackground;
        selection-background-color: #1C252F;
        /*gridline-color: @tableGrid;*/
        alternate-background-color: @tableAlternateBackground;
    }
    QTableWidget::item {
        margin-left: 0px;
        margin-right: 0px;
        /*border-color: rgb(55, 60, 71);
        gridline-color: @tableGrid;*/
    }
    QTableWidget::item:selected {
        margin: 0px;
        color: @tableTextSelected;
        background-color: @tableRowSelectedBackground;
    }
    
    
    /**************************************************************************
    **  QTreeWidget
    **************************************************************************/
    
    QTreeWidget {
        outline: none;
        /*padding: 0px;
        border-radius: 0px;*/
        color: @headerTextColor;
        background-color: @tableBackground;
        alternate-background-color: @tableAlternateBackground;
    }
    QTreeWidget::item {
        min-height: 22px;
        /*margin-top: 2px 0;
        margin-bottom: 2px 0;
        margin-left: 0px 0;
        margin-right: 0px 0;*/
        margin-top: 2px;
        border-right: 1px solid @headerBorder;
        /*border: none;*/
    }
    QTreeWidget::item:selected {
        min-height: 22px;
        /*margin-top: 2px 0;
        margin-bottom: 2px 0;
        margin-left: 0px 0;
        margin-right: 0px 0;*/
        border: none;
        color: @tableTextSelected;
        background-color: #1C252F;
    }
    QTreeWidget::item:selected:active {
        min-height: 22px;
        /*margin-top: 2px 0;
        margin-bottom: 2px 0;
        margin-left: 0px 0;
        margin-right: 0px 0;*/
        border: none;
        color: @tableTextSelected;
        background-color: #1C252F;
    }
    QTreeWidget::item:selected:!active {
        min-height: 22px;
        /*margin-top: 2px 0;
        margin-bottom: 2px 0;
        margin-left: 0px 0;
        margin-right: 0px 0;*/
        border: none;
        color: @tableTextSelected;
        background-color: #1C252F;
    }
    
    
    QTreeView::branch {
        background: @tableBackground;
    }
    QTreeView::branch:has-siblings:!adjoins-item {
        background: @tableBackground;
    }
    QTreeView::branch:has-siblings:adjoins-item {
        background: @tableBackground;
    }
    QTreeView::branch:!has-children:!has-siblings:adjoins-item {
        background: @tableBackground;
    }
    QTreeView::branch:closed:has-children:has-siblings {
        background: @tableBackground;
    }
    QTreeView::branch:has-children:!has-siblings:closed {
        background: @tableBackground;
    }
    QTreeView::branch:open:has-children:has-siblings {
        background: @tableBackground;
    }
    QTreeView::branch:open:has-children:!has-siblings {
        background: @tableBackground;
    }
    
    
    QTreeWidget::branch:has-siblings:!adjoins-item {
        padding-bottom: 2px 0;
        padding-top: 2px 0;
        padding-left: 4px 0;
        border-image: url(:/resources/icons/16x16/cil-null.png) 0;
    }
    QTreeWidget::branch:has-siblings:adjoins-item {
        padding-bottom: 2px 0;
        padding-top: 2px 0;
        padding-left: 4px 0;
        border-image: url(:/resources/icons/16x16/cil-null.png) 0;
    }
    QTreeWidget::branch:!has-children:!has-siblings:adjoins-item {
        padding-bottom: 2px 0;
        padding-top: 2px 0;
        padding-left: 4px 0;
        border-image: url(:/resources/icons/16x16/cil-null.png) 0;
    }
    QTreeWidget::branch:has-children:!has-siblings:closed,
    QTreeWidget::branch:closed:has-children:has-siblings {
        padding-bottom: 2px 0;
        padding-top: 2px 0;
        padding-left: 4px 0;
        border-image: none;
        image: url(:/resources/icons/16x16/cil-arrow-right-.png);
    }
    QTreeWidget::branch:open:has-children:!has-siblings,
    QTreeWidget::branch:open:has-children:has-siblings {
        padding-bottom: 2px 0;
        padding-top: 2px 0;
        padding-left: 4px 0;
        border-image: none;
        image: url(:/resources/icons/16x16/cil-arrow-bottom.png);
    }
    
    
    /**************************************************************************
    **  QTabWidget
    **************************************************************************/
    
    QTabWidget {
        qproperty-tabPosition: North;
        color: @frameSourceOutputText;
        background-color: @frameSourceOutputBackground;
    }
    QTabWidget::tab-bar {
        alignment: left;
        background-color: @frameSourceOutputBackground;
    }
    QTabWidget::pane {
        top:-1px;
        border: 1px solid @frameLeftRightBorder;
        background-color: @frameSourceOutputBackground;
    }
    
    /*********************************************/
    
    QTabWidget#tabWidgetRight {
        qproperty-tabPosition: North;
        color: @frameSourceOutputText;
        background-color: @frameSourceOutputBackground;
    }
    QTabWidget::tab-bar#tabWidgetRight {
        alignment: left;
        background-color: @frameSourceOutputBackground;
    }
    QTabWidget::pane#tabWidgetRight {
        top:-1px;
        border: 1px solid @frameLeftRightBorder;
        background-color: @frameSourceOutputBackground;
    }
    
    /*********************************************/
    
    QTabWidget#tabWidgetSettings {
        qproperty-tabPosition: South;
        color: @frameSourceOutputText;
        background-color: @mainBackground;
    }
    QTabWidget::tab-bar#tabWidgetSettings {
        alignment: left;
        height: 0px;
        background-color: @mainBackground;
    }
    QTabWidget::pane#tabWidgetSettings {
    
        border: none;
        background-color: @mainBackground;
    }
    
    
    /**************************************************************************
    **  QCheckBox
    **************************************************************************/
    
    QCheckBox {
        spacing: 12px;
        color: #A0A5AA;
        background-color: transparent;
    }
    QCheckBox:disabled {
        spacing: 12px;
        color: #A0A5AA;
        background-color: transparent;
    }
    QCheckBox::indicator {
        width: 12px;
        height: 12px;
        border: 2px solid #5A5A5A;
        background: none;
    }
    QCheckBox::indicator:disabled {
        width: 12px;
        height: 12px;
        border: 2px solid #3C3C3C;
        background: none;
    }
    QCheckBox::indicator:checked {
        width: 12px;
        height: 12px;
        border: 2px solid #5A5A5A;
        background: none;
        image: url(:/resources/icons/16x16/cil-check-alt.png);
    }
    QCheckBox::indicator:checked:disabled {
        width: 12px;
        height: 12px;
        border: 2px solid #3C3C3C;
        background: none;
        image: url(:/resources/icons/16x16/cil-check-alt.png);
    }
    
    
    /**************************************************************************
    **  QComboBox
    **************************************************************************/
    
    QComboBox {
        padding: 0px;
        padding-left: 5px;
        border-radius: 0px;
        border: 2px solid #1B1D23;
        color: #B4B4B4;
        background-color: #1B1D23;
    }
    QComboBox#comboBoxView {
        padding: 0px;
        padding-left: 22px;
        border-radius: 0px;
        border: 2px solid #1B1D23;
        color: #B4B4B4;
        background-color: #1B1D23;
    
        background-image: url(:/resources/icons/16x16/cil-screen-desktop.png);
        background-repeat: no-repeat;
        background-position: left;
    }
    QComboBox#comboBoxMode {
        padding: 0px;
        padding-left: 22px;
        border-radius: 0px;
        border: 2px solid #1B1D23;
        color: #B4B4B4;
        background-color: #1B1D23;
    
        background-image: url(:/resources/icons/16x16/cil-layers.png);
        background-repeat: no-repeat;
        background-position: left;
    }
    QComboBox#comboBoxPreset {
        padding: 0px;
        padding-left: 22px;
        border-radius: 0px;
        border: 2px solid #1B1D23;
        color: #B4B4B4;
        background-color: #1B1D23;
    
        background-image: url(:/resources/icons/16x16/cil-low-vision.png);
        background-repeat: no-repeat;
        background-position: left;
    }
    QComboBox:disabled {
        padding: 0px;
        padding-left: 5px;
        border-radius: 0px;
        border: 2px solid #1B1D23;
        color: #62676F;
        background-color: #1B1D23;
    }
    QComboBox:hover {
        border: 2px solid #404758;
    }
    QComboBox:hover#comboBoxView,
    QComboBox:hover#comboBoxMode,
    QComboBox:hover#comboBoxPreset {
        border: 2px solid #404758;
    }
    QComboBox::drop-down {
        subcontrol-origin: padding;
        subcontrol-position: top right;
        width: 20px;
        border-left-width: 3px;
        border-left-color: #22262E;
        border-left-style: solid;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
        background-image: url(:/resources/icons/16x16/cil-arrow-bottom.png);
        background-position: center;
        background-repeat: no-reperat;
    }
    QComboBox QAbstractItemView {
        margin-top: 3px;
        margin-bottom: 3px;
        padding: 5px;
        color: #55AAFF;
        background-color: #1B1D23;
        selection-background-color: #272C36;
    }
    QComboBox QListView::item {
        min-height: 16px;
    }
    
    
    /**************************************************************************
    **  QSpinBox
    **************************************************************************/
    
    QSpinBox, QDoubleSpinBox {
        padding: 0px;
        padding-left: 5px;
        border-radius: 0px;
        border: 2px solid #1B1D23;
        color: #B4B4B4;
        background-color: #1B1D23;
    }
    QSpinBox:disabled, QDoubleSpinBox:disabled {
        padding: 0px;
        padding-left: 5px;
        border-radius: 0px;
        border: 2px solid #1B1D23;
        color: #62676F;
        background-color: #1B1D23;
    }
    QSpinBox:hover, QDoubleSpinBox:hover {
        border: 2px solid #404758;
    }
    QSpinBox::up-button, QDoubleSpinBox::up-button {
        subcontrol-origin: padding;
        subcontrol-position: top right;
        width: 20px;
        border-left-width: 3px;
        border-left-color: #22262E;
        border-left-style: solid;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
        background-image: url(:/resources/icons/16x16/cil-arrow-top.png);
        background-position: center;
        background-repeat: no-reperat;
    }
    QSpinBox::down-button, QDoubleSpinBox::down-button {
        subcontrol-origin: padding;
        subcontrol-position: bottom right;
        width: 20px;
        border-left-width: 3px;
        border-left-color: #22262E;
        border-left-style: solid;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
        background-image: url(:/resources/icons/16x16/cil-arrow-bottom.png);
        background-position: center;
        background-repeat: no-reperat;
    }
    QSpinBox QAbstractItemView, QDoubleSpinBox QAbstractItemView {
        padding: 5px;
        color: rgb(85, 170, 255);
        background-color: #1B1D23;
        selection-background-color: #272C36;
    }
    
    
    /**************************************************************************
    **  QLabel
    **************************************************************************/
    
    QLabel {
        color: #D2D2D2;
        background-color: transparent;
    }
    QLabel:disabled {
        color: @frameSourceOutputText;
        background-color: transparent;
    }
    
    QLabel#labelThumb {
        color: @frameHeaderBackground;
        font: 24pt;
        font-style: oblique;
        background-color: @frameSourceOutputBackground;
    }
    
    QLabel#label_source,
    QLabel#label_output {
        color: #DCDCDC;
        background-color: transparent;
    }
    
    
    /**************************************************************************
    **  QLineEdit
    **************************************************************************/
    
    QLineEdit {
        padding-left: 5px;
        border-radius: 0px;
        border: 2px solid #1B1D23;
        color: #DCDCDC;
        background-color: #1B1D23;
    }
    QLineEdit#lineEditGlobalTitle {
        padding-left: 20px;
        border-radius: 0px;
        border-left: 5px solid #1B1D23;
        border-top: 2px solid #1B1D23;
        border-bottom: 2px solid #1B1D23;
        border-right: 2px solid #1B1D23;
        color: #B4B4B4;
        background-color: #1B1D23;
        background-image: url(:/resources/icons/16x16/cil-tags.png);
        background-repeat: no-repeat;
        background-position: left;
    }
    QLineEdit:hover {
        border: 2px solid rgb(64, 71, 88);
    }
    QLineEdit:hover#lineEditGlobalTitle {
        border: 2px solid rgb(64, 71, 88);
    }
    QLineEdit:focus {
        border: 2px solid rgb(91, 101, 124);
    }
    QLineEdit:focus#lineEditGlobalTitle {
        border: 2px solid rgb(91, 101, 124);
    }
    QLineEdit:disabled {
        padding-left: 5px;
        border-radius: 0px;
        border: 2px solid #1B1D23;
        color: rgb(105, 110, 120);
        background-color: #1B1D23;
    }
    QLineEdit:disabled#lineEditPreset {
        padding-left: 5px;
        border-radius: 0px;
        border: 2px solid #1B1D23;
        color: #B4B4B4;
        background-color: #1B1D23;
    }
    
    
    /**************************************************************************
    **  QTextBrowser
    **************************************************************************/
    
    QTextBrowser {
        border: 1px solid transparent;
        color: @headerTextColor;
        background-color: transparent;
    }
    QTextBrowser#textBrowser_task {
        border: 1px solid transparent;
        color: #D2D2D2;
        background-color: @mainBackground;
    }
    QTextBrowser#textBrowser_presetname {
        padding-left: 3px;
        padding-right: 3px;
        border-radius: 2px;
        border: none;
        color: #D2D2D2;
        background-color: #1B1D23;
    }
    
    
    /**************************************************************************
    **  QPushButton
    **************************************************************************/
    
    QPushButton {
            border: none;
            color: #DCDCDC;
            background-color: transparent;
    }
    QPushButton:hover {
            border: none;
            color: rgb(85, 170, 255);
            background-color: transparent;
    }
    QPushButton:pressed {
            border: none;
            color: rgb(52, 59, 72);
            background-color: transparent;
    }
    QPushButton::menu-indicator {
            height: 0px;
            background-color: transparent;
    }
    
    /*********************************************/
    
    QPushButton#buttonTab_1,
    QPushButton#buttonTab_2,
    QPushButton#buttonTab_3,
    QPushButton#buttonTab_4
    {
        text-align: center right;
        padding-right: 12px;
        border: none;
        color: #A0A5AA;
        background-color: transparent;
    }
    QPushButton:disabled#buttonTab_1,
    QPushButton:disabled#buttonTab_2,
    QPushButton:disabled#buttonTab_3,
    QPushButton:disabled#buttonTab_4
    {
        border: none;
        color: rgb(210, 210, 210);
        background-color: #1B1D23;
    }
    QPushButton:hover#buttonTab_1,
    QPushButton:hover#buttonTab_2,
    QPushButton:hover#buttonTab_3,
    QPushButton:hover#buttonTab_4
    {
        background-color: rgb(52, 59, 72);
    }
    QPushButton:pressed#buttonTab_1,
    QPushButton:pressed#buttonTab_2,
    QPushButton:pressed#buttonTab_3,
    QPushButton:pressed#buttonTab_4
    {
        background-color: rgb(85, 170, 255);
    }
    
    /*********************************************/
    
    QPushButton#buttonFramePrevious,
    QPushButton#buttonFrameNext,
    QPushButton#buttonSetStartTime,
    QPushButton#buttonSetEndTime,
    QPushButton#buttonConfigure,
    QPushButton#buttonTempPath,
    QPushButton#buttonOutputPath
    {
        border: 1px solid rgb(55, 60, 70);
        color: #D2D2D2;
        background-color: transparent;
    }
    QPushButton:disabled#buttonFramePrevious,
    QPushButton:disabled#buttonFrameNext,
    QPushButton:disabled#buttonSetStartTime,
    QPushButton:disabled#buttonSetEndTime,
    QPushButton:disabled#buttonConfigure,
    QPushButton:disabled#buttonTempPath,
    QPushButton:disabled#buttonOutputPath
    {
        border: 1px solid rgb(55, 60, 70);
        color: rgb(98, 103, 111);
        background-color: transparent;
    }
    QPushButton:hover#buttonFramePrevious,
    QPushButton:hover#buttonFrameNext,
    QPushButton:hover#buttonSetStartTime,
    QPushButton:hover#buttonSetEndTime,
    QPushButton:hover#buttonConfigure,
    QPushButton:hover#buttonTempPath,
    QPushButton:hover#buttonOutputPath
    {
        background-color: rgb(52, 59, 72);
    }
    QPushButton:pressed#buttonFramePrevious,
    QPushButton:pressed#buttonFrameNext,
    QPushButton:pressed#buttonSetStartTime,
    QPushButton:pressed#buttonSetEndTime,
    QPushButton:pressed#buttonConfigure,
    QPushButton:pressed#buttonTempPath,
    QPushButton:pressed#buttonOutputPath
    {
        background-color: rgb(85, 170, 255);
    }
    
    /*********************************************/
    
    QPushButton#buttonApplyPreset
    {
        border-radius: 0px;
        border: 1px solid rgb(55, 60, 70);
        color: @frameSourceOutputText;
        background-color: transparent;
    }
    QPushButton:disabled#buttonApplyPreset
    {
        border-radius: 0px;
        border: 1px solid rgb(55, 60, 70);
        color: rgb(98, 103, 111);
        background-color: transparent;
    }
    QPushButton:hover#buttonApplyPreset
    {
        background-color: rgb(52, 59, 72);
    }
    QPushButton:pressed#buttonApplyPreset
    {
        background-color: rgb(85, 170, 255);
    }
    
    /*********************************************/
    
    QPushButton#buttonCancel,
    QPushButton#buttonApply,
    QPushButton#buttonPayPal,
    QPushButton#buttonBitcoin
    {
        border-radius: 0px;
        border: 1px solid rgb(100, 100, 100);
        color: #FFFFFF;
        background-color: rgb(30, 47, 80);
    }
    
    QPushButton:hover#buttonCancel,
    QPushButton:hover#buttonApply,
    QPushButton:hover#buttonPayPal,
    QPushButton:hover#buttonBitcoin
    {
        border: 1px solid rgb(61, 70, 86);
        background-color: rgb(57, 65, 80);
    }
    
    QPushButton:pressed#buttonCancel,
    QPushButton:pressed#buttonApply,
    QPushButton:pressed#buttonPayPal,
    QPushButton:pressed#buttonBitcoin
    {
        border: 1px solid rgb(43, 50, 61);
        background-color: rgb(35, 40, 49);
    }
    
    
    /**************************************************************************
    **  QProgressBar
    **************************************************************************/
    
    QProgressBar {
        width: 15px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        text-align: center;
        color: #D2D2D2;
        background: #0B101A;
    }
    QProgressBar::chunk {
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        background: #133685;
    }
    
    
    /**************************************************************************
    **  QSlider
    **************************************************************************/
    
    QSlider::groove:horizontal {
        height: 6px;
        padding-left: 8px;
        padding-right: 8px;
        border: 1px solid rgb(8, 32, 40);
        border-radius: 4px;
        background-color: rgb(8, 32, 40);
    }
    QSlider::sub-page:horizontal {
        border: 1px solid rgb(8, 40, 60);
        border-radius: 4px;
        background-color: rgb(8, 40, 60);
    }
    QSlider::handle:horizontal {
        width: 5px;
        margin: -6px;
        border: 1px solid rgb(23, 92, 127);
        border-radius: 2px;
        background-color: rgb(23, 92, 127);
    }
    QSlider::sub-page:horizontal:disabled {
        border: 1px solid rgb(8, 32, 40);
        border-radius: 4px;
        background-color: rgb(8, 32, 40);
    }
    QSlider::handle:horizontal:disabled {
        width: 5px;
        margin: -6px;
        border: 1px solid rgba(35, 37, 45, 250);
        border-radius: 2px;
        background-color: rgba(35, 37, 45, 250);
    }
    
    
    /**************************************************************************
    **  QGroupBox
    **************************************************************************/
    
    QGroupBox {
        border: 1px solid @frameLeftRightBorder;
        margin-top: 12px;
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
        border-bottom-left-radius: 2px;
        border-bottom-right-radius: 2px;
        background: @frameSourceOutputBackground;
    }
    QGroupBox::title {
        subcontrol-origin: margin;
        subcontrol-position: top left;
        top: 0 ex;
        left: 12px;
        padding: 5px 5px;
        color: @frameSourceOutputText;
    }
    
    /*********************************************/
    
    QGroupBox#groupBoxSettings_1,
    QGroupBox#groupBoxSettings_2,
    QGroupBox#groupBoxSettings_3,
    QGroupBox#groupBoxSettings_4,
    QGroupBox#groupBoxSettings_5,
    QGroupBox#groupBoxSettings_6,
    QGroupBox#groupBoxSettings_7,
    QGroupBox#groupBoxSettings_8,
    QGroupBox#groupBoxSettings_9,
    QGroupBox#groupBoxSettings_10
    {
        border: 1px solid @frameLeftRightBorder;
        margin-top: 21px;
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
        border-bottom-left-radius: 2px;
        border-bottom-right-radius: 2px;
        background: @frameSourceOutputBackground;
    }
    QGroupBox::title#groupBoxSettings_1,
    QGroupBox::title#groupBoxSettings_2,
    QGroupBox::title#groupBoxSettings_3,
    QGroupBox::title#groupBoxSettings_4,
    QGroupBox::title#groupBoxSettings_5,
    QGroupBox::title#groupBoxSettings_6,
    QGroupBox::title#groupBoxSettings_7,
    QGroupBox::title#groupBoxSettings_8,
    QGroupBox::title#groupBoxSettings_9,
    QGroupBox::title#groupBoxSettings_10
    {
        subcontrol-origin: margin;
        subcontrol-position: top left;
        top: -1 ex;
        left: 6px;
        padding: 0px 0px 0px 0px;
        color: rgb(210, 210, 210);
    }
    
    
    /**************************************************************************
    **  VLine
    **************************************************************************/
    
    QFrame[frameShape="4"],
    QFrame[frameShape="5"] {
        border: none;
        background-color: #353548;
    }
    
    
    /**************************************************************************
    **  QDockWidget
    **************************************************************************/
    
    /*QDockWidget > QWidget {
        border: none;
    }*/
    
    QDockWidget {
        font-size: 8pt;
        titlebar-close-icon: url(:/resources/icons/16x16/cil-x.png);
        titlebar-normal-icon: url(:/resources/icons/16x16/cil-pin.png);
        color: @frameSourceOutputText;
    }
    QDockWidget::title {
        padding-left: 12px;
        padding-top: 3px;
        padding-bottom: 3px;
        text-align: center left;
        border-left: 1px solid @frameSourceOutputBorder;
        border-top: 1px solid @frameSourceOutputBorder;
        border-right: 1px solid @frameSourceOutputBorder;
        background: @frameHeaderBackground;
    }
    QDockWidget::close-button,
    QDockWidget::float-button {
        icon-size: 20px;
        padding-top: 0px;
        padding-bottom: 0px;
        border: none;
        background: @frameHeaderBackground;
    }
    QDockWidget::close-button:hover,
    QDockWidget::float-button:hover {
        background: rgb(52, 59, 72);
    }
    QDockWidget::close-button:pressed,
    QDockWidget::float-button:pressed {
        background-color: rgb(85, 170, 255);
    }
    QDockWidget::close-button {
        min-width: 20px;
        min-height: 20px;
        width: 20px;
        height: 20px;
        top: 1px; bottom: 0px; right: 1px;
        subcontrol-position: center right;
        subcontrol-origin: margin;
        position: absolute;
    
    }
    QDockWidget::float-button {
        min-width: 20px;
        min-height: 20px;
        width: 20px;
        height: 20px;
        top: 1px; bottom: 0px; right: 24px;
        subcontrol-position: center right;
        subcontrol-origin: margin;
        position: absolute;
    
    }
    
    QTabBar, QDockWidget QTabBar {
        /*qproperty-drawBase: 0;*/
        color: @frameSourceOutputText;
    }
    QTabBar::tab, QDockWidget QTabBar::tab {
    }
    
    QTabBar::tab:top, QDockWidget QTabBar::tab:top {
        min-width: 50px;
        padding-top: 3px;
        padding-bottom: 3px;
        padding-left: 10px;
        padding-right: 10px;
        border-bottom: 1px solid @frameLeftRightBorder;
        background-color: @frameSourceOutputBackground;
    }
    QTabBar::tab:top:selected, QDockWidget QTabBar::tab:top:selected {
        padding-top: 3px;
        padding-bottom: 3px;
        padding-left: 10px;
        padding-right: 10px;
        margin-bottom: -1px;
        border: 1px solid @frameLeftRightBorder;
        background-color: @frameSourceOutputBackground;
    }
    QTabBar::tab:top:!selected, QDockWidget QTabBar::tab:top:!selected {
        background-color: @frameSourceOutputBackground;
    }
    
    QTabBar::tab:bottom, QDockWidget QTabBar::tab:bottom {
        min-width: 50px;
        padding-top: 3px;
        padding-bottom: 3px;
        padding-left: 10px;
        padding-right: 10px;
        border: none;
        background-color: @frameSourceOutputBackground;
    }
    QTabBar::tab:bottom:selected, QDockWidget QTabBar::tab:bottom:selected {
        padding-top: 3px;
        padding-bottom: 3px;
        padding-left: 10px;
        padding-right: 10px;
        margin-top: -1px;
        border-left: 1px solid @frameLeftRightBorder;
        border-right: 1px solid @frameLeftRightBorder;
        border-bottom: 1px solid @frameLeftRightBorder;
        border-top: none;
        background-color: @frameHeaderBackground;
    }
    QTabBar::tab:bottom:!selected, QDockWidget QTabBar::tab:bottom:!selected {
        background-color: @frameSourceOutputBackground;
    }
    

  • Lifetime Qt Champion

    @Helge1980
    aha so it could also be from the remaining part and not from the ** QDockWidget section.

    Did you try only remove the styling from Docks and see if issues still exists?



  • @mrjj

    Now I checked, I removed the styles that are associated with QDockWidgets, it turned out this:

    without_theme_1.png

    I also noticed that it turns out that for some reason the frame style is not applied when it is passed to QDockWidget (exactly the parts that is related to the borders).

    Frame#frame_source {
        border-left: 1px solid @frameSourceOutputBorder;
        border-bottom: 1px solid @frameSourceOutputBorder;
        border-right: 1px solid @frameSourceOutputBorder;
        border-top: none;
        background-color: @frameLeftRightBackground;
    }
    

    The frame is passed to QDockWidget using the following code:

    dock3 = new QDockWidget(tr("Source"), this);
    dock3->setObjectName("Dock_source");
    dock3->setAllowedAreas(Qt::LeftDockWidgetArea | Qt::RightDockWidgetArea | Qt::BottomDockWidgetArea);
    dock3->setWidget(ui->frame_source);
    window->addDockWidget(Qt::BottomDockWidgetArea, dock3);
    


  • Now I checked on Fedora (Qt5. 15), the same problem.


  • Lifetime Qt Champion

    @Helge1980

    Ok. So it's fair to assume that something in the stylesheet.

    Oddly enough i was not able to see that effect on Manjaro.
    but what a lovely linux :)



  • @mrjj

    I apologize. I completely forgot to say that I have the KDE environment installed on Manjaro. Now I noticed that you have an XFCE environment installed. Apparently I overworked yesterday and forgot about this moment.
    But as it turned out, this problem is not only in the KDE environment, but also, as I said in Fedora, with the Gnome environment and the installed version of Qt 5.15
    At the same time, Debian Gnome with Qt5.11.3 does not have this problem.


  • Lifetime Qt Champion

    @Helge1980
    Ok. that might explain why i didnt see broken borders.

    so when Gnome there is a difference between 5.15 and 5.11.3 ? ( ah different distro)

    Would it be possible for you to save to a file your stylesheet when been filled
    with values and post here ?

    I will try to see if i can install KDE Plasma 5 in my Manjaro



  • @mrjj
    Yes, I will publish it today.
    It turns out that it really depends on the version of Qt



  • @mrjj

    /**************************************************************************
    **  QWidget
    **************************************************************************/
    
    QMainWindow {
        background: #2C2C34;
    }
    QMainWindow::separator {
        width: 1px;
        height: 1px;
        background: #2C2C34;
    }
    
    QWidget {
        background: #292930;
    }
    QWidget#centralwidget {
        background: #175C7F;
    }
    QWidget#widget_main {
        background: #175C7F;
    }
    
    
    /**************************************************************************
    **  QFrame
    **************************************************************************/
    
    QFrame {
        border: none;
        background-color: #2C2C34;
    }
    QFrame#frameLeft,
    QFrame#frameRight,
    QFrame#frame_preview,
    QFrame#frame_source,
    QFrame#frame_output,
    QFrame#frame_task {
        border-left: 1px solid #32363F;
        border-bottom: 1px solid #32363F;
        border-right: 1px solid #32363F;
        border-top: none;
        background-color: #292930;
    }
    QFrame#frameTaskHeader {
        border-top: 1px solid #32363F;
        background-color: #25272C;
    }
    
    QFrame#frame_middle,
    QFrame#frameAltTab_1,
    QFrame#frameAltTab_2
    {
        border: none;
        background-color: #2C2C34;
    }
    QFrame#frame_bottom {
        border: none;
        /*border-top: 1px solid #32363F;*/
        background-color: #202A30;
    }
    QFrame#frame_top {
        border: none;
        background-color: #202A30;
    }
    QFrame#frameTab_1, QFrame#frameTab_2, QFrame#frameTab_3, QFrame#frameTab_4,
    QFrame#frameLeftTab_1, QFrame#frameLeftTab_2 {
        background-color: #292930;
    }
    
    
    /**************************************************************************
    **  QToolTip
    **************************************************************************/
    
    QToolTip {
        border: 1px solid #282828;
        border-radius: 2px;
        color: #ffffff;
        background-color: #1B1D23;
    }
    
    
    /**************************************************************************
    **  QMenu
    **************************************************************************/
    
    QMenu {
        background-color: #1B1D23;
    }
    QMenu::item {
        color: #EFEFEF;
        background-color: transparent;
    }
    QMenu::item:selected {
        background-color: #05282D;
    }
    
    
    /**************************************************************************
    **  QScrollBar
    **************************************************************************/
    
    QScrollBar {
        background: transparent;
    }
    QScrollBar:horizontal {
        height: 10px;
        margin: 0px 15px 0 15px;
        border: none;
        border-radius: 0px;
        background: #171920;
    }
    QScrollBar:vertical {
        width: 10px;
        margin: 15px 0 15px 0;
        border: none;
        border-radius: 0px;
        background: #171920;
    }
    QScrollBar::handle:horizontal {
        min-width: 25px;
        border-radius: 0px;
        background: #1C1E26;
    }
    QScrollBar::handle:vertical {
        min-height: 25px;
        border-radius: 0px;
        background: #1C1E26;
    }
    QScrollBar::add-line:horizontal {
        width: 14px;
        border: none;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
        background: #191B22;
        subcontrol-position: right;
        subcontrol-origin: margin;
        image: url(:/resources/icons/16x16/cil-caret-right.png);
    }
    QScrollBar::add-line:vertical {
        height: 14px;
        border: none;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        background: #191B22;
        subcontrol-position: bottom;
        subcontrol-origin: margin;
        image: url(:/resources/icons/16x16/cil-caret-bottom.png);
    }
    QScrollBar::sub-line:horizontal {
        width: 14px;
        border: none;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        background: #191B22;
        subcontrol-position: left;
        subcontrol-origin: margin;
        image: url(:/resources/icons/16x16/cil-caret-left.png);
    }
    QScrollBar::sub-line:vertical {
        height: 14px;
        border: none;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        background: #191B22;
        subcontrol-position: top;
        subcontrol-origin: margin;
        image: url(:/resources/icons/16x16/cil-caret-top.png);
    }
    QScrollBar::up-arrow:horizontal,
    QScrollBar::down-arrow:horizontal {
        background: none;
    }
    QScrollBar::up-arrow:vertical,
    QScrollBar::down-arrow:vertical {
        background: none;
    }
    QScrollBar::add-page:horizontal,
    QScrollBar::sub-page:horizontal {
        background: none;
    }
    QScrollBar::add-page:vertical,
    QScrollBar::sub-page:vertical {
        background: none;
    }
    
    
    /**************************************************************************
    **  QHeaderView
    **************************************************************************/
    
    QHeaderView {
        color: #A0A5AA;
        background-color: transparent;
    }
    QHeaderView::section:horizontal {
        height: 28px;
        border-top: 1px solid #27272C;
        border-bottom: 1px solid #27272C;
        border-right: 1px solid #27272C;
        border-radius: 0px;
        background-color: #1C2026;
    }
    QHeaderView::section:vertical {
        border-bottom: 1px solid #27272C;
        background-color: #1C2026;
    }
    QHeaderView::up-arrow {
        width: 13px;
        height: 9px;
        subcontrol-position: center right;
        subcontrol-origin: padding;
    }
    QHeaderView::down-arrow {
        width: 13px;
        height: 9px;
        subcontrol-position: center right;
        subcontrol-origin: padding;
    }
    
    
    /**************************************************************************
    **  QTableWidget
    **************************************************************************/
    
    QTableWidget {
        outline: none;
        padding-bottom: 0px;
        border-radius: 0px;
        color: #A0A5AA;
        background-color: #16181F;
        selection-background-color: #1C252F;
        alternate-background-color: #13151C;
    }
    QTableWidget::item {
        margin-left: 0px;
        margin-right: 0px;
    }
    QTableWidget::item:selected {
        margin: 0px;
        color: #D2D2D2;
        background-color: #1C252F;
    }
    
    
    /**************************************************************************
    **  QTreeWidget
    **************************************************************************/
    
    QTreeWidget {
        outline: none;
        color: #A0A5AA;
        background-color: #16181F;
        alternate-background-color: #13151C;
    }
    QTreeWidget::item {
        min-height: 22px;
        margin-top: 2px;
        border-right: 1px solid #27272C;
    }
    QTreeWidget::item:selected {
        min-height: 22px;
        border: none;
        color: #D2D2D2;
        background-color: #1C252F;
    }
    QTreeWidget::item:selected:active {
        min-height: 22px;
        border: none;
        color: #D2D2D2;
        background-color: #1C252F;
    }
    QTreeWidget::item:selected:!active {
        min-height: 22px;
        border: none;
        color: #D2D2D2;
        background-color: #1C252F;
    }
    
    
    QTreeView::branch {
        background: #16181F;
    }
    QTreeView::branch:has-siblings:!adjoins-item {
        background: #16181F;
    }
    QTreeView::branch:has-siblings:adjoins-item {
        background: #16181F;
    }
    QTreeView::branch:!has-children:!has-siblings:adjoins-item {
        background: #16181F;
    }
    QTreeView::branch:closed:has-children:has-siblings {
        background: #16181F;
    }
    QTreeView::branch:has-children:!has-siblings:closed {
        background: #16181F;
    }
    QTreeView::branch:open:has-children:has-siblings {
        background: #16181F;
    }
    QTreeView::branch:open:has-children:!has-siblings {
        background: #16181F;
    }
    
    
    QTreeWidget::branch:has-siblings:!adjoins-item {
        padding-bottom: 2px 0;
        padding-top: 2px 0;
        padding-left: 4px 0;
        border-image: url(:/resources/icons/16x16/cil-null.png) 0;
    }
    QTreeWidget::branch:has-siblings:adjoins-item {
        padding-bottom: 2px 0;
        padding-top: 2px 0;
        padding-left: 4px 0;
        border-image: url(:/resources/icons/16x16/cil-null.png) 0;
    }
    QTreeWidget::branch:!has-children:!has-siblings:adjoins-item {
        padding-bottom: 2px 0;
        padding-top: 2px 0;
        padding-left: 4px 0;
        border-image: url(:/resources/icons/16x16/cil-null.png) 0;
    }
    QTreeWidget::branch:has-children:!has-siblings:closed,
    QTreeWidget::branch:closed:has-children:has-siblings {
        padding-bottom: 2px 0;
        padding-top: 2px 0;
        padding-left: 4px 0;
        border-image: none;
        image: url(:/resources/icons/16x16/cil-arrow-right-.png);
    }
    QTreeWidget::branch:open:has-children:!has-siblings,
    QTreeWidget::branch:open:has-children:has-siblings {
        padding-bottom: 2px 0;
        padding-top: 2px 0;
        padding-left: 4px 0;
        border-image: none;
        image: url(:/resources/icons/16x16/cil-arrow-bottom.png);
    }
    
    
    /**************************************************************************
    **  QTabWidget
    **************************************************************************/
    
    QTabWidget {
        qproperty-tabPosition: North;
        color: #A0A5AA;
        background-color: #292930;
    }
    QTabWidget::tab-bar {
        alignment: left;
        background-color: #292930;
    }
    QTabWidget::pane {
        top:-1px;
        border: 1px solid #32363F;
        background-color: #292930;
    }
    
    /*********************************************/
    
    QTabWidget#tabWidgetRight {
        qproperty-tabPosition: North;
        color: #A0A5AA;
        background-color: #292930;
    }
    QTabWidget::tab-bar#tabWidgetRight {
        alignment: left;
        background-color: #292930;
    }
    QTabWidget::pane#tabWidgetRight {
        top:-1px;
        border: 1px solid #32363F;
        background-color: #292930;
    }
    
    /*********************************************/
    
    QTabWidget#tabWidgetSettings {
        qproperty-tabPosition: South;
        color: #A0A5AA;
        background-color: #2C2C34;
    }
    QTabWidget::tab-bar#tabWidgetSettings {
        alignment: left;
        height: 0px;
        background-color: #2C2C34;
    }
    QTabWidget::pane#tabWidgetSettings {
    
        border: none;
        background-color: #2C2C34;
    }
    
    
    /**************************************************************************
    **  QCheckBox
    **************************************************************************/
    
    QCheckBox {
        spacing: 12px;
        color: #A0A5AA;
        background-color: transparent;
    }
    QCheckBox:disabled {
        spacing: 12px;
        color: #A0A5AA;
        background-color: transparent;
    }
    QCheckBox::indicator {
        width: 12px;
        height: 12px;
        border: 2px solid #5A5A5A;
        background: none;
    }
    QCheckBox::indicator:disabled {
        width: 12px;
        height: 12px;
        border: 2px solid #3C3C3C;
        background: none;
    }
    QCheckBox::indicator:checked {
        width: 12px;
        height: 12px;
        border: 2px solid #5A5A5A;
        background: none;
        image: url(:/resources/icons/16x16/cil-check-alt.png);
    }
    QCheckBox::indicator:checked:disabled {
        width: 12px;
        height: 12px;
        border: 2px solid #3C3C3C;
        background: none;
        image: url(:/resources/icons/16x16/cil-check-alt.png);
    }
    
    
    /**************************************************************************
    **  QComboBox
    **************************************************************************/
    
    QComboBox {
        padding: 0px;
        padding-left: 5px;
        border-radius: 0px;
        border: 2px solid #1B1D23;
        color: #B4B4B4;
        background-color: #1B1D23;
    }
    QComboBox#comboBoxView {
        padding: 0px;
        padding-left: 22px;
        border-radius: 0px;
        border: 2px solid #1B1D23;
        color: #B4B4B4;
        background-color: #1B1D23;
    
        background-image: url(:/resources/icons/16x16/cil-screen-desktop.png);
        background-repeat: no-repeat;
        background-position: left;
    }
    QComboBox#comboBoxMode {
        padding: 0px;
        padding-left: 22px;
        border-radius: 0px;
        border: 2px solid #1B1D23;
        color: #B4B4B4;
        background-color: #1B1D23;
    
        background-image: url(:/resources/icons/16x16/cil-layers.png);
        background-repeat: no-repeat;
        background-position: left;
    }
    QComboBox#comboBoxPreset {
        padding: 0px;
        padding-left: 22px;
        border-radius: 0px;
        border: 2px solid #1B1D23;
        color: #B4B4B4;
        background-color: #1B1D23;
    
        background-image: url(:/resources/icons/16x16/cil-low-vision.png);
        background-repeat: no-repeat;
        background-position: left;
    }
    QComboBox:disabled {
        padding: 0px;
        padding-left: 5px;
        border-radius: 0px;
        border: 2px solid #1B1D23;
        color: #62676F;
        background-color: #1B1D23;
    }
    QComboBox:hover {
        border: 2px solid #404758;
    }
    QComboBox:hover#comboBoxView,
    QComboBox:hover#comboBoxMode,
    QComboBox:hover#comboBoxPreset {
        border: 2px solid #404758;
    }
    QComboBox::drop-down {
        subcontrol-origin: padding;
        subcontrol-position: top right;
        width: 20px;
        border-left-width: 3px;
        border-left-color: #22262E;
        border-left-style: solid;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
        background-image: url(:/resources/icons/16x16/cil-arrow-bottom.png);
        background-position: center;
        background-repeat: no-reperat;
    }
    QComboBox QAbstractItemView {
        margin-top: 3px;
        margin-bottom: 3px;
        padding: 5px;
        color: #55AAFF;
        background-color: #1B1D23;
        selection-background-color: #272C36;
    }
    QComboBox QListView::item {
        min-height: 16px;
    }
    
    
    /**************************************************************************
    **  QSpinBox
    **************************************************************************/
    
    QSpinBox, QDoubleSpinBox {
        padding: 0px;
        padding-left: 5px;
        border-radius: 0px;
        border: 2px solid #1B1D23;
        color: #B4B4B4;
        background-color: #1B1D23;
    }
    QSpinBox:disabled, QDoubleSpinBox:disabled {
        padding: 0px;
        padding-left: 5px;
        border-radius: 0px;
        border: 2px solid #1B1D23;
        color: #62676F;
        background-color: #1B1D23;
    }
    QSpinBox:hover, QDoubleSpinBox:hover {
        border: 2px solid #404758;
    }
    QSpinBox::up-button, QDoubleSpinBox::up-button {
        subcontrol-origin: padding;
        subcontrol-position: top right;
        width: 20px;
        border-left-width: 3px;
        border-left-color: #22262E;
        border-left-style: solid;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
        background-image: url(:/resources/icons/16x16/cil-arrow-top.png);
        background-position: center;
        background-repeat: no-reperat;
    }
    QSpinBox::down-button, QDoubleSpinBox::down-button {
        subcontrol-origin: padding;
        subcontrol-position: bottom right;
        width: 20px;
        border-left-width: 3px;
        border-left-color: #22262E;
        border-left-style: solid;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
        background-image: url(:/resources/icons/16x16/cil-arrow-bottom.png);
        background-position: center;
        background-repeat: no-reperat;
    }
    QSpinBox QAbstractItemView, QDoubleSpinBox QAbstractItemView {
        padding: 5px;
        color: rgb(85, 170, 255);
        background-color: #1B1D23;
        selection-background-color: #272C36;
    }
    
    
    /**************************************************************************
    **  QLabel
    **************************************************************************/
    
    QLabel {
        color: #D2D2D2;
        background-color: transparent;
    }
    QLabel:disabled {
        color: #A0A5AA;
        background-color: transparent;
    }
    
    QLabel#labelThumb {
        color: #25272C;
        font: 24pt;
        font-style: oblique;
        background-color: #292930;
    }
    
    QLabel#label_source,
    QLabel#label_output {
        color: #DCDCDC;
        background-color: transparent;
    }
    
    
    /**************************************************************************
    **  QLineEdit
    **************************************************************************/
    
    QLineEdit {
        padding-left: 5px;
        border-radius: 0px;
        border: 2px solid #1B1D23;
        color: #DCDCDC;
        background-color: #1B1D23;
    }
    QLineEdit#lineEditGlobalTitle {
        padding-left: 20px;
        border-radius: 0px;
        border-left: 5px solid #1B1D23;
        border-top: 2px solid #1B1D23;
        border-bottom: 2px solid #1B1D23;
        border-right: 2px solid #1B1D23;
        color: #B4B4B4;
        background-color: #1B1D23;
        background-image: url(:/resources/icons/16x16/cil-tags.png);
        background-repeat: no-repeat;
        background-position: left;
    }
    QLineEdit:hover {
        border: 2px solid rgb(64, 71, 88);
    }
    QLineEdit:hover#lineEditGlobalTitle {
        border: 2px solid rgb(64, 71, 88);
    }
    QLineEdit:focus {
        border: 2px solid rgb(91, 101, 124);
    }
    QLineEdit:focus#lineEditGlobalTitle {
        border: 2px solid rgb(91, 101, 124);
    }
    QLineEdit:disabled {
        padding-left: 5px;
        border-radius: 0px;
        border: 2px solid #1B1D23;
        color: rgb(105, 110, 120);
        background-color: #1B1D23;
    }
    QLineEdit:disabled#lineEditPreset {
        padding-left: 5px;
        border-radius: 0px;
        border: 2px solid #1B1D23;
        color: #B4B4B4;
        background-color: #1B1D23;
    }
    
    
    /**************************************************************************
    **  QTextBrowser
    **************************************************************************/
    
    QTextBrowser {
        border: 1px solid transparent;
        color: #A0A5AA;
        background-color: transparent;
    }
    QTextBrowser#textBrowser_task {
        border: 1px solid transparent;
        color: #D2D2D2;
        background-color: #2C2C34;
    }
    QTextBrowser#textBrowser_presetname {
        padding-left: 3px;
        padding-right: 3px;
        border-radius: 2px;
        border: none;
        color: #D2D2D2;
        background-color: #1B1D23;
    }
    
    
    /**************************************************************************
    **  QPushButton
    **************************************************************************/
    
    QPushButton {
            border: none;
            color: #DCDCDC;
            background-color: transparent;
    }
    QPushButton:hover {
            border: none;
            color: rgb(85, 170, 255);
            background-color: transparent;
    }
    QPushButton:pressed {
            border: none;
            color: rgb(52, 59, 72);
            background-color: transparent;
    }
    QPushButton::menu-indicator {
            height: 0px;
            background-color: transparent;
    }
    
    /*********************************************/
    
    QPushButton#buttonTab_1,
    QPushButton#buttonTab_2,
    QPushButton#buttonTab_3,
    QPushButton#buttonTab_4
    {
        text-align: center right;
        padding-right: 12px;
        border: none;
        color: #A0A5AA;
        background-color: transparent;
    }
    QPushButton:disabled#buttonTab_1,
    QPushButton:disabled#buttonTab_2,
    QPushButton:disabled#buttonTab_3,
    QPushButton:disabled#buttonTab_4
    {
        border: none;
        color: rgb(210, 210, 210);
        background-color: #1B1D23;
    }
    QPushButton:hover#buttonTab_1,
    QPushButton:hover#buttonTab_2,
    QPushButton:hover#buttonTab_3,
    QPushButton:hover#buttonTab_4
    {
        background-color: rgb(52, 59, 72);
    }
    QPushButton:pressed#buttonTab_1,
    QPushButton:pressed#buttonTab_2,
    QPushButton:pressed#buttonTab_3,
    QPushButton:pressed#buttonTab_4
    {
        background-color: rgb(85, 170, 255);
    }
    
    /*********************************************/
    
    QPushButton#buttonFramePrevious,
    QPushButton#buttonFrameNext,
    QPushButton#buttonSetStartTime,
    QPushButton#buttonSetEndTime,
    QPushButton#buttonConfigure,
    QPushButton#buttonTempPath,
    QPushButton#buttonOutputPath
    {
        border: 1px solid rgb(55, 60, 70);
        color: #D2D2D2;
        background-color: transparent;
    }
    QPushButton:disabled#buttonFramePrevious,
    QPushButton:disabled#buttonFrameNext,
    QPushButton:disabled#buttonSetStartTime,
    QPushButton:disabled#buttonSetEndTime,
    QPushButton:disabled#buttonConfigure,
    QPushButton:disabled#buttonTempPath,
    QPushButton:disabled#buttonOutputPath
    {
        border: 1px solid rgb(55, 60, 70);
        color: rgb(98, 103, 111);
        background-color: transparent;
    }
    QPushButton:hover#buttonFramePrevious,
    QPushButton:hover#buttonFrameNext,
    QPushButton:hover#buttonSetStartTime,
    QPushButton:hover#buttonSetEndTime,
    QPushButton:hover#buttonConfigure,
    QPushButton:hover#buttonTempPath,
    QPushButton:hover#buttonOutputPath
    {
        background-color: rgb(52, 59, 72);
    }
    QPushButton:pressed#buttonFramePrevious,
    QPushButton:pressed#buttonFrameNext,
    QPushButton:pressed#buttonSetStartTime,
    QPushButton:pressed#buttonSetEndTime,
    QPushButton:pressed#buttonConfigure,
    QPushButton:pressed#buttonTempPath,
    QPushButton:pressed#buttonOutputPath
    {
        background-color: rgb(85, 170, 255);
    }
    
    /*********************************************/
    
    QPushButton#buttonApplyPreset
    {
        border-radius: 0px;
        border: 1px solid rgb(55, 60, 70);
        color: #A0A5AA;
        background-color: transparent;
    }
    QPushButton:disabled#buttonApplyPreset
    {
        border-radius: 0px;
        border: 1px solid rgb(55, 60, 70);
        color: rgb(98, 103, 111);
        background-color: transparent;
    }
    QPushButton:hover#buttonApplyPreset
    {
        background-color: rgb(52, 59, 72);
    }
    QPushButton:pressed#buttonApplyPreset
    {
        background-color: rgb(85, 170, 255);
    }
    
    /*********************************************/
    
    QPushButton#buttonCancel,
    QPushButton#buttonApply,
    QPushButton#buttonPayPal,
    QPushButton#buttonBitcoin
    {
        border-radius: 0px;
        border: 1px solid rgb(100, 100, 100);
        color: #FFFFFF;
        background-color: rgb(30, 47, 80);
    }
    
    QPushButton:hover#buttonCancel,
    QPushButton:hover#buttonApply,
    QPushButton:hover#buttonPayPal,
    QPushButton:hover#buttonBitcoin
    {
        border: 1px solid rgb(61, 70, 86);
        background-color: rgb(57, 65, 80);
    }
    
    QPushButton:pressed#buttonCancel,
    QPushButton:pressed#buttonApply,
    QPushButton:pressed#buttonPayPal,
    QPushButton:pressed#buttonBitcoin
    {
        border: 1px solid rgb(43, 50, 61);
        background-color: rgb(35, 40, 49);
    }
    
    
    /**************************************************************************
    **  QProgressBar
    **************************************************************************/
    
    QProgressBar {
        width: 15px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        text-align: center;
        color: #D2D2D2;
        background: #0B101A;
    }
    QProgressBar::chunk {
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        background: #133685;
    }
    
    
    /**************************************************************************
    **  QSlider
    **************************************************************************/
    
    QSlider::groove:horizontal {
        height: 6px;
        padding-left: 8px;
        padding-right: 8px;
        border: 1px solid rgb(8, 32, 40);
        border-radius: 4px;
        background-color: rgb(8, 32, 40);
    }
    QSlider::sub-page:horizontal {
        border: 1px solid rgb(8, 40, 60);
        border-radius: 4px;
        background-color: rgb(8, 40, 60);
    }
    QSlider::handle:horizontal {
        width: 5px;
        margin: -6px;
        border: 1px solid rgb(23, 92, 127);
        border-radius: 2px;
        background-color: rgb(23, 92, 127);
    }
    QSlider::sub-page:horizontal:disabled {
        border: 1px solid rgb(8, 32, 40);
        border-radius: 4px;
        background-color: rgb(8, 32, 40);
    }
    QSlider::handle:horizontal:disabled {
        width: 5px;
        margin: -6px;
        border: 1px solid rgba(35, 37, 45, 250);
        border-radius: 2px;
        background-color: rgba(35, 37, 45, 250);
    }
    
    
    /**************************************************************************
    **  QGroupBox
    **************************************************************************/
    
    QGroupBox {
        border: 1px solid #32363F;
        margin-top: 12px;
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
        border-bottom-left-radius: 2px;
        border-bottom-right-radius: 2px;
        background: #292930;
    }
    QGroupBox::title {
        subcontrol-origin: margin;
        subcontrol-position: top left;
        top: 0 ex;
        left: 12px;
        padding: 5px 5px;
        color: #A0A5AA;
    }
    
    /*********************************************/
    
    QGroupBox#groupBoxSettings_1,
    QGroupBox#groupBoxSettings_2,
    QGroupBox#groupBoxSettings_3,
    QGroupBox#groupBoxSettings_4,
    QGroupBox#groupBoxSettings_5,
    QGroupBox#groupBoxSettings_6,
    QGroupBox#groupBoxSettings_7,
    QGroupBox#groupBoxSettings_8,
    QGroupBox#groupBoxSettings_9,
    QGroupBox#groupBoxSettings_10
    {
        border: 1px solid #32363F;
        margin-top: 21px;
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
        border-bottom-left-radius: 2px;
        border-bottom-right-radius: 2px;
        background: #292930;
    }
    QGroupBox::title#groupBoxSettings_1,
    QGroupBox::title#groupBoxSettings_2,
    QGroupBox::title#groupBoxSettings_3,
    QGroupBox::title#groupBoxSettings_4,
    QGroupBox::title#groupBoxSettings_5,
    QGroupBox::title#groupBoxSettings_6,
    QGroupBox::title#groupBoxSettings_7,
    QGroupBox::title#groupBoxSettings_8,
    QGroupBox::title#groupBoxSettings_9,
    QGroupBox::title#groupBoxSettings_10
    {
        subcontrol-origin: margin;
        subcontrol-position: top left;
        top: -1 ex;
        left: 6px;
        padding: 0px 0px 0px 0px;
        color: rgb(210, 210, 210);
    }
    
    
    /**************************************************************************
    **  VLine
    **************************************************************************/
    
    QFrame[frameShape="4"],
    QFrame[frameShape="5"] {
        border: none;
        background-color: #353548;
    }
    
    
    /**************************************************************************
    **  QDockWidget
    **************************************************************************/
    
    QDockWidget {
        font-size: 8pt;
        titlebar-close-icon: url(:/resources/icons/16x16/cil-x.png);
        titlebar-normal-icon: url(:/resources/icons/16x16/cil-pin.png);
        color: #A0A5AA;
    }
    QDockWidget::title {
        padding-left: 12px;
        padding-top: 3px;
        padding-bottom: 3px;
        text-align: center left;
        border-left: 1px solid #32363F;
        border-top: 1px solid #32363F;
        border-right: 1px solid #32363F;
        background: #25272C;
    }
    QDockWidget::close-button,
    QDockWidget::float-button {
        icon-size: 20px;
        padding-top: 0px;
        padding-bottom: 0px;
        border: none;
        background: #25272C;
    }
    QDockWidget::close-button:hover,
    QDockWidget::float-button:hover {
        background: rgb(52, 59, 72);
    }
    QDockWidget::close-button:pressed,
    QDockWidget::float-button:pressed {
        background-color: rgb(85, 170, 255);
    }
    QDockWidget::close-button {
        min-width: 20px;
        min-height: 20px;
        width: 20px;
        height: 20px;
        top: 1px; bottom: 0px; right: 1px;
        subcontrol-position: center right;
        subcontrol-origin: margin;
        position: absolute;
    
    }
    QDockWidget::float-button {
        min-width: 20px;
        min-height: 20px;
        width: 20px;
        height: 20px;
        top: 1px; bottom: 0px; right: 24px;
        subcontrol-position: center right;
        subcontrol-origin: margin;
        position: absolute;
    
    }
    
    QTabBar, QDockWidget QTabBar {
        /*qproperty-drawBase: 0;*/
        color: #A0A5AA;
    }
    QTabBar::tab, QDockWidget QTabBar::tab {
    }
    
    QTabBar::tab:top, QDockWidget QTabBar::tab:top {
        min-width: 50px;
        padding-top: 3px;
        padding-bottom: 3px;
        padding-left: 10px;
        padding-right: 10px;
        border-bottom: 1px solid #32363F;
        background-color: #292930;
    }
    QTabBar::tab:top:selected, QDockWidget QTabBar::tab:top:selected {
        padding-top: 3px;
        padding-bottom: 3px;
        padding-left: 10px;
        padding-right: 10px;
        margin-bottom: -1px;
        border: 1px solid #32363F;
        background-color: #292930;
    }
    QTabBar::tab:top:!selected, QDockWidget QTabBar::tab:top:!selected {
        background-color: #292930;
    }
    
    QTabBar::tab:bottom, QDockWidget QTabBar::tab:bottom {
        min-width: 50px;
        padding-top: 3px;
        padding-bottom: 3px;
        padding-left: 10px;
        padding-right: 10px;
        border: none;
        background-color: #292930;
    }
    QTabBar::tab:bottom:selected, QDockWidget QTabBar::tab:bottom:selected {
        padding-top: 3px;
        padding-bottom: 3px;
        padding-left: 10px;
        padding-right: 10px;
        margin-top: -1px;
        border-left: 1px solid #32363F;
        border-right: 1px solid #32363F;
        border-bottom: 1px solid #32363F;
        border-top: none;
        background-color: #25272C;
    }
    QTabBar::tab:bottom:!selected, QDockWidget QTabBar::tab:bottom:!selected {
        background-color: #292930;
    }
    

    In Fedora Gnome, the borders of the QFrame are visible, but everything is shifted for some reason and the dark border of the system theme is drawn:

    fedora.png


  • Lifetime Qt Champion

    @Helge1980

    Hi
    I tried to install KDE in manjaro XFCE but it exploded.
    I then download the KDE version but it has issues with resolution in a virtual machine and
    I gave up. Nice linux though.

    I did test the style in some linux but i always use XFCE so I guess that's why i don't see it.



  • @mrjj

    Good day!

    Yes, I was also forced to install Manjaro on a virtual machine yesterday, because the computer on which Manjaro was installed failed and there are also problems with the resolution. Now I'm trying to solve the problem with QDockWidget on a VM in Fedora Gnome. Most likely, the solution will be identical for both systems.
    Now there are thoughts that some decorator for Dock Widgets is enabled in these systems, which cannot be changed using style sheets.


Log in to reply