1/**
2 * This file provides the styles for the fullscreen media manager
3 * (?do=media).
4 *
5 * What most templates would probably need to change (depending on
6 * their site width) are the 4 min-width's (search for @change).
7 */
8
9
10/*____________ structure ____________*/
11
12#mediamanager__page h1 {
13    margin: 0 0 .5em;
14}
15
16#mediamanager__page {
17    /* min-width must be summary of all 3 panels' min-widths */
18    min-width: 50em; /* @change */
19    width: 100%;
20    text-align: left;
21}
22
23#mediamanager__page .panel {
24    float: left;
25}
26
27#mediamanager__page .namespaces {
28    width: 20%;
29    min-width: 10em; /* @change */
30}
31#mediamanager__page .filelist {
32    width: 50%;
33    min-width: 25em; /* @change */
34}
35#mediamanager__page .file {
36    width: 30%;
37    min-width: 15em; /* @change */
38}
39
40#mediamanager__page .panelHeader {
41    background-color: __background_alt__;
42    margin: 0 10px 10px 0;
43    padding: 10px 10px 8px;
44    text-align: left;
45    min-height: 20px;
46    overflow: hidden;
47}
48
49#mediamanager__page .panelContent {
50    overflow-y: auto;
51    overflow-x: hidden;
52    padding: 0;
53    margin: 0 10px 10px 0;
54    position: relative;
55}
56
57#mediamanager__page .file .panelHeader,
58#mediamanager__page .file .panelContent {
59    margin-right: 0;
60}
61
62#mediamanager__page .ui-resizable-e {
63    width: 6px;
64    right: 2px;
65    background: transparent url(images/resizecol.png) center center no-repeat;
66}
67#mediamanager__page .ui-resizable-e:hover {
68    background-color: __background_alt__;
69}
70
71
72#mediamanager__page dd {
73    margin: 0;
74}
75
76#mediamanager__page .panelHeader h3 {
77    float: left;
78    font-weight: normal;
79    font-size: 1em;
80    padding: 0;
81    margin: 0 0 3px;
82}
83
84
85/*____________ namespaces panel ____________*/
86
87#mediamanager__page .namespaces h2 {
88    font-size: 1em;
89    display: inline-block;
90    border-width: 0;
91    padding: .3em .8em;
92    margin: 0 .3em 0 0;
93    border-radius: .5em .5em 0 0;
94    font-weight: normal;
95    background-color: __background_alt__;
96    color: __text__;
97    line-height: 1.4em;
98}
99* html #mediamanager__page .namespaces h2,
100*+html #mediamanager__page .namespaces h2 {
101    display: inline;
102}
103
104#mediamanager__page .namespaces ul {
105    margin-left: .2em;
106    margin-bottom: 0;
107    padding: 0;
108    list-style: none;
109}
110#mediamanager__page .namespaces ul ul {
111    margin-left: 1em;
112}
113#mediamanager__page .namespaces ul ul li {
114    margin: 0;
115}
116
117#mediamanager__page .namespaces ul .selected {
118    background-color: __highlight__;
119    font-weight: bold;
120}
121
122
123/*____________ file list panel ____________*/
124
125/* file list header */
126
127#mediamanager__page .panelHeader form.options {
128    float: right;
129    margin-top: -3px;
130}
131
132#mediamanager__page .panelHeader ul {
133    list-style: none;
134    margin: 0;
135    padding: 0;
136}
137#mediamanager__page .panelHeader ul li {
138    color: __text__;
139    float: left;
140    line-height: 1;
141    padding-left: 3px;
142}
143
144#mediamanager__page .panelHeader ul li.listType {
145    padding-left: 30px;
146    background: url('../../images/icon-list.png') 3px 1px no-repeat;
147}
148#mediamanager__page .panelHeader ul li.sortBy {
149    padding-left: 30px;
150    background: url('../../images/icon-sort.png') 3px 1px no-repeat;
151}
152
153#mediamanager__page .panelHeader form.options .ui-buttonset label{
154    font-size: 90%;
155    margin-right: -0.4em;
156}
157#mediamanager__page .panelHeader form.options .ui-buttonset .ui-button-text {
158    padding: .3em .5em;
159    line-height: 1;
160}
161
162/* file list content */
163
164#mediamanager__page .filelist ul {
165    padding: 0;
166    margin: 0;
167}
168
169#mediamanager__page .filelist .panelContent ul li:hover {
170    background-color: __background_alt__;
171}
172
173#mediamanager__page .filelist li dt a {
174    vertical-align: middle;
175    display: table-cell;
176    overflow: hidden;
177}
178* html #mediamanager__page .filelist .thumbs li dt a,
179*+html #mediamanager__page .filelist .thumbs li dt a {
180    display: block;
181}
182* html #mediamanager__page .filelist .rows li dt a,
183*+html #mediamanager__page .filelist .rows li dt a {
184    display: inline;
185}
186
187/* file list as thumbs */
188
189#mediamanager__page .filelist .thumbs li {
190    width: 100px;
191    min-height: 130px;
192    display: inline-block;
193    display: -moz-inline-stack;
194    /* the right margin should visually be 10px, but because of its inline-block nature the whitespace inbetween is about 4px more */
195    margin: 0 6px 10px 0;
196    background-color: __background_neu__;
197    color: __text__;
198    padding: 5px;
199    vertical-align: top;
200    text-align: center;
201    position: relative;
202    line-height: 1.2;
203}
204* html #mediamanager__page .filelist .thumbs li,
205*+html #mediamanager__page .filelist .thumbs li {
206    display: inline;
207    zoom: 1;
208}
209
210#mediamanager__page .filelist .thumbs li dt a {
211    width: 100px;
212    height: 90px;
213}
214
215#mediamanager__page .filelist .thumbs li dt a img {
216    max-width: 90px;
217    max-height: 90px;
218}
219
220#mediamanager__page .filelist .thumbs li .name,
221#mediamanager__page .filelist .thumbs li .size,
222#mediamanager__page .filelist .thumbs li .filesize,
223#mediamanager__page .filelist .thumbs li .date {
224    display: block;
225    overflow: hidden;
226    text-overflow: ellipsis;
227    width: 90px;
228    white-space: nowrap;
229}
230#mediamanager__page .filelist .thumbs li .name {
231    padding: 5px 0;
232    font-weight: bold;
233}
234#mediamanager__page .filelist .thumbs li .date {
235    font-style: italic;
236    white-space: normal;
237}
238
239/* file list as rows */
240
241#mediamanager__page .filelist .rows li {
242    list-style: none;
243    display: block;
244    position: relative;
245    max-height: 50px;
246    margin: 0;
247    margin-bottom: 3px;
248    background-color: __background__;
249    color: __text__;
250    overflow: hidden;
251}
252
253#mediamanager__page .filelist .rows li:nth-child(2n+1) {
254    background-color: __background_neu__;
255}
256
257#mediamanager__page .filelist .rows li dt {
258    float: left;
259    width: 10%;
260    height: 40px;
261    text-align: center;
262}
263
264#mediamanager__page .filelist .rows li dt a {
265    width: 100px;
266    height: 40px;
267}
268
269#mediamanager__page .filelist .rows li dt a img {
270    max-width: 40px;
271    max-height: 40px;
272}
273
274#mediamanager__page .filelist .rows li .name,
275#mediamanager__page .filelist .rows li .size,
276#mediamanager__page .filelist .rows li .filesize,
277#mediamanager__page .filelist .rows li .date {
278    overflow: hidden;
279    text-overflow: ellipsis;
280    float: left;
281    margin-left: 1%;
282    white-space: nowrap;
283}
284
285#mediamanager__page .filelist .rows li .name {
286    width: 30%;
287    font-weight: bold;
288}
289#mediamanager__page .filelist .rows li .size,
290#mediamanager__page .filelist .rows li .filesize {
291    width: 15%;
292}
293#mediamanager__page .filelist .rows li .date {
294    width: 20%;
295    font-style: italic;
296    white-space: normal;
297}
298
299/* upload form */
300
301#mediamanager__page div.upload {
302    padding-bottom: 0.5em;
303}
304
305/*____________ file panel ____________*/
306
307#mediamanager__page .file ul.actions {
308    text-align: center;
309    margin: 0 0 5px;
310    padding: 0;
311    list-style: none;
312}
313#mediamanager__page .file ul.actions li {
314    display: inline;
315    margin: 0;
316}
317
318#mediamanager__page .file div.image {
319    margin-bottom: 5px;
320    text-align: center;
321}
322
323#mediamanager__page .file div.image img {
324    width: 100%;
325}
326
327#mediamanager__page .file dl {
328    margin-bottom: 0;
329}
330#mediamanager__page .file dl dt {
331    font-weight: bold;
332    display: block;
333    background-color: __background_alt__;
334}
335#mediamanager__page .file dl dd {
336    display: block;
337    background-color: __background_neu__;
338}
339
340
341/* file meta data edit form */
342
343#mediamanager__page form.meta div.row {
344    margin-bottom: 5px;
345}
346
347#mediamanager__page form.meta label span {
348    display: block;
349}
350
351#mediamanager__page form.meta input {
352    width: 50%;
353}
354
355#mediamanager__page form.meta input.button {
356    width: auto;
357}
358
359#mediamanager__page form.meta textarea.edit {
360    height: 6em;
361    width: 95%;
362    min-width: 95%;
363    max-width: 95%;
364}
365
366/* file revisions form */
367
368#mediamanager__page #page__revisions ul {
369    margin-left: 10px;
370    padding: 0;
371    list-style-type: none;
372}
373
374#mediamanager__page #page__revisions ul li div.li div {
375    font-size: 90%;
376    color: __text_neu__;
377    padding-left: 18px;
378}
379
380#mediamanager__page #page__revisions ul li div.li input {
381    position: relative;
382    top: 1px;
383}
384
385/* file diff view */
386
387#mediamanager__diff table {
388    table-layout: fixed;
389    border-width: 0;
390}
391
392#mediamanager__diff td,
393#mediamanager__diff th {
394    width: 48%;
395    margin: 0 5px 10px 0;
396    padding: 0;
397    vertical-align: top;
398    text-align: left;
399    border-color: __background__;
400}
401
402#mediamanager__diff th {
403    font-weight: normal;
404    background-color: __background__;
405    line-height: 1.2;
406}
407#mediamanager__diff th a {
408    font-weight: bold;
409}
410#mediamanager__diff th span {
411    font-size: 90%;
412}
413
414#mediamanager__diff dl dd strong{
415    background-color: __highlight__;
416    color: __text__;
417    font-weight: normal;
418}
419
420/* image diff views */
421
422#mediamanager__page .file form.diffView {
423    margin-bottom: 10px;
424    display: block;
425}
426
427#mediamanager__diff div.slider {
428    margin: 10px;
429    width: 95%;
430}
431
432#mediamanager__diff .imageDiff {
433    position: relative;
434}
435#mediamanager__diff .imageDiff .image1,
436#mediamanager__diff .imageDiff .image2 {
437    width: 97%;
438}
439#mediamanager__diff .imageDiff .image2 {
440    position: absolute;
441    top: 0;
442    left: 0;
443}
444
445#mediamanager__diff .imageDiff.opacity .image2 {
446    -moz-opacity: 0.5;
447    -khtml-opacity: 0.5;
448    opacity: 0.5;
449}
450
451#mediamanager__diff .imageDiff.portions .image2 {
452    border-right: 1px solid red;
453    overflow: hidden;
454}
455
456#mediamanager__diff .imageDiff img {
457    width: 100%;
458}
459
460