Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (3.1 kB)

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

    
3
.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
@include keyframes( progress_animation) {
13
	from {
14
		width: 0%
15
	}
16
	to {
17
		width: 100%
18
	}
19
}
20

    
21
@include keyframes( pulse) {
22
	from {
23
		color: $secondary-color
24
	}
25
	to {
26
		color: darken($secondary-color,10%)
27
	}
28
}
29

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

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

    
171

    
172
#vm-connect {
173
	.info {
174
		font-style:italic;
175
		font-size:emCalc(13px);
176
		color: lighten($primary-color,5%);
177
	}
178
	.ssh {
179
		text-align: center;
180
		span {
181
			padding: 10px 30px;
182
			background:$secondary-color;
183
			color:#fff;
184
		}
185
	}
186
}
187

    
188

    
189

    
190