xref: /template/ad-hominem/css/_media_fullscreen.css (revision 9a22688fd82549fdced43db5ebd85a95637a4765) 
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}