Revision 5e62e9c1

b/snf-cyclades-app/synnefo/ui/new_ui/ui/index.html
30 30
 				<li><a href="vm_create_a_v1.html">Create new machine</a> (kpal original design)</li>
31 31
 				
32 32
 			</ul>
33
 			
33
 			<!--
34 34
 			<h2>Kpal designs with our suggestions</h2>
35 35
 			<ul>
36 36
 				<li><a href="vm_list_v2.html">VMs list page</a> (kpal with our suggestions)</li>
37 37
	 			
38 38
 			</ul>
39
 		
39
 		-->
40 40
 	</div>
41 41

  
42 42
  <script>
b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/common.js
22 22
	$('.lt-sidebar').height(ltSidebarHeight);
23 23
}
24 24

  
25
ui.cntCheckbox = function(){ 
26
	var all = $('.options .checkbox-checked').length;
27
	var running = $('.options .checkbox-checked').parents('.container').find('.img.running').length;
28
	var stopped = $('.options .checkbox-checked').parents('.container').find('.img.stopped').length;
29
    $('.header .main-actions li a').removeClass('active');  
30
    if ( (running*stopped) > 0 ){          
31
         $('.header .main-actions li.both a').addClass('active');   
32
         $('.header .main-actions li.single a').removeClass('active');   
33
    } else {
34
        if (running > 0) {
35
         	$('.header .main-actions li.both a').addClass('active');   
36
         	$('.header .main-actions li.running a').addClass('active');   
37
        } else if (stopped>0) {
38
        	$('.header .main-actions li.both a').addClass('active');   
39
        	$('.header .main-actions li.stopped a').addClass('active');   
40

  
41
        } else {
42

  
43
        }
44
        if ( all > 1 ) {
45
        	$('.header .main-actions li.single a').removeClass('active');   
46
        }
47

  
48
    }
49
}
50
ui.VMactionsInit = function(){
51

  
52
	// if VM is stopped hide connect option 
53
	$('.vms li .container .stopped').parents('.container').find('.options .connect').hide();
54

  
55
	var vm_container = $('.vms li .container');
56
	var vm_img = vm_container.find('.img-wrap');
57

  
58
	vm_img.mouseenter(
59
      function (e) {
60
        $(this).parents('.container').find('.options').slideDown();
61
      }
62
    );
63

  
64
    $('li .container .options').mouseleave(
65
        function(e){
66
        	var checkbox = $(this).find('.custom_checkbox');
67

  
68
	        if (checkbox.hasClass('checkbox-checked')){
69
	            checkbox.parents('.container').find('.more_checkbox').html(checkbox.clone());
70
	            
71
	        } else {
72
	        	 checkbox.parents('.container').find('.more_checkbox').html('');
73
	        }
74
            $('li .container .options').hide();
75
            
76
            
77
        }
78
    );
79

  
80
    $('li .container .check').click(function(e){
81
        e.preventDefault();
82
        var checkbox = $(this).find('.custom_checkbox');
83

  
84
        checkbox.toggleClass('checkbox-checked');
85
        
86
        if(checkbox.hasClass('checkbox-checked')){
87
            checkbox.html('b');
88
        }
89
        else{
90
            checkbox.html('a'); 
91
      
92
        }
93
        ui.cntCheckbox();
94
    })
95
}
25 96

  
26 97

  
27 98
$(document).ready(function(){
......
55 126
		e.preventDefault();
56 127
	})
57 128

  
58
	
59

  
129
	ui.VMactionsInit();
130
	$('.main-actions li a').click(function(e){
131
		if (!($(this).hasClass('active'))) {
132
			e.preventDefault();
133
		}
134
	})
60 135

  
61 136
})
62 137

  
b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/common_ab.js
1 1
$(document).ready(function(){
2 2

  
3 3
    //show selection window of vm_list_v1.html
4

  
5
    
6

  
7

  
8

  
9

  
10

  
11
/*
4 12
    var vm_options_win;
5
    $('li .vm_container').mouseenter(function(event){
13
    $('li .container .img').mouseenter(function(event){
6 14
        event.preventDefault();
7
        vm_options_win = $(this).find('.vm_options');
15
        var container = $(this).parents('.container');
16
        container.css('border-color','grey');
17
        vm_options_win = $(this).parents('.vm_container').find('.vm_options');
8 18
        if(vm_options_win.length!==0){
9 19
            vm_options_win.removeClass('invisible');
10 20
            vm_options_win.slideDown('slow');
......
12 22

  
13 23
    }).mouseleave(function(event){
14 24
        event.preventDefault();
25
        event.stopPropagation();
15 26
        if(!vm_options_win.hasClass('invisible'))
16 27
        {
17
            vm_options_win.slideUp('slow');
28
            vm_options_win.hide();
18 29
            vm_options_win.addClass('invisible');
19 30
        }
20 31
    })
21 32

  
22
    //checkbox in selection window of vm_list_v1.html
23
    $('.vm_options .select').click(function(event){
33
    $('.options .select').click(function(event){
24 34
        event.preventDefault();
25 35
        var checkbox = $(this).find('.custom_checkbox');
26 36

  
......
35 45
            checkbox.addClass('checkbox-unchecked');
36 46

  
37 47
        }
38
        var cntCheckbox = $('.vm_options .checkbox-checked').length;
48
        var cntCheckbox = $('.options .checkbox-checked').length;
39 49
        if (cntCheckbox == 0 ){
40 50
             $('.header .main-actions').hide();   
41 51
        } else {
......
47 57
            }
48 58
        }
49 59
    });
60
*/
50 61
   
51 62
});
b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_settings.scss
777 777
//
778 778

  
779 779
// We use these to control the style of the reveal overlay.
780
// $reveal-overlay-bg: rgba(#000, .45);
780
$reveal-overlay-bg: rgba(#000, .80);
781 781
// $reveal-overlay-bg-old: #000;
782 782

  
783 783
// We use these to control the style of the modal itself.
b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/app.scss
220 220
		position:relative;
221 221
		margin:2*$header-padding-vertical 0 $header-padding-vertical;
222 222
		.main-actions {
223
			display: none;
223
			position:relative;
224
			top:95px;
224 225
		}
225 226
		ul {
226 227
			margin:0;
......
230 231
				margin:0 5px;
231 232
				a {
232 233
					display: block;
234
					color:lighten($primary-color,30%);
233 235
					width:100%;
234 236
					padding:8px 20px;
235 237
					border:1px solid transparent;
238
					&.active {
239
						color:$primary-color;
240
						&:hover {
241
							border:1px solid $secondary-color;
242
							cursor: pointer;
243
						}
244
					}
236 245
					&:hover {
237
						border:1px solid $secondary-color;
246
						cursor:default;
238 247
					}
248

  
239 249
				}
240 250
			}
241 251
		}
