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