The Tor Browser / file comparison
comparison: browser/metro/theme/tiles.css
browser/metro/theme/tiles.css
- changeset 0
- 6474c204b198
equal
deleted
inserted
replaced
| -1:000000000000 | 0:5c6ba89320e8 |
|---|---|
| 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/. */ | |
| 4 | |
| 5 /* Tile grid ------------------------------------------------------------- */ | |
| 6 | |
| 7 %filter substitution | |
| 8 %include defines.inc | |
| 9 | |
| 10 /* | |
| 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 ***************************************************** | |
| 15 */ | |
| 16 richgriditem { | |
| 17 width: @grid_double_column_width@; | |
| 18 height: @grid_row_height@; | |
| 19 } | |
| 20 richgriditem[tiletype="thumbnail"] { | |
| 21 width: @grid_double_column_width@; | |
| 22 height: @grid_double_row_height@; | |
| 23 } | |
| 24 richgriditem[search] { | |
| 25 width: @grid_search_width@; | |
| 26 height: @grid_row_height@; | |
| 27 } | |
| 28 richgriditem[compact] { | |
| 29 width: auto; | |
| 30 height: @compactgrid_row_height@; | |
| 31 } | |
| 32 /* | |
| 33 ***************************************************** | |
| 34 */ | |
| 35 richgrid { | |
| 36 display: -moz-box; | |
| 37 overflow: hidden; | |
| 38 } | |
| 39 | |
| 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 */ | |
| 45 -moz-column-gap: 0; | |
| 46 -moz-column-count: auto; | |
| 47 display: block; | |
| 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; | |
| 51 } | |
| 52 | |
| 53 richgrid[search] > .richgrid-grid { | |
| 54 -moz-column-width: auto; | |
| 55 min-width: 0; | |
| 56 } | |
| 57 | |
| 58 richgriditem { | |
| 59 display: block; | |
| 60 position: relative; | |
| 61 width: @grid_double_column_width@; | |
| 62 height: @grid_row_height@; | |
| 63 box-sizing: border-box; | |
| 64 -moz-column-gap: 0; | |
| 65 overflow:hidden; | |
| 66 cursor: default; | |
| 67 } | |
| 68 | |
| 69 .tile-content { | |
| 70 display: block; | |
| 71 position: absolute; | |
| 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@; | |
| 83 } | |
| 84 | |
| 85 .tile-start-container { | |
| 86 position: absolute; | |
| 87 top: 0; | |
| 88 bottom: 0; | |
| 89 right: 0; | |
| 90 left: 10px; | |
| 91 padding: 8px; | |
| 92 background-color: #fff; | |
| 93 } | |
| 94 richgriditem:-moz-locale-dir(rtl) .tile-start-container { | |
| 95 right: 10px; | |
| 96 left: 0; | |
| 97 } | |
| 98 | |
| 99 richgriditem[search] .tile-start-container { | |
| 100 background-color: transparent; | |
| 101 } | |
| 102 | |
| 103 richgriditem:not([tiletype="thumbnail"]) .tile-start-container { | |
| 104 background-image: none!important; | |
| 105 } | |
| 106 | |
| 107 .tile-icon-box { | |
| 108 position: absolute; | |
| 109 top: 50%; | |
| 110 margin-top: -17px; | |
| 111 padding: 8px; | |
| 112 /* default color, may be overriden by a favicon-based color */ | |
| 113 background-color: white; | |
| 114 border: 1px solid #ccc; | |
| 115 border-radius: 1px; | |
| 116 opacity: 1.0; | |
| 117 } | |
| 118 | |
| 119 .tile-icon-box > image { | |
| 120 display: block; | |
| 121 width: 16px; | |
| 122 height: 16px; | |
| 123 list-style-image: url("chrome://browser/skin/images/identity-icons-generic.png"); | |
| 124 } | |
| 125 | |
| 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; | |
| 131 padding: 4px; | |
| 132 } | |
| 133 | |
| 134 richgriditem[iconsize="large"] .tile-icon-box > image, | |
| 135 .tile-icon-box > image[src=""] { | |
| 136 width: 24px; | |
| 137 height: 24px; | |
| 138 } | |
| 139 | |
| 140 richgriditem[search] .tile-icon-box { | |
| 141 padding: 0; | |
| 142 border: 0; | |
| 143 left: 50%; | |
| 144 -moz-margin-start: -13px; | |
| 145 margin-top: -8px; | |
| 146 } | |
| 147 | |
| 148 richgriditem[search]:-moz-locale-dir(rtl) .tile-icon-box { | |
| 149 right: 50%; | |
| 150 left: auto; | |
| 151 } | |
| 152 | |
| 153 | |
| 154 richgriditem[search][iconsize="large"] .tile-icon-box { | |
| 155 left: 0; | |
| 156 top: 0; | |
| 157 margin: 0; | |
| 158 } | |
| 159 richgriditem[search][iconsize="large"]:-moz-locale-dir(rtl) .tile-icon-box { | |
| 160 right: 0; | |
| 161 left: auto; | |
| 162 } | |
| 163 | |
| 164 richgriditem[search][iconsize="large"] .tile-start-container { | |
| 165 left: 0; | |
| 166 padding: 0; | |
| 167 } | |
| 168 richgriditem[search][iconsize="large"]:-moz-locale-dir(rtl) .tile-start-container { | |
| 169 left: auto; | |
| 170 right: 0; | |
| 171 } | |
| 172 | |
| 173 richgriditem[search][iconsize="large"] .tile-icon-box > image { | |
| 174 width: 74px; | |
| 175 height: 74px; | |
| 176 } | |
| 177 | |
| 178 richgriditem[search] .tile-desc { | |
| 179 display: none; | |
| 180 } | |
| 181 | |
| 182 richgriditem[search] .tile-content { | |
| 183 border: 0; | |
| 184 } | |
| 185 | |
| 186 .tile-desc { | |
| 187 display: block; | |
| 188 position: absolute; | |
| 189 top: 6px; | |
| 190 left: 52px; /* label goes to the end (right) of the favicon */ | |
| 191 right: 0; | |
| 192 padding-top: 1em; | |
| 193 -moz-padding-end: 6px; | |
| 194 padding-bottom: 6px; | |
| 195 -moz-padding-start: 12px; | |
| 196 background: white; | |
| 197 color: #333; | |
| 198 margin: 0; | |
| 199 -moz-margin-start: 0; | |
| 200 display: block; | |
| 201 font-size: 16px; | |
| 202 overflow: hidden; | |
| 203 white-space: nowrap; | |
| 204 text-overflow: ellipsis; | |
| 205 transition: @metro_animation_duration@ background-color @metro_animation_easing@; | |
| 206 } | |
| 207 richgriditem:-moz-locale-dir(rtl) .tile-desc { | |
| 208 right: 52px; /* label goes to the end (left) of the favicon */ | |
| 209 left: 0; | |
| 210 } | |
| 211 | |
| 212 richgriditem:not([tiletype="thumbnail"]) .tile-desc { | |
| 213 background-color: transparent!important; | |
| 214 } | |
| 215 | |
| 216 | |
| 217 richgriditem.collapsed { | |
| 218 height: 0!important; | |
| 219 overflow: hidden; | |
| 220 opacity: 0; | |
| 221 } | |
| 222 | |
| 223 richgriditem.collapsed > .tile-content { | |
| 224 transform: scaleY(0); | |
| 225 transition: 150ms transform ease-out 150ms; | |
| 226 } | |
| 227 | |
| 228 richgriditem:active { | |
| 229 z-index: 2; | |
| 230 } | |
| 231 | |
| 232 /* thumbnail variation */ | |
| 233 | |
| 234 richgriditem[tiletype="thumbnail"] { | |
| 235 width: @grid_double_column_width@; | |
| 236 height: @grid_double_row_height@; | |
| 237 -moz-box-pack: end; | |
| 238 padding: 0px; | |
| 239 color: #1a1a1a; | |
| 240 } | |
| 241 | |
| 242 richgriditem[tiletype="thumbnail"] .tile-desc { | |
| 243 margin: 0; | |
| 244 top: auto; | |
| 245 bottom: 0; | |
| 246 left: 0; | |
| 247 right: 0; | |
| 248 padding-top: 4px; | |
| 249 -moz-padding-end: 8px; | |
| 250 padding-bottom: 4px; | |
| 251 -moz-padding-start: 56px; | |
| 252 } | |
| 253 | |
| 254 richgriditem[tiletype="thumbnail"] > .tile-content > .tile-desc { | |
| 255 /* ensure thumbnail labels get their color from the parent richgriditem element */ | |
| 256 color: inherit; | |
| 257 } | |
| 258 | |
| 259 /* thumbnail tiles use a screenshot thumbnail as the background */ | |
| 260 | |
| 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; | |
| 266 position: absolute; | |
| 267 top: 0; | |
| 268 bottom: 0; | |
| 269 right: 0; | |
| 270 left: 0; | |
| 271 } | |
| 272 | |
| 273 richgriditem[tiletype="thumbnail"] > .tile-content > .tile-start-container::after { | |
| 274 pointer-events:none; | |
| 275 content: ""; | |
| 276 display: block; | |
| 277 opacity: 0; | |
| 278 background-color: #fff; | |
| 279 background-image: url("chrome://browser/skin/images/firefox-watermark.png")!important; | |
| 280 transition: @metro_animation_duration@ opacity ease-in; | |
| 281 } | |
| 282 | |
| 283 richgriditem[tiletype="thumbnail"]:not([customImage]) > .tile-content > .tile-start-container::after { | |
| 284 opacity: 1; | |
| 285 } | |
| 286 | |
| 287 richgriditem[tiletype="thumbnail"] .tile-icon-box { | |
| 288 top: auto; | |
| 289 left: 10px; | |
| 290 bottom: 6px; | |
| 291 margin-top: 0; | |
| 292 z-index: 1; | |
| 293 box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.05), 0px 2px 0px rgba(0, 0, 0, 0.1); | |
| 294 } | |
| 295 richgriditem[tiletype="thumbnail"]:-moz-locale-dir(rtl) .tile-icon-box { | |
| 296 left: auto; | |
| 297 right: 10px; | |
| 298 } | |
| 299 | |
| 300 /* selected tile indicator */ | |
| 301 richgriditem[selected] > .tile-content::after { | |
| 302 content: ""; | |
| 303 pointer-events: none; | |
| 304 display: block; | |
| 305 position: absolute; | |
| 306 top: 0; | |
| 307 right: 0; | |
| 308 bottom: 0; | |
| 309 left: 0; | |
| 310 z-index: 1; | |
| 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@; | |
| 318 } | |
| 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); | |
| 322 } | |
| 323 | |
| 324 richgriditem[crosssliding] { | |
| 325 z-index: 10; | |
| 326 } | |
| 327 | |
| 328 /* ease the return to original position when cross-sliding */ | |
| 329 richgriditem:not([crosssliding]) { | |
| 330 transition: transform ease-out 0.2s; | |
| 331 } | |
| 332 | |
| 333 | |
| 334 /* tile pinned-state indication */ | |
| 335 richgriditem[pinned] > .tile-content::before { | |
| 336 pointer-events:none; | |
| 337 content: ""; | |
| 338 display: block; | |
| 339 position: absolute; | |
| 340 top: 0; | |
| 341 right: 0; | |
| 342 left: auto; | |
| 343 z-index: 1; | |
| 344 width: 35px; | |
| 345 height: 35px; | |
| 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; | |
| 351 } | |
| 352 richgriditem[pinned]:-moz-locale-dir(rtl) > .tile-content::before { | |
| 353 left: 0; | |
| 354 right: auto; | |
| 355 -moz-transform: scaleX(-1); | |
| 356 } | |
| 357 | |
| 358 | |
| 359 /* Selected _and_ pinned tiles*/ | |
| 360 richgriditem[selected][pinned] > .tile-content::before { | |
| 361 background-position: right -@metro_border_xthick@ top -@metro_border_xthick@; | |
| 362 width: 70px; | |
| 363 height: 70px; | |
| 364 } | |
| 365 richgriditem[selected][pinned]:-moz-locale-dir(rtl) > .tile-content::before { | |
| 366 background-position: left -@metro_border_xthick@ top -@metro_border_xthick@; | |
| 367 } | |
| 368 | |
| 369 richgriditem[customColor] { | |
| 370 color: #f1f1f1; | |
| 371 } | |
| 372 | |
| 373 richgriditem[bending] > .tile-content { | |
| 374 transform-origin: center center; | |
| 375 } | |
| 376 | |
| 377 richgriditem[tiletype="thumbnail"]:not([value]) { | |
| 378 visibility: visible; | |
| 379 } | |
| 380 richgriditem:not([value]) > .tile-content { | |
| 381 padding: 10px 14px; | |
| 382 } | |
| 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@; | |
| 392 } | |
| 393 richgriditem[tiletype="thumbnail"]:not([value]) > .tile-content { | |
| 394 background-size: @grid_row_height@; | |
| 395 } | |
| 396 | |
| 397 /* Snapped-view variation | |
| 398 We use the compact, single-column grid treatment for <=320px */ | |
| 399 | |
| 400 @media (max-width: 330px) { | |
| 401 | |
| 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 */ | |
| 406 min-width: 280px; | |
| 407 transition: 100ms transform ease-out; | |
| 408 } | |
| 409 | |
| 410 richgriditem { | |
| 411 width: @grid_double_column_width@; | |
| 412 overflow: hidden; | |
| 413 height: @compactgrid_row_height@; | |
| 414 } | |
| 415 | |
| 416 .tile-desc { | |
| 417 padding-top: 0.5em; | |
| 418 -moz-padding-end: 4px; | |
| 419 padding-bottom: 4px; | |
| 420 -moz-padding-start: 4px; | |
| 421 } | |
| 422 | |
| 423 richgriditem:not([search]) > .tile-content { | |
| 424 left: 0; | |
| 425 right: 0; | |
| 426 } | |
| 427 | |
| 428 richgriditem { | |
| 429 width: auto; | |
| 430 } | |
| 431 } |