......
281 291
.top-info {
282 292
	padding:50px 100px;
283 293
	position: relative;
294
	display:none;
284 295
	.close {
285 296
		position: absolute;
286 297
		right:$header-padding-horizontal;
......
312 323
}
313 324

  
314 325
.items-list {
315
	padding:50px 0;
326
	padding:25px 0;
316 327
	li {
317 328
		text-align:center;
318 329
		padding:20px;
......
327 338
.vms {
328 339
	.items-list {
329 340
		li {
341
			.add-new {
342
				a {
343
					margin:0 20px;
344
					display: block;
345
					font-weight: bold;
346
					height:190px;
347
					padding:65px 30px 15px;
348
					border:2px dashed $primary-color;
349
					&:hover {
350
						border-color:$secondary-color;
351
						color:$secondary-color;
352
					}
353
				}			
354
			}
330 355
			.img {
331 356
				@include sprite('../images/vm-on.png', 56px, 58px);
332 357
				margin-bottom: 20px;
......
343 368
					&.kubuntu { background-image:url('../images/os-kubuntu.png'); }
344 369
					&.fedora { background-image:url('../images/os-fedora.png'); }
345 370
				}
371
			
372
			}
373
			
374
			.container {
375
				border:1px solid transparent;
376
				margin: 0 20px;
377
				padding:20px 0;
378
				position: relative;
379
				.options {
380
					width:100%;
381
					height:100%;
382
					background:$white;
383

  
384
					position: absolute;
385
					top:0;
386
					left:0;
387
					display: none;
388
					z-index: 1;
389
					.wrap {
390
						height:190px;
391
						padding:15px 30px;
392
						text-align: left;
393
						border:1px solid $secondary-color;
394
						a {
395
							font-size:emCalc(27px);
396
							color:$primary-color;
397
							line-height: 45px;
398
							font-weight: bold;
399
							.custom_checkbox {
400
								color:$secondary-color;
401
								position:relative;
402
								top:5px;
403
							}
404
							span {
405
								float:right;
406
							}
407
							&:hover {
408
								color: $secondary-color;
409
							}
410
						}
411
					}
412
				}
346 413
			}
414
			.more_checkbox {
415
				position:absolute;
416
				right:31px;
417
				top:15px;
418
				color:$secondary-color;
419
				font-weight: bold;
420
				font-size:emCalc(27px);
421

  
422
			}
423

  
347 424
		}
348 425
	}
349 426
}
......
552 629
	}
553 630
}
554 631

  
632
#vm-connect {
633
	.info {
634
		font-style:italic;
635
		font-size:emCalc(13px);
636
		color: lighten($primary-color,5%);
637
	}
638
	.ssh {
639
		text-align: center;
640
		span {
641
			padding: 10px 30px;
642
			background:$secondary-color;
643
			color:$white;
644
		}
645
	}
646
	a:hover { color: $secondary-color;}
647
}
648

  
555 649

  
b/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css
4931 4931
  height: 100%;
4932 4932
  width: 100%;
4933 4933
  background: black;
4934
  background: rgba(0, 0, 0, 0.45);
4934
  background: rgba(0, 0, 0, 0.6);
4935 4935
  z-index: 98;
4936 4936
  display: none;
4937 4937
  top: 0;
