// -*- less-css-compile-at-save: t -*-

//
// mediaclue Styles
//

@mainMenuWidth: 150px;
@sideMenuWidth: 250px;

@dimensionThumbnail: 85px;
@dimensionSmall: 150px;
@dimensionMedium: 350px;
@dimensionLarge: 800px;
@dimensionXlarge: 1200px;
@dimensionPdfslideshow: 1400px;

@colorYellow: #f9b200;
@colorBlue: #0099FF;
@colorBlueDark: #1f8dd6;
@colorFormRequired: #eff;
@colorError: red;
@colorSuccess: lightgreen;
@colorWarning: #fe0;

@import "/lib/webbase/lib/styles.less";

@import "/lib/fontawesome-free-5.11.2-web/less/fontawesome.less";
@import "/lib/fontawesome-free-5.11.2-web/less/solid.less";

@import "/lib/selectize/less/selectize.default.less";
@import "/lib/selectize/less/plugins/remove_button.less";

// @fa-font-path: "lib/fontawesome-free-5.11.2-web/webfonts";

// Zahlen synchron mit pure.css
// Maximum der Screenbreiten:
@screenWidthSm: 48em;
@screenWidthMd: 64em;
@screenWidthLg: 80em;
// @screenWidthXl: 48em;

/* pure-hidden-sm */
@media screen and (max-width:@screenWidthSm) {
    .pure-visible-md{display:none}
    .pure-visible-lg{display:none}
    .pure-visible-xl{display:none}
    .pure-hidden-sm{display:none}

		.pure-u-0-1 {
				width: 0;
				display: none;
		}

}
/* pure-hidden-md */
@media screen and (min-width:@screenWidthSm) and (max-width:@screenWidthMd) {
    .pure-visible-sm{display:none}
    .pure-visible-lg{display:none}
    .pure-visible-xl{display:none}
    .pure-hidden-md{display:none}

		.pure-u-md-0-1 {
				width: 0;
				display: none;
		}

}
/* pure-hidden-lg */
@media screen and (min-width:@screenWidthMd) and (max-width:@screenWidthLg) {
    .pure-visible-sm{display:none}
    .pure-visible-md{display:none}
    .pure-visible-xl{display:none}
    .pure-hidden-lg{display:none}

		.pure-u-lg-0-1 {
				width: 0;
				display: none;
		}

}
/* pure-hidden-xl */
@media screen and (min-width:@screenWidthLg) {
    .pure-visible-sm{display:none}
    .pure-visible-md{display:none}
    .pure-visible-lg{display:none}
    .pure-hidden-xl{display:none}

		.pure-u-xl-0-1 {
				width: 0;
				display: none;
		}

}

// @media (hover: hover) {
// 		.hoverArea {
// 				&:hover {
// 						.hideIfHoverable {
// 								visibility: visible;
// 						}
// 				}
// 				.hideIfHoverable {
// 						visibility: hidden;
// 				}
// 		}
// }

.scrollbar() {
		@scrollbarBG: #CFD8DC;
		// @thumbBG: #90A4AE;
//		@scrollbarBG: @colorBlueDark;
		@thumbBG: @colorYellow;
		
		scrollbar-width: thin;
		scrollbar-color: @thumbBG @scrollbarBG;

		&::-webkit-scrollbar {
				width: 11px;
		}
		&::-webkit-scrollbar-track {
				background: @scrollbarBG;
		}
		&::-webkit-scrollbar-thumb {
				background-color: @thumbBG;
				border-radius: 6px;
				border: 3px solid @scrollbarBG;
		}
}

.truncateWithEllipsis() {
		text-overflow: ellipsis;

		/* Required for text-overflow to do anything */
		white-space: nowrap;
		overflow: hidden;		
}

html {
		min-height: 100vh;
}

body {
		.scrollbar();
		
    color: #777;
		min-height: 100vh;
		
		&.development {
				div.wa-toolbar {
						z-index: 999999;
				}
		}
}


.anchor(){
		text-decoration: none;
		color: @colorBlueDark;

		&:hover {
				text-decoration: underline;
		}

		i.icon {
				margin-right: 0.2em;
		}

}

a {
		.anchor();

}

