Statistics
| Branch: | Tag: | Revision:

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

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

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

    
165

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

    
182

    
183

    
184