......
6967 6967
}
6968 6968
/* line 222, ../sass/app.scss */
6969 6969
.header .actions .main-actions {
6970
  display: none;
6970
  position: relative;
6971
  top: 95px;
6971 6972
}
6972
/* line 225, ../sass/app.scss */
6973
/* line 226, ../sass/app.scss */
6973 6974
.header .actions ul {
6974 6975
  margin: 0;
6975 6976
}
6976
/* line 227, ../sass/app.scss */
6977
/* line 228, ../sass/app.scss */
6977 6978
.header .actions ul li {
6978 6979
  list-style: none outside none;
6979 6980
  display: inline-block;
6980 6981
  margin: 0 5px;
6981 6982
}
6982
/* line 231, ../sass/app.scss */
6983
/* line 232, ../sass/app.scss */
6983 6984
.header .actions ul li a {
6984 6985
  display: block;
6986
  color: #dfdfdf;
6985 6987
  width: 100%;
6986 6988
  padding: 8px 20px;
6987 6989
  border: 1px solid transparent;
6988 6990
}
6989
/* line 236, ../sass/app.scss */
6990
.header .actions ul li a:hover {
6991
/* line 238, ../sass/app.scss */
6992
.header .actions ul li a.active {
6993
  color: #919194;
6994
}
6995
/* line 240, ../sass/app.scss */
6996
.header .actions ul li a.active:hover {
6991 6997
  border: 1px solid #ff7bac;
6998
  cursor: pointer;
6992 6999
}
6993
/* line 243, ../sass/app.scss */
7000
/* line 245, ../sass/app.scss */
7001
.header .actions ul li a:hover {
7002
  cursor: default;
7003
}
7004
/* line 253, ../sass/app.scss */
6994 7005
.header .new-btn {
6995 7006
  position: absolute;
6996 7007
  left: 0;
6997 7008
  bottom: 0;
6998 7009
}
6999
/* line 249, ../sass/app.scss */
7010
/* line 259, ../sass/app.scss */
7000 7011
.header .new-btn a span {
7001 7012
  font-size: 1.25em;
7002 7013
}
7003 7014

  
7004
/* line 255, ../sass/app.scss */
7015
/* line 265, ../sass/app.scss */
7005 7016
.login {
7006 7017
  position: absolute;
7007 7018
  right: 2.5em;
7008 7019
  top: 1.25em;
7009 7020
}
7010 7021

  
7011
/* line 261, ../sass/app.scss */
7022
/* line 271, ../sass/app.scss */
7012 7023
.top-nav {
7013 7024
  position: absolute;
7014 7025
  left: 2.5em;
7015 7026
  top: 1.25em;
7016 7027
}
7017
/* line 265, ../sass/app.scss */
7028
/* line 275, ../sass/app.scss */
7018 7029
.top-nav ul {
7019 7030
  margin: 0;
7020 7031
  padding: 0;
7021 7032
}
7022
/* line 267, ../sass/app.scss */
7033
/* line 277, ../sass/app.scss */
7023 7034
.top-nav ul li {
7024 7035
  display: inline-block;
7025 7036
  margin-right: 15px;
7026 7037
}
7027
/* line 270, ../sass/app.scss */
7038
/* line 280, ../sass/app.scss */
7028 7039
.top-nav ul li a {
7029 7040
  padding-bottom: 5px;
7030 7041
}
7031 7042

  
7032
/* line 281, ../sass/app.scss */
7043
/* line 291, ../sass/app.scss */
7033 7044
.top-info {
7034 7045
  padding: 50px 100px;
7035 7046
  position: relative;
7047
  display: none;
7036 7048
}
7037
/* line 284, ../sass/app.scss */
7049
/* line 295, ../sass/app.scss */
7038 7050
.top-info .close {
7039 7051
  position: absolute;
7040 7052
  right: 2.5em;
......
7047 7059
  overflow: hidden;
7048 7060
}
7049 7061

  
7050
/* line 293, ../sass/app.scss */
7062
/* line 304, ../sass/app.scss */
7051 7063
.info.error {
7052 7064
  background: #ff5c58;
7053 7065
  color: white;
7054 7066
}
7055 7067

  
7056
/* line 299, ../sass/app.scss */
7068
/* line 310, ../sass/app.scss */
7057 7069
.info.alert {
7058 7070
  background: #ff7bac;
7059 7071
  color: white;
7060 7072
}
7061 7073

  
7062
/* line 304, ../sass/app.scss */
7074
/* line 315, ../sass/app.scss */
7063 7075
.info.warning {
7064 7076
  background: #919194;
7065 7077
  color: white;
7066 7078
}
7067 7079

  
7068
/* line 309, ../sass/app.scss */
7080
/* line 320, ../sass/app.scss */
7069 7081
.info.success {
7070 7082
  background: #00a551;
7071 7083
  color: white;
7072 7084
}
7073 7085

  
7074
/* line 314, ../sass/app.scss */
7086
/* line 325, ../sass/app.scss */
7075 7087
.items-list {
7076
  padding: 50px 0;
7088
  padding: 25px 0;
7077 7089
}
7078
/* line 316, ../sass/app.scss */
7090
/* line 327, ../sass/app.scss */
7079 7091
.items-list li {
7080 7092
  text-align: center;
7081 7093
  padding: 20px;
7082 7094
}
7083
/* line 320, ../sass/app.scss */
7095
/* line 331, ../sass/app.scss */
7084 7096
.items-list li .visible-info span {
7085 7097
  display: block;
7086 7098
}
7087 7099

  
7088
/* line 330, ../sass/app.scss */
7100
/* line 342, ../sass/app.scss */
7101
.vms .items-list li .add-new a {
7102
  margin: 0 20px;
7103
  display: block;
7104
  font-weight: bold;
7105
  height: 190px;
7106
  padding: 65px 30px 15px;
7107
  border: 2px dashed #919194;
7108
}
7109
/* line 349, ../sass/app.scss */
7110
.vms .items-list li .add-new a:hover {
7111
  border-color: #ff7bac;
7112
  color: #ff7bac;
7113
}
7114
/* line 355, ../sass/app.scss */
7089 7115
.vms .items-list li .img {
7090 7116
  background: url("../images/vm-on.png") no-repeat center center;
7091 7117
  width: 56px;
......
7096 7122
  margin-bottom: 20px;
7097 7123
  position: relative;
7098 7124
}
7099
/* line 334, ../sass/app.scss */
7125
/* line 359, ../sass/app.scss */
7100 7126
.vms .items-list li .img.stopped {
7101 7127
  background-image: url("../images/vm-stopped.png");
7102 7128
}
7103
/* line 337, ../sass/app.scss */
7129
/* line 362, ../sass/app.scss */
7104 7130
.vms .items-list li .img .os {
7105 7131
  background: url("../images/os-unknown.png") no-repeat center center;
7106 7132
  width: 22px;
......
7112 7138
  top: 8px;
7113 7139
  left: 18px;
7114 7140
}
7115
/* line 342, ../sass/app.scss */
7141
/* line 367, ../sass/app.scss */
7116 7142
.vms .items-list li .img .os.windows {
7117 7143
  background-image: url("../images/os-windows.png");
7118 7144
}
7119
/* line 343, ../sass/app.scss */
7145
/* line 368, ../sass/app.scss */
7120 7146
.vms .items-list li .img .os.kubuntu {
7121 7147
  background-image: url("../images/os-kubuntu.png");
7122 7148
}
7123
/* line 344, ../sass/app.scss */
7149
/* line 369, ../sass/app.scss */
7124 7150
.vms .items-list li .img .os.fedora {
7125 7151
  background-image: url("../images/os-fedora.png");
7126 7152
}
7153
/* line 374, ../sass/app.scss */
7154
.vms .items-list li .container {
7155
  border: 1px solid transparent;
7156
  margin: 0 20px;
7157
  padding: 20px 0;
7158
  position: relative;
7159
}
7160
/* line 379, ../sass/app.scss */
7161
.vms .items-list li .container .options {
7162
  width: 100%;
7163
  height: 100%;
7164
  background: white;
7165
  position: absolute;
7166
  top: 0;
7167
  left: 0;
7168
  display: none;
7169
  z-index: 1;
7170
}
7171
/* line 389, ../sass/app.scss */
7172
.vms .items-list li .container .options .wrap {
7173
  height: 190px;
7174
  padding: 15px 30px;
7175
  text-align: left;
7176
  border: 1px solid #ff7bac;
7177
}
7178
/* line 394, ../sass/app.scss */
7179
.vms .items-list li .container .options .wrap a {
7180
  font-size: 1.6875em;
7181
  color: #919194;
7182
  line-height: 45px;
7183
  font-weight: bold;
7184
}
7185
/* line 399, ../sass/app.scss */
7186
.vms .items-list li .container .options .wrap a .custom_checkbox {
7187
  color: #ff7bac;
7188
  position: relative;
7189
  top: 5px;
7190
}
7191
/* line 404, ../sass/app.scss */
7192
.vms .items-list li .container .options .wrap a span {
7193
  float: right;
7194
}
7195
/* line 407, ../sass/app.scss */
7196
.vms .items-list li .container .options .wrap a:hover {
7197
  color: #ff7bac;
7198
}
7199
/* line 414, ../sass/app.scss */
7200
.vms .items-list li .more_checkbox {
7201
  position: absolute;
7202
  right: 31px;
7203
  top: 15px;
7204
  color: #ff7bac;
7205
  font-weight: bold;
7206
  font-size: 1.6875em;
7207
}
7127 7208

  
7128
/* line 351, ../sass/app.scss */
7209
/* line 428, ../sass/app.scss */
7129 7210
.lt-sidebar.vms {
7130 7211
  overflow: scroll;
7131 7212
  height: 300px;
7132 7213
  font-size: 0.75em;
7133 7214
}
7134
/* line 355, ../sass/app.scss */
7215
/* line 432, ../sass/app.scss */
7135 7216
.lt-sidebar.vms .items-list {
7136 7217
  padding: 0;
7137 7218
}
7138
/* line 359, ../sass/app.scss */
7219
/* line 436, ../sass/app.scss */
7139 7220
.lt-sidebar.vms .items-list li .img,
7140 7221
.lt-sidebar.vms .items-list li .os {
7141 7222
  background-size: 80%;
7142 7223
}
7143
/* line 363, ../sass/app.scss */
7224
/* line 440, ../sass/app.scss */
7144 7225
.lt-sidebar.vms li:hover,
7145 7226
.lt-sidebar.vms li.current {
7146 7227
  background: #dfdfdf;
7147 7228
  cursor: pointer;
7148 7229
}
7149 7230

  
7150
/* line 370, ../sass/app.scss */
7231
/* line 447, ../sass/app.scss */
7151 7232
.vm .img {
7152 7233
  background: url("../images/vm-on.png") no-repeat center center;
7153 7234
  width: 56px;
......
7158 7239
  margin-bottom: 20px;
7159 7240
  position: relative;
7160 7241
}
7161
/* line 374, ../sass/app.scss */
7242
/* line 451, ../sass/app.scss */
7162 7243
.vm .img.stopped {
7163 7244
  background-image: url("../images/vm-stopped.png");
7164 7245
}
7165
/* line 377, ../sass/app.scss */
7246
/* line 454, ../sass/app.scss */
7166 7247
.vm .img .os {
7167 7248
  background: url("../images/os-unknown.png") no-repeat center center;
7168 7249
  width: 22px;
......
7174 7255
  top: 8px;
7175 7256
  left: 18px;
7176 7257
}
7177
/* line 382, ../sass/app.scss */
7258
/* line 459, ../sass/app.scss */
7178 7259
.vm .img .os.windows {
7179 7260
  background-image: url("../images/os-windows.png");
7180 7261
}
7181
/* line 383, ../sass/app.scss */
7262
/* line 460, ../sass/app.scss */
7182 7263
.vm .img .os.kubuntu {
7183 7264
  background-image: url("../images/os-kubuntu.png");
7184 7265
}
7185
/* line 384, ../sass/app.scss */
7266
/* line 461, ../sass/app.scss */
7186 7267
.vm .img .os.fedora {
7187 7268
  background-image: url("../images/os-fedora.png");
7188 7269
}
7189 7270

  
7190
/* line 389, ../sass/app.scss */
7271
/* line 466, ../sass/app.scss */
7191 7272
.details {
7192 7273
  position: relative;
7193 7274
}
7194
/* line 392, ../sass/app.scss */
7275
/* line 469, ../sass/app.scss */
7195 7276
.details .top {
7196 7277
  padding: 100px 2.5em;
7197 7278
  text-align: center;
7198 7279
}
7199
/* line 395, ../sass/app.scss */
7280
/* line 472, ../sass/app.scss */
7200 7281
.details .top .img {
7201 7282
  background: url("../images/vm-on.png") no-repeat center center;
7202 7283
  width: 112px;
......
7206 7287
  overflow: hidden;
7207 7288
  background-size: 100%;
7208 7289
}
7209
/* line 399, ../sass/app.scss */
7290
/* line 476, ../sass/app.scss */
7210 7291
.details .top .os {
7211 7292
  background-size: 100%;
7212 7293
  width: 44px;
......
7214 7295
  left: 36px;
7215 7296
  top: 16px;
7216 7297
}
7217
/* line 407, ../sass/app.scss */
7298
/* line 484, ../sass/app.scss */
7218 7299
.details .top .actions ul {
7219 7300
  padding: 1em;
7220 7301
  text-align: center;
7221 7302
}
7222
/* line 410, ../sass/app.scss */
7303
/* line 487, ../sass/app.scss */
7223 7304
.details .top .actions ul li {
7224 7305
  list-style: none outside none;
7225 7306
  display: inline-block;
7226 7307
  margin: 0 10px;
7227 7308
  min-width: 112px;
7228 7309
}
7229
/* line 425, ../sass/app.scss */
7310
/* line 502, ../sass/app.scss */
7230 7311
.details .info dl {
7231 7312
  margin: 0;
7232 7313
}
7233
/* line 427, ../sass/app.scss */
7314
/* line 504, ../sass/app.scss */
7234 7315
.details .info dl dt {
7235 7316
  display: inline-block;
7236 7317
  width: 25%;
7237 7318
  float: left;
7238 7319
}
7239
/* line 434, ../sass/app.scss */
7320
/* line 511, ../sass/app.scss */
7240 7321
.details .close {
7241 7322
  position: absolute;
7242 7323
  right: 2.5em;
......
7249 7330
  overflow: hidden;
7250 7331
}
7251 7332

  
7252
/* line 442, ../sass/app.scss */
7333
/* line 519, ../sass/app.scss */
7253 7334
.border-bottom-style1 {
7254 7335
  padding-bottom: 20px;
7255 7336
  margin-bottom: 20px;
7256 7337
  border-bottom: 2px dashed #919194;
7257 7338
}
7258 7339

  
7259
/* line 448, ../sass/app.scss */
7340
/* line 525, ../sass/app.scss */
7260 7341
.overlay {
7261 7342
  background: #ff7bac;
7262 7343
}
7263
/* line 450, ../sass/app.scss */
7344
/* line 527, ../sass/app.scss */
7264 7345
.overlay .lt-sidebar {
7265 7346
  border-right: 1px solid white;
7266 7347
}
7267
/* line 453, ../sass/app.scss */
7348
/* line 530, ../sass/app.scss */
7268 7349
.overlay .lt-sidebar ul li {
7269 7350
  list-style: none outside none;
7270 7351
}
7271
/* line 455, ../sass/app.scss */
7352
/* line 532, ../sass/app.scss */
7272 7353
.overlay .lt-sidebar ul li a {
7273 7354
  color: white;
7274 7355
}
7275
/* line 457, ../sass/app.scss */
7356
/* line 534, ../sass/app.scss */
7276 7357
.overlay .lt-sidebar ul li a span {
7277 7358
  float: right;
7278 7359
  display: none;
7279 7360
}
7280
/* line 459, ../sass/app.scss */
7361
/* line 536, ../sass/app.scss */
7281 7362
.overlay .lt-sidebar ul li a:hover, .overlay .lt-sidebar ul li a.current {
7282 7363
  text-decoration: none;
7283 7364
}
7284
/* line 462, ../sass/app.scss */
7365
/* line 539, ../sass/app.scss */
7285 7366
.overlay .lt-sidebar ul li a:hover span, .overlay .lt-sidebar ul li a.current span {
7286 7367
  display: inline;
7287 7368
}
7288
/* line 473, ../sass/app.scss */
7369
/* line 550, ../sass/app.scss */
7289 7370
.overlay .lt-sidebar,
7290 7371
.overlay .main {
7291 7372
  padding: 100px 2.5em;
7292 7373
  position: relative;
7293 7374
}
7294
/* line 478, ../sass/app.scss */
7375
/* line 555, ../sass/app.scss */
7295 7376
.overlay .navigation .rt {
7296 7377
  float: right;
7297 7378
}
7298
/* line 482, ../sass/app.scss */
7379
/* line 559, ../sass/app.scss */
7299 7380
.overlay .close {
7300 7381
  position: absolute;
7301 7382
  right: 2.5em;
......
7308 7389
  overflow: hidden;
7309 7390
}
7310 7391

  
7311
/* line 492, ../sass/app.scss */
7392
/* line 569, ../sass/app.scss */
7312 7393
.create-vm .select-os li {
7313 7394
  width: 23%;
7314 7395
  padding: 20px;
......
7318 7399
  height: 200px;
7319 7400
  margin: 0 10px 10px 0;
7320 7401
}
7321
/* line 501, ../sass/app.scss */
7402
/* line 578, ../sass/app.scss */
7322 7403
.create-vm .select-os li:hover, .create-vm .select-os li.selected {
7323 7404
  background: white;
7324 7405
}
7325
/* line 503, ../sass/app.scss */
7406
/* line 580, ../sass/app.scss */
7326 7407
.create-vm .select-os li:hover h2, .create-vm .select-os li:hover p, .create-vm .select-os li:hover a, .create-vm .select-os li.selected h2, .create-vm .select-os li.selected p, .create-vm .select-os li.selected a {
7327 7408
  color: #ff7bac;
7328 7409
}
7329
/* line 507, ../sass/app.scss */
7410
/* line 584, ../sass/app.scss */
7330 7411
.create-vm .select-os li a {
7331 7412
  color: white;
7332 7413
}
7333
/* line 510, ../sass/app.scss */
7414
/* line 587, ../sass/app.scss */
7334 7415
.create-vm .select-os li .os {
7335 7416
  background: url("../images/os-unknown.png") no-repeat center center;
7336 7417
  width: 30px;
......
7341 7422
  background-size: 100%;
7342 7423
  margin-bottom: 2em;
7343 7424
}
7344
/* line 514, ../sass/app.scss */
7425
/* line 591, ../sass/app.scss */
7345 7426
.create-vm .select-os li .os.windows {
7346 7427
  background-image: url("../images/os-windows.png");
7347 7428
}
7348
/* line 515, ../sass/app.scss */
7429
/* line 592, ../sass/app.scss */
7349 7430
.create-vm .select-os li .os.kubuntu {
7350 7431
  background-image: url("../images/os-kubuntu.png");
7351 7432
}
7352
/* line 516, ../sass/app.scss */
7433
/* line 593, ../sass/app.scss */
7353 7434
.create-vm .select-os li .os.fedora {
7354 7435
  background-image: url("../images/os-fedora.png");
7355 7436
}
7356
/* line 518, ../sass/app.scss */
7437
/* line 595, ../sass/app.scss */
7357 7438
.create-vm .select-os li h2 {
7358 7439
  font-size: 1em;
7359 7440
  font-weight: normal;
7360 7441
  color: white;
7361 7442
}
7362
/* line 523, ../sass/app.scss */
7443
/* line 600, ../sass/app.scss */
7363 7444
.create-vm .select-os li .details {
7364 7445
  font-weight: bold;
7365 7446
  font-size: 0.875em;
7366 7447
}
7367
/* line 530, ../sass/app.scss */
7448
/* line 607, ../sass/app.scss */
7368 7449
.create-vm .select-flavor dl {
7369 7450
  color: white;
7370 7451
  font-size: 1.25em;
7371 7452
  margin-bottom: 10px;
7372 7453
}
7373
/* line 534, ../sass/app.scss */
7454
/* line 611, ../sass/app.scss */
7374 7455
.create-vm .select-flavor dl dd {
7375 7456
  width: 23%;
7376 7457
  display: inline-block;
7377 7458
}
7378
/* line 538, ../sass/app.scss */
7459
/* line 615, ../sass/app.scss */
7379 7460
.create-vm .select-flavor dl dt {
7380 7461
  width: 70%;
7381 7462
  display: inline-block;
7382 7463
  font-weight: normal;
7383 7464
}
7384
/* line 542, ../sass/app.scss */
7465
/* line 619, ../sass/app.scss */
7385 7466
.create-vm .select-flavor dl dt span {
7386 7467
  min-width: 90px;
7387 7468
  margin: 0 10px;
7388 7469
}
7389
/* line 546, ../sass/app.scss */
7470
/* line 623, ../sass/app.scss */
7390 7471
.create-vm .select-flavor dl dt span:first-child {
7391 7472
  margin-left: 0;
7392 7473
}
7474

  
7475
/* line 633, ../sass/app.scss */
7476
#vm-connect .info {
7477
  font-style: italic;
7478
  font-size: 0.8125em;
7479
  color: #9e9ea1;
7480
}
7481
/* line 638, ../sass/app.scss */
7482
#vm-connect .ssh {
7483
  text-align: center;
