xref: /template/ad-hominem/css/_media_fullscreen.css (revision 98fa74e35999cbd96f4678cfe0e188a0128ce464) 
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}
286#mediamanager__page .filelist .thumbs li .name {
287    padding: 5px 0;
288    font-weight: bold;
289}
290#mediamanager__page .filelist .thumbs li .date {
291    font-style: italic;
292    white-space: normal;
293}
294
295/* file list as rows */
296
297#mediamanager__page .filelist .rows li {
298    list-style: none;
299    display: block;
300    position: relative;
301    max-height: 50px;
302    margin: 0 0 3px 0;
303    background-color: @ini_background;
304    color: @ini_text;
305    overflow: hidden;
306}
307
308#mediamanager__page .filelist .rows li:nth-child(2n+1) {
309    background-color: @ini_background_neu;
310}
311
312#mediamanager__page .filelist .rows li dt {
313    float: left;
314    width: 10%;
315    height: 40px;
316    text-align: center;
317}
318[dir=rtl] #mediamanager__page .filelist .rows li dt {
319    float: right;
320}
321#mediamanager__page .filelist .rows li dt a {
322    width: 100px;
323    height: 40px;
324}
325
326#mediamanager__page .filelist .rows li dt a img {
327    max-width: 40px;
328    max-height: 40px;
329}
330
331#mediamanager__page .filelist .rows li .name,
332#mediamanager__page .filelist .rows li .size,
333#mediamanager__page .filelist .rows li .filesize,
334#mediamanager__page .filelist .rows li .date {
335    overflow: hidden;
336    text-overflow: ellipsis;
337    float: left;
338    margin-left: 1%;
339    white-space: nowrap;
340}
341[dir=rtl] #mediamanager__page .filelist .rows li .name,
342[dir=rtl] #mediamanager__page .filelist .rows li .size,
343[dir=rtl] #mediamanager__page .filelist .rows li .filesize,
344[dir=rtl] #mediamanager__page .filelist .rows li .date {
345    float: right;
346    margin-left: 0;
347    margin-right: 1%;
348}
349
350#mediamanager__page .filelist .rows li .name {
351    width: 30%;
352    font-weight: bold;
353}
354#mediamanager__page .filelist .rows li .size,
355#mediamanager__page .filelist .rows li .filesize {
356    width: 15%;
357}
358#mediamanager__page .filelist .rows li .date {
359    width: 20%;
360    font-style: italic;
361    white-space: normal;
362}
363
364/* upload form */
365
366#mediamanager__page div.upload {
367    padding-bottom: 0.5em;
368}
369
370/*____________ file panel ____________*/
371
372#mediamanager__page .file ul.actions {
373    text-align: center;
374    margin: 0 0 5px;
375    padding: 0;
376    list-style: none;
377}
378#mediamanager__page .file ul.actions li {
379    display: inline;
380    margin: 0;
381}
382
383#mediamanager__page .file div.image {
384    margin-bottom: 5px;
385    text-align: center;
386}
387
388#mediamanager__page .file div.image img {
389    width: 100%;
390}
391
392#mediamanager__page .file dl {
393    margin-bottom: 0;
394}
395#mediamanager__page .file dl dt {
396    font-weight: bold;
397    display: block;
398    background-color: @ini_background_alt;
399	padding-left: .25em;
400}
401#mediamanager__page .file dl dd {
402    display: block;
403    background-color: @ini_background_neu;
404	padding-left: 1em;
405}
406
407/* file meta data edit form */
408
409#mediamanager__page form.meta div.row {
410    margin-bottom: 5px;
411}
412
413#mediamanager__page form.meta label span {
414    display: block;
415}
416
417#mediamanager__page form.meta input {
418    width: 50%;
419}
420
421#mediamanager__page form.meta button {
422    width: auto;
423}
424
425#mediamanager__page form.meta textarea.edit {
426    height: 6em;
427    width: 95%;
428    min-width: 95%;
429    max-width: 95%;
430}
431
432/* file revisions form */
433
434#mediamanager__page form.changes ul {
435    margin-left: 10px;
436    padding: 0;
437    list-style-type: none;
438}
439[dir=rtl] #mediamanager__page form.changes ul {
440    margin-left: 0;
441    margin-right: 10px;
442}
443
444#mediamanager__page form.changes ul li div.li div {
445    font-size: 90%;
446    color: @ini_text_neu;
447    padding-left: 18px;
448}
449[dir=rtl] #mediamanager__page form.changes ul li div.li div {
450    padding-left: 0;
451    padding-right: 18px;
452}
453#mediamanager__page form.changes ul li div.li input {
454    position: relative;
455    top: 1px;
456}
457
458/* file diff view */
459
460#mediamanager__diff table {
461    table-layout: fixed;
462    border-width: 0;
463}
464
465#mediamanager__diff td,
466#mediamanager__diff th {
467    width: 48%;
468    margin: 0 5px 10px 0;
469    padding: 0;
470    vertical-align: top;
471    text-align: left;
472    border-color: @ini_background;
473}
474[dir=rtl] #mediamanager__diff td,
475[dir=rtl] #mediamanager__diff th {
476    margin: 0 0 10px 5px;
477    text-align: right;
478}
479
480#mediamanager__diff th {
481    font-weight: normal;
482    background-color: @ini_background;
483    line-height: 1.2;
484}
485#mediamanager__diff th a {
486    font-weight: bold;
487}
488#mediamanager__diff th span {
489    font-size: 90%;
490}
491
492#mediamanager__diff dl dd strong{
493    background-color: __highlight__;
494    color: @ini_text;
495    font-weight: normal;
496}
497
498/* image diff views */
499
500#mediamanager__page .file form.diffView {
501    margin-bottom: 10px;
502    display: block;
503}
504
505#mediamanager__diff div.slider {
506    margin: 10px;
507    width: 95%;
508}
509
510#mediamanager__diff .imageDiff {
511    position: relative;
512}
513#mediamanager__diff .imageDiff .image2 {
514    position: absolute;
515    top: 0;
516    left: 0;
517}
518
519#mediamanager__diff .imageDiff.opacity .image2 {
520    opacity: 0.5;
521}
522
523#mediamanager__diff .imageDiff.portions .image2 {
524    border-right: 1px solid red;
525    overflow: hidden;
526}
527
528#mediamanager__diff .imageDiff.portions img {
529    float: left;
530}
531
532#mediamanager__diff .imageDiff img {
533    width: 100%;
534    max-width: none;
535}
536
537/* dark mode overrides */
538@media (prefers-color-scheme: dark) {
539	body.darkmode #mediamanager__page .panelHeader,
540	body.darkmode .tabs > ul li a,
541	body.darkmode ul.tabs li strong,
542	body.darkmode ul.tabs li a {
543		background-color:	transparent;
544		border-color:		@ini_text_dark;
545		color:				@ini_text_dark;
546	}
547
548	body.darkmode #mediamanager__page .namespaces h2 {
549		background-color:	@ini_background_dark;
550		border-color:		@ini_text_dark;
551		border-bottom-color: @ini_background_dark;
552		color:				@ini_headlines_dark;
553	}
554	body.darkmode #mediamanager__page .filelist .thumbs li {
555		background-color:	@ini_background_alt_dark;
556		color:				@ini_text_dark;
557	}
558	body.darkmode #mediamanager__page .filelist .panelContent ul li:hover {
559		background-color:	rgba(0,0,0,.2);
560	}
561
562	body.darkmode #mediamanager__page .ui-resizable-e { background-color:	@ini_background_dark; }
563	body.darkmode #mediamanager__page .ui-resizable-e:hover,
564	body.darkmode [dir=rtl] #mediamanager__page .ui-resizable-w:hover { background-color: @ini_background_alt_dark; }
565	body.darkmode #mediamanager__page .file dl dt { background-color:	rgba(0,0,0,.5); }
566	body.darkmode #mediamanager__page .file dl dd { background-color:	rgba(0,0,0,.2); }
567	body.darkmode #mediamanager__page .namespaces ul .selected { background-color: @ini_background_alt_dark; }
568
569}