aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/css/itcss/components/new-account.scss
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app/css/itcss/components/new-account.scss')
-rw-r--r--ui/app/css/itcss/components/new-account.scss155
1 files changed, 129 insertions, 26 deletions
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
+}
generated by cgit (git 2.34.1) at 2024-12-27 07:34:22 +0800