Revision 9d514d49

b/snf-cyclades-app/synnefo/ui/new_ui/ui/app/components/reveal-modal.js
2 2
    classNames: ['reveal-modal', 'medium'],
3 3
    actions: {
4 4
        ok: function () {
5
            this.get("okCallback")();
5
            this.sendAction("ok");
6 6
        },
7 7
        close: function () {
8 8
            $(this.$()[0]).foundation('reveal', 'close');		
/dev/null
1
App.VolumeElComponent = Ember.Component.extend({
2
    tagName: 'section',
3

  
4
    actions: {
5

  
6
        revealModal: function(){
7

  
8
            var component = Ember.View.views.generic;
9
            component.set('message', '<p>Are you sure you want to dettach this Volume?</p>');
10
            component.set('okCallback', _.bind(function() {
11
                $("#generic").foundation('reveal', 'close');
12
                this.sendAction('ok',this.get('param'));
13
            }, this));
14
            $("#generic").foundation('reveal', 'open');
15
        },
16

  
17
    },
18
});
b/snf-cyclades-app/synnefo/ui/new_ui/ui/app/controllers/item.js
22 22
        return this.codeName+'init';
23 23
    }.property(),
24 24
    
25
    actions : {
26
        saveModel: function(){
27
            this.get('model').save();
28
        },
29

  
30
    }
25 31

  
26 32

  
27 33
});
b/snf-cyclades-app/synnefo/ui/new_ui/ui/app/controllers/vm.js
31 31
            this.get('model').get('volumes').removeObject(volume);
32 32
        },
33 33

  
34
        saveModel: function(){
35
            this.get('model').save();
36
        },
37

  
38

  
39 34
        modalConnect: function(){
40 35
            var component = Ember.View.views["modal-connect"];
41 36
            component.set('message', 'connect to your <3 ' + this.get('model').get('name'));
b/snf-cyclades-app/synnefo/ui/new_ui/ui/app/controllers/volume.js
17 17
            'icon': 'snf-pc-outline',
18 18
        },
19 19
    ],
20
});
20
});
21

  
22
App.DettachVolumeModalController = Ember.Controller.extend();
b/snf-cyclades-app/synnefo/ui/new_ui/ui/app/routes/application.js
1
App.ApplicationRoute = Ember.Route.extend({
2
    actions: {
3
        openModal: function(modalName, model) {
4
            this.controllerFor(modalName).set('model', model);
5
            $('#dettach-volume-modal').foundation('reveal','open');
6
        },
7
    }
8
});
9

  
10

  
b/snf-cyclades-app/synnefo/ui/new_ui/ui/app/templates/_modals.hbs
1 1
<section class="overlay-area-reveal">
2
	{{reveal-modal id="modal-connect"}}
2
{{render 'dettach-volume-modal' volume}}
3

  
4
{{!-- 	{{reveal-modal id="modal-connect"}}
3 5
	{{reveal-modal id="modal-start" hasButtons="true"}}
4 6
	{{reveal-modal id="modal-reboot" hasButtons="true"}}
5 7
	{{reveal-modal id="modal-shutdown" hasButtons="true"}}
6 8
	{{reveal-modal id="modal-destroy" hasButtons="true"}}
9
 --}}
10
    
7 11

  
8
    {{reveal-modal id="generic" hasButtons="true"}}
