Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (2.7 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
.reboot-progress {
13
	animation: 
14
		reboot_pulse 1s infinite;
15
	-webkit-animation:
16
		reboot_pulse 1s infinite;
17
}
18

    
19
@include keyframes( progress_animation) {
20
	from {
21
		width: 0%
22
	}
23
	to {
24
		width: 100%
25
	}
26
}
27

    
28
@include keyframes( pulse) {
29
	from {
30
		color: $vm-active-color
31
	}
32
	to {
33
		color: darken($vm-active-color,10%)
34
	}
35
}
36

    
37

    
38
@include keyframes( reboot_pulse) {
39
	from {
40
		color: $vm-rebooting-color
41
	}
42
	to {
43
		color: darken($vm-rebooting-color,10%)
44
	}
45
}
46

    
47
@mixin stateColor($color) {
48
	.img-wrap {
49
		.snf-PC_fill {
50
			color:$color;
51
		}
52
	}
53
	.status .logs, .status .state {
54
		color: $color;
55
	}
56
}
57

    
58
.vms .items-list {
59
	.img-wrap {
60
		width: 60px;
61
		span {
62
			&:hover {
63
				cursor: pointer;
64
			}
65
		}
66
		.snf-PC_fill {
67
			font-size: 60px;
68
			color: $vm-active-color;
69
		}
70
		.os {
71
			@include sprite('../images/os-unknown.png', 22px, 22px);
72
			position: absolute;
73
			top:8px;
74
			left:19px;
75
			&.windows { background-image:url('../images/os-windows.png'); }
76
			&.kubuntu { background-image:url('../images/os-kubuntu.png'); }
77
			&.fedora { background-image:url('../images/os-fedora.png'); }
78
		}
79
	}
80
	// temp 
81
	.btn5.temp {
82
			color:blue;
83
			padding: 0 4px;
84
			position: absolute;
85
			right: 0;
86
		}
87
	.off {
88
		@include stateColor($vm-off-color);
89
	}
90
	.error {
91
		@include stateColor($vm-error-color);
92
	}
93
	.shutting {
94
		@include stateColor($vm-shutting-color);
95
	}
96
	.starting {
97
		@include stateColor($vm-starting-color);
98
	}
99
	.rebooting {
100
		@include stateColor($vm-rebooting-color);
101
	}
102
	.building {
103
		.img-wrap {
104
			.snf-PC_fill {
105
				display: block;
106
				overflow: hidden;
107
			}
108
			.incomplete {
109
				color: $vm-building-color;
110
				width:60px;
111
			}
112
			.complete {
113
				width: 0%;
114
				position: relative;
115
				top: -60px;
116
			}
117
		}
118
	}
119
}
120

    
121
.vm {
122
	.top {
123
		.img-wrap {
124
			display: inline-block;
125
			height: 112px;
126
			.snf-PC_fill {
127
				font-size: 112px;
128
				color: $vm-active-color;
129
			}
130
			&.off {
131
				.snf-PC_fill {
132
					color: $vm-off-color;
133
				}
134
			}
135
		}
136
		.os {
137
			@include sprite('../images/os-unknown.png', 44px, 44px);
138
			position: absolute;
139
			background-size:100%;
140
			
141
			left:34px;
142
			top:11px;
143
			&.windows { background-image:url('../images/os-windows.png'); }
144
			&.kubuntu { background-image:url('../images/os-kubuntu.png'); }
145
			&.fedora { background-image:url('../images/os-fedora.png'); }
146
		}
147
	}
148
}
149

    
150

    
151
#vm-connect {
152
	.info {
153
		font-style:italic;
154
		font-size:emCalc(13px);
155
		color: lighten($primary-color,5%);
156
	}
157
	.ssh {
158
		text-align: center;
159
		span {
160
			padding: 10px 30px;
161
			background:$secondary-color;
162
			color:#fff;
163
		}
164
	}
165
}
166

    
167

    
168

    
169