diff --git a/config.template.js b/config.template.js index b4565387b..683f6bee3 100644 --- a/config.template.js +++ b/config.template.js @@ -36,6 +36,7 @@ var config = { port: 3001 }, verbose: 1, + theme: ['default', 'clean'] }; var log = function () { diff --git a/css/main.css b/css/main.css index 0911eefe5..93b5be4e2 100644 --- a/css/main.css +++ b/css/main.css @@ -25,58 +25,63 @@ * { font-family: 'Ubuntu', Helvetica, sans-serif !important; + margin:0; + padding:0; } -body { - background: #F5F5F5; +html, body {height: 100%;} + +#wrap {min-height: 100%;} + +#main {overflow:auto; + padding-bottom: 20px;} /* must be same height as the footer */ + +#footer {position: relative; + margin-top: -20px; /* negative value of footer height */ + height: 20px; + clear:both; +} + +.logo { + display: block; + width: 130px; + height: 51px; } .top-bar-section li:not(.has-form) a:not(.button) { line-height: 60px; - background: #FAE448; } .top-bar-section li.active:not(.has-form) a:not(.button) { line-height: 60px; - background: #f5f5f5; - color: #111; font-weight: 700; } -.top-bar-section li.active:not(.has-form) a:not(.button):hover, .top-bar-section li:not(.has-form) a:not(.button):hover { - background: #111; - color: white; -} - .top-bar-section ul li>a { - color: #111; text-transform: uppercase; font-weight: 100; font-size: 0.9rem; } +.top-bar-section ul li { + width: 20%; +} + .header { - background: #111; - color: white; margin-bottom: 30px; } .header-content { - padding: 1.5rem 3rem 1.5rem 0; + padding: 1.5rem; overflow: hidden; } -.header h1, h5 { - color: #fff; -} - .top-bar { height: auto; + width: 100%; } .panel { - color: #333; - background: #FFFFFF; padding: 0.7rem 1rem; border:0; } @@ -85,6 +90,14 @@ body { margin: 0; } +.connection-info { + margin-bottom: 10px; +} + +.balance-info { + font-size: 14px; +} + /*.panel:hover { background: #efefef; color: #111; @@ -95,12 +108,10 @@ body { } .transactions .panel { - background: #f5f5f5; border: 1px solid #eee; } .transactions .panel.pending { - background-color: #fff; padding: 1rem; } @@ -117,10 +128,6 @@ body { font-size: 12px; } -.btransactions .panel { - background: #fff; -} - .btransactions .txheader { font-size: 12px; margin-bottom: 10px; @@ -140,10 +147,6 @@ body { border: none; } -.addresses .panel:hover { - background: #efefef; -} - .box-backup { margin: 2rem 0; padding: 2rem 1rem; @@ -151,7 +154,6 @@ body { a.box-backup { display: block; - color: #111; } .box-backup i { @@ -184,16 +186,6 @@ span.panel-res { border-radius: 1rem; } -.panel-sign { - color: #111; - background: #FAE448; -} - -.panel-ignore { - color: #fff; - background: #111; -} - .pending button { margin: 0; } @@ -203,28 +195,11 @@ span.panel-res { margin: 0.5rem 0 1rem; } -.share-wallet.panel { - background-color: #111; - color: #FBE500; -} - -.alert-box.warning, .alert-box.error { - background-color: #C0392A; - border-color: #C0392A; - color: #fff; -} - -.text-warning { - color:#C0392A; -} - small.is-valid { - color: #04B404; font-weight: bold; } small.has-error { - color: #f04124; font-weight: bold; } @@ -235,24 +210,23 @@ small.has-error { .show_menu { display: block; } + .top-bar-section ul li { + width: 100%; + } +} + +@media (max-width: 750px) { + .top-bar-section ul li>a { + font-size: 70%; + } } -tr { background: none !important;} -table tr th, table tr td { padding: 0.5625rem 0rem; } hr { margin: 2.25rem 0;} -table { margin-bottom: 0.25rem;} - -button.primary { background-color: #111; } -button.secondary { background-color: #FAE448 !important; } - -button.primary:hover { background-color: #333;} -button.secondary:hover { background-color: #FFDF00 !important;} [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; } .dn {display: none;} -.text-gray { color: #999 !important;} .pr {position: relative;} .m0 {margin: 0;} .db {display: block;} diff --git a/css/tpl-clean.css b/css/tpl-clean.css new file mode 100644 index 000000000..7dd7f76d6 --- /dev/null +++ b/css/tpl-clean.css @@ -0,0 +1,3 @@ +.logo { + background: transparent url('../img/logo.png'); +} diff --git a/css/tpl-default.css b/css/tpl-default.css new file mode 100644 index 000000000..cea2d8238 --- /dev/null +++ b/css/tpl-default.css @@ -0,0 +1,105 @@ +body { + background: #F5F5F5; +} + +.logo { + background: transparent url('../img/logo-negative.png'); +} + +.top-bar-section li:not(.has-form) a:not(.button) { + background: #FAE448; +} + +.top-bar-section li.active:not(.has-form) a:not(.button) { + background: #f5f5f5; + color: #111; +} + +.top-bar-section li.active:not(.has-form) a:not(.button):hover, .top-bar-section li:not(.has-form) a:not(.button):hover { + background: #111; + color: white; +} + +.top-bar-section ul li>a { + color: #111; +} + +.header { + background: #111; + color: white; +} + +.header h1, h5 { + color: #fff; +} + +.panel { + color: #333; + background: #FFFFFF; +} + +.transactions .panel { + background: #f5f5f5; +} + +.transactions .panel.pending { + background-color: #fff; +} + +.pending .txbottom { + border-top: 1px solid #eee; +} + +.btransactions .panel { + background: #fff; +} + +.addresses .panel:hover { + background: #efefef; +} + +a.box-backup { + color: #111; +} + +.panel-sign { + color: #111; + background: #FAE448; +} + +.panel-ignore { + color: #fff; + background: #111; +} + +.share-wallet.panel { + background-color: #111; + color: #FBE500; +} + +.alert-box.warning, .alert-box.error { + background-color: #C0392A; + border-color: #C0392A; + color: #fff; +} + +.text-warning { + color:#C0392A; +} + +small.is-valid { + color: #04B404; +} + +small.has-error { + color: #f04124; +} + +button.primary { background-color: #111; } +button.secondary { background-color: #FAE448 !important; } + +button.primary:hover { background-color: #333;} +button.secondary:hover { background-color: #FFDF00 !important;} + +.text-gray { color: #999;} + diff --git a/img/logo-negative.png b/img/logo-negative.png new file mode 100644 index 000000000..6f5733c29 Binary files /dev/null and b/img/logo-negative.png differ diff --git a/img/logo.png b/img/logo.png new file mode 100644 index 000000000..a4531340d Binary files /dev/null and b/img/logo.png differ diff --git a/index.html b/index.html index 1ab1d737c..c416dc7d2 100644 --- a/index.html +++ b/index.html @@ -10,91 +10,95 @@ -
-
-
-
- Copay -
-
-
-
- Wallet ID: {{$root.wallet.id}} - Wallet: {{$root.wallet.name}} <{{$root.wallet.id}}> - [{{$root.wallet.requiredCopayers}}-{{$root.wallet.totalCopayers}}]
-
+
+
+
+
+
+ +
+
+
+ Wallet ID: {{$root.wallet.id}} + Wallet: {{$root.wallet.name}} <{{$root.wallet.id}}> + [{{$root.wallet.requiredCopayers}}/{{$root.wallet.totalCopayers}}] + +
+
+ Balance: {{totalBalance || 0}}
+ Available to Spend: {{availableBalance || 0}} +
-

- Balance: {{totalBalance || 0}}
- Available to Spend: {{availableBalance || 0}} -

-
- - + +
+ +
+ + +
+ +
+
+
+ {{$root.flashMessage.message}} + × +
+
+
+ +
+
+ + +
+ +
+ +
+ Note: Your wallet is not complete yet. + + {{$root.wallet.publicKeyRing.totalCopayers - $root.wallet.publicKeyRing.registeredCopayers() }} keys are + + + One key is + + missing. +
+ +
+ Share this secret with your other copayers for them to join your wallet
+
+
+ {{$root.wallet.getMyCopayerId()}} +
+
+
+
-
-
-
- {{$root.flashMessage.message}} - × -
+
+
-
-
- - -
- -
- -
- Note: Your wallet is not complete yet. - - {{$root.wallet.publicKeyRing.totalCopayers - $root.wallet.publicKeyRing.registeredCopayers() }} keys are - - - One key is - - missing. -
- -
- Share this secret with your other copayers for them to join your wallet
-
-
- {{$root.wallet.getMyCopayerId()}} -
-
+ - -
-
@@ -524,6 +528,7 @@ + diff --git a/js/app.js b/js/app.js index bcfce8f2c..54891ef3f 100644 --- a/js/app.js +++ b/js/app.js @@ -5,6 +5,7 @@ var copayApp = window.copayApp = angular.module('copay',[ 'mm.foundation', 'monospaced.qrcode', 'copay.header', + 'copay.footer', 'copay.addresses', 'copay.transactions', 'copay.send', @@ -19,6 +20,7 @@ var copayApp = window.copayApp = angular.module('copay',[ ]); angular.module('copay.header', []); +angular.module('copay.footer', []); angular.module('copay.addresses', []); angular.module('copay.transactions', []); angular.module('copay.send', []); diff --git a/js/controllers/footer.js b/js/controllers/footer.js new file mode 100644 index 000000000..b07562713 --- /dev/null +++ b/js/controllers/footer.js @@ -0,0 +1,19 @@ +'use strict'; + +angular.module('copay.footer').controller('FooterController', + function($scope) { + + if (config.themes && Array.isArray(config.themes) && config.themes[0]) { + $scope.themes = config.themes; + } + else { + $scope.themes = ['default']; + } + + $scope.theme = 'css/tpl-' + $scope.themes[0] + '.css'; + + $scope.change_theme = function(name) { + $scope.theme = 'css/tpl-' + name + '.css'; + }; + + });