9 12
</section>
b/snf-cyclades-app/synnefo/ui/new_ui/ui/app/templates/components/reveal-modal.hbs
1 1
{{ yield }}
2
{{{ message }}}
3 2

  
4 3
{{#if hasButtons}}
5 4
	<p class="buttons">
/dev/null
1
<section {{bind-attr class=":item item.status"}}>
2
    <div class="what">
3
        <div class="img-wrap">
4
            <span class="snf-volume-full snf-font"></span>
5
        </div>
6
        <h4>{{item.name}}</h4>
7
    </div>
8
    <div class="clearfix">
9
        <ul class="connections">
10
            <li>
11
                <a href="#" {{action "revealModal" }}  class="act" >&nbsp;</a>
12
                <div class="icon"></div>
13
                <div class="data">
14
                    <ul>
15
                        <li>
16
                            <h5 class="volume-data">Size</h5>
17
                            <p>{{bytes-to-human item.size}}</p>
18
                        </li>
19
                        <li>
20
                            <h5 class="volume-data">Storage Type</h5>
21
                            <p>{{item.storageType}}</p>
22
                        </li>
23
                    </ul>
24
                </div>
25
            </li>
26
        </ul>
27
    </div>
28
</section>
b/snf-cyclades-app/synnefo/ui/new_ui/ui/app/templates/details/info.hbs
43 43
		<div>
44 44
			<h2>CPU utilization</h2>
45 45
			<div class="graph_container">
46
				<img src="images/cpu-ts.png" alt="CPU utilization graph">
46
				<img src="../images/cpu-ts.png" alt="CPU utilization graph">
47 47
			</div>
48 48
		</div>
49 49
		<div>
50 50
			<h2>Network utilization</h2>
51 51
			<div class="graph_container">
52
				<img src="images/net-ts.png" alt="network utilization graph">
52
				<img src="../images/net-ts.png" alt="network utilization graph">
53 53
			</div>
54 54
		</div>
55 55
	</section>
b/snf-cyclades-app/synnefo/ui/new_ui/ui/app/templates/dettach-volume-modal.hbs
1
{{#reveal-modal id="dettach-volume-modal" hasButtons="true" ok="dettachVolume"}}
2
    <p>Are you sure you want to dettach this Volume?</p>
3
{{/reveal-modal}}
b/snf-cyclades-app/synnefo/ui/new_ui/ui/app/templates/volume-el.hbs
1
<section {{bind-attr class=":item volume.status"}}>
2
    <div class="what">
3
        <div class="img-wrap">
4
            <span class="snf-volume-full snf-font"></span>
5
        </div>
6
        <h4>{{volume.name}}</h4>
7
    </div>
8
    <div class="clearfix">
9
        <ul class="connections">
10
            <li>
11
                <a href="#" {{action 'openModal' 'dettach-volume-modal' model}}  class="act" >&nbsp;</a>
12
                <div class="icon"></div>
13
                <div class="data">
14
                    <ul>
15
                        <li>
16
                            <h5 class="volume-data">Size</h5>
17
                            <p>{{bytes-to-human volume.size}}</p>
18
                        </li>
19
                        <li>
20
                            <h5 class="volume-data">Storage Type</h5>
21
                            <p>{{volume.storageType}}</p>
22
                        </li>
23
                    </ul>
24
                </div>
25
            </li>
26
        </ul>
27
    </div>
28
</section>
b/snf-cyclades-app/synnefo/ui/new_ui/ui/app/templates/volumes-list.hbs
1 1
{{#each volume in this.volumes}}
2
    {{volume-el item=volume ok="dettachVolume" param=volume}}
2
    {{view App.VolumeElView}}
3 3
{{/each}}
b/snf-cyclades-app/synnefo/ui/new_ui/ui/app/views/volume-el.js
1
App.VolumeElView = Ember.View.extend({
2
     
3
    tagName: 'section',
4
    templateName: 'volume-el',
5
    
6
});
b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_overlays.scss
96 96
}
97 97

  
98 98
.reveal-modal {
99
	padding:200px 140px 40px;
100
	h3 {
101
        font-size:1em;
102
    }
103
    p {
104
		color: #fff;
105
		text-align: center;
106
		&.message-forimg {
107
			margin-top: 132px;
108
			margin-bottom: 35px; // 20px from background icon
99
	padding-top:40px;
100
	p {
101
		text-align:left;
102
		color: black;
103
		&.info {
104
			font-style: italic;
105
			font-size:emCalc(13px);
106
			color: #9e9ea1;
107
		}
108
		&.ssh {
109
			text-align: center;
110
			span {
111
				display: inline;
112
				padding: 10px 30px;
113
				background:$secondary-color;
114
				color:#fff;
115
			}
109 116
		}
110 117
		&.buttons {
111
			a:first-child {
112
				margin-right:25px;
118
			text-align: center;
119
			.btn4, .btn4:hover span, .btn4:focus span {
120
				border-color: $body-font-color; 
121
			}
122
			.btn4 span {
123
				color: $body-font-color;
113 124
			}
125

  
114 126
		}
115 127
	}
116 128
	.close-reveal-modal {
117
		color: #fff;
129
		color: $link-color;
118 130
		&:hover {
119
			color: $gray-0;
131
			color: $link-color-hover;
120 132
		}
121 133
	}
134
	
122 135

  
123 136
	&#modal-start {
124 137
		background: $secondary-color url('../images/shutdown.png') no-repeat center 50px;
138
		padding:200px 140px 40px;
139
		h3 {
140
	        font-size:1em;
141
	    }
142
	    p {
143
			color: #fff;
144
			text-align: center;
145
			&.message-forimg {
146
				margin-top: 132px;
147
				margin-bottom: 35px; // 20px from background icon
148
			}
149
			&.buttons {
150
				a:first-child {
151
					margin-right:25px;
152
				}
153
			}
154
		}
155
		.close-reveal-modal {
156
			color: #fff;
157
			&:hover {
158
				color: $gray-0;
159
			}
160
		}
125 161
    }
126 162
    &#modal-reboot {
127 163
		background: #ff7049 url('../images/restart.png') no-repeat center 50px;
164
				padding:200px 140px 40px;
165
		h3 {
166
	        font-size:1em;
167
	    }
168
	    p {
169
			color: #fff;
170
			text-align: center;
171
			&.message-forimg {
172
				margin-top: 132px;
173
				margin-bottom: 35px; // 20px from background icon
174
			}
175
			&.buttons {
176
				a:first-child {
177
					margin-right:25px;
178
				}
179
			}
180
		}
181
		.close-reveal-modal {
182
			color: #fff;
183
			&:hover {
184
				color: $gray-0;
185
			}
186
		}
128 187
	}
129 188
	&#modal-shutdown {
130 189
		background: #ff7049 url('../images/shutdown.png') no-repeat center 50px;
190
				padding:200px 140px 40px;
191
		h3 {
192
	        font-size:1em;
193
	    }
194
	    p {
195
			color: #fff;
196
			text-align: center;
197
			&.message-forimg {
198
				margin-top: 132px;
199
				margin-bottom: 35px; // 20px from background icon
200
			}
201
			&.buttons {
202
				a:first-child {
203
					margin-right:25px;
204
				}
205
			}
206
		}
207
		.close-reveal-modal {
208
			color: #fff;
209
			&:hover {
210
				color: $gray-0;
211
			}
212
		}
131 213
	}
132 214
	&#modal-destroy {
133 215
		background: #d7145a url('../images/destroy-vm.png') no-repeat center 46px;
216
				padding:200px 140px 40px;
217
		h3 {
218
	        font-size:1em;
219
	    }
220
	    p {
221
			color: #fff;
222
			text-align: center;
223
			&.message-forimg {
224
				margin-top: 132px;
225
				margin-bottom: 35px; // 20px from background icon
226
			}
227
			&.buttons {
228
				a:first-child {
229
					margin-right:25px;
230
				}
231
			}
232
		}
233
		.close-reveal-modal {
234
			color: #fff;
235
			&:hover {
236
				color: $gray-0;
237
			}
238
		}
134 239
	}
135 240
	&#destroy-network-confirm {
136 241
		background: #d7145a url('../images/destroy-network-1.png') no-repeat center 50px;
242
				padding:200px 140px 40px;
243
		h3 {
244
	        font-size:1em;
245
	    }
246
	    p {
247
			color: #fff;
248
			text-align: center;
249
			&.message-forimg {
250
				margin-top: 132px;
251
				margin-bottom: 35px; // 20px from background icon
252
			}
253
			&.buttons {
254
				a:first-child {
255
					margin-right:25px;
256
				}
257
			}
258
		}
259
		.close-reveal-modal {
260
			color: #fff;
261
			&:hover {
262
				color: $gray-0;
263
			}
264
		}
137 265
	}
138 266
	&#destroy-disk-confirm {
139 267
		background: #d7145a url('../images/destroy-disk.png') no-repeat center 50px;
140
	}
141
	&#modal-connect, &.remove, &#generic {
142
		padding-top:40px;
143
		p {
144
			text-align:left;
145
			color: black;
146
			&.info {
147
				font-style: italic;
148
				font-size:emCalc(13px);
149
				color: #9e9ea1;
150
			}
151
			&.ssh {
152
				text-align: center;
153
				span {
154
					display: inline;
155
					padding: 10px 30px;
156
					background:$secondary-color;
157
					color:#fff;
158
				}
268
				padding:200px 140px 40px;
269
		h3 {
270
	        font-size:1em;
271
	    }
272
	    p {
273
			color: #fff;
274
			text-align: center;
275
			&.message-forimg {
276
				margin-top: 132px;
277
				margin-bottom: 35px; // 20px from background icon
159 278
			}
160 279
			&.buttons {
161
				text-align: center;
162
				.btn4, .btn4:hover span, .btn4:focus span {
163
					border-color: $body-font-color; 
164
				}
165
				.btn4 span {
166
					color: $body-font-color;
280
				a:first-child {
281
					margin-right:25px;
167 282
				}
168

  
169 283
			}
170 284
		}
171 285
		.close-reveal-modal {
172
			color: $link-color;
286
			color: #fff;
173 287
			&:hover {
174
				color: $link-color-hover;
288
				color: $gray-0;
175 289
			}
176 290
		}
177 291
	}
292
	&#modal-connect, &.remove, &#generic {
293
		
294
	}
178 295
}
179 296

  
180 297
/* Responive ------------------------------------------------ */
b/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css
8582 8582
.editable.save span, .editable.cancel span {
8583 8583
  font-size: 18px;
8584 8584
}
8585
/* line 20, ../sass/_forms.scss */
8585
/* line 17, ../sass/_forms.scss */
8586 8586
.editable input[type="text"] {
8587 8587
  width: 85%;
8588 8588
}
8589 8589

  
8590 8590
/* universal form styles ------------------ */
8591
/* line 28, ../sass/_forms.scss */
8591
/* line 25, ../sass/_forms.scss */
8592 8592
.input {
8593 8593
  display: inline-block;
8594 8594
  padding-left: 6px;
8595 8595
}
8596
/* line 31, ../sass/_forms.scss */
8596
/* line 28, ../sass/_forms.scss */
8597 8597
.input input[type="text"] {
8598 8598
  width: 142px;
8599 8599
  padding: 0 12px 0 6px;
......
8606 8606
  box-shadow: none;
8607 8607
}
8608 8608

  
8609
/* line 43, ../sass/_forms.scss */
8609
/* line 40, ../sass/_forms.scss */
8610 8610
.snf-color-picker {
8611 8611
  display: none;
8612 8612
}
8613
/* line 45, ../sass/_forms.scss */
8613
/* line 42, ../sass/_forms.scss */
8614 8614
.snf-color-picker > form {
8615 8615
  height: 237px;
8616 8616
  width: 100%;
8617 8617
}
8618
/* line 50, ../sass/_forms.scss */
8618
/* line 47, ../sass/_forms.scss */
8619 8619
.snf-color-picker #picker {
8620 8620
  position: relative;
8621 8621
  width: 207px;
8622 8622
  margin: 25px 5px 30px;
8623 8623
  display: inline-block;
8624 8624
}
8625
/* line 56, ../sass/_forms.scss */
8625
/* line 53, ../sass/_forms.scss */
8626 8626
.snf-color-picker .color-preview {
8627 8627
  display: inline-block;
8628 8628
  -webkit-border-radius: 999px;
......
8642 8642
}
8643 8643

  
8644 8644
/* detailed view styles ------------------ */
8645
/* line 71, ../sass/_forms.scss */
8645
/* line 68, ../sass/_forms.scss */
8646 8646
.details .input {
8647 8647
  background: url(../images/input-bg-lt-black.png) no-repeat left bottom;
8648 8648
}
8649
/* line 73, ../sass/_forms.scss */
8649
/* line 70, ../sass/_forms.scss */
8650 8650
.details .input input[type="text"] {
8651 8651
  background: url(../images/input-bg-rt-black.png) no-repeat right bottom;
8652 8652
  color: #2d3338;
......
8669 8669
}
8670 8670

  
8671 8671
/* vm wizard styles ------------------ */
8672
/* line 86, ../sass/_forms.scss */
8672
/* line 83, ../sass/_forms.scss */
8673 8673
.wizard form.custom .custom.dropdown.medium {
8674 8674
  background: #485057;
8675 8675
  color: white;
8676 8676
}
8677
/* line 90, ../sass/_forms.scss */
8677
/* line 87, ../sass/_forms.scss */
8678 8678
.wizard form.custom .custom.dropdown .current {
8679 8679
  color: white;
8680 8680
}
8681
/* line 93, ../sass/_forms.scss */
8681
/* line 90, ../sass/_forms.scss */
8682 8682
.wizard form.custom .custom.dropdown .selector {
8683 8683
  border-left: 1px solid white;
8684 8684
  height: 30px;
8685 8685
}
8686
/* line 97, ../sass/_forms.scss */
8686
/* line 94, ../sass/_forms.scss */
8687 8687
.wizard form.custom .custom.dropdown.open ul {
8688 8688
  background: #485057;
8689 8689
  color: white;
8690 8690
}
8691
/* line 101, ../sass/_forms.scss */
8691
/* line 98, ../sass/_forms.scss */
8692 8692
.wizard form.custom .custom.dropdown ul li {
8693 8693
  color: white;
8694 8694
}
8695
/* line 104, ../sass/_forms.scss */
8695
/* line 101, ../sass/_forms.scss */
8696 8696
.wizard form.custom .custom.dropdown ul li.selected {
8697 8697
  color: white;
8698 8698
  background: #5f6a73;
8699 8699
}
8700
/* line 108, ../sass/_forms.scss */
8700
/* line 105, ../sass/_forms.scss */
8701 8701
.wizard form.custom .custom.dropdown ul li:hover {
8702 8702
  background: #77838e;
8703 8703
  color: white;
8704 8704
}
8705
/* line 113, ../sass/_forms.scss */
8705
/* line 110, ../sass/_forms.scss */
8706 8706
.wizard .input {
8707 8707
  background: url(../images/input-bg-lt.png) no-repeat left bottom;
8708 8708
}
8709
/* line 115, ../sass/_forms.scss */
8709
/* line 112, ../sass/_forms.scss */
8710 8710
.wizard .input input[type="text"] {
8711 8711
  background: url(../images/input-bg-rt.png) no-repeat right bottom;
8712 8712
  color: white;
......
10439 10439

  
10440 10440
/* line 98, ../sass/_overlays.scss */
10441 10441
.reveal-modal {
10442
  padding: 200px 140px 40px;
10442
  padding-top: 40px;
10443 10443
}
10444 10444
/* line 100, ../sass/_overlays.scss */
10445
.reveal-modal h3 {
10446
  font-size: 1em;
10445
.reveal-modal p {
10446
  text-align: left;
10447
  color: black;
10447 10448
}
10448 10449
/* line 103, ../sass/_overlays.scss */
10449
.reveal-modal p {
10450
.reveal-modal p.info {
10451
  font-style: italic;
10452
  font-size: 0.8125em;
10453
  color: #9e9ea1;
10454
}
10455
/* line 108, ../sass/_overlays.scss */
10456
.reveal-modal p.ssh {
10457
  text-align: center;
10458
}
10459
/* line 110, ../sass/_overlays.scss */
10460
.reveal-modal p.ssh span {
10461
  display: inline;
10462
  padding: 10px 30px;
10463
  background: #6ae0cd;
10450 10464
  color: #fff;
10465
}
10466
/* line 117, ../sass/_overlays.scss */
10467
.reveal-modal p.buttons {
10451 10468
  text-align: center;
10452 10469
}
10453
/* line 106, ../sass/_overlays.scss */
10454
.reveal-modal p.message-forimg {
10455
  margin-top: 132px;
10456
  margin-bottom: 35px;
10470
/* line 119, ../sass/_overlays.scss */
10471
.reveal-modal p.buttons .btn4, .reveal-modal p.buttons .btn4:hover span, .reveal-modal p.buttons .btn4:focus span {
10472
  border-color: #2d3338;
10457 10473
}
10458
/* line 111, ../sass/_overlays.scss */
10459
.reveal-modal p.buttons a:first-child {
10460
  margin-right: 25px;
10474
/* line 122, ../sass/_overlays.scss */
10475
.reveal-modal p.buttons .btn4 span {
10476
  color: #2d3338;
10461 10477
}
10462
/* line 116, ../sass/_overlays.scss */
10478
/* line 128, ../sass/_overlays.scss */
10463 10479
.reveal-modal .close-reveal-modal {
10464
  color: #fff;
10480
  color: #485057;
10465 10481
}
10466
/* line 118, ../sass/_overlays.scss */
10482
/* line 130, ../sass/_overlays.scss */
10467 10483
.reveal-modal .close-reveal-modal:hover {
10468
  color: #2d3338;
10484
  color: #6ae0cd;
10469 10485
}
10470
/* line 123, ../sass/_overlays.scss */
10486
/* line 136, ../sass/_overlays.scss */
10471 10487
.reveal-modal#modal-start {
10472 10488
  background: #6ae0cd url("../images/shutdown.png") no-repeat center 50px;
10489
  padding: 200px 140px 40px;
10490
}
10491
/* line 139, ../sass/_overlays.scss */
10492
.reveal-modal#modal-start h3 {
10493
  font-size: 1em;
10494
}
10495
/* line 142, ../sass/_overlays.scss */
10496
.reveal-modal#modal-start p {
10497
  color: #fff;
10498
  text-align: center;
10499
}
10500
/* line 145, ../sass/_overlays.scss */
10501
.reveal-modal#modal-start p.message-forimg {
10502
  margin-top: 132px;
10503
  margin-bottom: 35px;
10504
}
10505
/* line 150, ../sass/_overlays.scss */
10506
.reveal-modal#modal-start p.buttons a:first-child {
10507
  margin-right: 25px;
10473 10508
}
10474
/* line 126, ../sass/_overlays.scss */
10509
/* line 155, ../sass/_overlays.scss */
10510
.reveal-modal#modal-start .close-reveal-modal {
10511
  color: #fff;
10512
}
10513
/* line 157, ../sass/_overlays.scss */
10514
.reveal-modal#modal-start .close-reveal-modal:hover {
10515
  color: #2d3338;
10516
}
10517
/* line 162, ../sass/_overlays.scss */
10475 10518
.reveal-modal#modal-reboot {
10476 10519
  background: #ff7049 url("../images/restart.png") no-repeat center 50px;