div.flashMessages, div.flashErrorMessages {
		width: 50%;
		margin: 0.5em auto;
}

div.demoMessage {
		.alertSuccess();
		padding-left: 2em;
}

div.WEBLightbox {
		h4 {
				margin: 0;
				padding-bottom: 0.5em;
				border-bottom: 1px solid silver;
		}
}

// label {
// 		font-weight: bold;
// }

div.footer {
		position: absolute;
		bottom: 0.5em;
//		margin-top: 4em;
		padding-left: 3px;
		font-size: 70%;

		a {
				color: inherit;
		}
}

ul.errors, div.validationResults {
		padding-top: 0.5em;
		padding-bottom: 0.5em;
		margin-top: 0.5em;
		margin-bottom: 0.5em;
		background-color: @colorError;
		color: white;
		&, ul {
				padding-left: 0.1em;
				list-style-type: none;
		}
}

div.dialogButtons {
		margin-top: 1em;
}

.noWrap {
		white-space: nowrap;
}

.alertDanger {
		background-color: #fee;
		margin: 1em 0;
		padding: 1em;
}

.alertWarning {
		background-color: @colorWarning;
		margin: 0.3em 0;
		padding: 0.3em;
}

.alertSuccess {
		background-color: @colorSuccess;
		margin: 0.3em 0;
		padding: 0.3em;
}

.labelDanger {
		background-color: @colorError;
		margin: 0.1em 0;
		padding: 0.1em;
}

.labelWarning {
		background-color: @colorWarning;
		margin: 0.1em 0;
		padding: 0.1em;
}

.labelSuccess {
		background-color: @colorSuccess;
		margin: 0.1em 0;
		padding: 0.1em;
}


.highlight {
		background-color: #eee;
}

// Brauchts anscheinend, damit die Breite voll wird
div:-webkit-full-screen {
  width: 100%;
  height: 100%;
}

.pure-button {
		i.icon {
				margin-right: 0.5em;
		}
}

.topBuffer {
		margin-top: 1em;
}

.bottomBuffer {
		margin-bottom: 1em;
}

table {
		&.pure-table {
				background-color: #eee;
				border-left: none;
				border-right: none;

				&.properties {
						width: 100%;
						margin-top: 1em;
						margin-bottom: 1em;

						ul {
								margin: 0;
								padding: 0;
								list-style-type: none;
						}
				}
				
				td, th {
						text-align: left;
						vertical-align: top;
						padding: 0.3em 0.3em 0 2px;
						border-left: none;
						border-right: none;
				}
				
		}
}

div.backButton {
		background-color: @colorYellow;
		display: inline-block;
		color: white;
		padding: 0.2em 0.4em;

		a.backButtonAnchor {
				color: white;
		}

		span.backButtonLabel {
				margin-left: 0.3em;
		}
}

.actionClick {
		.anchor();
		cursor: pointer;
}

.muted {
		color: #999;
}

.float-right {
		float: right;
}

// Add transition to containers so they can push in and out.
.transition() {
    transition: all 0.2s ease-out;
}


// This is the parent `<div>` that contains the menu and the content area.
#layout {
		.transition();

    position: relative;
    left: 0;
//    padding-left: 0;
		overflow-x: hidden;
    padding-left: @mainMenuWidth;
		min-height: 100%;

}


// The content `<div>` is where all your content goes.
.content {
    // Keine gute Idee, bei kleinen Schriften weiter unten ist dies dann nicht mehr proportional: line-height: 1.6em;
		line-height: 120%;
}

div.MEDMainComponentBase {
		min-height: 100vh;
}

#main {
	  padding-bottom: 50px;
		position: relative;
		min-height: 100vh;

		// Hauptelement
		> div.MEDComponent, > form > div.MEDComponent {
		//		min-height: 100vh;
				
				> div.header {
						.truncateWithEllipsis();
						
						margin-top: 0;
						border-bottom: 5px solid @colorYellow;
						
						h1 {
								font-size: 2em;
						}

						// h2 {
						// 		font-weight: 300;
						// 		color: #ccc;
						// 		padding: 0;
						// 		margin-top: 0;
						// }
				}
		}
}

