RareStyle: Add a background and a border to ease transition in the Main and Side tab bars.

rare/components/tabs/__init__.py

@@ -9,7 +9,7 @@ from rare.components.tabs.games import GamesTab
 from rare.components.tabs.settings import SettingsTab
 from rare.components.tabs.settings.debug import DebugSettings
 from rare.components.tabs.shop import Shop
-from rare.components.tabs.tab_utils import TabBar, TabButtonWidget
+from rare.components.tabs.tab_utils import MainTabBar, TabButtonWidget
 
 
 class TabWidget(QTabWidget):
@@ -20,7 +20,10 @@ class TabWidget(QTabWidget):
         disabled_tab = 3 if not shared.args.offline else 1
         self.core = shared.core
         self.signals = shared.signals
-        self.setTabBar(TabBar(disabled_tab))
+        self.setTabBar(MainTabBar(disabled_tab))
+        # lk: Figure out why this adds a white line at the top
+        # lk: despite setting qproperty-drawBase to 0 in the stylesheet
+        # self.setDocumentMode(True)
         # Generate Tabs
         self.games_tab = GamesTab()
         self.addTab(self.games_tab, self.tr("Games"))

rare/components/tabs/tab_utils.py

@@ -4,20 +4,20 @@ from PyQt5.QtWidgets import QTabBar, QToolButton
 from qtawesome import icon
 
 
-class TabBar(QTabBar):
+class MainTabBar(QTabBar):
     def __init__(self, expanded):
-        super(TabBar, self).__init__()
+        super(MainTabBar, self).__init__()
         self._expanded = expanded
-        self.setObjectName("main_tab_bar")
+        self.setObjectName("MainTabBar")
         self.setFont(QFont("Arial", 13))
         # self.setContentsMargins(0,10,0,10)
 
     def tabSizeHint(self, index):
-        size = super(TabBar, self).tabSizeHint(index)
+        size = super(MainTabBar, self).tabSizeHint(index)
         if index == self._expanded:
             offset = self.width()
             for index in range(self.count()):
-                offset -= super(TabBar, self).tabSizeHint(index).width()
+                offset -= super(MainTabBar, self).tabSizeHint(index).width()
             size.setWidth(max(size.width(), size.width() + offset))
         return size
 

rare/resources/stylesheets/RareStyle/stylesheet.qss

@@ -480,14 +480,6 @@ QTabBar::tab:bottom {
     padding-left: 12px;
     padding-right: 12px;
 }
