Revision 4c25ff50

b/snf-cyclades-app/synnefo/ui/new_ui/ui/network_create.html
130 130
		</div>
131 131
		
132 132
	</div>
133
	<div class="extras">
134
		<span data-tooltip class="has-tip ours suggestions" title="Μήπως να είναι λίγο πιο έντονα τα χρώματα; Μοιάζουν απενεργοποιημένα..." style="top:0;left:200px">:)</span>
135
		<span data-tooltip class="has-tip ours questions" title="Πόσο θα είναι το μέγιστο πλάτος της κύριας περιοχής" style="top:240px;left:20px">?</span>
136
		<span data-tooltip class="has-tip ours problems" title="Πώς θα έχουμε δράσεις όπως filters κτλ" style="top:140px;left:250px">!!</span>
137
	</div>
138 133
 
139 134
  <script src="javascripts/vendor/jquery.js"></script>
135
  <script src="javascripts/jquery-ui-1.10.3.custom.min.js"></script>
140 136
  <script src="javascripts/foundation/foundation.js"></script>
141 137
	
142 138
	<script src="javascripts/foundation/foundation.alerts.js"></script>
......
167 163
	
168 164
	<script type="text/javascript" src="javascripts/jquery.mousewheel.js"></script>
169 165
	<script type="text/javascript" src="javascripts/jquery.jscrollpane.js"></script>
166
	<script type="text/javascript" src="javascripts/jquery.magnific-popup.js"></script>
170 167
	<script type="text/javascript" src="javascripts/dropzone.js"></script>
171 168
	
172 169
	<script src="javascripts/common.js"></script>
b/snf-cyclades-app/synnefo/ui/new_ui/ui/network_details.html
6 6
<head>
7 7
	<meta charset="utf-8" />
8 8
    <meta name="viewport" content="width=device-width" />
9
    <title>Synnefo | VM list</title>
9
    <title>Synnefo | Νetwork details</title>
10 10
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;subset=latin,greek-ext,greek' rel='stylesheet' type='text/css'>
11 11
    <link rel="stylesheet" href="stylesheets/normalize.css" />
12 12
    <link rel="stylesheet" href="stylesheets/app.css" />
13
    <link rel="stylesheet" href="stylesheets/styles.css" />
13
    <link rel="stylesheet" href="stylesheets/athina.css" />
14 14
    <link rel="stylesheet" href="stylesheets/font_custom.css" />
15 15

  
16 16
    <link rel="stylesheet" href="stylesheets/jquery.jscrollpane.css" media="all" />
......
141 141
				<div class="right_side">
142 142
					<div class="middle_side">
143 143
						<div class="set">
144
							<div class="row">
145
								<div class="info_simple big">
146
									<span class="height_up">My Windows Server 2012<br></span>
147
								</div>
148
								<div class="action_links">
149
									<span><a href="">remove</a></span>
150
								</div>
151
							</div>
152
							<div class="row">
153
								<div class="info_simple big">
154
									<span class="height_up">IPv6: 2001:648:2ffc:1222:a800:ff:fe3f:98fe 
155
									</span>
156
								</div>
157
							</div>
144
							<p>
145
								<span class="info_simple">My Windows Server 2012</span>
146
								<span class="action_links">
147
									<a href="">remove</a>
148
								</span>
149
							</p>
150
							<p>IPv6: 2001:648:2ffc:1222:a800:ff:fe3f:98fe </p>
158 151
						</div>
159 152
						<div class="set">
160
							<div class="row">
161
								<div class="info_simple big">
162
									<span class="height_up">My Windows Server 2012<br></span>
163
								</div>
164
								<div class="action_links">
165
									<span><a href="">remove</a></span>
166
								</div>
167
							</div>
168
							<div class="row">
169
								<div class="info_simple big">
170
									<span class="height_up">IPv6: 2001:648:2ffc:1222:a800:ff:fe3f:98fe</span>
171
								</div>
172
							</div>
153
							<p>
154
								<span class="info_simple">My Windows Server 2012</span>
155
								<span class="action_links">
156
									<a href="">remove</a>
157
								</span>
158
							</p>
159
							<p>IPv6: 2001:648:2ffc:1222:a800:ff:fe3f:98fe </p>
173 160
						</div>
174 161
					</div>
162
					<div class="btn-img">
163
						<a href="">
164
							add machine
165
							<img src="images/menu-icon-compute.png" alt="Disk Image">
166
						</a>
167
					</div>
175 168
				</div>
176 169
			</section>
177 170
		</div>
178 171
	</div>
179
	<div class="extras">
180
		<span data-tooltip class="has-tip ours suggestions" title="Μήπως να είναι λίγο πιο έντονα τα χρώματα; Μοιάζουν απενεργοποιημένα..." style="top:0;left:200px">:)</span>
181
		<span data-tooltip class="has-tip ours questions" title="Πόσο θα είναι το μέγιστο πλάτος της κύριας περιοχής" style="top:240px;left:20px">?</span>
182
		<span data-tooltip class="has-tip ours problems" title="Πώς θα έχουμε δράσεις όπως filters κτλ" style="top:140px;left:250px">!!</span>
183
	</div>
184
 <div id="network-add-vms" class="reveal-modal medium">
172
 	<div id="network-add-vms" class="reveal-modal medium">
185 173
  		<p>A widget to add vms</p>
186 174
  		<a class="close-reveal-modal" title="close window">&#215;</a>
187 175
	</div>