10520
  padding: 200px 140px 40px;
10521
}
10522
/* line 165, ../sass/_overlays.scss */
10523
.reveal-modal#modal-reboot h3 {
10524
  font-size: 1em;
10477 10525
}
10478
/* line 129, ../sass/_overlays.scss */
10526
/* line 168, ../sass/_overlays.scss */
10527
.reveal-modal#modal-reboot p {
10528
  color: #fff;
10529
  text-align: center;
10530
}
10531
/* line 171, ../sass/_overlays.scss */
10532
.reveal-modal#modal-reboot p.message-forimg {
10533
  margin-top: 132px;
10534
  margin-bottom: 35px;
10535
}
10536
/* line 176, ../sass/_overlays.scss */
10537
.reveal-modal#modal-reboot p.buttons a:first-child {
10538
  margin-right: 25px;
10539
}
10540
/* line 181, ../sass/_overlays.scss */
10541
.reveal-modal#modal-reboot .close-reveal-modal {
10542
  color: #fff;
10543
}
10544
/* line 183, ../sass/_overlays.scss */
10545
.reveal-modal#modal-reboot .close-reveal-modal:hover {
10546
  color: #2d3338;
10547
}
10548
/* line 188, ../sass/_overlays.scss */
10479 10549
.reveal-modal#modal-shutdown {
10480 10550
  background: #ff7049 url("../images/shutdown.png") no-repeat center 50px;
