1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/base/content/abouthome/aboutHome.css Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,439 @@
1.4 +%if 0
1.5 +/* This Source Code Form is subject to the terms of the Mozilla Public
1.6 + * License, v. 2.0. If a copy of the MPL was not distributed with this
1.7 + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
1.8 +%endif
1.9 +
1.10 +html {
1.11 + font: message-box;
1.12 + font-size: 100%;
1.13 + background-color: hsl(0,0%,95%);
1.14 + color: #000;
1.15 + height: 100%;
1.16 +}
1.17 +
1.18 +body {
1.19 + margin: 0;
1.20 + display: -moz-box;
1.21 + -moz-box-orient: vertical;
1.22 + width: 100%;
1.23 + height: 100%;
1.24 +}
1.25 +
1.26 +input,
1.27 +button {
1.28 + font-size: inherit;
1.29 + font-family: inherit;
1.30 +}
1.31 +
1.32 +a {
1.33 + color: -moz-nativehyperlinktext;
1.34 + text-decoration: none;
1.35 +}
1.36 +
1.37 +.spacer {
1.38 + -moz-box-flex: 1;
1.39 +}
1.40 +
1.41 +#topSection {
1.42 + text-align: center;
1.43 +}
1.44 +
1.45 +#brandLogo {
1.46 + height: 192px;
1.47 + width: 192px;
1.48 + margin: 22px auto 31px;
1.49 + background-image: url("chrome://branding/content/about-logo.png");
1.50 + background-size: 192px auto;
1.51 + background-position: center center;
1.52 + background-repeat: no-repeat;
1.53 +}
1.54 +
1.55 +#searchForm,
1.56 +#snippets {
1.57 + width: 470px;
1.58 +}
1.59 +
1.60 +#searchForm {
1.61 + display: -moz-box;
1.62 +}
1.63 +
1.64 +#searchLogoContainer {
1.65 + display: -moz-box;
1.66 + -moz-box-align: center;
1.67 + padding-top: 2px;
1.68 + -moz-padding-end: 8px;
1.69 +}
1.70 +
1.71 +#searchLogoContainer[hidden] {
1.72 + display: none;
1.73 +}
1.74 +
1.75 +#searchEngineLogo {
1.76 + display: inline-block;
1.77 + height: 28px;
1.78 + width: 70px;
1.79 + min-width: 70px;
1.80 +}
1.81 +
1.82 +#searchText {
1.83 + -moz-box-flex: 1;
1.84 + padding: 6px 8px;
1.85 + background: hsla(0,0%,100%,.9) padding-box;
1.86 + border: 1px solid;
1.87 + border-color: hsla(210,54%,20%,.15) hsla(210,54%,20%,.17) hsla(210,54%,20%,.2);
1.88 + box-shadow: 0 1px 0 hsla(210,65%,9%,.02) inset,
1.89 + 0 0 2px hsla(210,65%,9%,.1) inset,
1.90 + 0 1px 0 hsla(0,0%,100%,.2);
1.91 + border-radius: 2.5px 0 0 2.5px;
1.92 +}
1.93 +
1.94 +#searchText:-moz-dir(rtl) {
1.95 + border-radius: 0 2.5px 2.5px 0;
1.96 +}
1.97 +
1.98 +#searchText:focus,
1.99 +#searchText[autofocus] {
1.100 + border-color: hsla(206,100%,60%,.6) hsla(206,76%,52%,.6) hsla(204,100%,40%,.6);
1.101 +}
1.102 +
1.103 +#searchSubmit {
1.104 + -moz-margin-start: -1px;
1.105 + background: linear-gradient(hsla(0,0%,100%,.8), hsla(0,0%,100%,.1)) padding-box;
1.106 + padding: 0 9px;
1.107 + border: 1px solid;
1.108 + border-color: hsla(210,54%,20%,.15) hsla(210,54%,20%,.17) hsla(210,54%,20%,.2);
1.109 + -moz-border-start: 1px solid transparent;
1.110 + border-radius: 0 2.5px 2.5px 0;
1.111 + box-shadow: 0 0 2px hsla(0,0%,100%,.5) inset,
1.112 + 0 1px 0 hsla(0,0%,100%,.2);
1.113 + cursor: pointer;
1.114 + transition-property: background-color, border-color, box-shadow;
1.115 + transition-duration: 150ms;
1.116 +}
1.117 +
1.118 +#searchSubmit:-moz-dir(rtl) {
1.119 + border-radius: 2.5px 0 0 2.5px;
1.120 +}
1.121 +
1.122 +#searchText:focus + #searchSubmit,
1.123 +#searchText + #searchSubmit:hover,
1.124 +#searchText[autofocus] + #searchSubmit {
1.125 + border-color: #59b5fc #45a3e7 #3294d5;
1.126 + color: white;
1.127 +}
1.128 +
1.129 +#searchText:focus + #searchSubmit,
1.130 +#searchText[autofocus] + #searchSubmit {
1.131 + background-image: linear-gradient(#4cb1ff, #1793e5);
1.132 + box-shadow: 0 1px 0 hsla(0,0%,100%,.2) inset,
1.133 + 0 0 0 1px hsla(0,0%,100%,.1) inset,
1.134 + 0 1px 0 hsla(210,54%,20%,.03);
1.135 +}
1.136 +
1.137 +#searchText + #searchSubmit:hover {
1.138 + background-image: linear-gradient(#66bdff, #0d9eff);
1.139 + box-shadow: 0 1px 0 hsla(0,0%,100%,.2) inset,
1.140 + 0 0 0 1px hsla(0,0%,100%,.1) inset,
1.141 + 0 1px 0 hsla(210,54%,20%,.03),
1.142 + 0 0 4px hsla(206,100%,20%,.2);
1.143 +}
1.144 +
1.145 +#searchText + #searchSubmit:hover:active {
1.146 + box-shadow: 0 1px 1px hsla(211,79%,6%,.1) inset,
1.147 + 0 0 1px hsla(211,79%,6%,.2) inset;
1.148 + transition-duration: 0ms;
1.149 +}
1.150 +
1.151 +#defaultSnippet1,
1.152 +#defaultSnippet2,
1.153 +#rightsSnippet {
1.154 + display: block;
1.155 + min-height: 38px;
1.156 + background: 30px center no-repeat;
1.157 + padding: 6px 0;
1.158 + -moz-padding-start: 79px;
1.159 +}
1.160 +
1.161 +#rightsSnippet[hidden] {
1.162 + display: none;
1.163 +}
1.164 +
1.165 +#defaultSnippet1:-moz-dir(rtl),
1.166 +#defaultSnippet2:-moz-dir(rtl),
1.167 +#rightsSnippet:-moz-dir(rtl) {
1.168 + background-position: right 30px center;
1.169 +}
1.170 +
1.171 +#defaultSnippet1 {
1.172 + background-image: url("chrome://browser/content/abouthome/snippet1.png");
1.173 +}
1.174 +
1.175 +#defaultSnippet2 {
1.176 + background-image: url("chrome://browser/content/abouthome/snippet2.png");
1.177 +}
1.178 +
1.179 +#snippets {
1.180 + display: inline-block;
1.181 + text-align: start;
1.182 + margin: 12px 0;
1.183 + color: #3c3c3c;
1.184 + font-size: 75%;
1.185 + /* 12px is the computed font size, 15px the computed line height of the snippets
1.186 + with Segoe UI on a default Windows 7 setup. The 15/12 multiplier approximately
1.187 + converts em from units of font-size to units of line-height. The goal is to
1.188 + preset the height of a three-line snippet to avoid visual moving/flickering as
1.189 + the snippets load. */
1.190 + min-height: calc(15/12 * 3em);
1.191 +}
1.192 +
1.193 +#launcher {
1.194 + display: -moz-box;
1.195 + -moz-box-align: center;
1.196 + -moz-box-pack: center;
1.197 + width: 100%;
1.198 + background-color: hsla(0,0%,0%,.03);
1.199 + border-top: 1px solid hsla(0,0%,0%,.03);
1.200 + box-shadow: 0 1px 2px hsla(0,0%,0%,.02) inset,
1.201 + 0 -1px 0 hsla(0,0%,100%,.25);
1.202 +}
1.203 +
1.204 +#launcher:not([session]),
1.205 +body[narrow] #launcher[session] {
1.206 + display: block; /* display separator and restore button on separate lines */
1.207 + text-align: center;
1.208 + white-space: nowrap; /* prevent navigational buttons from wrapping */
1.209 +}
1.210 +
1.211 +.launchButton {
1.212 + display: -moz-box;
1.213 + -moz-box-orient: vertical;
1.214 + margin: 16px 1px;
1.215 + padding: 14px 6px;
1.216 + min-width: 88px;
1.217 + max-width: 176px;
1.218 + max-height: 85px;
1.219 + vertical-align: top;
1.220 + white-space: normal;
1.221 + background: transparent padding-box;
1.222 + border: 1px solid transparent;
1.223 + border-radius: 2.5px;
1.224 + color: #525c66;
1.225 + font-size: 75%;
1.226 + cursor: pointer;
1.227 + transition-property: background-color, border-color, box-shadow;
1.228 + transition-duration: 150ms;
1.229 +}
1.230 +
1.231 +body[narrow] #launcher[session] > .launchButton {
1.232 + margin: 4px 1px;
1.233 +}
1.234 +
1.235 +.launchButton:hover {
1.236 + background-color: hsla(211,79%,6%,.03);
1.237 + border-color: hsla(210,54%,20%,.15) hsla(210,54%,20%,.17) hsla(210,54%,20%,.2);
1.238 +}
1.239 +
1.240 +.launchButton:hover:active {
1.241 + background-image: linear-gradient(hsla(211,79%,6%,.02), hsla(211,79%,6%,.05));
1.242 + border-color: hsla(210,54%,20%,.2) hsla(210,54%,20%,.23) hsla(210,54%,20%,.25);
1.243 + box-shadow: 0 1px 1px hsla(211,79%,6%,.05) inset,
1.244 + 0 0 1px hsla(211,79%,6%,.1) inset;
1.245 + transition-duration: 0ms;
1.246 +}
1.247 +
1.248 +.launchButton[hidden],
1.249 +#launcher:not([session]) > #restorePreviousSessionSeparator,
1.250 +#launcher:not([session]) > #restorePreviousSession {
1.251 + display: none;
1.252 +}
1.253 +
1.254 +#restorePreviousSessionSeparator {
1.255 + width: 3px;
1.256 + height: 116px;
1.257 + margin: 0 10px;
1.258 + background-image: linear-gradient(hsla(0,0%,100%,0), hsla(0,0%,100%,.35), hsla(0,0%,100%,0)),
1.259 + linear-gradient(hsla(211,79%,6%,0), hsla(211,79%,6%,.2), hsla(211,79%,6%,0)),
1.260 + linear-gradient(hsla(0,0%,100%,0), hsla(0,0%,100%,.35), hsla(0,0%,100%,0));
1.261 + background-position: left top, center, right bottom;
1.262 + background-size: 1px auto;
1.263 + background-repeat: no-repeat;
1.264 +}
1.265 +
1.266 +body[narrow] #restorePreviousSessionSeparator {
1.267 + margin: 0 auto;
1.268 + width: 512px;
1.269 + height: 3px;
1.270 + background-image: linear-gradient(to right, hsla(0,0%,100%,0), hsla(0,0%,100%,.35), hsla(0,0%,100%,0)),
1.271 + linear-gradient(to right, hsla(211,79%,6%,0), hsla(211,79%,6%,.2), hsla(211,79%,6%,0)),
1.272 + linear-gradient(to right, hsla(0,0%,100%,0), hsla(0,0%,100%,.35), hsla(0,0%,100%,0));
1.273 + background-size: auto 1px;
1.274 +}
1.275 +
1.276 +#restorePreviousSession {
1.277 + max-width: none;
1.278 + font-size: 90%;
1.279 +}
1.280 +
1.281 +body[narrow] #restorePreviousSession {
1.282 + font-size: 80%;
1.283 +}
1.284 +
1.285 +.launchButton::before {
1.286 + display: block;
1.287 + width: 32px;
1.288 + height: 32px;
1.289 + margin: 0 auto 6px;
1.290 + line-height: 0; /* remove extra vertical space due to non-zero font-size */
1.291 +}
1.292 +
1.293 +#downloads::before {
1.294 + content: url("chrome://browser/content/abouthome/downloads.png");
1.295 +}
1.296 +
1.297 +#bookmarks::before {
1.298 + content: url("chrome://browser/content/abouthome/bookmarks.png");
1.299 +}
1.300 +
1.301 +#history::before {
1.302 + content: url("chrome://browser/content/abouthome/history.png");
1.303 +}
1.304 +
1.305 +#apps::before {
1.306 + content: url("chrome://browser/content/abouthome/apps.png");
1.307 +}
1.308 +
1.309 +#addons::before {
1.310 + content: url("chrome://browser/content/abouthome/addons.png");
1.311 +}
1.312 +
1.313 +#sync::before {
1.314 + content: url("chrome://browser/content/abouthome/sync.png");
1.315 +}
1.316 +
1.317 +#settings::before {
1.318 + content: url("chrome://browser/content/abouthome/settings.png");
1.319 +}
1.320 +
1.321 +#restorePreviousSession::before {
1.322 + content: url("chrome://browser/content/abouthome/restore-large.png");
1.323 + height: 48px;
1.324 + width: 48px;
1.325 + display: inline-block; /* display on same line as text label */
1.326 + vertical-align: middle;
1.327 + margin-bottom: 0;
1.328 + -moz-margin-end: 8px;
1.329 +}
1.330 +
1.331 +#restorePreviousSession:-moz-dir(rtl)::before {
1.332 + transform: scaleX(-1);
1.333 +}
1.334 +
1.335 +body[narrow] #restorePreviousSession::before {
1.336 + content: url("chrome://browser/content/abouthome/restore.png");
1.337 + height: 32px;
1.338 + width: 32px;
1.339 +}
1.340 +
1.341 +#aboutMozilla {
1.342 + display: block;
1.343 + position: relative; /* pin wordmark to edge of document, not of viewport */
1.344 + -moz-box-ordinal-group: 0;
1.345 + opacity: .5;
1.346 + transition: opacity 150ms;
1.347 +}
1.348 +
1.349 +#aboutMozilla:hover {
1.350 + opacity: 1;
1.351 +}
1.352 +
1.353 +#aboutMozilla::before {
1.354 + content: url("chrome://browser/content/abouthome/mozilla.png");
1.355 + display: block;
1.356 + position: absolute;
1.357 + top: 12px;
1.358 + right: 12px;
1.359 + width: 69px;
1.360 + height: 19px;
1.361 +}
1.362 +
1.363 +/* [HiDPI]
1.364 + * At resolutions above 1dppx, prefer downscaling the 2x Retina graphics
1.365 + * rather than upscaling the original-size ones (bug 818940).
1.366 + */
1.367 +@media not all and (max-resolution: 1dppx) {
1.368 + #brandLogo {
1.369 + background-image: url("chrome://branding/content/about-logo@2x.png");
1.370 + }
1.371 +
1.372 + #defaultSnippet1,
1.373 + #defaultSnippet2,
1.374 + #rightsSnippet {
1.375 + background-size: 40px;
1.376 + }
1.377 +
1.378 + #defaultSnippet1 {
1.379 + background-image: url("chrome://browser/content/abouthome/snippet1@2x.png");
1.380 + }
1.381 +
1.382 + #defaultSnippet2 {
1.383 + background-image: url("chrome://browser/content/abouthome/snippet2@2x.png");
1.384 + }
1.385 +
1.386 + .launchButton::before,
1.387 + #aboutMozilla::before {
1.388 + transform: scale(.5);
1.389 + transform-origin: 0 0;
1.390 + }
1.391 +
1.392 + .launchButton:-moz-dir(rtl)::before,
1.393 + #aboutMozilla:-moz-dir(rtl)::before {
1.394 + transform: scale(.5) translateX(32px);
1.395 + }
1.396 +
1.397 + #downloads::before {
1.398 + content: url("chrome://browser/content/abouthome/downloads@2x.png");
1.399 + }
1.400 +
1.401 + #bookmarks::before {
1.402 + content: url("chrome://browser/content/abouthome/bookmarks@2x.png");
1.403 + }
1.404 +
1.405 + #history::before {
1.406 + content: url("chrome://browser/content/abouthome/history@2x.png");
1.407 + }
1.408 +
1.409 + #apps::before {
1.410 + content: url("chrome://browser/content/abouthome/apps@2x.png");
1.411 + }
1.412 +
1.413 + #addons::before {
1.414 + content: url("chrome://browser/content/abouthome/addons@2x.png");
1.415 + }
1.416 +
1.417 + #sync::before {
1.418 + content: url("chrome://browser/content/abouthome/sync@2x.png");
1.419 + }
1.420 +
1.421 + #settings::before {
1.422 + content: url("chrome://browser/content/abouthome/settings@2x.png");
1.423 + }
1.424 +
1.425 + #restorePreviousSession::before {
1.426 + content: url("chrome://browser/content/abouthome/restore-large@2x.png");
1.427 + }
1.428 +
1.429 + body[narrow] #restorePreviousSession::before {
1.430 + content: url("chrome://browser/content/abouthome/restore@2x.png");
1.431 + }
1.432 +
1.433 + #restorePreviousSession:-moz-dir(rtl)::before {
1.434 + transform: scale(-0.5, 0.5) translateX(24px);
1.435 + transform-origin: top center;
1.436 + }
1.437 +
1.438 + #aboutMozilla::before {
1.439 + content: url("chrome://browser/content/abouthome/mozilla@2x.png");
1.440 + }
1.441 +}
1.442 +