7484
}
7485
/* line 640, ../sass/app.scss */
7486
#vm-connect .ssh span {
7487
  padding: 10px 30px;
7488
  background: #ff7bac;
7489
  color: white;
7490
}
7491
/* line 646, ../sass/app.scss */
7492
#vm-connect a:hover {
7493
  color: #ff7bac;
7494
}
b/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/v2_app.css
4931 4931
  height: 100%;
4932 4932
  width: 100%;
4933 4933
  background: black;
4934
  background: rgba(0, 0, 0, 0.45);
4934
  background: rgba(0, 0, 0, 0.6);
4935 4935
  z-index: 98;
4936 4936
  display: none;
4937 4937
  top: 0;
b/snf-cyclades-app/synnefo/ui/new_ui/ui/vm_list_v1.html
52 52
				</div>
53 53
				<div class="main-actions">
54 54
					<ul>
55
						<li><a href="">Reboot</a></li>
56
						<li><a href="">Shutdown</a></li>
57
						<li class="single"><a href="">Console</a></li>
58
						<li><a href="">Multiple action</a></li>
59
						<li class="single"><a href="">Single action</a></li>
55
						<li class="running"><a href="">Reboot</a></li>
56
						<li class="running"><a href="">Shutdown</a></li>
57
						<li class="running single"><a href="">Console</a></li>
