1%if 0 2/* This Source Code Form is subject to the terms of the Mozilla Public 3 * License, v. 2.0. If a copy of the MPL was not distributed with this 4 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 5%endif 6 7html { 8 font: message-box; 9 font-size: 100%; 10 background-color: hsl(0,0%,95%); 11 color: #000; 12 height: 100%; 13} 14 15body { 16 margin: 0; 17 display: -moz-box; 18 -moz-box-orient: vertical; 19 width: 100%; 20 height: 100%; 21} 22 23input, 24button { 25 font-size: inherit; 26 font-family: inherit; 27} 28 29a { 30 color: -moz-nativehyperlinktext; 31 text-decoration: none; 32} 33 34.spacer { 35 -moz-box-flex: 1; 36} 37 38#topSection { 39 text-align: center; 40} 41 42#brandLogo { 43 height: 192px; 44 width: 192px; 45 margin: 22px auto 31px; 46 background-image: url("chrome://branding/content/about-logo.png"); 47 background-size: 192px auto; 48 background-position: center center; 49 background-repeat: no-repeat; 50} 51 52#searchIconAndTextContainer, 53#snippets { 54 width: 470px; 55} 56 57#searchIconAndTextContainer { 58 display: -moz-box; 59 height: 36px; 60 position: relative; 61} 62 63#searchIcon { 64 border: 1px transparent; 65 padding: 0; 66 margin: 0; 67 width: 36px; 68 height: 36px; 69 background: url("chrome://browser/skin/search-indicator-magnifying-glass.svg") center center no-repeat; 70 position: absolute; 71} 72 73#searchText { 74 margin-left: 0; 75 -moz-box-flex: 1; 76 padding-top: 6px; 77 padding-bottom: 6px; 78 padding-inline-start: 34px; 79 padding-inline-end: 8px; 80 background: hsla(0,0%,100%,.9) padding-box; 81 border: 1px solid; 82 border-radius: 2px 0 0 2px; 83 border-color: hsla(210,54%,20%,.15) hsla(210,54%,20%,.17) hsla(210,54%,20%,.2); 84 box-shadow: 0 1px 0 hsla(210,65%,9%,.02) inset, 85 0 0 2px hsla(210,65%,9%,.1) inset, 86 0 1px 0 hsla(0,0%,100%,.2); 87 color: inherit; 88 unicode-bidi: plaintext; 89} 90 91#searchText:dir(rtl) { 92 border-radius: 0 2px 2px 0; 93} 94 95#searchText[aria-expanded="true"] { 96 border-radius: 2px 0 0 0; 97} 98 99#searchText[aria-expanded="true"]:dir(rtl) { 100 border-radius: 0 2px 0 0; 101} 102 103#searchText[keepfocus], 104#searchText:focus, 105#searchText[autofocus] { 106 border-color: hsla(206,100%,60%,.6) hsla(206,76%,52%,.6) hsla(204,100%,40%,.6); 107} 108 109#searchSubmit { 110 margin-inline-start: -1px; 111 color: transparent; 112 background: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go") center center no-repeat, linear-gradient(hsla(0,0%,100%,.8), hsla(0,0%,100%,.1)) padding-box; 113 padding: 0; 114 border: 1px solid; 115 border-color: hsla(210,54%,20%,.15) hsla(210,54%,20%,.17) hsla(210,54%,20%,.2); 116 border-radius: 0 2px 2px 0; 117 border-inline-start: 1px solid transparent; 118 box-shadow: 0 0 2px hsla(0,0%,100%,.5) inset, 119 0 1px 0 hsla(0,0%,100%,.2); 120 cursor: pointer; 121 transition-property: background-color, border-color, box-shadow; 122 transition-duration: 150ms; 123 width: 50px; 124} 125 126#searchSubmit:dir(rtl) { 127 border-radius: 2px 0 0 2px; 128 background-image: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go-rtl"), linear-gradient(hsla(0,0%,100%,.8), hsla(0,0%,100%,.1)); 129} 130 131#searchText:focus + #searchSubmit, 132#searchText[keepfocus] + #searchSubmit, 133#searchText + #searchSubmit:hover, 134#searchText[autofocus] + #searchSubmit { 135 border-color: #59b5fc #45a3e7 #3294d5; 136} 137 138#searchText:focus + #searchSubmit, 139#searchText[keepfocus] + #searchSubmit, 140#searchText[autofocus] + #searchSubmit { 141 background-image: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go-inverted"), linear-gradient(#4cb1ff, #1793e5); 142 box-shadow: 0 1px 0 hsla(0,0%,100%,.2) inset, 143 0 0 0 1px hsla(0,0%,100%,.1) inset, 144 0 1px 0 hsla(210,54%,20%,.03); 145} 146 147#searchText:focus + #searchSubmit:dir(rtl), 148#searchText[keepfocus] + #searchSubmit:dir(rtl), 149#searchText[autofocus] + #searchSubmit:dir(rtl) { 150 background-image: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go-rtl-inverted"), linear-gradient(#4cb1ff, #1793e5); 151} 152 153#searchText + #searchSubmit:hover { 154 background-image: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go-inverted"), linear-gradient(#66bdff, #0d9eff); 155 box-shadow: 0 1px 0 hsla(0,0%,100%,.2) inset, 156 0 0 0 1px hsla(0,0%,100%,.1) inset, 157 0 1px 0 hsla(210,54%,20%,.03), 158 0 0 4px hsla(206,100%,20%,.2); 159} 160 161#searchText + #searchSubmit:dir(rtl):hover { 162 background-image: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go-rtl-inverted"), linear-gradient(#66bdff, #0d9eff); 163} 164 165#searchText + #searchSubmit:hover:active { 166 box-shadow: 0 1px 1px hsla(211,79%,6%,.1) inset, 167 0 0 1px hsla(211,79%,6%,.2) inset; 168 transition-duration: 0ms; 169} 170 171#defaultSnippet1, 172#defaultSnippet2, 173#rightsSnippet { 174 display: block; 175 min-height: 38px; 176 background: 0 center no-repeat; 177 padding: 6px 0; 178 padding-inline-start: 49px; 179} 180 181#rightsSnippet[hidden] { 182 display: none; 183} 184 185#defaultSnippet1:dir(rtl), 186#defaultSnippet2:dir(rtl), 187#rightsSnippet:dir(rtl) { 188 background-position: right 0 center; 189} 190 191#defaultSnippet1 { 192 background-image: url("chrome://browser/content/abouthome/snippet1.png"); 193} 194 195#defaultSnippet2 { 196 background-image: url("chrome://browser/content/abouthome/snippet2.png"); 197} 198 199#snippets { 200 display: inline-block; 201 text-align: start; 202 margin: 12px 0; 203 color: #3c3c3c; 204 font-size: 75%; 205 /* 12px is the computed font size, 15px the computed line height of the snippets 206 with Segoe UI on a default Windows 7 setup. The 15/12 multiplier approximately 207 converts em from units of font-size to units of line-height. The goal is to 208 preset the height of a three-line snippet to avoid visual moving/flickering as 209 the snippets load. */ 210 min-height: calc(15/12 * 3em); 211} 212 213#launcher { 214 display: -moz-box; 215 -moz-box-align: center; 216 -moz-box-pack: center; 217 width: 100%; 218 background-color: hsla(0,0%,0%,.03); 219 border-top: 1px solid hsla(0,0%,0%,.03); 220 box-shadow: 0 1px 2px hsla(0,0%,0%,.02) inset, 221 0 -1px 0 hsla(0,0%,100%,.25); 222} 223 224#launcher:not([session]), 225body[narrow] #launcher[session] { 226 display: block; /* display separator and restore button on separate lines */ 227 text-align: center; 228 white-space: nowrap; /* prevent navigational buttons from wrapping */ 229} 230 231.launchButton { 232 display: -moz-box; 233 -moz-box-orient: vertical; 234 margin: 16px 1px; 235 padding: 14px 6px; 236 min-width: 88px; 237 max-width: 176px; 238 max-height: 85px; 239 vertical-align: top; 240 white-space: normal; 241 background: transparent padding-box; 242 border: 1px solid transparent; 243 border-radius: 2px; 244 color: #525c66; 245 font-size: 75%; 246 cursor: pointer; 247 transition-property: background-color, border-color, box-shadow; 248 transition-duration: 150ms; 249} 250 251body[narrow] #launcher[session] > .launchButton { 252 margin: 4px 1px; 253} 254 255.launchButton:hover { 256 background-color: hsla(211,79%,6%,.03); 257 border-color: hsla(210,54%,20%,.15) hsla(210,54%,20%,.17) hsla(210,54%,20%,.2); 258} 259 260.launchButton:hover:active { 261 background-image: linear-gradient(hsla(211,79%,6%,.02), hsla(211,79%,6%,.05)); 262 border-color: hsla(210,54%,20%,.2) hsla(210,54%,20%,.23) hsla(210,54%,20%,.25); 263 box-shadow: 0 1px 1px hsla(211,79%,6%,.05) inset, 264 0 0 1px hsla(211,79%,6%,.1) inset; 265 transition-duration: 0ms; 266} 267 268.launchButton[hidden], 269#launcher:not([session]) > #restorePreviousSessionSeparator, 270#launcher:not([session]) > #restorePreviousSession { 271 display: none; 272} 273 274#restorePreviousSessionSeparator { 275 width: 3px; 276 height: 116px; 277 margin: 0 10px; 278 background-image: linear-gradient(hsla(0,0%,100%,0), hsla(0,0%,100%,.35), hsla(0,0%,100%,0)), 279 linear-gradient(hsla(211,79%,6%,0), hsla(211,79%,6%,.2), hsla(211,79%,6%,0)), 280 linear-gradient(hsla(0,0%,100%,0), hsla(0,0%,100%,.35), hsla(0,0%,100%,0)); 281 background-position: left top, center, right bottom; 282 background-size: 1px auto; 283 background-repeat: no-repeat; 284} 285 286body[narrow] #restorePreviousSessionSeparator { 287 margin: 0 auto; 288 width: 512px; 289 height: 3px; 290 background-image: linear-gradient(to right, hsla(0,0%,100%,0), hsla(0,0%,100%,.35), hsla(0,0%,100%,0)), 291 linear-gradient(to right, hsla(211,79%,6%,0), hsla(211,79%,6%,.2), hsla(211,79%,6%,0)), 292 linear-gradient(to right, hsla(0,0%,100%,0), hsla(0,0%,100%,.35), hsla(0,0%,100%,0)); 293 background-size: auto 1px; 294} 295 296#restorePreviousSession { 297 max-width: none; 298 font-size: 90%; 299} 300 301body[narrow] #restorePreviousSession { 302 font-size: 80%; 303} 304 305.launchButton::before { 306 display: block; 307 width: 32px; 308 height: 32px; 309 margin: 0 auto 6px; 310 line-height: 0; /* remove extra vertical space due to non-zero font-size */ 311} 312 313#downloads::before { 314 content: url("chrome://browser/content/abouthome/downloads.png"); 315} 316 317#bookmarks::before { 318 content: url("chrome://browser/content/abouthome/bookmarks.png"); 319} 320 321#history::before { 322 content: url("chrome://browser/content/abouthome/history.png"); 323} 324 325#addons::before { 326 content: url("chrome://browser/content/abouthome/addons.png"); 327} 328 329#sync::before { 330 content: url("chrome://browser/content/abouthome/sync.png"); 331} 332 333#settings::before { 334 content: url("chrome://browser/content/abouthome/settings.png"); 335} 336 337#restorePreviousSession::before { 338 content: url("chrome://browser/content/abouthome/restore-large.png"); 339 height: 48px; 340 width: 48px; 341 display: inline-block; /* display on same line as text label */ 342 vertical-align: middle; 343 margin-bottom: 0; 344 margin-inline-end: 8px; 345} 346 347#restorePreviousSession:dir(rtl)::before { 348 transform: scaleX(-1); 349} 350 351body[narrow] #restorePreviousSession::before { 352 content: url("chrome://browser/content/abouthome/restore.png"); 353 height: 32px; 354 width: 32px; 355} 356 357#aboutMozilla { 358 display: block; 359 position: relative; /* pin wordmark to edge of document, not of viewport */ 360 -moz-box-ordinal-group: 0; 361 opacity: .5; 362 transition: opacity 150ms; 363} 364 365#aboutMozilla:hover { 366 opacity: 1; 367} 368 369#aboutMozilla::before { 370 content: url("chrome://browser/content/abouthome/mozilla.png"); 371 display: block; 372 position: absolute; 373 top: 12px; 374 right: 12px; 375 width: 69px; 376 height: 19px; 377} 378 379/* [HiDPI] 380 * At resolutions above 1dppx, prefer downscaling the 2x Retina graphics 381 * rather than upscaling the original-size ones (bug 818940). 382 */ 383@media not all and (max-resolution: 1dppx) { 384 #brandLogo { 385 background-image: url("chrome://branding/content/about-logo@2x.png"); 386 } 387 388 #defaultSnippet1, 389 #defaultSnippet2, 390 #rightsSnippet { 391 background-size: 40px; 392 } 393 394 #defaultSnippet1 { 395 background-image: url("chrome://browser/content/abouthome/snippet1@2x.png"); 396 } 397 398 #defaultSnippet2 { 399 background-image: url("chrome://browser/content/abouthome/snippet2@2x.png"); 400 } 401 402 .launchButton::before, 403 #aboutMozilla::before { 404 transform: scale(.5); 405 transform-origin: 0 0; 406 } 407 408 .launchButton:dir(rtl)::before, 409 #aboutMozilla:dir(rtl)::before { 410 transform: scale(.5) translateX(32px); 411 } 412 413 #downloads::before { 414 content: url("chrome://browser/content/abouthome/downloads@2x.png"); 415 } 416 417 #bookmarks::before { 418 content: url("chrome://browser/content/abouthome/bookmarks@2x.png"); 419 } 420 421 #history::before { 422 content: url("chrome://browser/content/abouthome/history@2x.png"); 423 } 424 425 #addons::before { 426 content: url("chrome://browser/content/abouthome/addons@2x.png"); 427 } 428 429 #sync::before { 430 content: url("chrome://browser/content/abouthome/sync@2x.png"); 431 } 432 433 #settings::before { 434 content: url("chrome://browser/content/abouthome/settings@2x.png"); 435 } 436 437 #restorePreviousSession::before { 438 content: url("chrome://browser/content/abouthome/restore-large@2x.png"); 439 } 440 441 body[narrow] #restorePreviousSession::before { 442 content: url("chrome://browser/content/abouthome/restore@2x.png"); 443 } 444 445 #restorePreviousSession:dir(rtl)::before { 446 transform: scale(-0.5, 0.5) translateX(24px); 447 transform-origin: top center; 448 } 449 450 #aboutMozilla::before { 451 content: url("chrome://browser/content/abouthome/mozilla@2x.png"); 452 } 453} 454 455