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  width: 100%;
18  /* min-width must be summary of all 3 panels' min-widths */
19  min-width: 50em; /* @change */
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  min-height: 20px;
42  padding: 10px 10px 8px;
43  margin: 0 10px 10px 0;
44  overflow: hidden;
45  text-align: left;
46  background-color: __background_alt__;
47}
48
49#mediamanager__page .panelContent {
50  position: relative;
51  padding: 0;
52  margin: 0 10px 10px 0;
53  overflow-x: hidden;
54  overflow-y: auto;
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  right: 2px;
67  width: 6px;
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  padding: 0;
86  margin: 0 0 3px;
87  font-size: 1em;
88  font-weight: normal;
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  position: relative;
101  bottom: -1px;
102  z-index: 2;
103  display: inline-block;
104  padding: .3em .8em;
105  margin: 0 0 0 .3em;
106  font-size: 1em;
107  font-weight: normal;
108  line-height: 1.4em;
109  color: __text__;
110  background-color: __background_alt__;
111  border: 1px solid __border__;
112  border-bottom-color: __background_alt__;
113  border-radius: .5em .5em 0 0;
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  position: relative;
121  right: 10px;
122  margin: 0 .3em 0 0;
123}
124#mediamanager__page .namespaces .panelHeader {
125  z-index: 1;
126  border-top: 1px solid __border__;
127}
128
129#mediamanager__page .namespaces ul {
130  padding: 0;
131  margin-bottom: 0;
132  margin-left: .2em;
133  list-style: none;
134}
135[dir=rtl] #mediamanager__page .namespaces ul {
136  margin-right: .2em;
137  margin-left: 0;
138}
139#mediamanager__page .namespaces ul ul {
140  margin-left: 1em;
141}
142[dir=rtl] #mediamanager__page .namespaces ul ul {
143  margin-right: 1em;
144  margin-left: 0;
145}
146#mediamanager__page .namespaces ul ul li {
147  margin: 0;
148}
149
150#mediamanager__page .namespaces ul .selected {
151  font-weight: bold;
152  background-color: __highlight__;
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  padding: 0;
167  margin: 0;
168  list-style: none;
169}
170#mediamanager__page .panelHeader ul li {
171  float: left;
172  padding-left: 3px;
173  line-height: 1;
174  color: __text__;
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  margin-right: -.4em;
194  font-size: 90%;
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  display: table-cell;
217  overflow: hidden;
218  vertical-align: middle;
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  position: relative;
233  display: inline-block;
234  display: -moz-inline-stack;
235  width: 100px;
236  min-height: 130px;
237  padding: 5px;
238  /* the right margin should visually be 10px, but because of its inline-block nature the whitespace inbetween is about 4px more */
239  margin: 0 6px 10px 0;
240  line-height: 1.2;
241  color: __text__;
242  text-align: center;
243  vertical-align: top;
244  background-color: __background_neu__;
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  width: 90px;
272  overflow: hidden;
273  text-overflow: ellipsis;
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  position: relative;
289  display: block;
290  max-height: 50px;
291  margin: 0;
292  margin-bottom: 3px;
293  overflow: hidden;
294  color: __text__;
295  list-style: none;
296  background-color: __background__;
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  float: left;
325  margin-left: 1%;
326  overflow: hidden;
327  text-overflow: ellipsis;
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: .5em;
349}
350
351/*____________ file panel ____________*/
352
353#mediamanager__page .file ul.actions {
354  padding: 0;
355  margin: 0 0 5px;
356  text-align: center;
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  display: block;
378  font-weight: bold;
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  width: 95%;
407  min-width: 95%;
408  max-width: 95%;
409  height: 6em;
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  padding: 0;
417  margin-left: 10px;
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  padding-left: 18px;
424  font-size: 90%;
425  color: __text_neu__;
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  padding: 0;
445  margin: 0 5px 10px 0;
446  text-align: left;
447  vertical-align: top;
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  line-height: 1.2;
458  background-color: __background__;
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  font-weight: normal;
469  color: __text__;
470  background-color: __highlight__;
471}
472
473/* image diff views */
474
475#mediamanager__page .file form.diffView {
476  display: block;
477  margin-bottom: 10px;
478}
479
480#mediamanager__diff div.slider {
481  width: 95%;
482  margin: 10px;
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         opacity: .5;
496
497    -moz-opacity: .5;
498  -khtml-opacity: .5;
499}
500
501#mediamanager__diff .imageDiff.portions .image2 {
502  overflow: hidden;
503  border-right: 1px solid red;
504}
505
506#mediamanager__diff .imageDiff.portions img {
507  float: left;
508}
509
510#mediamanager__diff .imageDiff img {
511  width: 100%;
512  max-width: none;
513}
514