]>
Commit | Line | Data |
---|---|---|
c327865b | 1 | body { |
01a9eee9 JM |
2 | margin:0; |
3 | padding:0; | |
4 | font-family: Helvetica; | |
5 | /*Background image with light grey curve.*/ | |
6 | background-color:#494949; | |
7 | background-repeat:no-repeat; | |
8 | background-position:right bottom; | |
9 | height:100%; | |
c327865b CG |
10 | } |
11 | ||
12 | html { | |
01a9eee9 | 13 | height:100%; |
c327865b CG |
14 | } |
15 | ||
16 | #noVNC_controls ul { | |
01a9eee9 JM |
17 | list-style: none; |
18 | margin: 0px; | |
19 | padding: 0px; | |
c327865b CG |
20 | } |
21 | #noVNC_controls li { | |
01a9eee9 | 22 | padding-bottom:8px; |
c327865b CG |
23 | } |
24 | ||
25 | #noVNC_host { | |
01a9eee9 JM |
26 | width:150px; |
27 | } | |
c327865b | 28 | #noVNC_port { |
01a9eee9 | 29 | width: 80px; |
c327865b CG |
30 | } |
31 | #noVNC_password { | |
01a9eee9 | 32 | width: 150px; |
c327865b CG |
33 | } |
34 | #noVNC_encrypt { | |
35 | } | |
36 | #noVNC_connectTimeout { | |
01a9eee9 | 37 | width: 30px; |
c327865b CG |
38 | } |
39 | #noVNC_connect_button { | |
01a9eee9 JM |
40 | width: 110px; |
41 | float:right; | |
c327865b CG |
42 | } |
43 | ||
44 | /*Mobile buttons bar.*/ | |
45 | #noVNC-control-bar { | |
46 | position:fixed; | |
a7eb596d | 47 | background-color:#6d84a2; |
01a9eee9 JM |
48 | background-image: -webkit-gradient( |
49 | linear, | |
50 | left bottom, | |
51 | left top, | |
52 | color-stop(0.5, rgb(109,132,162)), | |
53 | color-stop(1, rgb(140,157,179)) | |
54 | ); | |
55 | background-image: -moz-linear-gradient( | |
56 | center bottom, | |
57 | rgb(109,132,162) 50%, | |
58 | rgb(140,157,179) 100% | |
59 | ); | |
c327865b CG |
60 | display:block; |
61 | height:44px; | |
62 | left:0; | |
63 | top:0; | |
64 | width:100%; | |
65 | z-index:200; | |
66 | } | |
67 | ||
a5df24b4 JM |
68 | #noVNC_view_drag_button { |
69 | display: none; | |
70 | } | |
71 | #sendCtrlAltDelButton { | |
72 | display: none; | |
73 | } | |
c327865b | 74 | #noVNC_mobile_buttons { |
608e0f52 JM |
75 | display: none; |
76 | } | |
77 | ||
78 | .noVNC-buttons-left { | |
a5df24b4 | 79 | float: left; |
01a9eee9 | 80 | padding-left:10px; |
a5df24b4 | 81 | padding-top:4px; |
c327865b | 82 | } |
01a9eee9 | 83 | |
608e0f52 JM |
84 | .noVNC-buttons-right { |
85 | float:right; | |
86 | right: 0px; | |
01a9eee9 | 87 | padding-right:10px; |
a5df24b4 | 88 | padding-top:4px; |
c327865b CG |
89 | } |
90 | ||
91 | #noVNC_status_bar { | |
b70ce077 | 92 | margin-top: 0px; |
01a9eee9 | 93 | padding: 0px; |
c327865b CG |
94 | } |
95 | ||
96 | #noVNC_status_bar div { | |
01a9eee9 JM |
97 | font-size: 12px; |
98 | padding-top: 4px; | |
99 | width:100%; | |
c327865b CG |
100 | } |
101 | ||
c327865b | 102 | #noVNC_status { |
01a9eee9 JM |
103 | height:20px; |
104 | text-align: center; | |
c327865b CG |
105 | } |
106 | #noVNC_settings_menu { | |
01a9eee9 JM |
107 | margin: 3px; |
108 | text-align: left; | |
c327865b CG |
109 | } |
110 | #noVNC_settings_menu ul { | |
01a9eee9 JM |
111 | list-style: none; |
112 | margin: 0px; | |
113 | padding: 0px; | |
c327865b CG |
114 | } |
115 | ||
116 | #noVNC_apply { | |
01a9eee9 | 117 | float:right; |
c327865b CG |
118 | } |
119 | ||
c327865b | 120 | .noVNC_status_normal { |
01a9eee9 | 121 | background: #eee; |
c327865b CG |
122 | } |
123 | .noVNC_status_error { | |
01a9eee9 | 124 | background: #f44; |
c327865b | 125 | } |
01a9eee9 JM |
126 | .noVNC_status_warn { |
127 | background: #ff4; | |
c327865b CG |
128 | } |
129 | ||
130 | /* Do not set width/height for VNC_screen or VNC_canvas or incorrect | |
131 | * scaling will occur. Canvas resizes to remote VNC settings */ | |
b70ce077 JM |
132 | #noVNC_screen_pad { |
133 | margin: 0px; | |
134 | padding: 0px; | |
135 | height: 44px; | |
136 | } | |
c327865b | 137 | #noVNC_screen { |
01a9eee9 JM |
138 | text-align: center; |
139 | display: table; | |
140 | width:100%; | |
141 | height:100%; | |
142 | background-color:#313131; | |
143 | border-bottom-right-radius: 800px 600px; | |
144 | /*border-top-left-radius: 800px 600px;*/ | |
c327865b | 145 | } |
a5df24b4 JM |
146 | |
147 | #noVNC_container, #noVNC_canvas { | |
148 | margin: 0px; | |
149 | padding: 0px; | |
150 | } | |
151 | ||
152 | #noVNC_canvas { | |
153 | left: 0px; | |
c327865b CG |
154 | } |
155 | ||
156 | #VNC_clipboard_clear_button { | |
01a9eee9 | 157 | float:right; |
c327865b CG |
158 | } |
159 | #VNC_clipboard_text { | |
01a9eee9 | 160 | font-size: 11px; |
c327865b CG |
161 | } |
162 | ||
c327865b | 163 | #noVNC_clipboard_clear_button { |
01a9eee9 | 164 | float:right; |
c327865b CG |
165 | } |
166 | ||
167 | /*Settings Bubble*/ | |
168 | .triangle-right { | |
01a9eee9 JM |
169 | position:relative; |
170 | padding:15px; | |
171 | margin:1em 0 3em; | |
172 | color:#fff; | |
173 | background:#fff; /* default background for browsers without gradient support */ | |
174 | /* css3 */ | |
175 | /*background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698)); | |
176 | background:-moz-linear-gradient(#2e88c4, #075698); | |
177 | background:-o-linear-gradient(#2e88c4, #075698); | |
178 | background:linear-gradient(#2e88c4, #075698);*/ | |
179 | -webkit-border-radius:10px; | |
180 | -moz-border-radius:10px; | |
181 | border-radius:10px; | |
182 | color:#000; | |
183 | border:2px solid #E0E0E0; | |
c327865b CG |
184 | } |
185 | ||
186 | .triangle-right.top:after { | |
01a9eee9 JM |
187 | border-color: transparent #E0E0E0; |
188 | border-width: 20px 20px 0 0; | |
189 | bottom: auto; | |
190 | left: auto; | |
191 | right: 50px; | |
192 | top: -20px; | |
c327865b CG |
193 | } |
194 | ||
195 | .triangle-right:after { | |
01a9eee9 JM |
196 | content:""; |
197 | position:absolute; | |
198 | bottom:-20px; /* value = - border-top-width - border-bottom-width */ | |
199 | left:50px; /* controls horizontal position */ | |
200 | border-width:20px 0 0 20px; /* vary these values to change the angle of the vertex */ | |
201 | border-style:solid; | |
202 | border-color:#E0E0E0 transparent; | |
203 | /* reduce the damage in FF3.0 */ | |
204 | display:block; | |
205 | width:0; | |
c327865b CG |
206 | } |
207 | ||
208 | .triangle-right.top:after { | |
01a9eee9 JM |
209 | top:-40px; /* value = - border-top-width - border-bottom-width */ |
210 | right:50px; /* controls horizontal position */ | |
211 | bottom:auto; | |
212 | left:auto; | |
213 | border-width:40px 40px 0 0; /* vary these values to change the angle of the vertex */ | |
214 | border-color:transparent #E0E0E0; | |
c327865b CG |
215 | } |
216 | ||
217 | /*Bubble contents divs*/ | |
a5df24b4 JM |
218 | #noVNC_settings { |
219 | display:none; | |
01a9eee9 | 220 | margin-top:72px; |
a5df24b4 | 221 | right:10px; |
01a9eee9 | 222 | position:fixed; |
c327865b CG |
223 | } |
224 | ||
225 | #noVNC_controls { | |
01a9eee9 | 226 | margin-top:72px; |
01a9eee9 | 227 | right:10px; |
a5df24b4 JM |
228 | position:fixed; |
229 | } | |
230 | #noVNC_controls.top:after { | |
231 | right:15px; | |
c327865b CG |
232 | } |
233 | ||
234 | #noVNC_clipboard { | |
01a9eee9 JM |
235 | display:none; |
236 | margin-top:72px; | |
a5df24b4 | 237 | right:20px; |
01a9eee9 | 238 | position:fixed; |
a5df24b4 JM |
239 | } |
240 | #noVNC_clipboard.top:after { | |
241 | right:85px; | |
c327865b CG |
242 | } |
243 | ||
b70ce077 JM |
244 | /*Default noVNC logo.*/ |
245 | #noVNC_logo { | |
a5df24b4 JM |
246 | margin-top: 170px; |
247 | margin-left: 10px; | |
01a9eee9 JM |
248 | color:yellow; |
249 | text-align:left; | |
250 | font-family: 'Orbitron', sans-serif; | |
251 | line-height:90%; | |
252 | text-shadow: | |
c327865b CG |
253 | 5px 5px 0 #000, |
254 | -1px -1px 0 #000, | |
255 | 1px -1px 0 #000, | |
256 | -1px 1px 0 #000, | |
257 | 1px 1px 0 #000; | |
258 | } | |
259 | ||
a5df24b4 | 260 | |
b70ce077 | 261 | #noVNC_logo span{ |
01a9eee9 | 262 | color:green; |
a7eb596d CG |
263 | } |
264 | ||
265 | #keyboardinput { | |
a5df24b4 JM |
266 | width:1px; |
267 | height:1px; | |
268 | background-color:#6d84a2; | |
01a9eee9 | 269 | border:0; |
a7eb596d CG |
270 | } |
271 | ||
272 | .noVNC_status_warn { | |
01a9eee9 JM |
273 | background-color:yellow; |
274 | } | |
a5df24b4 JM |
275 | |
276 | /* ---------------------------------------- | |
277 | * Media sizing | |
278 | * ---------------------------------------- | |
279 | */ | |
280 | ||
281 | ||
282 | .noVNC_status_button { | |
283 | font-size: 12px; | |
284 | padding: 2px; | |
285 | vertical-align: middle; | |
286 | } | |
287 | #noVNC_clipboard_text { | |
288 | width: 500px; | |
a5df24b4 JM |
289 | } |
290 | ||
291 | #noVNC_logo { | |
292 | font-size: 180px; | |
293 | } | |
294 | ||
295 | @media screen and (min-width: 481px) and (max-width: 640px) { | |
296 | .noVNC_status_button { | |
297 | font-size: 10px; | |
298 | padding: 1px; | |
299 | } | |
300 | #noVNC_clipboard_text { | |
301 | width: 410px; | |
a5df24b4 JM |
302 | } |
303 | #noVNC_logo { | |
304 | font-size: 150px; | |
305 | } | |
306 | } | |
307 | ||
308 | @media screen and (min-width: 321px) and (max-width: 480px) { | |
309 | .noVNC_status_button { | |
310 | font-size: 10px; | |
311 | padding: 0px; | |
312 | } | |
313 | #noVNC_clipboard_text { | |
314 | width: 250px; | |
a5df24b4 JM |
315 | } |
316 | #noVNC_logo { | |
317 | font-size: 110px; | |
318 | } | |
319 | } | |
320 | ||
321 | @media screen and (max-width: 320px) { | |
322 | .noVNC_status_button { | |
323 | font-size: 9px; | |
324 | padding: 0px; | |
325 | } | |
326 | #noVNC_clipboard_text { | |
327 | width: 220px; | |
a5df24b4 JM |
328 | } |
329 | #noVNC_logo { | |
330 | font-size: 90px; | |
331 | } | |
332 | } |