1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/metro/theme/tiles.css Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,431 @@
1.4 +/* This Source Code Form is subject to the terms of the Mozilla Public
1.5 + * License, v. 2.0. If a copy of the MPL was not distributed with this
1.6 + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
1.7 +
1.8 +/* Tile grid ------------------------------------------------------------- */
1.9 +
1.10 +%filter substitution
1.11 +%include defines.inc
1.12 +
1.13 +/*
1.14 + *****************************************************
1.15 + The following rules define the key tile dimensions
1.16 + They are (also) snarfed via the CSSOM as the dimensions used in the #richgrid binding
1.17 + *****************************************************
1.18 + */
1.19 +richgriditem {
1.20 + width: @grid_double_column_width@;
1.21 + height: @grid_row_height@;
1.22 +}
1.23 +richgriditem[tiletype="thumbnail"] {
1.24 + width: @grid_double_column_width@;
1.25 + height: @grid_double_row_height@;
1.26 +}
1.27 +richgriditem[search] {
1.28 + width: @grid_search_width@;
1.29 + height: @grid_row_height@;
1.30 +}
1.31 +richgriditem[compact] {
1.32 + width: auto;
1.33 + height: @compactgrid_row_height@;
1.34 +}
1.35 +/*
1.36 + *****************************************************
1.37 + */
1.38 +richgrid {
1.39 + display: -moz-box;
1.40 + overflow: hidden;
1.41 +}
1.42 +
1.43 +richgrid > .richgrid-grid {
1.44 + -moz-column-width: @grid_double_column_width@; /* tile width (2x unit + gutter) */
1.45 + min-width: @grid_double_column_width@; /* min 1 column */
1.46 + min-height: @grid_double_row_height@; /* 2 rows (or 1 double rows) minimum; multiple of tile_height */
1.47 + -moz-column-fill: auto; /* do not attempt to balance content between columns */
1.48 + -moz-column-gap: 0;
1.49 + -moz-column-count: auto;
1.50 + display: block;
1.51 + box-sizing: content-box;
1.52 + overflow-x: hidden; /* clipping will only kick in if an explicit width is set */
1.53 + transition: 100ms transform ease-out;
1.54 +}
1.55 +
1.56 +richgrid[search] > .richgrid-grid {
1.57 + -moz-column-width: auto;
1.58 + min-width: 0;
1.59 +}
1.60 +
1.61 +richgriditem {
1.62 + display: block;
1.63 + position: relative;
1.64 + width: @grid_double_column_width@;
1.65 + height: @grid_row_height@;
1.66 + box-sizing: border-box;
1.67 + -moz-column-gap: 0;
1.68 + overflow:hidden;
1.69 + cursor: default;
1.70 +}
1.71 +
1.72 +.tile-content {
1.73 + display: block;
1.74 + position: absolute;
1.75 + /* background-color colors the tile-edge,
1.76 + and will normally be overridden with a favicon-based color */
1.77 + background-color: #ccc;
1.78 + background-origin: padding-box;
1.79 + /* content positioning within the grid "cell"
1.80 + gives us the gutters/spacing between tiles */
1.81 + top: 2px; right: @tile_side_margin@; bottom: 10px; left: @tile_side_margin@;
1.82 + border: @metro_border_thin@ solid @tile_border_color@;
1.83 + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
1.84 + transition: 150ms transform ease-out,
1.85 + @metro_animation_duration@ background-color @metro_animation_easing@;
1.86 +}
1.87 +
1.88 +.tile-start-container {
1.89 + position: absolute;
1.90 + top: 0;
1.91 + bottom: 0;
1.92 + right: 0;
1.93 + left: 10px;
1.94 + padding: 8px;
1.95 + background-color: #fff;
1.96 +}
1.97 +richgriditem:-moz-locale-dir(rtl) .tile-start-container {
1.98 + right: 10px;
1.99 + left: 0;
1.100 +}
1.101 +
1.102 +richgriditem[search] .tile-start-container {
1.103 + background-color: transparent;
1.104 +}
1.105 +
1.106 +richgriditem:not([tiletype="thumbnail"]) .tile-start-container {
1.107 + background-image: none!important;
1.108 +}
1.109 +
1.110 +.tile-icon-box {
1.111 + position: absolute;
1.112 + top: 50%;
1.113 + margin-top: -17px;
1.114 + padding: 8px;
1.115 + /* default color, may be overriden by a favicon-based color */
1.116 + background-color: white;
1.117 + border: 1px solid #ccc;
1.118 + border-radius: 1px;
1.119 + opacity: 1.0;
1.120 +}
1.121 +
1.122 +.tile-icon-box > image {
1.123 + display: block;
1.124 + width: 16px;
1.125 + height: 16px;
1.126 + list-style-image: url("chrome://browser/skin/images/identity-icons-generic.png");
1.127 +}
1.128 +
1.129 +/* for larger favicons (which includes the fallback icon) */
1.130 +richgriditem:not([iconURI]) .tile-icon-box,
1.131 +richgriditem[iconURI=""] .tile-icon-box,
1.132 +richgriditem[iconsize="large"] .tile-icon-box {
1.133 + border-color: transparent!important;
1.134 + padding: 4px;
1.135 +}
1.136 +
1.137 +richgriditem[iconsize="large"] .tile-icon-box > image,
1.138 +.tile-icon-box > image[src=""] {
1.139 + width: 24px;
1.140 + height: 24px;
1.141 +}
1.142 +
1.143 +richgriditem[search] .tile-icon-box {
1.144 + padding: 0;
1.145 + border: 0;
1.146 + left: 50%;
1.147 + -moz-margin-start: -13px;
1.148 + margin-top: -8px;
1.149 +}
1.150 +
1.151 +richgriditem[search]:-moz-locale-dir(rtl) .tile-icon-box {
1.152 + right: 50%;
1.153 + left: auto;
1.154 +}
1.155 +
1.156 +
1.157 +richgriditem[search][iconsize="large"] .tile-icon-box {
1.158 + left: 0;
1.159 + top: 0;
1.160 + margin: 0;
1.161 +}
1.162 +richgriditem[search][iconsize="large"]:-moz-locale-dir(rtl) .tile-icon-box {
1.163 + right: 0;
1.164 + left: auto;
1.165 +}
1.166 +
1.167 +richgriditem[search][iconsize="large"] .tile-start-container {
1.168 + left: 0;
1.169 + padding: 0;
1.170 +}
1.171 +richgriditem[search][iconsize="large"]:-moz-locale-dir(rtl) .tile-start-container {
1.172 + left: auto;
1.173 + right: 0;
1.174 +}
1.175 +
1.176 +richgriditem[search][iconsize="large"] .tile-icon-box > image {
1.177 + width: 74px;
1.178 + height: 74px;
1.179 +}
1.180 +
1.181 +richgriditem[search] .tile-desc {
1.182 + display: none;
1.183 +}
1.184 +
1.185 +richgriditem[search] .tile-content {
1.186 + border: 0;
1.187 +}
1.188 +
1.189 +.tile-desc {
1.190 + display: block;
1.191 + position: absolute;
1.192 + top: 6px;
1.193 + left: 52px; /* label goes to the end (right) of the favicon */
1.194 + right: 0;
1.195 + padding-top: 1em;
1.196 + -moz-padding-end: 6px;
1.197 + padding-bottom: 6px;
1.198 + -moz-padding-start: 12px;
1.199 + background: white;
1.200 + color: #333;
1.201 + margin: 0;
1.202 + -moz-margin-start: 0;
1.203 + display: block;
1.204 + font-size: 16px;
1.205 + overflow: hidden;
1.206 + white-space: nowrap;
1.207 + text-overflow: ellipsis;
1.208 + transition: @metro_animation_duration@ background-color @metro_animation_easing@;
1.209 +}
1.210 +richgriditem:-moz-locale-dir(rtl) .tile-desc {
1.211 + right: 52px; /* label goes to the end (left) of the favicon */
1.212 + left: 0;
1.213 +}
1.214 +
1.215 +richgriditem:not([tiletype="thumbnail"]) .tile-desc {
1.216 + background-color: transparent!important;
1.217 +}
1.218 +
1.219 +
1.220 +richgriditem.collapsed {
1.221 + height: 0!important;
1.222 + overflow: hidden;
1.223 + opacity: 0;
1.224 +}
1.225 +
1.226 +richgriditem.collapsed > .tile-content {
1.227 + transform: scaleY(0);
1.228 + transition: 150ms transform ease-out 150ms;
1.229 +}
1.230 +
1.231 +richgriditem:active {
1.232 + z-index: 2;
1.233 +}
1.234 +
1.235 +/* thumbnail variation */
1.236 +
1.237 +richgriditem[tiletype="thumbnail"] {
1.238 + width: @grid_double_column_width@;
1.239 + height: @grid_double_row_height@;
1.240 + -moz-box-pack: end;
1.241 + padding: 0px;
1.242 + color: #1a1a1a;
1.243 +}
1.244 +
1.245 +richgriditem[tiletype="thumbnail"] .tile-desc {
1.246 + margin: 0;
1.247 + top: auto;
1.248 + bottom: 0;
1.249 + left: 0;
1.250 + right: 0;
1.251 + padding-top: 4px;
1.252 + -moz-padding-end: 8px;
1.253 + padding-bottom: 4px;
1.254 + -moz-padding-start: 56px;
1.255 +}
1.256 +
1.257 +richgriditem[tiletype="thumbnail"] > .tile-content > .tile-desc {
1.258 + /* ensure thumbnail labels get their color from the parent richgriditem element */
1.259 + color: inherit;
1.260 +}
1.261 +
1.262 +/* thumbnail tiles use a screenshot thumbnail as the background */
1.263 +
1.264 +richgriditem[tiletype="thumbnail"] > .tile-content > .tile-start-container,
1.265 +richgriditem[tiletype="thumbnail"] > .tile-content > .tile-start-container::after {
1.266 + background-size: cover;
1.267 + background-position: top left;
1.268 + background-repeat: no-repeat;
1.269 + position: absolute;
1.270 + top: 0;
1.271 + bottom: 0;
1.272 + right: 0;
1.273 + left: 0;
1.274 +}
1.275 +
1.276 +richgriditem[tiletype="thumbnail"] > .tile-content > .tile-start-container::after {
1.277 + pointer-events:none;
1.278 + content: "";
1.279 + display: block;
1.280 + opacity: 0;
1.281 + background-color: #fff;
1.282 + background-image: url("chrome://browser/skin/images/firefox-watermark.png")!important;
1.283 + transition: @metro_animation_duration@ opacity ease-in;
1.284 +}
1.285 +
1.286 +richgriditem[tiletype="thumbnail"]:not([customImage]) > .tile-content > .tile-start-container::after {
1.287 + opacity: 1;
1.288 +}
1.289 +
1.290 +richgriditem[tiletype="thumbnail"] .tile-icon-box {
1.291 + top: auto;
1.292 + left: 10px;
1.293 + bottom: 6px;
1.294 + margin-top: 0;
1.295 + z-index: 1;
1.296 + box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.05), 0px 2px 0px rgba(0, 0, 0, 0.1);
1.297 +}
1.298 +richgriditem[tiletype="thumbnail"]:-moz-locale-dir(rtl) .tile-icon-box {
1.299 + left: auto;
1.300 + right: 10px;
1.301 +}
1.302 +
1.303 +/* selected tile indicator */
1.304 +richgriditem[selected] > .tile-content::after {
1.305 + content: "";
1.306 + pointer-events: none;
1.307 + display: block;
1.308 + position: absolute;
1.309 + top: 0;
1.310 + right: 0;
1.311 + bottom: 0;
1.312 + left: 0;
1.313 + z-index: 1;
1.314 + background-image: url(chrome://browser/skin/images/tile-selected-check-hdpi.png);
1.315 + background-origin: border-box;
1.316 + background-repeat: no-repeat;
1.317 + background-position: right 0 top 0;
1.318 + /* scale the image whatever the dppx */
1.319 + background-size: 35px 35px;
1.320 + border: @metro_border_xthick@ solid @selected_color@;
1.321 +}
1.322 +richgriditem[selected]:-moz-locale-dir(rtl) > .tile-content::after {
1.323 + background-position: left 0 top 0;
1.324 + background-image: url(chrome://browser/skin/images/tile-selected-check-rtl-hdpi.png);
1.325 +}
1.326 +
1.327 +richgriditem[crosssliding] {
1.328 + z-index: 10;
1.329 +}
1.330 +
1.331 +/* ease the return to original position when cross-sliding */
1.332 +richgriditem:not([crosssliding]) {
1.333 + transition: transform ease-out 0.2s;
1.334 +}
1.335 +
1.336 +
1.337 +/* tile pinned-state indication */
1.338 +richgriditem[pinned] > .tile-content::before {
1.339 + pointer-events:none;
1.340 + content: "";
1.341 + display: block;
1.342 + position: absolute;
1.343 + top: 0;
1.344 + right: 0;
1.345 + left: auto;
1.346 + z-index: 1;
1.347 + width: 35px;
1.348 + height: 35px;
1.349 + background-image: url(chrome://browser/skin/images/pinned-hdpi.png);
1.350 + background-position: center;
1.351 + background-repeat: no-repeat;
1.352 + /* scale the image whatever the dppx */
1.353 + background-size: 70px 70px;
1.354 +}
1.355 +richgriditem[pinned]:-moz-locale-dir(rtl) > .tile-content::before {
1.356 + left: 0;
1.357 + right: auto;
1.358 + -moz-transform: scaleX(-1);
1.359 +}
1.360 +
1.361 +
1.362 +/* Selected _and_ pinned tiles*/
1.363 +richgriditem[selected][pinned] > .tile-content::before {
1.364 + background-position: right -@metro_border_xthick@ top -@metro_border_xthick@;
1.365 + width: 70px;
1.366 + height: 70px;
1.367 +}
1.368 +richgriditem[selected][pinned]:-moz-locale-dir(rtl) > .tile-content::before {
1.369 + background-position: left -@metro_border_xthick@ top -@metro_border_xthick@;
1.370 +}
1.371 +
1.372 +richgriditem[customColor] {
1.373 + color: #f1f1f1;
1.374 +}
1.375 +
1.376 +richgriditem[bending] > .tile-content {
1.377 + transform-origin: center center;
1.378 +}
1.379 +
1.380 +richgriditem[tiletype="thumbnail"]:not([value]) {
1.381 + visibility: visible;
1.382 +}
1.383 +richgriditem:not([value]) > .tile-content {
1.384 + padding: 10px 14px;
1.385 +}
1.386 +/* Empty/unused tiles */
1.387 +richgriditem:not([value]) > .tile-content {
1.388 + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05);
1.389 + background-image: url("chrome://browser/skin/images/firefox-watermark.png");
1.390 + background-origin: content-box;
1.391 + background-repeat: no-repeat;
1.392 + background-color: rgba(255,255,255, 0.2);
1.393 + background-position: center center;
1.394 + background-size: @compactgrid_row_height@;
1.395 +}
1.396 +richgriditem[tiletype="thumbnail"]:not([value]) > .tile-content {
1.397 + background-size: @grid_row_height@;
1.398 +}
1.399 +
1.400 +/* Snapped-view variation
1.401 + We use the compact, single-column grid treatment for <=320px */
1.402 +
1.403 +@media (max-width: 330px) {
1.404 +
1.405 + richgrid:not([search]) > .richgrid-grid {
1.406 + -moz-column-width: auto!important; /* let it flow */
1.407 + -moz-column-count: auto!important; /* let it flow */
1.408 + height: auto; /* let it flow */
1.409 + min-width: 280px;
1.410 + transition: 100ms transform ease-out;
1.411 + }
1.412 +
1.413 + richgriditem {
1.414 + width: @grid_double_column_width@;
1.415 + overflow: hidden;
1.416 + height: @compactgrid_row_height@;
1.417 + }
1.418 +
1.419 + .tile-desc {
1.420 + padding-top: 0.5em;
1.421 + -moz-padding-end: 4px;
1.422 + padding-bottom: 4px;
1.423 + -moz-padding-start: 4px;
1.424 + }
1.425 +
1.426 + richgriditem:not([search]) > .tile-content {
1.427 + left: 0;
1.428 + right: 0;
1.429 + }
1.430 +
1.431 + richgriditem {
1.432 + width: auto;
1.433 + }
1.434 +}
