]>
Commit | Line | Data |
---|---|---|
d58f8b51 JM |
1 | /* |
2 | * noVNC base CSS | |
3 | * Copyright (C) 2012 Joel Martin | |
1d728ace | 4 | * noVNC is licensed under the MPL 2.0 (see LICENSE.txt) |
d58f8b51 JM |
5 | * This file is licensed under the 2-Clause BSD license (see LICENSE.txt). |
6 | */ | |
7 | ||
c327865b | 8 | body { |
01a9eee9 JM |
9 | margin:0; |
10 | padding:0; | |
11 | font-family: Helvetica; | |
12 | /*Background image with light grey curve.*/ | |
13 | background-color:#494949; | |
14 | background-repeat:no-repeat; | |
15 | background-position:right bottom; | |
16 | height:100%; | |
c327865b CG |
17 | } |
18 | ||
19 | html { | |
01a9eee9 | 20 | height:100%; |
c327865b CG |
21 | } |
22 | ||
23 | #noVNC_controls ul { | |
01a9eee9 JM |
24 | list-style: none; |
25 | margin: 0px; | |
26 | padding: 0px; | |
c327865b CG |
27 | } |
28 | #noVNC_controls li { | |
01a9eee9 | 29 | padding-bottom:8px; |
c327865b CG |
30 | } |
31 | ||
32 | #noVNC_host { | |
01a9eee9 JM |
33 | width:150px; |
34 | } | |
c327865b | 35 | #noVNC_port { |
01a9eee9 | 36 | width: 80px; |
c327865b CG |
37 | } |
38 | #noVNC_password { | |
01a9eee9 | 39 | width: 150px; |
c327865b CG |
40 | } |
41 | #noVNC_encrypt { | |
42 | } | |
43 | #noVNC_connectTimeout { | |
01a9eee9 | 44 | width: 30px; |
c327865b | 45 | } |
6209639f JM |
46 | #noVNC_path { |
47 | width: 100px; | |
48 | } | |
c327865b | 49 | #noVNC_connect_button { |
01a9eee9 JM |
50 | width: 110px; |
51 | float:right; | |
c327865b CG |
52 | } |
53 | ||
c327865b | 54 | |
a5df24b4 JM |
55 | #noVNC_view_drag_button { |
56 | display: none; | |
57 | } | |
58 | #sendCtrlAltDelButton { | |
59 | display: none; | |
60 | } | |
c327865b | 61 | #noVNC_mobile_buttons { |
608e0f52 JM |
62 | display: none; |
63 | } | |
64 | ||
65 | .noVNC-buttons-left { | |
a5df24b4 | 66 | float: left; |
01a9eee9 | 67 | padding-left:10px; |
a5df24b4 | 68 | padding-top:4px; |
c327865b | 69 | } |
01a9eee9 | 70 | |
608e0f52 JM |
71 | .noVNC-buttons-right { |
72 | float:right; | |
73 | right: 0px; | |
01a9eee9 | 74 | padding-right:10px; |
a5df24b4 | 75 | padding-top:4px; |
c327865b CG |
76 | } |
77 | ||
78 | #noVNC_status_bar { | |
b70ce077 | 79 | margin-top: 0px; |
01a9eee9 | 80 | padding: 0px; |
c327865b CG |
81 | } |
82 | ||
83 | #noVNC_status_bar div { | |
01a9eee9 JM |
84 | font-size: 12px; |
85 | padding-top: 4px; | |
86 | width:100%; | |
c327865b CG |
87 | } |
88 | ||
c327865b | 89 | #noVNC_status { |
01a9eee9 JM |
90 | height:20px; |
91 | text-align: center; | |
c327865b CG |
92 | } |
93 | #noVNC_settings_menu { | |
01a9eee9 JM |
94 | margin: 3px; |
95 | text-align: left; | |
c327865b CG |
96 | } |
97 | #noVNC_settings_menu ul { | |
01a9eee9 JM |
98 | list-style: none; |
99 | margin: 0px; | |
100 | padding: 0px; | |
c327865b CG |
101 | } |
102 | ||
103 | #noVNC_apply { | |
01a9eee9 | 104 | float:right; |
c327865b CG |
105 | } |
106 | ||
c327865b | 107 | .noVNC_status_normal { |
01a9eee9 | 108 | background: #eee; |
c327865b CG |
109 | } |
110 | .noVNC_status_error { | |
01a9eee9 | 111 | background: #f44; |
c327865b | 112 | } |
01a9eee9 JM |
113 | .noVNC_status_warn { |
114 | background: #ff4; | |
c327865b CG |
115 | } |
116 | ||
117 | /* Do not set width/height for VNC_screen or VNC_canvas or incorrect | |
118 | * scaling will occur. Canvas resizes to remote VNC settings */ | |
b70ce077 JM |
119 | #noVNC_screen_pad { |
120 | margin: 0px; | |
121 | padding: 0px; | |
122 | height: 44px; | |
123 | } | |
c327865b | 124 | #noVNC_screen { |
01a9eee9 JM |
125 | text-align: center; |
126 | display: table; | |
127 | width:100%; | |
128 | height:100%; | |
129 | background-color:#313131; | |
130 | border-bottom-right-radius: 800px 600px; | |
131 | /*border-top-left-radius: 800px 600px;*/ | |
c327865b | 132 | } |
a5df24b4 JM |
133 | |
134 | #noVNC_container, #noVNC_canvas { | |
5299db1a JM |
135 | margin: 0px; |
136 | padding: 0px; | |
a5df24b4 JM |
137 | } |
138 | ||
139 | #noVNC_canvas { | |
140 | left: 0px; | |
c327865b CG |
141 | } |
142 | ||
143 | #VNC_clipboard_clear_button { | |
01a9eee9 | 144 | float:right; |
c327865b CG |
145 | } |
146 | #VNC_clipboard_text { | |
01a9eee9 | 147 | font-size: 11px; |
c327865b CG |
148 | } |
149 | ||
c327865b | 150 | #noVNC_clipboard_clear_button { |
01a9eee9 | 151 | float:right; |
c327865b CG |
152 | } |
153 | ||
f4bce783 JM |
154 | /*Bubble contents divs*/ |
155 | #noVNC_settings { | |
156 | display:none; | |
157 | margin-top:77px; | |
158 | right:20px; | |
159 | position:fixed; | |
160 | } | |
161 | ||
162 | #noVNC_controls { | |
0ce93900 | 163 | display:none; |
f4bce783 JM |
164 | margin-top:77px; |
165 | right:12px; | |
166 | position:fixed; | |
167 | } | |
168 | #noVNC_controls.top:after { | |
169 | right:15px; | |
170 | } | |
171 | ||
0ce93900 JM |
172 | #noVNC_description { |
173 | display:none; | |
174 | position:fixed; | |
175 | ||
176 | margin-top:77px; | |
177 | right:20px; | |
178 | left:20px; | |
179 | padding:15px; | |
180 | color:#000; | |
181 | background:#eee; /* default background for browsers without gradient support */ | |
182 | ||
183 | border:2px solid #E0E0E0; | |
184 | -webkit-border-radius:10px; | |
185 | -moz-border-radius:10px; | |
186 | border-radius:10px; | |
187 | } | |
188 | ||
f4bce783 JM |
189 | #noVNC_clipboard { |
190 | display:none; | |
191 | margin-top:77px; | |
192 | right:30px; | |
193 | position:fixed; | |
194 | } | |
195 | #noVNC_clipboard.top:after { | |
196 | right:85px; | |
197 | } | |
198 | ||
199 | #keyboardinput { | |
200 | width:1px; | |
201 | height:1px; | |
202 | background-color:#fff; | |
203 | color:#fff; | |
204 | border:0; | |
205 | position: relative; | |
206 | left: -40px; | |
207 | z-index: -1; | |
208 | } | |
209 | ||
210 | .noVNC_status_warn { | |
211 | background-color:yellow; | |
212 | } | |
213 | ||
214 | /* | |
215 | * Advanced Styling | |
216 | */ | |
217 | ||
218 | /* Control bar */ | |
219 | #noVNC-control-bar { | |
220 | position:fixed; | |
221 | background: #b2bdcd; /* Old browsers */ | |
222 | background: -moz-linear-gradient(top, #b2bdcd 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */ | |
223 | 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+ */ | |
224 | background: -webkit-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */ | |
225 | background: -o-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */ | |
226 | background: -ms-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */ | |
227 | background: linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */ | |
228 | ||
229 | display:block; | |
230 | height:44px; | |
231 | left:0; | |
232 | top:0; | |
233 | width:100%; | |
234 | z-index:200; | |
235 | } | |
236 | ||
237 | .noVNC_status_button { | |
238 | padding: 4px 4px; | |
239 | vertical-align: middle; | |
240 | border:1px solid #869dbc; | |
241 | -webkit-border-radius: 6px; | |
242 | -moz-border-radius: 6px; | |
243 | border-radius: 6px; | |
244 | background: #b2bdcd; /* Old browsers */ | |
245 | background: -moz-linear-gradient(top, #b2bdcd 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */ | |
246 | 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+ */ | |
247 | background: -webkit-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */ | |
248 | background: -o-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */ | |
249 | background: -ms-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */ | |
250 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2bdcd', endColorstr='#6e84a3',GradientType=0 ); /* IE6-9 */ | |
251 | background: linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */ | |
252 | /*box-shadow:inset 0.4px 0.4px 0.4px #000000;*/ | |
253 | } | |
254 | ||
255 | .noVNC_status_button_selected { | |
256 | padding: 4px 4px; | |
257 | vertical-align: middle; | |
258 | border:1px solid #4366a9; | |
259 | -webkit-border-radius: 6px; | |
260 | -moz-border-radius: 6px; | |
261 | background: #779ced; /* Old browsers */ | |
262 | background: -moz-linear-gradient(top, #779ced 0%, #3970e0 49%, #2160dd 51%, #2463df 100%); /* FF3.6+ */ | |
263 | 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+ */ | |
264 | background: -webkit-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* Chrome10+,Safari5.1+ */ | |
265 | background: -o-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* Opera11.10+ */ | |
266 | background: -ms-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* IE10+ */ | |
267 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#779ced', endColorstr='#2463df',GradientType=0 ); /* IE6-9 */ | |
268 | background: linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* W3C */ | |
269 | /*box-shadow:inset 0.4px 0.4px 0.4px #000000;*/ | |
270 | } | |
271 | ||
272 | ||
c327865b CG |
273 | /*Settings Bubble*/ |
274 | .triangle-right { | |
01a9eee9 JM |
275 | position:relative; |
276 | padding:15px; | |
277 | margin:1em 0 3em; | |
278 | color:#fff; | |
279 | background:#fff; /* default background for browsers without gradient support */ | |
280 | /* css3 */ | |
281 | /*background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698)); | |
282 | background:-moz-linear-gradient(#2e88c4, #075698); | |
283 | background:-o-linear-gradient(#2e88c4, #075698); | |
284 | background:linear-gradient(#2e88c4, #075698);*/ | |
285 | -webkit-border-radius:10px; | |
286 | -moz-border-radius:10px; | |
287 | border-radius:10px; | |
288 | color:#000; | |
289 | border:2px solid #E0E0E0; | |
c327865b CG |
290 | } |
291 | ||
292 | .triangle-right.top:after { | |
01a9eee9 JM |
293 | border-color: transparent #E0E0E0; |
294 | border-width: 20px 20px 0 0; | |
295 | bottom: auto; | |
296 | left: auto; | |
297 | right: 50px; | |
298 | top: -20px; | |
c327865b CG |
299 | } |
300 | ||
301 | .triangle-right:after { | |
01a9eee9 JM |
302 | content:""; |
303 | position:absolute; | |
304 | bottom:-20px; /* value = - border-top-width - border-bottom-width */ | |
305 | left:50px; /* controls horizontal position */ | |
306 | border-width:20px 0 0 20px; /* vary these values to change the angle of the vertex */ | |
307 | border-style:solid; | |
5299db1a | 308 | border-color:#E0E0E0 transparent; |
01a9eee9 | 309 | /* reduce the damage in FF3.0 */ |
5299db1a | 310 | display:block; |
01a9eee9 | 311 | width:0; |
c327865b CG |
312 | } |
313 | ||
314 | .triangle-right.top:after { | |
01a9eee9 JM |
315 | top:-40px; /* value = - border-top-width - border-bottom-width */ |
316 | right:50px; /* controls horizontal position */ | |
317 | bottom:auto; | |
318 | left:auto; | |
319 | border-width:40px 40px 0 0; /* vary these values to change the angle of the vertex */ | |
5299db1a | 320 | border-color:transparent #E0E0E0; |
c327865b CG |
321 | } |
322 | ||
b70ce077 | 323 | /*Default noVNC logo.*/ |
479bfa99 JM |
324 | /* From: http://fonts.googleapis.com/css?family=Orbitron:700 */ |
325 | @font-face { | |
326 | font-family: 'Orbitron'; | |
327 | font-style: normal; | |
328 | font-weight: 700; | |
329 | src: local('?'), url('Orbitron700.woff') format('woff'), | |
330 | url('Orbitron700.ttf') format('truetype'); | |
331 | } | |
332 | ||
b70ce077 | 333 | #noVNC_logo { |
a5df24b4 JM |
334 | margin-top: 170px; |
335 | margin-left: 10px; | |
01a9eee9 JM |
336 | color:yellow; |
337 | text-align:left; | |
479bfa99 | 338 | font-family: 'Orbitron', 'OrbitronTTF', sans-serif; |
01a9eee9 JM |
339 | line-height:90%; |
340 | text-shadow: | |
c327865b CG |
341 | 5px 5px 0 #000, |
342 | -1px -1px 0 #000, | |
343 | 1px -1px 0 #000, | |
344 | -1px 1px 0 #000, | |
345 | 1px 1px 0 #000; | |
346 | } | |
347 | ||
a5df24b4 | 348 | |
b70ce077 | 349 | #noVNC_logo span{ |
01a9eee9 | 350 | color:green; |
a7eb596d CG |
351 | } |
352 | ||
a5df24b4 JM |
353 | /* ---------------------------------------- |
354 | * Media sizing | |
355 | * ---------------------------------------- | |
356 | */ | |
357 | ||
358 | ||
359 | .noVNC_status_button { | |
360 | font-size: 12px; | |
a5df24b4 | 361 | } |
938daad1 | 362 | |
a5df24b4 JM |
363 | #noVNC_clipboard_text { |
364 | width: 500px; | |
a5df24b4 JM |
365 | } |
366 | ||
367 | #noVNC_logo { | |
368 | font-size: 180px; | |
369 | } | |
370 | ||
371 | @media screen and (min-width: 481px) and (max-width: 640px) { | |
372 | .noVNC_status_button { | |
373 | font-size: 10px; | |
a5df24b4 JM |
374 | } |
375 | #noVNC_clipboard_text { | |
376 | width: 410px; | |
a5df24b4 JM |
377 | } |
378 | #noVNC_logo { | |
379 | font-size: 150px; | |
380 | } | |
381 | } | |
382 | ||
383 | @media screen and (min-width: 321px) and (max-width: 480px) { | |
384 | .noVNC_status_button { | |
385 | font-size: 10px; | |
a5df24b4 JM |
386 | } |
387 | #noVNC_clipboard_text { | |
388 | width: 250px; | |
a5df24b4 JM |
389 | } |
390 | #noVNC_logo { | |
391 | font-size: 110px; | |
392 | } | |
393 | } | |
394 | ||
395 | @media screen and (max-width: 320px) { | |
396 | .noVNC_status_button { | |
397 | font-size: 9px; | |
a5df24b4 JM |
398 | } |
399 | #noVNC_clipboard_text { | |
400 | width: 220px; | |
a5df24b4 JM |
401 | } |
402 | #noVNC_logo { | |
403 | font-size: 90px; | |
404 | } | |
405 | } |