.header {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    color: #333;
    border-bottom: 2px solid @colorYellow;
		
    h1 {
        margin: 0.2em 0;
        font-size: 1.8em;
        font-weight: 300;
    }
    h2 {
        font-weight: 300;
        color: #ccc;
        padding: 0;
        margin-top: 0;
    }
}

h2.contentSubhead {
    margin: 1em 0 0.5em 0;
    font-weight: semi-bold;
    color: @colorBlue;
}




// The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
// appears on the left side of the page.

.menu(@foreground, @background) {
		.transition();

    z-index: 1000;
    background: @background;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
		box-sizing: border-box;
    
    // All anchors inside the menu should be styled like this.
    .textual() {
				.truncateWithEllipsis();
        border: none;
        padding: 0.6em 0 0.6em 0.6em;
    }

		a.pure-menu-link {
				.textual();
        color: @foreground;
		}

    // This styles the menu heading.
    .pure-menu-heading {
				.textual();
        font-size: 110%;
        color: #fff;
        margin: 0;
    }
		
    // Remove all background/borders, since we are applying them to #menu.
    .pure-menu {
				ul {
						li {
								a {
										&:hover, &:focus {
												background: #333;
										}
								}

								&.menu-item-divider {
										border-top: 1px solid #333;
								}
						}
				}
		}

    
    // This styles the selected menu item `<li>`.
    .pure-menu-selected,
    .pure-menu-heading {
        background: @colorBlueDark;
    }
    
    // This styles a link within a selected menu item `<li>`.
    .pure-menu-selected a {
        color: #fff;
    }

    

		.pure-menu-title {
				.textual();
//				border-bottom: 1px solid #666;
        color: @background;
				background-color: @foreground;
		}
}

#mainMenu {
		.menu(#999, #191818);
    position: fixed;
    top: 0;
    bottom: 0;
    width: @mainMenuWidth;
    left: 0;

		img.logo {
				margin-right: 0.2em;
//				padding: 0.2em;
//				background-color: white;
		}
}

#sideMenu {
		.menu(#999, white);
    width: @sideMenuWidth;
    right: 0;
		top: 0;
    position: absolute;
		//float: none;
//		margin-right: 0;				
//		margin-right: -@sideMenuWidth;				

		
		.pure-menu {
				border-left: 1px solid grey;
				border-bottom: 1px solid grey;
		}

		div.MEDClipboardViewer {
				div.clipboardArea {
						font-size: 75%;
//						color: whitesmoke;
						background-color: whitesmoke;
						padding: 5px;
						margin: 0;
						// div.title {
						// 		color: whitesmoke;
						// }
						
				}
		}
}


// -- Dynamic Button For Responsive Menu -------------------------------------


// The button to open/close the Menu is custom-made and not part of Pure. Here's
// how it works:


// `.menu-link` represents the responsive menu toggle that shows/hides on
// small screens.
.menuLink() {
		.transition();

    position: fixed;
    display: none; /* show this only on small screens */
    top: 0;
		color: white;
    background: #000;
    font-size: 1em; /* change this value to increase/decrease button size */
    z-index: 10;
    width: 2em;
//    height: 1.5em;
    padding: 0.5em 0.2em;
		text-align: center;


}

#sideMenuLink {
		.menuLink();
    right: 0;
}

#mainMenuLink {
		.menuLink();
    left: 0;
}


// -- Responsive Styles (Media Queries) -------------------------------------

#topBar {
    display: none;
}

.extraAir(@air) {
		
		#main {
				padding-top: @air;
				padding-left: @air;
				padding-right: @air;

				> div.MEDComponent {
						> div.header {
								padding-left: @air;
								padding-right: @air;
						}
						> div.content {
								padding-left: @air;
								padding-right: @air;
						}

				}

		}
		
}

// Ab Large (= ab Ende Medium) Bildschirmbreite
@media screen and (min-width: @screenWidthMd) {

		.extraAir(1em);
		
    // #mainMenu {
    //     left: 0;
    // }


		.withSideMenu {
				padding-right: @sideMenuWidth;
		}

		// #layout {
    //     padding-left: @mainMenuWidth;
		// }
		
}

