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

Last change on this file since 207 was 207, checked in by sven, 13 years ago

Partial Results of the upcoming t29 translation system improvement session:

  • Swapped the messages from the settings to an ordinary XML file, loaded synchronously via AJAX
  • Dynamically loaded CSS seems to work by now (I think so...)
  • Started to implement the fixed box (is intended to replace the submit box at the editor area with much more features like better help button, total page editor, exit button, infos about http://edit.technikum29.de where the submissions are supposed to be stored for much more Simplicity), body border also missing yet (commented out)

Sven

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