Revision 8e88c3fe
| b/ui/static/main.css | ||
|---|---|---|
| 804 | 804 |
} |
| 805 | 805 |
|
| 806 | 806 |
div.machine:hover {
|
| 807 |
background-color:#A1C8DB; |
|
| 807 |
background-color:#A1C8DB!important; |
|
| 808 |
} |
|
| 809 |
|
|
| 810 |
div.machine.light-background {
|
|
| 811 |
background-color:#aed2e3; |
|
| 808 | 812 |
} |
| 809 | 813 |
|
| 810 | 814 |
.machine div.connect-arrow {
|
| ... | ... | |
| 957 | 961 |
} |
| 958 | 962 |
|
| 959 | 963 |
.machine div.info div.info-header {
|
| 960 |
background-color: #CDE2EC;
|
|
| 964 |
background-color: #A1C8DB;
|
|
| 961 | 965 |
color: white; |
| 962 |
width: 45px;
|
|
| 963 |
height: 20px;
|
|
| 966 |
height: 14px;
|
|
| 967 |
width: 43px;
|
|
| 964 | 968 |
margin-left: 85px; |
| 965 | 969 |
cursor: pointer; |
| 966 | 970 |
} |
| 967 | 971 |
|
| 968 |
.machine div.info div.info-header.info-hover {
|
|
| 972 |
div.machine:hover div.info-header {
|
|
| 969 | 973 |
background-color: #84b7d0; |
| 970 | 974 |
} |
| 971 | 975 |
|
| 976 |
div.machine span.info-label.darker {
|
|
| 977 |
background-color: #5CA1C0; |
|
| 978 |
} |
|
| 979 |
|
|
| 972 | 980 |
.machine div.info span.info-label {
|
| 973 | 981 |
font-size: 75%; |
| 974 |
margin-left:6px; |
|
| 975 | 982 |
margin-bottom: 8px; |
| 976 | 983 |
} |
| 977 | 984 |
|
| ... | ... | |
| 980 | 987 |
height:4px; |
| 981 | 988 |
width:8px; |
| 982 | 989 |
margin-top: -6px; |
| 983 |
margin-left: 33px;
|
|
| 990 |
margin-left: 29px;
|
|
| 984 | 991 |
} |
| 985 | 992 |
|
| 986 | 993 |
.machine div.info div.down {
|
| ... | ... | |
| 2083 | 2090 |
width: 508px; |
| 2084 | 2091 |
height: 1px; |
| 2085 | 2092 |
margin-top: 2px; |
| 2086 |
background-color: #84b7d0;
|
|
| 2093 |
background-color: #5CA1C0;
|
|
| 2087 | 2094 |
margin-left: 13px; |
| 2088 | 2095 |
} |
| 2089 | 2096 |
|
| ... | ... | |
| 2774 | 2781 |
|
| 2775 | 2782 |
.info-content {
|
| 2776 | 2783 |
height: 95px; |
| 2777 |
width: 540px;
|
|
| 2784 |
width: 512px;
|
|
| 2778 | 2785 |
margin-top: 10px; |
| 2779 | 2786 |
} |
| 2780 | 2787 |
|
| 2781 |
.metadata-separator {
|
|
| 2782 |
background-color: #808080; |
|
| 2783 |
height: 3px; |
|
| 2784 |
margin: 0 0 0 14px; |
|
| 2785 |
width: 492px; |
|
| 2786 |
} |
|
| 2787 |
|
|
| 2788 | 2788 |
.metadata-container {
|
| 2789 | 2789 |
line-height: 12px; |
| 2790 |
margin-left: 14px;
|
|
| 2790 |
margin-left: 2px;
|
|
| 2791 | 2791 |
margin-top: 2px; |
| 2792 | 2792 |
height: 85px; |
| 2793 |
background-color: #84b7d0; |
|
| 2793 | 2794 |
} |
| 2794 | 2795 |
|
| 2795 | 2796 |
.metadata-column {
|
| 2796 |
border-right: 1px solid #CECECE;
|
|
| 2797 |
border-right: 1px solid #5CA1C0;
|
|
| 2797 | 2798 |
color: black; |
| 2798 | 2799 |
float: left; |
| 2799 | 2800 |
font-size: 60%; |
| ... | ... | |
| 2810 | 2811 |
|
| 2811 | 2812 |
.vm-details {
|
| 2812 | 2813 |
width: 169px; |
| 2814 |
margin-left:17px; |
|
| 2813 | 2815 |
} |
| 2814 | 2816 |
|
| 2815 | 2817 |
.vm-metadata {
|
| b/ui/templates/machines_icon.html | ||
|---|---|---|
| 86 | 86 |
<div class="toggler down"></div> |
| 87 | 87 |
</div> |
| 88 | 88 |
<div class="info-content"> |
| 89 |
<div class="metadata-separator"></div> |
|
| 90 | 89 |
<div class="metadata-container"> |
| 91 | 90 |
<div class="vm-details metadata-column"> |
| 92 | 91 |
{% trans "CPUs" %}: <span class="cpu-data">1</span><br />
|
| ... | ... | |
| 120 | 119 |
<a href="#" class="manage-metadata">{% trans "Manage Tags" %}</a>
|
| 121 | 120 |
</div> |
| 122 | 121 |
</div> |
| 123 |
<div class="metadata-separator"></div> |
|
| 124 | 122 |
</div> |
| 125 | 123 |
</div> |
| 126 | 124 |
</div> |
| ... | ... | |
| 140 | 138 |
$(this).find("div.connect-arrow").show();
|
| 141 | 139 |
$(this).find("div.connect-border").show();
|
| 142 | 140 |
} |
| 143 |
// change color of info button |
|
| 144 |
$(this).find(".info-header").addClass('info-hover');
|
|
| 145 | 141 |
}); |
| 146 | 142 |
|
| 147 | 143 |
// actions on machine mouseout |
| ... | ... | |
| 149 | 145 |
// hide connect button |
| 150 | 146 |
$(this).find("div.connect-arrow").hide();
|
| 151 | 147 |
$(this).find("div.connect-border").hide();
|
| 152 |
// change color of info button |
|
| 153 |
$(this).find(".info-header").removeClass('info-hover');
|
|
| 154 | 148 |
}); |
| 155 | 149 |
|
| 156 | 150 |
// actions on connect arrow border mouseover |
| ... | ... | |
| 188 | 182 |
if ($(this).find('.toggler').hasClass('up')) {
|
| 189 | 183 |
$(this).find('.toggler').removeClass('up');
|
| 190 | 184 |
$(this).find('.toggler').addClass('down');
|
| 185 |
$(this).find('.info-label').removeClass('darker');
|
|
| 186 |
$(this).parent().removeClass('light-background');
|
|
| 191 | 187 |
} else {
|
| 192 | 188 |
$(this).find('.toggler').removeClass('down');
|
| 193 | 189 |
$(this).find('.toggler').addClass('up');
|
| 190 |
$(this).find('.info-label').addClass('darker');
|
|
| 191 |
$(this).parent().addClass('light-background');
|
|
| 194 | 192 |
} |
| 195 | 193 |
$(this).find(".info-content").slideToggle(600);
|
| 196 | 194 |
return false; |
Also available in: Unified diff