// Medium Bildschirmbreiten
@media screen and (max-width: @screenWidthMd) {

		.extraAir(0.5em);

		// #mainMenu {
		// 		margin-left: -@mainMenuWidth;				
		// }



		#sideMenu {
				// position: absolute;
				// top: 0;
				// right: 0;
				// float: none;
				margin-right: -@sideMenuWidth;				
		}

		.withSideMenu {
				padding-right: 0;
		}

    #sideMenuLink {
        display: block;
    }

    // #sideMenuLink, #topBar {
    //     display: none;
    // }
		
		#layout {

        padding-left: @mainMenuWidth;
				
				&.sideMenuActive {

						#sideMenu {
								display: inherit;
								margin-right: 0;
						}

						#sideMenuLink {
								right: @sideMenuWidth;
						}
				}

				
		}
}

// *Zusätzlich* bei small Bildschirmbreiten
@media screen and (max-width: @screenWidthSm) {

		.extraAir(0.1em);
		
		#mainMenu {
				margin-left: -@mainMenuWidth;				
		}

		#mainMenuLink {
        display: block;
    }

		#topBar {
				display: block;
				padding: 0.2em;
				text-align: center;
				height: 2em;
		}

    .header,
    .content {
        padding-left: 3px;
        padding-right: 3px;
    }

		#layout {

        padding-left: 0;

				&.mainMenuActive {
						position: relative;
						left: @mainMenuWidth;

						#mainMenu {
								margin-left: 0;
						}

						#mainMenuLink {
								left: @mainMenuWidth;
						}
				}
				
		}
}

// =================================================================

div.grid.magritte {

		&.required {
				div.gridUnit.magritteControl {
						input[type=text], textarea, div.selectize-input {
								background-color: @colorFormRequired;
						}
				}
		}

		&.error {
				div.gridUnit.magritteLabel {
						color: @colorError;
				}
				div.gridUnit.magritteControl {
						background-color: @colorError;
				}
		}

		&.selectized {
				// Damit es nicht flasht. selectize.js macht es ohnehin klein
				select[multiple] {
						height: 1em;
						visibility: hidden;
				}
		}

		div.gridUnit.magritteLabel {
				font-weight: bold;
				box-sizing: border-box;
				padding: 0.2em 0;
		}
		div.gridUnit.magritteControl {
				box-sizing: border-box;
				padding: 0.2em;

				input[type=text], textarea {
						min-width: 20em;
				}

				ul {
						margin: 0;
						padding: 0;
						list-style-type: none;
				}
		}

		div.MEDMaTagListInputComponent {
				div.suggestedTags {
						margin-top: 0.5em;
						display: none;
				}
		}
}

div.MEDMediaSetViewer {

		@gridSpacing: 0.25em;
		
		// #sideMenu {
		// 		// width: @sideMenuWidth;
		// 		// float: right;
		// 		// right: 0;
		// 		// position: absolute;
		// 		// border-left: 1px solid grey;
		// }


		div.bulkSelection {
				float: right;
		}

		div.grid.medias {

				margin-left: -@gridSpacing;

				> div.gridUnit {
						box-sizing: border-box;
						padding: @gridSpacing;

						div.mediaContainer {
								box-sizing: border-box;
								//		background-color: #eee;


								div.noAccess {
										background-color: lightyellow;
										padding: 0.5em;
								}

								&:hover {
										background-color: whitesmoke;
								}
								
						}
						
						
						//						border: 1px solid #333;
						//						margin-bottom: 1em;
						
						// + div.gridUnit {
						// 		box-sizing: border-box;
						// 		padding-left: 1em;
						// }
				}
		}
}

div.MEDMediaSetEditor {

		div.inlineEditors {
				margin-top: 2em;
				margin-bottom: 1em;
				
				div.inlineEditor {
						margin: 0.5em 0;
						padding-top: 0.5em;
						border-top: 1px solid gray;
				}
		}

		div.bulkOperations {
				
				border: 1px solid silver;
				margin: 2em 0;
				padding: .35em .625em .75em;
											 
				div.label {
						font-weight: bold;
						margin-top: 1em;
						margin-bottom: 0.25em;
				}
		}
}

