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">×</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