-QTabBar::tab:top:first,
-QTabBar::tab:bottom:first {
-    border-left: transparent;
-}
-QTabBar::tab:top:last,
-QTabBar::tab:bottom:last {
-    border-right: transparent;
-}
 QTabBar::tab:top:hover,
 QTabBar::tab:bottom:hover {
     border-color: #483d8b;
@@ -519,12 +511,12 @@ QTabBar::tab:bottom:hover {
 QTabBar::tab:top:selected {
     border-color: #483d8b;
     border-bottom-color: transparent;
-    background: transparent;
+    background: #202225;
 }
 QTabBar::tab:bottom:selected {
     border-color: #483d8b;
     border-top-color: transparent;
-    background: transparent;
+    background: #202225;
 }
 QTabBar::tab:top:disabled {
     border-bottom-color: #3c3f41;
@@ -535,26 +527,16 @@ QTabBar::tab:bottom:disabled {
 QTabBar::tab:top:selected:disabled {
     border-color: #3c3f41;
     border-bottom-color: transparent;
-    background: transparent;
 }
 QTabBar::tab:bottom:selected:disabled {
     border-color: #3c3f41;
     border-top-color: transparent;
-    background: transparent;
 }
 QTabBar::tab:left,
 QTabBar::tab:right {
     padding-top: 2px;
     padding-bottom: 2px;
 }
-QTabBar::tab:left:first,
-QTabBar::tab:right:first {
-    border-top: transparent;
-}
-QTabBar::tab:left:last,
-QTabBar::tab:right:last {
-    border-bottom: transparent;
-}
 QTabBar::tab:left:hover,
 QTabBar::tab:right:hover {
     border-color: #483d8b;
@@ -580,19 +562,18 @@ QTabBar::tab:left:hover {
         x1: -1, y1: 0, x2: 1, y2: 0, stop: 0 #483d8b, stop: 1 #202225);
 }
 QTabBar::tab:right:hover {
-    border-color: #483d8b;
     background: qlineargradient(
         x1: 2, y1: 0, x2: 0, y2: 0, stop: 0 #483d8b, stop: 1 #202225);
 }
 QTabBar::tab:left:selected {
     border-color: #483d8b;
     border-right-color: transparent;
-    background: transparent;
+    background: #202225;
 }
 QTabBar::tab:right:selected {
     border-color: #483d8b;
     border-left-color: transparent;
-    background: transparent;
+    background: #202225;
 }
 QTabBar::tab:left:disabled {
     border-right-color: #3c3f41;
@@ -603,28 +584,75 @@ QTabBar::tab:right:disabled {
 QTabBar::tab:left:selected:disabled {
     border-color: #3c3f41;
     border-right-color: transparent;
-    background: transparent;
 }
 QTabBar::tab:right:selected:disabled {
     border-color: #3c3f41;
     border-left-color: transparent;
-    background: transparent;
 }
 
-QTabBar::tab:top#main_tab_bar {
+QTabBar#MainTabBar {
+    border-width: 1px;
+    border-style: solid;
     border-color: transparent;
     border-bottom-color: #483d8b;
-    padding: 5px;
+    background: qlineargradient(
+        x1: 0, y1: -3, x2: 0, y2: 1, stop: 0 #3c3f41, stop: 1 #202225);
 }
-QTabBar::tab:top:hover#main_tab_bar {
+QTabBar#MainTabBar:disabled {
+    border-color: transparent;
+    border-bottom-color: #3c3f41;
+}
+QTabBar#MainTabBar::tab {
+    margin-left: 3px;
+    margin-right: 3px;
+    border-top-color: transparent;
+    border-bottom-color: #483d8b;
+    padding: 5px;
+}/*
+QTabBar#MainTabBar::tab:top:first,
+QTabBar#MainTabBar::tab:bottom:first {
+    margin-left: 0px;
+    border-left: transparent;
+}
+QTabBar#MainTabBar::tab:top:last,
+QTabBar#MainTabBar::tab:bottom:last {
+    margin-right: 0px;
+    border-right: transparent;
+}*/
+QTabBar#MainTabBar::tab:top:hover {
     border-top-color: #483d8b;
 }
-QTabBar::tab:top:selected#main_tab_bar {
+QTabBar#MainTabBar::tab:top:selected {
     border-color: #483d8b;
     border-bottom-color: #202225;
 }
-
-QTabBar::tab:disabled#SideTabBar {
+QTabBar#SideTabBar {
+    border-width: 1px;
+    border-style: solid;
+    border-color: transparent;
+    border-right-color: #483d8b;
+    background: qlineargradient(
+        x1: -3, y1: 0, x2: 1, y2: 0, stop: 0 #3c3f41, stop: 1 #202225);
+}
+QTabBar#SideTabBar:disabled {
+    border-color: transparent;
+    border-right-color: #3c3f41;
+}
+QTabBar#SideTabBar::tab {
+    margin-top: 3px;
+    margin-bottom: 3px;
+}/*
+QTabBar#SideTabBar::tab:left:first,
+QTabBar#SideTabBar::tab:right:first {
+    margin-top: 0px;
+    border-top: transparent;
+}
+QTabBar#SideTabBar::tab:left:last,
+QTabBar#SideTabBar::tab:right:last {
+    margin-bottom: 0px;
+    border-bottom: transparent;
+}*/
+QTabBar#SideTabBar::tab:disabled {
     color: transparent;
     border-color: transparent;
     background-color: transparent;

rare/utils/extra_widgets.py

@@ -338,6 +338,7 @@ class SideTabWidget(QTabWidget):
     def __init__(self, show_back: bool = False, parent=None):
         super(SideTabWidget, self).__init__(parent=parent)
         self.setTabBar(SideTabBar())
+        self.setDocumentMode(True)
         self.setTabPosition(QTabWidget.West)
         if show_back:
             self.addTab(QWidget(), qta_icon("mdi.keyboard-backspace"), self.tr("Back"))