Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (3.2 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
@include keyframes( progress_animation) {
22
	from {
23
		width: 0%
24
	}
25
	to {
26
		width: 100%
27
	}
28
}
29

    
30
@include keyframes( progress_animation_list) {
31
	from {
32
		width: 0%
33
	}
34
	to {
35
		width: $list-vm-height;
36
	}
37
}
38

    
39
@include keyframes( pulse) {
40
	from {
41
		color: $secondary-color
42
	}
43
	to {
44
		color: darken($secondary-color,10%)
45
	}
46
}
47

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

    
148
.vm {
149
	.top {
150
		.img-wrap {
151
			//@include sprite('../images/vm-on.png', 112px, 116px);
152
			display: inline-block;
153
			height: 112px;
154
			.snf-PC_fill {
155
				font-size: 112px;
156
				color: $vm-active-color;
157
			}
158
			&.off {
159
				.snf-PC_fill {
160
					color: $vm-off-color;
161
				}
162
			}
163
		}
164
		.os {
165
			@include sprite('../images/os-unknown.png', 44px, 44px);
166
			position: absolute;
167
			background-size:100%;
168
			
169
			left:34px;
170
			top:11px;
171
			&.windows { background-image:url('../images/os-windows.png'); }
172
			&.kubuntu { background-image:url('../images/os-kubuntu.png'); }
173
			&.fedora { background-image:url('../images/os-fedora.png'); }
174
		}
175
	}
176
}
177

    
178

    
179
#vm-connect {
180
	.info {
181
		font-style:italic;
182
		font-size:emCalc(13px);
183
		color: lighten($primary-color,5%);
184
	}
185
	.ssh {
186
		text-align: center;
187
		span {
188
			padding: 10px 30px;
189
			background:$secondary-color;
190
			color:#fff;
191
		}
192
	}
193
}
194

    
195

    
196

    
197