10551
  padding: 200px 140px 40px;
10552
}
10553
/* line 191, ../sass/_overlays.scss */
10554
.reveal-modal#modal-shutdown h3 {
10555
  font-size: 1em;
10481 10556
}
10482
/* line 132, ../sass/_overlays.scss */
10557
/* line 194, ../sass/_overlays.scss */
10558
.reveal-modal#modal-shutdown p {
10559
  color: #fff;
10560
  text-align: center;
10561
}
10562
/* line 197, ../sass/_overlays.scss */
10563
.reveal-modal#modal-shutdown p.message-forimg {
10564
  margin-top: 132px;
10565
  margin-bottom: 35px;
10566
}
10567
/* line 202, ../sass/_overlays.scss */
10568
.reveal-modal#modal-shutdown p.buttons a:first-child {
10569
  margin-right: 25px;
10570
}
10571
/* line 207, ../sass/_overlays.scss */
10572
.reveal-modal#modal-shutdown .close-reveal-modal {
10573
  color: #fff;
10574
}
10575
/* line 209, ../sass/_overlays.scss */
10576
.reveal-modal#modal-shutdown .close-reveal-modal:hover {
10577
  color: #2d3338;
10578
}
10579
/* line 214, ../sass/_overlays.scss */
10483 10580
.reveal-modal#modal-destroy {
10484 10581
  background: #d7145a url("../images/destroy-vm.png") no-repeat center 46px;
