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    font-weight: bold;
174}
175
176
177/*____________ file list panel ____________*/
178
179/* file list header */
180
181#mediamanager__page .panelHeader form.options {
182    float: right;
183    margin-top: -3px;
184}
185[dir=rtl] #mediamanager__page .panelHeader form.options {
186    float : left
187}
188#mediamanager__page .panelHeader ul {
189    list-style: none;
190    margin: 0;
191    padding: 0;
192}
193#mediamanager__page .panelHeader ul li {
194    color: @ini_text;
195    float: left;
196    line-height: 1;
197    padding-left: 3px;
198}
199[dir=rtl] #mediamanager__page .panelHeader ul li {
200    padding-right: 3px;
201    padding-left: 0;
202    float: right;
203}
204
205#mediamanager__page .panelHeader ul li.ui-controlgroup-horizontal {
206    padding-left: 30px;
207    margin: 0 0 0 5px;
208}
209#mediamanager__page .panelHeader ul li.listType {
210    background: url('../../images/icon-list.png') 3px 1px no-repeat;
211}
212#mediamanager__page .panelHeader ul li.sortBy {
213    background: url('../../images/icon-sort.png') 3px 1px no-repeat;
214}
215[dir=rtl] #mediamanager__page .panelHeader ul li.ui-controlgroup-horizontal {
216    padding-left: 0;
217    padding-right: 30px;
218    margin: 0 5px 0 0;
219    background-position: right 1px;
220}
221
222#mediamanager__page .panelHeader form.options .ui-controlgroup-horizontal label{
223    font-size: 90%;
224    margin-right: -0.4em;
225    padding: .3em .5em;
226    line-height: 1;
227}
228
229/* file list content */
230
231#mediamanager__page .filelist ul {
232    padding: 0;
233    margin: 0 10px 0 0;
234}
235[dir=rtl] #mediamanager__page .filelist ul {
236    margin: 0 0 0 10px;
237}
238#mediamanager__page .filelist ul.rows {
239    margin: 0;
240}
241#mediamanager__page .filelist .panelContent ul li:hover {
242    background-color: @ini_background_alt;
243}
244
245#mediamanager__page .filelist li dt a {
246    vertical-align: middle;
247    display: table-cell;
248    overflow: hidden;
249}
250
251/* file list as thumbs */
252
253#mediamanager__page .filelist .thumbs li {
254    width: 100px;
255    min-height: 130px;
256    display: inline-block;
257    /* the right margin should visually be 10px, but because of its inline-block nature the whitespace inbetween is about 4px more */
258    margin: 0 6px 10px 0;
259    background-color: @ini_background_neu;
260    color: @ini_text;
261    padding: 5px;
262    vertical-align: top;
263    text-align: center;
264    position: relative;
265    line-height: 1.2;
266}
267[dir=rtl] #mediamanager__page .filelist .thumbs li {
268    margin-right: 0;
269    margin-left: 6px;
270}
271
272#mediamanager__page .filelist .thumbs li dt a {
273    width: 100px;
274    height: 90px;
275}
276
277#mediamanager__page .filelist .thumbs li dt a img {
278    max-width: 90px;
279    max-height: 90px;
280}
281
282#mediamanager__page .filelist .thumbs li .name,
283#mediamanager__page .filelist .thumbs li .size,
284#mediamanager__page .filelist .thumbs li .filesize,
285#mediamanager__page .filelist .thumbs li .date {
286    display: block;
287    overflow: hidden;
288    text-overflow: ellipsis;
289    width: 90px;
290    white-space: nowrap;
291}
292#mediamanager__page .filelist .thumbs li .name {
293    padding: 5px 0;
294    font-weight: bold;
295}
296#mediamanager__page .filelist .thumbs li .date {
297    font-style: italic;
298    white-space: normal;
299}
300
301/* file list as rows */
302
303#mediamanager__page .filelist .rows li {
304    list-style: none;
305    display: block;
306    position: relative;
307    max-height: 50px;
308    margin: 0 0 3px 0;
309    background-color: @ini_background;
310    color: @ini_text;
311    overflow: hidden;
312}
313
314#mediamanager__page .filelist .rows li:nth-child(2n+1) {
315    background-color: @ini_background_neu;
316}
317
318#mediamanager__page .filelist .rows li dt {
319    float: left;
320    width: 10%;
321    height: 40px;
322    text-align: center;
323}
324[dir=rtl] #mediamanager__page .filelist .rows li dt {
325    float: right;
326}
327#mediamanager__page .filelist .rows li dt a {
328    width: 100px;
329    height: 40px;
330}
331
332#mediamanager__page .filelist .rows li dt a img {
333    max-width: 40px;
334    max-height: 40px;
335}
336
337#mediamanager__page .filelist .rows li .name,
338#mediamanager__page .filelist .rows li .size,
339#mediamanager__page .filelist .rows li .filesize,
340#mediamanager__page .filelist .rows li .date {
341    overflow: hidden;
342    text-overflow: ellipsis;
343    float: left;
344    margin-left: 1%;
345    white-space: nowrap;
346}
347[dir=rtl] #mediamanager__page .filelist .rows li .name,
348[dir=rtl] #mediamanager__page .filelist .rows li .size,
349[dir=rtl] #mediamanager__page .filelist .rows li .filesize,
350[dir=rtl] #mediamanager__page .filelist .rows li .date {
351    float: right;
352    margin-left: 0;
353    margin-right: 1%;
354}
355
356#mediamanager__page .filelist .rows li .name {
357    width: 30%;
358    font-weight: bold;
359}
360#mediamanager__page .filelist .rows li .size,
361#mediamanager__page .filelist .rows li .filesize {
362    width: 15%;
363}
364#mediamanager__page .filelist .rows li .date {
365    width: 20%;
366    font-style: italic;
367    white-space: normal;
368}
369
370/* upload form */
371
372#mediamanager__page div.upload {
373    padding-bottom: 0.5em;
374}
375
376/*____________ file panel ____________*/
377
378#mediamanager__page .file ul.actions {
379    text-align: center;
380    margin: 0 0 5px;
381    padding: 0;
382    list-style: none;
383}
384#mediamanager__page .file ul.actions li {
385    display: inline;
386    margin: 0;
387}
388
389#mediamanager__page .file div.image {
390    margin-bottom: 5px;
391    text-align: center;
392}
393
394#mediamanager__page .file div.image img {
395    width: 100%;
396}
397
398#mediamanager__page .file dl {
399    margin-bottom: 0;
400}
401#mediamanager__page .file dl dt {
402    font-weight: bold;
403    display: block;
404    background-color: @ini_background_alt;
405}
406#mediamanager__page .file dl dd {
407    display: block;
408    background-color: @ini_background_neu;
409}
410
411
412/* file meta data edit form */
413
414#mediamanager__page form.meta div.row {
415    margin-bottom: 5px;
416}
417
418#mediamanager__page form.meta label span {
419    display: block;
420}
421
422#mediamanager__page form.meta input {
423    width: 50%;
424}
425
426#mediamanager__page form.meta button {
427    width: auto;
428}
429
430#mediamanager__page form.meta textarea.edit {
431    height: 6em;
432    width: 95%;
433    min-width: 95%;
434    max-width: 95%;
435}
436
437/* file revisions form */
438
439#mediamanager__page form.changes ul {
440    margin-left: 10px;
441    padding: 0;
442    list-style-type: none;
443}
444[dir=rtl] #mediamanager__page form.changes ul {
445    margin-left: 0;
446    margin-right: 10px;
447}
448
449#mediamanager__page form.changes ul li div.li div {
450    font-size: 90%;
451    color: @ini_text_neu;
452    padding-left: 18px;
453}
454[dir=rtl] #mediamanager__page form.changes ul li div.li div {
455    padding-left: 0;
456    padding-right: 18px;
457}
458#mediamanager__page form.changes ul li div.li input {
459    position: relative;
460    top: 1px;
461}
462
463/* file diff view */
464
465#mediamanager__diff table {
466    table-layout: fixed;
467    border-width: 0;
468}
469
470#mediamanager__diff td,
471#mediamanager__diff th {
472    width: 48%;
473    margin: 0 5px 10px 0;
474    padding: 0;
475    vertical-align: top;
476    text-align: left;
477    border-color: @ini_background;
478}
479[dir=rtl] #mediamanager__diff td,
480[dir=rtl] #mediamanager__diff th {
481    margin: 0 0 10px 5px;
482    text-align: right;
483}
484
485#mediamanager__diff th {
486    font-weight: normal;
487    background-color: @ini_background;
488    line-height: 1.2;
489}
490#mediamanager__diff th a {
491    font-weight: bold;
492}
493#mediamanager__diff th span {
494    font-size: 90%;
495}
496
497#mediamanager__diff dl dd strong{
498    background-color: @ini_highlight;
499    color: @ini_text;
500    font-weight: normal;
501}
502
503/* image diff views */
504
505#mediamanager__page .file form.diffView {
506    margin-bottom: 10px;
507    display: block;
508}
509
510#mediamanager__diff div.slider {
511    margin: 10px;
512    width: 95%;
513}
514
515#mediamanager__diff .imageDiff {
516    position: relative;
517}
518#mediamanager__diff .imageDiff .image2 {
519    position: absolute;
520    top: 0;
521    left: 0;
522}
523
524#mediamanager__diff .imageDiff.opacity .image2 {
525    opacity: 0.5;
526}
527
528#mediamanager__diff .imageDiff.portions .image2 {
529    border-right: 1px solid red;
530    overflow: hidden;
531}
532
533#mediamanager__diff .imageDiff.portions img {
534    float: left;
535}
536
537#mediamanager__diff .imageDiff img {
538    width: 100%;
539    max-width: none;
540}
541