1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/metro/theme/firstrun.css Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,265 @@
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 +/* Rearrange about:start ---------------------- */
1.9 +
1.10 +/* Disable all instructions in snapped mode */
1.11 +#start-container[viewstate="snapped"] .firstrun {
1.12 + display: none;
1.13 +}
1.14 +
1.15 +/* Keep only first column of tiles */
1.16 +#start-container[viewstate="landscape"] #start-topsites-grid .richgrid-grid,
1.17 +#start-container:not([viewstate="snapped"]) #start-bookmarks-grid .richgrid-grid,
1.18 +#start-container:not([viewstate="snapped"]) #start-history-grid .richgrid-grid {
1.19 + -moz-column-count: 1 !important;
1.20 +}
1.21 +
1.22 +/* Add some bottom padding to make sure bottom tile will not be
1.23 +below instruction */
1.24 +#start-container[viewstate="landscape"] #start-topsites-grid .richgrid-grid {
1.25 + padding-bottom: 30px;
1.26 +}
1.27 +
1.28 +/* Keep only first few items */
1.29 +#start-container:not([viewstate="snapped"]) #start-history-grid richgriditem:nth-child(n+3),
1.30 +#start-container:not([viewstate="snapped"]) #start-bookmarks-grid richgriditem:nth-child(n+3),
1.31 +#start-container[viewstate="portrait"] #start-topsites-grid richgriditem:nth-child(n+4) {
1.32 + display: none;
1.33 +}
1.34 +
1.35 +/* Add some space for the instructions */
1.36 +#start-container[viewstate="portrait"] {
1.37 + padding-top: 120px;
1.38 + padding-bottom: 120px;
1.39 +}
1.40 +
1.41 +/* Remove watermark */
1.42 +.meta {
1.43 + background-image: none;
1.44 +}
1.45 +
1.46 +
1.47 +/* Welcome pane ---------------------- */
1.48 +
1.49 +/* Logo and welcome message */
1.50 +#firstrun-welcome {
1.51 + width: 550px;
1.52 + font-family: "Segoe UI", sans-serif;
1.53 + padding: 30px 0;
1.54 +}
1.55 +
1.56 +.welcome-image {
1.57 + background-image: url("chrome://branding/content/metro_firstrun_logo.png");
1.58 +
1.59 + width: 220px;
1.60 + height: 220px;
1.61 +}
1.62 +
1.63 +#firstrun-welcome .welcome-title {
1.64 + font-size: 25px;
1.65 + color: #4d4e53;
1.66 + line-height: 30px;
1.67 + padding-top: 20px;
1.68 +}
1.69 +
1.70 +#firstrun-welcome .welcome-subtitle {
1.71 + font-size: 16px;
1.72 + color: #808080;
1.73 + line-height: 22px;
1.74 + padding-top: 10px;
1.75 +}
1.76 +
1.77 +/* Instructions ---------------------- */
1.78 +
1.79 +.instruction-content-container {
1.80 + width: 380px;
1.81 +}
1.82 +
1.83 +.instruction-label {
1.84 + font-size: 16px;
1.85 + color: #808080;
1.86 + line-height: 22px;
1.87 +}
1.88 +
1.89 +.instruction-arrow {
1.90 + width: 76px;
1.91 + height: 76px;
1.92 +}
1.93 +
1.94 +.instruction-arrow.arrow-top,
1.95 +.instruction-arrow.arrow-down {
1.96 + background-image: url("chrome://browser/skin/images/arrow-top.png");
1.97 +}
1.98 +
1.99 +.instruction-arrow.arrow-down {
1.100 + transform: rotate(180deg);
1.101 +}
1.102 +.instruction-arrow.arrow-down:-moz-locale-dir(rtl) {
1.103 + transform: scaleY(-1);
1.104 +}
1.105 +
1.106 +.instruction-arrow.arrow-back,
1.107 +.instruction-arrow.arrow-forward,
1.108 +.instruction-arrow.arrow-back-straight,
1.109 +.instruction-arrow.arrow-forward-straight {
1.110 + background-image: url("chrome://browser/skin/images/arrow-left.png");
1.111 +}
1.112 +
1.113 +.instruction-arrow.arrow-back,
1.114 +.instruction-arrow.arrow-forward:-moz-locale-dir(rtl) {
1.115 + transform: rotate(0) scaleY(1);
1.116 +}
1.117 +
1.118 +.instruction-arrow.arrow-forward,
1.119 +.instruction-arrow.arrow-back:-moz-locale-dir(rtl) {
1.120 + transform: rotate(180deg) scaleY(-1);
1.121 +}
1.122 +
1.123 +.instruction-arrow.arrow-back-straight,
1.124 +.instruction-arrow.arrow-forward-straight:-moz-locale-dir(rtl) {
1.125 + transform: rotate(220deg) scaleX(-1);
1.126 +}
1.127 +
1.128 +.instruction-arrow.arrow-forward-straight,
1.129 +.instruction-arrow.arrow-back-straight:-moz-locale-dir(rtl) {
1.130 + transform: rotate(-220deg);
1.131 +}
1.132 +
1.133 +#instruction-tabs {
1.134 + position: absolute;
1.135 + top: 10px;
1.136 + transform: translateX(calc(630px - 50%));
1.137 +}
1.138 +#instruction-tabs:-moz-locale-dir(rtl) {
1.139 + right: 0;
1.140 + left: auto;
1.141 + transform: translateX(calc(50% - 630px));
1.142 +}
1.143 +
1.144 +#start-container[viewstate="portrait"] #instruction-tabs {
1.145 + transform: translateX(calc(50vw - 50%));
1.146 +}
1.147 +#start-container[viewstate="portrait"] #instruction-tabs:-moz-locale-dir(rtl) {
1.148 + transform: translateX(calc(-50vw + 50%));
1.149 +}
1.150 +
1.151 +#start-container[viewstate="landscape"] #instruction-topsites {
1.152 + position: absolute;
1.153 + bottom: 15%;
1.154 +}
1.155 +
1.156 +#start-container[viewstate="landscape"] #instruction-topsites .instruction-content-container {
1.157 + -moz-box-align: start;
1.158 +}
1.159 +
1.160 +#start-container[viewstate="portrait"] #instruction-topsites-box {
1.161 + margin-bottom: 20px;
1.162 +}
1.163 +
1.164 +#start-container[viewstate="portrait"] #instruction-topsites .instruction-content-container {
1.165 + -moz-box-align: center;
1.166 +}
1.167 +
1.168 +#start-container[viewstate="portrait"] #instruction-topsites .arrow-back-straight {
1.169 + display: none;
1.170 +}
1.171 +
1.172 +#start-container[viewstate="portrait"] #instruction-topsites .arrow-back {
1.173 + display: block;
1.174 +}
1.175 +
1.176 +#start-container[viewstate="landscape"] #instruction-topsites .arrow-back-straight {
1.177 + display: block;
1.178 +}
1.179 +
1.180 +#start-container[viewstate="landscape"] #instruction-topsites .arrow-back {
1.181 + display: none;
1.182 +}
1.183 +
1.184 +#start-container[viewstate="landscape"] #instruction-history,
1.185 +#start-container[viewstate="landscape"] #instruction-bookmarks {
1.186 + position: absolute;
1.187 + top: 310px;
1.188 + transform: translateX(calc(-300px - 50%));
1.189 +}
1.190 +#start-container[viewstate="landscape"] #instruction-history:-moz-locale-dir(rtl),
1.191 +#start-container[viewstate="landscape"] #instruction-bookmarks:-moz-locale-dir(rtl) {
1.192 + transform: translateX(calc(300px + 50%));
1.193 +}
1.194 +
1.195 +#start-container[viewstate="portrait"] #instruction-history,
1.196 +#start-container[viewstate="portrait"] #instruction-bookmarks,
1.197 +#start-container[viewstate="portrait"] #instruction-topsites {
1.198 + transform: translateX(-55px);
1.199 +}
1.200 +#start-container[viewstate="portrait"] #instruction-history:-moz-locale-dir(rtl),
1.201 +#start-container[viewstate="portrait"] #instruction-bookmarks:-moz-locale-dir(rtl),
1.202 +#start-container[viewstate="portrait"] #instruction-topsites:-moz-locale-dir(rtl) {
1.203 + transform: translateX(55px);
1.204 +}
1.205 +
1.206 +#start-container[viewstate="landscape"] #instruction-menu {
1.207 + position: fixed;
1.208 + bottom: 16px;
1.209 + right: 37px;
1.210 +}
1.211 +#start-container[viewstate="landscape"] #instruction-menu:-moz-locale-dir(rtl) {
1.212 + left: 37px;
1.213 + right: auto;
1.214 +}
1.215 +
1.216 +#start-container[viewstate="portrait"] #instruction-menu {
1.217 + position: absolute;
1.218 + right: 37px;
1.219 + transform: translateY(40px);
1.220 +}
1.221 +#start-container[viewstate="portrait"] #instruction-menu:-moz-locale-dir(rtl) {
1.222 + left: 37px;
1.223 + right: auto;
1.224 +}
1.225 +
1.226 +#start-container #instruction-menu .instruction-label {
1.227 + max-width: 300px;
1.228 +}
1.229 +
1.230 +#start-container[viewstate="landscape"] #start-history {
1.231 + padding-left: 50px;
1.232 +}
1.233 +
1.234 +/* Higher resolution images ---------------------- */
1.235 +
1.236 +@media (min-resolution: @min_res_140pc@) {
1.237 + /* Load 140% image when scaled by 140% */
1.238 + .instruction-arrow.arrow-top,
1.239 + .instruction-arrow.arrow-down {
1.240 + background-image: url("chrome://browser/skin/images/arrow-top@1.4x.png");
1.241 + }
1.242 +
1.243 + .instruction-arrow.arrow-back,
1.244 + .instruction-arrow.arrow-forward {
1.245 + background-image: url("chrome://browser/skin/images/arrow-left@1.4x.png");
1.246 + }
1.247 +
1.248 + .welcome-image {
1.249 + background-image: url("chrome://branding/content/metro_firstrun_logo@1.4x.png");
1.250 + }
1.251 +}
1.252 +
1.253 +@media (min-resolution: @min_res_180pc@) {
1.254 + /* Load 180% image when scaled by 180% */
1.255 + .instruction-arrow.arrow-top,
1.256 + .instruction-arrow.arrow-down {
1.257 + background-image: url("chrome://browser/skin/images/arrow-top@1.8x.png");
1.258 + }
1.259 +
1.260 + .instruction-arrow.arrow-back,
1.261 + .instruction-arrow.arrow-forward {
1.262 + background-image: url("chrome://browser/skin/images/arrow-left@1.8x.png");
1.263 + }
1.264 +
1.265 + .welcome-image {
1.266 + background-image: url("chrome://branding/content/metro_firstrun_logo@1.8x.png");
1.267 + }
1.268 +}
