/**
 * This file provides styles for the media manager popup
 * (mediamanager.php).
 */

/*____________ structure ____________*/

html.popup {
	overflow: auto;
}

#media__manager {
	height: 100%;
	overflow: hidden;
}

#mediamgr__aside {
	width: 30%;
	height: 100%;
	overflow: auto;
	position: absolute;
	left: 0;
	border-right: 1px solid @ini_border;
}
[dir=rtl] #mediamgr__aside {
	left: auto;
	right: 0;
	border-right-width: 0;
	border-left: 1px solid @ini_border;
}
#mediamgr__aside .pad {
	padding: .5em;
}

#mediamgr__content {
	width: 69.7%;
	height: 100%;
	overflow: auto;
	position: absolute;
	right: 0;
}
[dir=rtl] #mediamgr__content {
	right: auto;
	left: 0;
}
#mediamgr__content .pad {
	padding: .5em;
}

#media__manager h1,
#media__manager h2 {
	font-size: 1.5em;
	margin-bottom: .5em;
	padding-bottom: .2em;
	border-bottom: 1px solid @ini_border;
}

/* left side
********************************************************************/

/*____________ options ____________*/

#media__opts {
	margin-bottom: .5em;
}

#media__opts input {
	margin-right: .3em;
}
[dir=rtl] #media__opts input {
	margin-right: 0;
	margin-left: .3em;
}
#media__opts label {
}

/*____________ tree ____________*/

#media__tree ul {
	padding-left: .2em;
}
[dir=rtl] #media__tree ul {
	padding-left: 0;
	padding-right: .2em;
}
#media__tree ul li {
	clear: left;
	list-style-type: none;
	list-style-image: none;
	margin-left: 0;
}
[dir=rtl] #media__tree ul li {
	clear: right;
	margin-right: 0;
}
#media__tree ul li img {
	float: left;
	padding: .5em .3em 0 0;
}
[dir=rtl] #media__tree ul li img {
	float: right;
	padding: .5em 0 0 .3em;
}
#media__tree ul li div.li {
	display: inline;
}
#media__tree ul li li {
	margin-left: 1.5em;
}
[dir=rtl] #media__tree ul li li {
	margin-left: 0;
	margin-right: 1.5em;
}

/* right side
********************************************************************/

/*____________ upload form ____________*/

/* upload info */
#media__content div.upload {
	font-size: .9em;
	margin-bottom: .5em;
}

#mediamanager__uploader {
	margin-bottom: 1em;
}
#mediamanager__uploader p {
	margin-bottom: .5em;
}

/*____________ file list ____________*/

#media__content img.load {
	margin: 1em auto;
}

#media__content .odd,
#media__content .even {
	padding: .5em;
}
#media__content .odd {
	background-color: @ini_background_alt;
}
#media__content .even {
}
/* highlight newly uploaded or edited file */
#media__content #scroll__here {
	border: 1px dashed @ini_border;
}

/* link which inserts media file */
#media__content a.mediafile {
	margin-right: 1.5em;
	font-weight: bold;
	cursor: pointer;
}
[dir=rtl] #media__content a.mediafile {
	margin-right: 0;
	margin-left: 1.5em;
}
#media__content span.info {
}
#media__content img.btn {
	vertical-align: text-bottom;
}

/* info how to insert media, if JS disabled */
#media__content div.example {
	color: @ini_text_neu;
	margin-left: 1em;
}

#media__content div.detail {
	padding: .2em 0;
}
#media__content div.detail div.thumb {
	float: left;
	margin: 0 .5em 0 18px;
}
[dir=rtl] #media__content div.detail div.thumb {
	float: right;
	margin: 0 18px 0 .5em;
}
#media__content div.detail div.thumb a {
	display: block;
	cursor: pointer;
}
#media__content div.detail p {
	margin-bottom: 0;
}


/*____________ media search ____________*/

#dw__mediasearch {
}
#dw__mediasearch p {
}
#dw__mediasearch label {
	width: 100%;
}
#dw__mediasearch label span {
	display: block;
}
#dw__mediasearch input[type="text"] {
	background-color: @ini_background;
	color: @ini_text;
	border: @ini_border solid 1px;
	font-family: @ini_mono_fonts;
	font-size: @ini_alt_font_size;
	padding: .15em; margin: 0 .25rem;
	width: ~"calc(100% - 1.25rem)";
}
#dw__mediasearch button {
	background-color: #004D40;
	color: #FFF;
	padding: .25rem 1rem;
	border: transparent none 0;
	cursor: pointer;
	font-size: 1rem;
    margin-top: .5em;
}

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

	body.darkmode {
		#media__content .odd {
			background-color: @ini_background_dark;
		}

		#dw__mediasearch input[type="text"] {
			background-color: @ini_background_site_dark;
			color: @ini_text_dark;
			border-color: @ini_border_dark;
		}
	}
}