diff options
Diffstat (limited to 'mascara/src/app/first-time/index.css')
-rw-r--r-- | mascara/src/app/first-time/index.css | 219 |
1 files changed, 176 insertions, 43 deletions
diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css index 4314efbe6..5f8bbd4be 100644 --- a/mascara/src/app/first-time/index.css +++ b/mascara/src/app/first-time/index.css @@ -1,29 +1,86 @@ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + src: local('Roboto'), local('Roboto-Regular'), url('/fonts/Roboto/Roboto-Regular.ttf') format('truetype'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} .first-time-flow { - height: 100vh; width: 100vw; - background-color: #FFF; + background-color: #fff; overflow: auto; + display: flex; + justify-content: center; + flex: 1 0 auto; + font-weight: 400; + font-family: Roboto; } -.alpha-warning { +.alpha-warning__container { + display: flex; + justify-content: center; background: #f7861c; +} + +.alpha-warning, +.alpha-warning-welcome-screen { color: #fff; line-height: 2em; - padding-left: 2em; } -.first-view-main { +@media screen and (min-width: 576px) { + .alpha-warning { + width: 85vw; + } +} + +@media screen and (min-width: 769px) { + .alpha-warning { + width: 80vw; + } +} + +@media screen and (min-width: 1281px) { + .alpha-warning { + width: 62vw; + } +} + +.alpha-warning-welcome-screen { + padding-left: 0; + text-align: center; +} + +.first-view-main-wrapper { display: flex; - flex-direction: row-reverse; + width: 100%; + height: 100%; + justify-content: center; + padding: 0 10px; +} + +.first-view-main, +.first-view-main__mascara { + display: flex; + flex-direction: row; + justify-content: flex-start; +} + +.first-view-main__mascara { justify-content: space-between; } +@media screen and (min-width: 1281px) { + .first-view-main { + width: 62vw; + } +} + .mascara-info { display: flex; flex-flow: column; margin-top: 70px; - margin-right: 10vw; width: 35vw; max-width: 550px; } @@ -44,8 +101,8 @@ .buy-ether { display: flex; flex-flow: column nowrap; - margin: 67px 0 50px 146px; - max-width: 35rem; + margin: 60px 0 30px 0; + position: relative; } .import-account { @@ -65,6 +122,10 @@ width: calc(100vw - 80px); } + .unique-image { + width: auto; + } + .create-password__title, .unique-image__title, .tou__title, @@ -76,6 +137,41 @@ width: initial !important; } + .alpha-warning, + .alpha-warning-welcome-screen { + line-height: 1em; + padding: 8px 12px; + } + + .first-view-main { + height: 100%; + flex-direction: column; + align-items: center; + justify-content: space-evenly; + margin-top: 12px; + } + + .mascara-info { + margin-top: 0px; + width: 100%; + align-items: center; + } + + .mascara-info .info { + text-align: center; + font-size: 16px; + margin: 0 10px; + padding-left: 0px; + } + + .mascara-info :first-child { + align-self: center; + } + + .first-view-phone-invisible { + display: none; + } + .first-time-flow__input { width: initial !important; font-size: 14px !important; @@ -129,10 +225,6 @@ max-width: 46rem; } -.backup-phrase { - max-width: 100%; -} - .create-password__title, .unique-image__title, .tou__title, @@ -175,11 +267,11 @@ color: #1B344D; font-size: 16px; line-height: 23px; - font-family: Montserrat UltraLight; + font-family: Roboto; } .buy-ether__small-body-text { - font-family: Montserrat UltraLight; + font-family: Roboto; height: 14px; color: #757575; font-size: 12px; @@ -207,7 +299,7 @@ height: 334px; overflow-y: auto; color: #757575; - font-family: Montserrat UltraLight; + font-family: Roboto; font-size: 12px; line-height: 15px; text-align: justify; @@ -216,7 +308,18 @@ .backup-phrase__content-wrapper { display: flex; - flex: row nowrap; + flex-flow: row wrap; + justify-content: space-between; +} + +.backup-phrase__phrase { + flex-grow: .5; + min-width: 0; +} + +.backup-phrase__next-button { + flex-grow: 1; + width: 100%; } .backup-phrase__body-text { @@ -224,15 +327,33 @@ } .backup-phrase__tips { - margin: 40px 85px; + margin-top: 40px; width: 285px; + flex-grow: .5; + min-width: 0; } .backup-phrase__tips-text { color: #5B5D67; font-size: 16px; line-height: 23px; - font-family: Montserrat UltraLight; + font-family: Roboto; + min-width: 0; +} + +@media only screen and (max-width: 768px) { + .backup-phrase__content-wrapper { + flex-direction: column; + } + + .backup-phrase__phrase { + flex: 1 0 auto; + } + + .backup-phrase__tips { + width: 100%; + flex: 1 0 auto; + } } .backup-phrase__secret { @@ -250,7 +371,7 @@ .backup-phrase__secret-words { width: 310px; color: #5B5D67; - font-family: Montserrat Light; + font-family: Roboto; font-size: 20px; line-height: 26px; text-align: center; @@ -279,7 +400,7 @@ background: none; box-shadow: none; color: #FFFFFF; - font-family: Montserrat Regular; + font-family: Roboto; font-size: 12px; font-weight: bold; line-height: 15px; @@ -289,13 +410,17 @@ } .backup-phrase__back-button, -.backup-phrase__back-button:hover, -.import-account__back-button, -.import-account__back-button:hover { +.import-account__back-button { margin-bottom: 18px; - color: #22232C; + color: #22232c; font-size: 16px; line-height: 21px; + position: absolute; + top: -25px; +} + +.backup-phrase__back-button { + top: -30px; } button.backup-phrase__reveal-button:hover { @@ -333,7 +458,7 @@ button.backup-phrase__reveal-button:hover { .backup-phrase__confirm-seed-option { color: #5B5D67; - font-family: Montserrat Light; + font-family: Roboto; font-size: 16px; line-height: 21px; background-color: #E7E7E7; @@ -355,7 +480,7 @@ button.backup-phrase__confirm-seed-option:hover { .import-account__faq-link { font-size: 18px; line-height: 23px; - font-family: Montserrat Light; + font-family: Roboto; } .import-account__selector-label { @@ -370,7 +495,7 @@ button.backup-phrase__confirm-seed-option:hover { background-color: #FFFFFF; margin-top: 14px; color: #5B5D67; - font-family: Montserrat Light; + font-family: Roboto; font-size: 18px; line-height: 23px; padding: 14px 21px; @@ -385,7 +510,7 @@ button.backup-phrase__confirm-seed-option:hover { font-size: 18px; line-height: 23px; margin-top: 21px; - font-family: Montserrat UltraLight; + font-family: Roboto; } .import-account__input-wrapper { @@ -413,6 +538,10 @@ button.backup-phrase__confirm-seed-option:hover { line-height: 23px; } +.import-account__input-label__disabled { + opacity: 0.5; +} + .import-account__input { width: 325px !important; } @@ -427,7 +556,7 @@ button.backup-phrase__confirm-seed-option:hover { border: 1px solid #1B344D; border-radius: 4px; color: #1B344D; - font-family: Montserrat Light; + font-family: Roboto; font-size: 18px; display: flex; flex-flow: column nowrap; @@ -444,7 +573,7 @@ button.backup-phrase__confirm-seed-option:hover { .import-account__file-name { color: #000000; - font-family: Montserrat Light; + font-family: Roboto; font-size: 18px; line-height: 23px; margin-left: 22px; @@ -465,7 +594,7 @@ button.backup-phrase__confirm-seed-option:hover { .buy-ether__content-headline { color: #1B344D; - font-family: Montserrat Light; + font-family: Roboto; font-size: 18px; line-height: 23px; } @@ -494,7 +623,7 @@ button.backup-phrase__confirm-seed-option:hover { align-items: center; padding: 20px 0; color: #9B9B9B; - font-family: Montserrat Light; + font-family: Roboto; font-size: 14px; line-height: 18px; cursor: pointer; @@ -529,7 +658,7 @@ button.backup-phrase__confirm-seed-option:hover { .buy-ether__button-separator-text { font-size: 20px; line-height: 26px; - font-family: Montserrat Light; + font-family: Roboto; margin: 35px 0 14px 30px; display: flex; flex-flow: column nowrap; @@ -541,11 +670,10 @@ button.backup-phrase__confirm-seed-option:hover { color: #1B344D !important; font-size: 14px !important; line-height: 18px !important; - font-family: Montserrat UltraLight !important; + font-family: Roboto; } .buy-ether__action-content-wrapper { - width: 360px; display: flex; flex-flow: column nowrap; } @@ -559,6 +687,10 @@ button.backup-phrase__confirm-seed-option:hover { background-color: #FFFFFF; } +.first-time-flow__input__disabled { + opacity: 0.5; +} + .first-time-flow__input::placeholder { color: #9B9B9B; font-weight: 200; @@ -571,6 +703,7 @@ button.backup-phrase__confirm-seed-option:hover { color: #FFFFFF; font-size: 20px; font-weight: 500; + font-family: Roboto; line-height: 26px; text-align: center; text-transform: uppercase; @@ -595,7 +728,7 @@ button.first-time-flow__button:hover { color: #1B344D; font-size: 20px; line-height: 26px; - font-family: Montserrat Light; + font-family: Roboto; text-align: center; margin: 35px 0 14px; background-color: transparent; @@ -647,7 +780,7 @@ button.first-time-flow__button--tertiary:hover { font-size: 20px; line-height: 26px; text-align: center; - font-family: Montserrat UltraLight; + font-family: Roboto; } .icon { @@ -695,7 +828,7 @@ button.first-time-flow__button--tertiary:hover { .shapeshift-form__deposit-instruction { color: #757575; color: rgba(0, 0, 0, 0.45); - font-family: Montserrat Light; + font-family: Roboto; font-weight: 300; line-height: 19px; padding-bottom: 6px; @@ -712,7 +845,7 @@ button.first-time-flow__button--tertiary:hover { width: 100%; height: 45px; line-height: 44px; - font-family: Montserrat Light; + font-family: Roboto; } .shapeshift-form__address-input-label { @@ -721,7 +854,7 @@ button.first-time-flow__button--tertiary:hover { font-weight: 500; line-height: 18px; padding-bottom: 6px; - font-family: Montserrat Light; + font-family: Roboto; } .shapeshift-form__address-input { @@ -740,7 +873,7 @@ button.first-time-flow__button--tertiary:hover { .shapeshift-form__address-input-error-message { color: #FF001F; - font-family: Montserrat Light; + font-family: Roboto; font-size: 12px; height: 24px; line-height: 18px; @@ -750,7 +883,7 @@ button.first-time-flow__button--tertiary:hover { display: flex; flex-flow: row wrap; color: #9B9B9B; - font-family: Montserrat Light; + font-family: Roboto; font-size: 10px; line-height: 16px; } |