Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (2.8 kB)

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

    
3
.vms .items-list {
4
	.img {
5
			//@include sprite('../images/vm-on.png', 56px, 58px);
6
			width: 60px;
7
			height: 60px; // do we prefer to put it in items_list??
8
			display: inline-block;
9
			.snf-PC_fill {
10
				font-size: 60px;
11
				color: $vm-active-color;
12
			}
13
			 
14
			&.stopped {
15
				.snf-PC_fill {
16
					color: $vm-stopped-color;
17
				}				
18
				//background-image:url('../images/vm-stopped.png');
19
			}
20
			.os {
21
				@include sprite('../images/os-unknown.png', 22px, 22px);
22
				position: absolute;
23
				top:8px;
24
				left:19px;
25
				&.windows { background-image:url('../images/os-windows.png'); }
26
				&.kubuntu { background-image:url('../images/os-kubuntu.png'); }
27
				&.fedora { background-image:url('../images/os-fedora.png'); }
28
			}
29
		
30
		}
31
}
32

    
33
.vm {
34
	.top {
35
		.img {
36
			//@include sprite('../images/vm-on.png', 112px, 116px);
37
			display: inline-block;
38
			height: 112px;
39
			.snf-PC_fill {
40
					font-size: 112px;
41
					color: $vm-active-color;
42
				}
43
				 
44
				&.stopped {
45
					.snf-PC_fill {
46
						color: $vm-stopped-color;
47
					}			
48
				//background-image:url('../images/vm-stopped.png');
49
			}
50
		}
51
		.os {
52
			@include sprite('../images/os-unknown.png', 44px, 44px);
53
			position: absolute;
54
			background-size:100%;
55
			
56
			left:34px;
57
			top:11px;
58
			&.windows { background-image:url('../images/os-windows.png'); }
59
			&.kubuntu { background-image:url('../images/os-kubuntu.png'); }
60
			&.fedora { background-image:url('../images/os-fedora.png'); }
61
		}
62
	}
63
}
64

    
65

    
66
.create-vm {
67
	.select-os {
68
		li {
69
			width:23%;
70
			padding:20px;
71
			list-style:none outside none;
72
			display: inline-block;
73
			float: left;
74
			height: 200px;
75
			margin:0 10px 10px 0;
76
			&:hover,
77
			&.selected {
78
				background:#fff;
79
				h2, p, a {
80
					color:$secondary-color;
81
				}
82
			}
83
			a {
84
				color:#fff;
85
			}
86
			.os {
87
				@include sprite('../images/os-unknown.png', 30px, 30px);
88
				background-size:100%;
89
				margin-bottom:2em;
90
				&.windows { background-image:url('../images/os-windows.png'); }
91
				&.kubuntu { background-image:url('../images/os-kubuntu.png'); }
92
				&.fedora { background-image:url('../images/os-fedora.png'); }
93
			}
94
			h2 {
95
				font-size:emCalc(16px);
96
				font-weight:normal;
97
				color:#fff;
98
			}
99
			.details {
100
				font-weight:bold;
101
				font-size:emCalc(14px);
102
			}
103
		}
104
	}
105
	.select-flavor {
106
		dl {
107
			color:#fff;
108
			font-size:emCalc(20px);
109
			margin-bottom:10px;
110
			dd {
111
				width:23%;
112
				display: inline-block;
113
			}
114
			dt {
115
				width:70%;
116
				display: inline-block;
117
				font-weight: normal;
118
				span {
119
					@extend .btn3;
120
					min-width: 90px;
121
					margin:0 10px;
122
					&:first-child {
123
						margin-left:0;
124
					}
125
				}
126
			}
127
		}
128
	}
129
}
130

    
131
#vm-connect {
132
	.info {
133
		font-style:italic;
134
		font-size:emCalc(13px);
135
		color: lighten($primary-color,5%);
136
	}
137
	.ssh {
138
		text-align: center;
139
		span {
140
			padding: 10px 30px;
141
			background:$secondary-color;
142
			color:#fff;
143
		}
144
	}
145
}
146

    
147

    
148

    
149