aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/css
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app/css')
-rw-r--r--ui/app/css/fonts.css46
-rw-r--r--ui/app/css/index.css297
-rw-r--r--ui/app/css/lib.css53
-rw-r--r--ui/app/css/transitions.css48
4 files changed, 206 insertions, 238 deletions
diff --git a/ui/app/css/fonts.css b/ui/app/css/fonts.css
index dd1a755fb..b528cb9ab 100644
--- a/ui/app/css/fonts.css
+++ b/ui/app/css/fonts.css
@@ -1,2 +1,46 @@
@import url(https://fonts.googleapis.com/css?family=Roboto:300,500);
-@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css); \ No newline at end of file
+@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);
+
+@font-face {
+ font-family: 'Transat Standard';
+ src: url('/fonts/Transat Standard/transat_standard-webfont.eot');
+ src: url('/fonts/Transat Standard/transat_standard-webfont.eot?#iefix') format('embedded-opentype'),
+ url('/fonts/Transat Standard/transat_standard-webfont.woff') format('woff'),
+ url('/fonts/Transat Standard/transat_standard-webfont.ttf') format('truetype'),
+ url('/fonts/Transat Standard/transat_standard-webfont.svg#ywftsvg') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Transat Black';
+ src: url('/fonts/Transat Black/transat_black-webfont.eot');
+ src: url('/fonts/Transat Black/transat_black-webfont.eot?#iefix') format('embedded-opentype'),
+ url('/fonts/Transat Black/transat_black-webfont.woff') format('woff'),
+ url('/fonts/Transat Black/transat_black-webfont.ttf') format('truetype'),
+ url('/fonts/Transat Black/transat_black-webfont.svg#ywftsvg') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Transat Medium';
+ src: url('/fonts/Transat Medium/transat_medium-webfont.eot');
+ src: url('/fonts/Transat Medium/transat_medium-webfont.eot?#iefix') format('embedded-opentype'),
+ url('/fonts/Transat Medium/transat_medium-webfont.woff') format('woff'),
+ url('/fonts/Transat Medium/transat_medium-webfont.ttf') format('truetype'),
+ url('/fonts/Transat Medium/transat_medium-webfont.svg#ywftsvg') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Transat Light';
+ src: url('/fonts/Transat Light/transat_light-webfont.eot');
+ src: url('/fonts/Transat Light/transat_light-webfont.eot?#iefix') format('embedded-opentype'),
+ url('/fonts/Transat Light/transat_light-webfont.woff') format('woff'),
+ url('/fonts/Transat Light/transat_light-webfont.ttf') format('truetype'),
+ url('/fonts/Transat Light/transat_light-webfont.svg#ywftsvg') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
diff --git a/ui/app/css/index.css b/ui/app/css/index.css
index 4871a650f..d6d1f91ac 100644
--- a/ui/app/css/index.css
+++ b/ui/app/css/index.css
@@ -14,11 +14,15 @@ application specific styles
}
html, body {
- /*font-family: 'Open Sans', Arial, sans-serif;*/
- font-family: 'Roboto', 'Noto', sans-serif;
+ font-family: 'Transat Standard', Arial;
color: #4D4D4D;
font-weight: 300;
line-height: 1.4em;
+ background: #F7F7F7;
+}
+
+input:focus, textarea:focus {
+ outline: none;
}
#app-content {
@@ -29,18 +33,18 @@ html, body {
}
button {
+ font-family: 'Transat Black';
outline: none;
cursor: pointer;
- margin: 10px;
- padding: 6px;
+ /*margin: 10px;*/
+ padding: 8px 12px;
border: none;
- border-radius: 3px;
background: #F7861C;
- font-weight: 500;
color: white;
transform-origin: center center;
transition: transform 50ms ease-in;
}
+
button:hover {
transform: scale(1.1);
}
@@ -48,26 +52,6 @@ button:active {
transform: scale(0.95);
}
-button.primary {
- margin: 10px;
- padding: 6px;
- border: none;
- border-radius: 3px;
- background: #F7861C;
- font-weight: 500;
- color: white;
-}
-
-input, textarea {
- width: 300px;
- padding: 6px;
- border-radius: 6px;
- border-style: solid;
- outline: none;
- border: 1px solid #F5A623;
- background: #FAF6F0;
-}
-
a {
text-decoration: none;
color: inherit;
@@ -85,6 +69,16 @@ app
color: #909090;
}
+button.primary {
+ padding: 8px 12px;
+ background: #F7861C;
+ box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36);
+ color: white;
+ font-size: 1.1em;
+ font-family: 'Transat Standard';
+ text-transform: uppercase;
+}
+
button.btn-thin {
border: 1px solid;
border-color: #4D4D4D;
@@ -98,23 +92,25 @@ button.btn-thin {
}
.app-header {
- padding-top: 20px;
+ padding: 6px 8px;
}
.app-header h1 {
- font-size: 2em;
- font-weight: 300;
- height: 42px;
+ font-family: 'Transat Medium';
+ text-transform: uppercase;
+ color: #AEAEAE;
}
h2.page-subtitle {
+ font-family: 'Transat Light';
+ text-transform: uppercase;
+ color: #AEAEAE;
font-size: 1em;
- font-weight: 500;
- height: 24px;
- color: #F3C83E;
+ margin: 12px;
}
.app-primary {
+
}
.app-footer {
@@ -216,33 +212,70 @@ app sections
margin: -2px 8px 0px -8px;
}
-.unlock-screen label {
- color: #F3C83E;
- font-weight: 500;
+.unlock-screen #metamask-mascot-container {
+ margin-top: 24px;
+}
+
+.unlock-screen h1 {
+ margin-top: -28px;
+ margin-bottom: 42px;
}
.unlock-screen input[type=password] {
- width: 60%;
- height: 22px;
- padding: 2px;
- border-radius: 4px;
- border: 2px solid #F3C83E;
- background: #FAF6F0;
+ width: 260px;
+ /*height: 36px;
+ margin-bottom: 24px;
+ padding: 8px;*/
}
-.unlock-screen input[type=password]:focus {
- outline: none;
- border: 3px solid #F3C83E;
+/* Webkit */
+.unlock-screen input::-webkit-input-placeholder {
+ text-align: center;
+ font-size: 1.2em;
+}
+/* Firefox 18- */
+.unlock-screen input:-moz-placeholder {
+ text-align: center;
+ font-size: 1.2em;
+}
+/* Firefox 19+ */
+.unlock-screen input::-moz-placeholder {
+ text-align: center;
+ font-size: 1.2em;
+}
+/* IE */
+.unlock-screen input:-ms-input-placeholder {
+ text-align: center;
+ font-size: 1.2em;
}
+input.large-input, textarea.large-input {
+ /*margin-bottom: 24px;*/
+ padding: 8px;
+}
+
+input.large-input {
+ height: 36px;
+}
+
+
+
/* accounts */
.accounts-section {
- margin: 0 20px;
+ margin: 0 0px;
+}
+
+.accounts-section .horizontal-line {
+ margin: 0px 18px;
}
-.current-domain-panel {
- border: 1px solid #B7B7B7;
+.accounts-list-option {
+ height: 120px;
+}
+
+.accounts-list-option .identicon-wrapper {
+ width: 100px;
}
.unconftx-link {
@@ -289,8 +322,7 @@ app sections
/* accounts screen */
.identity-section {
- border: 2px solid #4D4D4D;
- margin: 0;
+
}
.identity-section .identity-panel {
@@ -298,9 +330,6 @@ app sections
border-bottom: 1px solid #B1B1B1;
cursor: pointer;
}
-.identity-section .identity-panel:hover {
- background: #F9F9F9;
-}
.identity-section .identity-panel.selected {
background: white;
@@ -311,10 +340,15 @@ app sections
border-color: orange;
}
+.identity-section .accounts-list-option:hover,
+.identity-section .accounts-list-option.selected {
+ background:white;
+}
+
/* account detail screen */
.account-detail-section {
- margin: 0 20px;
+
}
/* tx confirm */
@@ -333,157 +367,28 @@ app sections
background: #FAF6F0;
}
+/* Send Screen */
-/*
-react toggle
-*/
-
-/* overrides */
-
-.react-toggle-track-check {
- display: none;
-}
-.react-toggle-track-x {
- display: none;
-}
-
-/* modified original */
-
-.react-toggle {
- display: inline-block;
- position: relative;
- cursor: pointer;
- background-color: transparent;
- border: 0;
- padding: 0;
-
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -khtml-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-
- -webkit-tap-highlight-color: rgba(0,0,0,0);
- -webkit-tap-highlight-color: transparent;
-}
-
-.react-toggle-screenreader-only {
- border: 0;
- clip: rect(0 0 0 0);
- height: 1px;
- margin: -1px;
- overflow: hidden;
- padding: 0;
- position: absolute;
- width: 1px;
-}
-
-.react-toggle--disabled {
- opacity: 0.5;
- -webkit-transition: opacity 0.25s;
- transition: opacity 0.25s;
-}
-
-.react-toggle-track {
- width: 50px;
- height: 24px;
- padding: 0;
- border-radius: 30px;
- background-color: #4D4D4D;
- -webkit-transition: all 0.2s ease;
- -moz-transition: all 0.2s ease;
- transition: all 0.2s ease;
-}
-
-.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
- background-color: #000000;
-}
-
-.react-toggle--checked .react-toggle-track {
- background-color: rgb(255, 174, 41);
-}
-
-.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
- background-color: rgb(243, 151, 0);
-}
+.send-screen {
-.react-toggle-track-check {
- position: absolute;
- width: 14px;
- height: 10px;
- top: 0px;
- bottom: 0px;
- margin-top: auto;
- margin-bottom: auto;
- line-height: 0;
- left: 8px;
- opacity: 0;
- -webkit-transition: opacity 0.25s ease;
- -moz-transition: opacity 0.25s ease;
- transition: opacity 0.25s ease;
}
-.react-toggle--checked .react-toggle-track-check {
- opacity: 1;
- -webkit-transition: opacity 0.25s ease;
- -moz-transition: opacity 0.25s ease;
- transition: opacity 0.25s ease;
-}
-
-.react-toggle-track-x {
- position: absolute;
- width: 10px;
- height: 10px;
- top: 0px;
- bottom: 0px;
- margin-top: auto;
- margin-bottom: auto;
- line-height: 0;
- right: 10px;
- opacity: 1;
- -webkit-transition: opacity 0.25s ease;
- -moz-transition: opacity 0.25s ease;
- transition: opacity 0.25s ease;
+.send-screen section {
+ margin: 8px 16px;
}
-.react-toggle--checked .react-toggle-track-x {
- opacity: 0;
+.send-screen input {
+ width: 100%;
+ font-size: 12px;
+ letter-spacing: 0.1em;
}
-.react-toggle-thumb {
- transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
- position: absolute;
- top: 1px;
- left: 1px;
- width: 22px;
- height: 22px;
- border: 1px solid #4D4D4D;
- border-radius: 50%;
- background-color: #FAFAFA;
-
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
+/* Ether Balance Widget */
- -webkit-transition: all 0.25s ease;
- -moz-transition: all 0.25s ease;
- transition: all 0.25s ease;
+.ether-balance-amount {
+ color: #F7861C;
}
-.react-toggle--checked .react-toggle-thumb {
- left: 27px;
- border-color: #828282;
+.ether-balance-label {
+ color: #ABA9AA;
}
-/*
- .react-toggle--focus .react-toggle-thumb {
- -webkit-box-shadow: 0px 0px 3px 2px #0099E0;
- -moz-box-shadow: 0px 0px 3px 2px #0099E0;
- box-shadow: 0px 0px 2px 3px #0099E0;
- }
-
- .react-toggle:active .react-toggle-thumb {
- -webkit-box-shadow: 0px 0px 5px 5px #0099E0;
- -moz-box-shadow: 0px 0px 5px 5px #0099E0;
- box-shadow: 0px 0px 5px 5px #0099E0;
- }
diff --git a/ui/app/css/lib.css b/ui/app/css/lib.css
index b6b26402b..d9719b1e3 100644
--- a/ui/app/css/lib.css
+++ b/ui/app/css/lib.css
@@ -1,3 +1,13 @@
+/* color */
+
+.color-orange {
+ color: #F7861C;
+}
+
+.color-forest {
+ color: #0A5448;
+}
+
/* lib */
.full-width {
@@ -47,6 +57,10 @@
flex: none;
}
+.flex-basis-auto {
+ flex-basis: auto;
+}
+
.flex-grow {
flex: 1 1 auto;
}
@@ -86,13 +100,16 @@
}
.select-none {
- cursor: default;
+ cursor: inherit;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
+.pointer {
+ cursor: pointer;
+}
.cursor-pointer {
cursor: pointer;
transform-origin: center center;
@@ -105,6 +122,10 @@
transform: scale(0.95);
}
+.cursor-disabled {
+ cursor: not-allowed;
+}
+
.margin-bottom-sml {
margin-bottom: 20px;
}
@@ -121,23 +142,27 @@
font-weight: bold;
}
+.text-transform-uppercase {
+ text-transform: uppercase;
+}
+
.font-small {
font-size: 12px;
}
-/* Send Screen */
-.send-screen {
- margin: 0 20px;
+.font-medium {
+ font-size: 1.2em;
}
-.send-screen section {
- margin: 7px;
- display: flex;
- flex-direction: row;
- justify-content: center;
-}
-.send-screen details {
- width: 100%;
+
+hr.horizontal-line {
+ display: block;
+ height: 1px;
+ border: 0;
+ border-top: 1px solid #ccc;
+ margin: 1em 0;
+ padding: 0;
}
-.send-screen section input {
- width: 100%;
+
+.hover-white:hover {
+ background: white;
}
diff --git a/ui/app/css/transitions.css b/ui/app/css/transitions.css
index e2225a98d..393a944f9 100644
--- a/ui/app/css/transitions.css
+++ b/ui/app/css/transitions.css
@@ -1,48 +1,42 @@
-/* initial positions */
-.app-primary.from-right .main-enter {
- transform: translateX(400px);
+/* universal */
+.app-primary .main-enter {
position: absolute;
width: 100%;
- transition: transform 300ms ease-in-out;
-}
-.app-primary.from-left .main-enter {
- transform: translateX(-400px);
- position: absolute;
- width: 100%;
- transition: transform 300ms ease-in-out;
}
/* center position */
-.app-primary .main-enter.main-enter-active,
-.app-primary .main-leave {
- transform: translateX(0px);
- position: absolute;
- width: 100%;
- transition: transform 300ms ease-in-out;
+.app-primary.from-right .main-enter-active,
+.app-primary.from-left .main-enter-active {
overflow-x: hidden;
+ transform: translateX(0px);
+ transition: transform 300ms ease-in;
}
-/* final positions */
+/* exited positions */
.app-primary.from-left .main-leave-active {
- transform: translateX(400px);
- position: absolute;
- width: 100%;
- transition: transform 300ms ease-in-out;
+ transform: translateX(360px);
+ transition: transform 300ms ease-in;
}
.app-primary.from-right .main-leave-active {
- transform: translateX(-400px);
- position: absolute;
- width: 100%;
- transition: transform 300ms ease-in-out;
+ transform: translateX(-360px);
+ transition: transform 300ms ease-in;
}
/* loader transitions */
.loader-enter, .loader-leave-active {
opacity: 0.0;
- transition: opacity 150 ease-in-out;
+ transition: opacity 150 ease-in;
}
.loader-enter-active, .loader-leave {
opacity: 1.0;
- transition: opacity 150 ease-in-out;
+ transition: opacity 150 ease-in;
+}
+
+/* entering positions */
+.app-primary.from-right .main-enter:not(.main-enter-active) {
+ transform: translateX(360px);
+}
+.app-primary.from-left .main-enter:not(.main-enter-active) {
+ transform: translateX(-360px);
}
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-23 03:49:32 +0800