Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / sass / _machines.scss @ fd47d618

History | View | Annotate | Download (3 kB)

1
/* Machines (VMs)  related styles  */
2

    
3
.build-progress {
4
	animation: progress_animation 5s infinite;
5
	-webkit-animation: progress_animation 5s infinite;
6
}
7

    
8
@keyframes progress_animation
9
{
10
from {width: 0%}
11
to {width: 100%}
12
}
13

    
14
@-webkit-keyframes progress_animation /* Safari and Chrome */
15
{
16
from {width: 0%}
17
to {width: 100%}
18
}
19
.vms .items-list {
20
	.img-wrap {
21
		width: 60px;
22
		span {
23
			&:hover {
24
				cursor: pointer;
25
				opacity:0.8;
26
			}
27
		}
28
		&:hover {
29
			.snf-PC_fill {
30
				color: darken($vm-active-color,10%);
31
			}
32
		}
33
		.snf-PC_fill {
34
			font-size: 60px;
35
			color: $vm-active-color;
36
		}
37
		// &.off {
38
		// 	.snf-PC_fill {
39
		// 		color: $vm-off-color;
40
		// 	}
41
		// }
42
		// }
43
		.os {
44
			@include sprite('../images/os-unknown.png', 22px, 22px);
45
			position: absolute;
46
			top:8px;
47
			left:19px;
48
			&.windows { background-image:url('../images/os-windows.png'); }
49
			&.kubuntu { background-image:url('../images/os-kubuntu.png'); }
50
			&.fedora { background-image:url('../images/os-fedora.png'); }
51
		}
52
	}
53
	[data-status="off"] {
54
		.img-wrap {
55
			.snf-PC_fill {
56
				color: $vm-off-color;
57
			}
58
		}
59
		.status .logs, .status .state a{
60
			color: $vm-off-color;
61
		}
62
	}
63
	[data-status="error"] {
64
		.img-wrap {
65
			.snf-PC_fill {
66
				color: $vm-error-color;
67
			}
68
		}
69
		.status .logs, .status .state a{
70
			color: $vm-error-color;
71
		}
72
	}
73
	[data-status="shutting"] {
74
		.img-wrap {
75
			.snf-PC_fill {
76
				color: $vm-shutting-color;
77
			}
78
		}
79
		.status .logs, .status .state a{
80
			color: $vm-shutting-color;
81
		}
82
	}
83
	[data-status="starting"] {
84
		.img-wrap {
85
			.snf-PC_fill {
86
				color: $vm-starting-color;
87
			}
88
		}
89
		.status .logs, .status .state a{
90
			color: $vm-starting-color;
91
		}
92
	}
93
	[data-status="rebooting"] {
94
		.img-wrap {
95
			.snf-PC_fill {
96
				color: $vm-rebooting-color;
97
			}
98
		}
99
		.status .logs, .status .state a{
100
			color: $vm-rebooting-color;
101
		}
102
	}
103
	[data-status="building"] {
104
		.btn5.temp {
105
			color: #5c8fe1;
106
			border-color: #5c8fe1;
107
			padding: 0 4px;
108
			position: absolute;
109
			right: 0;
110
		}
111
		.img-wrap {
112
			.snf-PC_fill {
113
				display: block;
114
				overflow: hidden;
115
			}
116
			.incomplete {
117
				color: #c7eae0;
118
				width:60px;
119
			}
120
			.complete {
121
				width: 0%;
122
				position: relative;
123
				top: -60px;
124
			}
125
		}
126
	}
127
	 // there's no running
128
}
129

    
130
.vm {
131
	.top {
132
		.img-wrap {
133
			//@include sprite('../images/vm-on.png', 112px, 116px);
134
			display: inline-block;
135
			height: 112px;
136
			.snf-PC_fill {
137
				font-size: 112px;
138
				color: $vm-active-color;
139
			}
140
			&.off {
141
				.snf-PC_fill {
142
					color: $vm-off-color;
143
				}
144
			}
145
		}
146
		.os {
147
			@include sprite('../images/os-unknown.png', 44px, 44px);
148
			position: absolute;
149
			background-size:100%;
150
			
151
			left:34px;
152
			top:11px;
153
			&.windows { background-image:url('../images/os-windows.png'); }
154
			&.kubuntu { background-image:url('../images/os-kubuntu.png'); }
155
			&.fedora { background-image:url('../images/os-fedora.png'); }
156
		}
157
	}
158
}
159

    
160

    
161
#vm-connect {
162
	.info {
163
		font-style:italic;
164
		font-size:emCalc(13px);
165
		color: lighten($primary-color,5%);
166
	}
167
	.ssh {
168
		text-align: center;
169
		span {
170
			padding: 10px 30px;
171
			background:$secondary-color;
172
			color:#fff;
173
		}
174
	}
175
}
176

    
177

    
178

    
179