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