diff options
Diffstat (limited to 'ui/app/css')
19 files changed, 984 insertions, 101 deletions
diff --git a/ui/app/css/itcss/components/account-dropdown.scss b/ui/app/css/itcss/components/account-dropdown.scss index b29afdc8..780a89c7 100644 --- a/ui/app/css/itcss/components/account-dropdown.scss +++ b/ui/app/css/itcss/components/account-dropdown.scss @@ -53,7 +53,7 @@ } &__account-primary-balance { - color: $scorpion; + color: $white; border: none; outline: 0 !important; } @@ -67,6 +67,7 @@ width: 80%; overflow: hidden; text-overflow: ellipsis; + color: $dim-gray; } &__dropdown { diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss index 4ae95151..630928f8 100644 --- a/ui/app/css/itcss/components/buttons.scss +++ b/ui/app/css/itcss/components/buttons.scss @@ -65,12 +65,12 @@ .btn-confirm { color: $white; - border: 2px solid $curious-blue; + border: 2px solid $dexon-purple; background-color: $dexon-purple; } .btn-raised { - color: $curious-blue; + color: $white; background-color: $dexon-purple; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08); padding: 6px; diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss index db59339a..42bbc466 100644 --- a/ui/app/css/itcss/components/confirm.scss +++ b/ui/app/css/itcss/components/confirm.scss @@ -97,7 +97,7 @@ } .confirm-screen-back-button { - color: $curious-blue; + color: $dexon-purple; font-family: Roboto; font-size: 1rem; position: absolute; diff --git a/ui/app/css/itcss/components/currency-display.scss b/ui/app/css/itcss/components/currency-display.scss index 8442799c..9f9a040a 100644 --- a/ui/app/css/itcss/components/currency-display.scss +++ b/ui/app/css/itcss/components/currency-display.scss @@ -1,18 +1,20 @@ .currency-display { height: 54px; - border: 1px solid $alto; + border: 1px solid $geyser; border-radius: 4px; background-color: $dark-gray; - color: $scorpion; + color: $dim-gray; font-family: Roboto; font-size: 16px; padding: 8px 10px; position: relative; + &__primary-row { display: flex; } + &__input { - color: $scorpion; + color: $white; font-family: Roboto; font-size: 16px; line-height: 22px; @@ -20,16 +22,19 @@ outline: 0 !important; max-width: 22ch; } + &__primary-currency { - color: $scorpion; + color: $white; font-weight: 400; font-family: Roboto; font-size: 16px; line-height: 22px; } + &__converted-row { display: flex; } + &__converted-value, &__converted-currency { color: $dusty-gray; @@ -37,39 +42,46 @@ font-size: 12px; line-height: 12px; } + &__input-wrapper { position: relative; display: flex; flex: 1; max-width: 100%; + input[type="number"] { -moz-appearance: textfield; } + input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; -moz-appearance: none; display: none; } + input[type="number"]:hover::-webkit-inner-spin-button { -webkit-appearance: none; -moz-appearance: none; display: none; } } + &__currency-symbol { margin-top: 1px; color: $scorpion; } + .react-numeric-input { input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; -moz-appearance: none; display: none; } + input[type="number"]:hover::-webkit-inner-spin-button { -webkit-appearance: none; -moz-appearance: none; display: none; } } -}
\ No newline at end of file +} diff --git a/ui/app/css/itcss/components/editable-label.scss b/ui/app/css/itcss/components/editable-label.scss index c69ea142..9d113d02 100644 --- a/ui/app/css/itcss/components/editable-label.scss +++ b/ui/app/css/itcss/components/editable-label.scss @@ -15,7 +15,7 @@ width: 250px; font-size: 14px; text-align: center; - border: 1px solid $alto; + border: 1px solid $geyser; &--error { border: 1px solid $monzo; @@ -30,6 +30,6 @@ &__icon { cursor: pointer; - color: $dusty-gray; + color: $white; } } diff --git a/ui/app/css/itcss/components/loading-overlay.scss b/ui/app/css/itcss/components/loading-overlay.scss index b023c842..f6c0f63f 100644 --- a/ui/app/css/itcss/components/loading-overlay.scss +++ b/ui/app/css/itcss/components/loading-overlay.scss @@ -9,7 +9,7 @@ flex: 1 1 auto; width: 100%; height: 100%; - background: rgba(255, 255, 255, .8); + background: rgba(0, 0, 0, .8); &__container { position: absolute; diff --git a/ui/app/css/itcss/components/menu.scss b/ui/app/css/itcss/components/menu.scss index 6409ad54..d9f8856f 100644 --- a/ui/app/css/itcss/components/menu.scss +++ b/ui/app/css/itcss/components/menu.scss @@ -1,7 +1,7 @@ .menu { + background: rgba($black, .9); + border: 1px solid $geyser; border-radius: 4px; - background: rgba($black, .8); - box-shadow: rgba($black, .15) 0 2px 2px 2px; min-width: 150px; color: $white; diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index 0fe46752..8dec5235 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -192,7 +192,7 @@ align-items: center; position: relative; padding: 5px 0 31px 0; - border: 1px solid $silver; + border: 1px solid $geyser; border-radius: 4px; font-family: Roboto; @@ -219,7 +219,7 @@ .account-modal-close::after { content: '\00D7'; font-size: 40px; - color: $dusty-gray; + color: $white; position: absolute; top: 10px; right: 12px; @@ -244,12 +244,14 @@ .qr-wrapper { margin-top: 5px; + background-color: $white; } .ellip-address-wrapper { display: flex; justify-content: center; - border: 1px solid $alto; + border: 1px solid $geyser; + border-radius: 2px; padding: 5px 10px; font-family: Roboto; margin-top: 7px; @@ -267,7 +269,7 @@ width: 100%; height: 1px; margin: 19px 0 8px 0; - background-color: $alto; + background-color: $geyser; } // Export Private Key Modal @@ -584,7 +586,7 @@ } &__link { - color: $curious-blue; + color: $dexon-purple; } } diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss index ace2c73b..22888ece 100644 --- a/ui/app/css/itcss/components/new-account.scss +++ b/ui/app/css/itcss/components/new-account.scss @@ -1,15 +1,18 @@ .new-account { width: 375px; - background-color: #FFFFFF; - box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.08); + background-color: $dark-gray; + border: 2px solid $geyser; + border-radius: 4px; z-index: 25; + &__header { display: flex; flex-flow: column; border-bottom: 1px solid $geyser; } + &__title { - color: $tundora; + color: $white; font-family: Roboto; font-size: 32px; font-weight: 500; @@ -17,10 +20,12 @@ margin-top: 22px; margin-left: 29px; } + &__tabs { margin-left: 22px; display: flex; margin-top: 10px; + &__tab { height: 54px; padding: 15px 10px; @@ -31,21 +36,23 @@ text-align: center; cursor: pointer; } + &__tab:hover { - color: $black; + color: $dexon-purple; border-bottom: none; } + &__selected { - color: $curious-blue; - border-bottom: 3px solid $curious-blue; + color: $dexon-purple; + border-bottom: 3px solid $dexon-purple; cursor: initial; } } } .new-account-import-disclaimer { - width: 120%; - background-color: #F4F9FC; + margin: 0 -30px; + background-color: $muddy-gray; display: inline-block; align-items: center; padding: 20px 30px 20px; @@ -58,6 +65,7 @@ flex-flow: column; align-items: center; padding: 0 30px 30px; + &__select-section { display: flex; justify-content: space-between; @@ -65,50 +73,86 @@ margin-top: 29px; width: 100%; } + &__select-label { - color: $scorpion; + color: $dim-gray; font-family: Roboto; font-size: 16px; line-height: 21px; } + &__select { - height: 54px; width: 210px; - border: 1px solid #D2D8DD; + border: 1px solid $geyser; border-radius: 4px; - background-color: #FFFFFF; + background-color: $dark-gray; display: flex; align-items: center; + + .Select-control { + background-color: $dark-gray !important; + + .Select-value-label { + color: $white !important; + } + } + + .Select-menu-outer { + border: 1px solid $geyser; + } + + .Select-menu { + background-color: $dark-gray !important; + + .Select-option.is-selected { + color: $white !important; + } + + .Select-option { + color: $dim-gray !important; + background-color: $dark-gray !important; + + &:hover { + background-color: $muddy-gray !important; + } + } + } + .Select-control, .Select-control:hover { height: 100%; border: none; box-shadow: none; + .Select-value { display: flex; align-items: center; } } } + &__private-key-password-container { display: flex; flex-flow: column; align-items: center; width: 100%; } + &__instruction { - color: $scorpion; + color: $dim-gray; font-family: Roboto; font-size: 16px; line-height: 21px; align-self: flex-start; } + &__private-key { display: flex; flex-flow: column; align-items: flex-start; margin-top: 34px; } + &__input-password { height: 54px; width: 315px; @@ -116,17 +160,19 @@ border-radius: 4px; background-color: $dark-gray; margin-top: 16px; - color: $scorpion; + color: $white; font-family: Roboto; font-size: 16px; padding: 0px 20px; } + &__json { display: flex; flex-flow: column; align-items: center; margin-top: 29px; } + &__buttons { margin-top: 39px; display: flex; @@ -146,12 +192,14 @@ .hw-connect { width: 100%; + &__header { &__title { margin-top: 5px; margin-bottom: 15px; font-size: 22px; } + &__msg { font-size: 14px; color: #9b9b9b; @@ -159,19 +207,26 @@ margin-bottom: 20px; } } + &__btn-wrapper { flex: 1; flex-direction: row; display: flex; } + &__connect-btn { + background-color: #954A97; + color: #fff; + border: none; width: 315px; margin: 20px; } + &__connect-btn.disabled { cursor: not-allowed; opacity: .5; } + &__btn { background: #fbfbfb; border: 1px solid #e5e5e5; @@ -182,37 +237,45 @@ align-items: center; justify-content: center; border-radius: 5px; + &__img { width: 95px; } } + &__btn.selected { - border: 2px solid #00a8ee; + border: 2px solid #954A97; width: 149px; } + &__btn:first-child { margin-right: 15px; margin-left: 20px; } + &__btn:last-child { margin-right: 20px; } + &__hdPath { display: flex; flex-direction: row; margin-top: 15px; margin-bottom: 30px; font-size: 14px; + &__title { display: flex; margin-top: 10px; margin-right: 15px; } + &__select { display: flex; flex: 1; } } + &__learn-more { margin-top: 15px; font-size: 14px; @@ -220,6 +283,7 @@ line-height: 19px; text-align: center; cursor: pointer; + &__arrow { transform: rotate(90deg); display: block; @@ -228,26 +292,31 @@ margin: 0px auto 10px; } } + &__title { padding-top: 10px; font-weight: 400; font-size: 18px; } + &__unlock-title { padding-top: 10px; font-weight: 400; font-size: 22px; margin-bottom: 15px; } + &__msg { font-size: 14px; color: #9b9b9b; margin-top: 10px; margin-bottom: 15px; } + &__link { - color: #2f9ae0; + color: $dexon-purple; } + &__footer { &__title { padding-top: 15px; @@ -256,6 +325,7 @@ font-size: 18px; text-align: center; } + &__msg { font-size: 14px; color: #9b9b9b; @@ -265,26 +335,31 @@ display: block; margin-left: 20px; } + &__link { - color: #2f9ae0; + color: $dexon-purple; margin-left: 5px; } } + &__get-hw { width: 100%; padding-bottom: 10px; padding-top: 10px; + &__msg { font-size: 14px; color: #9b9b9b; } + &__link { font-size: 14px; text-align: center; - color: #2f9ae0; + color: $dexon-purple; cursor: pointer; } } + &__step-asset { margin: 0px auto 20px; display: flex; @@ -296,11 +371,13 @@ flex: 1; flex-flow: column; width: 100%; + &__title_wrapper { display: flex; flex-direction: row; flex: 1; } + &__title { margin-bottom: 23px; align-self: flex-start; @@ -312,6 +389,7 @@ display: flex; flex: 1; } + &__device { margin-bottom: 23px; align-self: flex-end; @@ -322,6 +400,7 @@ font-weight: normal; display: flex; } + &__item { font-size: 15px; flex-direction: row; @@ -329,27 +408,34 @@ padding-left: 10px; padding-right: 10px; } + &__item:nth-of-type(even) { - background-color: #fbfbfb; + background-color: $geyser; } + &__item:nth-of-type(odd) { background: rgba(0, 0, 0, 0.03); } + &__item:hover { background-color: rgba(0, 0, 0, 0.06); } + &__item__index { display: flex; width: 24px; } + &__item__radio { display: flex; flex: 1; + input { padding: 10px; margin-top: 13px; } } + &__item__label { display: flex; flex: 1; @@ -357,15 +443,18 @@ padding-top: 10px; padding-bottom: 10px; } + &__item__balance { display: flex; flex: 1; justify-content: center; } + &__item__link { display: flex; margin-top: 13px; } + &__item__link img { width: 15px; height: 15px; @@ -376,11 +465,13 @@ display: flex; align-self: flex-end; margin-top: 10px; + &__button { background: #fff; height: 19px; display: flex; - color: #33a4e7; + color: $dexon-purple; + background-color: $dark-gray; font-size: 14px; line-height: 19px; border: none; @@ -400,37 +491,44 @@ padding: 15px 30px 0; height: 710px; overflow: auto; + &.unsupported-browser { height: 210px; } + &.account-list { height: auto; padding-left: 20px; padding-right: 20px; } + &__buttons { margin-top: 39px; display: flex; width: 100%; justify-content: space-between; } + &__button { width: 150px; min-width: initial; } + .btn-primary { - background-color: #259DE5; + background-color: #954A97; color: #FFFFFF; border: none; width: 100%; min-height: 54px; font-weight: 300; font-size: 14px; - margin-bottom: 20px + margin-bottom: 20px; } + &__button.unlock { width: 50%; } + &__button.btn-primary--disabled { cursor: not-allowed; opacity: .5; @@ -442,8 +540,9 @@ flex-flow: column; align-items: center; padding: 22px; + a { - color: #2f9ae0; + color: $dexon-purple; font-size: 14px; cursor: pointer; } @@ -454,34 +553,38 @@ flex-flow: column; align-items: center; padding: 30px; + &__input-label { - color: $scorpion; + color: $dim-gray; font-family: Roboto; font-size: 16px; line-height: 21px; align-self: flex-start; } + &__input { height: 54px; width: 315.84px; border: 1px solid $geyser; border-radius: 4px; background-color: $dark-gray; - color: $scorpion; + color: $white; font-family: Roboto; font-size: 16px; line-height: 21px; margin-top: 15px; padding: 0px 20px; } + &__buttons { margin-top: 39px; display: flex; width: 100%; justify-content: space-between; } + &__button { width: 150px; min-width: initial; } -}
\ No newline at end of file +} diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index 9dc11042..db9dfd04 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -92,8 +92,8 @@ $wallet-view-bg: $muddy-gray; &__address { border-radius: 3px; - background-color: $alto; - color: $scorpion; + background-color: $dark-gray; + color: $dim-gray; font-size: 14px; line-height: 12px; padding: 4px 12px; @@ -101,7 +101,7 @@ $wallet-view-bg: $muddy-gray; flex: 0 0 auto; &__pressed { - background-color: ($manatee,); + background-color: $black; } } @@ -303,6 +303,5 @@ $wallet-view-bg: $muddy-gray; width: 100%; height: 100%; justify-content: center; - padding: 0 10px; - background: white; + background: $dark-gray; } diff --git a/ui/app/css/itcss/components/request-signature.scss b/ui/app/css/itcss/components/request-signature.scss index 45a4a812..0677cad1 100644 --- a/ui/app/css/itcss/components/request-signature.scss +++ b/ui/app/css/itcss/components/request-signature.scss @@ -177,7 +177,7 @@ &__help-link { cursor: pointer; text-decoration: underline; - color: $curious-blue; + color: $dexon-purple; } &__footer { width: 100%; diff --git a/ui/app/css/itcss/components/sections.scss b/ui/app/css/itcss/components/sections.scss index 9cb0dceb..00a776c5 100644 --- a/ui/app/css/itcss/components/sections.scss +++ b/ui/app/css/itcss/components/sections.scss @@ -45,8 +45,7 @@ textarea.twelve-word-phrase { /* unlock */ .error { - // color: #e20202; - color: #954a97; + color: #e20202; margin-bottom: 9px; } diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 9feef1b3..f3f90f0c 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -3,10 +3,12 @@ flex-flow: column nowrap; z-index: 25; font-family: Roboto; + @media screen and (max-width: $break-small) { width: 100%; overflow-y: auto; } + section { flex: 0 0 auto; } @@ -14,7 +16,7 @@ .send-screen-card { background-color: #fff; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08); + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08); padding: 46px 40.5px 26px; position: relative; // top: -26px; align-items: center; @@ -22,6 +24,7 @@ flex-flow: column nowrap; width: 498px; flex: 1 0 auto; + @media screen and (max-width: $break-small) { top: 0; width: 100%; @@ -46,12 +49,13 @@ width: 70px; height: 70px; border: 1px solid $alto; - box-shadow: 0 0 4px 0 rgba(0, 0, 0, .2); + box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2); position: absolute; top: -35px; z-index: 25; padding: 4px; background-color: $white; + @media screen and (max-width: $break-small) { position: relative; top: 0; @@ -61,9 +65,11 @@ .send-screen-input-wrapper { width: 95%; position: relative; + .fa-bolt { padding-right: 4px; } + .large-input { border: 1px solid $dusty-gray; border-radius: 4px; @@ -72,17 +78,21 @@ line-height: 22.4px; font-family: Roboto; } + .send-screen-gas-input { border: 1px solid transparent; } + &__error-message { display: none; } + &--error { input, .send-screen-gas-input { border-color: $red !important; } + .send-screen-input-wrapper__error-message { display: block; position: absolute; @@ -93,6 +103,7 @@ color: $red; } } + .send-screen-input-wrapper__error-message { display: block; position: absolute; @@ -138,8 +149,9 @@ .currency-toggle { &__item { - color: $curious-blue; + color: $dexon-purple; cursor: pointer; + &--selected { color: $black; cursor: default; @@ -148,7 +160,7 @@ } .send-screen-gas-input-customize { - color: $curious-blue; + color: $dexon-purple; font-size: 12px; cursor: pointer; } @@ -269,6 +281,7 @@ display: inline-block; margin-right: 4px; } + &__symbol { display: inline-block; } @@ -280,16 +293,19 @@ font-size: 18px; line-height: 29px; } + &__subtitle { margin: 10px 0 20px; font-size: 14px; line-height: 24px; } + &__send-button, &__cancel-button { width: 163px; text-align: center; } + &__send-button__disabled { opacity: .5; cursor: auto; @@ -301,17 +317,19 @@ flex-flow: column nowrap; z-index: 25; font-family: Roboto; + &__content { width: 498px; height: 605px; background-color: #fff; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08); + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08); padding: 46px 40.5px 26px; position: relative; // top: -26px; align-items: center; display: flex; flex-flow: column nowrap; flex: 1 0 auto; + @media screen and (max-width: $break-small) { top: 0; width: 100%; @@ -319,21 +337,25 @@ padding: 12px; } } + .identicon { position: absolute; top: -35px; z-index: 25; + @media screen and (max-width: $break-small) { position: relative; top: 0; flex: 0 0 auto; } } + &__title { color: $scorpion; font-size: 18px; line-height: 29px; } + &__description, &__balance-text, &__token-symbol { @@ -342,22 +364,27 @@ line-height: 24px; text-align: center; } + &__token-balance { font-size: 40px; line-height: 40px; margin-top: 13px; + .token-balance__amount { padding-right: 12px; } } + &__button-group { display: flex; flex-flow: column nowrap; align-items: center; flex: 0 0 auto; + @media screen and (max-width: $break-small) { margin-top: 24px; } + button { width: 163px; } @@ -376,13 +403,14 @@ width: 380px; border-radius: 8px; background-color: $dark-gray; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08); + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08); display: flex; flex-flow: column nowrap; z-index: 25; align-items: center; font-family: Roboto; position: relative; + @media screen and (max-width: $break-small) { width: 100%; top: 0; @@ -390,13 +418,16 @@ flex: 1 1 auto; } } + &__send-header-icon-container { z-index: 25; + @media screen and (max-width: $break-small) { position: relative; top: 0; } } + &__send-header-icon { border-radius: 50%; width: 48px; @@ -406,14 +437,16 @@ padding: 4px; background-color: $white; } + &__send-arrow-icon { - color: #f28930; + color: #954A97; transform: rotate(-45deg); position: absolute; top: -2px; left: 0; font-size: 1.12em; } + &__arrow-background { background-color: $white; height: 14px; @@ -423,10 +456,12 @@ left: 199px; border-radius: 50%; z-index: 100; + @media screen and (max-width: $break-small) { top: 36px; } } + &__header { height: 88px; width: 380px; @@ -435,11 +470,13 @@ display: flex; justify-content: center; align-items: center; + @media screen and (max-width: $break-small) { height: 59px; width: 100vw; } } + &__header-tip { height: 25px; width: 25px; @@ -448,6 +485,7 @@ transform: rotate(45deg); left: 178px; top: 75px; + @media screen and (max-width: $break-small) { top: 46px; left: 0; @@ -455,6 +493,7 @@ margin: 0 auto; } } + &__title { color: $scorpion; font-size: 22px; @@ -462,6 +501,7 @@ text-align: center; margin-top: 25px; } + &__copy { color: $gray; font-size: 14px; @@ -470,22 +510,27 @@ margin-top: 10px; width: 287px; } + &__error { font-size: 12px; line-height: 12px; left: 8px; color: $red; } + &__error-border { color: $red; } + &__form { padding: 10px 0 25px; + @media screen and (max-width: $break-small) { margin: 0; flex: 1 1 auto; } } + &__form-header, &__form-header-copy { width: 100%; @@ -493,6 +538,7 @@ flex-flow: column; align-items: center; } + &__form-row { margin: 14.5px 18px 0px; position: relative; @@ -501,26 +547,32 @@ flex: 1 0 auto; justify-content: space-between; } + &__form-field { flex: 1 1 auto; + .currency-display { - color: $tundora; + color: $dim-gray; + &__currency-symbol { - color: $tundora; + color: $dim-gray; } + &__converted-value, &__converted-currency { - color: $tundora; + color: $dim-gray; } } + .account-list-item { &__account-secondary-balance { - color: $tundora; + color: $dim-gray; } } } + &__form-label { - color: $scorpion; + color: $white; font-family: Roboto; font-size: 16px; line-height: 22px; @@ -528,17 +580,19 @@ font-weight: 400; flex: 0 0 auto; } + &__from-dropdown { height: 73px; width: 100%; - border: 1px solid $alto; + border: 1px solid $geyser; border-radius: 4px; background-color: $dark-gray; font-family: Roboto; line-height: 16px; font-size: 12px; - color: $tundora; + color: $white; position: relative; + &__close-area { position: fixed; top: 0; @@ -547,6 +601,7 @@ width: 100%; height: 100%; } + &__list { z-index: 1050; position: absolute; @@ -554,21 +609,24 @@ width: 100%; border: 1px solid $geyser; border-radius: 4px; - background-color: $white; - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .11); + background-color: $dark-gray; + box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.11); margin-top: 11px; margin-left: -1px; overflow-y: scroll; } } + &__to-autocomplete { position: relative; + &__down-caret { z-index: 1026; position: absolute; top: 18px; right: 12px; } + &__qr-code { z-index: 1026; position: absolute; @@ -578,13 +636,16 @@ padding: 8px 5px 5px; border-radius: 4px; } + &__qr-code:hover { - background: #f1f1f1; + background: $geyser; } + &__input.with-qr { padding-right: 65px; } } + &__to-autocomplete, &__memo-text-area, &__hex-data { @@ -593,27 +654,30 @@ position: relative; height: 54px; width: 100%; - border: 1px solid $alto; + border: 1px solid $geyser; border-radius: 4px; - background-color: $white; - color: $tundora; + background-color: $dark-gray; + color: $white; padding: 10px; font-family: Roboto; font-size: 16px; line-height: 21px; } } + &__amount-max { - color: $curious-blue; + color: $dexon-purple; font-family: Roboto; font-size: 12px; left: 8px; border: none; cursor: pointer; } + &__gas-fee-display { width: 100%; position: relative; + .currency-display--message { padding: 8px 38px 8px 10px; display: flex; @@ -621,57 +685,65 @@ } } + &__sliders-icon-container { display: flex; align-items: center; justify-content: center; height: 24px; width: 24px; - border: 1px solid $curious-blue; + border: 1px solid $dexon-purple; border-radius: 4px; - background-color: $white; + background-color: $dark-gray; position: absolute; right: 15px; top: 14px; cursor: pointer; font-size: 1em; } + &__sliders-icon { - color: $curious-blue; + color: $dexon-purple; } + &__memo-text-area { &__input { padding: 6px 10px; } } + &__footer { height: 92px; width: 100%; display: flex; justify-content: space-evenly; align-items: center; - border-top: 1px solid $alto; + border-top: 1px solid $geyser; background: $white; padding: 0 12px; flex-shrink: 0; } + &__next-btn, &__cancel-btn { width: 163px; margin: 0 4px; } + &__customize-gas { - border: 1px solid #D8D8D8; + border: 1px solid $geyser; border-radius: 4px; - background-color: #FFFFFF; + background-color: $dark-gray; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.14); font-family: Roboto; display: flex; flex-flow: column; + @media screen and (max-width: $break-small) { width: 100vw; height: 100vh; } + &__header { height: 52px; border-bottom: 1px solid $alto; @@ -679,13 +751,16 @@ align-items: center; justify-content: space-between; font-size: 22px; + @media screen and (max-width: $break-small) { flex: 0 0 auto; } } + &__title { margin-left: 19.25px; } + &__close::after { content: '\00D7'; font-size: 1.8em; @@ -694,19 +769,23 @@ cursor: pointer; margin-right: 19.25px; } + &__content { display: flex; flex-flow: column nowrap; height: 100%; } + &__body { display: flex; margin-bottom: 24px; + @media screen and (max-width: $break-small) { flex-flow: column; flex: 1 1 auto; } } + &__footer { height: 75px; border-top: 1px solid $alto; @@ -715,15 +794,18 @@ justify-content: space-between; font-size: 22px; position: relative; + @media screen and (max-width: $break-small) { flex: 0 0 auto; } } + &__buttons { display: flex; justify-content: space-between; margin-right: 21.25px; } + &__revert, &__cancel, &__save, @@ -734,21 +816,25 @@ padding: 0 3px; cursor: pointer; } + &__revert { color: $silver-chalice; font-size: 16px; margin-left: 21.25px; } + &__cancel, &__save, &__save__error { width: 85.74px; min-width: initial; } + &__save__error { opacity: 0.5; cursor: auto; } + &__error-message { display: block; position: absolute; @@ -760,16 +846,19 @@ width: 100%; text-align: center; } + &__cancel { margin-right: 10px; } } + &__gas-modal-card { width: 360px; display: flex; flex-flow: column; align-items: flex-start; padding-left: 20px; + &__title { height: 26px; color: $tundora; @@ -778,6 +867,7 @@ line-height: 26px; margin-top: 17px; } + &__copy { height: 38px; width: 314px; @@ -787,9 +877,11 @@ line-height: 19px; margin-top: 17px; } + .customize-gas-input-wrapper { margin-top: 17px; } + .customize-gas-input { height: 54px; width: 315px; @@ -797,6 +889,7 @@ background-color: $white; padding-left: 15px; } + .gas-tooltip-input-arrows { width: 32px; height: 54px; @@ -809,6 +902,7 @@ justify-content: space-around; align-items: center; } + .gas-tooltip-input-arrow-wrapper { align-items: center; align-self: stretch; @@ -817,10 +911,12 @@ flex-grow: 1; justify-content: center; } + input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; display: none; } + input[type="number"]:hover::-webkit-inner-spin-button { -webkit-appearance: none; display: none; @@ -843,7 +939,7 @@ justify-content: center; height: 24px; width: 24px; - border: 1px solid $curious-blue; + border: 1px solid $dexon-purple; border-radius: 4px; background-color: $dark-gray; position: absolute; @@ -871,5 +967,5 @@ } .sliders-icon { - color: $curious-blue; -}
\ No newline at end of file + color: $dexon-purple; +} diff --git a/ui/app/css/itcss/components/simple-dropdown.scss b/ui/app/css/itcss/components/simple-dropdown.scss index 1a7b2ca2..210071d3 100644 --- a/ui/app/css/itcss/components/simple-dropdown.scss +++ b/ui/app/css/itcss/components/simple-dropdown.scss @@ -3,11 +3,11 @@ display: flex; justify-content: flex-start; align-items: center; - border: 1px solid $alto; + border: 1px solid $geyser; border-radius: 4px; background-color: $dark-gray; font-size: 16px; - color: $geyser; + color: $dim-gray; cursor: pointer; position: relative; } @@ -30,8 +30,8 @@ border: 1px solid $geyser; border-radius: 4px; background-color: $dark-gray; - -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .11); - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .11); + -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.11); + box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.11); margin-top: 10px; overflow-y: scroll; left: 0; @@ -40,15 +40,17 @@ .simple-dropdown__option { padding: 10px; + &:hover { background-color: $gallery; } } .simple-dropdown__option--selected { - background-color: $alto; + background-color: $white; + &:hover { - background-color: $alto; + background-color: $white; cursor: default; } } @@ -60,4 +62,4 @@ z-index: 1000; width: 100%; height: 100%; -}
\ No newline at end of file +} diff --git a/ui/app/css/itcss/components/tab-bar.scss b/ui/app/css/itcss/components/tab-bar.scss index 4f307797..e55e404c 100644 --- a/ui/app/css/itcss/components/tab-bar.scss +++ b/ui/app/css/itcss/components/tab-bar.scss @@ -9,13 +9,13 @@ min-width: 0; flex: 0 0 auto; padding: 15px 25px; - border-bottom: 1px solid $alto; + border-bottom: 1px solid $geyser; box-sizing: border-box; font-size: 18px; } .tab-bar__tab--active { - border-color: $black; + border-color: $white; } .tab-bar__grow-tab { diff --git a/ui/app/css/itcss/components/tooltip.scss b/ui/app/css/itcss/components/tooltip.scss index 78325865..484c03cb 100644 --- a/ui/app/css/itcss/components/tooltip.scss +++ b/ui/app/css/itcss/components/tooltip.scss @@ -1,7 +1,659 @@ .metamask-tooltip { - padding: 5px !important; + padding: 5px !important; } // needed for react-tippy // copied from node_modules/react-tippy/dist/tippy.css -.tippy-touch{cursor:pointer!important}.tippy-notransition{transition:none!important}.tippy-popper{max-width:400px;-webkit-perspective:800px;perspective:800px;z-index:9999;outline:0;transition-timing-function:cubic-bezier(.165,.84,.44,1);pointer-events:none}.tippy-popper.html-template{max-width:96%;max-width:calc(100% - 20px)}.tippy-popper[x-placement^=top] [x-arrow]{border-top:7px solid #333;border-right:7px solid transparent;border-left:7px solid transparent;bottom:-7px;margin:0 9px}.tippy-popper[x-placement^=top] [x-arrow].arrow-small{border-top:5px solid #333;border-right:5px solid transparent;border-left:5px solid transparent;bottom:-5px}.tippy-popper[x-placement^=top] [x-arrow].arrow-big{border-top:10px solid #333;border-right:10px solid transparent;border-left:10px solid transparent;bottom:-10px}.tippy-popper[x-placement^=top] [x-circle]{-webkit-transform-origin:0 33%;transform-origin:0 33%}.tippy-popper[x-placement^=top] [x-circle].enter{-webkit-transform:scale(1) translate(-50%,-55%);transform:scale(1) translate(-50%,-55%);opacity:1}.tippy-popper[x-placement^=top] [x-circle].leave{-webkit-transform:scale(.15) translate(-50%,-50%);transform:scale(.15) translate(-50%,-50%);opacity:0}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-circle]{background-color:#fff}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow]{border-top:7px solid #fff;border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow].arrow-small{border-top:5px solid #fff;border-right:5px solid transparent;border-left:5px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow].arrow-big{border-top:10px solid #fff;border-right:10px solid transparent;border-left:10px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-circle]{background-color:rgba(0,0,0,.7)}.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow]{border-top:7px solid rgba(0,0,0,.7);border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow].arrow-small{border-top:5px solid rgba(0,0,0,.7);border-right:5px solid transparent;border-left:5px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow].arrow-big{border-top:10px solid rgba(0,0,0,.7);border-right:10px solid transparent;border-left:10px solid transparent}.tippy-popper[x-placement^=top] [data-animation=perspective]{-webkit-transform-origin:bottom;transform-origin:bottom}.tippy-popper[x-placement^=top] [data-animation=perspective].enter{opacity:1;-webkit-transform:translateY(-10px) rotateX(0);transform:translateY(-10px) rotateX(0)}.tippy-popper[x-placement^=top] [data-animation=perspective].leave{opacity:0;-webkit-transform:translateY(0) rotateX(90deg);transform:translateY(0) rotateX(90deg)}.tippy-popper[x-placement^=top] [data-animation=fade].enter{opacity:1;-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=fade].leave{opacity:0;-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=shift].enter{opacity:1;-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=shift].leave{opacity:0;-webkit-transform:translateY(0);transform:translateY(0)}.tippy-popper[x-placement^=top] [data-animation=scale].enter{opacity:1;-webkit-transform:translateY(-10px) scale(1);transform:translateY(-10px) scale(1)}.tippy-popper[x-placement^=top] [data-animation=scale].leave{opacity:0;-webkit-transform:translateY(0) scale(0);transform:translateY(0) scale(0)}.tippy-popper[x-placement^=bottom] [x-arrow]{border-bottom:7px solid #333;border-right:7px solid transparent;border-left:7px solid transparent;top:-7px;margin:0 9px}.tippy-popper[x-placement^=bottom] [x-arrow].arrow-small{border-bottom:5px solid #333;border-right:5px solid transparent;border-left:5px solid transparent;top:-5px}.tippy-popper[x-placement^=bottom] [x-arrow].arrow-big{border-bottom:10px solid #333;border-right:10px solid transparent;border-left:10px solid transparent;top:-10px}.tippy-popper[x-placement^=bottom] [x-circle]{-webkit-transform-origin:0 -50%;transform-origin:0 -50%}.tippy-popper[x-placement^=bottom] [x-circle].enter{-webkit-transform:scale(1) translate(-50%,-45%);transform:scale(1) translate(-50%,-45%);opacity:1}.tippy-popper[x-placement^=bottom] [x-circle].leave{-webkit-transform:scale(.15) translate(-50%,-5%);transform:scale(.15) translate(-50%,-5%);opacity:0}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-circle]{background-color:#fff}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow]{border-bottom:7px solid #fff;border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow].arrow-small{border-bottom:5px solid #fff;border-right:5px solid transparent;border-left:5px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow].arrow-big{border-bottom:10px solid #fff;border-right:10px solid transparent;border-left:10px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-circle]{background-color:rgba(0,0,0,.7)}.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow]{border-bottom:7px solid rgba(0,0,0,.7);border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow].arrow-small{border-bottom:5px solid rgba(0,0,0,.7);border-right:5px solid transparent;border-left:5px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow].arrow-big{border-bottom:10px solid rgba(0,0,0,.7);border-right:10px solid transparent;border-left:10px solid transparent}.tippy-popper[x-placement^=bottom] [data-animation=perspective]{-webkit-transform-origin:top;transform-origin:top}.tippy-popper[x-placement^=bottom] [data-animation=perspective].enter{opacity:1;-webkit-transform:translateY(10px) rotateX(0);transform:translateY(10px) rotateX(0)}.tippy-popper[x-placement^=bottom] [data-animation=perspective].leave{opacity:0;-webkit-transform:translateY(0) rotateX(-90deg);transform:translateY(0) rotateX(-90deg)}.tippy-popper[x-placement^=bottom] [data-animation=fade].enter{opacity:1;-webkit-transform:translateY(10px);transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=fade].leave{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=shift].enter{opacity:1;-webkit-transform:translateY(10px);transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=shift].leave{opacity:0;-webkit-transform:translateY(0);transform:translateY(0)}.tippy-popper[x-placement^=bottom] [data-animation=scale].enter{opacity:1;-webkit-transform:translateY(10px) scale(1);transform:translateY(10px) scale(1)}.tippy-popper[x-placement^=bottom] [data-animation=scale].leave{opacity:0;-webkit-transform:translateY(0) scale(0);transform:translateY(0) scale(0)}.tippy-popper[x-placement^=left] [x-arrow]{border-left:7px solid #333;border-top:7px solid transparent;border-bottom:7px solid transparent;right:-7px;margin:6px 0}.tippy-popper[x-placement^=left] [x-arrow].arrow-small{border-left:5px solid #333;border-top:5px solid transparent;border-bottom:5px solid transparent;right:-5px}.tippy-popper[x-placement^=left] [x-arrow].arrow-big{border-left:10px solid #333;border-top:10px solid transparent;border-bottom:10px solid transparent;right:-10px}.tippy-popper[x-placement^=left] [x-circle]{-webkit-transform-origin:50% 0;transform-origin:50% 0}.tippy-popper[x-placement^=left] [x-circle].enter{-webkit-transform:scale(1) translate(-50%,-50%);transform:scale(1) translate(-50%,-50%);opacity:1}.tippy-popper[x-placement^=left] [x-circle].leave{-webkit-transform:scale(.15) translate(-50%,-50%);transform:scale(.15) translate(-50%,-50%);opacity:0}.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-circle]{background-color:#fff}.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow]{border-left:7px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow].arrow-small{border-left:5px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow].arrow-big{border-left:10px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-circle]{background-color:rgba(0,0,0,.7)}.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow]{border-left:7px solid rgba(0,0,0,.7);border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow].arrow-small{border-left:5px solid rgba(0,0,0,.7);border-top:5px solid transparent;border-bottom:5px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow].arrow-big{border-left:10px solid rgba(0,0,0,.7);border-top:10px solid transparent;border-bottom:10px solid transparent}.tippy-popper[x-placement^=left] [data-animation=perspective]{-webkit-transform-origin:right;transform-origin:right}.tippy-popper[x-placement^=left] [data-animation=perspective].enter{opacity:1;-webkit-transform:translateX(-10px) rotateY(0);transform:translateX(-10px) rotateY(0)}.tippy-popper[x-placement^=left] [data-animation=perspective].leave{opacity:0;-webkit-transform:translateX(0) rotateY(-90deg);transform:translateX(0) rotateY(-90deg)}.tippy-popper[x-placement^=left] [data-animation=fade].enter{opacity:1;-webkit-transform:translateX(-10px);transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=fade].leave{opacity:0;-webkit-transform:translateX(-10px);transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=shift].enter{opacity:1;-webkit-transform:translateX(-10px);transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=shift].leave{opacity:0;-webkit-transform:translateX(0);transform:translateX(0)}.tippy-popper[x-placement^=left] [data-animation=scale].enter{opacity:1;-webkit-transform:translateX(-10px) scale(1);transform:translateX(-10px) scale(1)}.tippy-popper[x-placement^=left] [data-animation=scale].leave{opacity:0;-webkit-transform:translateX(0) scale(0);transform:translateX(0) scale(0)}.tippy-popper[x-placement^=right] [x-arrow]{border-right:7px solid #333;border-top:7px solid transparent;border-bottom:7px solid transparent;left:-7px;margin:6px 0}.tippy-popper[x-placement^=right] [x-arrow].arrow-small{border-right:5px solid #333;border-top:5px solid transparent;border-bottom:5px solid transparent;left:-5px}.tippy-popper[x-placement^=right] [x-arrow].arrow-big{border-right:10px solid #333;border-top:10px solid transparent;border-bottom:10px solid transparent;left:-10px}.tippy-popper[x-placement^=right] [x-circle]{-webkit-transform-origin:-50% 0;transform-origin:-50% 0}.tippy-popper[x-placement^=right] [x-circle].enter{-webkit-transform:scale(1) translate(-50%,-50%);transform:scale(1) translate(-50%,-50%);opacity:1}.tippy-popper[x-placement^=right] [x-circle].leave{-webkit-transform:scale(.15) translate(-50%,-50%);transform:scale(.15) translate(-50%,-50%);opacity:0}.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-circle]{background-color:#fff}.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow]{border-right:7px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow].arrow-small{border-right:5px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow].arrow-big{border-right:10px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-circle]{background-color:rgba(0,0,0,.7)}.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow]{border-right:7px solid rgba(0,0,0,.7);border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow].arrow-small{border-right:5px solid rgba(0,0,0,.7);border-top:5px solid transparent;border-bottom:5px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow].arrow-big{border-right:10px solid rgba(0,0,0,.7);border-top:10px solid transparent;border-bottom:10px solid transparent}.tippy-popper[x-placement^=right] [data-animation=perspective]{-webkit-transform-origin:left;transform-origin:left}.tippy-popper[x-placement^=right] [data-animation=perspective].enter{opacity:1;-webkit-transform:translateX(10px) rotateY(0);transform:translateX(10px) rotateY(0)}.tippy-popper[x-placement^=right] [data-animation=perspective].leave{opacity:0;-webkit-transform:translateX(0) rotateY(90deg);transform:translateX(0) rotateY(90deg)}.tippy-popper[x-placement^=right] [data-animation=fade].enter{opacity:1;-webkit-transform:translateX(10px);transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=fade].leave{opacity:0;-webkit-transform:translateX(10px);transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=shift].enter{opacity:1;-webkit-transform:translateX(10px);transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=shift].leave{opacity:0;-webkit-transform:translateX(0);transform:translateX(0)}.tippy-popper[x-placement^=right] [data-animation=scale].enter{opacity:1;-webkit-transform:translateX(10px) scale(1);transform:translateX(10px) scale(1)}.tippy-popper[x-placement^=right] [data-animation=scale].leave{opacity:0;-webkit-transform:translateX(0) scale(0);transform:translateX(0) scale(0)}.tippy-popper .tippy-tooltip.transparent-theme{background-color:rgba(0,0,0,.7)}.tippy-popper .tippy-tooltip.transparent-theme[data-animatefill]{background-color:transparent}.tippy-popper .tippy-tooltip.light-theme{color:#26323d;box-shadow:0 4px 20px 4px rgba(0,20,60,.1),0 4px 80px -8px rgba(0,20,60,.2);background-color:#fff}.tippy-popper .tippy-tooltip.light-theme[data-animatefill]{background-color:transparent}.tippy-tooltip{position:relative;color:#fff;border-radius:4px;font-size:.95rem;padding:.4rem .8rem;text-align:center;will-change:transform;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#333}.tippy-tooltip--small{padding:.25rem .5rem;font-size:.8rem}.tippy-tooltip--big{padding:.6rem 1.2rem;font-size:1.2rem}.tippy-tooltip[data-animatefill]{overflow:hidden;background-color:transparent}.tippy-tooltip[data-interactive]{pointer-events:auto}.tippy-tooltip[data-inertia]{transition-timing-function:cubic-bezier(.53,2,.36,.85)}.tippy-tooltip [x-arrow]{position:absolute;width:0;height:0}.tippy-tooltip [x-circle]{position:absolute;will-change:transform;background-color:#333;border-radius:50%;width:130%;width:calc(110% + 2rem);left:50%;top:50%;z-index:-1;overflow:hidden;transition:all ease}.tippy-tooltip [x-circle]:before{content:"";padding-top:90%;float:left}@media (max-width:450px){.tippy-popper{max-width:96%;max-width:calc(100% - 20px)}} +.tippy-touch { + cursor: pointer !important; +} + +.tippy-notransition { + transition: none !important; +} + +.tippy-popper { + max-width: 400px; + -webkit-perspective: 800px; + perspective: 800px; + z-index: 9999; + outline: 0; + transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); + pointer-events: none; +} + +.tippy-popper.html-template { + max-width: 96%; + max-width: calc(100% - 20px); +} + +.tippy-popper[x-placement^=top] [x-arrow] { + border-top: 7px solid #ccc; + border-right: 7px solid transparent; + border-left: 7px solid transparent; + bottom: -7px; + margin: 0 9px; +} + +.tippy-popper[x-placement^=top] [x-arrow].arrow-small { + border-top: 5px solid #ccc; + border-right: 5px solid transparent; + border-left: 5px solid transparent; + bottom: -5px; +} + +.tippy-popper[x-placement^=top] [x-arrow].arrow-big { + border-top: 10px solid #ccc; + border-right: 10px solid transparent; + border-left: 10px solid transparent; + bottom: -10px; +} + +.tippy-popper[x-placement^=top] [x-circle] { + -webkit-transform-origin: 0 33%; + transform-origin: 0 33%; +} + +.tippy-popper[x-placement^=top] [x-circle].enter { + -webkit-transform: scale(1) translate(-50%, -55%); + transform: scale(1) translate(-50%, -55%); + opacity: 1; +} + +.tippy-popper[x-placement^=top] [x-circle].leave { + -webkit-transform: scale(0.15) translate(-50%, -50%); + transform: scale(0.15) translate(-50%, -50%); + opacity: 0; +} + +.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-circle] { + background-color: #000; +} + +.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow] { + border-top: 7px solid #000; + border-right: 7px solid transparent; + border-left: 7px solid transparent; +} + +.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow].arrow-small { + border-top: 5px solid #000; + border-right: 5px solid transparent; + border-left: 5px solid transparent; +} + +.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow].arrow-big { + border-top: 10px solid #000; + border-right: 10px solid transparent; + border-left: 10px solid transparent; +} + +.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-circle] { + background-color: rgba(0, 0, 0, 0.7); +} + +.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow] { + border-top: 7px solid rgba(0, 0, 0, 0.7); + border-right: 7px solid transparent; + border-left: 7px solid transparent; +} + +.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow].arrow-small { + border-top: 5px solid rgba(0, 0, 0, 0.7); + border-right: 5px solid transparent; + border-left: 5px solid transparent; +} + +.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow].arrow-big { + border-top: 10px solid rgba(0, 0, 0, 0.7); + border-right: 10px solid transparent; + border-left: 10px solid transparent; +} + +.tippy-popper[x-placement^=top] [data-animation=perspective] { + -webkit-transform-origin: bottom; + transform-origin: bottom; +} + +.tippy-popper[x-placement^=top] [data-animation=perspective].enter { + opacity: 1; + -webkit-transform: translateY(-10px) rotateX(0); + transform: translateY(-10px) rotateX(0); +} + +.tippy-popper[x-placement^=top] [data-animation=perspective].leave { + opacity: 0; + -webkit-transform: translateY(0) rotateX(90deg); + transform: translateY(0) rotateX(90deg); +} + +.tippy-popper[x-placement^=top] [data-animation=fade].enter { + opacity: 1; + -webkit-transform: translateY(-10px); + transform: translateY(-10px); +} + +.tippy-popper[x-placement^=top] [data-animation=fade].leave { + opacity: 0; + -webkit-transform: translateY(-10px); + transform: translateY(-10px); +} + +.tippy-popper[x-placement^=top] [data-animation=shift].enter { + opacity: 1; + -webkit-transform: translateY(-10px); + transform: translateY(-10px); +} + +.tippy-popper[x-placement^=top] [data-animation=shift].leave { + opacity: 0; + -webkit-transform: translateY(0); + transform: translateY(0); +} + +.tippy-popper[x-placement^=top] [data-animation=scale].enter { + opacity: 1; + -webkit-transform: translateY(-10px) scale(1); + transform: translateY(-10px) scale(1); +} + +.tippy-popper[x-placement^=top] [data-animation=scale].leave { + opacity: 0; + -webkit-transform: translateY(0) scale(0); + transform: translateY(0) scale(0); +} + +.tippy-popper[x-placement^=bottom] [x-arrow] { + border-bottom: 7px solid #ccc; + border-right: 7px solid transparent; + border-left: 7px solid transparent; + top: -7px; + margin: 0 9px; +} + +.tippy-popper[x-placement^=bottom] [x-arrow].arrow-small { + border-bottom: 5px solid #ccc; + border-right: 5px solid transparent; + border-left: 5px solid transparent; + top: -5px; +} + +.tippy-popper[x-placement^=bottom] [x-arrow].arrow-big { + border-bottom: 10px solid #ccc; + border-right: 10px solid transparent; + border-left: 10px solid transparent; + top: -10px; +} + +.tippy-popper[x-placement^=bottom] [x-circle] { + -webkit-transform-origin: 0 -50%; + transform-origin: 0 -50%; +} + +.tippy-popper[x-placement^=bottom] [x-circle].enter { + -webkit-transform: scale(1) translate(-50%, -45%); + transform: scale(1) translate(-50%, -45%); + opacity: 1; +} + +.tippy-popper[x-placement^=bottom] [x-circle].leave { + -webkit-transform: scale(0.15) translate(-50%, -5%); + transform: scale(0.15) translate(-50%, -5%); + opacity: 0; +} + +.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-circle] { + background-color: #000; +} + +.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow] { + border-bottom: 7px solid #000; + border-right: 7px solid transparent; + border-left: 7px solid transparent; +} + +.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow].arrow-small { + border-bottom: 5px solid #000; + border-right: 5px solid transparent; + border-left: 5px solid transparent; +} + +.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow].arrow-big { + border-bottom: 10px solid #000; + border-right: 10px solid transparent; + border-left: 10px solid transparent; +} + +.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-circle] { + background-color: rgba(0, 0, 0, 0.7); +} + +.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow] { + border-bottom: 7px solid rgba(0, 0, 0, 0.7); + border-right: 7px solid transparent; + border-left: 7px solid transparent; +} + +.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow].arrow-small { + border-bottom: 5px solid rgba(0, 0, 0, 0.7); + border-right: 5px solid transparent; + border-left: 5px solid transparent; +} + +.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow].arrow-big { + border-bottom: 10px solid rgba(0, 0, 0, 0.7); + border-right: 10px solid transparent; + border-left: 10px solid transparent; +} + +.tippy-popper[x-placement^=bottom] [data-animation=perspective] { + -webkit-transform-origin: top; + transform-origin: top; +} + +.tippy-popper[x-placement^=bottom] [data-animation=perspective].enter { + opacity: 1; + -webkit-transform: translateY(10px) rotateX(0); + transform: translateY(10px) rotateX(0); +} + +.tippy-popper[x-placement^=bottom] [data-animation=perspective].leave { + opacity: 0; + -webkit-transform: translateY(0) rotateX(-90deg); + transform: translateY(0) rotateX(-90deg); +} + +.tippy-popper[x-placement^=bottom] [data-animation=fade].enter { + opacity: 1; + -webkit-transform: translateY(10px); + transform: translateY(10px); +} + +.tippy-popper[x-placement^=bottom] [data-animation=fade].leave { + opacity: 0; + -webkit-transform: translateY(10px); + transform: translateY(10px); +} + +.tippy-popper[x-placement^=bottom] [data-animation=shift].enter { + opacity: 1; + -webkit-transform: translateY(10px); + transform: translateY(10px); +} + +.tippy-popper[x-placement^=bottom] [data-animation=shift].leave { + opacity: 0; + -webkit-transform: translateY(0); + transform: translateY(0); +} + +.tippy-popper[x-placement^=bottom] [data-animation=scale].enter { + opacity: 1; + -webkit-transform: translateY(10px) scale(1); + transform: translateY(10px) scale(1); +} + +.tippy-popper[x-placement^=bottom] [data-animation=scale].leave { + opacity: 0; + -webkit-transform: translateY(0) scale(0); + transform: translateY(0) scale(0); +} + +.tippy-popper[x-placement^=left] [x-arrow] { + border-left: 7px solid #ccc; + border-top: 7px solid transparent; + border-bottom: 7px solid transparent; + right: -7px; + margin: 6px 0; +} + +.tippy-popper[x-placement^=left] [x-arrow].arrow-small { + border-left: 5px solid #ccc; + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + right: -5px; +} + +.tippy-popper[x-placement^=left] [x-arrow].arrow-big { + border-left: 10px solid #ccc; + border-top: 10px solid transparent; + border-bottom: 10px solid transparent; + right: -10px; +} + +.tippy-popper[x-placement^=left] [x-circle] { + -webkit-transform-origin: 50% 0; + transform-origin: 50% 0; +} + +.tippy-popper[x-placement^=left] [x-circle].enter { + -webkit-transform: scale(1) translate(-50%, -50%); + transform: scale(1) translate(-50%, -50%); + opacity: 1; +} + +.tippy-popper[x-placement^=left] [x-circle].leave { + -webkit-transform: scale(0.15) translate(-50%, -50%); + transform: scale(0.15) translate(-50%, -50%); + opacity: 0; +} + +.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-circle] { + background-color: #000; +} + +.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow] { + border-left: 7px solid #000; + border-top: 7px solid transparent; + border-bottom: 7px solid transparent; +} + +.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow].arrow-small { + border-left: 5px solid #000; + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; +} + +.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow].arrow-big { + border-left: 10px solid #000; + border-top: 10px solid transparent; + border-bottom: 10px solid transparent; +} + +.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-circle] { + background-color: rgba(0, 0, 0, 0.7); +} + +.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow] { + border-left: 7px solid rgba(0, 0, 0, 0.7); + border-top: 7px solid transparent; + border-bottom: 7px solid transparent; +} + +.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow].arrow-small { + border-left: 5px solid rgba(0, 0, 0, 0.7); + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; +} + +.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow].arrow-big { + border-left: 10px solid rgba(0, 0, 0, 0.7); + border-top: 10px solid transparent; + border-bottom: 10px solid transparent; +} + +.tippy-popper[x-placement^=left] [data-animation=perspective] { + -webkit-transform-origin: right; + transform-origin: right; +} + +.tippy-popper[x-placement^=left] [data-animation=perspective].enter { + opacity: 1; + -webkit-transform: translateX(-10px) rotateY(0); + transform: translateX(-10px) rotateY(0); +} + +.tippy-popper[x-placement^=left] [data-animation=perspective].leave { + opacity: 0; + -webkit-transform: translateX(0) rotateY(-90deg); + transform: translateX(0) rotateY(-90deg); +} + +.tippy-popper[x-placement^=left] [data-animation=fade].enter { + opacity: 1; + -webkit-transform: translateX(-10px); + transform: translateX(-10px); +} + +.tippy-popper[x-placement^=left] [data-animation=fade].leave { + opacity: 0; + -webkit-transform: translateX(-10px); + transform: translateX(-10px); +} + +.tippy-popper[x-placement^=left] [data-animation=shift].enter { + opacity: 1; + -webkit-transform: translateX(-10px); + transform: translateX(-10px); +} + +.tippy-popper[x-placement^=left] [data-animation=shift].leave { + opacity: 0; + -webkit-transform: translateX(0); + transform: translateX(0); +} + +.tippy-popper[x-placement^=left] [data-animation=scale].enter { + opacity: 1; + -webkit-transform: translateX(-10px) scale(1); + transform: translateX(-10px) scale(1); +} + +.tippy-popper[x-placement^=left] [data-animation=scale].leave { + opacity: 0; + -webkit-transform: translateX(0) scale(0); + transform: translateX(0) scale(0); +} + +.tippy-popper[x-placement^=right] [x-arrow] { + border-right: 7px solid #ccc; + border-top: 7px solid transparent; + border-bottom: 7px solid transparent; + left: -7px; + margin: 6px 0; +} + +.tippy-popper[x-placement^=right] [x-arrow].arrow-small { + border-right: 5px solid #ccc; + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + left: -5px; +} + +.tippy-popper[x-placement^=right] [x-arrow].arrow-big { + border-right: 10px solid #ccc; + border-top: 10px solid transparent; + border-bottom: 10px solid transparent; + left: -10px; +} + +.tippy-popper[x-placement^=right] [x-circle] { + -webkit-transform-origin: -50% 0; + transform-origin: -50% 0; +} + +.tippy-popper[x-placement^=right] [x-circle].enter { + -webkit-transform: scale(1) translate(-50%, -50%); + transform: scale(1) translate(-50%, -50%); + opacity: 1; +} + +.tippy-popper[x-placement^=right] [x-circle].leave { + -webkit-transform: scale(0.15) translate(-50%, -50%); + transform: scale(0.15) translate(-50%, -50%); + opacity: 0; +} + +.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-circle] { + background-color: #000; +} + +.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow] { + border-right: 7px solid #000; + border-top: 7px solid transparent; + border-bottom: 7px solid transparent; +} + +.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow].arrow-small { + border-right: 5px solid #000; + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; +} + +.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow].arrow-big { + border-right: 10px solid #000; + border-top: 10px solid transparent; + border-bottom: 10px solid transparent; +} + +.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-circle] { + background-color: rgba(0, 0, 0, 0.7); +} + +.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow] { + border-right: 7px solid rgba(0, 0, 0, 0.7); + border-top: 7px solid transparent; + border-bottom: 7px solid transparent; +} + +.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow].arrow-small { + border-right: 5px solid rgba(0, 0, 0, 0.7); + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; +} + +.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow].arrow-big { + border-right: 10px solid rgba(0, 0, 0, 0.7); + border-top: 10px solid transparent; + border-bottom: 10px solid transparent; +} + +.tippy-popper[x-placement^=right] [data-animation=perspective] { + -webkit-transform-origin: left; + transform-origin: left; +} + +.tippy-popper[x-placement^=right] [data-animation=perspective].enter { + opacity: 1; + -webkit-transform: translateX(10px) rotateY(0); + transform: translateX(10px) rotateY(0); +} + +.tippy-popper[x-placement^=right] [data-animation=perspective].leave { + opacity: 0; + -webkit-transform: translateX(0) rotateY(90deg); + transform: translateX(0) rotateY(90deg); +} + +.tippy-popper[x-placement^=right] [data-animation=fade].enter { + opacity: 1; + -webkit-transform: translateX(10px); + transform: translateX(10px); +} + +.tippy-popper[x-placement^=right] [data-animation=fade].leave { + opacity: 0; + -webkit-transform: translateX(10px); + transform: translateX(10px); +} + +.tippy-popper[x-placement^=right] [data-animation=shift].enter { + opacity: 1; + -webkit-transform: translateX(10px); + transform: translateX(10px); +} + +.tippy-popper[x-placement^=right] [data-animation=shift].leave { + opacity: 0; + -webkit-transform: translateX(0); + transform: translateX(0); +} + +.tippy-popper[x-placement^=right] [data-animation=scale].enter { + opacity: 1; + -webkit-transform: translateX(10px) scale(1); + transform: translateX(10px) scale(1); +} + +.tippy-popper[x-placement^=right] [data-animation=scale].leave { + opacity: 0; + -webkit-transform: translateX(0) scale(0); + transform: translateX(0) scale(0); +} + +.tippy-popper .tippy-tooltip.transparent-theme { + background-color: rgba(0, 0, 0, 0.7); +} + +.tippy-popper .tippy-tooltip.transparent-theme[data-animatefill] { + background-color: transparent; +} + +.tippy-popper .tippy-tooltip.light-theme { + color: #26323d; + box-shadow: 0 4px 20px 4px rgba(0, 20, 60, 0.1), 0 4px 80px -8px rgba(0, 20, 60, 0.2); + background-color: #000; +} + +.tippy-popper .tippy-tooltip.light-theme[data-animatefill] { + background-color: transparent; +} + +.tippy-tooltip { + position: relative; + color: #000; + border-radius: 4px; + font-size: .95rem; + padding: .4rem .8rem; + text-align: center; + will-change: transform; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + background-color: #ccc; +} + +.tippy-tooltip--small { + padding: .25rem .5rem; + font-size: .8rem; +} + +.tippy-tooltip--big { + padding: .6rem 1.2rem; + font-size: 1.2rem; +} + +.tippy-tooltip[data-animatefill] { + overflow: hidden; + background-color: transparent; +} + +.tippy-tooltip[data-interactive] { + pointer-events: auto; +} + +.tippy-tooltip[data-inertia] { + transition-timing-function: cubic-bezier(0.53, 2, 0.36, 0.85); +} + +.tippy-tooltip [x-arrow] { + position: absolute; + width: 0; + height: 0; +} + +.tippy-tooltip [x-circle] { + position: absolute; + will-change: transform; + background-color: #ccc; + border-radius: 50%; + width: 130%; + width: calc(110% + 2rem); + left: 50%; + top: 50%; + z-index: -1; + overflow: hidden; + transition: all ease; +} + +.tippy-tooltip [x-circle]:before { + content: ""; + padding-top: 90%; + float: left; +} + +@media (max-width: 450px) { + .tippy-popper { + max-width: 96%; + max-width: calc(100% - 20px); + } +} diff --git a/ui/app/css/itcss/components/welcome-screen.scss b/ui/app/css/itcss/components/welcome-screen.scss index af1d6739..59f5308f 100644 --- a/ui/app/css/itcss/components/welcome-screen.scss +++ b/ui/app/css/itcss/components/welcome-screen.scss @@ -8,7 +8,7 @@ width: 100%; flex: 1 0 auto; padding: 70px 0; - background: $white; + background: $dark-gray; @media screen and (max-width: 575px) { padding: 0; @@ -31,6 +31,10 @@ } } + &__logo { + margin-bottom: 20px; + } + &__copy { font-size: 1em; width: 400px; @@ -46,7 +50,7 @@ &__button { height: 54px; width: 198px; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .14); + border-radius: 4px; color: #fff; font-size: 20px; font-weight: 500; @@ -55,6 +59,6 @@ text-transform: uppercase; margin: 35px 0 14px; transition: 200ms ease-in-out; - background-color: rgba(247, 134, 28, .9); + background-color: rgba(149,74,151, .9); } } diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss index a1b02b55..edc1157b 100644 --- a/ui/app/css/itcss/generic/index.scss +++ b/ui/app/css/itcss/generic/index.scss @@ -2,7 +2,8 @@ Generic */ -@import './reset.scss'; +@import "./reset.scss"; + * { box-sizing: border-box; } @@ -48,6 +49,7 @@ textarea:focus { height: 100%; display: flex; flex-direction: column; + @media screen and (max-width: $break-small) { background-color: $dark-gray; } @@ -61,7 +63,12 @@ a { } a:hover { - color: #df6b0e; + color: #954A97; +} + +input { + color: $white; + background-color: $dark-gray; } input.large-input, @@ -90,22 +97,27 @@ input.form-control { border: 1px solid $alto; border-radius: 3px; width: 100%; + &::-webkit-input-placeholder { font-weight: 100; color: $dusty-gray; } + &::-moz-placeholder { font-weight: 100; color: $dusty-gray; } + &:-ms-input-placeholder { font-weight: 100; color: $dusty-gray; } + &:-moz-placeholder { font-weight: 100; color: $dusty-gray; } + &--error { border: 1px solid $monzo; } @@ -115,4 +127,4 @@ input.form-control { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -}
\ No newline at end of file +} diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss index 3b5e2411..bb4af1e8 100644 --- a/ui/app/css/itcss/settings/variables.scss +++ b/ui/app/css/itcss/settings/variables.scss @@ -28,7 +28,7 @@ $dusty-gray: #777777; $alto: #dedede; $alabaster: #fafafa; $silver-chalice: #aeaeae; -$curious-blue: #2f9ae0; +$dexon-purple: #2f9ae0; $concrete: #f3f3f3; $tundora: #4d4d4d; $nile-blue: #1b344d; @@ -64,6 +64,7 @@ $mischka: #dddee9; $dexon-purple: #954A97; $dark-gray: #222222; $muddy-gray: #303030; +$dim-gray: #9b9b9b; /* Z-Indicies |