Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (4.5 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 {
21
		width: 60px;
22
		span {
23
			&:hover {
24
				cursor: pointer;
25
			}
26
		}
27
		&:hover {
28
			.snf-PC_fill {
29
				color: darken($vm-active-color,10%);
30
			}
31
		}
32
		.snf-PC_fill {
33
			font-size: 60px;
34
			color: $vm-active-color;
35
		}
36
		// &.off {
37
		// 	.snf-PC_fill {
38
		// 		color: $vm-off-color;
39
		// 	}
40
		// }
41
		// }
42
		.os {
43
			@include sprite('../images/os-unknown.png', 22px, 22px);
44
			position: absolute;
45
			top:8px;
46
			left:19px;
47
			&.windows { background-image:url('../images/os-windows.png'); }
48
			&.kubuntu { background-image:url('../images/os-kubuntu.png'); }
49
			&.fedora { background-image:url('../images/os-fedora.png'); }
50
		}
51
	}
52
	// [data-status="add-new"] {
53
	// 		background-color: $secondary-color;
54
	// 		-webkit-transition: background-color 300ms linear;
55
	// 		-moz-transition: background-color 300ms linear;
56
	// 		-o-transition: background-color 300ms linear;
57
	// 		-ms-transition: background-color 300ms linear;
58
	// 		transition: background-color 300ms linear;
59
	// 		.container {
60
	// 			.img-wrap {
61
	// 				.img {
62
	// 					a {
63
	// 						span:first-child {
64
	// 							color: white;
65

    
66
	// 						}
67
	// 						.symbol {
68
	// 							background-image: none;
69
	// 							color: $secondary-color;
70
	// 							font-size: 30px;
71
	// 							text-indent: 0;
72
	// 						}
73
	// 					}
74
	// 				}
75
	// 			}
76
	// 			.visible-info a{
77
	// 				color: white;
78
	// 			}
79
	// 		}
80
	// 		&:hover {
81
	// 		background-color: white;
82
	// 		-webkit-transition: background-color 300ms linear;
83
	// 		-moz-transition: background-color 300ms linear;
84
	// 		-o-transition: background-color 300ms linear;
85
	// 		-ms-transition: background-color 300ms linear;
86
	// 		transition: background-color 300ms linear;
87
	// 		.container {
88
	// 			.img-wrap {
89
	// 				.img {
90
	// 					a {
91
	// 						span:first-child {
92
	// 							color: $secondary-color;
93
	// 							-webkit-transition: color 300ms linear;
94
	// 							-moz-transition: color 300ms linear;
95
	// 							-o-transition: color 300ms linear;
96
	// 							-ms-transition: color 300ms linear;
97
	// 							transition: color 300ms linear;
98
	// 						}
99
	// 						.symbol {
100
	// 							color: white;
101
	// 						}
102
	// 					}
103
	// 				}
104
	// 			}
105
	// 			.visible-info a{
106
	// 				color: $secondary-color;
107
	// 			}
108
	// 		}
109
	// 		}
110
	// }
111
	[data-status="off"] {
112
		.img {
113
			.snf-PC_fill {
114
				color: $vm-off-color;
115
			}
116
		}
117
		.status .logs, .status .state a{
118
			color: $vm-off-color;
119
		}
120
	}
121
	[data-status="error"] {
122
		.img {
123
			.snf-PC_fill {
124
				color: $vm-error-color;
125
			}
126
		}
127
		.status .logs, .status .state a{
128
			color: $vm-error-color;
129
		}
130
	}
131
	[data-status="shutting"] {
132
		.img {
133
			.snf-PC_fill {
134
				color: $vm-shutting-color;
135
			}
136
		}
137
		.status .logs, .status .state a{
138
			color: $vm-shutting-color;
139
		}
140
	}
141
	[data-status="starting"] {
142
		.img {
143
			.snf-PC_fill {
144
				color: $vm-starting-color;
145
			}
146
		}
147
		.status .logs, .status .state a{
148
			color: $vm-starting-color;
149
		}
150
	}
151
	[data-status="rebooting"] {
152
		.img {
153
			.snf-PC_fill {
154
				color: $vm-rebooting-color;
155
			}
156
		}
157
		.status .logs, .status .state a{
158
			color: $vm-rebooting-color;
159
		}
160
	}
161
	[data-status="building"] {
162
		.btn5.temp {
163
			color: #5c8fe1;
164
			border-color: #5c8fe1;
165
			padding: 0 4px;
166
			position: absolute;
167
			right: 0;
168
		}
169
		.img {
170
			.snf-PC_fill {
171
				display: block;
172
				overflow: hidden;
173
			}
174
			.incomplete {
175
				color: #c7eae0;
176
				width:60px;
177
			}
178
			.complete {
179
				width: 0%;
180
				position: relative;
181
				top: -60px;
182
			}
183
		}
184
	}
185
	// there's no running and building
186
}
187

    
188
.vm {
189
	.top {
190
		.img {
191
			//@include sprite('../images/vm-on.png', 112px, 116px);
192
			display: inline-block;
193
			height: 112px;
194
			.snf-PC_fill {
195
				font-size: 112px;
196
				color: $vm-active-color;
197
			}
198
			&.off {
199
				.snf-PC_fill {
200
					color: $vm-off-color;
201
				}
202
			}
203
		}
204
		.os {
205
			@include sprite('../images/os-unknown.png', 44px, 44px);
206
			position: absolute;
207
			background-size:100%;
208
			
209
			left:34px;
210
			top:11px;
211
			&.windows { background-image:url('../images/os-windows.png'); }
212
			&.kubuntu { background-image:url('../images/os-kubuntu.png'); }
213
			&.fedora { background-image:url('../images/os-fedora.png'); }
214
		}
215
	}
216
}
217

    
218

    
219
#vm-connect {
220
	.info {
221
		font-style:italic;
222
		font-size:emCalc(13px);
223
		color: lighten($primary-color,5%);
224
	}
225
	.ssh {
226
		text-align: center;
227
		span {
228
			padding: 10px 30px;
229
			background:$secondary-color;
230
			color:#fff;
231
		}
232
	}
233
}
234

    
235

    
236

    
237