]>
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 | ||
68 | #noVNC_mobile_buttons { | |
01a9eee9 JM |
69 | position:fixed; |
70 | padding-left:10px; | |
71 | padding-top:9px; | |
72 | display: none; | |
c327865b | 73 | } |
01a9eee9 | 74 | |
6ea8bece | 75 | #noVNC_buttons_right { |
01a9eee9 JM |
76 | position:fixed; |
77 | padding-right:10px; | |
78 | padding-top:9px; | |
79 | right:0; | |
c327865b CG |
80 | } |
81 | ||
82 | #noVNC_status_bar { | |
01a9eee9 JM |
83 | margin-top: 15px; |
84 | padding: 0px; | |
c327865b CG |
85 | } |
86 | ||
87 | #noVNC_status_bar div { | |
01a9eee9 JM |
88 | font-size: 12px; |
89 | padding-top: 4px; | |
90 | width:100%; | |
91 | margin-top: 2px; | |
c327865b CG |
92 | } |
93 | ||
94 | .VNC_status_button, #clipboardbutton, #connectbutton { | |
01a9eee9 | 95 | font-size: 14px; |
c327865b CG |
96 | } |
97 | ||
98 | #noVNC_status { | |
01a9eee9 JM |
99 | height:20px; |
100 | text-align: center; | |
c327865b CG |
101 | } |
102 | #noVNC_settings_menu { | |
01a9eee9 JM |
103 | margin: 3px; |
104 | text-align: left; | |
c327865b CG |
105 | } |
106 | #noVNC_settings_menu ul { | |
01a9eee9 JM |
107 | list-style: none; |
108 | margin: 0px; | |
109 | padding: 0px; | |
c327865b CG |
110 | } |
111 | ||
112 | #noVNC_apply { | |
01a9eee9 | 113 | float:right; |
c327865b CG |
114 | } |
115 | ||
116 | .VNC_buttons_right { | |
01a9eee9 | 117 | text-align: right; |
c327865b CG |
118 | } |
119 | .VNC_buttons_left { | |
01a9eee9 | 120 | text-align: left; |
c327865b CG |
121 | } |
122 | .noVNC_status_normal { | |
01a9eee9 | 123 | background: #eee; |
c327865b CG |
124 | } |
125 | .noVNC_status_error { | |
01a9eee9 | 126 | background: #f44; |
c327865b | 127 | } |
01a9eee9 JM |
128 | .noVNC_status_warn { |
129 | background: #ff4; | |
c327865b CG |
130 | } |
131 | ||
132 | /* Do not set width/height for VNC_screen or VNC_canvas or incorrect | |
133 | * scaling will occur. Canvas resizes to remote VNC settings */ | |
134 | #noVNC_screen { | |
1c3df652 | 135 | margin-top:40px; |
01a9eee9 JM |
136 | text-align: center; |
137 | display: table; | |
138 | width:100%; | |
139 | height:100%; | |
140 | background-color:#313131; | |
141 | border-bottom-right-radius: 800px 600px; | |
142 | /*border-top-left-radius: 800px 600px;*/ | |
c327865b CG |
143 | } |
144 | #VNC_canvas { | |
01a9eee9 | 145 | background: #eee; |
c327865b CG |
146 | } |
147 | ||
148 | #VNC_clipboard_clear_button { | |
01a9eee9 | 149 | float:right; |
c327865b CG |
150 | } |
151 | #VNC_clipboard_text { | |
01a9eee9 | 152 | font-size: 11px; |
c327865b CG |
153 | } |
154 | ||
155 | #noVNC_Settings { | |
01a9eee9 | 156 | width:200px; |
c327865b CG |
157 | } |
158 | ||
159 | #noVNC_clipboard_clear_button { | |
01a9eee9 | 160 | float:right; |
c327865b CG |
161 | } |
162 | ||
163 | /*Settings Bubble*/ | |
164 | .triangle-right { | |
01a9eee9 JM |
165 | position:relative; |
166 | padding:15px; | |
167 | margin:1em 0 3em; | |
168 | color:#fff; | |
169 | background:#fff; /* default background for browsers without gradient support */ | |
170 | /* css3 */ | |
171 | /*background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698)); | |
172 | background:-moz-linear-gradient(#2e88c4, #075698); | |
173 | background:-o-linear-gradient(#2e88c4, #075698); | |
174 | background:linear-gradient(#2e88c4, #075698);*/ | |
175 | -webkit-border-radius:10px; | |
176 | -moz-border-radius:10px; | |
177 | border-radius:10px; | |
178 | color:#000; | |
179 | border:2px solid #E0E0E0; | |
c327865b CG |
180 | } |
181 | ||
182 | .triangle-right.top:after { | |
01a9eee9 JM |
183 | border-color: transparent #E0E0E0; |
184 | border-width: 20px 20px 0 0; | |
185 | bottom: auto; | |
186 | left: auto; | |
187 | right: 50px; | |
188 | top: -20px; | |
c327865b CG |
189 | } |
190 | ||
191 | .triangle-right:after { | |
01a9eee9 JM |
192 | content:""; |
193 | position:absolute; | |
194 | bottom:-20px; /* value = - border-top-width - border-bottom-width */ | |
195 | left:50px; /* controls horizontal position */ | |
196 | border-width:20px 0 0 20px; /* vary these values to change the angle of the vertex */ | |
197 | border-style:solid; | |
198 | border-color:#E0E0E0 transparent; | |
199 | /* reduce the damage in FF3.0 */ | |
200 | display:block; | |
201 | width:0; | |
c327865b CG |
202 | } |
203 | ||
204 | .triangle-right.top:after { | |
01a9eee9 JM |
205 | top:-40px; /* value = - border-top-width - border-bottom-width */ |
206 | right:50px; /* controls horizontal position */ | |
207 | bottom:auto; | |
208 | left:auto; | |
209 | border-width:40px 40px 0 0; /* vary these values to change the angle of the vertex */ | |
210 | border-color:transparent #E0E0E0; | |
c327865b CG |
211 | } |
212 | ||
213 | /*Bubble contents divs*/ | |
214 | #noVNC_Settings { | |
01a9eee9 JM |
215 | margin-top:72px; |
216 | position:fixed; | |
217 | right:100px; | |
218 | display:none; | |
c327865b CG |
219 | } |
220 | ||
221 | #noVNC_controls { | |
01a9eee9 JM |
222 | margin-top:72px; |
223 | position:fixed; | |
224 | right:10px; | |
c327865b CG |
225 | } |
226 | ||
227 | #noVNC_clipboard { | |
01a9eee9 JM |
228 | display:none; |
229 | margin-top:72px; | |
230 | position:fixed; | |
231 | right:180px; | |
c327865b CG |
232 | } |
233 | ||
234 | /*Default noVNC screen.*/ | |
235 | #noVNC_defaultScreen { | |
01a9eee9 JM |
236 | width:400px; |
237 | margin-left:auto; | |
238 | margin-right:auto; | |
239 | font-size:160px; | |
240 | color:yellow; | |
241 | text-align:left; | |
242 | font-family: 'Orbitron', sans-serif; | |
243 | line-height:90%; | |
244 | text-shadow: | |
c327865b CG |
245 | 5px 5px 0 #000, |
246 | -1px -1px 0 #000, | |
247 | 1px -1px 0 #000, | |
248 | -1px 1px 0 #000, | |
249 | 1px 1px 0 #000; | |
250 | } | |
251 | ||
252 | #noVNC_defaultScreen span{ | |
01a9eee9 | 253 | color:green; |
a7eb596d CG |
254 | } |
255 | ||
256 | #keyboardinput { | |
01a9eee9 JM |
257 | width:0px; |
258 | height:0px; | |
259 | background-color:#313131; | |
260 | border:0; | |
a7eb596d CG |
261 | } |
262 | ||
263 | .noVNC_status_warn { | |
01a9eee9 JM |
264 | background-color:yellow; |
265 | } |