58
						<li class="both"><a href="">Destroy</a></li>
59
						<li class="stopped"><a href="">Start</a></li>
60 60
					</ul>
61 61
				</div>
62 62
			</div>
......
80 80
			<div class="vms">
81 81
				<ul class="items-list small-block-grid-2 large-block-grid-4">
82 82
					<li>
83
						<div class="vm_container">
84
							<div class="img running">
85
								VM running
86
								<span class="os kubuntu">kubuntu</span>
83
						<div class="container">
84
							<div class="options">
85
								<div class="wrap">
86
									<a href="" class="check">select<span class="custom_checkbox">a</span>		</a><br>
87
									<a href="vm_details_v1.html">details</a><br>
88
									<a href="#" data-reveal-id="vm-connect" class="connect">connect</a>
89
								</div>
87 90
							</div>
88
							<p class="visible-info">
89
								<span>IPv4 83.212.97.127</span>
90
								<span>my awsome machine</span>
91
							</p>
92
							
93
							<!-- selection window -->
94
							<div class="vm_options invisible"> 
95
								<a class="select" href="">select
96
									<span aria-hidden="true" class="custom_checkbox checkbox-unchecked">
97
										a
98
									</span>
99
								</a><br>
100
								<a href="" class="option">connect</a><br>
101
								<a href="vm_details_v1.html" class="option">details</a>
