CSS Style themes support in Copay
This commit is contained in:
Gustavo Cortez
parent
7849304bd7
commit
08e4eaf5e0
9 changed files with 246 additions and 137 deletions
|
|
@ -36,6 +36,7 @@ var config = {
|
|||
port: 3001
|
||||
},
|
||||
verbose: 1,
|
||||
theme: ['default', 'clean']
|
||||
};
|
||||
|
||||
var log = function () {
|
||||
|
|
|
|||
110
css/main.css
110
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;}
|
||||
|
|
|
|||
3
css/tpl-clean.css
Normal file
3
css/tpl-clean.css
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
.logo {
|
||||
background: transparent url('../img/logo.png');
|
||||
}
|
||||
105
css/tpl-default.css
Normal file
105
css/tpl-default.css
Normal file
|
|
@ -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;}
|
||||
|
||||
BIN
img/logo-negative.png
Normal file
BIN
img/logo-negative.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3 KiB |
BIN
img/logo.png
Normal file
BIN
img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
35
index.html
35
index.html
|
|
@ -10,24 +10,24 @@
|
|||
<link rel="stylesheet" href="css/main.css">
|
||||
</head>
|
||||
<body ng-cloak class="ng-cloak">
|
||||
<div id="wrap">
|
||||
<div data-ng-init="init()" data-ng-controller="HeaderController">
|
||||
<div class="header">
|
||||
<div class="header-content">
|
||||
<figure class="left">
|
||||
<a href="#"><img src="./img/logo-negative.svg" alt="Copay" width="130" /></a>
|
||||
</figure>
|
||||
<div class="text-right" ng-show="$root.wallet">
|
||||
<div>
|
||||
<h5 >
|
||||
<div class="left">
|
||||
<a href="#" class="logo" title="copay"></a>
|
||||
</div>
|
||||
<div class="right text-right" ng-show="$root.wallet">
|
||||
<div class="connection-info">
|
||||
<span ng-if="!$root.wallet.name && $root.wallet.id">Wallet ID: {{$root.wallet.id}}</span>
|
||||
<span ng-if="$root.wallet.name">Wallet: {{$root.wallet.name}} <{{$root.wallet.id}}></span>
|
||||
[{{$root.wallet.requiredCopayers}}-{{$root.wallet.totalCopayers}}]<br>
|
||||
</h5>
|
||||
[{{$root.wallet.requiredCopayers}}/{{$root.wallet.totalCopayers}}]
|
||||
<a href="#" ng-click="signout()"><i class="fi-power"></i></a>
|
||||
</div>
|
||||
<p>
|
||||
<div class="balance-info">
|
||||
Balance: {{totalBalance || 0}} <i class="fi-bitcoin"></i><br>
|
||||
Available to Spend: {{availableBalance || 0}} <i class="fi-bitcoin"></i>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -44,9 +44,6 @@
|
|||
<li data-ng-repeat="item in menu" ui-route="/{{item.link}}" class="large-2 text-center" data-ng-class="{active: isActive(item)}">
|
||||
<a href="{{item.link}}"> <i class="{{item.icon}}"></i> {{item.title}}</a>
|
||||
</li>
|
||||
<li class="large-2 text-center">
|
||||
<a href="#" ng-click="signout()"> <i class="fi-power"></i> Signout</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</nav>
|
||||
|
|
@ -90,12 +87,19 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div id="main" class="row">
|
||||
<div class="large-12 columns" ng-view></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" class="row" data-ng-controller="FooterController">
|
||||
<div class="large-12 columns text-center">
|
||||
<link rel="stylesheet" ng-href="{{theme}}">
|
||||
<a class="size-12" ng-if="themes.length > 1" ng-click="change_theme(th)" ng-repeat="th in themes">{{th}} {{$last ? '' : '· '}}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Templates -->
|
||||
<script type="text/ng-template" id="signin.html">
|
||||
|
|
@ -524,6 +528,7 @@
|
|||
<script src="js/services/controllerUtils.js"></script>
|
||||
|
||||
<script src="js/controllers/header.js"></script>
|
||||
<script src="js/controllers/footer.js"></script>
|
||||
<script src="js/controllers/addresses.js"></script>
|
||||
<script src="js/controllers/transactions.js"></script>
|
||||
<script src="js/controllers/send.js"></script>
|
||||
|
|
|
|||
|
|
@ -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', []);
|
||||
|
|
|
|||
19
js/controllers/footer.js
Normal file
19
js/controllers/footer.js
Normal file
|
|
@ -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';
|
||||
};
|
||||
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue