1 /* This Source Code Form is subject to the terms of the Mozilla Public
2 * License, v. 2.0. If a copy of the MPL was not distributed with this
3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
5 /* Tile grid ------------------------------------------------------------- */
11 *****************************************************
12 The following rules define the key tile dimensions
13 They are (also) snarfed via the CSSOM as the dimensions used in the #richgrid binding
14 *****************************************************
17 width: @grid_double_column_width@
;
18 height: @grid_row_height@
;
20 richgriditem
[tiletype
="thumbnail"] {
21 width: @grid_double_column_width@
;
22 height: @grid_double_row_height@
;
24 richgriditem
[search
] {
25 width: @grid_search_width@
;
26 height: @grid_row_height@
;
28 richgriditem
[compact
] {
30 height: @compactgrid_row_height@
;
33 *****************************************************
40 richgrid
> .richgrid-grid
{
41 -moz-column-width: @grid_double_column_width@
; /* tile width (2x unit + gutter) */
42 min-width: @grid_double_column_width@
; /* min 1 column */
43 min-height: @grid_double_row_height@
; /* 2 rows (or 1 double rows) minimum; multiple of tile_height */
44 -moz-column-fill: auto
; /* do not attempt to balance content between columns */
46 -moz-column-count: auto
;
48 box-sizing: content-box
;
49 overflow-x: hidden
; /* clipping will only kick in if an explicit width is set */
50 transition: 100ms transform ease-out
;
53 richgrid
[search
] > .richgrid-grid
{
54 -moz-column-width: auto
;
61 width: @grid_double_column_width@
;
62 height: @grid_row_height@
;
63 box-sizing: border-box
;
72 /* background-color colors the tile-edge,
73 and will normally be overridden with a favicon-based color */
74 background-color: #ccc;
75 background-origin: padding-box
;
76 /* content positioning within the grid "cell"
77 gives us the gutters/spacing between tiles */
78 top: 2px; right: @tile_side_margin@
; bottom: 10px; left: @tile_side_margin@
;
79 border: @metro_border_thin@ solid @tile_border_color@
;
80 box-shadow: 0 0 5px 0 rgba
(0, 0, 0, 0.1);
81 transition: 150ms transform ease-out
,
82 @metro_animation_duration@ background-color @metro_animation_easing@
;
85 .tile-start-container {
92 background-color: #fff;
94 richgriditem:-moz-locale-dir
(rtl
) .tile-start-container
{
99 richgriditem
[search
] .tile-start-container
{
100 background-color: transparent
;
103 richgriditem:not
([tiletype
="thumbnail"]) .tile-start-container
{
104 background-image: none
!important
;
112 /* default color, may be overriden by a favicon-based color */
113 background-color: white
;
114 border: 1px solid
#ccc;
119 .tile-icon-box > image {
123 list-style-image: url
("chrome://browser/skin/images/identity-icons-generic.png");
126 /* for larger favicons (which includes the fallback icon) */
127 richgriditem:not
([iconURI
]) .tile-icon-box
,
128 richgriditem
[iconURI
=""] .tile-icon-box
,
129 richgriditem
[iconsize
="large"] .tile-icon-box
{
130 border-color: transparent
!important
;
134 richgriditem
[iconsize
="large"] .tile-icon-box
> image
,
135 .tile-icon-box > image[src=""] {
140 richgriditem
[search
] .tile-icon-box
{
144 -moz-margin-start: -13px;
148 richgriditem
[search
]:-moz-locale-dir
(rtl
) .tile-icon-box
{
154 richgriditem
[search
][iconsize
="large"] .tile-icon-box
{
159 richgriditem
[search
][iconsize
="large"]:-moz-locale-dir
(rtl
) .tile-icon-box
{
164 richgriditem
[search
][iconsize
="large"] .tile-start-container
{
168 richgriditem
[search
][iconsize
="large"]:-moz-locale-dir
(rtl
) .tile-start-container
{
173 richgriditem
[search
][iconsize
="large"] .tile-icon-box
> image
{
178 richgriditem
[search
] .tile-desc
{
182 richgriditem
[search
] .tile-content
{
190 left: 52px; /* label goes to the end (right) of the favicon */
193 -moz-padding-end: 6px;
195 -moz-padding-start: 12px;
199 -moz-margin-start: 0;
204 text-overflow: ellipsis
;
205 transition: @metro_animation_duration@ background-color @metro_animation_easing@
;
207 richgriditem:-moz-locale-dir
(rtl
) .tile-desc
{
208 right: 52px; /* label goes to the end (left) of the favicon */
212 richgriditem:not
([tiletype
="thumbnail"]) .tile-desc
{
213 background-color: transparent
!important
;
217 richgriditem
.collapsed
{
223 richgriditem
.collapsed
> .tile-content
{
224 transform: scaleY
(0);
225 transition: 150ms transform ease-out
150ms;
228 richgriditem:active
{
232 /* thumbnail variation */
234 richgriditem
[tiletype
="thumbnail"] {
235 width: @grid_double_column_width@
;
236 height: @grid_double_row_height@
;
242 richgriditem
[tiletype
="thumbnail"] .tile-desc
{
249 -moz-padding-end: 8px;
251 -moz-padding-start: 56px;
254 richgriditem
[tiletype
="thumbnail"] > .tile-content
> .tile-desc
{
255 /* ensure thumbnail labels get their color from the parent richgriditem element */
259 /* thumbnail tiles use a screenshot thumbnail as the background */
261 richgriditem
[tiletype
="thumbnail"] > .tile-content
> .tile-start-container
,
262 richgriditem
[tiletype
="thumbnail"] > .tile-content
> .tile-start-container::after
{
263 background-size: cover
;
264 background-position: top left
;
265 background-repeat: no-repeat
;
273 richgriditem
[tiletype
="thumbnail"] > .tile-content
> .tile-start-container::after
{
278 background-color: #fff;
279 background-image: url
("chrome://browser/skin/images/firefox-watermark.png")!important
;
280 transition: @metro_animation_duration@ opacity ease-in
;
283 richgriditem
[tiletype
="thumbnail"]:not
([customImage
]) > .tile-content
> .tile-start-container::after
{
287 richgriditem
[tiletype
="thumbnail"] .tile-icon-box
{
293 box-shadow: 0px 0px 2px 2px rgba
(0, 0, 0, 0.05), 0px 2px 0px rgba
(0, 0, 0, 0.1);
295 richgriditem
[tiletype
="thumbnail"]:-moz-locale-dir
(rtl
) .tile-icon-box
{
300 /* selected tile indicator */
301 richgriditem
[selected
] > .tile-content::after
{
303 pointer-events: none
;
311 background-image: url
(chrome://browser
/skin
/images
/tile-selected-check-hdpi
.png
);
312 background-origin: border-box
;
313 background-repeat: no-repeat
;
314 background-position: right
0 top
0;
315 /* scale the image whatever the dppx */
316 background-size: 35px 35px;
317 border: @metro_border_xthick@ solid @selected_color@
;
319 richgriditem
[selected
]:-moz-locale-dir
(rtl
) > .tile-content::after
{
320 background-position: left
0 top
0;
321 background-image: url
(chrome://browser
/skin
/images
/tile-selected-check-rtl-hdpi
.png
);
324 richgriditem
[crosssliding
] {
328 /* ease the return to original position when cross-sliding */
329 richgriditem:not
([crosssliding
]) {
330 transition: transform ease-out
0.2s;
334 /* tile pinned-state indication */
335 richgriditem
[pinned
] > .tile-content::before
{
346 background-image: url
(chrome://browser
/skin
/images
/pinned-hdpi
.png
);
347 background-position: center
;
348 background-repeat: no-repeat
;
349 /* scale the image whatever the dppx */
350 background-size: 70px 70px;
352 richgriditem
[pinned
]:-moz-locale-dir
(rtl
) > .tile-content::before
{
355 -moz-transform: scaleX
(-1);
359 /* Selected _and_ pinned tiles*/
360 richgriditem
[selected
][pinned
] > .tile-content::before
{
361 background-position: right
-@metro_border_xthick@ top
-@metro_border_xthick@
;
365 richgriditem
[selected
][pinned
]:-moz-locale-dir
(rtl
) > .tile-content::before
{
366 background-position: left
-@metro_border_xthick@ top
-@metro_border_xthick@
;
369 richgriditem
[customColor
] {
373 richgriditem
[bending
] > .tile-content
{
374 transform-origin: center center
;
377 richgriditem
[tiletype
="thumbnail"]:not
([value
]) {
380 richgriditem:not
([value
]) > .tile-content
{
383 /* Empty/unused tiles */
384 richgriditem:not
([value
]) > .tile-content
{
385 box-shadow: 0px 0px 0px 1px rgba
(0, 0, 0, 0.05);
386 background-image: url
("chrome://browser/skin/images/firefox-watermark.png");
387 background-origin: content-box
;
388 background-repeat: no-repeat
;
389 background-color: rgba
(255,255,255, 0.2);
390 background-position: center center
;
391 background-size: @compactgrid_row_height@
;
393 richgriditem
[tiletype
="thumbnail"]:not
([value
]) > .tile-content
{
394 background-size: @grid_row_height@
;
397 /* Snapped-view variation
398 We use the compact, single-column grid treatment for <=320px */
400 @media (max-width: 330px) {
402 richgrid:not
([search
]) > .richgrid-grid
{
403 -moz-column-width: auto
!important
; /* let it flow */
404 -moz-column-count: auto
!important
; /* let it flow */
405 height: auto
; /* let it flow */
407 transition: 100ms transform ease-out
;
411 width: @grid_double_column_width@
;
413 height: @compactgrid_row_height@
;
418 -moz-padding-end: 4px;
420 -moz-padding-start: 4px;
423 richgriditem:not
([search
]) > .tile-content
{