1 | /** |
---|
2 | * t29.de translation system inline editor styles. |
---|
3 | * (c) Sven Koeppel September 2010 |
---|
4 | **/ |
---|
5 | |
---|
6 | span.tr-editable { display: block; } |
---|
7 | |
---|
8 | span.tr-editable.tr-inspecting { |
---|
9 | background-color: #fffdd3; /* #e6ecf9; */ |
---|
10 | outline: 1px dashed #aaa; |
---|
11 | /*margin: -4px; padding: 4px;*//* laesst gefloatete bilder haesslich huepfen */ |
---|
12 | } |
---|
13 | |
---|
14 | span.tr-corrected.tr-inspecting { |
---|
15 | background-color: #e6f9ec; |
---|
16 | } |
---|
17 | |
---|
18 | span.tr-editing { |
---|
19 | margin: -8px; |
---|
20 | padding: 8px; |
---|
21 | outline: 1px inset gray; |
---|
22 | background-color: white; |
---|
23 | color: black; |
---|
24 | } |
---|
25 | |
---|
26 | body.tr-editing { background-color: #eee; } |
---|
27 | body.tr-editing #content { color: #555; } |
---|
28 | body.tr-editing #content img { position: relative; } |
---|
29 | body.tr-enabled #content h2 a.anchor, body.tr-enabled #content h3 a.anchor { display: none; } |
---|
30 | |
---|
31 | |
---|
32 | #tr-info { |
---|
33 | position: absolute; |
---|
34 | background-color: #fffdbc; |
---|
35 | border: 1px dashed #aaa; |
---|
36 | border-bottom: none; |
---|
37 | margin-top: 1px; margin-left: -1px; |
---|
38 | padding: 8px; |
---|
39 | font-size: 120%; |
---|
40 | } |
---|
41 | |
---|
42 | #tr-info.tr-corrected { |
---|
43 | background-color: #acdca1; |
---|
44 | } |
---|
45 | |
---|
46 | #tr-info .thanks { |
---|
47 | color: #2e8027; |
---|
48 | font-weight: bold; |
---|
49 | text-shadow: 1px 1px 2px white; |
---|
50 | } |
---|
51 | |
---|
52 | #tr-editor { |
---|
53 | width: 50%; /* body width - will be fixed with javascript */ |
---|
54 | position: absolute; |
---|
55 | background-color: white; |
---|
56 | border: 1px inset gray; |
---|
57 | border-bottom: 1px dashed #ccc; |
---|
58 | margin-top: 1px; |
---|
59 | margin-left: -1px; |
---|
60 | padding: 8px; /* Gleicher Padding wie .tr-editing! */ |
---|
61 | } |
---|
62 | |
---|
63 | #tr-editor h3 { |
---|
64 | margin: 0; margin-top: 2px; |
---|
65 | font-size: 110%; |
---|
66 | } |
---|
67 | |
---|
68 | #tr-editor p { |
---|
69 | margin: 0; |
---|
70 | text-align: left; font-size: 90%; |
---|
71 | color: #666; |
---|
72 | } |
---|
73 | |
---|
74 | #tr-editor .buttons, #tr-editor .smaller { float: right; margin-left: 5px; } |
---|
75 | #tr-editor .submit { font-size: 108%; font-weight: bold; } |
---|
76 | #tr-editor .help, #tr-editor .cancel { |
---|
77 | display: block; |
---|
78 | margin-bottom: 3px; |
---|
79 | } |
---|
80 | #tr-editor .spinner { display: none; float: right; } |
---|
81 | #tr-editor.loading .spinner { display: block; } |
---|
82 | #tr-editor.loading .buttons { visibility: hidden; } |
---|
83 | #tr-editor.success { background-color: #ACDCA1; } |
---|
84 | #tr-editor.success .buttons { visibility:hidden; } |
---|
85 | #tr-editor.error { background-color: #dca1a1; } |
---|
86 | #tr-editor.error p { color: black; background-color: red; display: inline; } |
---|
87 | #tr-editor .response { |
---|
88 | font-size: 154%; |
---|
89 | color: white; |
---|
90 | font-weight: bold; |
---|
91 | text-align: right; |
---|
92 | text-shadow: 2px 2px 3px #333; |
---|
93 | width: 90%; |
---|
94 | position: absolute; |
---|
95 | } |
---|
96 | |
---|
97 | |
---|
98 | #sidebar-tr, #sidebar .box { |
---|
99 | position: relative; |
---|
100 | background: none repeat scroll 0 0 rgba(196,212,236,0.49); |
---|
101 | } |
---|
102 | #sidebar-tr .arrow { |
---|
103 | border-color: transparent #acdca1 transparent transparent; |
---|
104 | border-style: solid; |
---|
105 | border-width: 32px 20px 32px 0; |
---|
106 | height: 0; |
---|
107 | left: -20px; |
---|
108 | position: absolute; |
---|
109 | top: 0; |
---|
110 | width: 0; |
---|
111 | display: none; |
---|
112 | } |
---|
113 | |
---|
114 | body.tr-enabled #sidebar-tr { |
---|
115 | color: black; |
---|
116 | background-color: #acdca1; |
---|
117 | -moz-box-shadow: 1px 0 8px #999; |
---|
118 | } |
---|
119 | |
---|
120 | /* body.tr-enabled shows only .tr-enabled elements, and vice versa */ |
---|
121 | body.tr-enabled .tr-disabled, body.tr-disabled .tr-enabled { display: none; } |
---|
122 | body.tr-enabled .tr-enabled, body.tr-disabled .tr-disabled { display: block; } |
---|
123 | /* default value, if no body.tr-* present: same state as .tr-disabled! */ |
---|
124 | body .tr-enabled { display: none; } |
---|
125 | body .tr-disabled { display: block; } |
---|
126 | |
---|
127 | /* |
---|
128 | #sidebar-tr .tr-disabled h3 { margin: 0; font-size: 100%; } |
---|
129 | #sidebar-tr .tr-disabled p { margin: 5px 0; font-size: 90%; } |
---|
130 | #sidebar-tr .tr-disabled { color: #444;} |
---|
131 | #sidebar-tr .tr-disabled a { opacity: .8; } |
---|
132 | */ |
---|
133 | |
---|
134 | #sidebar-tr .tr-enabled h3 { |
---|
135 | margin: 0; |
---|
136 | color:white; |
---|
137 | font-size:218%; |
---|
138 | font-weight:bold; |
---|
139 | line-height:90%; |
---|
140 | text-decoration:none; |
---|
141 | text-shadow:1px 1px 2px #555555; |
---|
142 | text-transform:uppercase; |
---|
143 | outline: none; |
---|
144 | } |
---|
145 | |
---|
146 | #sidebar-tr .tr-enabled p { |
---|
147 | color: #333; |
---|
148 | margin-top: 1em; |
---|
149 | font-size: 109%; |
---|
150 | font-weight: bold; |
---|
151 | text-align: left; |
---|
152 | } |
---|
153 | |
---|
154 | /** Link resets **/ |
---|
155 | #sidebar-tr a:link, #sidebar-tr a:visited, |
---|
156 | #sidebar-tr a:hover, #sidebar-tr a:active { |
---|
157 | color: inherit; |
---|
158 | text-decoration: none; |
---|
159 | } |
---|
160 | |
---|
161 | /* For an optional message at the top */ |
---|
162 | #tr-topnotice { |
---|
163 | background-color: #ACDCA1; |
---|
164 | padding: 0.1em 1em; margin-bottom: 1em; |
---|
165 | -moz-box-shadow: 1px 0 8px #999999; |
---|
166 | } |
---|
167 | |
---|
168 | body.tr-disabled #tr-topnotice { display: none; } |
---|
169 | |
---|
170 | /* |
---|
171 | CSS3 Buttons |
---|
172 | http://www.webdesignerwall.com/tutorials/css3-gradient-buttons/ |
---|
173 | */ |
---|
174 | .button { |
---|
175 | display: inline-block; |
---|
176 | zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */ |
---|
177 | *display: inline; |
---|
178 | vertical-align: baseline; |
---|
179 | margin: 0 2px; |
---|
180 | outline: none; |
---|
181 | cursor: pointer; |
---|
182 | text-align: center; |
---|
183 | text-decoration: none; |
---|
184 | font: 14px/100% Arial, Helvetica, sans-serif; |
---|
185 | padding: .5em 2em .55em; |
---|
186 | text-shadow: 0 1px 1px rgba(0,0,0,.3); |
---|
187 | -webkit-border-radius: .5em; |
---|
188 | -moz-border-radius: .5em; |
---|
189 | border-radius: .5em; |
---|
190 | -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); |
---|
191 | -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); |
---|
192 | box-shadow: 0 1px 2px rgba(0,0,0,.2); |
---|
193 | } |
---|
194 | .button:hover { |
---|
195 | text-decoration: none; |
---|
196 | } |
---|
197 | .button:active { |
---|
198 | position: relative; |
---|
199 | top: 1px; |
---|
200 | } |
---|
201 | |
---|
202 | .bigrounded { |
---|
203 | -webkit-border-radius: 2em; |
---|
204 | -moz-border-radius: 2em; |
---|
205 | border-radius: 2em; |
---|
206 | } |
---|
207 | .medium { |
---|
208 | font-size: 12px; |
---|
209 | padding: .4em 1.5em .42em; |
---|
210 | } |
---|
211 | .small { |
---|
212 | font-size: 11px; |
---|
213 | padding: .2em 1em .275em; |
---|
214 | } |
---|
215 | |
---|
216 | /* color styles - !important nachtraeglich, wg. zu schwachen selektoren |
---|
217 | ---------------------------------------------- */ |
---|
218 | |
---|
219 | /* black */ |
---|
220 | .black { |
---|
221 | color: #d7d7d7 !important; |
---|
222 | border: solid 1px #333 !important; |
---|
223 | background: #333 !important; |
---|
224 | background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000)) !important; |
---|
225 | background: -moz-linear-gradient(top, #666, #000) !important; |
---|
226 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000') !important; |
---|
227 | } |
---|
228 | .black:hover { |
---|
229 | background: #000 !important; |
---|
230 | background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000)) !important; |
---|
231 | background: -moz-linear-gradient(top, #444, #000) !important; |
---|
232 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000') !important; |
---|
233 | } |
---|
234 | .black:active { |
---|
235 | color: #666 !important; |
---|
236 | background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444)) !important; |
---|
237 | background: -moz-linear-gradient(top, #000, #444) !important; |
---|
238 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666') !important; |
---|
239 | } |
---|
240 | |
---|
241 | /* gray */ |
---|
242 | .gray { |
---|
243 | color: #e9e9e9 !important; |
---|
244 | border: solid 1px #555 !important; |
---|
245 | background: #6e6e6e !important; |
---|
246 | background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757)) !important; |
---|
247 | background: -moz-linear-gradient(top, #888, #575757) !important; |
---|
248 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757') !important; |
---|
249 | } |
---|
250 | .gray:hover { |
---|
251 | background: #616161 !important; |
---|
252 | background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b)) !important; |
---|
253 | background: -moz-linear-gradient(top, #757575, #4b4b4b) !important; |
---|
254 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575', endColorstr='#4b4b4b') !important; |
---|
255 | } |
---|
256 | .gray:active { |
---|
257 | color: #afafaf !important; |
---|
258 | background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888)) !important; |
---|
259 | background: -moz-linear-gradient(top, #575757, #888) !important; |
---|
260 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757', endColorstr='#888888') !important; |
---|
261 | } |
---|
262 | |
---|
263 | /* white */ |
---|
264 | .white { |
---|
265 | color: #606060 !important; |
---|
266 | border: solid 1px #b7b7b7 !important; |
---|
267 | background: #fff !important; |
---|
268 | background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed)) !important; |
---|
269 | background: -moz-linear-gradient(top, #fff, #ededed) !important; |
---|
270 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed') !important; |
---|
271 | } |
---|
272 | .white:hover { |
---|
273 | background: #ededed !important; |
---|
274 | background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc)) !important; |
---|
275 | background: -moz-linear-gradient(top, #fff, #dcdcdc) !important; |
---|
276 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc') !important; |
---|
277 | } |
---|
278 | .white:active { |
---|
279 | color: #999 !important; |
---|
280 | background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff)) !important; |
---|
281 | background: -moz-linear-gradient(top, #ededed, #fff) !important; |
---|
282 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff') !important; |
---|
283 | } |
---|
284 | |
---|
285 | /* orange */ |
---|
286 | .orange { |
---|
287 | color: #fef4e9 !important; |
---|
288 | border: solid 1px #da7c0c !important; |
---|
289 | background: #f78d1d !important; |
---|
290 | background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20)) !important; |
---|
291 | background: -moz-linear-gradient(top, #faa51a, #f47a20) !important; |
---|
292 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20') !important; |
---|
293 | } |
---|
294 | .orange:hover { |
---|
295 | background: #f47c20 !important; |
---|
296 | background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015)) !important; |
---|
297 | background: -moz-linear-gradient(top, #f88e11, #f06015) !important; |
---|
298 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015') !important; |
---|
299 | } |
---|
300 | .orange:active { |
---|
301 | color: #fcd3a5 !important; |
---|
302 | background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a)) !important; |
---|
303 | background: -moz-linear-gradient(top, #f47a20, #faa51a) !important; |
---|
304 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a') !important; |
---|
305 | } |
---|
306 | |
---|
307 | /* red */ |
---|
308 | .red { |
---|
309 | color: #faddde !important; |
---|
310 | border: solid 1px #980c10 !important; |
---|
311 | background: #d81b21 !important; |
---|
312 | background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317)) !important; |
---|
313 | background: -moz-linear-gradient(top, #ed1c24, #aa1317) !important; |
---|
314 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317') !important; |
---|
315 | } |
---|
316 | .red:hover { |
---|
317 | background: #b61318 !important; |
---|
318 | background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115)) !important; |
---|
319 | background: -moz-linear-gradient(top, #c9151b, #a11115) !important; |
---|
320 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115') !important; |
---|
321 | } |
---|
322 | .red:active { |
---|
323 | color: #de898c !important; |
---|
324 | background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24)) !important; |
---|
325 | background: -moz-linear-gradient(top, #aa1317, #ed1c24) !important; |
---|
326 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24') !important; |
---|
327 | } |
---|
328 | |
---|
329 | /* blue */ |
---|
330 | .blue { |
---|
331 | color: #d9eef7 !important; |
---|
332 | border: solid 1px #0076a3 !important; |
---|
333 | background: #0095cd !important; |
---|
334 | background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5)) !important; |
---|
335 | background: -moz-linear-gradient(top, #00adee, #0078a5) !important; |
---|
336 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5') !important; |
---|
337 | } |
---|
338 | .blue:hover { |
---|
339 | background: #007ead !important; |
---|
340 | background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e)) !important; |
---|
341 | background: -moz-linear-gradient(top, #0095cc, #00678e) !important; |
---|
342 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e') !important; |
---|
343 | } |
---|
344 | .blue:active { |
---|
345 | color: #80bed6 !important; |
---|
346 | background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee)) !important; |
---|
347 | background: -moz-linear-gradient(top, #0078a5, #00adee) !important; |
---|
348 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee') !important; |
---|
349 | } |
---|
350 | |
---|
351 | /* rosy */ |
---|
352 | .rosy { |
---|
353 | color: #fae7e9 !important; |
---|
354 | border: solid 1px #b73948 !important; |
---|
355 | background: #da5867 !important; |
---|
356 | background: -webkit-gradient(linear, left top, left bottom, from(#f16c7c), to(#bf404f)) !important; |
---|
357 | background: -moz-linear-gradient(top, #f16c7c, #bf404f) !important; |
---|
358 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c', endColorstr='#bf404f') !important; |
---|
359 | } |
---|
360 | .rosy:hover { |
---|
361 | background: #ba4b58 !important; |
---|
362 | background: -webkit-gradient(linear, left top, left bottom, from(#cf5d6a), to(#a53845)) !important; |
---|
363 | background: -moz-linear-gradient(top, #cf5d6a, #a53845) !important; |
---|
364 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf5d6a', endColorstr='#a53845') !important; |
---|
365 | } |
---|
366 | .rosy:active { |
---|
367 | color: #dca4ab !important; |
---|
368 | background: -webkit-gradient(linear, left top, left bottom, from(#bf404f), to(#f16c7c)) !important; |
---|
369 | background: -moz-linear-gradient(top, #bf404f, #f16c7c) !important; |
---|
370 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf404f', endColorstr='#f16c7c') !important; |
---|
371 | } |
---|
372 | |
---|
373 | /* green */ |
---|
374 | .green { |
---|
375 | color: #e8f0de !important; |
---|
376 | border: solid 1px #538312 !important; |
---|
377 | background: #64991e !important; |
---|
378 | background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e)) !important; |
---|
379 | background: -moz-linear-gradient(top, #7db72f, #4e7d0e) !important; |
---|
380 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e') !important; |
---|
381 | } |
---|
382 | .green:hover { |
---|
383 | background: #538018 !important; |
---|
384 | background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c)) !important; |
---|
385 | background: -moz-linear-gradient(top, #6b9d28, #436b0c) !important; |
---|
386 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c') !important; |
---|
387 | } |
---|
388 | .green:active { |
---|
389 | color: #a9c08c !important; |
---|
390 | background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f)) !important; |
---|
391 | background: -moz-linear-gradient(top, #4e7d0e, #7db72f) !important; |
---|
392 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f') !important; |
---|
393 | } |
---|
394 | |
---|
395 | /* pink */ |
---|
396 | .pink { |
---|
397 | color: #feeef5 !important; |
---|
398 | border: solid 1px #d2729e !important; |
---|
399 | background: #f895c2 !important; |
---|
400 | background: -webkit-gradient(linear, left top, left bottom, from(#feb1d3), to(#f171ab)) !important; |
---|
401 | background: -moz-linear-gradient(top, #feb1d3, #f171ab) !important; |
---|
402 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb1d3', endColorstr='#f171ab') !important; |
---|
403 | } |
---|
404 | .pink:hover { |
---|
405 | background: #d57ea5 !important; |
---|
406 | background: -webkit-gradient(linear, left top, left bottom, from(#f4aacb), to(#e86ca4)) !important; |
---|
407 | background: -moz-linear-gradient(top, #f4aacb, #e86ca4) !important; |
---|
408 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4aacb', endColorstr='#e86ca4') !important; |
---|
409 | } |
---|
410 | .pink:active { |
---|
411 | color: #f3c3d9 !important; |
---|
412 | background: -webkit-gradient(linear, left top, left bottom, from(#f171ab), to(#feb1d3)) !important; |
---|
413 | background: -moz-linear-gradient(top, #f171ab, #feb1d3) !important; |
---|
414 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f171ab', endColorstr='#feb1d3') !important; |
---|
415 | } |
---|