102
							</div>
103

  
104
						</div>
105
					</li>
106
					<li>
107
						<div class="vm_container">
108
							<div class="img stopped">
109
								VM running
110
								<span class="os windows">windows</span>
91
							<div class="img-wrap">
92
								<div class="img running">
93
									VM running
94
									<span class="os windows">windows</span>
95
								</div>
111 96
							</div>
97
							
112 98
							<p class="visible-info">
113 99
								<span>IPv4 83.212.97.127</span>
114 100
								<span>my awsome machine</span>
115 101
							</p>
102
							<div class="more_checkbox"></div>	
116 103
							
117
							<!-- selection window -->
118
							<div class="vm_options invisible"> 
119
								<a class="select" href="">select
120
									<span aria-hidden="true" class="custom_checkbox checkbox-unchecked">
121
										a
122
									</span>
123
								</a><br>
124
								<a href="" class="option">connect</a><br>
125
								<a href="vm_details_v1.html" class="option">details</a>
126
							</div>
127

  
128 104
						</div>
129 105
					</li>
130 106
					<li>
131
						<div class="vm_container">
132
							<div class="img running">
133
								VM running
134
								<span class="os">os</span>
107
						<div class="container">
108
							<div class="options">
109
								<div class="wrap">
110
									<a href="" class="check">select<span class="custom_checkbox">a</span>		</a><br>
