gecko/browser/metro/theme/firstrun.css
Sam Foster b9de0519aa Bug 962283 - fix rtl layout of Metro Firefox Start page. r=mbrubeck
--HG--
extra : rebase_source : b62397c3a7b2cb68812795e9ef2e1db98a221560
2014-02-10 15:48:39 -08:00

266 lines
7.0 KiB
CSS

/* 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/. */
/* Rearrange about:start ---------------------- */
/* Disable all instructions in snapped mode */
#start-container[viewstate="snapped"] .firstrun {
display: none;
}
/* Keep only first column of tiles */
#start-container[viewstate="landscape"] #start-topsites-grid .richgrid-grid,
#start-container:not([viewstate="snapped"]) #start-bookmarks-grid .richgrid-grid,
#start-container:not([viewstate="snapped"]) #start-history-grid .richgrid-grid {
-moz-column-count: 1 !important;
}
/* Add some bottom padding to make sure bottom tile will not be
below instruction */
#start-container[viewstate="landscape"] #start-topsites-grid .richgrid-grid {
padding-bottom: 30px;
}
/* Keep only first few items */
#start-container:not([viewstate="snapped"]) #start-history-grid richgriditem:nth-child(n+3),
#start-container:not([viewstate="snapped"]) #start-bookmarks-grid richgriditem:nth-child(n+3),
#start-container[viewstate="portrait"] #start-topsites-grid richgriditem:nth-child(n+4) {
display: none;
}
/* Add some space for the instructions */
#start-container[viewstate="portrait"] {
padding-top: 120px;
padding-bottom: 120px;
}
/* Remove watermark */
.meta {
background-image: none;
}
/* Welcome pane ---------------------- */
/* Logo and welcome message */
#firstrun-welcome {
width: 550px;
font-family: "Segoe UI", sans-serif;
padding: 30px 0;
}
.welcome-image {
background-image: url("chrome://branding/content/metro_firstrun_logo.png");
width: 220px;
height: 220px;
}
#firstrun-welcome .welcome-title {
font-size: 25px;
color: #4d4e53;
line-height: 30px;
padding-top: 20px;
}
#firstrun-welcome .welcome-subtitle {
font-size: 16px;
color: #808080;
line-height: 22px;
padding-top: 10px;
}
/* Instructions ---------------------- */
.instruction-content-container {
width: 380px;
}
.instruction-label {
font-size: 16px;
color: #808080;
line-height: 22px;
}
.instruction-arrow {
width: 76px;
height: 76px;
}
.instruction-arrow.arrow-top,
.instruction-arrow.arrow-down {
background-image: url("chrome://browser/skin/images/arrow-top.png");
}
.instruction-arrow.arrow-down {
transform: rotate(180deg);
}
.instruction-arrow.arrow-down:-moz-locale-dir(rtl) {
transform: scaleY(-1);
}
.instruction-arrow.arrow-back,
.instruction-arrow.arrow-forward,
.instruction-arrow.arrow-back-straight,
.instruction-arrow.arrow-forward-straight {
background-image: url("chrome://browser/skin/images/arrow-left.png");
}
.instruction-arrow.arrow-back,
.instruction-arrow.arrow-forward:-moz-locale-dir(rtl) {
transform: rotate(0) scaleY(1);
}
.instruction-arrow.arrow-forward,
.instruction-arrow.arrow-back:-moz-locale-dir(rtl) {
transform: rotate(180deg) scaleY(-1);
}
.instruction-arrow.arrow-back-straight,
.instruction-arrow.arrow-forward-straight:-moz-locale-dir(rtl) {
transform: rotate(220deg) scaleX(-1);
}
.instruction-arrow.arrow-forward-straight,
.instruction-arrow.arrow-back-straight:-moz-locale-dir(rtl) {
transform: rotate(-220deg);
}
#instruction-tabs {
position: absolute;
top: 10px;
transform: translateX(calc(630px - 50%));
}
#instruction-tabs:-moz-locale-dir(rtl) {
right: 0;
left: auto;
transform: translateX(calc(50% - 630px));
}
#start-container[viewstate="portrait"] #instruction-tabs {
transform: translateX(calc(50vw - 50%));
}
#start-container[viewstate="portrait"] #instruction-tabs:-moz-locale-dir(rtl) {
transform: translateX(calc(-50vw + 50%));
}
#start-container[viewstate="landscape"] #instruction-topsites {
position: absolute;
bottom: 15%;
}
#start-container[viewstate="landscape"] #instruction-topsites .instruction-content-container {
-moz-box-align: start;
}
#start-container[viewstate="portrait"] #instruction-topsites-box {
margin-bottom: 20px;
}
#start-container[viewstate="portrait"] #instruction-topsites .instruction-content-container {
-moz-box-align: center;
}
#start-container[viewstate="portrait"] #instruction-topsites .arrow-back-straight {
display: none;
}
#start-container[viewstate="portrait"] #instruction-topsites .arrow-back {
display: block;
}
#start-container[viewstate="landscape"] #instruction-topsites .arrow-back-straight {
display: block;
}
#start-container[viewstate="landscape"] #instruction-topsites .arrow-back {
display: none;
}
#start-container[viewstate="landscape"] #instruction-history,
#start-container[viewstate="landscape"] #instruction-bookmarks {
position: absolute;
top: 310px;
transform: translateX(calc(-300px - 50%));
}
#start-container[viewstate="landscape"] #instruction-history:-moz-locale-dir(rtl),
#start-container[viewstate="landscape"] #instruction-bookmarks:-moz-locale-dir(rtl) {
transform: translateX(calc(300px + 50%));
}
#start-container[viewstate="portrait"] #instruction-history,
#start-container[viewstate="portrait"] #instruction-bookmarks,
#start-container[viewstate="portrait"] #instruction-topsites {
transform: translateX(-55px);
}
#start-container[viewstate="portrait"] #instruction-history:-moz-locale-dir(rtl),
#start-container[viewstate="portrait"] #instruction-bookmarks:-moz-locale-dir(rtl),
#start-container[viewstate="portrait"] #instruction-topsites:-moz-locale-dir(rtl) {
transform: translateX(55px);
}
#start-container[viewstate="landscape"] #instruction-menu {
position: fixed;
bottom: 16px;
right: 37px;
}
#start-container[viewstate="landscape"] #instruction-menu:-moz-locale-dir(rtl) {
left: 37px;
right: auto;
}
#start-container[viewstate="portrait"] #instruction-menu {
position: absolute;
right: 37px;
transform: translateY(40px);
}
#start-container[viewstate="portrait"] #instruction-menu:-moz-locale-dir(rtl) {
left: 37px;
right: auto;
}
#start-container #instruction-menu .instruction-label {
max-width: 300px;
}
#start-container[viewstate="landscape"] #start-history {
padding-left: 50px;
}
/* Higher resolution images ---------------------- */
@media (min-resolution: @min_res_140pc@) {
/* Load 140% image when scaled by 140% */
.instruction-arrow.arrow-top,
.instruction-arrow.arrow-down {
background-image: url("chrome://browser/skin/images/arrow-top@1.4x.png");
}
.instruction-arrow.arrow-back,
.instruction-arrow.arrow-forward {
background-image: url("chrome://browser/skin/images/arrow-left@1.4x.png");
}
.welcome-image {
background-image: url("chrome://branding/content/metro_firstrun_logo@1.4x.png");
}
}
@media (min-resolution: @min_res_180pc@) {
/* Load 180% image when scaled by 180% */
.instruction-arrow.arrow-top,
.instruction-arrow.arrow-down {
background-image: url("chrome://browser/skin/images/arrow-top@1.8x.png");
}
.instruction-arrow.arrow-back,
.instruction-arrow.arrow-forward {
background-image: url("chrome://browser/skin/images/arrow-left@1.8x.png");
}
.welcome-image {
background-image: url("chrome://branding/content/metro_firstrun_logo@1.8x.png");
}
}