зеркало из https://github.com/mozilla/gecko-dev.git
Bug 972061 - Update style of Sync intro and manage pages r=ttaubert
From ff216e4d7d2c5957c09ba03028b0fec76303ab30 Mon Sep 17 00:00:00 2001 --- .../base/content/aboutaccounts/aboutaccounts.css | 36 -- .../base/content/aboutaccounts/aboutaccounts.xhtml | 8 +- .../aboutaccounts/images/graphic_sync_intro.png | Bin 5566 -> 9304 bytes .../aboutaccounts/images/graphic_sync_intro@2x.png | Bin 10764 -> 19655 bytes browser/base/content/aboutaccounts/main.css | 380 ++++----------------- 5 files changed, 76 insertions(+), 348 deletions(-)
This commit is contained in:
Zachary Carter
Родитель
a0554a6769
Коммит
4e1bd92b84
|
|
@ -1,19 +1,7 @@
|
|||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#remote {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -24,27 +12,3 @@ html, body {
|
|||
#manage, #intro, #stage {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#stage {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.graphic-sync-intro {
|
||||
background-image: url(images/graphic_sync_intro.png);
|
||||
}
|
||||
|
||||
.description, .button-row {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
/* Retina */
|
||||
@media
|
||||
only screen and ( min--moz-device-pixel-ratio: 2),
|
||||
only screen and ( -moz-min-device-pixel-ratio: 2),
|
||||
only screen and ( min-device-pixel-ratio: 2),
|
||||
only screen and ( min-resolution: 192dpi),
|
||||
only screen and ( min-resolution: 2dppx) {
|
||||
.graphic-sync-intro {
|
||||
background-image: url(images/graphic_sync_intro@2x.png);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,8 +39,7 @@
|
|||
|
||||
<div id="manage">
|
||||
<header>
|
||||
<h1><span>&syncBrand.fullName.label;</span></h1>
|
||||
<h2><span>&aboutAccounts.welcome;</span></h2>
|
||||
<h1>&aboutAccounts.welcome;</h1>
|
||||
</header>
|
||||
|
||||
<section>
|
||||
|
|
@ -54,8 +53,7 @@
|
|||
|
||||
<div id="intro">
|
||||
<header>
|
||||
<h1><span>&syncBrand.fullName.label;</span></h1>
|
||||
<h2><span>&aboutAccounts.welcome;</span></h2>
|
||||
<h1>&aboutAccounts.welcome;</h1>
|
||||
</header>
|
||||
|
||||
<section>
|
||||
|
|
@ -68,7 +66,7 @@
|
|||
</div>
|
||||
|
||||
<div class="links">
|
||||
<a id="oldsync" href="#" onclick="handleOldSync();">&aboutAccountsConfig.useOldSync.label;</a>
|
||||
<a id="oldsync" class="no-underline" href="#" onclick="handleOldSync();">&aboutAccountsConfig.useOldSync.label;</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
|
|
|||
Двоичные данные
browser/base/content/aboutaccounts/images/graphic_sync_intro.png
Двоичные данные
browser/base/content/aboutaccounts/images/graphic_sync_intro.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 5.4 KiB После Ширина: | Высота: | Размер: 9.1 KiB |
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 10 KiB После Ширина: | Высота: | Размер: 19 KiB |
|
|
@ -1,185 +1,82 @@
|
|||
/* Border box all the things by default */
|
||||
*, *:before, *:after {
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: #f1f1f1;
|
||||
background-image: -webkit-linear-gradient(-90deg, #fefefe 0%, #f1f1f1 100%);
|
||||
background-image: -moz-linear-gradient(-90deg, #fefefe 0%, #f1f1f1 100%);
|
||||
background-image: -ms-linear-gradient(-90deg, #fefefe 0%, #f1f1f1 100%);
|
||||
background-image: -o-linear-gradient(-90deg, #fefefe 0%, #f1f1f1 100%);
|
||||
background-image: linear-gradient(-180deg, #fefefe 0%, #f1f1f1 100%);
|
||||
background-repeat: no-repeat;
|
||||
background-color: #F2F2F2;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #424F59;
|
||||
color: #424f59;
|
||||
font-family: "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #0096DD;
|
||||
color: #0095dd;
|
||||
cursor: pointer; /* Use the correct cursor for anchors without an href */
|
||||
}
|
||||
|
||||
noscript {
|
||||
color: #f00;
|
||||
display: block;
|
||||
margin: 160px 0 0 0;
|
||||
a:active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
a:focus {
|
||||
outline: 1px dotted #0095dd;
|
||||
}
|
||||
|
||||
|
||||
a.no-underline {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#stage {
|
||||
background: #fff url(images/fox.png) no-repeat left 50% bottom 30px;
|
||||
background-size: 30px 31px;
|
||||
-webkit-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
-webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.25);;
|
||||
box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.25);
|
||||
margin: 60px auto 0;
|
||||
min-height: 550px;
|
||||
opacity: 0;
|
||||
/* padding-bottom = 30px (below icon) + 31px (firefox icon) + 40px (above icon) */
|
||||
padding: 50px 25px 101px 25px;
|
||||
text-align: center;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
header h1, header h2 {
|
||||
font-family: "Fira Sans", Helvetica, Arial, sans-serif;
|
||||
line-height: 1em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 24px;
|
||||
font-weight: normal;
|
||||
margin-bottom: 21px;
|
||||
}
|
||||
|
||||
header h2 {
|
||||
font-size: 20px;
|
||||
font-weight: 200;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
section p {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.error {
|
||||
background: #D63920;
|
||||
color: #fff;
|
||||
margin-bottom: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.error:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.graphic {
|
||||
background-repeat: none;
|
||||
background-size: 150px 130px;
|
||||
height: 130px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
text-indent: 100%;
|
||||
white-space: nowrap;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.graphic-checkbox {
|
||||
background-image: url(../images/graphic_checkbox.png);
|
||||
}
|
||||
|
||||
.graphic-mail {
|
||||
background-image: url(../images/graphic_mail.png);
|
||||
}
|
||||
|
||||
.input-row {
|
||||
margin-bottom: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.input-row input, .input-row select {
|
||||
border: 1px solid #C0C9D0;
|
||||
-webkit-border-radius: 5px;
|
||||
background:#fff;
|
||||
border-radius: 5px;
|
||||
color: #454f59;
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25);
|
||||
margin: 0 auto;
|
||||
min-height: 300px;
|
||||
padding: 60px 40px 40px 40px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
top: 80px;
|
||||
width: 420px;
|
||||
}
|
||||
|
||||
header h1
|
||||
{
|
||||
font-family: "Fira Sans", Helvetica, Arial, sans-serif;
|
||||
font-size: 24px;
|
||||
font-weight: 200;
|
||||
line-height: 1em;
|
||||
margin: 0 0 32px 0;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 18px;
|
||||
height: 45px;
|
||||
padding: 0 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.input-row input::-webkit-input-placeholder {
|
||||
color: #C0C9D0;
|
||||
}
|
||||
|
||||
.input-row input:-moz-placeholder { /* Firefox 18- */
|
||||
color: #C0C9D0;
|
||||
}
|
||||
|
||||
.input-row input::-moz-placeholder { /* Firefox 19+ */
|
||||
color: #C0C9D0;
|
||||
}
|
||||
|
||||
.input-row input:-ms-input-placeholder {
|
||||
color: #C0C9D0;
|
||||
}
|
||||
|
||||
.input-row select {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
-moz-user-select: none;
|
||||
appearance: none;
|
||||
background: transparent url(../images/ddarrow_inactive.png) no-repeat right 14px top 50%;
|
||||
background-size: 10px 17px;
|
||||
color: #C0C9D0;
|
||||
height: auto;
|
||||
outline: none;
|
||||
padding: 8px 20px;
|
||||
|
||||
/* Some hackery for Firefox since moz-appearance: none doesn't remove the arrow */
|
||||
text-indent: 0.01px;
|
||||
text-overflow: "";
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.input-row input:focus, .input-row select:focus {
|
||||
border-color: #6f7a85;
|
||||
}
|
||||
|
||||
.input-row select:focus {
|
||||
background-image: url(../images/ddarrow_active.png);
|
||||
color: #454f59;
|
||||
}
|
||||
|
||||
.input-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.input-row .input-help {
|
||||
margin-top: 10px;
|
||||
color: #C0C9D0;
|
||||
}
|
||||
|
||||
.button-row {
|
||||
margin-bottom: 20px;
|
||||
margin-top: 45px;
|
||||
margin-bottom:20px;
|
||||
}
|
||||
|
||||
.button-row button, .button-row a.button {
|
||||
background: #E66000;
|
||||
.button-row button,
|
||||
.button-row a.button {
|
||||
background: #0095dd;
|
||||
border: none;
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
color: #fff;
|
||||
color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
font-family: "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 24px;
|
||||
padding: 15px 0;
|
||||
transition-duration: 150ms;
|
||||
transition-property: background-color;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -188,199 +85,68 @@ section p {
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
.button-row a.button:active,
|
||||
.button-row a.button:hover,
|
||||
.button-row a.button:focus,
|
||||
.button-row button:active,
|
||||
.button-row button:hover,
|
||||
.button-row button:focus {
|
||||
background: #FF9500;
|
||||
background: #08c;
|
||||
}
|
||||
|
||||
.button-row button:disabled {
|
||||
background: #C0C9D0;
|
||||
}
|
||||
|
||||
/* Custom rows */
|
||||
.input-row-month-day select {
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.links {
|
||||
margin-bottom: 20px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.links a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.links a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.links .left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.links .right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.privacy-links, .privacy-links a {
|
||||
color: #C0C9D0;
|
||||
margin-top: 35px;
|
||||
}
|
||||
|
||||
.privacy-links + .button-row {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.verification-email-message {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.password-row {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.password-row > .password {
|
||||
padding-right: 75px;
|
||||
}
|
||||
|
||||
.password-row > .password + label {
|
||||
border-left: 1px solid #C0C9D0;
|
||||
color: #C0C9D0;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
/* it is very easy to accidentally select the text when clicking */
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
width: 55px;
|
||||
}
|
||||
|
||||
.password-row > .password:focus + label {
|
||||
border-color: #6F7A85;
|
||||
}
|
||||
|
||||
.password-row > .password + label > input[type=checkbox] {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.links + .privacy-links {
|
||||
margin: 20px 0 15px 0;
|
||||
}
|
||||
|
||||
.cannot-create-account-content {
|
||||
margin-top: 105px;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
-webkit-animation: 0.9s spin infinite linear;
|
||||
-moz-animation: 0.9s spin infinite linear;
|
||||
animation: 0.9s spin infinite linear;
|
||||
background-image: url(../images/spinnerlight.png);
|
||||
background-size: 30px 30px;
|
||||
display: block;
|
||||
margin: 130px auto 0;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
.graphic-sync-intro {
|
||||
background-image: url(images/graphic_sync_intro.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 150px 195px;
|
||||
height: 195px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
text-indent: 100%;
|
||||
white-space: nowrap;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
@-webkit-keyframes spin {
|
||||
from {
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: rotate(365deg);
|
||||
}
|
||||
.description,
|
||||
.button-row {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
@-moz-keyframes spin {
|
||||
from {
|
||||
-moz-transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
-moz-transform: rotate(365deg);
|
||||
}
|
||||
.links {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(365deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* TODO: These need further consideration */
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Responsiveness */
|
||||
|
||||
/* TODO: Confirm breakpoint sizes */
|
||||
@media only screen and (max-width: 500px) {
|
||||
html {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
#stage {
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
margin: 0 auto;
|
||||
margin: 30px auto 0 auto;
|
||||
min-height: none;
|
||||
min-width: 320px;
|
||||
padding: 0 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.button-row {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.button-row button,
|
||||
.button-row a.button {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Retina */
|
||||
|
||||
@media
|
||||
only screen and (-webkit-min-device-pixel-ratio: 2),
|
||||
only screen and ( min--moz-device-pixel-ratio: 2),
|
||||
only screen and ( -moz-min-device-pixel-ratio: 2),
|
||||
only screen and ( -o-min-device-pixel-ratio: 2/1),
|
||||
only screen and ( min-device-pixel-ratio: 2),
|
||||
only screen and ( min-resolution: 192dpi),
|
||||
only screen and ( min-resolution: 2dppx) {
|
||||
#stage {
|
||||
background-image: url(../images/fox@2x.png);
|
||||
}
|
||||
|
||||
.graphic-checkbox {
|
||||
background-image: url(../images/graphic_checkbox@2x.png);
|
||||
}
|
||||
|
||||
.graphic-mail {
|
||||
background-image: url(../images/graphic_mail@2x.png);
|
||||
}
|
||||
|
||||
.spinner {
|
||||
background-image: url(../images/spinnerlight@2x.png);
|
||||
}
|
||||
|
||||
.input-row select {
|
||||
background-image: url(../images/ddarrow_inactive@2x.png)
|
||||
}
|
||||
|
||||
.input-row select:focus {
|
||||
background-image: url(../images/ddarrow_active@2x.png);
|
||||
only screen and (min-device-pixel-ratio: 2),
|
||||
only screen and ( min-resolution: 192dpi),
|
||||
only screen and ( min-resolution: 2dppx) {
|
||||
.graphic-sync-intro {
|
||||
background-image: url(images/graphic_sync_intro@2x.png);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче