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