Mercurial > addons > firefox-addons > set-aside

annotate 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
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
0
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
1 /*
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
2 * Copyright (C) 2018 Guido Berhoerster <guido+set-aside@berhoerster.name>
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
3 *
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
4 * This Source Code Form is subject to the terms of the Mozilla Public
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
5 * License, v. 2.0. If a copy of the MPL was not distributed with this
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
6 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
7 */
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
8
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
9 @import url("chrome://browser/content/extension.css");
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
10 @import url("photon-colors.css");
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
11
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
12 :root {
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
13 --box-shadow-border: inset 0 0 0 1px var(--grey-90-a10);
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
14 --button-highlight-color: var(--grey-90-a10);
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
15 --secondary-text-color: var(--grey-50);
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
16 --font-size-display-20: 36px;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
17 --font-size-title-20: 17px;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
18 --font-size-body-20: 15px;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
19 --font-size-body-10: 13px;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
20
2
49ec0da1e698 Replace tab list scroll bar with scroll buttons
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents: 0
diff changeset
21 --scroll-button-image-width: 24px;
49ec0da1e698 Replace tab list scroll bar with scroll buttons
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents: 0
diff changeset
22 --scroll-button-image-height: var(--scroll-button-image-width);
49ec0da1e698 Replace tab list scroll bar with scroll buttons
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents: 0
diff changeset
23 --scroll-button-padding: 4px;
49ec0da1e698 Replace tab list scroll bar with scroll buttons
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents: 0
diff changeset
24 --scroll-button-width: calc(2 * var(--scroll-button-padding) +
49ec0da1e698 Replace tab list scroll bar with scroll buttons
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents: 0
diff changeset
25 var(--scroll-button-image-width));
49ec0da1e698 Replace tab list scroll bar with scroll buttons
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents: 0
diff changeset
26 --scroll-button-height: var(--scroll-button-width);
49ec0da1e698 Replace tab list scroll bar with scroll buttons
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents: 0
diff changeset
27 --scroll-button-highlight: var(--grey-90-a10);
49ec0da1e698 Replace tab list scroll bar with scroll buttons
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents: 0
diff changeset
28
0
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
29 --thumbnail-width: 224px;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
30 --thumbnail-height: 128px;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
31 --thumbnail-shadow: var(--box-shadow-border), 0 1px 4px var(--grey-90-a30);
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
32 --thumbnail-shadow-highlight: var(--thumbnail-shadow),
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
33 0 0 0 5px var(--grey-30);
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
34
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
35 --remove-tab-collection-image-width: 16px;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
36 --remove-tab-collection-image-height:
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
37 var(--remove-tab-collection-image-width);
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
38 --remove-tab-collection-padding: 2px;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
39 --remove-tab-collection-width: calc(2 * var(--remove-tab-collection-padding) +
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
40 var(--remove-tab-collection-image-width));
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
41 --remove-tab-collection-height: var(--remove-tab-collection-width);
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
42
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
43 --favicon-image-width: 32px;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
44 --favicon-padding: 4px;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
45 --favicon-width: calc(2 * var(--favicon-padding) +
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
46 var(--favicon-image-width));
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
47 --favicon-height: var(--favicon-width);
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
48 --favicon-overlap: 6px;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
49
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
50 --remove-tab-image-width: 16px;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
51 --remove-tab-image-height: var(--remove-tab-image-width);
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
52 --remove-tab-padding: 4px;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
53 --remove-tab-width: calc(var(--remove-tab-padding) * 2 +
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
54 var(--remove-tab-image-width));
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
55 --remove-tab-height: var(--remove-tab-width);
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
56 --remove-tab-overlap: calc(var(--remove-tab-width) / 2);
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
57 }
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
58
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
59 :any-link {
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
60 text-decoration: none;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
61 color: inherit;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
62 }
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
63
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
64 body {
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
65 font-size: var(--font-size-body-20);
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
66 font-weight: 400;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
67 }
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
68
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
69 figure {
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
70 margin: 0;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
71 }
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
72
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
73 #message {
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
74 margin-top: 1em;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
75 color: var(--secondary-text-color);
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
76 font-size: var(--font-size-display-20);
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
77 font-weight: 300;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
78 text-align: center;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
79 }
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
80
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
81 #tab-collections:not(:empty) ~ #message {
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
82 display: none;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
83 }
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
84
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
85 #tab-collections {
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
86 display: flex;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
87 flex-direction: column;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
88 }
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
89
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
90 .tab-collection {
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
91 margin: 16px 0;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
92 }
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
93
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
94 .tab-collection-header {
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
95 display: flex;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
96 flex-wrap: wrap;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
97 align-items: baseline;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
98 margin: 4px;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
99 }
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
100
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
101 .tab-collection-title {
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
102 font-size: var(--font-size-title-20);
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
103 font-weight: 500;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
104 }
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
105
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
106 .tab-collection-title,
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
107 .tab-collection-ctime {
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
108 white-space: nowrap;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
109 margin: 0 0 0 6px;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
110 }
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
111
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
112 .tab-collection-ctime {
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
113 font-size: var(--font-size-body-10);
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
114 color: var(--secondary-text-color);
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
115 }
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
116
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
117 .tab-collection-actions,
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
118 .tab-collection-tabs {
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
119 display: flex;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
120 padding-left: 0;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
121 margin: 0;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
122 list-style: none;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
123 }
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
124
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
125 .tab-collection-actions {
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
126 font-size: var(--font-size-body-10);
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
127 justify-content: flex-end;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
128 white-space: nowrap;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
129 margin: 4px 8px;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
130 align-items: center;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
131 }
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
132
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
133 .tab-collection-actions > li + li {
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
134 margin-left: 8px;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
135 }
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
136
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
137 .remove-tab-collection {
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
138 width: var(--remove-tab-collection-width);
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
139 height: var(--remove-tab-collection-height);
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
140 background: url(../images/remove.svg) var(--remove-tab-collection-padding)/var(--remove-tab-collection-image-width) no-repeat;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
141 border-radius: 2px;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
142 }
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
143
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
144 .remove-tab-collection:hover {
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
145 background-color: var(--grey-90-a10);
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
146 }
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
147
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
148 .restore-tab-collection {
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
149 cursor: pointer;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
150 }
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
151
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
152 .restore-tab-collection:hover {
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
153 text-decoration: underline;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
154 }
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
155
2
49ec0da1e698 Replace tab list scroll bar with scroll buttons
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents: 0
diff changeset
156 .tabs-scroll-button {
49ec0da1e698 Replace tab list scroll bar with scroll buttons
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents: 0
diff changeset
157 visibility: hidden;
49ec0da1e698 Replace tab list scroll bar with scroll buttons
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents: 0
diff changeset
158 position: absolute;
49ec0da1e698 Replace tab list scroll bar with scroll buttons
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents: 0
diff changeset
159 margin-top: calc(var(--remove-tab-overlap) + var(--thumbnail-height) / 2 -
49ec0da1e698 Replace tab list scroll bar with scroll buttons
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents: 0
diff changeset
160 var(--scroll-button-height) / 2);
49ec0da1e698 Replace tab list scroll bar with scroll buttons
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents: 0
diff changeset
161 width: var(--scroll-button-width);
49ec0da1e698 Replace tab list scroll bar with scroll buttons
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents: 0
diff changeset
162 height: var(--scroll-button-height);
49ec0da1e698 Replace tab list scroll bar with scroll buttons
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents: 0
diff changeset
163 background: url(../images/scroll-arrow.svg)
49ec0da1e698 Replace tab list scroll bar with scroll buttons
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents: 0
diff changeset
164 var(--scroll-button-padding)/var(--scroll-button-image-width) no-repeat
49ec0da1e698 Replace tab list scroll bar with scroll buttons
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents: 0
diff changeset
165 var(--scroll-button-highlight);
49ec0da1e698 Replace tab list scroll bar with scroll buttons
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents: 0
diff changeset
166 border-radius: 4px;
49ec0da1e698 Replace tab list scroll bar with scroll buttons
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents: 0
diff changeset
167 z-index: 999;
49ec0da1e698 Replace tab list scroll bar with scroll buttons
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents: 0
diff changeset
168 transition: visibility 300ms;
49ec0da1e698 Replace tab list scroll bar with scroll buttons
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents: 0
diff changeset
169 }
49ec0da1e698 Replace tab list scroll bar with scroll buttons
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents: 0
diff changeset
170
49ec0da1e698 Replace tab list scroll bar with scroll buttons
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents: 0
diff changeset
171 .tab-collection-tabs-container:hover .tabs-scroll-button.scroll-visible {
49ec0da1e698 Replace tab list scroll bar with scroll buttons
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents: 0
diff changeset
172 visibility: visible;
49ec0da1e698 Replace tab list scroll bar with scroll buttons
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents: 0
diff changeset
173 }
49ec0da1e698 Replace tab list scroll bar with scroll buttons
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents: 0
diff changeset
174
49ec0da1e698 Replace tab list scroll bar with scroll buttons
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents: 0
diff changeset
175 .tabs-scroll-button.scroll-left {
49ec0da1e698 Replace tab list scroll bar with scroll buttons
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents: 0
diff changeset
176 left: 0;
49ec0da1e698 Replace tab list scroll bar with scroll buttons
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents: 0
diff changeset
177 }
49ec0da1e698 Replace tab list scroll bar with scroll buttons
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents: 0
diff changeset
178
49ec0da1e698 Replace tab list scroll bar with scroll buttons
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents: 0
diff changeset
179 .tabs-scroll-button.scroll-right {
49ec0da1e698 Replace tab list scroll bar with scroll buttons
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents: 0
diff changeset
180 transform: scaleX(-1);
49ec0da1e698 Replace tab list scroll bar with scroll buttons
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents: 0
diff changeset
181 right: 0;
49ec0da1e698 Replace tab list scroll bar with scroll buttons
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents: 0
diff changeset
182 }
49ec0da1e698 Replace tab list scroll bar with scroll buttons
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents: 0
diff changeset
183
0
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
184 .tab-collection-tabs {
2
49ec0da1e698 Replace tab list scroll bar with scroll buttons
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents: 0
diff changeset
185 overflow: hidden;
49ec0da1e698 Replace tab list scroll bar with scroll buttons
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents: 0
diff changeset
186 scroll-behavior: smooth;
0
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
187 }
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
188
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
189 .tab-item {
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
190 display: block;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
191 position: relative;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
192 width: var(--thumbnail-width);
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
193 margin: var(--remove-tab-overlap) var(--remove-tab-overlap) 4px
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
194 var(--remove-tab-overlap);
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
195 }
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
196
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
197 .tab-link:any-link:hover .tab-thumbnail,
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
198 .tab-link:any-link:focus .tab-thumbnail,
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
199 .tab-link:any-link:active .tab-thumbnail {
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
200 box-shadow: var(--thumbnail-shadow-highlight);
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
201 }
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
202
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
203 .tab-thumbnail {
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
204 display: block;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
205 margin: 0;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
206 border-radius: 6px;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
207 box-shadow: var(--thumbnail-shadow);
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
208 transition: box-shadow 150ms;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
209 }
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
210
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
211 .tab-title {
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
212 font-size: var(--font-size-body-10);
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
213 white-space: nowrap;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
214 overflow: hidden;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
215 text-overflow: ellipsis;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
216 min-width: 0;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
217 margin: calc(var(--favicon-overlap) + 2px) 0 0 0;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
218 }
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
219
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
220 .tab-favicon {
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
221 position: absolute;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
222 top: calc(var(--thumbnail-height) - var(--favicon-height) +
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
223 var(--favicon-overlap));
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
224 right: calc(-1 * var(--favicon-overlap));
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
225 width: var(--favicon-width);
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
226 height: var(--favicon-height);
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
227 padding: var(--favicon-padding);
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
228 background-color: var(--white-100);
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
229 border-radius: 6px;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
230 box-shadow: inset 0 0 0 1px var(--grey-90-a10);
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
231 cursor: pointer;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
232 }
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
233
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
234 .remove-tab {
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
235 position: absolute;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
236 top: calc(-1 * var(--remove-tab-overlap));
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
237 right: calc(-1 * var(--remove-tab-overlap));
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
238 width: var(--remove-tab-width);
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
239 height: var(--remove-tab-height);
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
240 background: url(../images/remove.svg)
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
241 var(--remove-tab-padding)/var(--remove-tab-image-width) no-repeat
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
242 var(--white-100);
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
243 border-radius: 100%;
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
244 box-shadow: var(--box-shadow-border);
d13d59494613 Initial revision
Guido Berhoerster <guido+set-aside@berhoerster.name>
parents:
diff changeset
245 }