div.MEDMediaEditor {
		div.mediaPreview {
				margin-bottom: 1em;
		}
}

div.MEDMediaViewer {

		table.metaData {
				width: 100%;
				font-size: 75%;

				td.value {
						word-wrap: break-word;
						word-break: break-all;
				}
		}

		&.MEDAudioViewer {
				audio {
						margin: 0.5em 0;
						width: 100%;
				}
		}
}

div.mediaPreview {
		max-width: 100%;
		height: auto;
		box-sizing: border-box;
		&.sizeThumbnail {
				display: inline-block;
				width: @dimensionThumbnail;
		}
		&.sizeSmall {
				width: @dimensionSmall;
		}
		&.sizeMedium {
				width: @dimensionMedium;
		}
		&.sizeLarge {
				width: @dimensionLarge;
		}
		&.sizeXlarge {
				width: @dimensionXlarge;
		}
		&.sizePdfslideshow {
				width: @dimensionPdfslideshow;
		}
}


div.mediaContainer {
		box-sizing: border-box;
//		background-color: #eee;

		
		img.imagePreview {
				
		}

		div.mediaTitle {
				.truncateWithEllipsis();
				margin-bottom: 0.5em;
		}

		&.bigCard {
				height: 100%;
				padding: 0.5em;
				div.mediaPreview {
						// float: left;
						// margin-right: 0.5em;
				}

				div.gridUnit.mediaInfo {
						box-sizing: border-box;
						padding-left: 0.5em;
				}
		}

		&.simplePreview {
				position: relative;
				input.selectMedia {
						position: absolute;
						bottom: 0.2em;
						left: 0.2em;
				}
		}
}

div.MEDMyOverviewComponent {
		small.annotation {
				margin-top: 0.5em;
				margin-bottom: 0.25em;
				display: block;
		}
		
		div.mediaSetsList, div.searchQueriesList {
				div.mediaSetRow, div.searchQueryRow {
						background-color: #eee;
						margin-right: 1em;
						padding: 0 3px;
						border-bottom: 1px solid #ddd;
				}
		}

		div.mediaSetsGroup {
				div.mediaSetsList {
						display: none;
						margin-bottom: 1em;
				}
		}
}

div.MEDUploadCockpitComponent {
		div.uploadFilelist {
				.scrollbar();

				max-height: 10em;
//				width: 100%;
				overflow-y: auto;
				padding: 0.5em;
				margin: 1em auto;

				#pluploadFilelist {
						//				background-color: lightblue;
						//				padding: 1em 0;

						&:not(:empty) {
								border: 1px solid #aaa;
						}
						
						text-align: left;
						font-size: 65%;
						column-count: 3;
						margin: 0;
						padding: 1em;
						list-style-type: none;

						li {
								line-height: 1em;
								span.uploadStatus {
										color: green;
										white-space: nowrap;
								}
						}
				}
		}
		
		div.uploadDropzone {
//				min-height: 5em;
				background-color: #eee;
				border: 2px dashed black;
				text-align: center;
				padding: 1em;
				margin: 1em 0;

				&.inactive {
						border: none;
						div.dragDropMessage	{
								display: none;
						}
						&:hover {
								background-color: #eee;
						}
				}
				
				&:hover {
						background-color: yellow;
				}
		}

		div.existingMedias {
				div.mediaPreview.sizeThumbnail {
						width: 2em;
						display: inline-block;
						margin-right: 0.5em;
				}				
		}
		
		div.uploadedMedias {
				margin: 1em 0;

				span.mediaContainer.oneliner {
						display: block;
						margin-bottom: 0.5em;
				}
				
				div.mediaPreview.sizeThumbnail {
						width: 2em;
						display: inline-block;
						vertical-align: middle;
						margin-right: 0.5em;
				}
		}
}


