homebrewery/client/homebrew/editor/metadataEditor/metadataEditor.less

.metadataEditor{
	position         : absolute;
	z-index          : 10000;
	box-sizing       : border-box;
	width            : 100%;
	padding          : 25px;
	background-color : #999;
	.field{
		display       : flex;
		width         : 100%;
		margin-bottom : 10px;
		&>label{
			display        : inline-block;
			vertical-align : top;
			width          : 80px;
			font-size      : 0.7em;
			font-weight    : 800;
			line-height    : 1.8em;
			text-transform : uppercase;
			flex           : 0 0 auto;
		}
		&>.value{
			flex           : 1 1 auto;
			min-width      : 200px;
		}
		&.thumbnail{
			height      : 1.4em;
			label{
				line-height: 2.0em;
			}
			.value{
  				overflow: hidden;
  				text-overflow: ellipsis;
			}
			button{
				border: 1px solid #999;
				color: white;
				padding: 0px 5px;
				background-color: black;
				&:hover{
					background-color: #777;
				}
			}
			.thumbnail-preview{
				position    : relative;
				width       : 80px;
				height      : min-content;
				border      : 2px solid white;
				margin-left : 5px;
				max-height  : 115px;
			}
		}
	}
	.description.field textarea.value{
		resize      : none;
		height      : 5em;
		font-family : 'Open Sans', sans-serif;
		font-size   : 0.8em;
	}
	.systems.field .value{
		label{
			vertical-align : middle;
			margin-right   : 15px;
			cursor         : pointer;
			font-size      : 0.7em;
			font-weight    : 800;
			user-select    : none;
			white-space    : nowrap;
			display        : inline-flex;
			align-items    : center;
		}
		a {
			font-size   : 0.7em;
			font-weight : 800;
			display     : inline-flex;
		}
		input{
			vertical-align : middle;
			cursor         : pointer;
			margin         : 3px;
		}
	}
	.publish.field .value{
		position : relative;
		margin-bottom: 15px;
		button{
			width:100%;
		}
		button.publish{
			.button(@blueLight);
		}
		button.unpublish{
			.button(@silver);
		}
		small{
			font-size  : 0.6em;
			font-style : italic;
		}
	}

	.delete.field .value{
		button{
			.button(@red);
		}
	}
	.authors.field .value{
		font-size: 0.8em;
		line-height    : 1.5em;
	}

	.tags.field .list {
		display   : flex;
		flex-wrap : wrap;

		>* {
			flex : 0 0 auto;
		}

		.badge {
			background-color : #444;
			border-radius    : .5em;
			color            : white;
			font-size        : .9em;
			margin           : 2px;
			padding          : .3em;

			i.fa-times {
				cursor: pointer;
			}
		}

		.value {
			width     : 7.5vw;
			min-width : 75px;
		}
	}
}