Publish Vulpes Preview 15 sources for desktop, Android and Tundra
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
This commit is contained in:
OverSu
parent
93e3a48004
commit
b38dea0597
25901 changed files with 9982925 additions and 369 deletions
374
gaia/apps/system/fxa/style/fxa.css
Executable file
374
gaia/apps/system/fxa/style/fxa.css
Executable file
|
|
@ -0,0 +1,374 @@
|
|||
/*
|
||||
* Basic and shared styles of the structure
|
||||
* */
|
||||
html, body {
|
||||
font-size: 62.5%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
color: #000;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
|
||||
html, body * {
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
input {
|
||||
-moz-user-select: text;
|
||||
}
|
||||
|
||||
.vertical {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
section[role="region"] {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
body {
|
||||
background: url(bg_light.png);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.7rem;
|
||||
font-weight: 400;
|
||||
line-height: 2.3rem;
|
||||
margin: 0 0 1rem;
|
||||
text-align: start;
|
||||
}
|
||||
h3:-moz-dir(rtl) {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
label {
|
||||
width:100%;
|
||||
display:block;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* * * * * * * * * * * * * * * * * * * * * * * *
|
||||
* Navigation bar based on a flex model
|
||||
* * * * * * * * * * * * * * * * * * * * * * * */
|
||||
|
||||
.navigation {
|
||||
position: absolute;
|
||||
background: #f4f4f4;
|
||||
border-top: 0.1rem solid #a6a6a6;
|
||||
padding: .75rem 1.5rem;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
left: 0;
|
||||
right:0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Overwrite this property from Building Blocks */
|
||||
html[dir="ltr"] .navigation button { margin-left: 0.5rem; }
|
||||
html[dir="rtl"] .navigation button { margin-right: 0.5rem; }
|
||||
|
||||
html[dir="ltr"] .navigation button.start { margin-left: 0.5rem; }
|
||||
html[dir="rtl"] .navigation button.start { margin-right: 0.5rem; }
|
||||
|
||||
.navigation button.start,
|
||||
.navigation button.end {
|
||||
width: calc((100% / 2) - 0.5rem);
|
||||
position: relative;
|
||||
}
|
||||
html[dir="ltr"] .navigation button.start,
|
||||
html[dir="ltr"] .navigation button.end { float: left; }
|
||||
html[dir="rtl"] .navigation button.start,
|
||||
html[dir="rtl"] .navigation button.end { float: right; }
|
||||
|
||||
/* When there is only one option, we remove the margin */
|
||||
|
||||
.navigation-single-button button.start {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navigation.navigation-single-button button.end {
|
||||
margin: 0;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.navigation-back-only button {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.navigation-back-only button.end {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navigation-done #fxa-module-back,
|
||||
.navigation-done #fxa-module-next {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#fxa-module-done {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navigation-done #fxa-module-done {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* * * * * * * * * * * * * * * * * * * * * * * *
|
||||
* Steps & Container
|
||||
* All steps are contained in several views inside
|
||||
* 'step-container'. We will use HTML 'import' polyfill
|
||||
* and lazy load of the views. A view is a set of steps.
|
||||
* * * * * * * * * * * * * * * * * * * * * * * */
|
||||
|
||||
.bb-steps {
|
||||
margin: 0.5rem 1.5rem;
|
||||
}
|
||||
|
||||
#step-container {
|
||||
height: calc(100% - 6.3rem - 5rem);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ff_account,
|
||||
.screen {
|
||||
font-family: sans-serif;
|
||||
font-size: 1.7rem;
|
||||
line-height:2.3rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
overflow: scroll;
|
||||
display: none;
|
||||
padding: 1.5rem 2.5rem;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.screen p.fxa-intro {
|
||||
text-align: start;
|
||||
line-height: 2.3rem;
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
.screen p {
|
||||
text-align: start;
|
||||
line-height: 1.9rem;
|
||||
font-size: 1.5rem;
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
.current {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Intro screen styles
|
||||
*/
|
||||
|
||||
#fxa-hello-user {
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
#fxa-user-email,
|
||||
#fxa-user-set-email {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
p.fine-print {
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.6rem;
|
||||
}
|
||||
|
||||
/*
|
||||
* Verification Screen Styles
|
||||
*/
|
||||
|
||||
ul.fxa-verification-wrapper {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul.fxa-verification-wrapper li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Password screen styles
|
||||
*/
|
||||
|
||||
#show-pw-wrapper {
|
||||
width: 100%;
|
||||
display: block;
|
||||
margin: 0 -1.5rem;
|
||||
}
|
||||
|
||||
#show-pw-wrapper p {
|
||||
display: block;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
html[dir="ltr"] #show-pw-wrapper p { float: left; }
|
||||
html[dir="rtl"] #show-pw-wrapper p { float: right; }
|
||||
|
||||
html[dir="ltr"] #show-pw-wrapper > label { float: left; }
|
||||
html[dir="rtl"] #show-pw-wrapper > label { float: right; }
|
||||
|
||||
/* Animate next screen */
|
||||
.currentToPrev {
|
||||
display:block;
|
||||
}
|
||||
html[dir="ltr"] .currentToPrev {
|
||||
animation: currentToLeft var(--transition-duration) forwards;
|
||||
}
|
||||
html[dir="rtl"] .currentToPrev {
|
||||
animation: currentToRight var(--transition-duration) forwards;
|
||||
}
|
||||
|
||||
.nextToCurrent {
|
||||
display:block;
|
||||
}
|
||||
html[dir="ltr"] .nextToCurrent {
|
||||
animation: rightToCurrent var(--transition-duration) forwards;
|
||||
}
|
||||
html[dir="rtl"] .nextToCurrent {
|
||||
animation: leftToCurrent var(--transition-duration) forwards;
|
||||
}
|
||||
|
||||
/* Animate prev screen */
|
||||
.prevToCurrent {
|
||||
display: block;
|
||||
}
|
||||
html[dir="ltr"] .prevToCurrent {
|
||||
animation: leftToCurrent var(--transition-duration) forwards;
|
||||
}
|
||||
html[dir="rtl"] .prevToCurrent {
|
||||
animation: rightToCurrent var(--transition-duration) forwards;
|
||||
}
|
||||
|
||||
.currentToNext {
|
||||
display: block;
|
||||
}
|
||||
html[dir="ltr"] .currentToNext {
|
||||
animation: currentToRight var(--transition-duration) forwards;
|
||||
}
|
||||
html[dir="rtl"] .currentToNext {
|
||||
animation: currentToLeft var(--transition-duration) forwards;
|
||||
}
|
||||
|
||||
@keyframes currentToLeft {
|
||||
0% { transform: translateX(0); }
|
||||
100% { transform: translateX(-100%); }
|
||||
}
|
||||
@keyframes rightToCurrent {
|
||||
0% { transform: translateX(100%); }
|
||||
100% { transform: translateX(0); }
|
||||
}
|
||||
@keyframes leftToCurrent {
|
||||
0% { transform: translateX(-100%); }
|
||||
100% { transform: translateX(0); }
|
||||
}
|
||||
@keyframes currentToRight {
|
||||
0% { transform: translateX(0); }
|
||||
100% { transform: translateX(100%); }
|
||||
}
|
||||
|
||||
.current {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.screen a {
|
||||
text-decoration: underline;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.fxa-logo {
|
||||
background-image: url('fxa_logo.png');
|
||||
background-size: 14rem auto;
|
||||
background-repeat: no-repeat;
|
||||
margin: 0 auto;
|
||||
width: 14rem;
|
||||
height: 15rem;
|
||||
}
|
||||
|
||||
p.fxa-envelope {
|
||||
background-image: url('fxa_envelope.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 7rem;
|
||||
padding-inline-start: 8rem;
|
||||
padding-top: 1rem;
|
||||
line-height: 2rem;
|
||||
min-height: 6.4rem;
|
||||
max-width:100%;
|
||||
overflow: hidden; /* short email addresses will only take up one line*/
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
html[dir="ltr"] p.fxa-envelope { background-position: left top; }
|
||||
html[dir="rtl"] p.fxa-envelope { background-position: right top; }
|
||||
|
||||
#fxa-error-overlay {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* * * * * * * * * * * * * * * * * * * * * * * *
|
||||
* Overlay:
|
||||
* IMPORTANT: Avoid to use 'visibility' or 'opacity' due
|
||||
* to performance issues. For hiding, use 'display:none;''
|
||||
* * * * * * * * * * * * * * * * * * * * * * * */
|
||||
|
||||
#fxa-overlay {
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
font-size: 2rem;
|
||||
background-color: rgba(200,200,200,0.9);
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#fxa-overlay.show {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
form[role=dialog] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
form[role=dialog].show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Classes to ensure functionality
|
||||
*/
|
||||
|
||||
a.disabled {
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.button.icon-dialog select {
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
Loading…
Reference in a new issue