BTCPrivate
/
copay
mirror of https://github.com/BTCPrivate/copay.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

header new style

This commit is contained in:
Bechi 2014-04-28 17:23:01 -03:00
parent 383bc4e136
commit 7bde3815ca
3 changed files with 48 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
css/main.css
View File

@ -72,10 +72,15 @@ html, body {height: 100%;}
} }
.header-content { .header-content {
padding: 1.5rem; padding: 2rem;
overflow: hidden; overflow: hidden;
} }
.header a.button.small-icon {
padding: 0.1rem 0.3rem;
font-size: 0.9rem;
}
.top-bar { .top-bar {
height: auto; height: auto;
width: 100%; width: 100%;
@ -90,19 +95,6 @@ html, body {height: 100%;}
margin: 0; margin: 0;
} }
.connection-info {
margin-bottom: 10px;
}
.balance-info {
font-size: 14px;
}
/*.panel:hover {
background: #efefef;
color: #111;
}*/
.addresses .panel { .addresses .panel {
font-size: 0.9rem; font-size: 0.9rem;
} }
@ -241,6 +233,7 @@ hr { margin: 2.25rem 0;}
.size-60 { font-size: 60px; } .size-60 { font-size: 60px; }
.size-72 { font-size: 72px; } .size-72 { font-size: 72px; }
.m10t {margin-top: 10px;} .m10t {margin-top: 10px;}
.p10t {padding-top: 10px;}
.p0r {padding-right: 0;} .p0r {padding-right: 0;}
.p70r {padding-right: 70px;} .p70r {padding-right: 70px;}
.p70l {padding-left: 70px;} .p70l {padding-left: 70px;}

34
css/tpl-default.css
View File

@ -7,7 +7,8 @@ body {
} }
.top-bar-section li:not(.has-form) a:not(.button) { .top-bar-section li:not(.has-form) a:not(.button) {
background: #FAE448; background: #1ABC9C;
color: #fff;
} }
.top-bar-section li.active:not(.has-form) a:not(.button) { .top-bar-section li.active:not(.has-form) a:not(.button) {
@ -16,7 +17,7 @@ body {
} }
.top-bar-section li.active:not(.has-form) a:not(.button):hover, .top-bar-section li:not(.has-form) a:not(.button):hover { .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; background: #16A085;
color: white; color: white;
} }
@ -25,11 +26,36 @@ body {
} }
.header { .header {
background: #111; background: #2C3E50;
color: white; color: white;
} }
.header h1, h5 { .header h1, h5, p {
color: #93A9BD;
font-weight: 100;
margin-bottom: 0;
}
.header button, .button {
margin-bottom: 0;
}
.header h6 {
color: #fff;
font-weight: 100;
}
.header .line-dashed-v {
border-right: 1px dashed #5A6B7D;
}
.header a.button.small-icon {
background: white;
color: #2C3E50;
}
.header a.button.small-icon:hover {
background: #16A085;
color: #fff; color: #fff;
} }

20
index.html
View File

@ -14,20 +14,22 @@
<div data-ng-init="init()" data-ng-controller="HeaderController"> <div data-ng-init="init()" data-ng-controller="HeaderController">
<div class="header"> <div class="header">
<div class="header-content"> <div class="header-content">
<div class="left"> <div class="left large-3 columns">
<a href="#" class="logo" title="copay"></a> <a href="#" class="logo" title="copay"></a>
</div> </div>
<div class="right text-right" ng-show="$root.wallet"> <div class="right text-center large-9 columns m10t" ng-show="$root.wallet">
<div class="connection-info"> <h6 class="large-6 columns line-dashed-v">
<span ng-if="!$root.wallet.name && $root.wallet.id">{{$root.wallet.id}}</span> <span ng-if="!$root.wallet.name && $root.wallet.id">{{$root.wallet.id}}</span>
<span ng-if="$root.wallet.name">Wallet: {{$root.wallet.name}} &lt;{{$root.wallet.id}}&gt;</span> <span ng-if="$root.wallet.name">Wallet: {{$root.wallet.name}} &lt;{{$root.wallet.id}}&gt;</span>
({{$root.wallet.requiredCopayers}}-of-{{$root.wallet.totalCopayers}}) ({{$root.wallet.requiredCopayers}}-of-{{$root.wallet.totalCopayers}})
<a href="#" ng-click="signout()"><i class="fi-power"></i></a> <a class="button radius small-icon" href="#" ng-click="signout()"><i class="fi-power"></i></a>
</div> </h6>
<div class="balance-info"> <p class="large-3 columns line-dashed-v">
Balance: {{totalBalance || 0}} <i class="fi-bitcoin"></i><br> Balance: {{totalBalance || 0}} <i class="fi-bitcoin"></i><br>
Available to Spend: {{availableBalance || 0}} <i class="fi-bitcoin"></i> </p>
</div> <p class="large-3 columns">
Available to Spend: {{availableBalance || 0}} <i class="fi-bitcoin"></i>
</p>
</div> </div>
</div> </div>