10582
  padding: 200px 140px 40px;
10485 10583
}
10486
/* line 135, ../sass/_overlays.scss */
10487
.reveal-modal#destroy-network-confirm {
10488
  background: #d7145a url("../images/destroy-network-1.png") no-repeat center 50px;
10584
/* line 217, ../sass/_overlays.scss */
10585
.reveal-modal#modal-destroy h3 {
10586
  font-size: 1em;
10489 10587
}
10490
/* line 138, ../sass/_overlays.scss */
10491
.reveal-modal#destroy-disk-confirm {
10492
  background: #d7145a url("../images/destroy-disk.png") no-repeat center 50px;
10588
/* line 220, ../sass/_overlays.scss */
10589
.reveal-modal#modal-destroy p {
10590
  color: #fff;
10591
  text-align: center;
10493 10592
}
10494
/* line 141, ../sass/_overlays.scss */
10495
.reveal-modal#modal-connect, .reveal-modal.remove, .reveal-modal#generic {
10496
  padding-top: 40px;
10593
/* line 223, ../sass/_overlays.scss */
10594
.reveal-modal#modal-destroy p.message-forimg {
10595
  margin-top: 132px;
10596
  margin-bottom: 35px;
10497 10597
}
10498
/* line 143, ../sass/_overlays.scss */
10499
.reveal-modal#modal-connect p, .reveal-modal.remove p, .reveal-modal#generic p {
10500
  text-align: left;
