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