Style scrollbars (#422)

* Make scrollbars themeable * Add styles to default themes * Resize resultlist upon opening preview (to allow for styled scrollbar) * Spaces around infix operator (AppVeyor) * Convert tabs to spaces (seriously?)
cerebroapp · Feb 17, 2022 · 465562c · 465562c
1 parent 97cf225
commit 465562c
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 2 deletions.
diff --git a/app/main/components/Cerebro/styles.css b/app/main/components/Cerebro/styles.css
@@ -24,3 +24,42 @@
   color: var(--secondary-font-color);
   white-space: pre;
 }
+
+::-webkit-scrollbar {
+  height: var(--scroll-height);
+  width: var(--scroll-width);
+  background: var(--scroll-background);
+  -webkit-border-radius: 0;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--scroll-track);
+}
+::-webkit-scrollbar-track:active {
+  background: var(--scroll-track-active);
+}
+
+::-webkit-scrollbar-track:hover {
+  background: var(--scroll-track-hover);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--scroll-thumb);
+  -webkit-border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--scroll-thumb-hover);
+}
+
+::-webkit-scrollbar-thumb:active {
+  background: var(--scroll-thumb-active);
+}
+
+::-webkit-scrollbar-thumb:vertical {
+  min-height: 10px;
+}
+
+::-webkit-scrollbar-thumb:horizontal {
+  min-width: 10px;
+}
diff --git a/app/main/components/ResultsList/index.js b/app/main/components/ResultsList/index.js
@@ -68,7 +68,7 @@ class ResultsList extends Component {
           rowCount={results.length}
           rowHeight={RESULT_HEIGHT}
           rowRenderer={this.rowRenderer}
-          width={10000}
+          width={(results[selected] !== undefined && results[selected].getPreview) ? 250 : 10000}
           scrollToIndex={selected}
           // Needed to force update of VirtualScroll
           titles={results.map(result => result.title)}

diff --git a/app/main/css/themes/dark.css b/app/main/css/themes/dark.css
@@ -20,11 +20,22 @@
   --selected-result-subtitle-color: var(--result-subtitle-color);
   --selected-result-background: #1972D6;
 
+  /* scrollbar */
+  --scroll-background: var(--main-background-color);
+  --scroll-track: #2E2E2C;
+  --scroll-track-active: var(--scroll-track);
+  --scroll-track-hover: var(--scroll-track);
+  --scroll-thumb: var(--secondary-font-color);
+  --scroll-thumb-hover: var(--scroll-thumb);
+  --scroll-thumb-active: var(--main-font-color);
+  --scroll-width: 5px;
+  --scroll-height: 5px;
+
   /* inputs */
   --preview-input-background: #2E2E2C;
   --preview-input-color: var(--main-font-color);
   --preview-input-border: 0;
 
   /* filter for previews */
-  --preview-filter: invert(100%) hue-rotate(180deg) contrast(80%);;
+  --preview-filter: invert(100%) hue-rotate(180deg) contrast(80%);
 }
diff --git a/app/main/css/themes/light.css b/app/main/css/themes/light.css
@@ -20,6 +20,17 @@
   --selected-result-subtitle-color: var(--result-subtitle-color);
   --selected-result-background: rgba(18, 110, 219, 1);
 
+  /* scrollbar */
+  --scroll-background: var(--main-background-color);
+  --scroll-track: #e0e0e0;
+  --scroll-track-active: var(--scroll-track);
+  --scroll-track-hover: var(--scroll-track);
+  --scroll-thumb: var(--secondary-font-color);
+  --scroll-thumb-hover: var(--scroll-thumb);
+  --scroll-thumb-active: var(--main-font-color);
+  --scroll-width: 5px;
+  --scroll-height: 5px;
+
   /* inputs */
   --preview-input-background: white;
   --preview-input-color: var(--main-font-color);