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
Binary file not shown.
|
After Width: | Height: | Size: 718 B |
Binary file not shown.
|
After Width: | Height: | Size: 1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 935 B |
Binary file not shown.
|
After Width: | Height: | Size: 397 B |
Binary file not shown.
|
After Width: | Height: | Size: 650 B |
436
overrides/system.gaiamobile.org/mobile_id/style/mobile_id.css
Normal file
436
overrides/system.gaiamobile.org/mobile_id/style/mobile_id.css
Normal file
|
|
@ -0,0 +1,436 @@
|
|||
html, body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 10px;
|
||||
overflow-x: hidden !important;
|
||||
overflow-y: hidden !important;
|
||||
font-family: 'MozTT', sans-serif;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
section[role="region"] {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
color: #ccc;
|
||||
text-decoration: none !important;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.disabled *{
|
||||
text-decoration: none !important;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* We have a 'magic' button which translates with us through the
|
||||
* proccess. This is called 'multistate-button' or 'msb'
|
||||
*/
|
||||
|
||||
.multistate-button {
|
||||
width: 200%;
|
||||
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
bottom: 1rem;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
transition: all .3s ease;
|
||||
|
||||
border: none;
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.msb-button-step {
|
||||
height: 4rem;
|
||||
width: calc(50% - 2rem);
|
||||
|
||||
float: left;
|
||||
margin: 0 1rem;
|
||||
|
||||
background: #00AACC;
|
||||
outline: none;
|
||||
border: none;
|
||||
border-radius: 2rem;
|
||||
line-height: 4rem;
|
||||
text-decoration: none;
|
||||
font-size: 1.8rem;
|
||||
font-style: italic;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.msb-button-step progress {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
/*
|
||||
* Some buttons which have different states
|
||||
*/
|
||||
|
||||
.states-wrapper {
|
||||
height: 12rem;
|
||||
transform: translateY(-4rem);
|
||||
transition: all .3s ease;
|
||||
}
|
||||
|
||||
.state-resend .states-wrapper div span:first-child{
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
background: url(images/warning.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
.state-allow .states-wrapper{
|
||||
transform: translateY(0);
|
||||
}
|
||||
.state-connecting .states-wrapper{
|
||||
transform: translateY(-4rem);
|
||||
}
|
||||
.state-resend .states-wrapper{
|
||||
transform: translateY(0);
|
||||
}
|
||||
.state-verify .states-wrapper{
|
||||
transform: translateY(-4rem);
|
||||
}
|
||||
.state-verifying .states-wrapper{
|
||||
transform: translateY(-8rem);
|
||||
}
|
||||
.state-verified > .states-wrapper{
|
||||
transform: translateY(-12rem);
|
||||
}
|
||||
|
||||
.state-verified {
|
||||
background: #5F9B0A;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.state-resend {
|
||||
background: #B90000 !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
We will contain the three main panels of the Mobile ID flow:
|
||||
- [1] Selection of the phone number
|
||||
- [2] Add verification code (if required)
|
||||
- [3] Feedback screen
|
||||
*/
|
||||
|
||||
#verification-code-timer {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#verification-code-timer.show {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.panels-container {
|
||||
height: calc(100% - 11.3rem);
|
||||
width: 400%;
|
||||
overflow: hidden;
|
||||
|
||||
transition: all .6s ease;
|
||||
}
|
||||
|
||||
.panel {
|
||||
height: 100%;
|
||||
width: 25%;
|
||||
|
||||
float: left;
|
||||
overflow-x: hidden !important;
|
||||
overflow-y: scroll;
|
||||
|
||||
background: white;
|
||||
}
|
||||
|
||||
p.explanation {
|
||||
font-size: 1.9rem;
|
||||
font-weight: 300;
|
||||
line-height: 2.2rem;
|
||||
}
|
||||
|
||||
div, span, p, label {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/*
|
||||
[1] Selection of the phone number
|
||||
*/
|
||||
|
||||
.msisdn-selection-panel p.explanation {
|
||||
padding: 2rem 1rem 1rem 2rem;
|
||||
font-size: 1.9rem;
|
||||
font-weight: 300;
|
||||
line-height: 2.2rem;
|
||||
}
|
||||
|
||||
.msisdn-overflow-shield {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.msisdn-selection-wrapper {
|
||||
width: 200%;
|
||||
transition: all .3s ease;
|
||||
}
|
||||
|
||||
.msisdn-selection-wrapper div{
|
||||
padding: 0 2rem 1rem 2rem;
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
/*
|
||||
* We can select one of the pre-popopulated MSISDN
|
||||
*/
|
||||
|
||||
ul.phone-options-list {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
list-style: none;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
ul.phone-options-list li {
|
||||
height: 5rem;
|
||||
position: relative;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
vertical-align: baseline;
|
||||
font-size: 1.7rem;
|
||||
line-height: 5.5rem;
|
||||
border-bottom: .1rem solid #ccc;
|
||||
}
|
||||
|
||||
ul.phone-options-list li:last-child {
|
||||
border: none;
|
||||
}
|
||||
|
||||
ul.phone-options-list li input {
|
||||
display: none;
|
||||
float: right;
|
||||
}
|
||||
|
||||
ul.phone-options-list li span.icon {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
float: left;
|
||||
margin-top: 1rem;
|
||||
margin-right: 1rem;
|
||||
|
||||
background-image: url(images/simcards.png);
|
||||
background-position: 0 0;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
ul.phone-options-list li span.sim1 {
|
||||
background-image: url(images/simcards.png);
|
||||
background-position: 0 0;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
ul.phone-options-list li span.sim2 {
|
||||
background-image: url(images/simcards.png);
|
||||
background-position: 0 -3rem;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
ul.phone-options-list li span.primary {
|
||||
background-image: image-set(url("images/Telf_tick.png") 1x, url("images/Telf_tick@1.5x.png") 1.5x, url("images/Telf_tick@2x.png") 2x, url("images/Telf_tick@2.25x.png") 2.25x);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
|
||||
ul.phone-options-list li span.radio-mask {
|
||||
width: 5rem;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
ul.phone-options-list li input:checked + span.radio-mask {
|
||||
background-image: image-set(url("images/checked.png") 1x, url("images/checked@1.5x.png") 1.5x, url("images/checked@2x.png") 2x);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
#add-msisdn {
|
||||
width: 100%;
|
||||
|
||||
margin-top: 2rem;
|
||||
font-size: 1.5rem;
|
||||
color: #858585;
|
||||
text-decoration: underline;
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
/*
|
||||
If we type the MSISDN manually
|
||||
*/
|
||||
|
||||
#do-automatic-msisdn {
|
||||
width: 100%;
|
||||
|
||||
padding: 1rem;
|
||||
box-sizing: border-box;
|
||||
font-size: 1.5rem;
|
||||
color: #858585;
|
||||
text-decoration: underline;
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
ul.msisdn-form {
|
||||
width: 100%;
|
||||
|
||||
margin-top: 6rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul.msisdn-form li{
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
ul.msisdn-form li{
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
ul.msisdn-form li button{
|
||||
height: 4rem;
|
||||
width: 5rem;
|
||||
padding-right: 2rem;
|
||||
text-align: center;
|
||||
line-height: 4.2rem;
|
||||
}
|
||||
|
||||
ul.msisdn-form li input{
|
||||
height: 4rem;
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
ul.msisdn-form li:last-child{
|
||||
width: calc(100% - 7.3rem);
|
||||
}
|
||||
|
||||
.button-select-wrapper {
|
||||
width: 7rem !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
overflow: hidden !important;
|
||||
text-overflow: unset !important;
|
||||
}
|
||||
|
||||
.button-select-wrapper select {
|
||||
width: calc(100% + 1.9rem) !important;
|
||||
font-size: 1.6rem;
|
||||
text-align: left;
|
||||
height: 100%;
|
||||
background: none;
|
||||
border: none;
|
||||
padding-left: .6rem !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/*
|
||||
[2] Add verification code (if required)
|
||||
*/
|
||||
|
||||
.verification-panel {
|
||||
padding: 2rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.verification-panel p {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#verification-code {
|
||||
width: 100%;
|
||||
height: 5rem;
|
||||
|
||||
margin-top: 4rem;
|
||||
margin-bottom: 2rem;
|
||||
font-size: 3rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input.error {
|
||||
border: .1rem solid #B90000;
|
||||
animation: error-dance .5s;
|
||||
animation-iteration-count: 2;
|
||||
}
|
||||
|
||||
@keyframes error-dance {
|
||||
0% { transform: rotate(0); }
|
||||
25% { transform: rotate(1deg); }
|
||||
50% { transform: rotate(0); }
|
||||
75% { transform: rotate(1deg); }
|
||||
100% { transform: rotate(0deg); }
|
||||
}
|
||||
|
||||
|
||||
|
||||
#verification-timer {
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/*
|
||||
[3] Feedback screen
|
||||
*/
|
||||
|
||||
.done-panel {
|
||||
background-repeat: no-repeat;
|
||||
background-size: 49%;
|
||||
background-position: center 60%;
|
||||
}
|
||||
|
||||
.done-panel-gif {
|
||||
background-image: url(images/animation.gif);
|
||||
}
|
||||
|
||||
.done-panel p {
|
||||
padding: 2rem 1rem;
|
||||
box-sizing: border-box;
|
||||
font-size: 2.2rem;
|
||||
text-align: center;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
#legend {
|
||||
text-align: center;
|
||||
display: block;
|
||||
padding-top: 0.8rem;
|
||||
padding-left: 1.3rem;
|
||||
}
|
||||
Loading…
Reference in a new issue