diff sidebar/style/tab-collection-manager.css @ 2:49ec0da1e698

Replace tab list scroll bar with scroll buttons
author Guido Berhoerster <guido+set-aside@berhoerster.name>
date Wed, 21 Nov 2018 11:39:07 +0100
parents d13d59494613
children
line wrap: on
line diff
--- a/sidebar/style/tab-collection-manager.css	Mon Nov 19 17:26:17 2018 +0100
+++ b/sidebar/style/tab-collection-manager.css	Wed Nov 21 11:39:07 2018 +0100
@@ -18,6 +18,14 @@
   --font-size-body-20: 15px;
   --font-size-body-10: 13px;
 
+  --scroll-button-image-width: 24px;
+  --scroll-button-image-height: var(--scroll-button-image-width);
+  --scroll-button-padding: 4px;
+  --scroll-button-width: calc(2 * var(--scroll-button-padding) +
+      var(--scroll-button-image-width));
+  --scroll-button-height: var(--scroll-button-width);
+  --scroll-button-highlight: var(--grey-90-a10);
+
   --thumbnail-width: 224px;
   --thumbnail-height: 128px;
   --thumbnail-shadow: var(--box-shadow-border), 0 1px 4px var(--grey-90-a30);
@@ -112,7 +120,6 @@
   padding-left: 0;
   margin: 0;
   list-style: none;
-  overflow: auto;
 }
 
 .tab-collection-actions {
@@ -146,8 +153,37 @@
   text-decoration: underline;
 }
 
+.tabs-scroll-button {
+  visibility: hidden;
+  position: absolute;
+  margin-top: calc(var(--remove-tab-overlap) + var(--thumbnail-height) / 2 -
+      var(--scroll-button-height) / 2);
+  width: var(--scroll-button-width);
+  height: var(--scroll-button-height);
+  background: url(../images/scroll-arrow.svg)
+      var(--scroll-button-padding)/var(--scroll-button-image-width) no-repeat
+      var(--scroll-button-highlight);
+  border-radius: 4px;
+  z-index: 999;
+  transition: visibility 300ms;
+}
+
+.tab-collection-tabs-container:hover .tabs-scroll-button.scroll-visible {
+  visibility: visible;
+}
+
+.tabs-scroll-button.scroll-left {
+  left: 0;
+}
+
+.tabs-scroll-button.scroll-right {
+  transform: scaleX(-1);
+  right: 0;
+}
+
 .tab-collection-tabs {
-  margin: 4px 0 0 0;
+  overflow: hidden;
+  scroll-behavior: smooth;
 }
 
 .tab-item {