@ -330,470 +330,6 @@ $loading-height: 16px;
}
}
. full-screen-flow {
position : absolute ;
left : 0 ;
right : 0 ;
top : 0 ;
bottom : 0 ;
font-family : $session-font-default ;
& . overlay {
/ / . modal , used for the settings view , is 100
z-index : 200 ;
}
color : black ;
a {
color : $blue ;
}
background : linear-gradient (
to bottom ,
/* (1 - 0.41) * 255 + 0.41 * 213*/ rgb ( 238 , 238 , 238 ) 0 % ,
/* (1 - 0.19) * 255 + 0.19 * 191*/ rgb ( 243 , 243 , 243 ) 12 % ,
rgb ( 255 , 255 , 255 ) 27 % ,
rgb ( 255 , 255 , 255 ) 60 % ,
/* (1 - 0.19) * 255 + 0.19 * 222*/ rgb ( 249 , 249 , 249 ) 85 % ,
/* (1 - 0.27) * 255 + 0.27 * 98 */ rgb ( 213 , 213 , 213 ) 100 %
) ;
display : flex ;
align-items : center ;
text-align : center ;
font-size : 10 pt ;
input {
margin-bottom : 1 em ;
font-size : 12 pt ;
font-family : $session-font-default ;
border : 2 px solid $blue ;
padding : 0 .5 em ;
text-align : center ;
width : 20 em ;
}
@media ( min-height : 750 px ) and ( min-width : 700 px ) {
font-size : 14 pt ;
input {
font-size : 16 pt ;
}
}
# qr {
display : inline-block ;
& . ready {
border : 5 px solid $blue ;
box-shadow : 2 px 2 px 4 px rgba ( 0 , 0 , 0 , 0 .5 ) ;
}
img {
height : 20 em ;
border : 5 px solid white ;
}
@media ( max-height : 475 px ) {
img {
width : 8 em ;
height : 8 em ;
}
}
. dot {
width : 14 px ;
height : 14 px ;
border : 3 px solid $blue ;
border-radius : 50 % ;
float : left ;
margin : 0 6 px ;
transform : scale ( 0 ) ;
animation : loading 1500 ms ease infinite 0 ms ;
& : nth-child ( 2 ) {
animation : loading 1500 ms ease infinite 333 ms ;
}
& : nth-child ( 3 ) {
animation : loading 1500 ms ease infinite 666 ms ;
}
}
canvas {
display : none ;
}
}
. os-icon {
height : 3 em ;
width : 3 em ;
vertical-align : text-bottom ;
display : inline-block ;
margin : 0 .5 em ;
& . apple {
@include color-svg ( ' ../images/apple.svg ' , black ) ;
}
& . android {
@include color-svg ( ' ../images/android.svg ' , black ) ;
}
}
. header {
font-weight : normal ;
margin-bottom : 1 .5 em ;
font-size : 20 pt ;
@media ( min-height : 750 px ) and ( min-width : 700 px ) {
font-size : 28 pt ;
}
}
. body-text {
max-width : 22 em ;
text-align : left ;
margin-left : auto ;
margin-right : auto ;
}
. body-text-wide {
max-width : 30 em ;
text-align : left ;
margin-left : auto ;
margin-right : auto ;
}
form {
height : 100 % ;
width : 100 % ;
}
. step {
display : flex ;
align-items : center ;
min-width : 100 % ;
min-height : 100 % ;
margin : auto ;
padding : 10 px 0 ;
}
. step-body {
margin-left : auto ;
margin-right : auto ;
max-width : 35 em ;
}
. inner {
display : flex ;
align-items : center ;
justify-content : center ;
flex-direction : column ;
height : 100 % ;
width : 100 % ;
}
. banner-image {
margin : 1 em ;
display : none ;
@media ( min-height : 550 px ) {
display : inline-block ;
height : 10 em ;
width : 10 em ;
}
}
. banner-icon {
display : none ;
margin : 1 em ;
/ / 640px by 338px is the smallest the window can go
@media ( min-height : 550 px ) {
display : inline-block ;
height : 10 em ;
width : 10 em ;
}
/ / generic
& . check-circle-outline {
@include color-svg ( ' ../images/check-circle-outline.svg ' , #dedede ) ;
}
& . alert-outline {
@include color-svg ( ' ../images/alert-outline.svg ' , #dedede ) ;
}
/ / import and export
& . folder-outline {
@include color-svg ( ' ../images/folder-outline.svg ' , #dedede ) ;
}
& . import {
@include color-svg ( ' ../images/import.svg ' , #dedede ) ;
}
& . export {
@include color-svg ( ' ../images/export.svg ' , #dedede ) ;
}
/ / registration process
& . lead-pencil {
@include color-svg ( ' ../images/lead-pencil.svg ' , #dedede ) ;
}
& . sync {
@include color-svg ( ' ../images/sync.svg ' , #dedede ) ;
}
/ / delete
& . alert-outline-red {
@include color-svg ( ' ../images/alert-outline.svg ' , red ) ;
}
& . delete {
@include color-svg ( ' ../images/delete.svg ' , #dedede ) ;
}
}
. button {
cursor : pointer ;
display : inline-block ;
border : none ;
min-width : 300 px ;
padding : 0 .75 em ;
color : white ;
background : $blue ;
box-shadow : 2 px 2 px 4 px rgba ( 0 , 0 , 0 , 0 .5 ) ;
user-select : none ;
font-size : 12 pt ;
margin-top : 4 px ;
& . neutral {
color : black ;
background : #dedede ;
}
& . destructive {
background : red ;
}
@media ( min-height : 750 px ) and ( min-width : 700 px ) {
font-size : 20 pt ;
}
}
a . link {
display : block ;
cursor : pointer ;
text-decoration : underline ;
margin : 0 .5 em ;
color : #2090ea ;
}
. nav {
width : 100 % ;
bottom : 50 px ;
margin-top : auto ;
padding-bottom : 2 em ;
padding-left : 20 px ;
padding-right : 20 px ;
. instructions {
text-align : left ;
margin-left : auto ;
margin-right : auto ;
margin-bottom : 2 em ;
margin-top : 2 em ;
max-width : 30 em ;
}
. instructions : after {
clear : both ;
}
. android {
float : left ;
}
. apple {
float : right ;
}
. label {
float : left ;
}
. body {
float : left ;
}
}
}
. standalone-fullscreen {
background : $color-dark-85 ;
overflow-y : auto ;
}
. standalone {
color : $color-dark-05 ;
height : auto ;
padding : 0 ;
background : inherit ;
. step-body {
width : 80 % ;
min-width : 100 px ;
max-width : none ;
}
. section-toggle {
background : $color-dark-75 ;
& : first-of-type {
border-radius : 8 px 8 px 0 0 ;
}
& : last-of-type {
border-radius : 0 0 8 px 8 px ;
}
}
. section-toggle-visible : last-of-type {
border-bottom-left-radius : 0 ;
border-bottom-right-radius : 0 ;
}
. section-content {
padding : 1 em 0 ;
background-color : $color-dark-72 ;
& : last-of-type {
border-radius : 0 0 8 px 8 px ;
}
}
# display-name {
font-weight : bold ;
font-size : 25 px ;
border-radius : 100 px ;
& : focus {
outline : none ;
}
}
# status {
margin-top : 12 px ;
}
input {
border : 1 px solid $color-light-60 ;
border-radius : 4 px ;
& : focus {
outline : solid 1 px $blue ;
}
}
. button {
background : $color-loki-green-gradient ;
border-radius : 100 px ;
& : disabled ,
& : disabled : hover {
background : $color-loki-dark-gray ;
cursor : default ;
}
}
# mnemonic-display {
margin : 2 em 8 px ;
font-size : 16 px ;
font-style : italic ;
}
. standalone-register-warning {
font-weight : bold ;
font-size : 16 px ;
margin : 0 px 8 px ;
}
. standalone-register-language {
display : flex ;
align-items : center ;
justify-content : center ;
margin-top : 2 em ;
& . restore {
margin-bottom : 2 em ;
}
span {
margin-right : 8 px ;
}
}
. input-header {
margin-bottom : 8 px ;
font-size : 14 px ;
}
. button . grey {
background : $grey ;
}
. buttons {
margin-top : 24 px ;
}
. select-container {
position : relative ;
display : block ;
width : 13 em ;
line-height : 2 .8 ;
background : white ;
overflow : hidden ;
border-radius : 0 .25 em ;
select {
/ / Reset select
-webkit-appearance : none ;
-moz-appearance : none ;
-ms-appearance : none ;
appearance : none ;
outline : 0 ;
box-shadow : none ;
border : 0 !important ;
background : white ;
background-image : none ;
/ / Our own stlying
width : 100 % ;
height : 100 % ;
margin : 0 ;
padding : 0 0 0 0 .5 em ;
color : black ;
cursor : pointer ;
font-size : 14 px ;
: : -ms-expand {
display : none ;
}
}
& : after {
content : ' \25BC ' ;
position : absolute ;
top : 0 ;
right : 0 ;
bottom : 0 ;
padding : 0 1 em ;
background : $color-dark-85 ;
pointer-events : none ;
-webkit-transition : $session-transition-duration all ease ;
-o-transition : $session-transition-duration all ease ;
transition : $session-transition-duration all ease ;
}
}
@media ( min-height : 750 px ) and ( min-width : 700 px ) {
. input-header {
font-size : 18 px ;
}
. standalone-register-warning {
font-size : 20 px ;
}
# mnemonic-display {
font-size : 20 px ;
}
}
}
/ / yellow border fix
. inbox : focus {
outline : none ;