Initial styling for the cloud, added a few images
Signed-off-by: Jeremy Perry <jeremy.perry at redhat.com>
---
src/app/views/cloud/instance/index.rhtml | 2 +-
src/app/views/layouts/cloud/cloud.rhtml | 9 +-
src/public/images/mystery_cloud2.png | Bin 0 -> 1984 bytes
src/public/images/tab_bg.png | Bin 0 -> 174 bytes
src/public/stylesheets/cloud/layout.css | 164 +++++++++++++++++++++---------
5 files changed, 124 insertions(+), 51 deletions(-)
create mode 100644 src/public/images/mystery_cloud2.png
create mode 100644 src/public/images/tab_bg.png
diff --git a/src/app/views/cloud/instance/index.rhtml
b/src/app/views/cloud/instance/index.rhtml
index 218bd8c..757d67c 100644
--- a/src/app/views/cloud/instance/index.rhtml
+++ b/src/app/views/cloud/instance/index.rhtml
@@ -1,4 +1,4 @@
-<div id="toolbar_nav">
+<div id="toolbar">
<!-- TODO: Make each li a submit button with same styling as current li.
Handlng of this will be implemented in InstanceController::handle_form
-->
diff --git a/src/app/views/layouts/cloud/cloud.rhtml
b/src/app/views/layouts/cloud/cloud.rhtml
index b891bf2..708a2c3 100644
--- a/src/app/views/layouts/cloud/cloud.rhtml
+++ b/src/app/views/layouts/cloud/cloud.rhtml
@@ -12,7 +12,9 @@
</head>
<body>
+ <div id="wrapper">
<div id="head">
+ <h1><a href="#">The name of our project goes
here</a></h1>
<!-- Header stuff! -->
<div id="login-box">
Hi, <%= @user %>
@@ -21,8 +23,9 @@
{:controller => 'help', :action => @help_section,
:anchor => @anchor},
:id=>"help-link", :popup => true, :title =>
"Help" %>
</div>
- <div id="nav">
- <ul class="toolbar">
+ </div>
+ <div id="navcontainer">
+ <ul class="navlist">
<li>
<% link_to_unless(controller.controller_name ==
'dashboard', "Dashboard", { :controller =>
'cloud/dashboard' }) do |name|
@@ -47,9 +50,9 @@
</li>-->
</ul>
</div>
- </div>
<div id="content">
<%= yield %>
</div>
+ </div>
</body>
</html>
diff --git a/src/public/images/mystery_cloud2.png
b/src/public/images/mystery_cloud2.png
new file mode 100644
index
0000000000000000000000000000000000000000..4b4db8233828264d1d3c23ec1520c5a13f9b1e45
GIT binary patch
literal 1984
zcmV;x2S50UP)<h;3K|Lk000e1NJLTq002V(001Wl1^@s6RIl|v0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU(Vo5|nRCwClTH8((TM*sg2;Ob*77?K_
zK*GhGA!^i+sDb!kLL!g69ryzA3xqG=_yurYh{PC2jYgx9!AMj<K@<scIRhBHM#npf
zz^S!!YErYO2WG};l(Unao=f+1_1dedR at I)A`T2SEtH<Qz<dJ93o*jAp`t={*zkj#*
zbJ&)ho!zlz%a*>KJ9qli)6;`)+L7|Bz<B at
uz1`c}dtzv4sCH&%#!5|1RhTI$DN2HY
zIX5?_W at l%WZQH)Gva-_v=6?gmojZ3LdU|?Jtz5ZMtyr-_c|0C{G{L|C2ms^9j~{yC
z{kCn}{6~)-t=qV9V_?~W0XAH at a^-w581w>&w6ru0L^Lp%82|v27^DID_U#+a4VIUe
zpDZaUX-SrSo}~if)vH%tpU>A$4`;1jy;=hy!C*Hr2Ux*?00 at dH8aM*P^85YGI44<v
zED0DNK76n*UcA^&t8T4Xvqn)M3;}@$i{>KC4gi7)HsKmR;<{V6ZZ+e&;^N|#WdR0U
zgASSzt5&VjV3>?xAWS#Gz(X at 2@_asabaXUt*svi$naBTIgK_WPy#`{27mQ#azzSvr
z1K`98{tTe-gG<mb at f`z_pP&Etx^?RU>({Rj<mBY|f2#lr_h at
Zx{RfQTDJgC;VX?us
z%Ity|f`E#N*O>U6em}Tt*DfCg*~VD2PRw9DefqR|WMt$x2_rA2NoNQn%z}b~3p9QB
zytA{jiF8E0WCa7kD=M=Fzvfk!_mJl at ATp>*AUNwVD2ERpK3Q5?+Vaz2JbLt~_U_%g
zr#^l9WXnJ&X)47L23BJK{{4;J-Q7)ejRg?cJ!Hn<IKbCRTg<p%GD(Ut21RNS282N>
zEG%p}cI;SPLSVdn`O<ss+O_7lZ{K=l1dpZ^<%6;DtR-Z?<nv)Leuvnkwr}4K0M**H
zYeT<D>{DO9e1TL~q)Q_1Etw=ik*@&=gE2ilttu)i>K0;%BN$)<rK~1s0z3=@5epcS
z)=nVuD(2?qs-mJI4c1}<z!1wqnZ*P|>Jhes<B9}>J`2{>)#XL2aU#F~5ZA9?Z-$Sv
zFp@#fjOu0$AqSt2BhCj9IPTlGPi@`0HLhU%?%g|e`}XY+$kGP$8Kh8Sb^r`8jcS|5
zg9i^bINc-FbPWaqQ|bZ+MY2Rrb_qVm%o+?<US3|@KwxBKWaw)-CdgRjl#+Q7*cM(`
z3g~|>sxt^V>(Zr5=NSkNdXf<`_&JFq^R<~R0LI|pAPOzDY15|Ac~71^Q4b$JRBztA
z(eGh29-Oj(wt+`hR+c_Dnsi?X6kf2;pFi8Ek(|<P=ojzbzhD3L>sOmufFoCxOmj2m
zJFQGK0mbKmwpXuSRUbcogbq<{ZEcX$n!+TQ^n~G~qoWW~VZV`?nHd%+r43F~0wO`7
zd)rZ&0ao<)_n%+ at
xNhJd;S3S4KyzXV3<A|}-n^*+0XWDad_M*Z*HSu<_)P`^GZw+d
zwlf&)wozloz`#H)-Ncd^W1%RW=;V|Ou)ze}hh0);9h`^Hyk2jZv2de!?QvoWEkrY_
zXh$%{#>S4zz5>Sxnah86N at Jw{kSyd3VB5B;uC7)jr^Ad51OgEnBc6NnV$ed^XV0E(
zN5Y5zV`^&ZhzyjH;>iHQ2 at nZ723!a3QdL!@sGd+%Y(;2|$B!R}X`FcPE#n5U#yWH6
zO#6!$FG7H%f-W*!nE5-|(<#$15S5jcI)IvkY9d9ME=;>5x)4$sLsXupftaZSC|<}q
zgX2Uz)nuZBfk4Gcbwh+2otT(F3jkd*9b2S3#cQJp2&Y=OOjlP|{h>pL8d7D^m54tk
zI%N&9dGqE7w}4BWJ9kb8O^81ZvQEl3)@h0{7KslYJU9VTc$~`PrDzh%W-mmT9AL_g
z8#ls0SWJS)dQWBsF9?`P`pQC!!h at n^A>Vcz49w at xpDUuO1_lHALY4t$y8jvbOonh4
zMX$y~bwb~-1OtO2x*8uJ*Q*3WC527(n+)5`_<@NXJ?$pgsiO2+&3?QTLpF3UckI}q
z`x<124wxnr+*}~sD-<&bj0=;Klhpu%JJD`u6B$IQtX6yW><N9>)6;`if~)b%Y%glp
z!58`Y`9AWSARFg)CNVQgX=!Pgp}TkQj=301rtZ;TAc&Gdr{S|~pxcIU?GVi^WkKc^
z2xjXc<d_Ez9B8mCt4}shmSSZvdwYAsfWZ5uWG5y%`(bTAYypt$)%&5cf^<`TqFhHy
z4q78SI~!3Q9XFj?rM_ at 0X5s$OHO0lne?{~_kzy`izTCdh-vp9r47c~Whry{;wiDdC
zKRkdpp=xSs$|8Da*slaiGH$r#F0xMGHlu7cn)@<t#48*rrTd|`92<#QSy>%2fVuK7
zng3SXY}~TYVx8fpn=&&gUN%PEcm_Mjh#;M4Iqi<SHJp^D8#+U7P43;hw~_xA<p>5+
zEmZ07 at Nli{AuRV{Zd{YTYLR;=QU8)aCpBUhJ<%QW-yMw1%*;M)NXzg46<`2a|Dl%-
SVlR;Z0000<MNUMnLSTZOu9xco
literal 0
HcmV?d00001
diff --git a/src/public/images/tab_bg.png b/src/public/images/tab_bg.png
new file mode 100644
index
0000000000000000000000000000000000000000..1385ccc0303c5a3819822b3140181c456310ac25
GIT binary patch
literal 174
zcmeAS at
N?(olHy`uVBq!ia0vp^Ahs3<6Od&66MF|pNtU=qlmzFem6RtIr7}3C<R_&n
zc;+Uirv{}arc at T5Otk?j3h;Ds45_$vX0jn4g8~P$=EMK<OADR;Hk4*?Y>Hdwz#(D$
zHg03j)ZnU|RqjQ5;vNcAd3R at 8F!b%roz#2kV%FPZ1=HWXePO*qB<>fR{A1k%47=?4
VI-QIdgn?!=c)I$ztaD0e0s!hTJX8Px
literal 0
HcmV?d00001
diff --git a/src/public/stylesheets/cloud/layout.css
b/src/public/stylesheets/cloud/layout.css
index 60b5c91..d40b4ab 100644
--- a/src/public/stylesheets/cloud/layout.css
+++ b/src/public/stylesheets/cloud/layout.css
@@ -1,47 +1,90 @@
/* ------ General Layout ------ */
-.toolbar {text-align:left;}
+html {min-width:640px;}
-.current, .toolbar a:hover {
- border-bottom: 5px solid #5599B8;
+#head h1 a {
+ background:transparent url(/images/mystery_cloud2.png) no-repeat scroll 20px
50%;
+ /*
+ TODO: change this back to a real logo when we have one.
+ */
+ display:block;
+ height:59px;
+ overflow:hidden;
+ text-decoration:none;
+ text-indent:-9999px;
+ width:87px;
}
-.toolbar a {
- text-decoration: none;
+#login-box {
+ display:block;
+ line-height:3.75ex;
+ position:absolute;
+ right:4ex;
+ text-align:right;
+ top:12px;
+}
+
+#login-box a {
+ color: #337ACC;
}
-#nav {height:1em;padding-top:1ex;}
+#navcontainer {
+ height:40px;
+}
-#nav a {display: inline-block;}
+#navcontainer ul {
+ padding-left: 0;
+ margin-left: 0;
+ background-color: #fff;
+ color: #afb2bd;
+ float: left;
+ width: 100%;
+}
-#head {height:50px;}
+#navcontainer ul li { display: inline; }
-#login-box {
- text-align:right;
- /*
- TODO: put this back in with a real logo when we have one.
- background: url('../../images/logo_cumulus.png') left top
no-repeat;
- */
+#navcontainer ul li a {
+ padding: 12px 20px;
+ border-top: solid 2px transparent;
+ background: #fff;
+ color: #afb2bd;
+ font-weight: bold;
+ text-decoration: none;
+ text-transform: uppercase;
+ float: left;
}
-#content {margin-left:18px;}
+#navcontainer ul li a:hover {
+ background: #fff;
+ color: #989ba7;
+}
+
+#navcontainer ul li a.current {
+ border-top: solid 2px #337acc;
+ background: #e0eeff url(/images/tab_bg.png) repeat-x;
+ color: #404552;
+}
+
+#content {margin-left:0;}
#content table{width:100%;}
-#content table tr.odd {background:#eef2f2;}
+/* #content table tr.odd {background:#eef2f2;} */
-#content table tr:hover {background: #729FCF; color: #FFFFFF;}
+#content table tr:hover {background: #fdfef1;}
#content table th, #content table td {
- border:1px solid #AAAAAA;
+ border:1px solid #E1E1E3;
+ border-right: 0;
+ border-left: 0;
padding:0;
text-align:left;
}
-#content table th {background-color: #F0F0F0;}
+#content table th {background: none;border-top: none;}
#content table div {
- padding: 0.4ex;
+ padding: 0.5ex;
}
#content table th a {
@@ -49,31 +92,35 @@
text-decoration: none;
}
+#content table th a:hover {
+ text-decoration: underline;
+}
+
.sortup {
- background: #F0F0F0 url('../../images/Sort_up_11.png') top center
no-repeat !important;
+ background: transparent url('/images/Sort_up_11.png') top center
no-repeat !important;
}
.sortdown {
- background: #F0F0F0 url('../../images/Sort_down_11.png') top center
no-repeat !important;
+ background: transparent url('/images/Sort_down_11.png') top center
no-repeat !important;
}
-.sortable:hover {background-color: #DDDDDD !important;}
+.sortable:hover {/* background-color: #DDDDDD !important; */}
-.selected {background: #337ACC !important; color: #FFFFFF;}
+.selected {background: #fbf0a7 !important;}
.center {text-align:center;}
.pagination {padding-top: 1ex;}
-#list-view {}
+#list-view {margin-bottom:2em;}
+
#detail-view {
- border-top: 3px solid #AAAAAA;
- margin-top: 2ex;
+ border-top: 2px solid #CECECE;
}
#graph {
- border: 1px solid #AAAAAA;
+ border: 1px solid #EFEFEF;
margin-bottom: 1.5ex;
height: 15ex;
}
@@ -84,18 +131,34 @@
border: 0;
color: #337ACC;
cursor: pointer;
+ margin-right:12px;
+ font-size: 1em;
+ text-decoration: underline;
+}
+
+input#submit_for_list {
+ margin:12px 16px 0 0;
+ padding:0;
}
#detail_header {
- background-color: #F0F0F0;
- height: 10ex;
- margin-bottom: 1.5ex;
+ background-color: #EFEFEF;
+ height: 5em;
+ margin-bottom: 1em;
+}
+
+#detail_header h3 {
+ color:#666666;
+ margin: 8px 12px 12px 16px;
+ display:inline-block;
+ font-size: 1.2em;
}
+
/* ----- Backgrounds for states ----- */
.state-container {
margin-left:5px;
- text-indent:10px;
+ text-indent:12px;
}
.task-canceled {background:url(../../images/icon-canceled-11px.png) left center
no-repeat;}
@@ -115,52 +178,59 @@
.instance-creating {background:url(../../images/icon_startup_11px.png) left
center no-repeat;}
-/* ----- Toolbar Navigation -------- */
-#toolbar_nav {
- background: #F0F0F0;
+/* ----- Actions Toolbar -------- */
+#toolbar {
+ background: #e3eaf2;
+ border-top: 1px solid #d1dfee;
+ border-bottom: 1px solid #d1d7de;
+ margin-bottom: 1em;
}
-#toolbar_nav img {
+#toolbar img {
margin: 0;
}
-#toolbar_nav ul{
+#toolbar ul{
list-style: none;
+ margin:0;
+ padding:0;
}
-#toolbar_nav li {
+#toolbar li {
display: inline-block;
position: relative;
color: #666666;
- padding: 0 1ex;
+ padding: 8px 16px;
}
-#toolbar_nav li:hover {
+
+#toolbar li:hover {
background: #337ACC;
color: #FFFFFF;
cursor: pointer;
}
-#toolbar_nav li.current { /* This is not really needed right now, but will be
useful when we add filters. */
+#toolbar li.current { /* This is not really needed right now, but will be
useful when we add filters. */
background: #4B95B8;
}
-#toolbar_nav li ul {
+#toolbar li ul {
display: none;
position: absolute;
top: 1em;
left: 0;
- background: #F0F0F0;
+ background: #bec7e0; /* #F0F0F0; */
+ padding: 4px;
}
-#toolbar_nav li ul li {
+#toolbar li ul li {
display: block;
white-space: nowrap;
- padding-right: 1ex;
+ padding-right: 1em;
}
-#toolbar_nav li > ul {
+#toolbar li > ul {
top: auto;
left: auto;
}
-#toolbar_nav li:hover ul {display: block;}
\ No newline at end of file
+#toolbar li:hover ul {display: block;}
\ No newline at end of file
--
1.6.0.6
Initial styling for the cloud, added a few images
Signed-off-by: Jeremy Perry <jeremy.perry at redhat.com>
---
src/app/views/cloud/instance/index.rhtml | 2 +-
src/app/views/layouts/cloud/cloud.rhtml | 9 +-
src/public/images/mystery_cloud.png | Bin 0 -> 1984 bytes
src/public/images/tab_bg.png | Bin 0 -> 174 bytes
src/public/stylesheets/cloud/layout.css | 164 +++++++++++++++++++++---------
5 files changed, 124 insertions(+), 51 deletions(-)
create mode 100644 src/public/images/mystery_cloud.png
create mode 100644 src/public/images/tab_bg.png
diff --git a/src/app/views/cloud/instance/index.rhtml
b/src/app/views/cloud/instance/index.rhtml
index 218bd8c..757d67c 100644
--- a/src/app/views/cloud/instance/index.rhtml
+++ b/src/app/views/cloud/instance/index.rhtml
@@ -1,4 +1,4 @@
-<div id="toolbar_nav">
+<div id="toolbar">
<!-- TODO: Make each li a submit button with same styling as current li.
Handlng of this will be implemented in InstanceController::handle_form
-->
diff --git a/src/app/views/layouts/cloud/cloud.rhtml
b/src/app/views/layouts/cloud/cloud.rhtml
index b891bf2..708a2c3 100644
--- a/src/app/views/layouts/cloud/cloud.rhtml
+++ b/src/app/views/layouts/cloud/cloud.rhtml
@@ -12,7 +12,9 @@
</head>
<body>
+ <div id="wrapper">
<div id="head">
+ <h1><a href="#">The name of our project goes
here</a></h1>
<!-- Header stuff! -->
<div id="login-box">
Hi, <%= @user %>
@@ -21,8 +23,9 @@
{:controller => 'help', :action => @help_section,
:anchor => @anchor},
:id=>"help-link", :popup => true, :title =>
"Help" %>
</div>
- <div id="nav">
- <ul class="toolbar">
+ </div>
+ <div id="navcontainer">
+ <ul class="navlist">
<li>
<% link_to_unless(controller.controller_name ==
'dashboard', "Dashboard", { :controller =>
'cloud/dashboard' }) do |name|
@@ -47,9 +50,9 @@
</li>-->
</ul>
</div>
- </div>
<div id="content">
<%= yield %>
</div>
+ </div>
</body>
</html>
diff --git a/src/public/images/mystery_cloud.png
b/src/public/images/mystery_cloud.png
new file mode 100644
index
0000000000000000000000000000000000000000..4b4db8233828264d1d3c23ec1520c5a13f9b1e45
GIT binary patch
literal 1984
zcmV;x2S50UP)<h;3K|Lk000e1NJLTq002V(001Wl1^@s6RIl|v0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU(Vo5|nRCwClTH8((TM*sg2;Ob*77?K_
zK*GhGA!^i+sDb!kLL!g69ryzA3xqG=_yurYh{PC2jYgx9!AMj<K@<scIRhBHM#npf
zz^S!!YErYO2WG};l(Unao=f+1_1dedR at I)A`T2SEtH<Qz<dJ93o*jAp`t={*zkj#*
zbJ&)ho!zlz%a*>KJ9qli)6;`)+L7|Bz<B at
uz1`c}dtzv4sCH&%#!5|1RhTI$DN2HY
zIX5?_W at l%WZQH)Gva-_v=6?gmojZ3LdU|?Jtz5ZMtyr-_c|0C{G{L|C2ms^9j~{yC
z{kCn}{6~)-t=qV9V_?~W0XAH at a^-w581w>&w6ru0L^Lp%82|v27^DID_U#+a4VIUe
zpDZaUX-SrSo}~if)vH%tpU>A$4`;1jy;=hy!C*Hr2Ux*?00 at dH8aM*P^85YGI44<v
zED0DNK76n*UcA^&t8T4Xvqn)M3;}@$i{>KC4gi7)HsKmR;<{V6ZZ+e&;^N|#WdR0U
zgASSzt5&VjV3>?xAWS#Gz(X at 2@_asabaXUt*svi$naBTIgK_WPy#`{27mQ#azzSvr
z1K`98{tTe-gG<mb at f`z_pP&Etx^?RU>({Rj<mBY|f2#lr_h at
Zx{RfQTDJgC;VX?us
z%Ity|f`E#N*O>U6em}Tt*DfCg*~VD2PRw9DefqR|WMt$x2_rA2NoNQn%z}b~3p9QB
zytA{jiF8E0WCa7kD=M=Fzvfk!_mJl at ATp>*AUNwVD2ERpK3Q5?+Vaz2JbLt~_U_%g
zr#^l9WXnJ&X)47L23BJK{{4;J-Q7)ejRg?cJ!Hn<IKbCRTg<p%GD(Ut21RNS282N>
zEG%p}cI;SPLSVdn`O<ss+O_7lZ{K=l1dpZ^<%6;DtR-Z?<nv)Leuvnkwr}4K0M**H
zYeT<D>{DO9e1TL~q)Q_1Etw=ik*@&=gE2ilttu)i>K0;%BN$)<rK~1s0z3=@5epcS
z)=nVuD(2?qs-mJI4c1}<z!1wqnZ*P|>Jhes<B9}>J`2{>)#XL2aU#F~5ZA9?Z-$Sv
zFp@#fjOu0$AqSt2BhCj9IPTlGPi@`0HLhU%?%g|e`}XY+$kGP$8Kh8Sb^r`8jcS|5
zg9i^bINc-FbPWaqQ|bZ+MY2Rrb_qVm%o+?<US3|@KwxBKWaw)-CdgRjl#+Q7*cM(`
z3g~|>sxt^V>(Zr5=NSkNdXf<`_&JFq^R<~R0LI|pAPOzDY15|Ac~71^Q4b$JRBztA
z(eGh29-Oj(wt+`hR+c_Dnsi?X6kf2;pFi8Ek(|<P=ojzbzhD3L>sOmufFoCxOmj2m
zJFQGK0mbKmwpXuSRUbcogbq<{ZEcX$n!+TQ^n~G~qoWW~VZV`?nHd%+r43F~0wO`7
zd)rZ&0ao<)_n%+ at
xNhJd;S3S4KyzXV3<A|}-n^*+0XWDad_M*Z*HSu<_)P`^GZw+d
zwlf&)wozloz`#H)-Ncd^W1%RW=;V|Ou)ze}hh0);9h`^Hyk2jZv2de!?QvoWEkrY_
zXh$%{#>S4zz5>Sxnah86N at Jw{kSyd3VB5B;uC7)jr^Ad51OgEnBc6NnV$ed^XV0E(
zN5Y5zV`^&ZhzyjH;>iHQ2 at nZ723!a3QdL!@sGd+%Y(;2|$B!R}X`FcPE#n5U#yWH6
zO#6!$FG7H%f-W*!nE5-|(<#$15S5jcI)IvkY9d9ME=;>5x)4$sLsXupftaZSC|<}q
zgX2Uz)nuZBfk4Gcbwh+2otT(F3jkd*9b2S3#cQJp2&Y=OOjlP|{h>pL8d7D^m54tk
zI%N&9dGqE7w}4BWJ9kb8O^81ZvQEl3)@h0{7KslYJU9VTc$~`PrDzh%W-mmT9AL_g
z8#ls0SWJS)dQWBsF9?`P`pQC!!h at n^A>Vcz49w at xpDUuO1_lHALY4t$y8jvbOonh4
zMX$y~bwb~-1OtO2x*8uJ*Q*3WC527(n+)5`_<@NXJ?$pgsiO2+&3?QTLpF3UckI}q
z`x<124wxnr+*}~sD-<&bj0=;Klhpu%JJD`u6B$IQtX6yW><N9>)6;`if~)b%Y%glp
z!58`Y`9AWSARFg)CNVQgX=!Pgp}TkQj=301rtZ;TAc&Gdr{S|~pxcIU?GVi^WkKc^
z2xjXc<d_Ez9B8mCt4}shmSSZvdwYAsfWZ5uWG5y%`(bTAYypt$)%&5cf^<`TqFhHy
z4q78SI~!3Q9XFj?rM_ at 0X5s$OHO0lne?{~_kzy`izTCdh-vp9r47c~Whry{;wiDdC
zKRkdpp=xSs$|8Da*slaiGH$r#F0xMGHlu7cn)@<t#48*rrTd|`92<#QSy>%2fVuK7
zng3SXY}~TYVx8fpn=&&gUN%PEcm_Mjh#;M4Iqi<SHJp^D8#+U7P43;hw~_xA<p>5+
zEmZ07 at Nli{AuRV{Zd{YTYLR;=QU8)aCpBUhJ<%QW-yMw1%*;M)NXzg46<`2a|Dl%-
SVlR;Z0000<MNUMnLSTZOu9xco
literal 0
HcmV?d00001
diff --git a/src/public/images/tab_bg.png b/src/public/images/tab_bg.png
new file mode 100644
index
0000000000000000000000000000000000000000..1385ccc0303c5a3819822b3140181c456310ac25
GIT binary patch
literal 174
zcmeAS at
N?(olHy`uVBq!ia0vp^Ahs3<6Od&66MF|pNtU=qlmzFem6RtIr7}3C<R_&n
zc;+Uirv{}arc at T5Otk?j3h;Ds45_$vX0jn4g8~P$=EMK<OADR;Hk4*?Y>Hdwz#(D$
zHg03j)ZnU|RqjQ5;vNcAd3R at 8F!b%roz#2kV%FPZ1=HWXePO*qB<>fR{A1k%47=?4
VI-QIdgn?!=c)I$ztaD0e0s!hTJX8Px
literal 0
HcmV?d00001
diff --git a/src/public/stylesheets/cloud/layout.css
b/src/public/stylesheets/cloud/layout.css
index 60b5c91..0fd158d 100644
--- a/src/public/stylesheets/cloud/layout.css
+++ b/src/public/stylesheets/cloud/layout.css
@@ -1,47 +1,90 @@
/* ------ General Layout ------ */
-.toolbar {text-align:left;}
+html {min-width:640px;}
-.current, .toolbar a:hover {
- border-bottom: 5px solid #5599B8;
+#head h1 a {
+ background:transparent url(/images/mystery_cloud.png) no-repeat scroll 20px
50%;
+ /*
+ TODO: change this back to a real logo when we have one.
+ */
+ display:block;
+ height:59px;
+ overflow:hidden;
+ text-decoration:none;
+ text-indent:-9999px;
+ width:87px;
}
-.toolbar a {
- text-decoration: none;
+#login-box {
+ display:block;
+ line-height:3.75ex;
+ position:absolute;
+ right:4ex;
+ text-align:right;
+ top:12px;
+}
+
+#login-box a {
+ color: #337ACC;
}
-#nav {height:1em;padding-top:1ex;}
+#navcontainer {
+ height:40px;
+}
-#nav a {display: inline-block;}
+#navcontainer ul {
+ padding-left: 0;
+ margin-left: 0;
+ background-color: #fff;
+ color: #afb2bd;
+ float: left;
+ width: 100%;
+}
-#head {height:50px;}
+#navcontainer ul li { display: inline; }
-#login-box {
- text-align:right;
- /*
- TODO: put this back in with a real logo when we have one.
- background: url('../../images/logo_cumulus.png') left top
no-repeat;
- */
+#navcontainer ul li a {
+ padding: 12px 20px;
+ border-top: solid 2px transparent;
+ background: #fff;
+ color: #afb2bd;
+ font-weight: bold;
+ text-decoration: none;
+ text-transform: uppercase;
+ float: left;
}
-#content {margin-left:18px;}
+#navcontainer ul li a:hover {
+ background: #fff;
+ color: #989ba7;
+}
+
+#navcontainer ul li a.current {
+ border-top: solid 2px #337acc;
+ background: #e0eeff url(/images/tab_bg.png) repeat-x;
+ color: #404552;
+}
+
+#content {margin-left:0;}
#content table{width:100%;}
-#content table tr.odd {background:#eef2f2;}
+/* #content table tr.odd {background:#eef2f2;} */
-#content table tr:hover {background: #729FCF; color: #FFFFFF;}
+#content table tr:hover {background: #fdfef1;}
#content table th, #content table td {
- border:1px solid #AAAAAA;
+ border:1px solid #E1E1E3;
+ border-right: 0;
+ border-left: 0;
padding:0;
text-align:left;
}
-#content table th {background-color: #F0F0F0;}
+#content table th {background: none;border-top: none;}
#content table div {
- padding: 0.4ex;
+ padding: 0.5ex;
}
#content table th a {
@@ -49,31 +92,35 @@
text-decoration: none;
}
+#content table th a:hover {
+ text-decoration: underline;
+}
+
.sortup {
- background: #F0F0F0 url('../../images/Sort_up_11.png') top center
no-repeat !important;
+ background: transparent url('/images/Sort_up_11.png') top center
no-repeat !important;
}
.sortdown {
- background: #F0F0F0 url('../../images/Sort_down_11.png') top center
no-repeat !important;
+ background: transparent url('/images/Sort_down_11.png') top center
no-repeat !important;
}
-.sortable:hover {background-color: #DDDDDD !important;}
+.sortable:hover {/* background-color: #DDDDDD !important; */}
-.selected {background: #337ACC !important; color: #FFFFFF;}
+.selected {background: #fbf0a7 !important;}
.center {text-align:center;}
.pagination {padding-top: 1ex;}
-#list-view {}
+#list-view {margin-bottom:2em;}
+
#detail-view {
- border-top: 3px solid #AAAAAA;
- margin-top: 2ex;
+ border-top: 2px solid #CECECE;
}
#graph {
- border: 1px solid #AAAAAA;
+ border: 1px solid #EFEFEF;
margin-bottom: 1.5ex;
height: 15ex;
}
@@ -84,18 +131,34 @@
border: 0;
color: #337ACC;
cursor: pointer;
+ margin-right:12px;
+ font-size: 1em;
+ text-decoration: underline;
+}
+
+input#submit_for_list {
+ margin:12px 16px 0 0;
+ padding:0;
}
#detail_header {
- background-color: #F0F0F0;
- height: 10ex;
- margin-bottom: 1.5ex;
+ background-color: #EFEFEF;
+ height: 5em;
+ margin-bottom: 1em;
+}
+
+#detail_header h3 {
+ color:#666666;
+ margin: 8px 12px 12px 16px;
+ display:inline-block;
+ font-size: 1.2em;
}
+
/* ----- Backgrounds for states ----- */
.state-container {
margin-left:5px;
- text-indent:10px;
+ text-indent:12px;
}
.task-canceled {background:url(../../images/icon-canceled-11px.png) left center
no-repeat;}
@@ -115,52 +178,59 @@
.instance-creating {background:url(../../images/icon_startup_11px.png) left
center no-repeat;}
-/* ----- Toolbar Navigation -------- */
-#toolbar_nav {
- background: #F0F0F0;
+/* ----- Actions Toolbar -------- */
+#toolbar {
+ background: #e3eaf2;
+ border-top: 1px solid #d1dfee;
+ border-bottom: 1px solid #d1d7de;
+ margin-bottom: 1em;
}
-#toolbar_nav img {
+#toolbar img {
margin: 0;
}
-#toolbar_nav ul{
+#toolbar ul{
list-style: none;
+ margin:0;
+ padding:0;
}
-#toolbar_nav li {
+#toolbar li {
display: inline-block;
position: relative;
color: #666666;
- padding: 0 1ex;
+ padding: 8px 16px;
}
-#toolbar_nav li:hover {
+
+#toolbar li:hover {
background: #337ACC;
color: #FFFFFF;
cursor: pointer;
}
-#toolbar_nav li.current { /* This is not really needed right now, but will be
useful when we add filters. */
+#toolbar li.current { /* This is not really needed right now, but will be
useful when we add filters. */
background: #4B95B8;
}
-#toolbar_nav li ul {
+#toolbar li ul {
display: none;
position: absolute;
top: 1em;
left: 0;
- background: #F0F0F0;
+ background: #bec7e0; /* #F0F0F0; */
+ padding: 4px;
}
-#toolbar_nav li ul li {
+#toolbar li ul li {
display: block;
white-space: nowrap;
- padding-right: 1ex;
+ padding-right: 1em;
}
-#toolbar_nav li > ul {
+#toolbar li > ul {
top: auto;
left: auto;
}
-#toolbar_nav li:hover ul {display: block;}
\ No newline at end of file
+#toolbar li:hover ul {display: block;}
--
1.6.0.6