Splitbar can now be dragged to an arbitrary position
[redakcja.git] / redakcja / static / css / master.css
1 a, a:visited, a:active {
2         color: blue;
3         text-decoration: none;
4 }
5
6 a:hover {
7         text-decoration: underline;
8 }
9
10
11 body {
12     margin: 0;
13     overflow: hidden;
14     padding: 0;
15     min-width: 960px;
16     width: 100%;
17     height: 100%;
18 }
19
20 .vsplitbar {
21     position: absolute;
22     top: 0px;
23     bottom: 0;
24     right: 0;
25     width: 26px;
26     /*background: #C1C1C1 url(../img/gallery.png) no-repeat scroll center center;*/
27     border-left: 2px solid #999;
28     border-right: 2px solid #999;
29     cursor: pointer;  
30     background: #C1C1C1; 
31     z-index:100;
32     cursor: col-resize;
33 }
34
35 .vsplitbar:hover {
36         background-color: #E6E6E6;
37 }
38
39 .vsplitbar p {
40     font: 12px Helvetica,Verdana,sans-serif;
41
42   -moz-transform: rotate(270deg);
43   -moz-transform-origin: 50% 50%;
44   -webkit-transform: rotate(270deg);
45   -webkit-transform-origin: 50% 50%; 
46   -o-transform: rotate(-270deg);
47   -o-transform-origin:  bottom left;
48   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
49   margin: 250px auto;
50 }
51
52 #drag-layer {
53     position:absolute;
54     top:0;
55     bottom:0;
56     left:0;
57     right:0;
58     z-index:1000;
59     display: none;
60     cursor: col-resize;
61 }
62
63 .editor {
64     position: absolute;
65     top: 0px;
66     bottom: 0;
67     left: 0;
68     right: 30px;
69     overflow: hidden;
70 }
71
72 #editor.readonly .editor {
73         right: 0px;
74 }
75
76 #html-view {
77     overflow: auto;
78     position: absolute;
79     top: 33px;
80     bottom: 0;
81     left: 0;
82     right: 0;
83         z-index: 1;
84 }
85
86 #splitter {
87         position: fixed;
88         top: 31px;
89         left: 0px;
90         right: 0px;
91         bottom: 0px;
92         overflow: hidden;
93 }
94
95
96 #header {
97         position: fixed;
98         top: 0px;
99         right: 0px;
100         left: 0px;
101         height: 30px;
102         border-bottom: 1px solid #999;
103
104     margin: 0;
105     padding: 0;
106     background-color: #C1C1C1;
107     background-image: -webkit-gradient(linear, left top, left bottom, from(#C1C1C1), color-stop(0.9, #A2A2A2));
108
109         /* Firefox 3.6 */
110         background-image: -moz-linear-gradient(top left, #C1C1C1, #A2A2A2, 90%);
111
112     font: 11px Helvetica, Verdana, sans-serif;
113     font-weight: bold;
114 }
115
116
117 #header.saving {
118         background-color: #E1C1C1;
119 }
120 #header.saving #save-button {
121     display: none;
122 }
123 #save-attempt-info {
124     color: #801000;
125     display: none;
126 }
127 .saving #save-attempt-info {
128     display: inline;
129     font-weight: normal;
130 }
131
132
133 #header.out-of-date {
134     background-color: #E1C1C1;
135 }
136 #header.out-of-date #save-button {
137     display: none;
138 }
139 #out-of-date-info {
140     color: #801000;
141     display: none;
142 }
143 .out-of-date #out-of-date-info {
144     display: inline;
145 }
146
147
148
149 #header h1, #header h1 a {
150     margin: 0;
151     padding: 0;
152     font: 9px Helvetica, Verdana, sans-serif;
153     font-weight: bold;
154     float: left;
155     padding: 3px 3px 2px 3px;
156     color: #222;
157     #line-height: 20px;
158 }
159
160 #header h1 a {
161     text-decoration: none;
162     color: #222;
163 }
164
165 #header img {
166     border: 0;
167 }
168
169 .tabs {
170         overflow: hidden;
171     margin: 0;
172         padding: 0;
173         height: 31px;
174         border: 0px;
175         padding-left: 1em;
176     float: left;
177 }
178
179 #tabs-right {
180     float: right;
181     padding-right: 1em;
182 }
183
184 .tabs li {
185         margin-top: 6px;
186         margin-bottom: 0px;
187
188     -webkit-user-select: none;
189     cursor: pointer;
190     display: block;
191     float: left;
192
193     font-weight: bold;
194     color: #222;
195     margin-left: 4px;
196
197     background-color: #A2A2A2;
198
199         -moz-box-shadow: 1px -1px 2px rgba(127, 127, 127, 0.25);
200     -webkit-box-shadow: 1px -1px 2px rgba(127, 127, 127, 0.25);
201
202     border: 1px solid #999;
203         border-bottom-width: 0px;
204         -moz-border-radius: 4px 4px 0px 0px;
205         -webkit-border-radius: 4px;
206     -webkit-border-bottom-left-radius: 0px;
207     -webkit-border-bottom-right-radius: 0px;
208 }
209
210 #tabs li {
211     height: 18px;
212     padding-left: 12px;
213     padding-right: 12px;
214     padding-top: 5px;
215 }
216
217 .tabs li.active {
218     background-color: #C1C1C1;
219 }
220
221
222 #tabs-right li {
223     height: 20px;
224     padding-left: 12px;
225     padding-right: 12px;
226     padding-top: 3px;
227 }
228
229
230
231 #tools {
232         float: right;
233         clear: right;
234         overflow: hidden;
235     margin: 0;
236         padding: 0;
237         height: 30px;
238         margin-right: 5px;
239         line-height: 30px;
240         font-size: 10px;
241         vertical-align: middle;
242 }
243
244 /* Remove extra padding in Firefox */
245 button::-moz-focus-inner {
246     border: 0;
247     padding: 0;
248 }
249
250 p { margin: 0;}
251
252 #body-wrap {
253     height: 100%;
254     width: 100%;
255 }
256
257 #content {
258     height: 100%;
259     width: 100%;
260 }
261
262 #loading-overlay {
263     background-color: #FFF;
264     position: absolute;
265     z-index: 1000;
266     padding: 0;
267     top: 0;
268     left: 0;
269     width: 100%;
270     height: 100%;
271 }
272
273 #loading-message {
274     position: absolute;
275     height: 20px;
276     width: 120px;
277     left: 50%;
278     margin-left: -60px;
279     top: 50%;
280     margin-top: -10px;
281 /*    text-align: center;*/
282 }
283
284 #loading-message img {
285     float: left;
286     margin-right: 10px;
287     margin-top: -6px;
288 }
289
290 /*
291  * CodeMirror
292  */
293
294 .CodeMirror-line-numbers {
295         padding: 0px;
296         padding-top: 5px;
297         text-align: right;
298         overflow: hidden;
299         width: 40px;
300         border-right: 1px solid black;
301         background-color: #e6e6fa;
302 }
303
304 .CodeMirror-line-numbers div {
305         display: block;
306         font-family:"Lucida Console", monospace;
307     font-size: 13px;
308     line-height: 18px;
309         padding-right: 5px;
310 }
311
312 img.tabclose {
313         padding-left: 8px;
314         width: 16px;
315         height: 16px;
316         vertical-align: middle;
317         vertical-align: text-bottom;
318 }
319
320 /*
321  * HTML Editor view
322  */
323
324 .htmlview {
325         z-index: 1;
326         overflow: hidden;
327 }
328
329 .htmlview .active[x-editable] {
330     background-color: #FAFAFA;
331     border: 1px solid #DDD;
332 /*    -webkit-transition: all 1s linear;*/
333 }
334
335 .blockOverlay {
336         background-color: black;
337         opacity: 0.4;
338 }
339
340 .poezja_cyt {
341     margin:1.5em 2em 0;
342     font-size:0.875em
343 }
344
345 .wers_akap {
346         padding-left: 1em;
347 }
348
349 .saveNotify {
350     position:absolute; 
351     bottom:22px; 
352     right:7px; 
353     z-index:800;
354     background-color: #FFFF69; 
355     padding:10px; 
356     border: 1px solid black;
357     border-radius: 5px;
358     -moz-border-radius: 15px;
359 }
360
361 .notifyTip {
362     font-size:12px; float:right;
363 }
364
365 .saveNotify span {
366     font-weight: bold;
367 }