div.MEDStandardSlideshowComponent {

		margin-top: 0.5em;
		
		background-color: black;

		position: relative;

		.fullscreen() {
				span.fullscreenLink {
						.muted();
				}
				div.slideshow {
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
						bottom: 0;
						div.slide {
								div.imgContainer {
//										position: relative;
										height: 100vh;
								}
						}
				}
				
		}

		// Muss separat sein, bug in less?
		&:-webkit-full-screen {
				.fullscreen();
		}
		
		&:fullscreen {
				.fullscreen();
		}

		
		span.fullscreenLink {
				position: absolute;
				left: 0.5em;
				top: 0.2em;
		}
		
		div.slideshow {
				margin: 0 5em;
				// height: 100%;

				div.slide {
						// text-align: center;
						// vertical-align: middle;

						&:focus {
								border: none;
								outline-style: none;
						}
						
						div.imgContainer {
								height: 80vh;
								padding: 0.5em;
								margin: 0;
								display: flex;
								align-items: center;
								justify-content: center;
								
								// display: inline-block;
								// margin: auto;
								img {
										max-width: 100%;
										max-height: 100%;
								}
						}
				}
		}
}

div.MEDLighttableSlideshowComponent {
//		background-color: black;
		div.gridUnit.lighttableImage {

				@pad: 0.3em;
				
				// background-color: black;
				box-sizing: border-box;
				position: relative;
				padding: @pad;

				@media(hover: hover) {
						div.imageTools {
								visibility: hidden;
						}
				}
				
				&:hover {
						div.imageTools {
								visibility: visible;
						}
				}
								
				div.imageTools {
//						visibility: hidden;
						font-size: 75%;
						width: 100%;
						position: absolute;
						bottom: @pad;
						padding-left: 0.5em;
						padding-right: 0.5em;
						background-color: rgba(255,255,255,0.8);

						a {
								.muted();
						}
				}		

				div.mediaContainer {
						box-sizing: border-box;
						background-color: black;
						padding: 1em 1em 1.5em 1em;
						height: 100%;
						margin: 0 auto;
						// text-align: center;

						div.mediaPreview {
								margin: 0 auto;
								
						}
				}
		}

}

div.MEDGalleriesComponentBase {

		table.galleries {
				margin-bottom: 1em;
		}
		
		// div.galleryContainer {
		// 		margin-top: 2em;
		// }

		div.MEDSlideshowComponentBase {
				.pure-button {
						font-size: 75%;
				}
		}

		div.MEDReportMisuseComponent {
				width: 60%;
				border: 1px solid silver;
				margin: 1em 0;
				padding: 0.5em;
		}
}

div.WEBLoginComponent {
		table.login {
				background-color: white;

				td {
						padding: 0.5em 0.5em 0.5em 0;
				}
		}
}

div.buttonToolbar {
		margin: 0.5em 0;
}

div.MEDSearchComponent {
		div.searchBar {
				margin: 0.5em 0;
				button.searchButton {
						margin-top: 0; // Wegen pure
				}
		}
		input.searchText {
				width: 99%;
				border-color: #333;
				// font-weight: bold;
		}
		div.searchTags {
				font-size: smaller;
				margin: 0.5em 0;
				div.tagsArea {
						background-color: whitesmoke;
						margin: 0.5em 0;
						a.tag {
								&.selected {
										background-color: yellow;
								}
						}
				}
		}
		
		fieldset.searchOptions {
				font-size: smaller;
				margin-top: 0.5em;
				padding: 0;

				legend {
						margin: 0;
						padding: 0;
				}

				label {
						display: inline-block;
						margin-right: 1em;
				}
		}
		div.searchResults {
				border-top: 1px solid grey;
				padding-top: 1em;

				div.mediaSets {
						margin-bottom: 1em;
				}


----
				
		}
}

.ui-sortable-handle {
		cursor: move;
}

div.MEDMediaSetSorter {
		div.gridUnit {
				&.media {
						background-color: silver;
						box-sizing: border-box;
						background-clip: content-box;
//						border: 1px solid black;
						padding: 0.3em;
						&:hover {
								background-color: whitesmoke;
						}

						div.mediaSummary {
								padding: 0.3em 0.6em;

								div.mediaPreview {
										margin: 1em 0;
								}
						}
				}

				&.mediaPlaceholder {
						background-color: green;
				}
		}
}

div.MEDPublicGalleriesComponent {
		padding: 0.5em;
}

div.MEDAdminComponent {
		div.adminMenu {
				a.active {
						color: green;
				}
		}
}
