Mercurial > addons > firefox-addons > set-aside

comparison sidebar/style/tab-collection-manager.css @ 0:d13d59494613

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