111
									<a href="vm_details_v1.html">details</a><br>
112
									<a href="#" data-reveal-id="vm-connect" class="connect">connect</a>
113
								</div>
135 114
							</div>
136
							<p class="visible-info">
137
								<span>IPv4 83.212.97.127</span>
138
								<span>my awsome machine οισδθφοισδθφ σοιδφθσδ </span>
139
							</p>
140
							
141
							<!-- selection window -->
142
							<div class="vm_options invisible"> 
143
								<a class="select" href="">select
144
									<span aria-hidden="true" class="custom_checkbox checkbox-unchecked">
145
										a
146
									</span>
147
								</a><br>
148
								<a href="" class="option">connect</a><br>
149
								<a href="vm_details_v1.html" class="option">details</a>
150
							</div>
151

  
152
						</div>
153
					</li>
154
					<li>
155
						<div class="vm_container">
156
							<div class="img stopped">
157
								VM running
158
								<span class="os fedora">os</span>
115
							<div class="img-wrap">
116
								<div class="img stopped">
117
									VM running
118
									<span class="os kubuntu">kubuntu</span>
119
								</div>
159 120
							</div>
121
							
160 122
							<p class="visible-info">
161 123
								<span>IPv4 83.212.97.127</span>
162 124
								<span>my awsome machine</span>
163 125
							</p>
126
							<div class="more_checkbox"></div>	
164 127
							
165
							<!-- selection window -->
166
							<div class="vm_options invisible"> 
167
								<a class="select" href="">select
168
									<span aria-hidden="true" class="custom_checkbox checkbox-unchecked">
169
										a
170
									</span>
171
								</a><br>
172
								<a href="" class="option">connect</a><br>
173
								<a href="vm_details_v1.html" class="option">details</a>
174
							</div>
175

  
176 128
						</div>
177 129
					</li>
178 130
					<li>
179
						<div class="vm_container">
180
							<div class="img running">
181
								VM running
182
								<span class="os fedora">os</span>
131
						<div class="container">
132
							<div class="options">
133
								<div class="wrap">
134
									<a href="" class="check">select<span class="custom_checkbox">a</span>		</a><br>
135
									<a href="vm_details_v1.html">details</a><br>
136
									<a href="#" data-reveal-id="vm-connect" class="connect">connect</a>
137
								</div>
183 138
							</div>
139
							<div class="img-wrap">
140
								<div class="img stopped">
141
									VM running
142
									<span class="os windows">windows</span>
143
								</div>
144
							</div>
145
							