10501
  color: black;
10598
/* line 228, ../sass/_overlays.scss */
10599
.reveal-modal#modal-destroy p.buttons a:first-child {
10600
  margin-right: 25px;
10502 10601
}
10503
/* line 146, ../sass/_overlays.scss */
10504
.reveal-modal#modal-connect p.info, .reveal-modal.remove p.info, .reveal-modal#generic p.info {
10505
  font-style: italic;
10506
  font-size: 0.8125em;
10507
  color: #9e9ea1;
10602
/* line 233, ../sass/_overlays.scss */
10603
.reveal-modal#modal-destroy .close-reveal-modal {
10604
  color: #fff;
10605
}
10606
/* line 235, ../sass/_overlays.scss */
10607
.reveal-modal#modal-destroy .close-reveal-modal:hover {
10608
  color: #2d3338;
10609
}
10610
/* line 240, ../sass/_overlays.scss */
10611
.reveal-modal#destroy-network-confirm {
10612
  background: #d7145a url("../images/destroy-network-1.png") no-repeat center 50px;
10613
  padding: 200px 140px 40px;
10508 10614
}
10509
/* line 151, ../sass/_overlays.scss */
10510
.reveal-modal#modal-connect p.ssh, .reveal-modal.remove p.ssh, .reveal-modal#generic p.ssh {
10615
/* line 243, ../sass/_overlays.scss */
10616
.reveal-modal#destroy-network-confirm h3 {
10617
  font-size: 1em;
