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