184 146
							<p class="visible-info">
185 147
								<span>IPv4 83.212.97.127</span>
186 148
								<span>my awsome machine</span>
187 149
							</p>
150
							<div class="more_checkbox"></div>	
188 151
							
189
							<!-- selection window -->
190
							<div class="vm_options invisible"> 
191
								<a class="select" href="">select
192
									<span aria-hidden="true" class="custom_checkbox checkbox-unchecked">
193
										a
194
									</span>
195
								</a><br>
196
								<a href="" class="option">connect</a><br>
197
								<a href="vm_details_v1.html" class="option">details</a>
198
							</div>
199

  
200 152
						</div>
201 153
					</li>
202 154
					<li>
203
						<div class="vm_container">
204
							<div class="img running">
205
								VM running
206
								<span class="os fedora">os</span>
155
						<div class="container">
156
							<div class="options">
157
								<div class="wrap">
158
									<a href="" class="check">select<span class="custom_checkbox">a</span>		</a><br>
159
									<a href="vm_details_v1.html">details</a><br>
160
									<a href="#" data-reveal-id="vm-connect" class="connect">connect</a>
161
								</div>
162
							</div>
163
							<div class="img-wrap">
164
								<div class="img running">
165
									VM running
166
									<span class="os kubuntu">kubuntu</span>
167
								</div>
207 168
							</div>
169
							
208 170
							<p class="visible-info">
209 171
								<span>IPv4 83.212.97.127</span>
210 172
								<span>my awsome machine</span>
211 173
							</p>
174
							<div class="more_checkbox"></div>	
212 175
							
213
							<!-- selection window -->
214
							<div class="vm_options invisible"> 
215
								<a class="select" href="">select
216
									<span aria-hidden="true" class="custom_checkbox checkbox-unchecked">
217
										a
218
									</span>
219
								</a><br>
220
								<a href="" class="option">connect</a><br>
221
								<a href="vm_details_v1.html" class="option">details</a>
222
							</div>
223

  
224 176
						</div>
225 177
					</li>
178
					 
226 179
					<li>
227
						<div class="vm_container">
228
							<div class="img running">
229
								VM running
230
								<span class="os fedora">os</span>
180
						<div class="container">
181
							<div class="options">
182
								<div class="wrap">
183
									<a href="" class="check">select<span class="custom_checkbox">a</span>		</a><br>
184
									<a href="vm_details_v1.html">details</a><br>
185
									<a href="#" data-reveal-id="vm-connect">connect</a>
186
								</div>
187
							</div>
188
							<div class="img-wrap">
189
								<div class="img running">
190
									VM running
191
									<span class="os kubuntu">kubuntu</span>
192
								</div>
231 193
							</div>
194
							
232 195
							<p class="visible-info">
233 196
								<span>IPv4 83.212.97.127</span>
234 197
								<span>my awsome machine</span>
235 198
							</p>
199
							<div class="more_checkbox"></div>	
236 200
							
237
							<!-- selection window -->
238
							<div class="vm_options invisible"> 
239
								<a class="select" href="">select
240
									<span aria-hidden="true" class="custom_checkbox checkbox-unchecked">
241
										a
242
									</span>
243
								</a><br>
244
								<a href="" class="option">connect</a><br>
245
								<a href="vm_details_v1.html" class="option">details</a>
246
							</div>
247

  
248 201
						</div>
249 202
					</li>
250 203
					<li>
251
						<div class="vm_container">
252
							<div class="img running">
253
								VM running
254
								<span class="os fedora">os</span>
255
							</div>
256
							<p class="visible-info">
257
								<span>IPv4 83.212.97.127</span>
258
								<span>my awsome machine</span>
259
							</p>
260
							
261
							<!-- selection window -->
262
							<div class="vm_options invisible"> 
263
								<a class="select" href="">select
264
									<span aria-hidden="true" class="custom_checkbox checkbox-unchecked">
265
										a
266
									</span>
267
								</a><br>
268
								<a href="" class="option">connect</a><br>
269
								<a href="vm_details_v1.html" class="option">details</a>
270
							</div>
271

  
272
						</div>
204
						<div class="add-new"><a href="">NEW<br>MACHINE</a></div>	
273 205
					</li>
206
					 
274 207
				</ul>
275 208
			</div>
276 209
		</section>
......
280 213
		<span data-tooltip class="has-tip ours questions" title="Πόσο θα είναι το μέγιστο πλάτος της κύριας περιοχής" style="top:240px;left:20px">?</span>
281 214
		<span data-tooltip class="has-tip ours problems" title="Πώς θα έχουμε δράσεις όπως filters κτλ" style="top:140px;left:250px">!!</span>
282 215
	</div>
283
	
216
	<div id="vm-connect" class="reveal-modal medium">
217
  		<p>A direct connection to this machine can be established using the <a target=​"_blank" href=​"http:​/​/​en.wikipedia.org/​wiki/​Secure_Shell">​SSH Protocol</a>. To do so open a terminal and type the following at the prompt to connect to your machine:</p>
218
		<p class="ssh"><span>ssh user@snf-38389.vm.okeanos.grnet.gr</spam></p>
219

  
220
		<p class="info">Keep in mind that recently rebooted or created VMs may take up to 5 minutes to connect to them.</p>
221
  		<a class="close-reveal-modal" title="close window">&#215;</a>
222
	</div>
284 223
 
285 224
  <script src="javascripts/vendor/jquery.js"></script>
286 225
  <script src="javascripts/foundation/foundation.js"></script>

Also available in: Unified diff