@cmusei/console-forge 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE.md +18 -0
- package/README.md +6 -0
- package/fesm2022/cmusei-console-forge.mjs +1397 -0
- package/fesm2022/cmusei-console-forge.mjs.map +1 -0
- package/index.d.ts +5 -0
- package/lib/components/console/console.component.d.ts +50 -0
- package/lib/components/console-status/console-status.component.d.ts +7 -0
- package/lib/components/console-toolbar/console-toolbar.component.d.ts +40 -0
- package/lib/components/console-toolbar-default/console-toolbar-default-button/console-toolbar-default-button.component.d.ts +9 -0
- package/lib/components/console-toolbar-default/console-toolbar-default.component.d.ts +30 -0
- package/lib/config/console-forge-config.d.ts +20 -0
- package/lib/config/provide-console-forge.d.ts +4 -0
- package/lib/directives/class-on-hover.directive.d.ts +10 -0
- package/lib/injection/window.injection-token.d.ts +2 -0
- package/lib/models/console-client-type.d.ts +1 -0
- package/lib/models/console-component-config.d.ts +24 -0
- package/lib/models/console-component-network-config.d.ts +4 -0
- package/lib/models/console-connection-options.d.ts +7 -0
- package/lib/models/console-connection-status.d.ts +1 -0
- package/lib/models/console-credentials.d.ts +4 -0
- package/lib/models/console-power-request.d.ts +1 -0
- package/lib/models/console-supported-features.d.ts +4 -0
- package/lib/models/console-toolbar-component-base.d.ts +5 -0
- package/lib/models/console-toolbar-context.d.ts +30 -0
- package/lib/models/console-toolbar-position.d.ts +1 -0
- package/lib/models/console-user-settings.d.ts +10 -0
- package/lib/models/log-level.d.ts +6 -0
- package/lib/services/browser-notifications/browser-notifications.service.d.ts +10 -0
- package/lib/services/browser-notifications/send-browser-notification.d.ts +9 -0
- package/lib/services/canvas-recorder/canvas-recorder.service.d.ts +14 -0
- package/lib/services/canvas-recorder/canvas-recording-settings.d.ts +9 -0
- package/lib/services/canvas-recorder/canvas-recording.d.ts +13 -0
- package/lib/services/canvas.service.d.ts +9 -0
- package/lib/services/clipboard/clipboard.helpers.d.ts +14 -0
- package/lib/services/clipboard/clipboard.service.d.ts +15 -0
- package/lib/services/console-clients/console-client-factory.service.d.ts +9 -0
- package/lib/services/console-clients/console-client.service.d.ts +23 -0
- package/lib/services/console-clients/vmware/vmware-console-client.service.d.ts +36 -0
- package/lib/services/console-clients/vnc-console-client/vnc-console-client.service.d.ts +33 -0
- package/lib/services/full-screen.service.d.ts +11 -0
- package/lib/services/logger.service.d.ts +9 -0
- package/lib/services/object.helpers.d.ts +4 -0
- package/lib/services/user-settings.service.d.ts +15 -0
- package/lib/services/uuid.service.d.ts +6 -0
- package/lib/shims/vmware-mks.models.d.ts +34 -0
- package/lib/shims/vmware-wmks.shim.d.ts +61 -0
- package/package.json +32 -0
- package/public-api.d.ts +17 -0
- package/vendor/vmware-wmks/css/extended-keypad.css +318 -0
- package/vendor/vmware-wmks/css/main-ui.css +180 -0
- package/vendor/vmware-wmks/css/trackpad.css +192 -0
- package/vendor/vmware-wmks/css/wmks-all.css +684 -0
- package/vendor/vmware-wmks/js/wmks.min.js +8 -0
|
@@ -0,0 +1,684 @@
|
|
|
1
|
+
/******************************************************************************
|
|
2
|
+
* Copyright 2013 VMware, Inc. All rights reserved.
|
|
3
|
+
*****************************************************************************/
|
|
4
|
+
|
|
5
|
+
/*
|
|
6
|
+
* main-ui.css
|
|
7
|
+
*
|
|
8
|
+
* Defines style for the wmks ui widgets.
|
|
9
|
+
*
|
|
10
|
+
* Use CSS3 for touch devices as jquery effects break when browser handles
|
|
11
|
+
* orientation changes, or page bouncing.
|
|
12
|
+
*
|
|
13
|
+
* TODO: Need to handle Retina mode for iPad.
|
|
14
|
+
*/
|
|
15
|
+
|
|
16
|
+
/*
|
|
17
|
+
* jQuery UI Dialog
|
|
18
|
+
*/
|
|
19
|
+
.ui-dialog {
|
|
20
|
+
padding: 0;
|
|
21
|
+
box-shadow: 0px 5px 7px rgba(0,0,0,.5);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.ui-dialog .ui-dialog-titlebar {
|
|
25
|
+
padding: .8em .8em;
|
|
26
|
+
border-bottom-left-radius: 0;
|
|
27
|
+
border-bottom-right-radius: 0;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.ui-dialog .ui-dialog-titlebar-close {
|
|
31
|
+
right: .4em;
|
|
32
|
+
margin-top: -11px;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.ui-widget-content {
|
|
36
|
+
border: 0;
|
|
37
|
+
background: #ffffff;
|
|
38
|
+
color: #333333;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.ui-widget-header a {
|
|
42
|
+
color: #333333;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
/* Touch feedback indicator */
|
|
47
|
+
.ui-touch-feedback-icon {
|
|
48
|
+
background-image: url('../img/touch_sprite_feedback.png');
|
|
49
|
+
width: 300px;
|
|
50
|
+
height: 120px;
|
|
51
|
+
position: absolute;
|
|
52
|
+
left: -9999px;
|
|
53
|
+
top: -9999px;
|
|
54
|
+
z-index: 2;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.feedback-container {
|
|
58
|
+
z-index: 2;
|
|
59
|
+
position: absolute;
|
|
60
|
+
display: none;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.feedback-container.cursor-icon {
|
|
64
|
+
background: url('../img/touch_sprite_feedback.png') -260px -15px no-repeat;
|
|
65
|
+
width: 17px;
|
|
66
|
+
height: 23px;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.feedback-container.tap-icon {
|
|
70
|
+
background: url('../img/touch_sprite_feedback.png') -300px -15px no-repeat;
|
|
71
|
+
width: 36px;
|
|
72
|
+
height: 36px;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.feedback-container.drag-icon {
|
|
76
|
+
background: url('../img/touch_sprite_feedback.png') -10px -10px no-repeat;
|
|
77
|
+
width: 100px;
|
|
78
|
+
height: 100px;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.feedback-container.pulse-icon {
|
|
82
|
+
background: url('../img/touch_sprite_feedback.png') -111px -10px no-repeat;
|
|
83
|
+
width: 100px;
|
|
84
|
+
height: 100px;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.feedback-container.scroll-icon {
|
|
88
|
+
background: url('../img/touch_sprite_feedback.png') -212px -10px no-repeat;
|
|
89
|
+
width: 27px;
|
|
90
|
+
height: 100px;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.trackPad-cursor {
|
|
94
|
+
background: none !important;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.trackPad-cursor.cursorIcon{
|
|
98
|
+
opacity: 0;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.cursor-icon-shadow {
|
|
102
|
+
transform-origin: 0 0 ;
|
|
103
|
+
-webkit-transform-origin: 0 0 ;
|
|
104
|
+
-moz-transform-origin: 0 0 ;
|
|
105
|
+
-ms-transform-origin: 0 0 ;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
/* CSS3 feedback indicator animation. Keep it simple (uses lower cpu cycles)
|
|
109
|
+
as there may be multiple animation requests made in quick successions. */
|
|
110
|
+
.animate-feedback-indicator {
|
|
111
|
+
display: block;
|
|
112
|
+
opacity: 0;
|
|
113
|
+
animation-name: showfadeout;
|
|
114
|
+
animation-duration: 350ms;
|
|
115
|
+
-webkit-animation-name: showfadeout;
|
|
116
|
+
-webkit-animation-duration: 350ms;
|
|
117
|
+
-moz-animation-name: showfadeout;
|
|
118
|
+
-moz-animation-duration: 350ms;
|
|
119
|
+
-ms-animation-name: showfadeout;
|
|
120
|
+
-ms-animation-duration: 350ms;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
@-webkit-keyframes showfadeout {
|
|
124
|
+
0% { opacity: 1; }
|
|
125
|
+
100% { opacity: 0; }
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
@-moz-keyframes showfadeout {
|
|
129
|
+
0% { opacity: 1; }
|
|
130
|
+
100% { opacity: 0; }
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
@-ms-keyframes showfadeout {
|
|
134
|
+
0% { opacity: 1; }
|
|
135
|
+
100% { opacity: 0; }
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.animate-double-feedback-indicator {
|
|
139
|
+
display: block;
|
|
140
|
+
opacity: 0;
|
|
141
|
+
animation-name: showdoublefadeout;
|
|
142
|
+
animation-duration: 400ms;
|
|
143
|
+
-webkit-animation-name: showdoublefadeout;
|
|
144
|
+
-webkit-animation-duration: 400ms;
|
|
145
|
+
-moz-animation-name: showdoublefadeout;
|
|
146
|
+
-moz-animation-duration: 400ms;
|
|
147
|
+
-ms-animation-name: showdoublefadeout;
|
|
148
|
+
-ms-animation-duration: 400ms;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
@-webkit-keyframes showdoublefadeout {
|
|
152
|
+
0% { opacity: 1; }
|
|
153
|
+
40% { opacity: 0; }
|
|
154
|
+
70% { opacity: 1; }
|
|
155
|
+
100% { opacity: 0; }
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
@-moz-keyframes showdoublefadeout {
|
|
159
|
+
0% { opacity: 1; }
|
|
160
|
+
40% { opacity: 0; }
|
|
161
|
+
70% { opacity: 1; }
|
|
162
|
+
100% { opacity: 0; }
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
@-ms-keyframes showdoublefadeout {
|
|
166
|
+
0% { opacity: 1; }
|
|
167
|
+
40% { opacity: 0; }
|
|
168
|
+
70% { opacity: 1; }
|
|
169
|
+
100% { opacity: 0; }
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
#relativepadLeft {
|
|
173
|
+
height:200px; border:1px solid black;
|
|
174
|
+
}
|
|
175
|
+
/******************************************************************************
|
|
176
|
+
* Copyright 2013 VMware, Inc. All rights reserved.
|
|
177
|
+
*****************************************************************************/
|
|
178
|
+
|
|
179
|
+
/*
|
|
180
|
+
* trackpad.css
|
|
181
|
+
*
|
|
182
|
+
* Defines style for the trackpad widget.
|
|
183
|
+
*/
|
|
184
|
+
|
|
185
|
+
/*
|
|
186
|
+
* jQuery UI Dialog 1.8.16
|
|
187
|
+
*/
|
|
188
|
+
.ui-dialog {
|
|
189
|
+
padding: 0;
|
|
190
|
+
box-shadow: 0px 5px 7px rgba(0,0,0,.5);
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.ui-dialog .ui-dialog-titlebar {
|
|
194
|
+
padding: .8em .8em;
|
|
195
|
+
border-bottom-left-radius: 0;
|
|
196
|
+
border-bottom-right-radius: 0;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.ui-dialog .ui-dialog-titlebar-close {
|
|
200
|
+
right: .4em;
|
|
201
|
+
margin-top: -11px;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
.ui-widget-content {
|
|
205
|
+
border: 0;
|
|
206
|
+
background: #ffffff;
|
|
207
|
+
color: #333333;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
.ui-widget-header a {
|
|
211
|
+
color: #333333;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
/*
|
|
215
|
+
* Touch sprite is loaded in a single class (as we have disabled caching images).
|
|
216
|
+
* We do this for the iOS case, due to extreme limitations in terms of image size.
|
|
217
|
+
* This form of grouped declaration forces all these definitions to load the same
|
|
218
|
+
* sprite. (This is also loaded upfront for the navbar so its always visible).
|
|
219
|
+
* For details see PR - 978390.
|
|
220
|
+
*/
|
|
221
|
+
.trackpad-wrapper .ui-dialog-titlebar-close .ui-icon,
|
|
222
|
+
.trackpad-wrapper .ui-dialog-titlebar .ui-dialog-title,
|
|
223
|
+
.touch-sprite {
|
|
224
|
+
background-image: url('../img/touch_sprite.png');
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
/* Replace jquery ui title bar close icon. */
|
|
228
|
+
.trackpad-wrapper .ui-dialog-titlebar-close {
|
|
229
|
+
margin-top: -9px;
|
|
230
|
+
border: 0 !important;
|
|
231
|
+
background: none !important;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
.trackpad-wrapper .ui-dialog-titlebar-close {
|
|
235
|
+
margin-top: -11px;
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
/* Background-image is defined along with touch-sprite in 1 place. */
|
|
239
|
+
.trackpad-wrapper .ui-dialog-titlebar-close .ui-icon {
|
|
240
|
+
background-position: -9px -239px;
|
|
241
|
+
background-repeat: no-repeat;
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
.trackpad-wrapper .ui-dialog-titlebar-close .ui-icon:active {
|
|
245
|
+
background-position-x: -24px;
|
|
246
|
+
background-repeat: no-repeat;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
/* The grabber icon indicating the dialog could be moved around */
|
|
250
|
+
.trackpad-wrapper .ui-dialog-titlebar .ui-dialog-title {
|
|
251
|
+
background-position: -10px -255px;
|
|
252
|
+
background-repeat: no-repeat;
|
|
253
|
+
width: 40px;
|
|
254
|
+
height: 14px;
|
|
255
|
+
margin: 0 0 0 42%;
|
|
256
|
+
}
|
|
257
|
+
.trackpad-wrapper .ui-dialog-titlebar .ui-dialog-title:active {
|
|
258
|
+
background-position-x: -52px;
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
.trackpad-wrapper {
|
|
262
|
+
width: 289px !important; /* As this is less than the default value */
|
|
263
|
+
border: 1px solid #333 !important;
|
|
264
|
+
background: none !important;
|
|
265
|
+
border-radius: 6px;
|
|
266
|
+
box-shadow: 0px 4px 9px rgba(0,0,0,.6);
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
.trackpad-wrapper .ui-dialog-titlebar {
|
|
270
|
+
border-top: 1px solid #ccc;
|
|
271
|
+
border-left: 1px solid #aaa;
|
|
272
|
+
border-right: 1px solid #aaa;
|
|
273
|
+
border-bottom: 0;
|
|
274
|
+
padding: .5em .8em .4em .8em;
|
|
275
|
+
background: rgb(175,176,187); /* Old browsers */
|
|
276
|
+
background: -webkit-linear-gradient(top, rgba(175,176,187,.93) 0%,rgba(170,171,182,.93) 100%); /* Chrome10+,Safari5.1+ */
|
|
277
|
+
background: -o-linear-gradient(top, rgba(175,176,187,.93) 0%,rgba(170,171,182,.93) 100%); /* Opera 11.10+ */
|
|
278
|
+
background: -ms-linear-gradient(top, rgba(175,176,187,.93) 0%,rgba(170,171,182,.93) 100%); /* IE10+ */
|
|
279
|
+
background: linear-gradient(top, rgba(175,176,187,.93) 0%,rgba(170,171,182,.93) 100%); /* W3C */
|
|
280
|
+
border-top-left-radius: 5px;
|
|
281
|
+
border-top-right-radius: 5px;
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
.trackpad-wrapper .trackpad-container {
|
|
285
|
+
padding: 0 !important;
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
.trackpad-wrapper .left-border {
|
|
289
|
+
background: rgb(170,171,182); /* Old browsers */
|
|
290
|
+
background: -webkit-linear-gradient(top, rgba(170,171,182,.93) 0%,rgba(123,123,133,.93) 100%); /* Chrome10+,Safari5.1+ */
|
|
291
|
+
background: -o-linear-gradient(top, rgba(170,171,182,.93) 0%,rgba(123,123,133,.93) 100%); /* Opera 11.10+ */
|
|
292
|
+
background: -ms-linear-gradient(top, rgba(170,171,182,.93) 0%,rgba(123,123,133,.93) 100%); /* IE10+ */
|
|
293
|
+
background: linear-gradient(top, rgba(170,171,182,.93) 0%,rgba(123,123,133,.93) 100%); /* W3C */
|
|
294
|
+
margin-top: -1px;
|
|
295
|
+
float: left;
|
|
296
|
+
width: 12px;
|
|
297
|
+
height: 209px;
|
|
298
|
+
border: 0;
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
.trackpad-wrapper .touch-area {
|
|
302
|
+
background: rgba(255,255,255,0.8);
|
|
303
|
+
background: -webkit-linear-gradient(-70deg, rgba(255,255,255,0.8) 0%, rgba(238,238,240,0.8) 22%, rgba(210,210,216,0.8) 71%); /* Chrome10+,Safari5.1+ */
|
|
304
|
+
background: -o-linear-gradient(-70deg, rgba(255,255,255,0.8) 0%, rgba(238,238,240,0.8) 22%, rgba(210,210,216,0.8) 71%); /* Opera 11.10+ */
|
|
305
|
+
background: -ms-linear-gradient(-70deg, rgba(255,255,255,0.8) 0%, rgba(238,238,240,0.8) 22%, rgba(210,210,216,0.8) 71%); /* IE10+ */
|
|
306
|
+
background: linear-gradient(110deg, rgba(255,255,255,0.8) 0%, rgba(238,238,240,0.8) 22%, rgba(210,210,216,0.8) 71%); /* W3C */
|
|
307
|
+
border: 1px solid #555;
|
|
308
|
+
box-shadow: 0 2px 6px 1px #888 inset;
|
|
309
|
+
float: left;
|
|
310
|
+
width: 263px;
|
|
311
|
+
height: 206px;
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
.trackpad-wrapper .right-border {
|
|
315
|
+
background: rgb(170,171,182); /* Old browsers */
|
|
316
|
+
background: -webkit-linear-gradient(top, rgba(170,171,182,.93) 0%,rgba(123,123,133,.93) 100%); /* Chrome10+,Safari5.1+ */
|
|
317
|
+
background: -o-linear-gradient(top, rgba(170,171,182,.93) 0%,rgba(123,123,133,.93) 100%); /* Opera 11.10+ */
|
|
318
|
+
background: -ms-linear-gradient(top, rgba(170,171,182,.93) 0%,rgba(123,123,133,.93) 100%); /* IE10+ */
|
|
319
|
+
background: linear-gradient(top, rgba(170,171,182,.93) 0%,rgba(123,123,133,.93) 100%); /* W3C */
|
|
320
|
+
margin-top: -1px;
|
|
321
|
+
float: left;
|
|
322
|
+
width: 12px;
|
|
323
|
+
height: 209px;
|
|
324
|
+
border: 0;
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
.trackpad-wrapper .bottom-border {
|
|
328
|
+
background: rgb(123,123,133); /* Old browsers */
|
|
329
|
+
background: -webkit-linear-gradient(top, rgba(123,123,133,.93) 0%,rgba(110,110,119,.93) 100%); /* Chrome10+,Safari5.1+ */
|
|
330
|
+
background: -o-linear-gradient(top, rgba(123,123,133,.93) 0%,rgba(110,110,119,.93) 100%); /* Opera 11.10+ */
|
|
331
|
+
background: -ms-linear-gradient(top, rgba(123,123,133,.93) 0%,rgba(110,110,119,.93) 100%); /* IE10+ */
|
|
332
|
+
background: linear-gradient(top, rgba(123,123,133,.93) 0%,rgba(110,110,119,.93) 100%); /* W3C */
|
|
333
|
+
width: 289px;
|
|
334
|
+
height: 73px;
|
|
335
|
+
margin-top: 208px;
|
|
336
|
+
border: 0;
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
.trackpad-wrapper .button-left, .trackpad-wrapper .button-right {
|
|
340
|
+
background: rgb(255,255,255); /* Old browsers */
|
|
341
|
+
background: -webkit-linear-gradient(top, rgba(255,255,255,.7) 0%,rgba(225,225,227,.7) 3%,rgba(204,204,204,.7) 45%,rgba(190,190,195,.7) 96%,rgba(131,131,135,.7) 100%); /* Chrome10+,Safari5.1+ */
|
|
342
|
+
background: -o-linear-gradient(top, rgba(255,255,255,.7) 0%,rgba(225,225,227,.7) 3%,rgba(204,204,204,.7) 45%,rgba(190,190,195,.7) 96%,rgba(131,131,135,.7) 100%); /* Opera 11.10+ */
|
|
343
|
+
background: -ms-linear-gradient(top, rgba(255,255,255,.7) 0%,rgba(225,225,227,.7) 3%,rgba(204,204,204,.7) 45%,rgba(190,190,195,.7) 96%,rgba(131,131,135,.7) 100%); /* IE10+ */
|
|
344
|
+
background: linear-gradient(top, rgba(255,255,255,.7) 0%,rgba(225,225,227,.7) 3%,rgba(204,204,204,.7) 45%,rgba(190,190,195,.7) 96%,rgba(131,131,135,.7) 100%); /* W3C */
|
|
345
|
+
border-radius: 6px;
|
|
346
|
+
box-shadow: 0 2px 5px #333;
|
|
347
|
+
float: left;
|
|
348
|
+
width: 126px;
|
|
349
|
+
height: 47px;
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
.trackpad-wrapper .button-left {
|
|
353
|
+
margin: 12px 0px auto 12px;
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
.trackpad-wrapper .button-right {
|
|
357
|
+
margin: 12px;
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
.trackpad-wrapper .button-left.button-highlight,
|
|
361
|
+
.trackpad-wrapper .button-right.button-highlight {
|
|
362
|
+
background: -webkit-linear-gradient(top, rgba(170,171,182,.7) 0%,rgba(123,123,133,.7) 100%); /* Chrome10+,Safari5.1+ */
|
|
363
|
+
background: -o-linear-gradient(top, rgba(170,171,182,.7) 0%,rgba(123,123,133,.7) 100%); /* Opera 11.10+ */
|
|
364
|
+
background: -ms-linear-gradient(top, rgba(170,171,182,.7) 0%,rgba(123,123,133,.7) 100%); /* IE10+ */
|
|
365
|
+
background: linear-gradient(top, rgba(170,171,182,.7) 0%,rgba(123,123,133,.7) 100%); /* W3C */
|
|
366
|
+
}
|
|
367
|
+
/******************************************************************************
|
|
368
|
+
* Copyright 2013 VMware, Inc. All rights reserved.
|
|
369
|
+
*****************************************************************************/
|
|
370
|
+
|
|
371
|
+
/*
|
|
372
|
+
* extended-keypad.css
|
|
373
|
+
*
|
|
374
|
+
* Defines style for the virtual keys on the control pane.
|
|
375
|
+
*/
|
|
376
|
+
|
|
377
|
+
.ctrl-pane-wrapper {
|
|
378
|
+
width: 290px !important; /* Needed as the default is a bit larger than this */
|
|
379
|
+
border: 1px solid #333 !important;
|
|
380
|
+
-moz-border-radius: 6px; -webkit-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px;
|
|
381
|
+
background: rgb(170,171,182); /* Old browsers */
|
|
382
|
+
background: -webkit-linear-gradient(top, rgba(170,171,182,.93) 0%,rgba(123,123,133,.93) 100%); /* Chrome10+,Safari5.1+ */
|
|
383
|
+
background: -o-linear-gradient(top, rgba(170,171,182,.93) 0%,rgba(123,123,133,.93) 100%); /* Opera 11.10+ */
|
|
384
|
+
background: -ms-linear-gradient(top, rgba(170,171,182,.93) 0%,rgba(123,123,133,.93) 100%); /* IE10+ */
|
|
385
|
+
background: linear-gradient(top, rgba(170,171,182,.93) 0%,rgba(123,123,133,.93) 100%); /* W3C */
|
|
386
|
+
}
|
|
387
|
+
|
|
388
|
+
.fnKey-pane-wrapper {
|
|
389
|
+
width: 427px;
|
|
390
|
+
border: 1px solid #333;
|
|
391
|
+
-moz-border-radius: 6px; -webkit-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px;
|
|
392
|
+
background: #c1c4d1; /* Old browsers */
|
|
393
|
+
background: -webkit-linear-gradient(top, #c1c4d1 0%,#b0b1bd 100%); /* Chrome10+,Safari5.1+ */
|
|
394
|
+
background: -o-linear-gradient(top, #c1c4d1 0%,#b0b1bd 100%); /* Opera 11.10+ */
|
|
395
|
+
background: -ms-linear-gradient(top, #c1c4d1 0%,#b0b1bd 100%); /* IE10+ */
|
|
396
|
+
background: linear-gradient(top, #c1c4d1 0%, #b0b1bd 100%); /* W3C */
|
|
397
|
+
position: absolute;
|
|
398
|
+
padding: 0;
|
|
399
|
+
-moz-box-shadow: 0px 5px 7px rgba(0,0,0,.5);
|
|
400
|
+
-webkit-box-shadow: 0px 5px 7px rgba(0,0,0,.5);
|
|
401
|
+
box-shadow: 0px 5px 7px rgba(0,0,0,.5);
|
|
402
|
+
}
|
|
403
|
+
|
|
404
|
+
.fnKey-pane-wrapper-down {
|
|
405
|
+
width: 427px;
|
|
406
|
+
border: 1px solid #333;
|
|
407
|
+
-moz-border-radius: 6px; -webkit-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px;
|
|
408
|
+
background: #6e6e77; /* Old browsers */
|
|
409
|
+
background: -webkit-linear-gradient(top, #6e6e77 0%,#656565 100%); /* Chrome10+,Safari5.1+ */
|
|
410
|
+
background: -o-linear-gradient(top, #6e6e77 0%,#656565 100%); /* Opera 11.10+ */
|
|
411
|
+
background: -ms-linear-gradient(top, #6e6e77 0%,#656565 100%); /* IE10+ */
|
|
412
|
+
background: linear-gradient(top, #6e6e77 0%, #656565 100%); /* W3C */
|
|
413
|
+
position: absolute;
|
|
414
|
+
padding: 0;
|
|
415
|
+
-moz-box-shadow: 0px 5px 7px rgba(0,0,0,.5);
|
|
416
|
+
-webkit-box-shadow: 0px 5px 7px rgba(0,0,0,.5);
|
|
417
|
+
box-shadow: 0px 5px 7px rgba(0,0,0,.5);
|
|
418
|
+
}
|
|
419
|
+
|
|
420
|
+
/* Hide jquery ui title bar. */
|
|
421
|
+
.ctrl-pane-wrapper .ui-dialog-titlebar {
|
|
422
|
+
border-top: 1px solid #ccc;
|
|
423
|
+
border-left: 1px solid #aaa;
|
|
424
|
+
border-right: 1px solid #aaa;
|
|
425
|
+
border-bottom: 0;
|
|
426
|
+
padding: .6em .8em 0 .8em;
|
|
427
|
+
background: none !important;
|
|
428
|
+
-moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; -khtml-border-top-left-radius: 5px; border-top-left-radius: 5px;
|
|
429
|
+
-moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; -khtml-border-top-right-radius: 5px; border-top-right-radius: 5px;
|
|
430
|
+
}
|
|
431
|
+
|
|
432
|
+
/* Replace jquery ui title bar close icon. */
|
|
433
|
+
.ctrl-pane-wrapper .ui-dialog-titlebar-close {
|
|
434
|
+
margin-top: -9px;
|
|
435
|
+
border: 0 !important;
|
|
436
|
+
background: none !important;
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
/* Background-image is defined along with touch-sprite in 1 place. */
|
|
440
|
+
.ctrl-pane-wrapper .ui-dialog-titlebar-close .ui-icon {
|
|
441
|
+
background-position: -9px -239px;
|
|
442
|
+
background-repeat: no-repeat;
|
|
443
|
+
}
|
|
444
|
+
|
|
445
|
+
.ctrl-pane-wrapper .ui-dialog-titlebar-close .ui-icon:active {
|
|
446
|
+
background-position-x: -24px;
|
|
447
|
+
background-repeat: no-repeat;
|
|
448
|
+
}
|
|
449
|
+
|
|
450
|
+
/* The grabber icon indicating the dialog could be moved around */
|
|
451
|
+
.ctrl-pane-wrapper .ui-dialog-titlebar .ui-dialog-title {
|
|
452
|
+
background-position: -10px -255px;
|
|
453
|
+
background-repeat: no-repeat;
|
|
454
|
+
width: 40px;
|
|
455
|
+
height: 14px;
|
|
456
|
+
margin: 0 0 0 42%;
|
|
457
|
+
}
|
|
458
|
+
|
|
459
|
+
.ctrl-pane-wrapper .ui-dialog-titlebar .ui-dialog-title:active {
|
|
460
|
+
background-position-x: -52px;
|
|
461
|
+
}
|
|
462
|
+
|
|
463
|
+
.ctrl-pane-wrapper .ui-dialog-content {
|
|
464
|
+
background: none !important;
|
|
465
|
+
padding: 0 0;
|
|
466
|
+
border-style: solid;
|
|
467
|
+
border-color: #aaaaaa;
|
|
468
|
+
border-width: 0 1px 1px 1px;
|
|
469
|
+
-moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; -khtml-border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
|
|
470
|
+
-moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -khtml-border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
|
|
471
|
+
}
|
|
472
|
+
|
|
473
|
+
.fnKey-inner-border-helper {
|
|
474
|
+
position: relative;
|
|
475
|
+
background: none !important;
|
|
476
|
+
border-style: solid;
|
|
477
|
+
border-color: #d5d5d5;
|
|
478
|
+
border-width: 1px;
|
|
479
|
+
-moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;
|
|
480
|
+
pointer-events:none;
|
|
481
|
+
}
|
|
482
|
+
|
|
483
|
+
.ctrl-pane-wrapper .ctrl-pane {
|
|
484
|
+
padding: 3px 0 3px 6px;
|
|
485
|
+
height: 140px;
|
|
486
|
+
width: 280px;
|
|
487
|
+
}
|
|
488
|
+
|
|
489
|
+
.ctrl-pane .baseKey {
|
|
490
|
+
float: left;
|
|
491
|
+
border: 0;
|
|
492
|
+
padding: 0;
|
|
493
|
+
width: 57px;
|
|
494
|
+
height: 57px;
|
|
495
|
+
margin: 6px;
|
|
496
|
+
-moz-border-radius: 6px; -webkit-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px;
|
|
497
|
+
font-family: "HelveticaNeue", "Helvetica Neue", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHeros', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
|
|
498
|
+
font-size: 18px;
|
|
499
|
+
text-shadow: 0 1px 1px #eeeeee;
|
|
500
|
+
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, .7);
|
|
501
|
+
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.7);
|
|
502
|
+
box-shadow: 0px 1px 3px rgba(0,0,0,.7);
|
|
503
|
+
}
|
|
504
|
+
|
|
505
|
+
.ctrl-pane .ctrl-key-top-row {
|
|
506
|
+
background: -webkit-linear-gradient(top, #fff 0%,#f3f5fb 2%,#d2d2d8 98%,#999 100%); /* Chrome10+,Safari5.1+ */
|
|
507
|
+
background: -o-linear-gradient(top, #fff 0%,#f3f5fb 2%,#d2d2d8 98%,#999 100%); /* Opera 11.10+ */
|
|
508
|
+
background: -ms-linear-gradient(top, #fff 0%,#f3f5fb 2%,#d2d2d8 98%,#999 100%); /* IE10+ */
|
|
509
|
+
background: linear-gradient(top, #fff 0%,#f3f5fb 2%,#d2d2d8 98%,#999 100%); /* W3C */
|
|
510
|
+
}
|
|
511
|
+
|
|
512
|
+
.ctrl-pane .ctrl-key-bottom-row {
|
|
513
|
+
background: -webkit-linear-gradient(top, #fff 0%,#e1e1e3 2%,#d1d1d4 50%,#bebec3 98%,#838387 100%); /* Chrome10+,Safari5.1+ */
|
|
514
|
+
background: -o-linear-gradient(top, #fff 0%,#e1e1e3 2%,#d1d1d4 50%,#bebec3 98%,#838387 100%); /* Opera 11.10+ */
|
|
515
|
+
background: -ms-linear-gradient(top, #fff 0%,#e1e1e3 2%,#d1d1d4 50%,#bebec3 98%,#838387 100%); /* IE10+ */
|
|
516
|
+
background: linear-gradient(top, #fff 0%,#e1e1e3 2%,#d1d1d4 50%,#bebec3 98%,#838387 100%); /* W3C */
|
|
517
|
+
}
|
|
518
|
+
|
|
519
|
+
.ctrl-pane .up-position .fn-key-top-row {
|
|
520
|
+
color:#333;
|
|
521
|
+
background: #ffffff; /* Old browsers */
|
|
522
|
+
background: -webkit-linear-gradient(top, #ffffff 0%,#f7f7f7 2%,#dcdde3 96%,#999999 100%); /* Chrome10+,Safari5.1+ */
|
|
523
|
+
background: -o-linear-gradient(top, #ffffff 0%,#f7f7f7 2%,#dcdde3 96%,#999999 100%); /* Opera 11.10+ */
|
|
524
|
+
background: -ms-linear-gradient(top, #ffffff 0%,#f7f7f7 2%,#dcdde3 96%,#999999 100%); /* IE10+ */
|
|
525
|
+
background: linear-gradient(top, #ffffff 0%,#f7f7f7 2%,#dcdde3 96%,#999999 100%); /* W3C */
|
|
526
|
+
}
|
|
527
|
+
|
|
528
|
+
.ctrl-pane .up-position .fn-key-bottom-row {
|
|
529
|
+
color:#333;
|
|
530
|
+
background: #ffffff; /* Old browsers */
|
|
531
|
+
background: -webkit-linear-gradient(top, #ffffff 0%,#f3f5fb 2%,#d2d2d8 98%,#999999 100%); /* Chrome10+,Safari5.1+ */
|
|
532
|
+
background: -o-linear-gradient(top, #ffffff 0%,#f3f5fb 2%,#d2d2d8 98%,#999999 100%); /* Opera 11.10+ */
|
|
533
|
+
background: -ms-linear-gradient(top, #ffffff 0%,#f3f5fb 2%,#d2d2d8 98%,#999999 100%); /* IE10+ */
|
|
534
|
+
background: linear-gradient(top, #ffffff 0%,#f3f5fb 2%,#d2d2d8 98%,#999999 100%); /* W3C */
|
|
535
|
+
}
|
|
536
|
+
|
|
537
|
+
.ctrl-pane .down-position .fn-key-top-row {
|
|
538
|
+
color:#333;
|
|
539
|
+
background: #ffffff; /* Old browsers */
|
|
540
|
+
background: -webkit-linear-gradient(top, #ffffff 0%,#e1e1e3 4%,#d1d1d4 45%,#b7b8bd 98%,#838387 100%); /* Chrome10+,Safari5.1+ */
|
|
541
|
+
background: -o-linear-gradient(top, #ffffff 0%,#e1e1e3 4%,#d1d1d4 45%,#b7b8bd 98%,#838387 100%); /* Opera 11.10+ */
|
|
542
|
+
background: -ms-linear-gradient(top, #ffffff 0%,#e1e1e3 4%,#d1d1d4 45%,#b7b8bd 98%,#838387 100%); /* IE10+ */
|
|
543
|
+
background: linear-gradient(top, #ffffff 0%,#e1e1e3 4%,#d1d1d4 45%,#b7b8bd 98%,#838387 100%); /* W3C */
|
|
544
|
+
}
|
|
545
|
+
|
|
546
|
+
.ctrl-pane .down-position .fn-key-bottom-row {
|
|
547
|
+
color:#333;
|
|
548
|
+
background: #ffffff; /* Old browsers */
|
|
549
|
+
background: -webkit-linear-gradient(top, #ffffff 0%,#d9dadd 4%,#c8c8cd 45%,#b0b0b7 98%,#838387 100%); /* Chrome10+,Safari5.1+ */
|
|
550
|
+
background: -o-linear-gradient(top, #ffffff 0%,#d9dadd 4%,#c8c8cd 45%,#b0b0b7 98%,#838387 100%); /* Opera 11.10+ */
|
|
551
|
+
background: -ms-linear-gradient(top, #ffffff 0%,#d9dadd 4%,#c8c8cd 45%,#b0b0b7 98%,#838387 100%); /* IE10+ */
|
|
552
|
+
background: linear-gradient(top, #ffffff 0%,#d9dadd 4%,#c8c8cd 45%,#b0b0b7 98%,#838387 100%); /* W3C */
|
|
553
|
+
}
|
|
554
|
+
|
|
555
|
+
.ctrl-pane .fn-key-top-row {
|
|
556
|
+
margin: 12px 6px 6px 6px;
|
|
557
|
+
}
|
|
558
|
+
|
|
559
|
+
.ctrl-pane .border-key-top-left .fn-key-top-row {
|
|
560
|
+
margin: 12px 6px 6px 12px;
|
|
561
|
+
}
|
|
562
|
+
|
|
563
|
+
.ctrl-pane .border-key-top-right .fn-key-top-row {
|
|
564
|
+
margin: 12px 12px 6px 6px;
|
|
565
|
+
}
|
|
566
|
+
|
|
567
|
+
.ctrl-pane .fn-key-bottom-row {
|
|
568
|
+
margin: 5px 6px 12px 6px;
|
|
569
|
+
}
|
|
570
|
+
|
|
571
|
+
.ctrl-pane .border-key-bottom-left .fn-key-bottom-row {
|
|
572
|
+
margin: 5px 6px 12px 12px;
|
|
573
|
+
}
|
|
574
|
+
|
|
575
|
+
.ctrl-pane .border-key-bottom-right .fn-key-bottom-row {
|
|
576
|
+
margin: 5px 12px 12px 6px;
|
|
577
|
+
}
|
|
578
|
+
|
|
579
|
+
.ctrl-pane .ctrl-key-top-row:active, .ctrl-pane .fn-key-top-row:active,
|
|
580
|
+
.ctrl-pane .ctrl-key-bottom-row:active, .ctrl-pane .fn-key-bottom-row:active {
|
|
581
|
+
background: #bbbbbb;
|
|
582
|
+
background: -webkit-linear-gradient(bottom, #888888 25%, #CCCCCC 68%);
|
|
583
|
+
background: -ms-linear-gradient(bottom, #888888 25%, #CCCCCC 68%);
|
|
584
|
+
background: -o-linear-gradient(bottom, #888888 25%, #CCCCCC 68%);
|
|
585
|
+
background: linear-gradient(bottom, #888888 25%, #CCCCCC 68%);
|
|
586
|
+
}
|
|
587
|
+
|
|
588
|
+
.ctrl-pane .ctrl-key-top-row div, .ctrl-pane .ctrl-key-bottom-row div,
|
|
589
|
+
.ctrl-pane .fn-key-top-row div, .ctrl-pane .fn-key-bottom-row div {
|
|
590
|
+
width: 100%;
|
|
591
|
+
text-align: center;
|
|
592
|
+
padding-top: 17px;
|
|
593
|
+
overflow-x: hidden;
|
|
594
|
+
}
|
|
595
|
+
|
|
596
|
+
/* Highlight selected modifier key */
|
|
597
|
+
.ctrl-pane .ab-modifier-key-down {
|
|
598
|
+
color: #4D8DFF;
|
|
599
|
+
}
|
|
600
|
+
|
|
601
|
+
.ctrl-pane .baseKey img { /* use .touch-sprite for image */
|
|
602
|
+
background-repeat: no-repeat;
|
|
603
|
+
width: 57px;
|
|
604
|
+
height: 57px;
|
|
605
|
+
border: 0;
|
|
606
|
+
-moz-border-radius: 6px; -webkit-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px;
|
|
607
|
+
}
|
|
608
|
+
|
|
609
|
+
.ctrl-pane .baseKey .right-arrow {
|
|
610
|
+
background-position: -242px -182px;
|
|
611
|
+
}
|
|
612
|
+
|
|
613
|
+
.ctrl-pane .baseKey .left-arrow {
|
|
614
|
+
background-position: -126px -182px;
|
|
615
|
+
}
|
|
616
|
+
|
|
617
|
+
.ctrl-pane .baseKey .up-arrow {
|
|
618
|
+
background-position: -299px -182px;
|
|
619
|
+
}
|
|
620
|
+
|
|
621
|
+
.ctrl-pane .baseKey .down-arrow {
|
|
622
|
+
background-position: -183px -182px;
|
|
623
|
+
}
|
|
624
|
+
|
|
625
|
+
.ctrl-pane .baseKey .more-keys {
|
|
626
|
+
background-position: -10px -182px;
|
|
627
|
+
}
|
|
628
|
+
|
|
629
|
+
/* Ctrl - pane flip transition. */
|
|
630
|
+
.ctrl-pane.flip-container {
|
|
631
|
+
perspective: 1000;
|
|
632
|
+
-webkit-perspective: 1000;
|
|
633
|
+
-moz-perspective: 1000;
|
|
634
|
+
-ms-perspective: 1000;
|
|
635
|
+
}
|
|
636
|
+
|
|
637
|
+
/* flip the ctrl-pane when this class toggles. */
|
|
638
|
+
.flip-container.perform-flip .flipper {
|
|
639
|
+
transform: rotateY(180deg);
|
|
640
|
+
-webkit-transform: rotateY(180deg);
|
|
641
|
+
-moz-transform: rotateY(180deg);
|
|
642
|
+
-ms-transform: rotateY(180deg);
|
|
643
|
+
}
|
|
644
|
+
|
|
645
|
+
/* flip speed goes here */
|
|
646
|
+
.flip-container .flipper {
|
|
647
|
+
transition: 0.6s;
|
|
648
|
+
transform-style: preserve-3d;
|
|
649
|
+
-webkit-transition: 0.6s;
|
|
650
|
+
-webkit-transform-style: preserve-3d;
|
|
651
|
+
-moz-transition: 0.6s;
|
|
652
|
+
-moz-transform-style: preserve-3d;
|
|
653
|
+
-ms-transition: 0.6s;
|
|
654
|
+
-ms-transform-style: preserve-3d;
|
|
655
|
+
position: relative;
|
|
656
|
+
}
|
|
657
|
+
|
|
658
|
+
/* hide back of pane during swap */
|
|
659
|
+
.flip-container .front, .flip-container .back {
|
|
660
|
+
backface-visibility: hidden;
|
|
661
|
+
-webkit-backface-visibility: hidden;
|
|
662
|
+
-moz-backface-visibility: hidden;
|
|
663
|
+
-ms-backface-visibility: hidden;
|
|
664
|
+
position: absolute;
|
|
665
|
+
top: 0;
|
|
666
|
+
left: 0;
|
|
667
|
+
}
|
|
668
|
+
|
|
669
|
+
/* front pane, placed above back */
|
|
670
|
+
.flip-container .front {
|
|
671
|
+
z-index: 200;
|
|
672
|
+
}
|
|
673
|
+
|
|
674
|
+
/* back, initially hidden pane */
|
|
675
|
+
.flip-container .back {
|
|
676
|
+
transform: rotateY(180deg);
|
|
677
|
+
-webkit-transform: rotateY(180deg);
|
|
678
|
+
-moz-transform: rotateY(180deg);
|
|
679
|
+
-ms-transform: rotateY(180deg);
|
|
680
|
+
}
|
|
681
|
+
|
|
682
|
+
#fnMasterKey {
|
|
683
|
+
letter-spacing: -1px
|
|
684
|
+
}
|