OLD | NEW |
| (Empty) |
1 /* Copyright (c) 2012 The Chromium Authors. All rights reserved. | |
2 * Use of this source code is governed by a BSD-style license that can be | |
3 * found in the LICENSE file. */ | |
4 | |
5 /* Begin top bar */ | |
6 | |
7 #bookmarks_title_wrapper { | |
8 border-bottom: 1px solid #d0d0d0; | |
9 display: -webkit-box; | |
10 font-size: 17px; | |
11 height: 44px; | |
12 line-height: 44px; | |
13 overflow: hidden; | |
14 white-space: nowrap; | |
15 } | |
16 | |
17 .section-title { | |
18 -webkit-box-flex: 1; | |
19 -webkit-box-orient: horizontal; | |
20 display: -webkit-box; | |
21 overflow: hidden; | |
22 position: absolute; | |
23 } | |
24 | |
25 .section-title-mask { | |
26 -webkit-box-flex: 1; | |
27 overflow: hidden; | |
28 position: relative; | |
29 } | |
30 | |
31 .overflow-left-mask { | |
32 background: linear-gradient( | |
33 to right, | |
34 rgba(50,50,50,0.3), | |
35 rgba(0,0,0,0) | |
36 ); | |
37 height: 100%; | |
38 left: 0; | |
39 position: absolute; | |
40 top: 0; | |
41 width: 10px; | |
42 } | |
43 | |
44 .overflow-right-mask { | |
45 background: linear-gradient( | |
46 to right, | |
47 rgba(0,0,0,0), | |
48 rgba(50,50,50,0.2) | |
49 ); | |
50 height: 100%; | |
51 position: absolute; | |
52 right: 0; | |
53 top: 0; | |
54 width: 10px; | |
55 } | |
56 | |
57 .bookmark-separator { | |
58 background-image: url(images/breadcrumb_mdpi.png); | |
59 background-position: center; | |
60 background-repeat: no-repeat; | |
61 background-size: 8px 20px; /* this matches the background image size */ | |
62 height: 44px; | |
63 width: 10px; | |
64 } | |
65 | |
66 html[dir='rtl'] .bookmark-separator { | |
67 -webkit-transform: scaleX(-1); | |
68 } | |
69 | |
70 #bookmarks_title_wrapper .title-crumb { | |
71 color: #555; | |
72 margin: 0 10px; | |
73 } | |
74 | |
75 #bookmarks_title_wrapper .title-crumb-active { | |
76 font-weight: bold; | |
77 margin-right: 0; | |
78 padding-right: 10px; | |
79 } | |
80 | |
81 /* Begin Bookmark Cell Items */ | |
82 | |
83 .favicon-cell { | |
84 -webkit-tap-highlight-color: transparent; | |
85 display: inline-block; | |
86 height: 105px; | |
87 padding: 11px; | |
88 text-align: center; | |
89 vertical-align: top; | |
90 width: 80px; | |
91 } | |
92 | |
93 .favicon-cell-active { | |
94 -webkit-tap-highlight-color: transparent; | |
95 background: rgba(51, 181, 229, .4); | |
96 } | |
97 | |
98 .favicon-box { | |
99 -webkit-border-radius: 10px; | |
100 -webkit-box-orient: vertical; | |
101 -webkit-box-pack: center; | |
102 background-repeat: no-repeat; | |
103 background-size: 100% 100%; | |
104 display: -webkit-box; | |
105 height: 64px; /* icon container size */ | |
106 margin: auto; /* horizontally center */ | |
107 position: relative; | |
108 text-align: center; | |
109 width: 64px; /* icon container size */ | |
110 } | |
111 | |
112 .favicon-box.folder { | |
113 background-image: url(images/bookmark_folder_mdpi.png); | |
114 } | |
115 | |
116 .favicon-cell .title { | |
117 -webkit-box-orient: vertical; | |
118 -webkit-line-clamp: 2; | |
119 display: -webkit-box; | |
120 height: 30px; | |
121 line-height: 18px; | |
122 overflow: hidden; | |
123 padding-bottom: 8px; | |
124 padding-top: 10px; | |
125 text-overflow: ellipsis; | |
126 word-wrap: break-word; | |
127 } | |
128 | |
129 .favicon-icon { | |
130 background-position: center; | |
131 background-repeat: no-repeat; | |
132 height: 100%; | |
133 width: 100%; | |
134 } | |
135 | |
136 .favicon-icon.document { | |
137 left: 0; | |
138 position: absolute; | |
139 top: 0; | |
140 } | |
141 | |
142 .bookmark-border { | |
143 background-image: url(images/bookmark_border_mdpi.png); | |
144 background-size: 100%; | |
145 height: 64px; | |
146 left: 0; | |
147 position: absolute; | |
148 top: 0; | |
149 width: 64px; | |
150 } | |
151 | |
152 .favicon-box.document { | |
153 /* a 'document' favicon looks like a little web page with the favicon | |
154 in top left corner */ | |
155 background-image: url(images/bookmark_bg_mdpi.png); | |
156 margin: auto; /* horizontally center */ | |
157 margin-bottom: 0; | |
158 margin-top: 0; | |
159 } | |
160 | |
161 .favicon-box.document .fold-container { | |
162 position: absolute; | |
163 right: 7px; | |
164 top: 3px; | |
165 } | |
166 | |
167 .favicon-box.document .fold { | |
168 box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.2); | |
169 height: 12px; | |
170 width: 12px; | |
171 } | |
172 | |
173 .favicon-box.document .active-shade { | |
174 /* Shade overlay for favicon's when pressed */ | |
175 background-color: #000; | |
176 height: 100%; | |
177 left: 0; | |
178 opacity: 0; | |
179 position: absolute; | |
180 top: 0; | |
181 width: 100%; | |
182 } | |
183 | |
184 .favicon-box.document .active-shade:active { | |
185 opacity: 0.15; | |
186 } | |
187 | |
188 .favicon-box.document .color-strip { | |
189 /* the color strip is an overlay across the bottom of the icon */ | |
190 border-bottom-left-radius: 2px; | |
191 border-bottom-right-radius: 2px; | |
192 bottom: 3px; | |
193 height: 4px; | |
194 left: 7px; | |
195 position: absolute; | |
196 width: 50px; | |
197 } | |
198 | |
199 .favicon-box.document .favicon-icon { | |
200 background-size: 16px 16px; | |
201 } | |
202 | |
203 .favicon-icon.touch-icon { | |
204 background-size: 100%; | |
205 border-radius: 16px; /* remove any junk in the corners of the favicon */ | |
206 height: 57px; /* touch-icon size */ | |
207 margin: auto; /* horizontally center */ | |
208 margin-bottom: 4px; | |
209 margin-top: 3px; /* (64 - 57) / 2 = 3.5 */ | |
210 width: 57px; /* touch-icon size */ | |
211 } | |
212 | |
213 @media screen and (-webkit-min-device-pixel-ratio: 1.32) { | |
214 .favicon-box.document { | |
215 background-image: url(images/bookmark_bg_tvdpi.png); | |
216 } | |
217 .bookmark-border { | |
218 background-image: url(images/bookmark_border_tvdpi.png); | |
219 } | |
220 .favicon-box.folder { | |
221 background-image: url(images/bookmark_folder_tvdpi.png); | |
222 } | |
223 .bookmark-separator { | |
224 background-image: url(images/breadcrumb_tvdpi.png); | |
225 } | |
226 | |
227 /* tweaked spacing, presumably because of rounding error */ | |
228 .favicon-box { | |
229 width: 65px; | |
230 } | |
231 .favicon-box.document .fold-container { | |
232 right: 8px; | |
233 } | |
234 .favicon-box.document .color-strip { | |
235 left: 8px; | |
236 width: 48px; | |
237 } | |
238 } | |
239 | |
240 @media screen and (-webkit-min-device-pixel-ratio: 1.5) { | |
241 .favicon-box.document { | |
242 background-image: url(images/bookmark_bg_hdpi.png); | |
243 } | |
244 .bookmark-border { | |
245 background-image: url(images/bookmark_border_hdpi.png); | |
246 } | |
247 .favicon-box.folder { | |
248 background-image: url(images/bookmark_folder_hdpi.png); | |
249 } | |
250 .bookmark-separator { | |
251 background-image: url(images/breadcrumb_hdpi.png); | |
252 } | |
253 } | |
254 | |
255 @media screen and (-webkit-min-device-pixel-ratio: 2.0) { | |
256 .favicon-box.document { | |
257 background-image: url(images/bookmark_bg_xhdpi.png); | |
258 } | |
259 .bookmark-border { | |
260 background-image: url(images/bookmark_border_xhdpi.png); | |
261 } | |
262 .favicon-box.folder { | |
263 background-image: url(images/bookmark_folder_xhdpi.png); | |
264 } | |
265 .bookmark-separator { | |
266 background-image: url(images/breadcrumb_xhdpi.png); | |
267 } | |
268 } | |
OLD | NEW |