tweak sidebar appearance

- draw a border between sidebar and main area
- tweak padding

Testing is a pain, because you need to check day mode on the
three platforms, and night mode as well. If you can do it better, PRs
are welcome :-)

qt/aqt/sidebar.py

@@ -247,7 +247,20 @@ class SidebarSearchBar(QLineEdit):
         self.timer = QTimer(self)
         self.timer.setInterval(600)
         self.timer.setSingleShot(True)
-        self.setStyleSheet("QLineEdit { padding-left: 3px }")
+        self.setFrame(False)
+        border = theme_manager.color(colors.MEDIUM_BORDER)
+        styles = [
+            "padding: 1px",
+            "padding-left: 3px",
+            f"border-bottom: 1px solid {border}",
+        ]
+        if _want_right_border():
+            styles.append(
+                f"border-right: 1px solid {border}",
+            )
+
+        self.setStyleSheet("QLineEdit { %s }" % ";".join(styles))
+
         qconnect(self.timer.timeout, self.onSearch)
         qconnect(self.textChanged, self.onTextChanged)
 
@@ -267,6 +280,10 @@ class SidebarSearchBar(QLineEdit):
             QLineEdit.keyPressEvent(self, evt)
 
 
+def _want_right_border() -> bool:
+    return not isMac or theme_manager.night_mode
+
+
 class SidebarTreeView(QTreeView):
     def __init__(self, browser: aqt.browser.Browser) -> None:
         super().__init__()
@@ -308,9 +325,19 @@ class SidebarTreeView(QTreeView):
         qconnect(self.expanded, self._on_expansion)
         qconnect(self.collapsed, self._on_collapse)
 
-        # match window background color
+        # match window background color and tweak style
         bgcolor = QPalette().window().color().name()
-        self.setStyleSheet("QTreeView { padding: 3px; background: '%s'; }" % bgcolor)
+        border = theme_manager.color(colors.MEDIUM_BORDER)
+        styles = [
+            "padding: 3px",
+            "padding-right: 0px",
+            "border: 0",
+            f"background: {bgcolor}",
+        ]
+        if _want_right_border():
+            styles.append(f"border-right: 1px solid {border}")
+
+        self.setStyleSheet("QTreeView { %s }" % ";".join(styles))
 
     def model(self) -> SidebarModel:
         return super().model()

ts/sass/_vars.scss

@@ -6,6 +6,7 @@
     --window-bg: #ececec;
     --frame-bg: white;
     --border: #aaa;
+    --medium-border: #b6b6b6;
     --faint-border: #e7e7e7;
     --link: #00a;
     --review-count: #0a0;
@@ -36,6 +37,7 @@
     --window-bg: #2f2f31;
     --frame-bg: #3a3a3a;
     --border: #777;
+    --medium-border: #444;
     --faint-border: #29292b;
     --link: #77ccff;
     --review-count: #5ccc00;