The Tor Browser: browser/metro/theme/tiles.css@6474c204b198 (annotated)

browser/metro/theme/tiles.css@6474c204b198 (annotated)

browser/metro/theme/tiles.css

Wed, 31 Dec 2014 06:09:35 +0100

author: Michael Schloh von Bennewitz <michael@schloh.com>
date: Wed, 31 Dec 2014 06:09:35 +0100
changeset 0: 6474c204b198
permissions: -rw-r--r--

Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.

 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 /* Tile grid  ------------------------------------------------------------- */
 %filter substitution
 %include defines.inc
 /*
  *****************************************************
   The following rules define the key tile dimensions
   They are (also) snarfed via the CSSOM as the dimensions used in the #richgrid binding
  *****************************************************
  */
 richgriditem {
   width: @grid_double_column_width@;
   height: @grid_row_height@;
 }
 richgriditem[tiletype="thumbnail"] {
   width: @grid_double_column_width@;
   height: @grid_double_row_height@;
 }
 richgriditem[search] {
   width: @grid_search_width@;
   height: @grid_row_height@;
 }
 richgriditem[compact] {
   width: auto;
   height: @compactgrid_row_height@;
 }
 /*
  *****************************************************
  */
 richgrid {
   display: -moz-box;
   overflow: hidden;
 }
 richgrid > .richgrid-grid {
   -moz-column-width: @grid_double_column_width@; /* tile width (2x unit + gutter) */
   min-width: @grid_double_column_width@; /* min 1 column */
   min-height: @grid_double_row_height@; /* 2 rows (or 1 double rows) minimum; multiple of tile_height */
   -moz-column-fill: auto; /* do not attempt to balance content between columns */
   -moz-column-gap: 0;
   -moz-column-count: auto;
   display: block;
   box-sizing: content-box;
   overflow-x: hidden; /* clipping will only kick in if an explicit width is set */
   transition: 100ms transform ease-out;
 }
 richgrid[search] > .richgrid-grid {
   -moz-column-width: auto;
   min-width: 0;
 }
 richgriditem {
   display: block;
   position: relative;
   width: @grid_double_column_width@;
   height: @grid_row_height@;
   box-sizing: border-box;
   -moz-column-gap: 0;
   overflow:hidden;
   cursor: default;
 }
 .tile-content {
   display: block;
   position: absolute;
   /* background-color colors the tile-edge,
      and will normally be overridden with a favicon-based color */
   background-color: #ccc;
   background-origin: padding-box;
   /* content positioning within the grid "cell"
      gives us the gutters/spacing between tiles */
   top: 2px; right: @tile_side_margin@; bottom: 10px; left: @tile_side_margin@;
   border: @metro_border_thin@ solid @tile_border_color@;
   box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
   transition: 150ms transform ease-out,
               @metro_animation_duration@ background-color @metro_animation_easing@;
 }
 .tile-start-container {
   position: absolute;
   top: 0;
   bottom: 0;
   right: 0;
   left: 10px;
   padding: 8px;
   background-color: #fff;
 }
 richgriditem:-moz-locale-dir(rtl) .tile-start-container {
   right: 10px;
   left: 0;
 }
 richgriditem[search] .tile-start-container {
   background-color: transparent;
 }
 richgriditem:not([tiletype="thumbnail"]) .tile-start-container {
   background-image: none!important;
 }
 .tile-icon-box {
   position: absolute;
   top: 50%;
   margin-top: -17px;
   padding: 8px;
   /* default color, may be overriden by a favicon-based color */
   background-color: white;
   border: 1px solid #ccc;
   border-radius: 1px;
   opacity: 1.0;
 }
 .tile-icon-box > image {
   display: block;
   width: 16px;
   height: 16px;
   list-style-image: url("chrome://browser/skin/images/identity-icons-generic.png");
 }
 /* for larger favicons (which includes the fallback icon) */
 richgriditem:not([iconURI]) .tile-icon-box,
 richgriditem[iconURI=""] .tile-icon-box,
 richgriditem[iconsize="large"] .tile-icon-box {
   border-color: transparent!important;
   padding: 4px;
 }
 richgriditem[iconsize="large"] .tile-icon-box > image,
 .tile-icon-box > image[src=""] {
   width: 24px;
   height: 24px;
 }
 richgriditem[search] .tile-icon-box {
   padding: 0;
   border: 0;
   left: 50%;
   -moz-margin-start: -13px;
   margin-top: -8px;
 }
 richgriditem[search]:-moz-locale-dir(rtl) .tile-icon-box {
   right: 50%;
   left: auto;
 }
 richgriditem[search][iconsize="large"] .tile-icon-box {
   left: 0;
   top: 0;
   margin: 0;
 }
 richgriditem[search][iconsize="large"]:-moz-locale-dir(rtl) .tile-icon-box {
   right: 0;
   left: auto;
 }
 richgriditem[search][iconsize="large"] .tile-start-container {
   left: 0;
   padding: 0;
 }
 richgriditem[search][iconsize="large"]:-moz-locale-dir(rtl) .tile-start-container {
   left: auto;
   right: 0;
 }
 richgriditem[search][iconsize="large"] .tile-icon-box > image {
   width: 74px;
   height: 74px;
 }
 richgriditem[search] .tile-desc {
   display: none;
 }
 richgriditem[search] .tile-content {
   border: 0;
 }
 .tile-desc {
   display: block;
   position: absolute;
   top: 6px;
   left: 52px; /* label goes to the end (right) of the favicon */
   right: 0;
   padding-top: 1em;
   -moz-padding-end: 6px;
   padding-bottom: 6px;
   -moz-padding-start: 12px;
   background: white;
   color: #333;
   margin: 0;
   -moz-margin-start: 0;
   display: block;
   font-size: 16px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   transition: @metro_animation_duration@ background-color @metro_animation_easing@;
 }
 richgriditem:-moz-locale-dir(rtl) .tile-desc {
   right: 52px; /* label goes to the end (left) of the favicon */
   left: 0;
 }
 richgriditem:not([tiletype="thumbnail"]) .tile-desc {
   background-color: transparent!important;
 }
 richgriditem.collapsed {
   height: 0!important;
   overflow: hidden;
   opacity: 0;
 }
 richgriditem.collapsed > .tile-content {
   transform: scaleY(0);
   transition: 150ms transform ease-out 150ms;
 }
 richgriditem:active {
   z-index: 2;
 }
 /* thumbnail variation */
 richgriditem[tiletype="thumbnail"] {
   width: @grid_double_column_width@;
   height: @grid_double_row_height@;
   -moz-box-pack: end;
   padding: 0px;
   color: #1a1a1a;
 }
 richgriditem[tiletype="thumbnail"] .tile-desc {
   margin: 0;
   top: auto;
   bottom: 0;
   left: 0;
   right: 0;
   padding-top: 4px;
   -moz-padding-end: 8px;
   padding-bottom: 4px;
   -moz-padding-start: 56px;
 }
 richgriditem[tiletype="thumbnail"] > .tile-content > .tile-desc {
   /* ensure thumbnail labels get their color from the parent richgriditem element */
   color: inherit;
 }
 /* thumbnail tiles use a screenshot thumbnail as the background */
 richgriditem[tiletype="thumbnail"] > .tile-content > .tile-start-container,
 richgriditem[tiletype="thumbnail"] > .tile-content > .tile-start-container::after {
   background-size: cover;
   background-position: top left;
   background-repeat: no-repeat;
   position: absolute;
   top: 0;
   bottom: 0;
   right: 0;
   left: 0;
 }
 richgriditem[tiletype="thumbnail"] > .tile-content > .tile-start-container::after {
   pointer-events:none;
   content: "";
   display: block;
   opacity: 0;
   background-color: #fff;
   background-image: url("chrome://browser/skin/images/firefox-watermark.png")!important;
   transition: @metro_animation_duration@ opacity ease-in;
 }
 richgriditem[tiletype="thumbnail"]:not([customImage]) > .tile-content > .tile-start-container::after {
   opacity: 1;
 }
 richgriditem[tiletype="thumbnail"] .tile-icon-box {
   top: auto;
   left: 10px;
   bottom: 6px;
   margin-top: 0;
   z-index: 1;
   box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.05), 0px 2px 0px rgba(0, 0, 0, 0.1);
 }
 richgriditem[tiletype="thumbnail"]:-moz-locale-dir(rtl) .tile-icon-box {
   left: auto;
   right: 10px;
 }
 /* selected tile indicator */
 richgriditem[selected] > .tile-content::after {
   content: "";
   pointer-events: none;
   display: block;
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 1;
   background-image: url(chrome://browser/skin/images/tile-selected-check-hdpi.png);
   background-origin: border-box;
   background-repeat: no-repeat;
   background-position: right 0 top 0;
   /* scale the image whatever the dppx */
   background-size: 35px 35px;
   border: @metro_border_xthick@ solid @selected_color@;
 }
 richgriditem[selected]:-moz-locale-dir(rtl) > .tile-content::after {
   background-position: left 0 top 0;
   background-image: url(chrome://browser/skin/images/tile-selected-check-rtl-hdpi.png);
 }
 richgriditem[crosssliding] {
   z-index: 10;
 }
 /* ease the return to original position when cross-sliding */
 richgriditem:not([crosssliding]) {
   transition: transform ease-out 0.2s;
 }
 /* tile pinned-state indication */
 richgriditem[pinned] > .tile-content::before {
   pointer-events:none;
   content: "";
   display: block;
   position: absolute;
   top: 0;
   right: 0;
   left: auto;
   z-index: 1;
   width: 35px;
   height: 35px;
   background-image: url(chrome://browser/skin/images/pinned-hdpi.png);
   background-position: center;
   background-repeat: no-repeat;
   /* scale the image whatever the dppx */
   background-size: 70px 70px;
 }
 richgriditem[pinned]:-moz-locale-dir(rtl) > .tile-content::before {
   left: 0;
   right: auto;
   -moz-transform: scaleX(-1);
 }
 /* Selected _and_ pinned tiles*/
 richgriditem[selected][pinned] > .tile-content::before {
   background-position: right -@metro_border_xthick@ top -@metro_border_xthick@;
   width: 70px;
   height: 70px;
 }
 richgriditem[selected][pinned]:-moz-locale-dir(rtl) > .tile-content::before {
   background-position: left -@metro_border_xthick@ top -@metro_border_xthick@;
 }
 richgriditem[customColor] {
   color: #f1f1f1;
 }
 richgriditem[bending] > .tile-content {
   transform-origin: center center;
 }
 richgriditem[tiletype="thumbnail"]:not([value]) {
   visibility: visible;
 }
 richgriditem:not([value]) > .tile-content {
   padding: 10px 14px;
 }
 /* Empty/unused tiles */
 richgriditem:not([value]) > .tile-content {
   box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05);
   background-image: url("chrome://browser/skin/images/firefox-watermark.png");
   background-origin: content-box;
   background-repeat: no-repeat;
   background-color: rgba(255,255,255, 0.2);
   background-position: center center;
   background-size: @compactgrid_row_height@;
 }
 richgriditem[tiletype="thumbnail"]:not([value]) > .tile-content {
   background-size: @grid_row_height@;
 }
 /* Snapped-view variation
    We use the compact, single-column grid treatment for <=320px */
 @media (max-width: 330px) {
   richgrid:not([search]) > .richgrid-grid {
     -moz-column-width: auto!important; /* let it flow */
     -moz-column-count: auto!important; /* let it flow */
     height: auto; /* let it flow */
     min-width: 280px;
     transition: 100ms transform ease-out;
   }
   richgriditem {
     width: @grid_double_column_width@;
     overflow: hidden;
     height: @compactgrid_row_height@;
   }
   .tile-desc {
     padding-top: 0.5em;
     -moz-padding-end: 4px;
     padding-bottom: 4px;
     -moz-padding-start: 4px;
   }
   richgriditem:not([search]) > .tile-content {
     left: 0;
     right: 0;
   }
   richgriditem {
     width: auto;
   }
 }

The Tor Browser / annotate

browser/metro/theme/tiles.css@6474c204b198 (annotated)

browser/metro/theme/tiles.css