1/**
2 * The CSS in here controls the appearance of the media manager
3 */
4
5#media__manager {
6    height: 100%;
7    overflow: hidden;
8}
9
10#media__left {
11    width: 30%;
12    border-right: solid 1px __border__;
13
14    height: 100%;
15    overflow: auto;
16    position: absolute;
17    left: 0;
18}
19
20#media__right {
21    width: 69.7%;
22
23    height: 100%;
24    overflow: auto;
25    position: absolute;
26    right: 0;
27}
28
29#media__manager h1 {
30    margin: 0;
31    padding: 0;
32    margin-bottom: 0.5em;
33}
34
35#media__manager a.select {
36    cursor: pointer;
37}
38
39/* --- Tree formatting --- */
40
41#media__tree img {
42    float: left;
43    padding: 0.5em 0.3em 0 0;
44}
45[dir=rtl] #media__tree img {
46    float: right;
47    padding: 0.5em 0 0 0.3em;
48}
49
50#media__tree ul {
51    list-style-type: none;
52    list-style-image: none;
53    margin-left: 1.5em;
54}
55[dir=rtl] #media__tree ul {
56    margin-left: 0;
57    margin-right: 1.5em;
58}
59
60#media__tree li {
61    clear: left;
62    list-style-type: none;
63    list-style-image: none;
64}
65[dir=rtl] #media__tree li {
66    clear: right;
67}
68*+html #media__tree li,
69* html #media__tree li {
70    border: 1px solid __background__;
71}/* I don't understand this, but this fixes a style bug in IE;
72it's dirty, so any "real" fixes are welcome */
73
74/* --- options --- */
75
76#media__opts {
77    padding-left: 1em;
78    margin-bottom: 0.5em;
79}
80
81#media__opts input {
82    float: left;
83    display: block;
84    margin-top: 4px;
85    position: absolute;
86}
87*+html #media__opts input,
88* html #media__opts input {
89    position: static;
90}
91
92#media__opts label {
93    display: block;
94    float: left;
95    margin-left: 20px;
96    margin-bottom: 4px;
97}
98*+html #media__opts label,
99* html #media__opts label {
100    margin-left: 10px;
101}
102
103#media__opts br {
104    clear: left;
105}
106
107/* --- file list --- */
108
109#media__content img.load {
110    margin: 1em auto;
111}
112
113#media__content #scroll__here {
114    border: 1px dashed __border__;
115}
116
117#media__content .odd {
118    background-color: __background_other__;
119    padding: 0.4em;
120}
121
122#media__content .even {
123    padding: 0.4em;
124}
125
126#media__content a.mediafile {
127    margin-right: 1.5em;
128    font-weight: bold;
129}
130
131#media__content div.detail {
132    padding: 0.3em 0 0.3em 2em;
133}
134
135#media__content div.detail div.thumb {
136    float: left;
137    width: 130px;
138    text-align: center;
139    margin-right: 0.4em;
140}
141
142
143#media__content img.btn {
144    vertical-align: text-bottom;
145}
146
147#media__content div.example {
148    color: __text_neu__;
149    margin-left: 1em;
150}
151
152/* --- upload form --- */
153
154#media__content div.upload {
155    font-size: 90%;
156    padding: 0 0.5em 0.5em 0.5em;
157}
158
159#media__content #mediamanager__uploader {
160    display: block;
161    border-bottom: solid 1px __border__;
162    padding: 0 0.5em 1em 0.5em;
163}
164
165#media__content form#dw__upload {
166    border-bottom: 0;
167}
168
169#media__content form#dw__upload fieldset {
170    padding: 0;
171    margin: 0;
172    border: none;
173    width: auto;
174}
175#media__content form#dw__upload p {
176    text-align: left;
177    padding: 0.25em 0;
178    margin: 0;
179    line-height: 1.0em;
180}
181#media__content form#dw__upload label.check {
182    float: none;
183    width: auto;
184    margin-left: 11.5em;
185}
186
187/* --- meta edit form --- */
188
189#media__content form.meta {
190    display: block;
191    padding: 0 0 1em 0;
192}
193
194#media__content form.meta label {
195    display: block;
196    width: 25%;
197    float: left;
198    font-weight: bold;
199    margin-left: 1em;
200    clear: left;
201}
202
203#media__content form.meta .edit {
204    font: 100% "Lucida Grande", Verdana, Lucida, Helvetica, Arial, sans-serif;
205    float: left;
206    width: 70%;
207    padding-right: 0;
208    padding-left: 0.2em;
209    margin: 2px;
210}
211
212#media__content form.meta textarea.edit {
213    height: 8em;
214}
215
216#media__content form.meta div.metafield {
217    clear: left;
218}
219
220#media__content form.meta div.buttons {
221    clear: left;
222    margin-left: 20%;
223    padding-left: 1em;
224}
225
226/*____________ Layout ____________*/
227
228#mediamanager__page h1 {
229    margin: 0 0 .5em;
230}
231
232#mediamanager__page {
233    min-width: 800px;
234    width: 100%;
235    text-align: left;
236}
237
238#mediamanager__page .panel {
239    float: left;
240}
241
242#mediamanager__page .namespaces {
243    width: 15%;
244    min-width: 120px;
245}
246#mediamanager__page .filelist {
247    width: 50%;
248    min-width: 48em;
249}
250#mediamanager__page .file {
251    width: 35%;
252    min-width: 280px;
253}
254
255#mediamanager__page .panelHeader {
256    background-color: __background_other__;
257    margin: 0 10px 10px 0;
258    padding: 10px 10px 8px;
259    text-align: left;
260    min-height: 20px;
261    overflow: hidden;
262}
263[dir=rtl] #mediamanager__page .panelContent {
264    text-align: right;
265}
266
267
268#mediamanager__page .panelContent {
269    overflow-y: auto;
270    overflow-x: hidden;
271    padding: 0;
272    margin: 0 10px 10px 0;
273    position: relative;
274}
275
276#mediamanager__page .file .panelHeader,
277#mediamanager__page .file .panelContent {
278    margin-right: 0;
279}
280
281#mediamanager__page .ui-resizable-e {
282    width: 6px;
283    right: 2px;
284    background: transparent url(images/resizecol.png) center center no-repeat;
285}
286#mediamanager__page .ui-resizable-e:hover {
287    background-color: __background_other__;
288}
289
290
291/*____________ Namespaces tree ____________*/
292
293[dir=rtl] #mediamanager__page .namespaces {
294    text-align: right;
295}
296
297#mediamanager__page .namespaces h2 {
298    font-size: 1em;
299    display: inline-block;
300    border-width: 0;
301    padding: .3em .8em;
302    margin: 0 .3em 0 0;
303    border-radius: .5em .5em 0 0;
304    font-weight: normal;
305    background-color: __background_other__;
306    color: __text__;
307    line-height: 1.5em;
308}
309* html #mediamanager__page .namespaces h2,
310*+html #mediamanager__page .namespaces h2 {
311    display: inline;
312}
313[dir=rtl] #mediamanager__page .namespaces h2 {
314    margin-right: 10px;
315}
316
317#mediamanager__page .namespaces ul {
318    margin-left: .2em;
319    margin-bottom: 0;
320    padding: 0;
321    list-style: none;
322}
323[dir=rtl] #mediamanager__page .namespaces ul {
324    margin-left: 0;
325    margin-right: .2em;
326}
327
328#mediamanager__page .namespaces ul ul {
329    margin-left: 1em;
330}
331[dir=rtl] #mediamanager__page .namespaces ul ul {
332    margin-left: 0;
333    margin-right: 1em;
334}
335#mediamanager__page .namespaces ul ul li {
336    margin: 0;
337}
338
339
340#mediamanager__page .namespaces ul .selected {
341    background-color: __highlight__;
342    font-weight: bold;
343}
344
345/*____________ Panel header ____________*/
346
347#mediamanager__page .panelHeader h3 {
348    float: left;
349    font-weight: normal;
350    font-size: 1em;
351    padding: 0;
352    margin: 0 0 3px;
353}
354
355#mediamanager__page .panelHeader form.options {
356    float: right;
357    margin-top: -3px;
358}
359
360#mediamanager__page .panelHeader ul {
361    list-style: none;
362    margin: 0;
363    padding: 0;
364}
365#mediamanager__page .panelHeader ul li {
366    color: __text__;
367    float: left;
368    line-height: 1;
369    padding-left: 3px;
370}
371
372#mediamanager__page .panelHeader ul li.listType {
373    padding-left: 30px;
374    background: url('../../images/icon-list.png') 3px 1px no-repeat;
375}
376#mediamanager__page .panelHeader ul li.sortBy {
377    padding-left: 30px;
378    background: url('../../images/icon-sort.png') 3px 1px no-repeat;
379}
380
381#mediamanager__page .panelHeader form.options .ui-buttonset label{
382    font-size: 90%;
383    margin-right: -0.4em;
384}
385#mediamanager__page .panelHeader form.options .ui-buttonset .ui-button-text {
386    padding: .4em .7em;
387    line-height: 1;
388}
389
390/*____________ File list ____________*/
391
392#mediamanager__page .filelist ul {
393    padding: 0;
394    margin: 0;
395}
396[dir=rtl] #mediamanager__page .filelist ul.tabs {
397    margin-right: 10px;
398}
399
400#mediamanager__page .filelist .panelContent ul li:hover {
401    background-color: __background_other__;
402}
403
404#mediamanager__page .filelist li dt a {
405    vertical-align: middle;
406    display: table-cell;
407    overflow: hidden;
408}
409* html #mediamanager__page .filelist .thumbs li dt a,
410*+html #mediamanager__page .filelist .thumbs li dt a {
411    display: block;
412}
413* html #mediamanager__page .filelist .rows li dt a,
414*+html #mediamanager__page .filelist .rows li dt a {
415    display: inline;
416}
417
418/* thumbs */
419
420#mediamanager__page .filelist .thumbs li {
421    width: 100px;
422    min-height: 130px;
423    display: inline-block;
424    display: -moz-inline-stack;
425    /* the right margin should visually be 10px, but because of its inline-block nature the whitespace inbetween is about 4px more */
426    margin: 0 6px 10px 0;
427    background-color: __background_other__;
428    color: __text__;
429    padding: 5px;
430    vertical-align: top;
431    text-align: center;
432    position: relative;
433    line-height: 1.2;
434}
435[dir=rtl] #mediamanager__page .filelist .thumbs li {
436    margin-right: 0;
437    margin-left: 6px;
438}
439* html #mediamanager__page .filelist .thumbs li,
440*+html #mediamanager__page .filelist .thumbs li {
441    display: inline;
442    zoom: 1;
443}
444
445#mediamanager__page .filelist .thumbs li dt a {
446    width: 100px;
447    height: 90px;
448}
449
450#mediamanager__page .filelist .thumbs li dt a img {
451    max-width: 90px;
452    max-height: 90px;
453}
454
455#mediamanager__page .filelist .thumbs li .name,
456#mediamanager__page .filelist .thumbs li .size,
457#mediamanager__page .filelist .thumbs li .filesize,
458#mediamanager__page .filelist .thumbs li .date {
459    display: block;
460    overflow: hidden;
461    text-overflow: ellipsis;
462    width: 90px;
463    white-space: nowrap;
464}
465#mediamanager__page .filelist .thumbs li .name {
466    padding: 5px 0;
467    font-weight: bold;
468}
469#mediamanager__page .filelist .thumbs li .date {
470    font-style: italic;
471    white-space: normal;
472}
473
474/* rows */
475
476#mediamanager__page .filelist .rows li {
477    list-style: none;
478    display: block;
479    position: relative;
480    max-height: 50px;
481    margin: 0;
482    margin-bottom: 3px;
483    background-color: __background__;
484    color: __text__;
485    overflow: hidden;
486}
487
488#mediamanager__page .filelist .rows li:nth-child(2n+1) {
489    background-color: __background_other__;
490}
491
492#mediamanager__page .filelist .rows li dt {
493    float: left;
494    width: 10%;
495    height: 40px;
496    text-align: center;
497}
498
499#mediamanager__page .filelist .rows li dt a {
500    width: 100px;
501    height: 40px;
502}
503
504#mediamanager__page .filelist .rows li dt a img {
505    max-width: 40px;
506    max-height: 40px;
507}
508
509#mediamanager__page .filelist .rows li .name,
510#mediamanager__page .filelist .rows li .size,
511#mediamanager__page .filelist .rows li .filesize,
512#mediamanager__page .filelist .rows li .date {
513    overflow: hidden;
514    text-overflow: ellipsis;
515    float: left;
516    margin-left: 1%;
517    white-space: nowrap;
518}
519
520#mediamanager__page .filelist .rows li .name {
521    width: 30%;
522    font-weight: bold;
523}
524#mediamanager__page .filelist .rows li .size,
525#mediamanager__page .filelist .rows li .filesize {
526    width: 15%;
527}
528#mediamanager__page .filelist .rows li .date {
529    width: 20%;
530    font-style: italic;
531    white-space: normal;
532}
533
534/*____________ Upload panel ____________*/
535
536#mediamanager__page div.upload {
537    padding-bottom: 0.5em;
538}
539
540#media__content #mediamanager__uploader {
541    border-bottom: 1px solid __border__;
542    padding-bottom: 0.5em;
543}
544
545/*____________ File preview ____________*/
546
547#mediamanager__page .file ul.actions {
548    text-align: center;
549    margin: 0 0 5px;
550    list-style: none;
551}
552#mediamanager__page .file ul.actions li {
553    display: inline;
554}
555
556#mediamanager__page .file div.image {
557    margin-bottom: 5px;
558    text-align: center;
559}
560
561#mediamanager__page .file div.image img {
562    width: 100%;
563}
564
565#mediamanager__page .file dl {
566}
567#mediamanager__page .file dl dt {
568    font-weight: bold;
569    display: block;
570    background-color: __background_other__;
571}
572#mediamanager__page .file dl dd {
573    display: block;
574    background-color: __background_other__;
575}
576
577
578/*____________ Meta data edit form ____________*/
579
580#mediamanager__page form.meta div.row {
581    margin-bottom: 5px;
582}
583
584#mediamanager__page form.meta label span {
585    display: block;
586}
587[dir=rtl] #mediamanager__page form.meta label span {
588    text-align: right;
589}
590
591#mediamanager__page form.meta input {
592    width: 50%;
593}
594
595#mediamanager__page form.meta input.button {
596    width: auto;
597}
598
599#mediamanager__page form.meta textarea.edit {
600    height: 6em;
601    width: 95%;
602    min-width: 95%;
603    max-width: 95%;
604}
605
606/*____________ Revisions form ____________*/
607
608#mediamanager__page form.changes ul {
609    margin-left: 10px;
610    list-style-type: none;
611}
612
613#mediamanager__page form.changes ul li div.li div {
614    font-size: 90%;
615    color: __text_other__;
616    padding-left: 18px;
617}
618
619#mediamanager__page form.changes ul li div.li input {
620    position: relative;
621    top: 1px;
622}
623
624/* File diff */
625
626#mediamanager__diff table {
627    table-layout: fixed;
628}
629
630#mediamanager__diff td,
631#mediamanager__diff th {
632    width: 48%;
633    margin: 0 5px 10px 0;
634    padding: 0;
635    vertical-align: top;
636    text-align: left;
637}
638
639#mediamanager__diff th {
640    font-weight: normal;
641}
642#mediamanager__diff th a {
643    font-weight: bold;
644}
645#mediamanager__diff th span {
646    font-size: 90%;
647}
648
649#mediamanager__diff dl dd strong{
650    background-color: __highlight__;
651    color: __text__;
652    font-weight: normal;
653}
654
655/* Image diff */
656
657#mediamanager__page .file form.diffView {
658    margin-bottom: 10px;
659    display: block;
660}
661
662#mediamanager__diff div.slider {
663    margin: 10px;
664    width: 95%;
665}
666
667#mediamanager__diff .imageDiff {
668    position: relative;
669}
670#mediamanager__diff .imageDiff .image2 {
671    position: absolute;
672    top: 0;
673    left: 0;
674}
675
676#mediamanager__diff .imageDiff.opacity .image2 {
677    -moz-opacity: 0.5;
678    -khtml-opacity: 0.5;
679    opacity: 0.5;
680}
681
682#mediamanager__diff .imageDiff.portions .image2 {
683    border-right: 1px solid red;
684    overflow: hidden;
685}
686
687#mediamanager__diff .imageDiff.portions img {
688    float: left;
689}
690
691#mediamanager__diff .imageDiff img {
692    width: 100%;
693    max-width: none;
694}
695
696