10618
}
10619
/* line 246, ../sass/_overlays.scss */
10620
.reveal-modal#destroy-network-confirm p {
10621
  color: #fff;
10511 10622
  text-align: center;
10512 10623
}
10513
/* line 153, ../sass/_overlays.scss */
10514
.reveal-modal#modal-connect p.ssh span, .reveal-modal.remove p.ssh span, .reveal-modal#generic p.ssh span {
10515
  display: inline;
10516
  padding: 10px 30px;
10517
  background: #6ae0cd;
10624
/* line 249, ../sass/_overlays.scss */
10625
.reveal-modal#destroy-network-confirm p.message-forimg {
10626
  margin-top: 132px;
10627
  margin-bottom: 35px;
10628
}
10629
/* line 254, ../sass/_overlays.scss */
10630
.reveal-modal#destroy-network-confirm p.buttons a:first-child {
10631
  margin-right: 25px;
10632
}
10633
/* line 259, ../sass/_overlays.scss */
10634
.reveal-modal#destroy-network-confirm .close-reveal-modal {
10518 10635
  color: #fff;
10519 10636
}
10520
/* line 160, ../sass/_overlays.scss */
10521
.reveal-modal#modal-connect p.buttons, .reveal-modal.remove p.buttons, .reveal-modal#generic p.buttons {
10637
/* line 261, ../sass/_overlays.scss */
10638
.reveal-modal#destroy-network-confirm .close-reveal-modal:hover {
10639
  color: #2d3338;
