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.css47
-rw-r--r--ui/app/css/lib.css31
-rw-r--r--ui/app/css/transitions.css48
4 files changed, 127 insertions, 45 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..9dbfb6518 100644
--- a/ui/app/css/index.css
+++ b/ui/app/css/index.css
@@ -14,8 +14,7 @@ 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;
@@ -29,18 +28,18 @@ html, body {
}
button {
+ font-family: 'Transat Black';
outline: none;
cursor: pointer;
margin: 10px;
- padding: 6px;
+ 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);
}
@@ -98,23 +97,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 {
+ background: #F7F7F7;
}
.app-footer {
@@ -238,11 +239,24 @@ app sections
/* 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:hover {
+ background: pink;
+ transform: scale(1.1);
+}
+
+.accounts-list-option .identicon-wrapper {
+ width: 100px;
}
.unconftx-link {
@@ -289,8 +303,7 @@ app sections
/* accounts screen */
.identity-section {
- border: 2px solid #4D4D4D;
- margin: 0;
+
}
.identity-section .identity-panel {
diff --git a/ui/app/css/lib.css b/ui/app/css/lib.css
index b6b26402b..14ef272ad 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: #08525D;
+}
+
/* lib */
.full-width {
@@ -47,6 +57,10 @@
flex: none;
}
+.flex-basis-auto {
+ flex-basis: auto;
+}
+
.flex-grow {
flex: 1 1 auto;
}
@@ -105,6 +119,10 @@
transform: scale(0.95);
}
+.cursor-disabled {
+ cursor: not-allowed;
+}
+
.margin-bottom-sml {
margin-bottom: 20px;
}
@@ -125,6 +143,10 @@
font-size: 12px;
}
+.font-medium {
+ font-size: 1.2em;
+}
+
/* Send Screen */
.send-screen {
margin: 0 20px;
@@ -141,3 +163,12 @@
.send-screen section input {
width: 100%;
}
+
+hr.horizontal-line {
+ display: block;
+ height: 1px;
+ border: 0;
+ border-top: 1px solid #ccc;
+ margin: 1em 0;
+ padding: 0;
+} \ No newline at end of file
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 (git 2.34.1) at 2024-10-20 13:45:07 +0800