b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_settings.scss
31 31
$primary-color: #919194;
32 32
$secondary-color: #3582AC;
33 33
$black:#333;
34
$white:#fff;
35 34

  
36 35
$alert-color: $secondary-color;
37 36
$success-color: #00a551;
b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/app.scss
83 83
  box-shadow: $shadows;
84 84
}
85 85

  
86
a {
87
	color:$secondary-color;
88
	&:hover {
89
		color:$primary-color;
90
		@include transition(background, 300ms, ease-out);
91

  
92
	}
93
}
86 94
// border grey, on hover pink
87 95
.btn1 {
88 96
	border:1px solid $primary-color;
......
95 103
	&.current {
96 104
		border-color:$secondary-color;
97 105
		background:$secondary-color;
98
		color:$white;
106
		color:#fff;
99 107
	}
100 108
	&.current {
101 109
		cursor:default;
......
106 114
.btn2 {
107 115
	@extend .btn1;
108 116
	color:$secondary-color;
109
	background:$white;
117
	background:#fff;
110 118
	border-color:$secondary-color;
111 119
	&:hover, 
112 120
	&.current {
113 121
		background:transparent;
114
		border-color:$white;
122
		border-color:#fff;
115 123
	}
116 124
}
117 125

  
118 126
// reverse btn2
119 127
.btn3 {
120 128
	@extend .btn1;
121
	color:$white; 
122
	border-color:$white;
129
	color:#fff; 
130
	border-color:#fff;
123 131
	&:hover, 
124 132
	&.current {
125 133
		color:$secondary-color;
126
		background:$white;
127
		border-color:$white;
134
		background:#fff;
135
		border-color:#fff;
128 136
	}
129 137
}
130 138

  
......
132 140
// reverse btn2
133 141
.btn4 {
134 142
	@extend .btn1;
135
	color:$white; 
136
	border-color:$white;
137
	background:$success-color;
143
	color:#fff; 
144
	border-color:#fff;
145
	background: $secondary-color;
138 146
	&:hover, 
139 147
	&.current {
140
		border-color:$white;
141
		background:darken($success-color,15%);
142

  
148
		color: $secondary-color;
149
  		border-color:  $secondary-color;
150
  		background: white;
143 151
	}
144 152
}
145 153

  
146
a:hover {
147
	@include transition(background, 300ms, ease-out);
154

  
155

  
156
// btn with image on the right
157
.btn-img {
158
	@extend .btn1;
159
	border-color:$secondary-color;
160
	&:hover {
161
		background:transparent;
162
	}
163
	a {
164
		img,span {
165
			margin-left:5px;
166
		}
167
	}
148 168
}
149 169

  
150 170
.dummy-navigation {
......
158 178
	line-height:160%;
159 179
	a {
160 180
		color:$black;
161
		&:hover { color:$white }
162
		&.open { color:$white;}
181
		&:hover { color:#fff }
182
		&.open { color:#fff;}
163 183
		&.close {
164 184
			float:right;
165 185
			font-weight:bold;
......
170 190

  
171 191
.ours {
172 192
	padding:8px 15px;
173
	color:$white;
193
	color:#fff;
174 194
	font-size:20px;
175 195
	font-weight:bold;
176 196
	background:#cc0;
......
193 213
	float:left;
194 214
	&.nav {
195 215
		margin-top:0;
216
		font-size:1em;
217
		overflow: auto;
196 218
	}
197 219
	&+.main {
198 220
		overflow:hidden;
......
211 233
	position:relative;
212 234
	padding:$header-padding-vertical $header-padding-horizontal;
213 235
	border-bottom:1px solid $primary-color;
214
	background:$white;
236
	background:#fff;
215 237
	.logo {
216 238
		text-align: center;
217 239
		img {
......
312 334

  
313 335
.info.error {
314 336
	background:$error-color;
315
	color:$white;
337
	color:#fff;
316 338
}
317 339

  
318 340

  
319 341
.info.alert {
320 342
	background:$alert-color;
321
	color:$white;
343
	color:#fff;
322 344
}
323 345

  
324 346
.info.warning {
325 347
	background:$primary-color;
326
	color:$white;
348
	color:#fff;
327 349
}
328 350

  
329 351
.info.success {
330 352
	background:$success-color;
331
	color:$white;
353
	color:#fff;
332 354
}
333 355

  
334 356
.entities {
......
491 513
		right:4px;
492 514
	}
493 515
	.jspTrack {
494
		background:$white;
516
		background:#fff;
495 517

  
496 518
		border:1px solid $primary-color;
497 519
		border-top:1px solid lighten($primary-color,20%);
......
520 542
		}
521 543
}
522 544

  
545
.networks .items-list {
546
	.img {
547
			@include sprite('../images/network-green102x116.png', 51px, 58px);
548
		}
549
}
550

  
523 551

  
524 552
.vm {
525 553
	.top {
......
544 572
	}
545 573
}
546 574

  
575

  
576
.network {
577
	.top {
578
		.img {
579
			@include sprite('../images/network-green102x116.png', 102px, 116px);
580
		}
581
	}
582
}
583

  
547 584
.details {
548 585
	position:relative;
549
		
550 586
	.top {
551
		padding:100px $header-padding-horizontal;
587
		padding:70px $header-padding-horizontal;
552 588
		text-align: center;
553 589
		.img {
554 590
			background-size:100%;
......
557 593
		}
558 594
		.actions {
559 595
			ul {
560
				padding:1em;
596
				padding:1em 1em 0;
597
				margin:0;
561 598
				text-align:center;
562 599
				li {
563 600
					list-style: none outside none;
564 601
					display: inline-block;
565
					margin:0 10px;
602
					margin:0 30px;
566 603
					min-width: 112px;
567 604
					a {
568 605
						@extend .btn1;
......
574 611
		
575 612
	}
576 613
	.info {
614
		position: relative;
615
		.section_header {
616
			float: left;
617
			width:22%;
618
			margin-right: 2%;
619
			font-weight: bold;
620
		}
621

  
622
		.right_side {
623
			overflow: hidden;
624
			width: 76%;
625
			.middle_side {
626
				float:left;
627
				min-width:70%;
628
				.action_links {
629
					display: inline-block;
630
					a {
631
						margin-right:5px;
632
						color:$secondary-color;
633
					}
634
				}
635
				p {
636
					margin-bottom:0;
637
				}
638
				.info_simple {
639
					display: inline-block;
640
					margin-right: 10px;
641
					width:40%;
642
				}
643
			}
644
			.btn-img {
645
				float:right;
646
				min-width: 180px;
647
				text-align: center;
648
			}
649
			.set {
650
				margin-bottom:1em;
651
			}
652

  
653
			
654
		}
655
		.btn-img {
656
			float:right;
657
		}
658
		
659

  
577 660
		dl {
578 661
			margin:0;
579 662
			dt {
......
584 667
			dd {
585 668
				width:74%;
586 669
				display: inline-block;
670
				.os {
671
					height:16px;
672
					vertical-align: baseline;
673
				}
587 674
			}
588 675
		}
589 676
	}
......
598 685
			color:$secondary-color;
599 686
		}
600 687
	}
688
	.graph_container {
689
		padding-bottom: 2em;
690
	}
601 691
}
602 692

  
603 693

  
......
614 704
	background:$secondary-color;
615 705
	position: relative;
616 706
	z-index:10;
707

  
617 708
	.lt-sidebar {
618
		border-right:1px solid $white;
709
		border-right:1px solid #fff;
710
		color:#fff;
619 711
		ul {
620 712
			li {
621 713
				list-style:none outside none;
714
				
622 715
				a {
623
					color:$white;
716
					color:#fff;
624 717
					span { float:right; display:none;}
625 718
					&:hover,
626 719
					&.current {
......
652 745
		top:50px;
653 746
		@include sprite('../images/info-close.png', 31px, 30px);
654 747
	}
748
	.close_char {
749
		background: none;
750
		text-indent: 0;
751
		font-size: 1.8em; /* for the the character e (for d we can put 2em) */
752
		color: white;
753
	}
655 754
}
656 755

  
657 756
.create-vm {
......
666 765
			margin:0 10px 10px 0;
667 766
			&:hover,
668 767
			&.selected {
669
				background:$white;
768
				background:#fff;
670 769
				h2, p, a {
671 770
					color:$secondary-color;
672 771
				}
673 772
			}
674 773
			a {
675
				color:$white;
774
				color:#fff;
676 775
			}
677 776
			.os {
678 777
				@include sprite('../images/os-unknown.png', 30px, 30px);
......
685 784
			h2 {
686 785
				font-size:emCalc(16px);
687 786
				font-weight:normal;
688
				color:$white;
787
				color:#fff;
689 788
			}
690 789
			.details {
691 790
				font-weight:bold;
......
695 794
	}
696 795
	.select-flavor {
697 796
		dl {
698
			color:$white;
797
			color:#fff;
699 798
			font-size:emCalc(20px);
700 799
			margin-bottom:10px;
701 800
			dd {
......
730 829
		span {
731 830
			padding: 10px 30px;
732 831
			background:$secondary-color;
733
			color:$white;
832
			color:#fff;
734 833
		}
735 834
	}
736 835
}
......
975 1074
		display: none;
976 1075
		z-index:100;
977 1076
		position: relative;
1077
		background:#fff;
1078
		top:20%; 
1079
		left:25%; 
1080
		width:50%;
1081
		padding:25px;
1082
		.buttons {
1083
			a {
1084
				margin-right:20px;
1085
			}
1086
		}
1087
		&.upload-widget {
1088
			background:transparent;
1089
			padding:45px 0;
1090
			width:80%;
1091
			left:10%;
1092
			border:1px solid white;
1093
		}
1094

  
978 1095
	}
1096

  
979 1097
}
980 1098

  
981 1099
.upload-widget {
982
	padding:45px 0;
983
	width:80%;
984
	border:1px solid white;
985
	margin:50px auto;
1100
	
986 1101
	text-align:center;
987 1102
	h2, a{
988 1103
		color:#fff;
......
1003 1118

  
1004 1119
		display: inline-block;
1005 1120
	}
1121
	.files {
1122
		color:#fff;
1123
		
1124
		li {
1125
			padding: 10px 120px;
1126
			border: none;
1127
			position: relative;
1128
			.dz-success-mark {
1129
				margin-left:10px;
1130
			}
1131
			.dz-error-mark {
1132
				display: none;
1133
			}
1134
			.cancel-col {
1135
				width: 100px;
1136
				position: absolute;
1137
				right: 50px;
1138
				top: 9px;
1139
				
1140
				.cancel span {
1141
					display: block;
1142
					text-align: right;
1143
				}
1144
			}
1145
		}
1146
		div {
1147
			display: inline-block;
1148
		}
1149
		.progress-bar {
1150
			position: static;
1151
			padding: 0;
1152
			width: 25%;
1153
			border: none;
1154
			background-color: transparent;
1155
			
1156
			.progress-wrap {
1157
				width: 100%;
1158
				margin: 0;
1159
			
1160
				.progress {
1161
					display: block;
1162
					margin: 0;
1163
					border: 2px solid white;
1164
					padding: 0;
1165
					background-color:  $secondary-color;
1166
				
1167
					.meter {
1168
						background-color: white;
1169
					}
1170
				}
1171
			}
1172
		}
1173
	}
1006 1174
}
1007 1175

  
1008 1176

  
......
1011 1179

  
1012 1180
}
1013 1181

  
1182
.create-network {
1183
	color: #fff;
1184
	.check {
1185
		color: #fff;
1186
	}
1187
	p {
1188
		font-size: 0.8em;
1189
		font-style: italic;
1190
		margin: 5px 0 0;
1191
		width: 545px;
1192
	}
1193

  
1194
	li {
1195
		list-style: none outside none;
1196
	}
1197
	.custom_checkbox {
1198
		font-size: 1.3em;
1199
	}
1200
	.subnet_options {
1201
		margin: 0;
1202
		li {
1203
			margin-bottom: 6px;
1204
			padding-left: 155px;
1205
		}
1206
	}
1207

  
1208
	.network_options {
1209
		position: relative;
1210
		width: 350px;
1211
		min-height: 285px;
1212
		
1213
		.check {
1214
			position: absolute;
1215
			right: 0;
1216
		}
1217
		
1218
		li {
1219
			display: block;
1220
			margin-bottom: 13px;
1221
		
1222
			form {
1223
				margin: 0;
1224
				
1225
				input {
1226
					position: absolute;
1227
					display: inline-block;
1228
					right: 0;
1229
					width: 200px;
1230
					height: 20px;
1231
					font-size: 0.9em;
1232
					
1233
					&.hidden {
1234
						display: none;
1235
					}
1236
				}
1237
			}
1238
			&.manual form input {
1239
				right: -160px;
1240
				width: 150px;
1241
			}
1242
		}		
1243
		span.sub_title {
1244
			float:left;
1245
		}
1246
	}
1247
}
1248

  
1249

  
1250

  
1014 1251

  
1015 1252
.onecol {
1016 1253
	max-width:$row-width;
/dev/null
1
// Global Foundation Settings
2
@import "settings";
3

  
4
//$primary-color: #919194; //grey
5
//$secondary-color: #ff7bac; //pink
6

  
7
/* NOT IN USE! styles for selection window (used for vm_list_v1.html) */
8

  
9
/*
10
.vm_options {
11
	display: none;
12
	border: 1px solid #ff7bac;
13
	position: absolute;
14
	top: -20%;
15
	width: 100%;
16
	height: 100%;
17
	font-size: 27px;
18
	font-weight: bold;
19
	text-align: left;
20
	background-color: white;
21
	line-height: 45px;
22
	padding-left: 1em;
23
	padding-top: 0.65em;
24
	
25
	.custom_checkbox {
26
		display: inline-block;
27
		margin: 0;
28
		padding-left: 1em;	
29
		color: #ff7bac;
30
	}
31
}
32

  
33

  
34
a.option:hover {
35
	color: #ff7bac;
36
}
37

  
38
.vm_container {
39
	width: 200px;
40
	display: inline-block;
41
	height: 187px;
42
	position: relative;
43

  
44
}
45

  
46
*/
47

  
48
/* styles for the detailed info of each vm (used for vm_details.html) */
49

  
50

  
51
.graph_container {
52
	padding-bottom: 2em;
53

  
54
}
55

  
56

  
57
.wrap {
58
	position: relative;
59
}
60

  
61
.section_header {
62
	float: left;
63
	width:22%;
64
	margin-right: 2%;
65
	font-weight: bold;
66
}
67

  
68
.right_side {
69
	overflow: hidden;
70
	width: 76%;
71
}
72

  
73

  
74

  
75
.info_simple {
76
	display: inline-block;
77
	margin-right: 10px;
78
}
79

  
80

  
81
.action_links {
82
	display: inline-block;
83
	
84
	a {
85
		color:  $secondary-color;
86
		margin-right: 5px;
87

  
88
		&:hover {
89
		text-decoration: underline;
90
	}
91

  
92
	span:first-child {
93
	margin-right: 5px;
94
}
95
}
96
	
97
}
98

  
99
a.black {
100
	color: black;
101
	&:hover {
102
		color:  $secondary-color;
103
	}
104
}
105

  
106
.btn_pinkb {
107
	width: 11.5em;
108
	height: 3.8em;
109
	line-height: 3.8em;
110
	border: 1px solid  $secondary-color;
111
	position: absolute;
112
	top: 0;
113
	right: 0;
114
	
115
	a {
116
		display: block;
117
		padding-left: 1em;
118
		
119
		&:hover {
120
			color:  $secondary-color;
121
		}
122
		
123
		img {
124
			position: absolute;
125
			right: 0.6em;
126
			top: 0.6em;
127
			height: 2.5em;
128
		}
129
	}
130
}
131

  
132

  
133
.row {
134
	margin: 0 0 0.4em 0;
135
}
136
.middle_side {
137
	max-width: 70%;
138
}
139

  
140
.txt_size {
141
	height: 0.8em;
142
	vertical-align: baseline;
143
}
144

  
145

  
146

  
147

  
148
 /* styles for network details */
149

  
150
 .big {
151
 	width: 60%;
152
 }
153

  
154
 .small {
155
 	width: 170px;
156
 }
157

  
158
.wrapper .details .top {
159
	padding: 70px 2.5em;
160
	
161
	.actions ul li {
162
		margin: 0 30px;
163
	}
164
}
165

  
166

  
167
.height_up {
168
	line-height: 1.3em;
169
}
170

  
171
.set {
172
	margin-bottom: 1em;
173
}
174

  
175
/* main icon in details page */
176
.network { 
177
	.top .img {
178
	background: url("../images/network-green102x116.png") no-repeat center center;
179
	width: 102px;
180
	height: 116px;
181
	display: inline-block;
182
	text-indent: -2000px;
183
	overflow: hidden;
184
	background-size: 100%;
185
	}
186
	.close-font{
187
		position: absolute;
188
		right: 0.8em;
189
		top: 2em;
190
		font-size: 2em;
191
		color: #b3b3b3;
192
	}
193
}
194

  
195

  
196
/* for scroll bar */
197
.networks .items-list {
198
	.img {
199
		background: url("../images/network-green102x116.png") no-repeat center center;
200
		height: 58px;
201
		width: 51px;
202
		display: inline-block;
203
		text-indent: -2000px;
204
		overflow: hidden;
205
		background-size: 80%;
206
	}
207
	
208
	/* for network list */
209
	.container
210
	{
211
		.img {
212
			background-size: 100%
213
		}
214

  
215
		.options .wrap a {
216
			width: 50%;
217
		}
218
	}
219
}
220

  
221

  
222

  
223
/* detailed pages: about the gaps that separate the area with the big img and the buttons from the rest of the page */ 
224

  
225

  
226
.details .top .actions ul{
227
	padding: 1em 1em 0;
228
	margin-bottom: 0;
229
} 
230

  
231

  
232

  
233
.content {
234
	position: relative;
235
	.overlay-modal {
236
		position: absolute;
237
		left:0;
238
		top:0;
239
		width: 100%;
240
		height: 100%;
241
		z-index:98;
242
		background:  $secondary-color;
243
	}
244

  
245
	.overlay-div {
246
		position:absolute; top:20%; left:25%; width:50%;
247
		padding:25px;
248
		background:white;
249
		display:none; z-index:100;
250
		
251
		.buttons {
252
			margin-bottom:0;
253
			
254
			a {
255
				margin-right:20px;
256
			}
257
		}
258
	}
259
}
260

  
261

  
262

  
263
.btn4 {
264
  color: white;
265
  border-color:  $secondary-color;
266
  background:  $secondary-color;
267
  &:hover, .current {
268
  	color: $secondary-color;
269
  	border-color:  $secondary-color;
270
  	background: white;
271
  }
272
}
273

  
274

  
275

  
276

  
277
.overlay .lt-sidebar.nav ul li:hover  {
278
	background-color: transparent;
279
}
280

  
281
.lt-sidebar.nav {
282
	font-size: 1em
283
}
284

  
285
.overlay {
286
	.lt-sidebar.nav  {
287
	overflow: auto;
288
	}
289
	/* styles for close icons (created with fontIcon "snf-font") */
290
	.close_char {
291
		background: none;
292
		text-indent: 0;
293
		font-size: 1.8em; /* for the the character e (for d we can put 2em) */
294
		color: white;
295
	}
296
}
297

  
298

  
299
/* create network styles */
300

  
301
.create-network {
302
	color: white;
303
	.check {
304
		color: white;
305
	}
306
	p {
307
		font-size: 0.8em;
308
		font-style: italic;
309
		margin: 5px 0 0;
310
		width: 545px;
311
	}
312

  
313
	li {
314
		list-style: none outside none;
315
	}
316
	.custom_checkbox {
317
		font-size: 1.3em;
318
	}
319
}
320

  
321
.subnet_options {
322
	margin: 0;
323
	li {
324
		margin-bottom: 6px;
325
		padding-left: 155px;
326
	}
327
}
328

  
329

  
330

  
331

  
332
.network_options {
333
	position: relative;
334
	width: 350px;
335
	min-height: 285px;
336
	
337
	.check {
338
		position: absolute;
339
		right: 0;
340
	}
341
	
342
	li {
343
		display: block;
344
		margin-bottom: 13px;
345
	
346
		form {
347
			margin: 0;
348
			
349
			input {
350
				position: absolute;
351
				display: inline-block;
352
				right: 0;
353
				width: 200px;
354
				height: 20px;
355
				font-size: 0.9em;
356
				
357
				&.hidden {
358
					display: none;
359
				}
360
			}
361
		}
362
		&.manual form input {
363
			right: -160px;
364
			width: 150px;
365
		}
366
	}
367
}
368

  
369

  
370
span.sub_title {
371
	position: absolute;
372
}
373

  
374

  
375
/* pithos: list of uploading files */
376

  
377
.upload-widget {
378
	.files {
379
		color: white;
380
		
381
		li {
382
			padding: 10px 120px;
383
			border: none;
384
			position: relative;
385
			
386
			.name-col {
387
				width: 34%;
388
			}
389

  
390
			.size-col {
391
				text-align: left;
392
				float: none;
393
			}
394

  
395
			.dz-success-mark {
396
				margin-left:10px;
397
			}
398

  
399
			.dz-error-mark {
400
				display: none;
401
			}
402
			.cancel-col {
403
				width: 100px;
404
				position: absolute;
405
				right: 50px;
406
				top: 9px;
407
				
408
				.cancel span {
409
					display: block;
410
					text-align: right;
411
				}
412
			}
413
		}
414
		div {
415
			display: inline-block;
416
		}
417
		.progress-bar {
418
			position: static;
419
			padding: 0;
420
			width: 25%;
421
			border: none;
422
			background-color: transparent;
423
			
424
			.progress-wrap {
425
				width: 100%;
426
				margin: 0;
427
			
428
				.progress {
429
					display: block;
430
					margin: 0;
431
					border: 2px solid white;
432
					padding: 0;
433
					background-color:  $secondary-color;
434
				
435
					.meter {
436
						background-color: white;
437
					}
438
				}
439
			}
440
		}
441
	}
442
}
b/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css
6803 6803
  clear: both;
6804 6804
}
6805 6805

  
6806
/* line 87, ../sass/app.scss */
6807
.btn1, .btn2, .btn3, .create-vm .select-flavor dl dt span, .upload-widget .btns a, .btn4, .header .new-btn a, .details .top .actions ul li a {
6806
/* line 86, ../sass/app.scss */
6807
a {
6808
  color: #3582ac;
6809
}
6810
/* line 88, ../sass/app.scss */
6811
a:hover {
6812
  color: #919194;
6813
  -webkit-transition: background 300ms ease-out;
6814
  -moz-transition: background 300ms ease-out;
6815
  -ms-transition: background 300ms ease-out;
6816
  -o-transition: background 300ms ease-out;
6817
  transition: background 300ms ease-out;
6818
}
6819

  
6820
/* line 95, ../sass/app.scss */
6821
.btn1, .btn2, .btn3, .create-vm .select-flavor dl dt span, .upload-widget .btns a, .btn4, .btn-img, .header .new-btn a, .details .top .actions ul li a {
6808 6822
  border: 1px solid #919194;
6809 6823
  color: #919194;
6810 6824
  display: inline-block;
......
6812 6826
  line-height: 1em;
6813 6827
  text-align: center;
6814 6828
}
6815
/* line 95, ../sass/app.scss */
6816
.btn1:hover, .btn2:hover, .btn3:hover, .create-vm .select-flavor dl dt span:hover, .upload-widget .btns a:hover, .btn4:hover, .header .new-btn a:hover, .details .top .actions ul li a:hover, .btn1.current, .current.btn2, .current.btn3, .create-vm .select-flavor dl dt span.current, .upload-widget .btns a.current, .current.btn4, .header .new-btn a.current, .details .top .actions ul li a.current {
6829
/* line 103, ../sass/app.scss */
6830
.btn1:hover, .btn2:hover, .btn3:hover, .create-vm .select-flavor dl dt span:hover, .upload-widget .btns a:hover, .btn4:hover, .btn-img:hover, .header .new-btn a:hover, .details .top .actions ul li a:hover, .btn1.current, .current.btn2, .current.btn3, .create-vm .select-flavor dl dt span.current, .upload-widget .btns a.current, .current.btn4, .current.btn-img, .header .new-btn a.current, .details .top .actions ul li a.current {
6817 6831
  border-color: #3582ac;
6818 6832
  background: #3582ac;
6819
  color: white;
6833
  color: #fff;
6820 6834
}
6821
/* line 100, ../sass/app.scss */
6822
.btn1.current, .current.btn2, .current.btn3, .create-vm .select-flavor dl dt span.current, .upload-widget .btns a.current, .current.btn4, .header .new-btn a.current, .details .top .actions ul li a.current {
6835
/* line 108, ../sass/app.scss */
6836
.btn1.current, .current.btn2, .current.btn3, .create-vm .select-flavor dl dt span.current, .upload-widget .btns a.current, .current.btn4, .current.btn-img, .header .new-btn a.current, .details .top .actions ul li a.current {
6823 6837
  cursor: default;
6824 6838
}
6825 6839

  
6826
/* line 106, ../sass/app.scss */
6840
/* line 114, ../sass/app.scss */
6827 6841
.btn2 {
6828 6842
  color: #3582ac;
6829
  background: white;
6843
  background: #fff;
6830 6844
  border-color: #3582ac;
6831 6845
}
6832
/* line 112, ../sass/app.scss */
6846
/* line 120, ../sass/app.scss */
6833 6847
.btn2:hover, .btn2.current {
6834 6848
  background: transparent;
6835
  border-color: white;
6849
  border-color: #fff;
6836 6850
}
6837 6851

  
6838
/* line 119, ../sass/app.scss */
6852
/* line 127, ../sass/app.scss */
6839 6853
.btn3, .create-vm .select-flavor dl dt span, .upload-widget .btns a {
6840
  color: white;
6841
  border-color: white;
6854
  color: #fff;
6855
  border-color: #fff;
6842 6856
}
6843
/* line 124, ../sass/app.scss */
6857
/* line 132, ../sass/app.scss */
6844 6858
.btn3:hover, .create-vm .select-flavor dl dt span:hover, .upload-widget .btns a:hover, .btn3.current, .create-vm .select-flavor dl dt span.current, .upload-widget .btns a.current {
6845 6859
  color: #3582ac;
6846
  background: white;
6847
  border-color: white;
6860
  background: #fff;
6861
  border-color: #fff;
6848 6862
}
6849 6863

  
6850
/* line 133, ../sass/app.scss */
6864
/* line 141, ../sass/app.scss */
6851 6865
.btn4 {
6852
  color: white;
6853
  border-color: white;
6854
  background: #00a551;
6866
  color: #fff;
6867
  border-color: #fff;
6868
  background: #3582ac;
6855 6869
}
6856
/* line 139, ../sass/app.scss */
6870
/* line 147, ../sass/app.scss */
6857 6871
.btn4:hover, .btn4.current {
6858
  border-color: white;
6859
  background: #00592b;
6872
  color: #3582ac;
6873
  border-color: #3582ac;
6874
  background: white;
6860 6875
}
6861 6876

  
6862
/* line 146, ../sass/app.scss */
6863
a:hover {
6864
  -webkit-transition: background 300ms ease-out;
6865
  -moz-transition: background 300ms ease-out;
6866
  -ms-transition: background 300ms ease-out;
6867
  -o-transition: background 300ms ease-out;
6868
  transition: background 300ms ease-out;
6877
/* line 157, ../sass/app.scss */
6878
.btn-img {
6879
  border-color: #3582ac;
6880
}
6881
/* line 160, ../sass/app.scss */
6882
.btn-img:hover {
6883
  background: transparent;
6884
}
6885
/* line 164, ../sass/app.scss */
6886
.btn-img a img, .btn-img a span {
6887
  margin-left: 5px;
6869 6888
}
6870 6889

  
6871
/* line 150, ../sass/app.scss */
6890
/* line 170, ../sass/app.scss */
6872 6891
.dummy-navigation {
6873 6892
  display: none;
6874 6893
  position: fixed;
......
6879 6898
  z-index: 100;
6880 6899
  line-height: 160%;
6881 6900
}
6882
/* line 159, ../sass/app.scss */
6901
/* line 179, ../sass/app.scss */
6883 6902
.dummy-navigation a {
6884 6903
  color: #333333;
6885 6904
}
6886
/* line 161, ../sass/app.scss */
6905
/* line 181, ../sass/app.scss */
6887 6906
.dummy-navigation a:hover {
6888 6907
  color: white;
6889 6908
}
6890
/* line 162, ../sass/app.scss */
6909
/* line 182, ../sass/app.scss */
6891 6910
.dummy-navigation a.open {
6892
  color: white;
6911
  color: #fff;
6893 6912
}
6894
/* line 163, ../sass/app.scss */
6913
/* line 183, ../sass/app.scss */
6895 6914
.dummy-navigation a.close {
6896 6915
  float: right;
6897 6916
  font-weight: bold;
6898 6917
  font-size: 20px;
6899 6918
}
6900 6919

  
6901
/* line 171, ../sass/app.scss */
6920
/* line 191, ../sass/app.scss */
6902 6921
.ours {
6903 6922
  padding: 8px 15px;
6904
  color: white;
6923
  color: #fff;
6905 6924
  font-size: 20px;
6906 6925
  font-weight: bold;
6907 6926
  background: #cc0;
6908 6927
  display: none;
6909 6928
  position: absolute;
6910 6929
}
6911
/* line 179, ../sass/app.scss */
6930
/* line 199, ../sass/app.scss */
6912 6931
.ours.questions {
6913 6932
  background: orange;
6914 6933
}
6915
/* line 180, ../sass/app.scss */
6934
/* line 200, ../sass/app.scss */
6916 6935
.ours.problems {
6917 6936
  background: red;
6918 6937
}
6919
/* line 181, ../sass/app.scss */
6938
/* line 201, ../sass/app.scss */
6920 6939
.ours.suggestions {
6921 6940
  background: #3EC9FF;
6922 6941
}
6923 6942

  
6924
/* line 186, ../sass/app.scss */
6943
/* line 206, ../sass/app.scss */
6925 6944
.row-full {
6926 6945
  max-width: 100%;
6927 6946
  margin: 0 auto;
6928 6947
}
6929 6948

  
6930
/* line 191, ../sass/app.scss */
6949
/* line 211, ../sass/app.scss */
6931 6950
.lt-sidebar {
6932 6951
  width: 250px;
6933 6952
  float: left;
6934 6953
}
6935
/* line 194, ../sass/app.scss */
6954
/* line 214, ../sass/app.scss */
6936 6955
.lt-sidebar.nav {
6937 6956
  margin-top: 0;
6957
  font-size: 1em;
6958
  overflow: auto;
6938 6959
}
6939
/* line 197, ../sass/app.scss */
6960
/* line 219, ../sass/app.scss */
6940 6961
.lt-sidebar + .main {
6941 6962
  overflow: hidden;
6942 6963
}
6943 6964

  
6944
/* line 202, ../sass/app.scss */
6965
/* line 224, ../sass/app.scss */
6945 6966
.main {
6946 6967
  padding: 43px 40px;
6947 6968
}
6948 6969

  
6949
/* line 206, ../sass/app.scss */
6970
/* line 228, ../sass/app.scss */
6950 6971
body.with-overlay {
6951 6972
  background: #3582ac;
6952 6973
}
6953 6974

  
6954
/* line 210, ../sass/app.scss */
6975
/* line 232, ../sass/app.scss */
6955 6976
.header {
6956 6977
  position: relative;
6957 6978
  padding: 1.25em 2.5em;
6958 6979
  border-bottom: 1px solid #919194;
6959
  background: white;
6980
  background: #fff;
6960 6981
}
6961
/* line 215, ../sass/app.scss */
6982
/* line 237, ../sass/app.scss */
6962 6983
.header .logo {
6963 6984
  text-align: center;
6964 6985
}
6965
/* line 217, ../sass/app.scss */
6986
/* line 239, ../sass/app.scss */
6966 6987
.header .logo img {
6967 6988
  max-height: 30px;
6968 6989
}
6969
/* line 221, ../sass/app.scss */
6990
/* line 243, ../sass/app.scss */
6970 6991
.header .actions {
6971 6992
  text-align: center;
6972 6993
  height: 45px;
......
6974 6995
  position: relative;
6975 6996
  margin: 2.5em 0 1.25em;
6976 6997
}
6977
/* line 227, ../sass/app.scss */
6998
/* line 249, ../sass/app.scss */
6978 6999
.header .actions .main-actions {
6979 7000
  position: relative;
6980 7001
  top: 86px;
......
6982 7003
  border-bottom: 1px solid #c5c5c6;
6983 7004
  z-index: 1;
6984 7005
}
6985
/* line 234, ../sass/app.scss */
7006
/* line 256, ../sass/app.scss */
6986 7007
.header .actions ul {
6987 7008
  margin: 0;
6988 7009
}
6989
/* line 236, ../sass/app.scss */
7010
/* line 258, ../sass/app.scss */
6990 7011
.header .actions ul li {
6991 7012
  list-style: none outside none;
6992 7013
  display: inline-block;
6993 7014
  margin: 0 5px;
6994 7015
}
6995
/* line 240, ../sass/app.scss */
7016
/* line 262, ../sass/app.scss */
6996 7017
.header .actions ul li a {
6997 7018
  display: block;
6998 7019
  color: #dfdfdf;
......
7000 7021
  padding: 8px 20px;
7001 7022
  border: 1px solid transparent;
7002 7023
}
7003
/* line 246, ../sass/app.scss */
7024
/* line 268, ../sass/app.scss */
7004 7025
.header .actions ul li a.active {
7005 7026
  color: #919194;
7006 7027
}
7007
/* line 248, ../sass/app.scss */
7028
/* line 270, ../sass/app.scss */
7008 7029
.header .actions ul li a.active:hover {
7009 7030
  color: #3582ac;
7010 7031
  cursor: pointer;
7011 7032
}
7012
/* line 253, ../sass/app.scss */
7033
/* line 275, ../sass/app.scss */
7013 7034
.header .actions ul li a:hover {
7014 7035
  cursor: default;
7015 7036
}
7016
/* line 261, ../sass/app.scss */
7037
/* line 283, ../sass/app.scss */
7017 7038
.header .new-btn {
7018 7039
  position: absolute;
7019 7040
  left: 0;
7020 7041
  bottom: 0;
7021 7042
}
7022
/* line 267, ../sass/app.scss */
7043
/* line 289, ../sass/app.scss */
7023 7044
.header .new-btn a span {
7024 7045
  font-size: 1.25em;
7025 7046
}
7026 7047

  
7027
/* line 273, ../sass/app.scss */
7048
/* line 295, ../sass/app.scss */
7028 7049
.login {
7029 7050
  position: absolute;
7030 7051
  right: 2.5em;
7031 7052
  top: 1.25em;
7032 7053
}
7033 7054

  
7034
/* line 279, ../sass/app.scss */
7055
/* line 301, ../sass/app.scss */
7035 7056
.top-nav {
7036 7057
  position: absolute;
7037 7058
  left: 2.5em;
7038 7059
  top: 1.25em;
7039 7060
}
7040
/* line 283, ../sass/app.scss */
7061
/* line 305, ../sass/app.scss */
7041 7062
.top-nav ul {
7042 7063
  margin: 0;
7043 7064
  padding: 0;
7044 7065
}
7045
/* line 285, ../sass/app.scss */
7066
/* line 307, ../sass/app.scss */
7046 7067
.top-nav ul li {
7047 7068
  display: inline-block;
7048 7069
  margin-right: 15px;
7049 7070
}
7050
/* line 288, ../sass/app.scss */
7071
/* line 310, ../sass/app.scss */
7051 7072
.top-nav ul li a {
7052 7073
  padding-bottom: 5px;
7053 7074
}
7054 7075

  
7055
/* line 299, ../sass/app.scss */
7076
/* line 321, ../sass/app.scss */
7056 7077
.top-info {
7057 7078
  padding: 50px 100px;
7058 7079
  position: relative;
7059 7080
  z-index: 10;
7060 7081
  display: none;
7061 7082
}
7062
/* line 304, ../sass/app.scss */
7083
/* line 326, ../sass/app.scss */
7063 7084
.top-info .close {
7064 7085
  position: absolute;
7065 7086
  right: 2.5em;
......
7072 7093
  overflow: hidden;
7073 7094
}
7074 7095

  
7075
/* line 313, ../sass/app.scss */
7096
/* line 335, ../sass/app.scss */
7076 7097
.info.error {
7077 7098
  background: #ff5c58;
7078
  color: white;
7099
  color: #fff;
7079 7100
}
7080 7101

  
7081
/* line 319, ../sass/app.scss */
7102
/* line 341, ../sass/app.scss */
7082 7103
.info.alert {
7083 7104
  background: #3582ac;
7084
  color: white;
7105
  color: #fff;
7085 7106
}
... This diff was truncated because it exceeds the maximum size that can be displayed.

Also available in: Unified diff