Scope install styles to install element
This commit is contained in:
lilia
Scott Nonnenberg
parent
285b5ce062
commit
45bf7330ac
3 changed files with 732 additions and 865 deletions
|
|
@ -3278,295 +3278,239 @@ li.entry .error-icon-container {
|
||||||
.iti-flag {
|
.iti-flag {
|
||||||
background: url("../images/flags.png"); }
|
background: url("../images/flags.png"); }
|
||||||
|
|
||||||
* {
|
#install {
|
||||||
box-sizing: border-box; }
|
height: 100%;
|
||||||
|
|
||||||
html, body {
|
|
||||||
height: 100%; }
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
font-family: Roboto, "Helvetica Neue", Arial, Helvetica, sans-serif;
|
|
||||||
position: relative;
|
|
||||||
background: #2090ea;
|
background: #2090ea;
|
||||||
color: white;
|
color: white;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
overflow: auto; }
|
overflow: auto; }
|
||||||
|
|
||||||
.clearfix:before,
|
|
||||||
.clearfix:after {
|
|
||||||
display: table;
|
|
||||||
content: " "; }
|
|
||||||
|
|
||||||
.clearfix:after {
|
|
||||||
clear: both; }
|
|
||||||
|
|
||||||
input, button, select, textarea {
|
|
||||||
font-family: inherit;
|
|
||||||
font-size: inherit;
|
|
||||||
line-height: inherit; }
|
|
||||||
|
|
||||||
#install {
|
|
||||||
height: 100%; }
|
|
||||||
@media screen and (max-height: 665px) {
|
@media screen and (max-height: 665px) {
|
||||||
#install {
|
#install {
|
||||||
height: 666px; } }
|
height: 666px; } }
|
||||||
|
#install input, #install button, #install select, #install textarea {
|
||||||
.main {
|
font-family: inherit;
|
||||||
padding: 70px 0 50px; }
|
font-size: inherit;
|
||||||
|
line-height: inherit; }
|
||||||
.step {
|
#install .main {
|
||||||
display: none;
|
padding: 70px 0 50px; }
|
||||||
height: 100%; }
|
#install .step {
|
||||||
|
display: none;
|
||||||
.inner {
|
height: 100%; }
|
||||||
display: flex;
|
#install .inner {
|
||||||
align-items: center;
|
display: flex;
|
||||||
justify-content: center;
|
align-items: center;
|
||||||
flex-direction: column;
|
justify-content: center;
|
||||||
height: 100%; }
|
flex-direction: column;
|
||||||
.inner .step-body {
|
height: 100%; }
|
||||||
margin-top: auto;
|
#install .inner .step-body {
|
||||||
|
margin-top: auto;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 600px; }
|
||||||
|
#install #signal-computer,
|
||||||
|
#install #signal-phone {
|
||||||
|
max-width: 50%;
|
||||||
|
max-height: 250px; }
|
||||||
|
#install p {
|
||||||
|
max-width: 35em;
|
||||||
|
margin: 1em auto;
|
||||||
|
line-height: 1.5em;
|
||||||
|
font-size: 1.2em;
|
||||||
|
font-weight: bold; }
|
||||||
|
#install a {
|
||||||
|
cursor: pointer; }
|
||||||
|
#install a, #install a:visited, #install a:hover {
|
||||||
|
text-decoration: none; }
|
||||||
|
#install .button {
|
||||||
|
display: inline-block;
|
||||||
|
text-transform: uppercase;
|
||||||
|
border: none;
|
||||||
|
font-weight: bold;
|
||||||
|
min-width: 300px;
|
||||||
|
padding: 0.5em;
|
||||||
|
margin: 0.5em 0;
|
||||||
|
background: white;
|
||||||
|
color: #2090ea; }
|
||||||
|
#install .nav {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 600px; }
|
bottom: 50px;
|
||||||
|
margin-top: auto;
|
||||||
#signal-computer,
|
padding: 0 20px; }
|
||||||
#signal-phone {
|
#install .nav .button {
|
||||||
max-width: 50%;
|
margin-bottom: 3em; }
|
||||||
max-height: 250px; }
|
#install .nav .dot {
|
||||||
|
display: inline-block;
|
||||||
p {
|
cursor: pointer;
|
||||||
max-width: 35em;
|
margin: 10px;
|
||||||
margin: 1em auto;
|
width: 20px;
|
||||||
line-height: 1.5em;
|
height: 20px;
|
||||||
font-size: 1.2em;
|
border-radius: 10px;
|
||||||
font-weight: bold; }
|
background: white;
|
||||||
|
border: solid 5px #2090ea; }
|
||||||
a {
|
#install .nav .dot.selected {
|
||||||
cursor: pointer; }
|
background: #a2d2f4; }
|
||||||
a, a:visited, a:hover {
|
#install .link:hover, #install .link:focus {
|
||||||
text-decoration: none; }
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
|
||||||
.button {
|
|
||||||
display: inline-block;
|
|
||||||
text-transform: uppercase;
|
|
||||||
border: none;
|
|
||||||
font-weight: bold;
|
|
||||||
min-width: 300px;
|
|
||||||
padding: 0.5em;
|
|
||||||
margin: 0.5em 0;
|
|
||||||
background: white;
|
|
||||||
color: #2090ea; }
|
|
||||||
|
|
||||||
.nav {
|
|
||||||
width: 100%;
|
|
||||||
bottom: 50px;
|
|
||||||
margin-top: auto;
|
|
||||||
padding: 0 20px; }
|
|
||||||
.nav .button {
|
|
||||||
margin-bottom: 3em; }
|
|
||||||
.nav .dot {
|
|
||||||
display: inline-block;
|
|
||||||
cursor: pointer;
|
|
||||||
margin: 10px;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
border-radius: 10px;
|
|
||||||
background: white;
|
|
||||||
border: solid 5px #2090ea; }
|
|
||||||
.nav .dot.selected {
|
|
||||||
background: #a2d2f4; }
|
|
||||||
|
|
||||||
.link:hover, .link:focus {
|
|
||||||
background: rgba(255, 255, 255, 0.3);
|
|
||||||
outline: none; }
|
|
||||||
.link, .link:visited, .link:hover {
|
|
||||||
padding: 0 3px;
|
|
||||||
color: white;
|
|
||||||
font-weight: bold;
|
|
||||||
border-bottom: dashed 2px white;
|
|
||||||
text-decoration: none; }
|
|
||||||
|
|
||||||
.container {
|
|
||||||
min-width: 650px; }
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 30pt;
|
|
||||||
font-weight: normal;
|
|
||||||
padding-bottom: 10px; }
|
|
||||||
|
|
||||||
h3.step {
|
|
||||||
margin-top: 0;
|
|
||||||
font-weight: bold; }
|
|
||||||
|
|
||||||
.help {
|
|
||||||
border-top: 2px solid #f3f3f3;
|
|
||||||
padding: 1.5em 0.1em; }
|
|
||||||
|
|
||||||
.install {
|
|
||||||
display: inline-block;
|
|
||||||
margin-top: 90px; }
|
|
||||||
|
|
||||||
#qr {
|
|
||||||
display: inline-block;
|
|
||||||
min-height: 266px; }
|
|
||||||
#qr img {
|
|
||||||
border: 5px solid white; }
|
|
||||||
#qr canvas {
|
|
||||||
display: none; }
|
|
||||||
|
|
||||||
#device-name {
|
|
||||||
border: none;
|
|
||||||
border-bottom: 1px solid white;
|
|
||||||
padding: 8px;
|
|
||||||
background: transparent;
|
|
||||||
color: white;
|
|
||||||
font-weight: bold;
|
|
||||||
text-align: center; }
|
|
||||||
#device-name::selection, #device-name a::selection {
|
|
||||||
color: #454545;
|
|
||||||
background: white; }
|
|
||||||
#device-name::-moz-selection, #device-name a::-moz-selection {
|
|
||||||
color: #454545;
|
|
||||||
background: white; }
|
|
||||||
#device-name:focus {
|
|
||||||
outline: none; }
|
outline: none; }
|
||||||
#device-name:hover, #device-name:focus {
|
#install .link, #install .link:visited, #install .link:hover {
|
||||||
background: rgba(255, 255, 255, 0.1); }
|
padding: 0 3px;
|
||||||
|
color: white;
|
||||||
#verifyCode,
|
font-weight: bold;
|
||||||
#code,
|
border-bottom: dashed 2px white;
|
||||||
#number {
|
text-decoration: none; }
|
||||||
box-sizing: border-box;
|
#install .container {
|
||||||
width: 100%;
|
min-width: 650px; }
|
||||||
display: block;
|
#install h1 {
|
||||||
margin-bottom: 0.5em;
|
font-size: 30pt;
|
||||||
text-align: center; }
|
font-weight: normal;
|
||||||
|
padding-bottom: 10px; }
|
||||||
#request-voice,
|
#install h3.step {
|
||||||
#request-sms {
|
margin-top: 0;
|
||||||
box-sizing: border-box; }
|
font-weight: bold; }
|
||||||
|
#install .help {
|
||||||
#request-sms {
|
border-top: 2px solid #f3f3f3;
|
||||||
width: 57%;
|
padding: 1.5em 0.1em; }
|
||||||
float: right; }
|
#install .install {
|
||||||
|
|
||||||
#request-voice {
|
|
||||||
width: 40%;
|
|
||||||
float: left; }
|
|
||||||
|
|
||||||
.number-container {
|
|
||||||
position: relative;
|
|
||||||
margin-bottom: 0.5em; }
|
|
||||||
|
|
||||||
.number-container .intl-tel-input,
|
|
||||||
.number-container .number {
|
|
||||||
width: 100%; }
|
|
||||||
|
|
||||||
.number-container::after {
|
|
||||||
visibility: hidden;
|
|
||||||
content: ' ';
|
|
||||||
display: inline-block;
|
|
||||||
border-radius: 1.5em;
|
|
||||||
width: 1.5em;
|
|
||||||
height: 1.5em;
|
|
||||||
line-height: 1.5em;
|
|
||||||
color: #ffffff;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 100%;
|
|
||||||
margin: 3px 8px;
|
|
||||||
text-align: center; }
|
|
||||||
|
|
||||||
.number-container.valid::after {
|
|
||||||
visibility: visible;
|
|
||||||
content: '✓';
|
|
||||||
background-color: #0f9d58;
|
|
||||||
color: #ffffff; }
|
|
||||||
|
|
||||||
.number-container.invalid::after {
|
|
||||||
visibility: visible;
|
|
||||||
content: '!';
|
|
||||||
background-color: #f44336;
|
|
||||||
color: #ffffff; }
|
|
||||||
|
|
||||||
#error {
|
|
||||||
color: white;
|
|
||||||
font-weight: bold;
|
|
||||||
padding: 0.5em;
|
|
||||||
text-align: center; }
|
|
||||||
|
|
||||||
#error {
|
|
||||||
background-color: #f44336; }
|
|
||||||
|
|
||||||
#error:before {
|
|
||||||
content: '\26a0';
|
|
||||||
padding-right: 0.5em; }
|
|
||||||
|
|
||||||
.narrow {
|
|
||||||
margin: auto;
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 275px;
|
|
||||||
max-width: 100%; }
|
|
||||||
|
|
||||||
ul.country-list {
|
|
||||||
min-width: 197px !important; }
|
|
||||||
|
|
||||||
.confirmation-dialog, .progress-dialog, .error-dialog {
|
|
||||||
padding: 1em;
|
|
||||||
text-align: left; }
|
|
||||||
|
|
||||||
.number {
|
|
||||||
text-align: center; }
|
|
||||||
|
|
||||||
.confirmation-dialog button, .error-dialog button {
|
|
||||||
float: right;
|
|
||||||
margin-left: 10px; }
|
|
||||||
|
|
||||||
.progress-dialog {
|
|
||||||
text-align: center;
|
|
||||||
padding: 1em;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 600px;
|
|
||||||
margin: auto; }
|
|
||||||
.progress-dialog .status {
|
|
||||||
padding: 1em; }
|
|
||||||
.progress-dialog .bar-container {
|
|
||||||
height: 1em;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
border: solid 1px white; }
|
|
||||||
.progress-dialog .bar {
|
|
||||||
width: 0;
|
|
||||||
height: 100%;
|
|
||||||
background-color: #a2d2f4;
|
|
||||||
transition: width 0.25s; }
|
|
||||||
|
|
||||||
.error-dialog {
|
|
||||||
display: none; }
|
|
||||||
|
|
||||||
.modal-container {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: rgba(0, 0, 0, 0.1);
|
|
||||||
top: 0;
|
|
||||||
padding-top: 10em;
|
|
||||||
text-align: center; }
|
|
||||||
.modal-container .modal-main {
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 80%;
|
margin-top: 90px; }
|
||||||
max-width: 500px;
|
#install #qr {
|
||||||
border: solid 2px #2090ea;
|
display: inline-block;
|
||||||
background: white;
|
min-height: 266px; }
|
||||||
margin: 10% auto;
|
#install #qr img {
|
||||||
box-shadow: 0 0 5px 3px rgba(10, 62, 103, 0.2); }
|
border: 5px solid white; }
|
||||||
.modal-container .modal-main h4 {
|
#install #qr canvas {
|
||||||
background-color: #2090ea;
|
display: none; }
|
||||||
color: white;
|
#install #device-name {
|
||||||
padding: 1em;
|
border: none;
|
||||||
margin: 0;
|
border-bottom: 1px solid white;
|
||||||
text-align: left; }
|
padding: 8px;
|
||||||
|
background: transparent;
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center; }
|
||||||
|
#install #device-name::selection, #install #device-name a::selection {
|
||||||
|
color: #454545;
|
||||||
|
background: white; }
|
||||||
|
#install #device-name::-moz-selection, #install #device-name a::-moz-selection {
|
||||||
|
color: #454545;
|
||||||
|
background: white; }
|
||||||
|
#install #device-name:focus {
|
||||||
|
outline: none; }
|
||||||
|
#install #device-name:hover, #install #device-name:focus {
|
||||||
|
background: rgba(255, 255, 255, 0.1); }
|
||||||
|
#install #verifyCode,
|
||||||
|
#install #code,
|
||||||
|
#install #number {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
text-align: center; }
|
||||||
|
#install #request-voice,
|
||||||
|
#install #request-sms {
|
||||||
|
box-sizing: border-box; }
|
||||||
|
#install #request-sms {
|
||||||
|
width: 57%;
|
||||||
|
float: right; }
|
||||||
|
#install #request-voice {
|
||||||
|
width: 40%;
|
||||||
|
float: left; }
|
||||||
|
#install .number-container {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 0.5em; }
|
||||||
|
#install .number-container .intl-tel-input,
|
||||||
|
#install .number-container .number {
|
||||||
|
width: 100%; }
|
||||||
|
#install .number-container::after {
|
||||||
|
visibility: hidden;
|
||||||
|
content: ' ';
|
||||||
|
display: inline-block;
|
||||||
|
border-radius: 1.5em;
|
||||||
|
width: 1.5em;
|
||||||
|
height: 1.5em;
|
||||||
|
line-height: 1.5em;
|
||||||
|
color: #ffffff;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 100%;
|
||||||
|
margin: 3px 8px;
|
||||||
|
text-align: center; }
|
||||||
|
#install .number-container.valid::after {
|
||||||
|
visibility: visible;
|
||||||
|
content: '✓';
|
||||||
|
background-color: #0f9d58;
|
||||||
|
color: #ffffff; }
|
||||||
|
#install .number-container.invalid::after {
|
||||||
|
visibility: visible;
|
||||||
|
content: '!';
|
||||||
|
background-color: #f44336;
|
||||||
|
color: #ffffff; }
|
||||||
|
#install #error {
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 0.5em;
|
||||||
|
text-align: center; }
|
||||||
|
#install #error {
|
||||||
|
background-color: #f44336; }
|
||||||
|
#install #error:before {
|
||||||
|
content: '\26a0';
|
||||||
|
padding-right: 0.5em; }
|
||||||
|
#install .narrow {
|
||||||
|
margin: auto;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 275px;
|
||||||
|
max-width: 100%; }
|
||||||
|
#install ul.country-list {
|
||||||
|
min-width: 197px !important; }
|
||||||
|
#install .confirmation-dialog, #install .progress-dialog, #install .error-dialog {
|
||||||
|
padding: 1em;
|
||||||
|
text-align: left; }
|
||||||
|
#install .number {
|
||||||
|
text-align: center; }
|
||||||
|
#install .confirmation-dialog button, #install .error-dialog button {
|
||||||
|
float: right;
|
||||||
|
margin-left: 10px; }
|
||||||
|
#install .progress-dialog {
|
||||||
|
text-align: center;
|
||||||
|
padding: 1em;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 600px;
|
||||||
|
margin: auto; }
|
||||||
|
#install .progress-dialog .status {
|
||||||
|
padding: 1em; }
|
||||||
|
#install .progress-dialog .bar-container {
|
||||||
|
height: 1em;
|
||||||
|
background-color: #f3f3f3;
|
||||||
|
border: solid 1px white; }
|
||||||
|
#install .progress-dialog .bar {
|
||||||
|
width: 0;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #a2d2f4;
|
||||||
|
transition: width 0.25s; }
|
||||||
|
#install .error-dialog {
|
||||||
|
display: none; }
|
||||||
|
#install .modal-container {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.1);
|
||||||
|
top: 0;
|
||||||
|
padding-top: 10em;
|
||||||
|
text-align: center; }
|
||||||
|
#install .modal-container .modal-main {
|
||||||
|
display: inline-block;
|
||||||
|
width: 80%;
|
||||||
|
max-width: 500px;
|
||||||
|
border: solid 2px #2090ea;
|
||||||
|
background: white;
|
||||||
|
margin: 10% auto;
|
||||||
|
box-shadow: 0 0 5px 3px rgba(10, 62, 103, 0.2); }
|
||||||
|
#install .modal-container .modal-main h4 {
|
||||||
|
background-color: #2090ea;
|
||||||
|
color: white;
|
||||||
|
padding: 1em;
|
||||||
|
margin: 0;
|
||||||
|
text-align: left; }
|
||||||
|
|
||||||
/*# sourceMappingURL=manifest.css.map */
|
/*# sourceMappingURL=manifest.css.map */
|
||||||
|
|
|
||||||
|
|
@ -839,296 +839,240 @@
|
||||||
.iti-flag {
|
.iti-flag {
|
||||||
background: url("../images/flags.png"); }
|
background: url("../images/flags.png"); }
|
||||||
|
|
||||||
* {
|
#install {
|
||||||
box-sizing: border-box; }
|
height: 100%;
|
||||||
|
|
||||||
html, body {
|
|
||||||
height: 100%; }
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
font-family: Roboto, "Helvetica Neue", Arial, Helvetica, sans-serif;
|
|
||||||
position: relative;
|
|
||||||
background: #2090ea;
|
background: #2090ea;
|
||||||
color: white;
|
color: white;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
overflow: auto; }
|
overflow: auto; }
|
||||||
|
|
||||||
.clearfix:before,
|
|
||||||
.clearfix:after {
|
|
||||||
display: table;
|
|
||||||
content: " "; }
|
|
||||||
|
|
||||||
.clearfix:after {
|
|
||||||
clear: both; }
|
|
||||||
|
|
||||||
input, button, select, textarea {
|
|
||||||
font-family: inherit;
|
|
||||||
font-size: inherit;
|
|
||||||
line-height: inherit; }
|
|
||||||
|
|
||||||
#install {
|
|
||||||
height: 100%; }
|
|
||||||
@media screen and (max-height: 665px) {
|
@media screen and (max-height: 665px) {
|
||||||
#install {
|
#install {
|
||||||
height: 666px; } }
|
height: 666px; } }
|
||||||
|
#install input, #install button, #install select, #install textarea {
|
||||||
.main {
|
font-family: inherit;
|
||||||
padding: 70px 0 50px; }
|
font-size: inherit;
|
||||||
|
line-height: inherit; }
|
||||||
.step {
|
#install .main {
|
||||||
display: none;
|
padding: 70px 0 50px; }
|
||||||
height: 100%; }
|
#install .step {
|
||||||
|
display: none;
|
||||||
.inner {
|
height: 100%; }
|
||||||
display: flex;
|
#install .inner {
|
||||||
align-items: center;
|
display: flex;
|
||||||
justify-content: center;
|
align-items: center;
|
||||||
flex-direction: column;
|
justify-content: center;
|
||||||
height: 100%; }
|
flex-direction: column;
|
||||||
.inner .step-body {
|
height: 100%; }
|
||||||
margin-top: auto;
|
#install .inner .step-body {
|
||||||
|
margin-top: auto;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 600px; }
|
||||||
|
#install #signal-computer,
|
||||||
|
#install #signal-phone {
|
||||||
|
max-width: 50%;
|
||||||
|
max-height: 250px; }
|
||||||
|
#install p {
|
||||||
|
max-width: 35em;
|
||||||
|
margin: 1em auto;
|
||||||
|
line-height: 1.5em;
|
||||||
|
font-size: 1.2em;
|
||||||
|
font-weight: bold; }
|
||||||
|
#install a {
|
||||||
|
cursor: pointer; }
|
||||||
|
#install a, #install a:visited, #install a:hover {
|
||||||
|
text-decoration: none; }
|
||||||
|
#install .button {
|
||||||
|
display: inline-block;
|
||||||
|
text-transform: uppercase;
|
||||||
|
border: none;
|
||||||
|
font-weight: bold;
|
||||||
|
min-width: 300px;
|
||||||
|
padding: 0.5em;
|
||||||
|
margin: 0.5em 0;
|
||||||
|
background: white;
|
||||||
|
color: #2090ea; }
|
||||||
|
#install .nav {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 600px; }
|
bottom: 50px;
|
||||||
|
margin-top: auto;
|
||||||
#signal-computer,
|
padding: 0 20px; }
|
||||||
#signal-phone {
|
#install .nav .button {
|
||||||
max-width: 50%;
|
margin-bottom: 3em; }
|
||||||
max-height: 250px; }
|
#install .nav .dot {
|
||||||
|
display: inline-block;
|
||||||
p {
|
cursor: pointer;
|
||||||
max-width: 35em;
|
margin: 10px;
|
||||||
margin: 1em auto;
|
width: 20px;
|
||||||
line-height: 1.5em;
|
height: 20px;
|
||||||
font-size: 1.2em;
|
border-radius: 10px;
|
||||||
font-weight: bold; }
|
background: white;
|
||||||
|
border: solid 5px #2090ea; }
|
||||||
a {
|
#install .nav .dot.selected {
|
||||||
cursor: pointer; }
|
background: #a2d2f4; }
|
||||||
a, a:visited, a:hover {
|
#install .link:hover, #install .link:focus {
|
||||||
text-decoration: none; }
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
|
||||||
.button {
|
|
||||||
display: inline-block;
|
|
||||||
text-transform: uppercase;
|
|
||||||
border: none;
|
|
||||||
font-weight: bold;
|
|
||||||
min-width: 300px;
|
|
||||||
padding: 0.5em;
|
|
||||||
margin: 0.5em 0;
|
|
||||||
background: white;
|
|
||||||
color: #2090ea; }
|
|
||||||
|
|
||||||
.nav {
|
|
||||||
width: 100%;
|
|
||||||
bottom: 50px;
|
|
||||||
margin-top: auto;
|
|
||||||
padding: 0 20px; }
|
|
||||||
.nav .button {
|
|
||||||
margin-bottom: 3em; }
|
|
||||||
.nav .dot {
|
|
||||||
display: inline-block;
|
|
||||||
cursor: pointer;
|
|
||||||
margin: 10px;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
border-radius: 10px;
|
|
||||||
background: white;
|
|
||||||
border: solid 5px #2090ea; }
|
|
||||||
.nav .dot.selected {
|
|
||||||
background: #a2d2f4; }
|
|
||||||
|
|
||||||
.link:hover, .link:focus {
|
|
||||||
background: rgba(255, 255, 255, 0.3);
|
|
||||||
outline: none; }
|
|
||||||
.link, .link:visited, .link:hover {
|
|
||||||
padding: 0 3px;
|
|
||||||
color: white;
|
|
||||||
font-weight: bold;
|
|
||||||
border-bottom: dashed 2px white;
|
|
||||||
text-decoration: none; }
|
|
||||||
|
|
||||||
.container {
|
|
||||||
min-width: 650px; }
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 30pt;
|
|
||||||
font-weight: normal;
|
|
||||||
padding-bottom: 10px; }
|
|
||||||
|
|
||||||
h3.step {
|
|
||||||
margin-top: 0;
|
|
||||||
font-weight: bold; }
|
|
||||||
|
|
||||||
.help {
|
|
||||||
border-top: 2px solid #f3f3f3;
|
|
||||||
padding: 1.5em 0.1em; }
|
|
||||||
|
|
||||||
.install {
|
|
||||||
display: inline-block;
|
|
||||||
margin-top: 90px; }
|
|
||||||
|
|
||||||
#qr {
|
|
||||||
display: inline-block;
|
|
||||||
min-height: 266px; }
|
|
||||||
#qr img {
|
|
||||||
border: 5px solid white; }
|
|
||||||
#qr canvas {
|
|
||||||
display: none; }
|
|
||||||
|
|
||||||
#device-name {
|
|
||||||
border: none;
|
|
||||||
border-bottom: 1px solid white;
|
|
||||||
padding: 8px;
|
|
||||||
background: transparent;
|
|
||||||
color: white;
|
|
||||||
font-weight: bold;
|
|
||||||
text-align: center; }
|
|
||||||
#device-name::selection, #device-name a::selection {
|
|
||||||
color: #454545;
|
|
||||||
background: white; }
|
|
||||||
#device-name::-moz-selection, #device-name a::-moz-selection {
|
|
||||||
color: #454545;
|
|
||||||
background: white; }
|
|
||||||
#device-name:focus {
|
|
||||||
outline: none; }
|
outline: none; }
|
||||||
#device-name:hover, #device-name:focus {
|
#install .link, #install .link:visited, #install .link:hover {
|
||||||
background: rgba(255, 255, 255, 0.1); }
|
padding: 0 3px;
|
||||||
|
color: white;
|
||||||
#verifyCode,
|
font-weight: bold;
|
||||||
#code,
|
border-bottom: dashed 2px white;
|
||||||
#number {
|
text-decoration: none; }
|
||||||
box-sizing: border-box;
|
#install .container {
|
||||||
width: 100%;
|
min-width: 650px; }
|
||||||
display: block;
|
#install h1 {
|
||||||
margin-bottom: 0.5em;
|
font-size: 30pt;
|
||||||
text-align: center; }
|
font-weight: normal;
|
||||||
|
padding-bottom: 10px; }
|
||||||
#request-voice,
|
#install h3.step {
|
||||||
#request-sms {
|
margin-top: 0;
|
||||||
box-sizing: border-box; }
|
font-weight: bold; }
|
||||||
|
#install .help {
|
||||||
#request-sms {
|
border-top: 2px solid #f3f3f3;
|
||||||
width: 57%;
|
padding: 1.5em 0.1em; }
|
||||||
float: right; }
|
#install .install {
|
||||||
|
|
||||||
#request-voice {
|
|
||||||
width: 40%;
|
|
||||||
float: left; }
|
|
||||||
|
|
||||||
.number-container {
|
|
||||||
position: relative;
|
|
||||||
margin-bottom: 0.5em; }
|
|
||||||
|
|
||||||
.number-container .intl-tel-input,
|
|
||||||
.number-container .number {
|
|
||||||
width: 100%; }
|
|
||||||
|
|
||||||
.number-container::after {
|
|
||||||
visibility: hidden;
|
|
||||||
content: ' ';
|
|
||||||
display: inline-block;
|
|
||||||
border-radius: 1.5em;
|
|
||||||
width: 1.5em;
|
|
||||||
height: 1.5em;
|
|
||||||
line-height: 1.5em;
|
|
||||||
color: #ffffff;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 100%;
|
|
||||||
margin: 3px 8px;
|
|
||||||
text-align: center; }
|
|
||||||
|
|
||||||
.number-container.valid::after {
|
|
||||||
visibility: visible;
|
|
||||||
content: '✓';
|
|
||||||
background-color: #0f9d58;
|
|
||||||
color: #ffffff; }
|
|
||||||
|
|
||||||
.number-container.invalid::after {
|
|
||||||
visibility: visible;
|
|
||||||
content: '!';
|
|
||||||
background-color: #f44336;
|
|
||||||
color: #ffffff; }
|
|
||||||
|
|
||||||
#error {
|
|
||||||
color: white;
|
|
||||||
font-weight: bold;
|
|
||||||
padding: 0.5em;
|
|
||||||
text-align: center; }
|
|
||||||
|
|
||||||
#error {
|
|
||||||
background-color: #f44336; }
|
|
||||||
|
|
||||||
#error:before {
|
|
||||||
content: '\26a0';
|
|
||||||
padding-right: 0.5em; }
|
|
||||||
|
|
||||||
.narrow {
|
|
||||||
margin: auto;
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 275px;
|
|
||||||
max-width: 100%; }
|
|
||||||
|
|
||||||
ul.country-list {
|
|
||||||
min-width: 197px !important; }
|
|
||||||
|
|
||||||
.confirmation-dialog, .progress-dialog, .error-dialog {
|
|
||||||
padding: 1em;
|
|
||||||
text-align: left; }
|
|
||||||
|
|
||||||
.number {
|
|
||||||
text-align: center; }
|
|
||||||
|
|
||||||
.confirmation-dialog button, .error-dialog button {
|
|
||||||
float: right;
|
|
||||||
margin-left: 10px; }
|
|
||||||
|
|
||||||
.progress-dialog {
|
|
||||||
text-align: center;
|
|
||||||
padding: 1em;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 600px;
|
|
||||||
margin: auto; }
|
|
||||||
.progress-dialog .status {
|
|
||||||
padding: 1em; }
|
|
||||||
.progress-dialog .bar-container {
|
|
||||||
height: 1em;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
border: solid 1px white; }
|
|
||||||
.progress-dialog .bar {
|
|
||||||
width: 0;
|
|
||||||
height: 100%;
|
|
||||||
background-color: #a2d2f4;
|
|
||||||
transition: width 0.25s; }
|
|
||||||
|
|
||||||
.error-dialog {
|
|
||||||
display: none; }
|
|
||||||
|
|
||||||
.modal-container {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: rgba(0, 0, 0, 0.1);
|
|
||||||
top: 0;
|
|
||||||
padding-top: 10em;
|
|
||||||
text-align: center; }
|
|
||||||
.modal-container .modal-main {
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 80%;
|
margin-top: 90px; }
|
||||||
max-width: 500px;
|
#install #qr {
|
||||||
border: solid 2px #2090ea;
|
display: inline-block;
|
||||||
background: white;
|
min-height: 266px; }
|
||||||
margin: 10% auto;
|
#install #qr img {
|
||||||
box-shadow: 0 0 5px 3px rgba(10, 62, 103, 0.2); }
|
border: 5px solid white; }
|
||||||
.modal-container .modal-main h4 {
|
#install #qr canvas {
|
||||||
background-color: #2090ea;
|
display: none; }
|
||||||
color: white;
|
#install #device-name {
|
||||||
padding: 1em;
|
border: none;
|
||||||
margin: 0;
|
border-bottom: 1px solid white;
|
||||||
text-align: left; }
|
padding: 8px;
|
||||||
|
background: transparent;
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center; }
|
||||||
|
#install #device-name::selection, #install #device-name a::selection {
|
||||||
|
color: #454545;
|
||||||
|
background: white; }
|
||||||
|
#install #device-name::-moz-selection, #install #device-name a::-moz-selection {
|
||||||
|
color: #454545;
|
||||||
|
background: white; }
|
||||||
|
#install #device-name:focus {
|
||||||
|
outline: none; }
|
||||||
|
#install #device-name:hover, #install #device-name:focus {
|
||||||
|
background: rgba(255, 255, 255, 0.1); }
|
||||||
|
#install #verifyCode,
|
||||||
|
#install #code,
|
||||||
|
#install #number {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
text-align: center; }
|
||||||
|
#install #request-voice,
|
||||||
|
#install #request-sms {
|
||||||
|
box-sizing: border-box; }
|
||||||
|
#install #request-sms {
|
||||||
|
width: 57%;
|
||||||
|
float: right; }
|
||||||
|
#install #request-voice {
|
||||||
|
width: 40%;
|
||||||
|
float: left; }
|
||||||
|
#install .number-container {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 0.5em; }
|
||||||
|
#install .number-container .intl-tel-input,
|
||||||
|
#install .number-container .number {
|
||||||
|
width: 100%; }
|
||||||
|
#install .number-container::after {
|
||||||
|
visibility: hidden;
|
||||||
|
content: ' ';
|
||||||
|
display: inline-block;
|
||||||
|
border-radius: 1.5em;
|
||||||
|
width: 1.5em;
|
||||||
|
height: 1.5em;
|
||||||
|
line-height: 1.5em;
|
||||||
|
color: #ffffff;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 100%;
|
||||||
|
margin: 3px 8px;
|
||||||
|
text-align: center; }
|
||||||
|
#install .number-container.valid::after {
|
||||||
|
visibility: visible;
|
||||||
|
content: '✓';
|
||||||
|
background-color: #0f9d58;
|
||||||
|
color: #ffffff; }
|
||||||
|
#install .number-container.invalid::after {
|
||||||
|
visibility: visible;
|
||||||
|
content: '!';
|
||||||
|
background-color: #f44336;
|
||||||
|
color: #ffffff; }
|
||||||
|
#install #error {
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 0.5em;
|
||||||
|
text-align: center; }
|
||||||
|
#install #error {
|
||||||
|
background-color: #f44336; }
|
||||||
|
#install #error:before {
|
||||||
|
content: '\26a0';
|
||||||
|
padding-right: 0.5em; }
|
||||||
|
#install .narrow {
|
||||||
|
margin: auto;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 275px;
|
||||||
|
max-width: 100%; }
|
||||||
|
#install ul.country-list {
|
||||||
|
min-width: 197px !important; }
|
||||||
|
#install .confirmation-dialog, #install .progress-dialog, #install .error-dialog {
|
||||||
|
padding: 1em;
|
||||||
|
text-align: left; }
|
||||||
|
#install .number {
|
||||||
|
text-align: center; }
|
||||||
|
#install .confirmation-dialog button, #install .error-dialog button {
|
||||||
|
float: right;
|
||||||
|
margin-left: 10px; }
|
||||||
|
#install .progress-dialog {
|
||||||
|
text-align: center;
|
||||||
|
padding: 1em;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 600px;
|
||||||
|
margin: auto; }
|
||||||
|
#install .progress-dialog .status {
|
||||||
|
padding: 1em; }
|
||||||
|
#install .progress-dialog .bar-container {
|
||||||
|
height: 1em;
|
||||||
|
background-color: #f3f3f3;
|
||||||
|
border: solid 1px white; }
|
||||||
|
#install .progress-dialog .bar {
|
||||||
|
width: 0;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #a2d2f4;
|
||||||
|
transition: width 0.25s; }
|
||||||
|
#install .error-dialog {
|
||||||
|
display: none; }
|
||||||
|
#install .modal-container {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.1);
|
||||||
|
top: 0;
|
||||||
|
padding-top: 10em;
|
||||||
|
text-align: center; }
|
||||||
|
#install .modal-container .modal-main {
|
||||||
|
display: inline-block;
|
||||||
|
width: 80%;
|
||||||
|
max-width: 500px;
|
||||||
|
border: solid 2px #2090ea;
|
||||||
|
background: white;
|
||||||
|
margin: 10% auto;
|
||||||
|
box-shadow: 0 0 5px 3px rgba(10, 62, 103, 0.2); }
|
||||||
|
#install .modal-container .modal-main h4 {
|
||||||
|
background-color: #2090ea;
|
||||||
|
color: white;
|
||||||
|
padding: 1em;
|
||||||
|
margin: 0;
|
||||||
|
text-align: left; }
|
||||||
|
|
||||||
.intl-tel-input .country-list {
|
.intl-tel-input .country-list {
|
||||||
text-align: left; }
|
text-align: left; }
|
||||||
|
|
|
||||||
|
|
@ -6,355 +6,334 @@
|
||||||
background: url("../images/flags.png");
|
background: url("../images/flags.png");
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
#install {
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
html,body {
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
font-family: $roboto;
|
|
||||||
position: relative;
|
|
||||||
background: #2090ea;
|
background: #2090ea;
|
||||||
color: white;
|
color: white;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
|
||||||
|
|
||||||
.clearfix:before,
|
|
||||||
.clearfix:after {
|
|
||||||
display: table;
|
|
||||||
content: " ";
|
|
||||||
}
|
|
||||||
.clearfix:after {
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
|
|
||||||
input, button, select, textarea {
|
|
||||||
font-family: inherit;
|
|
||||||
font-size: inherit;
|
|
||||||
line-height: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
#install {
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
// 666px is the minimum window height in chromium.js
|
// 666px is the minimum window height in chromium.js
|
||||||
@media screen and (max-height: 665px) {
|
@media screen and (max-height: 665px) {
|
||||||
height: 666px;
|
height: 666px;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
.main {
|
|
||||||
padding: 70px 0 50px;
|
|
||||||
}
|
|
||||||
.step {
|
|
||||||
display: none;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.inner {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
.step-body {
|
input, button, select, textarea {
|
||||||
margin-top: auto;
|
font-family: inherit;
|
||||||
width: 100%;
|
font-size: inherit;
|
||||||
max-width: 600px;
|
line-height: inherit;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
#signal-computer,
|
.main {
|
||||||
#signal-phone {
|
padding: 70px 0 50px;
|
||||||
max-width: 50%;
|
|
||||||
max-height: 250px;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
max-width: 35em;
|
|
||||||
margin: 1em auto;
|
|
||||||
line-height: 1.5em;
|
|
||||||
font-size: 1.2em;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
cursor: pointer;
|
|
||||||
&, &:visited, &:hover {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
}
|
||||||
}
|
.step {
|
||||||
|
display: none;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.inner {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
.button {
|
.step-body {
|
||||||
display: inline-block;
|
margin-top: auto;
|
||||||
text-transform: uppercase;
|
width: 100%;
|
||||||
border: none;
|
max-width: 600px;
|
||||||
font-weight: bold;
|
}
|
||||||
min-width: 300px;
|
}
|
||||||
padding: 0.5em;
|
|
||||||
margin: 0.5em 0;
|
|
||||||
background: white;
|
|
||||||
color: $blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav {
|
#signal-computer,
|
||||||
width: 100%;
|
#signal-phone {
|
||||||
bottom: 50px;
|
max-width: 50%;
|
||||||
margin-top: auto;
|
max-height: 250px;
|
||||||
padding: 0 20px;
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
max-width: 35em;
|
||||||
|
margin: 1em auto;
|
||||||
|
line-height: 1.5em;
|
||||||
|
font-size: 1.2em;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
cursor: pointer;
|
||||||
|
&, &:visited, &:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
margin-bottom: 3em;
|
display: inline-block;
|
||||||
|
text-transform: uppercase;
|
||||||
|
border: none;
|
||||||
|
font-weight: bold;
|
||||||
|
min-width: 300px;
|
||||||
|
padding: 0.5em;
|
||||||
|
margin: 0.5em 0;
|
||||||
|
background: white;
|
||||||
|
color: $blue;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dot {
|
.nav {
|
||||||
display: inline-block;
|
width: 100%;
|
||||||
cursor: pointer;
|
bottom: 50px;
|
||||||
margin: 10px;
|
margin-top: auto;
|
||||||
width: 20px;
|
padding: 0 20px;
|
||||||
height: 20px;
|
|
||||||
border-radius: 10px;
|
|
||||||
background: white;
|
|
||||||
border: solid 5px $blue;
|
|
||||||
|
|
||||||
&.selected {
|
.button {
|
||||||
background: $blue_l;
|
margin-bottom: 3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot {
|
||||||
|
display: inline-block;
|
||||||
|
cursor: pointer;
|
||||||
|
margin: 10px;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: white;
|
||||||
|
border: solid 5px $blue;
|
||||||
|
|
||||||
|
&.selected {
|
||||||
|
background: $blue_l;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.link {
|
.link {
|
||||||
&:hover, &:focus {
|
&:hover, &:focus {
|
||||||
background: rgba(255,255,255,0.3);
|
background: rgba(255,255,255,0.3);
|
||||||
outline: none;
|
outline: none;
|
||||||
|
}
|
||||||
|
&, &:visited, &:hover {
|
||||||
|
padding: 0 3px;
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
border-bottom: dashed 2px white;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
&, &:visited, &:hover {
|
|
||||||
padding: 0 3px;
|
.container {
|
||||||
|
min-width: 650px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 30pt;
|
||||||
|
font-weight: normal;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3.step {
|
||||||
|
margin-top: 0;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help {
|
||||||
|
border-top: 2px solid $grey_l;
|
||||||
|
padding: 1.5em 0.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.install {
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 90px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#qr {
|
||||||
|
display: inline-block;
|
||||||
|
min-height: 266px;
|
||||||
|
img {
|
||||||
|
border: 5px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#device-name {
|
||||||
|
border: none;
|
||||||
|
border-bottom: 1px solid white;
|
||||||
|
padding: 8px;
|
||||||
|
background: transparent;
|
||||||
color: white;
|
color: white;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
border-bottom: dashed 2px white;
|
text-align: center;
|
||||||
text-decoration: none;
|
&::selection, a::selection {
|
||||||
}
|
color: $grey_d;
|
||||||
}
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
.container {
|
&::-moz-selection, a::-moz-selection {
|
||||||
min-width: 650px;
|
color: $grey_d;
|
||||||
}
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
h1 {
|
&:focus {
|
||||||
font-size: 30pt;
|
outline: none;
|
||||||
font-weight: normal;
|
}
|
||||||
padding-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3.step {
|
&:hover, &:focus {
|
||||||
margin-top: 0;
|
background: rgba(255,255,255,0.1);
|
||||||
font-weight: bold;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.help {
|
|
||||||
border-top: 2px solid $grey_l;
|
|
||||||
padding: 1.5em 0.1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.install {
|
|
||||||
display: inline-block;
|
|
||||||
margin-top: 90px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#qr {
|
|
||||||
display: inline-block;
|
|
||||||
min-height: 266px;
|
|
||||||
img {
|
|
||||||
border: 5px solid white;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
canvas {
|
#verifyCode,
|
||||||
|
#code,
|
||||||
|
#number {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#request-voice,
|
||||||
|
#request-sms {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
#request-sms {
|
||||||
|
width: 57%;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
#request-voice {
|
||||||
|
width: 40%;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.number-container {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
.number-container .intl-tel-input,
|
||||||
|
.number-container .number {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.number-container::after {
|
||||||
|
visibility: hidden;
|
||||||
|
content: ' ';
|
||||||
|
display: inline-block;
|
||||||
|
border-radius: 1.5em;
|
||||||
|
width: 1.5em;
|
||||||
|
height: 1.5em;
|
||||||
|
line-height: 1.5em;
|
||||||
|
color: #ffffff;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 100%;
|
||||||
|
margin: 3px 8px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.number-container.valid::after {
|
||||||
|
visibility: visible;
|
||||||
|
content: '✓';
|
||||||
|
background-color: #0f9d58;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
.number-container.invalid::after {
|
||||||
|
visibility: visible;
|
||||||
|
content: '!';
|
||||||
|
background-color: #f44336;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
#error {
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 0.5em;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
#error { background-color: #f44336; }
|
||||||
|
#error:before {
|
||||||
|
content: '\26a0';
|
||||||
|
padding-right: 0.5em;
|
||||||
|
}
|
||||||
|
.narrow {
|
||||||
|
margin: auto;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 275px;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.country-list {
|
||||||
|
min-width: 197px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirmation-dialog, .progress-dialog, .error-dialog {
|
||||||
|
padding: 1em;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.number { text-align: center; }
|
||||||
|
.confirmation-dialog, .error-dialog {
|
||||||
|
button {
|
||||||
|
float: right;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.progress-dialog {
|
||||||
|
text-align: center;
|
||||||
|
padding: 1em;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 600px;
|
||||||
|
margin: auto;
|
||||||
|
|
||||||
|
.status { padding: 1em; }
|
||||||
|
|
||||||
|
.bar-container {
|
||||||
|
height: 1em;
|
||||||
|
background-color: $grey_l;
|
||||||
|
border: solid 1px white;
|
||||||
|
}
|
||||||
|
.bar {
|
||||||
|
width: 0;
|
||||||
|
height: 100%;
|
||||||
|
background-color: $blue_l;
|
||||||
|
transition: width 0.25s;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.error-dialog {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
#device-name {
|
.modal-container {
|
||||||
border: none;
|
display: none;
|
||||||
border-bottom: 1px solid white;
|
position: absolute;
|
||||||
padding: 8px;
|
width: 100%;
|
||||||
background: transparent;
|
|
||||||
color: white;
|
|
||||||
font-weight: bold;
|
|
||||||
text-align: center;
|
|
||||||
&::selection, a::selection {
|
|
||||||
color: $grey_d;
|
|
||||||
background: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-moz-selection, a::-moz-selection {
|
|
||||||
color: $grey_d;
|
|
||||||
background: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover, &:focus {
|
|
||||||
background: rgba(255,255,255,0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#verifyCode,
|
|
||||||
#code,
|
|
||||||
#number {
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 0.5em;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#request-voice,
|
|
||||||
#request-sms {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
#request-sms {
|
|
||||||
width: 57%;
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
#request-voice {
|
|
||||||
width: 40%;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.number-container {
|
|
||||||
position: relative;
|
|
||||||
margin-bottom: 0.5em;
|
|
||||||
}
|
|
||||||
.number-container .intl-tel-input,
|
|
||||||
.number-container .number {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.number-container::after {
|
|
||||||
visibility: hidden;
|
|
||||||
content: ' ';
|
|
||||||
display: inline-block;
|
|
||||||
border-radius: 1.5em;
|
|
||||||
width: 1.5em;
|
|
||||||
height: 1.5em;
|
|
||||||
line-height: 1.5em;
|
|
||||||
color: #ffffff;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 100%;
|
|
||||||
margin: 3px 8px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.number-container.valid::after {
|
|
||||||
visibility: visible;
|
|
||||||
content: '✓';
|
|
||||||
background-color: #0f9d58;
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
.number-container.invalid::after {
|
|
||||||
visibility: visible;
|
|
||||||
content: '!';
|
|
||||||
background-color: #f44336;
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
#error {
|
|
||||||
color: white;
|
|
||||||
font-weight: bold;
|
|
||||||
padding: 0.5em;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
#error { background-color: #f44336; }
|
|
||||||
#error:before {
|
|
||||||
content: '\26a0';
|
|
||||||
padding-right: 0.5em;
|
|
||||||
}
|
|
||||||
.narrow {
|
|
||||||
margin: auto;
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 275px;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.country-list {
|
|
||||||
min-width: 197px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.confirmation-dialog, .progress-dialog, .error-dialog {
|
|
||||||
padding: 1em;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
.number { text-align: center; }
|
|
||||||
.confirmation-dialog, .error-dialog {
|
|
||||||
button {
|
|
||||||
float: right;
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.progress-dialog {
|
|
||||||
text-align: center;
|
|
||||||
padding: 1em;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 600px;
|
|
||||||
margin: auto;
|
|
||||||
|
|
||||||
.status { padding: 1em; }
|
|
||||||
|
|
||||||
.bar-container {
|
|
||||||
height: 1em;
|
|
||||||
background-color: $grey_l;
|
|
||||||
border: solid 1px white;
|
|
||||||
}
|
|
||||||
.bar {
|
|
||||||
width: 0;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: $blue_l;
|
background: rgba(0,0,0,0.1);
|
||||||
transition: width 0.25s;
|
top: 0;
|
||||||
|
padding-top: 10em;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.modal-main {
|
||||||
|
display: inline-block;
|
||||||
|
width: 80%;
|
||||||
|
max-width: 500px;
|
||||||
|
border: solid 2px $blue;
|
||||||
|
background: white;
|
||||||
|
margin: 10% auto;
|
||||||
|
box-shadow: 0 0 5px 3px rgba(darken($blue, 30%), 0.2);
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
background-color: $blue;
|
||||||
|
color: white;
|
||||||
|
padding: 1em;
|
||||||
|
margin: 0;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
&.active {
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.error-dialog {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-container {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: rgba(0,0,0,0.1);
|
|
||||||
top: 0;
|
|
||||||
padding-top: 10em;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
.modal-main {
|
|
||||||
display: inline-block;
|
|
||||||
width: 80%;
|
|
||||||
max-width: 500px;
|
|
||||||
border: solid 2px $blue;
|
|
||||||
background: white;
|
|
||||||
margin: 10% auto;
|
|
||||||
box-shadow: 0 0 5px 3px rgba(darken($blue, 30%), 0.2);
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
background-color: $blue;
|
|
||||||
color: white;
|
|
||||||
padding: 1em;
|
|
||||||
margin: 0;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.intl-tel-input .country-list {
|
.intl-tel-input .country-list {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue