Revision ea3cb4e4

b/ui/static/main.css
139 139
    cursor:pointer;
140 140
    display:block;
141 141
    padding: .7em 1em;
142
    margin-top: 1em;
143 142
    width: 8em;
144 143
    font-weight: bold;
145 144
    text-decoration: none;
......
153 152

  
154 153
div#header {
155 154
    height:152px;
155
    margin-left: -2em;
156 156
}
157 157

  
158 158
div#wrapper {
159
    width: 990px;
159
    width: 800px;
160 160
    margin: 0 auto;
161 161
}
162 162

  
......
184 184

  
185 185
div#about {
186 186
    color: white;
187
    padding: .9em 5em;
187
    padding: .5em 0;
188 188
    font-size:.7em;
189 189
    float: right;
190
    width: 63%;
191 190
}    
192 191

  
193 192
/* tooltip styling. by default the element to be styled is .tooltip  */
......
474 473

  
475 474
.instance {
476 475
    clear: both;
477
    margin: 1em 0;
478
    padding: 1em 2em 1em 1em;
476
    padding: .7em 1em .7em 1em;
479 477
    width: 70%;
480 478
    border: 1px dashed transparent;
481 479
    color: #666;
......
501 499
.actions {
502 500
    float: right;
503 501
    width: 15%;
504
    margin: -1.5em -9em 0 0;
502
    margin-right: -7em;
505 503
    height: 70px;
506 504
}
507 505

  
......
572 570
    color: transparent;
573 571
    font-weight: normal;
574 572
    margin-left: 2em;
575
    padding-left: 2em;
573
    padding-left: 1.5em;
576 574
    text-align: left;
577 575
}
578 576

  
......
592 590
    background-image: url(/static/pencil.png);
593 591
}
594 592

  
593
.terminated {
594
    opacity: .8;
595
}
596

  
595 597
#ubuntu {
596 598
    height:50px;
597 599
    background: url(../static/ubuntu.png) no-repeat 0 0;
......
659 661
    margin-top: 1em;
660 662
}
661 663

  
662
div.active {
663
    border-bottom: 1em solid #2C597E;
664
    height: 200px;
665
}
666

  
667 664
div.active, div.stopped {
668 665
    margin-left: -1em;
669 666
    width: 70%;
670 667
    padding: 1em;
668
    height: 200px;
671 669
    margin-top: 1em;
672 670
}
673 671

  
......
736 734
}
737 735

  
738 736
div.inactive div.state {
739
    margin-right: 2.5em;
737
    margin-right: 1.5em;
740 738
}
741 739

  
742 740
div.inactive {
......
746 744
div.list div.actions {
747 745
    clear: left;
748 746
    float: right;
749
    margin-right: 4em;
750
    margin-top: 1em;
747
    margin-right: 2em;
748
    margin-top: 2em;
749
    width: 150px;
751 750
    text-align: right;
752 751
}
753 752

  
......
785 784
    color: #F49C1A;
786 785
}
787 786

  
787
img.os {
788
    z-index: 1;
789
    margin-left: -40px;
790
    margin-top: 45px;
791
    opacity: .9;
792
}
793

  
794
div#user {
795
    float:right;
796
    color: white;
797
    font-size: 9pt;
798
    margin-top: 6px;
799
    margin-left: 9px;
800
}
801

  
802
div#user a {
803
    color: #a0a0a0;
804
    text-decoration: none;
805
}
806

  
b/ui/templates/home.html
4 4
	<title>{{ project }}</title>
5 5
	<!-- include the Tools -->
6 6
	<script src="static/jquery.tools.min.js"></script>
7
	<link rel="stylesheet" type="text/css" href="static/alt-main.css"/>	
7
	<link rel="stylesheet" type="text/css" href="static/main.css"/>	
8 8
    <link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css' />
9 9

  
10 10
</head>
......
21 21
        </div>
22 22
        <!-- tabs -->
23 23
        <ul class="css-tabs">
24
	        <li><a href="alt-instances" title="manage your virtual machines" id="instances">instances</a></li>
24
	        <li><a href="instances" title="manage your virtual machines" id="instances">instances</a></li>
25 25
	        <li><a href="disks" title="manage your storage volumes" id="disks">disks</a></li>
26 26
	        <li><a href="images" title="manage boot images" id="images">images</a></li>
27 27
	        <li><a href="networks" title="configure networking" id="networks">networks</a></li>
b/ui/templates/instances.html
20 20
                        <div class="uptime">24 days uptime</div>
21 21
                    </div>
22 22
                    <img src="static/server.png" />
23
                    <img class="os" src={{ node.thumb }} />
24
                    <a href="#" class="name">
25
                        <h3><span>{{ node.name }}</span><span class="rename">rename</span></h3>
26
                    </a>
27
                    <a href="#" class="ip">
28
                        <h5><span>{{ node.public_ip }}</span><span class="configure">configure networking</span></h5>
29
                    </a>
30
                    <a href="#" class="storage">
31
                        <h5>34GB of total storage in 3 volumes <span class="configure">configure storage</span></h5>
32
                    </a>
33
                    </div>
34
                </div>
35
            {% endif %}
36
        {% endfor %}
37
    </div>
38
    <div class="seperator"></div>
39
    <div class="terminated">
40
        {% for node in nodes %}
41
            {% if node.state == '0' %}        
42
                <div class="instance terminated">
43
                    <div class="actions">
44
                        <a href="#" class="action">start</a>
45
                        <a href="#" class="action">destroy</a>
46
                        <a href="#" class="more">more &hellip;</a>
47
                    </div>
48
                    <div class="state">
49
                        <div>Stopped</div>
50
                        <div class="indicator" />
51
                        <div class="indicator" />
52
                        <div class="indicator" />
53
                        <div class="indicator" />
54
                    </div>
55
                    <img src="static/server.png" />
56
                    <img class="os" src={{ node.thumb }} />
23 57
                    <a href="#" class="name">
24 58
                        <h3><span>{{ node.name }}</span><span class="rename">rename</span></h3>
25 59
                    </a>

Also available in: Unified diff