/**
 * 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 1rem;
	grid-gap: 5px;
	align-items: center;
}
#mediamanager__page .qq-upload-list li::before {
	content: '\1F5CE';
	color: @ini_text;
	font-size: 1.25rem;
	display: inline-block;
	width: 1.25rem;
	height:1.5rem;
	text-align: right;
}

#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: '\1F5D9';
	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 {
				color: @ini_text_dark;
			}
			li input[type="text"] {	
				color: @ini_text_dark;
			}
			li input[type="text"]:focus {
				border-color: @ini_border_dark;
			}
			
		}
	}
}