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