/**
 * This file provides the styles for the file uploader
 * used in the media manager (both fullscreen and popup).
 */

 .qq-uploader {
	position: relative;
	width: 100%;
}
#mediamanager__page .qq-upload-list li {
	& {
		display: grid;
		grid-template-columns: 1.25rem auto 1.25rem;
		grid-gap: 5px;
		align-items: center;
	}
	&::before {
		content: '';
		background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14,11C12.34,11 11,9.66 11,8V4H7C5.9,4 5,4.9 5,6V19C5,20.1 5.9,21 7,21H16C17.1,21 18,20.1 18,19V11H14M12,8C12,9.1 12.9,10 14,10H17.59L12,4.41V8M7,3H12L19,10V19C19,20.66 17.66,22 16,22H7C5.34,22 4,20.66 4,19V6C4,4.34 5.34,3 7,3Z' /%3E%3C/svg%3E") center no-repeat;
		background-size: 1em;
		display: inline-block;
		width: 1.25rem;
		height:1.5rem;
	}
	&.qq-upload-success {
		grid-template-columns: 1.25rem auto auto;
	}
	.qq-upload-size {
		min-width: fit-content;
		text-align: right;
	}
	.qq-upload-failed-text {
		grid-column: 2 / span 2;
	}
}
		
#mediamanager__page .qq-upload-list li input[type="text"] {
	font-family: @ini_mono_fonts;
	font-size: @ini_alt_font_size;
	background-color: transparent;
	border: 1px solid transparent;
	padding: .25em;
	border-radius: 1.5pt;
}
#mediamanager__page .qq-upload-list li input[type="text"]:focus {
	border-color: @ini_border;
}

.qq-uploader .error {
	color: #f00;
	background-color: #fff;
}

/* select file button */

.qq-upload-button,
#mediamanager__upload_button {
	display: inline-block;
	text-decoration: none;
	font-size: 1rem;
	cursor: pointer;
	margin: 1px 1px 5px;
	padding: 2pt 20pt;
	border: none 0;
	color: #FFF;
	cursor: pointer;
}
.qq-upload-button {
	background-color: #15395B;
}
#mediamanager__upload_button {
	background-color: #B71C1C;
	padding: .4rem 2.5rem;
}

.qq-upload-button-focus {
	outline: 1px dotted;
}

/* drop area */
.qq-upload-drop-area {
	background: @ini_background_neu;
	color: @ini_text_neu;
	text-align: center;
}

.qq-upload-drop-area span {
	padding: 2em .5em;
}

.qq-upload-drop-area-active {
	position: fixed;
	top: 0; left: 0;
	width: 100vw;
	height: 100vh;
	min-height: 70px;
	background: fadeout(@ini_background_alt, 10%);;
	z-index: 99;
}
.qq-upload-drop-area-active span {
	display: block;
	position: absolute;
	top: 50%;
	width: 100%;
	margin-top: -8px;
	font-size: 120%;
	color: #15395B;
}
/* list of files to upload */

div.qq-uploader ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.qq-uploader li {
	margin: 0 0 5px;
	color: @ini_text;
}

.qq-uploader li span,
.qq-uploader li input,
.qq-uploader li a {
	margin-right: 5px;
}

.qq-upload-file {
	display: block;
	font-weight: bold;
}

.qq-upload-spinner {
	display: inline-block;
	background: url("../../images/throbber.gif");
	width: 15px;
	height: 15px;
	vertical-align: text-bottom;
}

.qq-upload-size {
	font-size: 85%;
}
.qq-upload-cancel {
	font-size: 1rem;
	line-height: 1.25;
	width: 1em; height: 1.5em;
	overflow: hidden;
}
.qq-upload-cancel::before {
	content: '';
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' style='fill:%23A00' /%3E%3C/svg%3E") center no-repeat;
	background-size: 1em;
	display: inline-block;
	width: 1em;
	height: 1.5em;
}

.qq-upload-failed-text {
	display: none;
}
.qq-upload-fail .qq-upload-failed-text {
	display: inline;
}

.qq-action-container * {
	vertical-align: middle;
}
.qq-overwrite-check input {
	margin-left: 10px;
}

/* media tree overrides */
#media__tree ul li div.li {
	display:	grid;
}
#mediamanager__page .ui-resizable-e {
	background-color: #EEE;
}

/* dark mode overrides */
@media (prefers-color-scheme: dark) {

	body.darkmode {
		.qq-upload-button {
			background-color: #1976D2;
		}
		
		.qq-upload-drop-area {
			background: @ini_background_neu_dark;
			color: @ini_text_neu_dark;
		}

		.qq-upload-drop-area-active {
			background: fadeout(@ini_background_alt_dark, 10%);;
		}
		.qq-upload-drop-area-active span {
			color: #1976D2;
		}

		#mediamanager__page .qq-upload-list {
			li::before {
				filter: invert(.9);
			}
			li input[type="text"] {	
				color: @ini_text_dark;
			}
			li input[type="text"]:focus {
				border-color: @ini_border_dark;
			}
			.qq-upload-size {
				color: @ini_text_dark;
			}
			.qq-upload-cancel::before {
				filter: brightness(1.5);
			}

		}
	}
}