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