Mercurial > addons > firefox-addons > set-aside

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

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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
comparison
equal deleted inserted replaced
1:b0827360b8e4 2:49ec0da1e698
16 --font-size-display-20: 36px; 16 --font-size-display-20: 36px;
17 --font-size-title-20: 17px; 17 --font-size-title-20: 17px;
18 --font-size-body-20: 15px; 18 --font-size-body-20: 15px;
19 --font-size-body-10: 13px; 19 --font-size-body-10: 13px;
20 20
21 --scroll-button-image-width: 24px;
22 --scroll-button-image-height: var(--scroll-button-image-width);
23 --scroll-button-padding: 4px;
24 --scroll-button-width: calc(2 * var(--scroll-button-padding) +
25 var(--scroll-button-image-width));
26 --scroll-button-height: var(--scroll-button-width);
27 --scroll-button-highlight: var(--grey-90-a10);
28
21 --thumbnail-width: 224px; 29 --thumbnail-width: 224px;
22 --thumbnail-height: 128px; 30 --thumbnail-height: 128px;
23 --thumbnail-shadow: var(--box-shadow-border), 0 1px 4px var(--grey-90-a30); 31 --thumbnail-shadow: var(--box-shadow-border), 0 1px 4px var(--grey-90-a30);
24 --thumbnail-shadow-highlight: var(--thumbnail-shadow), 32 --thumbnail-shadow-highlight: var(--thumbnail-shadow),
25 0 0 0 5px var(--grey-30); 33 0 0 0 5px var(--grey-30);
110 .tab-collection-tabs { 118 .tab-collection-tabs {
111 display: flex; 119 display: flex;
112 padding-left: 0; 120 padding-left: 0;
113 margin: 0; 121 margin: 0;
114 list-style: none; 122 list-style: none;
115 overflow: auto;
116 } 123 }
117 124
118 .tab-collection-actions { 125 .tab-collection-actions {
119 font-size: var(--font-size-body-10); 126 font-size: var(--font-size-body-10);
120 justify-content: flex-end; 127 justify-content: flex-end;
144 151
145 .restore-tab-collection:hover { 152 .restore-tab-collection:hover {
146 text-decoration: underline; 153 text-decoration: underline;
147 } 154 }
148 155
156 .tabs-scroll-button {
157 visibility: hidden;
158 position: absolute;
159 margin-top: calc(var(--remove-tab-overlap) + var(--thumbnail-height) / 2 -
160 var(--scroll-button-height) / 2);
161 width: var(--scroll-button-width);
162 height: var(--scroll-button-height);
163 background: url(../images/scroll-arrow.svg)
164 var(--scroll-button-padding)/var(--scroll-button-image-width) no-repeat
165 var(--scroll-button-highlight);
166 border-radius: 4px;
167 z-index: 999;
168 transition: visibility 300ms;
169 }
170
171 .tab-collection-tabs-container:hover .tabs-scroll-button.scroll-visible {
172 visibility: visible;
173 }
174
175 .tabs-scroll-button.scroll-left {
176 left: 0;
177 }
178
179 .tabs-scroll-button.scroll-right {
180 transform: scaleX(-1);
181 right: 0;
182 }
183
149 .tab-collection-tabs { 184 .tab-collection-tabs {
150 margin: 4px 0 0 0; 185 overflow: hidden;
186 scroll-behavior: smooth;
151 } 187 }
152 188
153 .tab-item { 189 .tab-item {
154 display: block; 190 display: block;
155 position: relative; 191 position: relative;