Zapamiętywanie proporcji paneli.
[redakcja.git] / project / static / css / master.css
1 body {
2     margin: 0;
3     font: 10pt Helvetica, Verdana, sans-serif;
4     overflow: hidden;
5 }
6
7 #header { 
8     position: relative;
9     padding: 0.2em 0.5em;
10     background-color: #CDCDCD;
11         border-bottom: 1px solid black;
12         height: 1.8em;
13         line-height: 1.8em;
14         vertical-align: center;
15 }
16
17 #header #breadcrumbs {
18 }
19
20 #header-right-toolbar {
21         position: absolute;
22         right: 1em;
23 }
24
25 #header button {
26         vertical-align: center;
27 }
28
29 ul {
30     margin: 20px;
31     padding: 0;
32 }
33
34 li {
35     margin: 0;
36     padding: 0;
37     list-style: none;
38 }
39
40 a {
41     text-decoration: none;
42 }
43
44 a:hover {
45     text-decoration: underline;
46 }
47
48 li a {
49     display: block;
50     padding: 5px 20px;
51     width: 480px;
52 }
53
54 li a:hover {
55     background-color: #BCD6E9;
56 }
57
58 #tabs {
59     border-bottom: 1px solid #858585;
60     background-color: #B7B7B7;
61 }
62
63 #tabs a {
64     display: block;
65     border-right: 1px solid #858585;
66     float: left;
67     padding: 5px 10px;
68 }
69
70 #tabs a.active {
71     background-color: #909090;
72 }
73
74 .theme-begin {
75     display: none;
76 }
77
78 label {
79     display: block;
80 }
81
82 #text_id {
83     width: 480px;
84     height: 480px;
85 }
86
87 #file-text {
88     padding: 5px 10px;
89     overflow-x: hidden;
90     overflow-y: scroll;
91 }
92
93 /* ========== */
94 /* = Panels = */
95 /* ========== */
96
97 #panels {
98         position: absolute;
99         bottom: 0px; left: 0px; right: 0px; top: 1em;
100 }
101
102 .panel-wrap {
103     overflow: hidden;
104         position: absolute; /* absolute to relation with #panels */
105         top: 0px;
106         bottom: 0px;
107 }
108
109 #left-panel-wrap {
110         left: 0px;
111         width: 8px; /* initial width */
112 }
113
114 #right-panel-wrap {
115         right: 0px;
116         width: auto;
117         left: 8px; /* initial width of the left panel */
118 }
119
120 /* contents */
121 .panel-content {
122         position: absolute;
123         overflow: auto;
124         overflow-x: hidden;
125         top: 22px; left: 0px; bottom:0px; right: 0px;
126 }
127
128 .panel-overlay {
129         position: absolute;
130         top: 0px; bottom: 0px; left: 0px; right: 0px;
131         z-index: 100;
132         background: gray;
133         opacity: 0.8;
134         text-align: center;
135         overflow: hidden;
136         display: none;
137         cursor: col-resize;
138 }
139
140 .panel-content-overlay {
141 }
142
143 .panel-wrap.last-panel .panel-content {
144         right: 0px;
145 }
146
147 /* Toolbars with select box to change panel contents*/
148 .panel-toolbar {
149     position: absolute;
150     top: 0px; left:0px; right: 0px; height: 20px;
151
152     padding: 0 0 2px 0;
153     border-top: 1px solid #AAA;
154     border-bottom: 1px solid #AAA;
155     font-size: 12px;
156     line-height: 20px;
157     background-color: #DDD;
158     white-space: nowrap;
159     overflow: hidden;
160     z-index: 80;
161 }
162
163 .panel-toolbar label {
164     display: block;
165     float: left;
166     margin: 0 10px 0 2px;
167 }
168
169 /* Slider between panels */
170 .panel-wrap .panel-slider {
171     position: absolute;
172         background-color: #DDD;
173
174     top: 0px; bottom: 0px; right: 0px; width: 4px;
175
176     border-left: 1px solid #999;
177     border-right: 1px solid #999;
178     border-top: none;
179     border-bottom: none;
180
181         z-index: 90;
182         cursor: col-resize;
183 }
184
185 .panel-wrap .panel-slider:hover {
186     background-color: #999;
187 }
188
189 .panel-content-overlay.panel-wrap .panel-slider {
190         background-color: #DDD;
191 }
192
193
194 /* ================= */
195 /* = Gallery panel = */
196 /* ================= */
197 .images-wrap {
198     overflow-x: hidden;
199     overflow-y: scroll;
200 }
201
202
203 /* ==================== */
204 /* = XML Editor panel = */
205 /* ==================== */
206
207 .toolbar {
208     overflow: hidden;
209     z-index: 70;
210 }
211
212 .toolbar, .toolbar ol {
213 /*    overflow: hidden;*/
214     display: block;
215     margin: 0;
216     padding: 0;
217     background-color: #CCC;
218     border-top: 1px solid #AAA;
219 }
220
221 .toolbar-tabs li {
222     font-size: 14px;
223     display: block;
224     float: left;
225     margin: 4px 0 -1px 4px;
226     padding: 2px 10px 0 10px;
227     background-color: #CCC;
228     border: 1px solid #AAA;
229     border-radius-topleft: 8px;
230     border-radius-topright: 8px;
231     -moz-border-radius-topleft: 8px;
232     -moz-border-radius-topright: 8px;
233     -webkit-border-top-left-radius: 8px;
234     -webkit-border-top-right-radius: 8px;
235 }
236
237 .toolbar-tabs {
238     height: 21px;
239 /*    z-index: 1000;*/
240 /*    overflow: hidden;*/
241 }
242
243 .toolbar-tabs li:hover, .toolbar-tabs li.active {
244     cursor: default;
245     background-color: #EEE;
246     border-bottom: 1px solid #EEE;
247 }
248
249 .toolbar-buttons {
250     background-color: #EEE;
251     border-bottom: 1px solid #AAA;
252 }
253
254 .toolbar-buttons li {
255     display: block;
256     font-size: 12px;
257     padding: 1px 8px;
258     margin: 4px;
259     border-radius: 10px;
260     -moz-border-radius: 10px;
261     -webkit-border-radius: 8px;
262     float: left;
263 }
264
265 .toolbar-buttons li:hover {
266     background-color: #777;
267     color: #FFF;
268     cursor: default;
269 }
270
271 /* =========================== */
272 /* = DublinCore Editor panel = */
273 /* =========================== */
274 .panel-dceditor {
275     padding: 10px;
276 }
277
278 .panel-dceditor label {
279     display: block;
280     font-size: 12px;
281     margin-top: 10px;
282     color: #666;
283     font-weight: bold;
284 }
285
286 .panel-dceditor input, .panel-dceditor textarea {
287     width: 400px;
288     display: block;
289 }
290
291 div.isection {
292         margin: 1em auto;
293         border: 1px solid black;
294         padding: 0.5em 2em;
295         background: #9f9ffa;
296
297         width: 60%;
298 }
299
300 div.isection p {
301         margin: 0.5em 1em;
302 }
303
304 .change-notification {
305     color: red;
306 }