Mercurial > addons > firefox-addons > set-aside
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 {