Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (3.6 kB)

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

    
3
.grid-view .build-progress {
4
	animation:
5
		progress_animation 5s infinite,
6
		pulse 1s infinite;
7
	-webkit-animation:
8
		progress_animation 5s infinite,
9
		pulse 1s infinite;
10
}
11

    
12
.list-view .build-progress {
13
	animation:
14
		progress_animation_list 5s infinite,
15
		pulse 1s infinite;
16
	-webkit-animation:
17
		progress_animation_list 5s infinite,
18
		pulse 1s infinite;
19
}
20

    
21
.reboot-progress {
22
	animation: 
23
		reboot_pulse 1s infinite;
24
	-webkit-animation:
25
		reboot_pulse 1s infinite;
26
}
27

    
28
@include keyframes( progress_animation) {
29
	from {
30
		width: 0%
31
	}
32
	to {
33
		width: 100%
34
	}
35
}
36

    
37
@include keyframes( progress_animation_list) {
38
	from {
39
		width: 0%
40
	}
41
	to {
42
		width: $list-vm-height;
43
	}
44
}
45

    
46
@include keyframes( pulse) {
47
	from {
48
		color: $secondary-color
49
	}
50
	to {
51
		color: darken($secondary-color,10%)
52
	}
53
}
54

    
55

    
56
@include keyframes( reboot_pulse) {
57
	from {
58
		color: $vm-rebooting-color
59
	}
60
	to {
61
		color: darken($vm-rebooting-color,10%)
62
	}
63
}
64

    
65
.vms .items-list {
66
	.img-wrap {
67
		width: 60px;
68
		span {
69
			&:hover {
70
				cursor: pointer;
71
			}
72
		}
73
		.snf-PC_fill {
74
			font-size: 60px;
75
			color: $vm-active-color;
76
		}
77
		.os {
78
			@include sprite('../images/os-unknown.png', 22px, 22px);
79
			position: absolute;
80
			top:8px;
81
			left:19px;
82
			&.windows { background-image:url('../images/os-windows.png'); }
83
			&.kubuntu { background-image:url('../images/os-kubuntu.png'); }
84
			&.fedora { background-image:url('../images/os-fedora.png'); }
85
		}
86
	}
87
	[data-status="off"] {
88
		.img-wrap {
89
			.snf-PC_fill {
90
				color: $vm-off-color;
91
			}
92
		}
93
		.status .logs, .status .state {
94
			color: $vm-off-color;
95
		}
96
	}
97
	[data-status="error"] {
98
		.img-wrap {
99
			.snf-PC_fill {
100
				color: $vm-error-color;
101
			}
102
		}
103
		.status .logs, .status .state a{
104
			color: $vm-error-color;
105
		}
106
	}
107
	[data-status="shutting"] {
108
		.img-wrap {
109
			.snf-PC_fill {
110
				color: $vm-shutting-color;
111
			}
112
		}
113
		.status .logs, .status .state {
114
			color: $vm-shutting-color;
115
		}
116
	}
117
	[data-status="starting"] {
118
		.img-wrap {
119
			.snf-PC_fill {
120
				color: $vm-starting-color;
121
			}
122
		}
123
		.status .logs, .status .state {
124
			color: $vm-starting-color;
125
		}
126
	}
127
	[data-status="rebooting"] {
128
		.btn5.temp {
129
			color: #5c8fe1;
130
			border-color: #5c8fe1;
131
			padding: 0 4px;
132
			position: absolute;
133
			right: 0;
134
		}
135
		.img-wrap {
136
			.snf-PC_fill {
137
				color: $vm-rebooting-color;
138
			}
139
		}
140
		.status .logs, .status .state {
141
			color: $vm-rebooting-color;
142
		}
143
	}
144
	[data-status="building"] {
145
		.btn5.temp {
146
			color: #5c8fe1;
147
			border-color: #5c8fe1;
148
			padding: 0 4px;
149
			position: absolute;
150
			right: 0;
151
		}
152
		.img-wrap {
153
			.snf-PC_fill {
154
				display: block;
155
				overflow: hidden;
156
			}
157
			.incomplete {
158
				color: #c7eae0;
159
				width:60px;
160
			}
161
			.complete {
162
				width: 0%;
163
				position: relative;
164
				top: -60px;
165
			}
166
		}
167
	}
168
	 // there's no running
169
}
170

    
171
.vm {
172
	.top {
173
		.img-wrap {
174
			//@include sprite('../images/vm-on.png', 112px, 116px);
175
			display: inline-block;
176
			height: 112px;
177
			.snf-PC_fill {
178
				font-size: 112px;
179
				color: $vm-active-color;
180
			}
181
			&.off {
182
				.snf-PC_fill {
183
					color: $vm-off-color;
184
				}
185
			}
186
		}
187
		.os {
188
			@include sprite('../images/os-unknown.png', 44px, 44px);
189
			position: absolute;
190
			background-size:100%;
191
			
192
			left:34px;
193
			top:11px;
194
			&.windows { background-image:url('../images/os-windows.png'); }
195
			&.kubuntu { background-image:url('../images/os-kubuntu.png'); }
196
			&.fedora { background-image:url('../images/os-fedora.png'); }
197
		}
198
	}
199
}
200

    
201

    
202
#vm-connect {
203
	.info {
204
		font-style:italic;
205
		font-size:emCalc(13px);
206
		color: lighten($primary-color,5%);
207
	}
208
	.ssh {
209
		text-align: center;
210
		span {
211
			padding: 10px 30px;
212
			background:$secondary-color;
213
			color:#fff;
214
		}
215
	}
216
}
217

    
218

    
219

    
220