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