source: t29-www/en/dev/translation/editor.css @ 205

Last change on this file since 205 was 205, checked in by sven, 13 years ago
  • Translation system: CSS nicht mehr staendig laden (einfacheren Button eingefuehrt, CSS kann jetzt automatisch geladen werden)
File size: 14.7 KB
Line 
1/**
2 * t29.de translation system inline editor styles.
3 * (c) Sven Koeppel September 2010
4 **/
5
6span.tr-editable { display: block; }
7
8span.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
14span.tr-corrected.tr-inspecting {
15        background-color: #e6f9ec;
16}
17
18span.tr-editing {
19        margin: -8px;
20        padding: 8px;
21        outline: 1px inset gray;
22        background-color: white;
23        color: black;
24}
25
26body.tr-editing { background-color: #eee; }
27body.tr-editing #content { color: #555; }
28body.tr-editing #content img { position: relative; }
29body.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
114body.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 */
121body.tr-enabled  .tr-disabled, body.tr-disabled .tr-enabled { display: none; }
122body.tr-enabled  .tr-enabled, body.tr-disabled .tr-disabled { display: block; }
123/* default value, if no body.tr-* present: same state as .tr-disabled! */
124body .tr-enabled { display: none; }
125body .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
168body.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}
Note: See TracBrowser for help on using the repository browser.
© 2008 - 2013 technikum29 • Sven Köppel • Some rights reserved
Powered by Trac
Expect where otherwise noted, content on this site is licensed under a Creative Commons 3.0 License