10640
}
10641
/* line 266, ../sass/_overlays.scss */
10642
.reveal-modal#destroy-disk-confirm {
10643
  background: #d7145a url("../images/destroy-disk.png") no-repeat center 50px;
10644
  padding: 200px 140px 40px;
10645
}
10646
/* line 269, ../sass/_overlays.scss */
10647
.reveal-modal#destroy-disk-confirm h3 {
10648
  font-size: 1em;
10649
}
10650
/* line 272, ../sass/_overlays.scss */
10651
.reveal-modal#destroy-disk-confirm p {
10652
  color: #fff;
10522 10653
  text-align: center;
10523 10654
}
10524
/* line 162, ../sass/_overlays.scss */
10525
.reveal-modal#modal-connect p.buttons .btn4, .reveal-modal#modal-connect p.buttons .btn4:hover span, .reveal-modal#modal-connect p.buttons .btn4:focus span, .reveal-modal.remove p.buttons .btn4, .reveal-modal.remove p.buttons .btn4:hover span, .reveal-modal.remove p.buttons .btn4:focus span, .reveal-modal#generic p.buttons .btn4, .reveal-modal#generic p.buttons .btn4:hover span, .reveal-modal#generic p.buttons .btn4:focus span {
10526
  border-color: #2d3338;
10655
/* line 275, ../sass/_overlays.scss */
10656
.reveal-modal#destroy-disk-confirm p.message-forimg {
10657
  margin-top: 132px;
10658
  margin-bottom: 35px;
10527 10659
}
10528
/* line 165, ../sass/_overlays.scss */
10529
.reveal-modal#modal-connect p.buttons .btn4 span, .reveal-modal.remove p.buttons .btn4 span, .reveal-modal#generic p.buttons .btn4 span {
10530
  color: #2d3338;
10660
/* line 280, ../sass/_overlays.scss */
10661
.reveal-modal#destroy-disk-confirm p.buttons a:first-child {
10662
  margin-right: 25px;
10531 10663
}
10532
/* line 171, ../sass/_overlays.scss */
10533
.reveal-modal#modal-connect .close-reveal-modal, .reveal-modal.remove .close-reveal-modal, .reveal-modal#generic .close-reveal-modal {
10534
  color: #485057;
10664
/* line 285, ../sass/_overlays.scss */
10665
.reveal-modal#destroy-disk-confirm .close-reveal-modal {
10666
  color: #fff;
10535 10667
}
10536
/* line 173, ../sass/_overlays.scss */
10537
.reveal-modal#modal-connect .close-reveal-modal:hover, .reveal-modal.remove .close-reveal-modal:hover, .reveal-modal#generic .close-reveal-modal:hover {
10538
  color: #6ae0cd;
10668
/* line 287, ../sass/_overlays.scss */
10669
.reveal-modal#destroy-disk-confirm .close-reveal-modal:hover {
10670
  color: #2d3338;
10539 10671
}
10540 10672

  
10541 10673
/* Responive ------------------------------------------------ */
10542 10674
@media only screen and (max-width: 768px) {
10543
  /* line 186, ../sass/_overlays.scss */
10675
  /* line 303, ../sass/_overlays.scss */
10544 10676
  .wizard .top {
10545 10677
    position: static;
10546 10678
  }
10547
  /* line 189, ../sass/_overlays.scss */
10679
  /* line 306, ../sass/_overlays.scss */
10548 10680
  .wizard .middle {
10549 10681
    padding-top: 0;
10550 10682
  }
10551 10683

  
10552
  /* line 194, ../sass/_overlays.scss */
10684
  /* line 311, ../sass/_overlays.scss */
10553 10685
  .body-wrapper .overlay-area {
10554 10686
    top: 0;
10555 10687
  }

Also available in: Unified diff