diff options
Diffstat (limited to 'mascara/src/app/first-time/index.css')
-rw-r--r-- | mascara/src/app/first-time/index.css | 128 |
1 files changed, 103 insertions, 25 deletions
diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css index f59eb4ce1..6c45816bd 100644 --- a/mascara/src/app/first-time/index.css +++ b/mascara/src/app/first-time/index.css @@ -1,3 +1,10 @@ +@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 { width: 100vw; @@ -6,21 +13,52 @@ display: flex; justify-content: center; flex: 1 0 auto; + font-weight: 400; + font-family: Roboto; } -.alpha-warning { +.alpha-warning, +.alpha-warning-welcome-screen { background: #f7861c; color: #fff; line-height: 2em; padding-left: 10vw; } -.first-view-main { +.alpha-warning-welcome-screen { + padding-left: 0; + text-align: center; +} + +.first-view-main-wrapper { + display: flex; + width: 100%; + padding-left: 10vw; +} + +.first-view-main, +.first-view-main__mascara { display: flex; flex-direction: row-reverse; + justify-content: center; +} + +.first-view-main__mascara { justify-content: space-between; } +@media screen and (max-width: 575px) { + .first-view-main-wrapper { + padding: 0; + } +} + +@media screen and (min-width: 1281px) { + .first-view-main { + width: 62vw; + } +} + .mascara-info { display: flex; flex-flow: column; @@ -81,6 +119,45 @@ 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; + } + + .first-view-main .create-password { + margin-top: 0px; + } + + .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; @@ -180,11 +257,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; @@ -212,7 +289,7 @@ height: 334px; overflow-y: auto; color: #757575; - font-family: Montserrat UltraLight; + font-family: Roboto; font-size: 12px; line-height: 15px; text-align: justify; @@ -237,7 +314,7 @@ color: #5B5D67; font-size: 16px; line-height: 23px; - font-family: Montserrat UltraLight; + font-family: Roboto; } .backup-phrase__secret { @@ -255,7 +332,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; @@ -284,7 +361,7 @@ background: none; box-shadow: none; color: #FFFFFF; - font-family: Montserrat Regular; + font-family: Roboto; font-size: 12px; font-weight: bold; line-height: 15px; @@ -338,7 +415,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; @@ -360,7 +437,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 { @@ -375,7 +452,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; @@ -390,7 +467,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 { @@ -436,7 +513,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; @@ -453,7 +530,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; @@ -474,7 +551,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; } @@ -503,7 +580,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; @@ -538,7 +615,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; @@ -550,7 +627,7 @@ 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 { @@ -584,6 +661,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; @@ -608,7 +686,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; @@ -660,7 +738,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 { @@ -708,7 +786,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; @@ -725,7 +803,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 { @@ -734,7 +812,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 { @@ -753,7 +831,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; @@ -763,7 +841,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; } |