1#mediamanager__page {
2	min-width: 800px;
3	width: 100%;
4	text-align: left;
5	h1 {
6		margin: 0 0 .2em;
7	}
8	.panel {
9		float: left;
10	}
11	.namespaces {
12		width: 15%;
13		min-width: 120px;
14		h2 {
15			font-size: 1em;
16			display: inline-block;
17			border-width: 0;
18			padding: 0 .5em;
19			margin: 0 .3em 0 0;
20			border-radius: .5em .5em 0 0;
21			font-weight: normal;
22			background-color: __background_alt__;
23			color: __text__;
24			line-height: 1.5em;
25		}
26		ul {
27			margin: 0;
28			padding: 0;
29			list-style: none;
30			ul {
31				margin-left: 1em;
32				li {
33					margin: 0;
34				}
35			}
36			div.li {
37				display: inline-block;
38				margin-left: .3em;
39			}
40			.selected {
41				background-color: __highlight__;
42				font-weight: bold;
43			}
44		}
45	}
46	.filelist {
47		width: 50%;
48		min-width: 400px;
49		ul {
50			padding: 0;
51			margin: 0;
52			&.tabs {
53				li {
54					strong {
55						padding: 0 .5em;
56						margin: 0 5px 0 0;
57					}
58					a {
59						padding: 0 .5em;
60						margin: 0 5px 0 0;
61					}
62				}
63			}
64		}
65		.panelContent {
66			ul {
67				li:hover {
68					background-color: __background_alt__;
69				}
70			}
71			div.upload {
72				padding-bottom: 0.5em;
73				#mediamanager__uploader {
74					border-bottom: 1px solid __border__;
75					padding-bottom: 0.5em;
76					.qq-uploader {
77						position: relative;
78						width: 100%;
79						.error {
80							color: #f00;
81							background-color: #fff;
82						}
83						ul {
84							margin: 0;
85							list-style: none;
86						}
87						li {
88							margin-bottom: 5px;
89							color: __text__;
90							span,
91							input,
92							a {
93								margin-right: 5px;
94							}
95						}
96						.qq-upload-drop-area {
97							position: absolute;
98							top: 0;
99							left: 0;
100							width: 100%;
101							height: 100%;
102							min-height: 70px;
103							z-index: 2;
104							background: __background_neu__;
105							color: __text__;
106							text-align: center;
107							span {
108								display: block;
109								position: absolute;
110								top: 50%;
111								width: 100%;
112								margin-top: -8px;
113								font-size: 120%;
114							}
115						}
116						.qq-upload-drop-area-active {
117							background: __background_alt__;
118						}
119						.qq-upload-button {
120							display: inline-block;
121							border: 1px solid __border__;
122							color: __text__;
123							text-decoration: none;
124							font-size: 100%;
125							cursor: pointer;
126							margin: 1px 1px 5px;
127							padding: 0.125em 0.4em;
128						}
129						.qq-upload-button-focus,
130						.qq-upload-button-hover {
131							outline: 1px dotted;
132						}
133						.qq-upload-list {
134							.qq-upload-name-check {
135								display: block;
136							}
137							.qq-upload-file {
138//								display: block;
139								font-weight: bold;
140							}
141							.qq-upload-spinner {
142//								display: inline-block;
143								background: url(../../../images/throbber.gif);
144								width: 15px;
145								height: 15px;
146								vertical-align: text-bottom;
147							}
148							.qq-upload-size,
149							.qq-upload-cancel {
150								font-size: 85%;
151							}
152							.qq-upload-failed-text {
153								display: none;
154							}
155							.qq-upload-fail .qq-upload-failed-text {
156								display: inline;
157							}
158						}
159						.qq-action-container {
160							* {
161								vertical-align: middle;
162							}
163							.qq-overwrite-check input {
164								margin-left: 10px;
165							}
166						}
167					}
168				}
169			}
170		}
171		li {
172			dt {
173				a {
174					vertical-align: middle;
175					display: table-cell;
176					overflow: hidden;
177				}
178			}
179		}
180		.thumbs {
181			li {
182				width: 100px;
183				min-height: 130px;
184				display: inline-block;
185				/* the right margin should visually be 10px, but because of its inline-block nature the whitespace inbetween is about 4px more */
186				margin: 0 6px 10px 0;
187				background-color: __background_neu__;
188				color: __text__;
189				padding: 5px;
190				vertical-align: top;
191				text-align: center;
192				position: relative;
193				line-height: 1.2;
194				dt {
195					a {
196						width: 100px;
197						height: 90px;
198						img {
199							max-width: 90px;
200							max-height: 90px;
201						}
202					}
203				}
204				.name,
205				.size,
206				.filesize,
207				.date {
208					display: block;
209					font-size: 90%;
210					margin: 0;
211					overflow: hidden;
212					text-overflow: ellipsis;
213					width: 90px;
214					white-space: nowrap;
215				}
216				.name {
217					padding: 5px 0;
218					font-weight: bold;
219				}
220				.date {
221					font-style: italic;
222					white-space: normal;
223				}
224			}
225		}
226		.rows {
227			li {
228				list-style: none;
229				display: block;
230				position: relative;
231				max-height: 50px;
232				margin: 0;
233				margin-bottom: 3px;
234				background-color: __background__;
235				color: __text__;
236				overflow: hidden;
237				&:nth-child(2n+1) {
238					background-color: __background_neu__;
239				}
240				dt {
241					float: left;
242					width: 10%;
243					height: 40px;
244					text-align: center;
245					a {
246						width: 100px;
247						height: 40px;
248						img {
249							max-width: 40px;
250							max-height: 40px;
251						}
252					}
253				}
254				.name,
255				.size,
256				.filesize,
257				.date {
258					overflow: hidden;
259					text-overflow: ellipsis;
260					float: left;
261					margin-left: 1%;
262					white-space: nowrap;
263				}
264				.name {
265					width: 30%;
266					font-weight: bold;
267				}
268				.size,
269				.filesize {
270					width: 15%;
271				}
272				.date {
273					width: 20%;
274					font-style: italic;
275					white-space: normal;
276				}
277			}
278		}
279	}
280	.file {
281		width: 35%;
282		min-width: 280px;
283		display: contents;
284		ul.tabs {
285			li {
286				strong {
287					padding: 0 .5em;
288					margin: 0 5px 0 0;
289				}
290				a {
291					padding: 0 .5em;
292					margin: 0 5px 0 0;
293				}
294			}
295		}
296		.panelHeader,
297		.panelContent {
298			margin-right: 0;
299		}
300		#mediamanager__diff {
301			table {
302				table-layout: fixed;
303			}
304			td,
305			th {
306				width: 48%;
307				margin: 0 5px 10px 0;
308				padding: 0;
309				vertical-align: top;
310				text-align: left;
311			}
312			th {
313				font-weight: normal;
314				a {
315					font-weight: bold;
316				}
317				span {
318					font-size: 90%;
319				}
320			}
321			dl {
322				dd {
323					strong {
324						background-color: __highlight__;
325						color: __text__;
326						font-weight: normal;
327					}
328				}
329			}
330			div.slider {
331				margin: 10px;
332				width: 95%;
333			}
334			.imageDiff {
335				position: relative;
336				.image2 {
337					position: absolute;
338					top: 0;
339					left: 0;
340				}
341				&.opacity {
342					.image2 {
343						opacity: 0.5;
344					}
345				}
346				&.portions {
347					.image2 {
348						border-right: 1px solid red;
349						overflow: hidden;
350					}
351					img {
352						float: left;
353					}
354				}
355				img {
356					width: 100%;
357					max-width: none;
358				}
359			}
360			[dir=rtl] & td,
361			[dir=rtl] & th {
362				text-align: right;
363			}
364		}
365		div.image {
366			margin-bottom: 5px;
367			text-align: center;
368			img {
369				width: 100%;
370			}
371		}
372		ul.actions {
373			text-align: center;
374			margin: 0 0 5px;
375			list-style: none;
376			li {
377				display: inline;
378			}
379		}
380		dl {
381			dt {
382				font-weight: bold;
383				display: block;
384				background-color: __background_alt__;
385				width: calc(~"50% - "2px);
386				float: left;
387				text-align: right;
388				padding-right: 2px;
389			}
390			dd {
391				display: block;
392				background-color: __background_neu__;
393				width: calc(~"50% - "2px);
394				float: right;
395				margin: 0;
396				padding-left: 2px;
397			}
398		}
399		form.diffView {
400			margin-bottom: 10px;
401			display: block;
402		}
403	}
404	.panelHeader {
405		background-color: __background_alt__;
406		margin: 0 10px 0 0;
407		padding: 5px;
408		text-align: left;
409		min-height: 20px;
410		overflow: hidden;
411		h3 {
412			float: left;
413			font-weight: normal;
414			font-size: 1em;
415			padding: 0;
416			margin: 0;
417		}
418		form.options {
419			float: right;
420			.ui-buttonset {
421				label {
422					font-size: 90%;
423					margin-right: -0.4em;
424				}
425				.ui-button-text {
426					padding: .4em .7em;
427					line-height: 1;
428				}
429			}
430		}
431		ul {
432			list-style: none;
433			margin: 0;
434			padding: 0;
435			li {
436				color: __text__;
437				float: left;
438				line-height: 1;
439				padding-left: 3px;
440				&.listType {
441					padding-left: 30px;
442					background: url(../../images/icon-list.png) 3px 1px no-repeat;
443				}
444				&.sortBy {
445					padding-left: 30px;
446					background: url(../../images/icon-sort.png) 3px 1px no-repeat;
447				}
448			}
449		}
450	}
451	.panelContent {
452		overflow-y: auto;
453		overflow-x: hidden;
454		padding: 0;
455		margin: 0 10px 0 0;
456		position: relative;
457	}
458	.ui-resizable-e {
459		width: 6px;
460		right: 2px;
461		background: transparent url(../../images/resizecol.png) center center no-repeat;
462		&:hover {
463			background-color: __background_alt__;
464		}
465	}
466	form.meta {
467		div.row {
468			margin-bottom: 5px;
469		}
470		label {
471			span {
472				display: block;
473			}
474		}
475		input {
476			width: 50%;
477			&.button {
478				width: auto;
479			}
480		}
481		textarea.edit {
482			height: 6em;
483			width: 95%;
484		}
485	}
486	form.changes {
487		ul {
488			margin: 0;
489			list-style-type: none;
490			li {
491				div.li {
492					div {
493						font-size: 90%;
494						color: __text_neu__;
495						padding-left: 18px;
496					}
497					input {
498						position: relative;
499						top: 1px;
500					}
501				}
502			}
503		}
504	}
505	[dir=rtl] & {
506		.namespaces {
507			text-align: right;
508			h2 {
509				margin-right: 10px;
510			}
511			ul {
512				ul {
513					margin-left: 0;
514					margin-right: 1em;
515				}
516			}
517		}
518		.filelist {
519			ul.tabs {
520				margin-right: 10px;
521			}
522			.thumbs {
523				li {
524					margin-right: 0;
525					margin-left: 6px;
526				}
527			}
528		}
529		.panelContent {
530			text-align: right;
531		}
532		form.meta {
533			label {
534				span {
535					text-align: right;
536				}
537			}
538		}
539	}
540}
541
542/* */
543
544#media__manager {
545	display: flex;
546	h1 {
547		padding: 0;
548	}
549	#media__left {
550		border-right: solid 1px __border__;
551		overflow: auto;
552		padding: .5em 0 0 .5em;
553		width: ~"calc(30% - .5em)";
554		#media__opts {
555			margin: .5em 0;
556			input {
557			}
558			label {
559				vertical-align: top;
560			}
561		}
562		#media__tree {
563			> ul {
564				border: 0 !important;
565			}
566			ul {
567				border-left: 2px solid __dark__;
568				border-radius: 5px;
569				list-style-image: none;
570				list-style-type: none;
571				margin: 0 0 0 .2em;
572				padding: 0 5px;
573				[dir=rtl] & {
574					border-left: 0;
575					border-right: 2px solid __dark__;
576					margin: 0 .2em 0 0;
577				}
578				li {
579					clear: left;
580					list-style-image: none;
581					list-style-type: none;
582					[dir=rtl] & {
583						clear: right;
584					}
585					img {
586						[dir=rtl] & {
587							float: right;
588						}
589					}
590					div.li {
591						display: inline-block;
592						margin: 3px 0 0 0.3em;
593						[dir=rtl] & {
594							margin: 3px 0.3em 0 0;
595						}
596						a.idx_dir {
597							background-color: white;
598							border: 2px solid __light__;
599							border-radius: 5px;
600//							box-shadow: 0 0 3px 1px __dark__;
601							padding: 0 5px;
602						}
603					}
604					&.open > div.li > a {
605						font-weight: bold;
606					}
607				}
608			}
609		}
610	}
611	#media__right {
612		overflow: auto;
613		padding: .5em 0 0 .5em;
614		width: ~"calc(70% - .5em)";
615		#media__content {
616			div.upload {
617				margin: .5em 0;
618			}
619			#mediamanager__uploader {
620				border-bottom: solid 1px __border__;
621				padding-bottom: .5em;
622				.qq-upload-button, .qq-upload-action {
623					border: 1px solid __border__;
624					border-radius: 3px;
625					color: __text__;
626					cursor: pointer;
627					display: inline-block;
628					font-size: 100%;
629					padding: 0.125em 0.4em;
630					text-decoration: none;
631				}
632				.qq-upload-button {
633					background-image: linear-gradient(to bottom, #7EF, #5CC);
634					&:hover {
635						background-image: linear-gradient(to bottom, #7EF, #3AB);
636					}
637				}
638				.qq-upload-action {
639					background-image: linear-gradient(to bottom, #CFB, #AD9);
640					&:hover {
641						background-image: linear-gradient(to bottom, #CFB, #8B7);
642					}
643				}
644				.qq-overwrite-check * {
645					vertical-align: middle;
646				}
647				form#dw__upload {
648					border-bottom: 0;
649					fieldset {
650						border: none;
651						margin: 0;
652						padding: 0;
653						width: auto;
654					}
655					p {
656						line-height: 1.0em;
657						margin: 0;
658						padding: 0.25em 0;
659						text-align: left;
660					}
661					label.check {
662						float: none;
663						margin-left: 11.5em;
664						width: auto;
665					}
666				}
667			}
668			#dw__mediasearch button {
669				vertical-align: middle;
670			}
671			.odd {
672				background-color: __background_other__;
673			}
674			.even,
675			.odd {
676				padding: 0.4em;
677				a.select {
678					cursor: pointer;
679				}
680				a.mediafile {
681					font-weight: bold;
682					margin-right: 1.5em;
683				}
684				img.btn {
685					vertical-align: text-bottom;
686				}
687				div.example {
688					color: __text_neu__;
689					margin-left: 1em;
690				}
691				div.detail {
692					padding: 0.3em 0 0.3em 2em;
693					div.thumb {
694						float: left;
695						margin-right: 0.4em;
696						text-align: center;
697						width: 130px;
698					}
699				}
700			}
701
702/* сильнее уточнить местоположение вот этих не удалось */
703			img.load {
704				margin: 1em auto;
705			}
706			#scroll__here {
707				border: 1px dashed __border__;
708			}
709			form.meta {
710				display: block;
711				padding: 0 0 1em 0;
712				label {
713					clear: left;
714					display: block;
715					float: left;
716					font-weight: bold;
717					margin-left: 1em;
718					width: 25%;
719				}
720				.edit {
721					float: left;
722					font: 100% "Lucida Grande", Verdana, Lucida, Helvetica, Arial, sans-serif;
723					margin: 2px;
724					padding-left: 0.2em;
725					padding-right: 0;
726					width: 70%;
727				}
728				textarea.edit {
729					height: 8em;
730				}
731				div.metafield {
732					clear: left;
733				}
734				div.buttons {
735					clear: left;
736					margin-left: 20%;
737					padding-left: 1em;
738				}
739			}
740		}
741	}
742}
743
744/* */
745
746#media__popup_content {
747	padding: .3em;
748	p {
749		text-align: end;
750		button {
751			height: 21px;
752			width: 26px;
753			&.button {
754				padding: .125em .2em;
755				margin-left: 4px;
756			}
757			&.selected {
758				background-color: #ddd;
759			}
760		}
761		input.button {
762			background-image: linear-gradient(to bottom, #CCFFBB, #AADD99);
763			border-radius: 5px;
764			float: right;
765			&:hover {
766				background-image: linear-gradient(to bottom, #CCFFBB, #88BB77);
767			}
768		}
769	}
770}
771