]>
Commit | Line | Data |
---|---|---|
d58f8b51 JM |
1 | /* |
2 | * noVNC base CSS | |
3 | * Copyright (C) 2012 Joel Martin | |
682fd02b | 4 | * Copyright (C) 2016 Samuel Mannehed for Cendio AB |
6cba147d | 5 | * Copyright (C) 2016 Pierre Ossman for Cendio AB |
1d728ace | 6 | * noVNC is licensed under the MPL 2.0 (see LICENSE.txt) |
d58f8b51 JM |
7 | * This file is licensed under the 2-Clause BSD license (see LICENSE.txt). |
8 | */ | |
9 | ||
c327865b | 10 | body { |
01a9eee9 JM |
11 | margin:0; |
12 | padding:0; | |
13 | font-family: Helvetica; | |
14 | /*Background image with light grey curve.*/ | |
15 | background-color:#494949; | |
16 | background-repeat:no-repeat; | |
17 | background-position:right bottom; | |
18 | height:100%; | |
c327865b CG |
19 | } |
20 | ||
21 | html { | |
01a9eee9 | 22 | height:100%; |
c327865b CG |
23 | } |
24 | ||
2869308c | 25 | #noVNC_buttons { |
26 | white-space: nowrap; | |
c327865b | 27 | } |
2869308c | 28 | |
29 | /* ---------------------------------------- | |
30 | * Control Bar | |
31 | * ---------------------------------------- | |
32 | */ | |
33 | ||
34 | #noVNC_control_bar { | |
35 | position: fixed; | |
36 | display: block; | |
37 | height: 36px; | |
38 | left: 0; | |
39 | top: 0; | |
40 | width: 100%; | |
41 | z-index: 200; | |
ca5c74ad | 42 | |
43 | background: #b2bdcd; /* Old browsers */ | |
44 | background: -moz-linear-gradient(top, #b2bdcd 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */ | |
45 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2bdcd), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */ | |
46 | background: -webkit-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */ | |
47 | background: -o-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */ | |
48 | background: -ms-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */ | |
49 | background: linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */ | |
c327865b CG |
50 | } |
51 | ||
2869308c | 52 | /* General button style */ |
a49d9298 | 53 | .noVNC_button { |
2869308c | 54 | padding: 4px 4px; |
55 | vertical-align: middle; | |
56 | border:1px solid #869dbc; | |
57 | -webkit-border-radius: 6px; | |
58 | -moz-border-radius: 6px; | |
59 | border-radius: 6px; | |
60 | background: #b2bdcd; /* Old browsers */ | |
61 | background: -moz-linear-gradient(top, #b2bdcd 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */ | |
62 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2bdcd), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */ | |
63 | background: -webkit-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */ | |
64 | background: -o-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */ | |
65 | background: -ms-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */ | |
66 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2bdcd', endColorstr='#6e84a3',GradientType=0 ); /* IE6-9 */ | |
67 | background: linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */ | |
68 | /*box-shadow:inset 0.4px 0.4px 0.4px #000000;*/ | |
69 | font-size: 12px; | |
01a9eee9 | 70 | } |
d9e86214 PO |
71 | .noVNC_button.noVNC_selected { |
72 | border-color: #4366a9; | |
2869308c | 73 | background: #779ced; /* Old browsers */ |
74 | background: -moz-linear-gradient(top, #779ced 0%, #3970e0 49%, #2160dd 51%, #2463df 100%); /* FF3.6+ */ | |
75 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#779ced), color-stop(49%,#3970e0), color-stop(51%,#2160dd), color-stop(100%,#2463df)); /* Chrome,Safari4+ */ | |
76 | background: -webkit-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* Chrome10+,Safari5.1+ */ | |
77 | background: -o-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* Opera11.10+ */ | |
78 | background: -ms-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* IE10+ */ | |
79 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#779ced', endColorstr='#2463df',GradientType=0 ); /* IE6-9 */ | |
80 | background: linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* W3C */ | |
c327865b | 81 | } |
a49d9298 | 82 | .noVNC_button:disabled { |
2869308c | 83 | opacity: 0.4; |
c327865b | 84 | } |
a49d9298 | 85 | .noVNC_button.noVNC_hidden { |
e40978c7 PO |
86 | display: none; |
87 | } | |
2869308c | 88 | |
89 | /* Panels */ | |
286947cb | 90 | .noVNC_panel { |
24d8b311 PO |
91 | position: fixed; |
92 | top: 46px; | |
93 | right: 15px; | |
94 | transform: translate(0, -50px); | |
95 | ||
96 | transition: 0.5s ease-in-out; | |
97 | ||
98 | visibility: hidden; | |
99 | opacity: 0; | |
100 | ||
2869308c | 101 | padding: 15px; |
24d8b311 PO |
102 | |
103 | background: #fff; | |
2869308c | 104 | -webkit-border-radius: 10px; |
105 | -moz-border-radius: 10px; | |
106 | border-radius: 10px; | |
107 | color: #000; | |
108 | border: 2px solid #E0E0E0; | |
24d8b311 | 109 | box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5); |
c327865b | 110 | } |
e40978c7 | 111 | .noVNC_panel.noVNC_open { |
24d8b311 PO |
112 | visibility: visible; |
113 | opacity: 1; | |
114 | transform: translate(0, 0); | |
a5df24b4 | 115 | } |
2869308c | 116 | |
117 | /* noVNC Touch Device only buttons */ | |
118 | #noVNC_mobile_buttons { | |
e40978c7 PO |
119 | display: inline; |
120 | } | |
121 | #noVNC_mobile_buttons.noVNC_hidden { | |
a6357e82 | 122 | display: none; |
123 | } | |
2869308c | 124 | |
125 | #noVNC_keyboardinput { | |
126 | width: 1px; | |
127 | height: 1px; | |
128 | background-color: #fff; | |
129 | color: #fff; | |
130 | border: 0; | |
131 | position: relative; | |
132 | left: -40px; | |
133 | z-index: -1; | |
134 | ime-mode: disabled; | |
fb35d50f | 135 | } |
2869308c | 136 | |
a49d9298 | 137 | #noVNC_toggle_extra_keys_button { |
608e0f52 JM |
138 | display: none; |
139 | } | |
140 | ||
53c01a23 | 141 | #noVNC_extra_keys { |
142 | display: inline; | |
143 | list-style-type: none; | |
144 | padding: 0px; | |
145 | margin: 0px; | |
146 | position: relative; | |
147 | } | |
e40978c7 PO |
148 | #noVNC_extra_keys.noVNC_hidden { |
149 | display: none; | |
150 | } | |
a49d9298 | 151 | #noVNC_toggle_ctrl_button { |
2869308c | 152 | display: inline; |
153 | } | |
a49d9298 | 154 | #noVNC_toggle_alt_button { |
2869308c | 155 | display: inline; |
156 | } | |
a49d9298 | 157 | #noVNC_send_tab_button { |
2869308c | 158 | display: inline; |
159 | } | |
a49d9298 | 160 | #noVNC_send_esc_button { |
2869308c | 161 | display: inline; |
162 | } | |
6cba147d PO |
163 | #noVNC_modifiers { |
164 | display: inline; | |
165 | } | |
53c01a23 | 166 | |
2869308c | 167 | /* Left side buttons */ |
3f2c25a6 | 168 | .noVNC_buttons_left { |
a5df24b4 | 169 | float: left; |
0fa4e0a9 SM |
170 | z-index: 1; |
171 | position: relative; | |
2869308c | 172 | padding-left: 10px; |
c327865b | 173 | } |
01a9eee9 | 174 | |
2869308c | 175 | /* Right side buttons */ |
176 | .noVNC_buttons_right { | |
177 | float: right; | |
178 | right: 0px; | |
179 | z-index: 2; | |
180 | position: absolute; | |
181 | padding-right: 10px; | |
182 | } | |
ae510306 | 183 | |
2869308c | 184 | /* XVP Shutdown/Reboot */ |
185 | #noVNC_xvp { | |
2869308c | 186 | } |
187 | #noVNC_xvp_buttons { | |
188 | display: none; | |
f4bce783 JM |
189 | } |
190 | ||
2869308c | 191 | /* Clipboard */ |
192 | #noVNC_clipboard { | |
2869308c | 193 | } |
194 | #noVNC_clipboard_text { | |
195 | width: 500px; | |
196 | } | |
197 | #noVNC_clipboard_clear_button { | |
198 | float: right; | |
f4bce783 JM |
199 | } |
200 | ||
2869308c | 201 | /* Settings */ |
202 | #noVNC_settings { | |
2869308c | 203 | } |
eeb395dc | 204 | #noVNC_settings ul { |
2869308c | 205 | list-style: none; |
eeb395dc | 206 | margin: 3px; |
2869308c | 207 | padding: 0px; |
208 | } | |
209 | #noVNC_setting_path { | |
210 | width: 100px; | |
211 | } | |
212 | #noVNC_settings_apply { | |
213 | float: right; | |
214 | } | |
f4bce783 | 215 | |
2869308c | 216 | /* Connection Controls */ |
a49d9298 | 217 | #noVNC_connect_controls { |
2869308c | 218 | } |
a49d9298 | 219 | #noVNC_connect_controls ul { |
2869308c | 220 | list-style: none; |
221 | margin: 0px; | |
222 | padding: 0px; | |
223 | } | |
a49d9298 | 224 | #noVNC_connect_controls li { |
2869308c | 225 | padding-bottom:8px; |
226 | } | |
227 | #noVNC_setting_host { | |
228 | width:150px; | |
229 | } | |
230 | #noVNC_setting_port { | |
231 | width: 80px; | |
232 | } | |
233 | #noVNC_setting_password { | |
234 | width: 150px; | |
235 | } | |
236 | #noVNC_connect_button { | |
237 | width: 110px; | |
238 | float: right; | |
c327865b CG |
239 | } |
240 | ||
ca5c74ad | 241 | /* ---------------------------------------- |
242 | * Status Dialog | |
243 | * ---------------------------------------- | |
244 | */ | |
245 | ||
246 | #noVNC_status { | |
2869308c | 247 | position: fixed; |
ca5c74ad | 248 | top: 0; |
249 | left: 0; | |
250 | width: 100%; | |
251 | z-index: 3; | |
24d8b311 PO |
252 | transform: translateY(-100%); |
253 | ||
254 | transition: 0.5s ease-in-out; | |
255 | ||
256 | visibility: hidden; | |
257 | opacity: 0; | |
2869308c | 258 | |
ca5c74ad | 259 | padding: 5px; |
2869308c | 260 | |
24d8b311 | 261 | display: flex; |
ca5c74ad | 262 | flex-direction: row; |
263 | justify-content: center; | |
264 | align-content: center; | |
265 | ||
266 | line-height: 25px; | |
2869308c | 267 | word-wrap: break-word; |
268 | color: #fff; | |
2869308c | 269 | |
ca5c74ad | 270 | border-bottom: 1px solid rgba(0, 0, 0, 0.9); |
c327865b | 271 | } |
ca5c74ad | 272 | #noVNC_status.noVNC_open { |
24d8b311 PO |
273 | transform: translateY(0); |
274 | visibility: visible; | |
275 | opacity: 1; | |
ca5c74ad | 276 | } |
277 | ||
278 | #noVNC_status::before { | |
279 | content: ""; | |
280 | display: inline-block; | |
281 | width: 25px; | |
282 | height: 25px; | |
283 | margin-right: 5px; | |
284 | } | |
285 | ||
286 | #noVNC_status.noVNC_status_normal { | |
287 | background: rgba(128,128,128,0.9); | |
288 | } | |
289 | #noVNC_status.noVNC_status_normal::before { | |
290 | content: url("../images/info.svg") " "; | |
291 | } | |
292 | #noVNC_status.noVNC_status_error { | |
293 | background: rgba(200,55,55,0.9); | |
294 | } | |
295 | #noVNC_status.noVNC_status_error::before { | |
296 | content: url("../images/error.svg") " "; | |
297 | } | |
298 | #noVNC_status.noVNC_status_warn { | |
299 | background: rgba(180,180,30,0.9); | |
300 | } | |
301 | #noVNC_status.noVNC_status_warn::before { | |
302 | content: url("../images/warning.svg") " "; | |
e40978c7 | 303 | } |
c327865b | 304 | |
2869308c | 305 | /* ---------------------------------------- |
306 | * Main Area | |
307 | * ---------------------------------------- | |
308 | */ | |
309 | ||
310 | #noVNC_container { | |
311 | display: table; | |
312 | width: 100%; | |
313 | height: 100%; | |
314 | background-color: #313131; | |
315 | border-bottom-right-radius: 800px 600px; | |
316 | /*border-top-left-radius: 800px 600px;*/ | |
317 | } | |
318 | ||
319 | /* HTML5 Canvas */ | |
320 | #noVNC_screen { | |
2869308c | 321 | position: absolute; |
322 | margin: 0px; | |
323 | padding: 0px; | |
324 | bottom: 0px; | |
325 | top: 36px; /* the height of the control bar */ | |
326 | left: 0px; | |
327 | right: 0px; | |
328 | width: auto; | |
329 | height: auto; | |
330 | } | |
e40978c7 PO |
331 | #noVNC_screen.noVNC_hidden { |
332 | display: none; | |
333 | } | |
2869308c | 334 | |
335 | /* Do not set width/height for VNC_canvas or incorrect | |
336 | * scaling will occur. Canvas size depends on remote VNC | |
337 | * settings and noVNC settings. */ | |
338 | #noVNC_canvas { | |
339 | position: absolute; | |
340 | left: 0; | |
341 | right: 0; | |
342 | margin-left: auto; | |
343 | margin-right: auto; | |
c327865b CG |
344 | } |
345 | ||
b70ce077 | 346 | /*Default noVNC logo.*/ |
479bfa99 JM |
347 | /* From: http://fonts.googleapis.com/css?family=Orbitron:700 */ |
348 | @font-face { | |
349 | font-family: 'Orbitron'; | |
350 | font-style: normal; | |
351 | font-weight: 700; | |
352 | src: local('?'), url('Orbitron700.woff') format('woff'), | |
353 | url('Orbitron700.ttf') format('truetype'); | |
354 | } | |
355 | ||
b70ce077 | 356 | #noVNC_logo { |
a5df24b4 JM |
357 | margin-top: 170px; |
358 | margin-left: 10px; | |
01a9eee9 JM |
359 | color:yellow; |
360 | text-align:left; | |
479bfa99 | 361 | font-family: 'Orbitron', 'OrbitronTTF', sans-serif; |
2869308c | 362 | font-size: 180px; |
01a9eee9 JM |
363 | line-height:90%; |
364 | text-shadow: | |
c327865b CG |
365 | 5px 5px 0 #000, |
366 | -1px -1px 0 #000, | |
367 | 1px -1px 0 #000, | |
368 | -1px 1px 0 #000, | |
369 | 1px 1px 0 #000; | |
370 | } | |
e40978c7 PO |
371 | #noVNC_logo.noVNC_hidden { |
372 | display: none; | |
373 | } | |
a5df24b4 | 374 | |
b70ce077 | 375 | #noVNC_logo span{ |
01a9eee9 | 376 | color:green; |
a7eb596d CG |
377 | } |
378 | ||
a5df24b4 JM |
379 | /* ---------------------------------------- |
380 | * Media sizing | |
381 | * ---------------------------------------- | |
382 | */ | |
383 | ||
35b29c98 | 384 | @media screen and (max-width: 640px){ |
9d04096e | 385 | #noVNC_clipboard_text { |
386 | width: 410px; | |
387 | } | |
388 | #noVNC_logo { | |
389 | font-size: 150px; | |
390 | } | |
a49d9298 | 391 | .noVNC_button { |
a5df24b4 | 392 | font-size: 10px; |
a5df24b4 | 393 | } |
3f2c25a6 | 394 | .noVNC_buttons_left { |
35b29c98 | 395 | padding-left: 0px; |
396 | } | |
3f2c25a6 | 397 | .noVNC_buttons_right { |
35b29c98 | 398 | padding-right: 0px; |
399 | } | |
bd88b943 | 400 | /* collapse the extra keys on lower resolutions */ |
a49d9298 | 401 | #noVNC_toggle_extra_keys_button { |
bd88b943 | 402 | display: inline; |
53c01a23 | 403 | } |
6cba147d | 404 | #noVNC_modifiers { |
bd88b943 | 405 | display: none; |
6cba147d | 406 | } |
e40978c7 PO |
407 | #noVNC_modifiers.noVNC_open { |
408 | display: inline; | |
409 | } | |
a49d9298 | 410 | #noVNC_toggle_ctrl_button { |
bd88b943 | 411 | position: absolute; |
412 | top: 30px; | |
413 | left: 0px; | |
414 | } | |
a49d9298 | 415 | #noVNC_toggle_alt_button { |
bd88b943 | 416 | position: absolute; |
417 | top: 65px; | |
418 | left: 0px; | |
419 | } | |
a49d9298 | 420 | #noVNC_send_tab_button { |
bd88b943 | 421 | position: absolute; |
422 | top: 100px; | |
423 | left: 0px; | |
424 | } | |
a49d9298 | 425 | #noVNC_send_esc_button { |
bd88b943 | 426 | position: absolute; |
427 | top: 135px; | |
428 | left: 0px; | |
53c01a23 | 429 | } |
a5df24b4 JM |
430 | } |
431 | ||
432 | @media screen and (min-width: 321px) and (max-width: 480px) { | |
a5df24b4 JM |
433 | #noVNC_clipboard_text { |
434 | width: 250px; | |
a5df24b4 JM |
435 | } |
436 | #noVNC_logo { | |
437 | font-size: 110px; | |
438 | } | |
439 | } | |
440 | ||
441 | @media screen and (max-width: 320px) { | |
a49d9298 | 442 | .noVNC_button { |
a5df24b4 | 443 | font-size: 9px; |
a5df24b4 JM |
444 | } |
445 | #noVNC_clipboard_text { | |
446 | width: 220px; | |
a5df24b4 JM |
447 | } |
448 | #noVNC_logo { | |
449 | font-size: 90px; | |
450 | } | |
451 | } |