@import "splitspanes";
@import "pane";
@import "views";
@import "assets";
@import "behavior";
@import "bottom-bar";

.editor {
	display: flex;
	flex: 1;
	flex-direction: column;

	.tool-bar {
		display: flex;
		align-items: center;
		background-color: $--pane-background-color;
		margin-bottom: 1px;
		padding: 5px 10px;
		font-size: 13px;
		justify-content: space-between;

		.menu {
			flex: 1;
			display: flex;

			.menu-item + .menu-item {
				margin-left: 10px;
			}
		}

		.right-part {
			color: $--color-text-regular;
			line-height: 15px;
		}
	}

	.pane-container {
		flex: 1;
		height: 0;
	}
}

.toolbar {
	background-color: $--pane-background-color;
}

.package-list{
	display: flex;
	flex-direction: column;

	.list {
		display: flex;
		flex-direction: column;
		flex: 1;

		margin-bottom: 5px;

		.item + .item {
		}

		.item {
			display: flex;
			align-items: center;
			padding-top: 5px;

			&:hover {
				& > .delete-button {
					visibility: visible;
				}
			}

			&:nth-child(odd){
				background-color: #FAFAFA;
			}
		}
	}
}

.mapping-list {
	display: flex;
	flex-direction: column;

	.add-button {
		align-self: flex-start;
	}

	.bottom-bar {
		align-self: flex-end;
	}

	.list {
		display: flex;
		flex-direction: column;
		flex: 1;

		margin: 5px 0;

		.item + .item {
			margin-top: 5px;
		}

		.item {
			display: flex;
			align-items: center;

			&:hover {
				& > .delete-button {
					visibility: visible;
				}
			}

			.el-icon-connection {
				padding: 0 5px;
			}

			.delete-button {
				margin-left: 5px;
				visibility: hidden;
			}
		}
	}

}

.package-manager {
	.item {
		border-bottom: 1px solid $--border-color-base;
		padding-bottom: 5px;

		.update-time {
			margin-right: 5px;
		}

		.version-select {
			//width: 80px;

		}
	}
}

.package-version-list {
	padding-right: 10px;

	.item {
		border-bottom: 1px solid $--border-color-base;
		padding: 2px;

		.use-checkbox {
			margin-right: 5px;
		}

		.version {
			font-weight: bold;
			float: left;
		}

		.update-time {
			float: right;
		}

		.remark {
			font-size: 12px;
		}
	}
}

.version-select-popover {
	.version-label {
		float: left;
	}

	.version-notice {
		float: right;
		color: $--color-warning;
		font-size: 13px;
	}
}

.string-input-container {
	flex: 1;
	height: 28px;
}

.details-dialog {
	.operate-bar {
		display: flex;
		justify-content: flex-end;
		padding: 5px;
	}

	.tabs {
		height: 100%;
		display: flex;
		flex-direction: column;

		.el-tabs__content {
			flex: 1;

			& > div {
				height: 100%;
			}
		}
	}

	.project-scrollbar {
		height: 100%;

		.project-editor {
			height: 100%;

			form {
				height: 100%;
				display: flex;
				flex-direction: column;

				.tpl-editor {
					flex: 1;
					height: 0;

					.el-form-item__content {
						height: 100%;

						.editor {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	}

	.scrollbar {
		height: 100%;

		.view {
			padding-right: 10px;

			.custom-module-list {
				display: flex;
				flex-direction: column;

				.item + .item {
					margin-top: 5px;
				}
			}
		}
	}
}

.mock-editor-dialog {
	.mock-editor-view {
		height: 100%;
		display: flex;
		flex-direction: column;

		.enabled-switch {
			align-self: flex-end;
		}

		.add-button {
			align-self: flex-start;
		}

		.mock-table {
			flex: 1;
		}

		.editor {
			width: 100%;
			height: 300px;
		}
	}
}

.px-skin-editor-dialog {
	.wrapper {
		padding: 10px;
		height: 100%;
		display: flex;
		flex-direction: column;

		.header{
			display: flex;
			align-items: center;

			.env-select{
			}

			.px-project-name{
				margin-left: 10px;
				font-weight: bold;
				color: $--color-danger;
			}
		}

		.operate-wrapper > :not(*:first-child) {
			margin-left: 10px;
		}
	}

	.popover-px-config {
		margin-left: 10px;

	}
}

.px-skin-editor {

	.wrapper {
		height: 50vh;

		.form {
			height: 100%;
			display: flex;
			flex-direction: column;

			.el-form-item--mini.el-form-item {
				margin-bottom: 20px;
			}

			.editor-form-item {
				flex: 1;
				height: 0;

				.el-form-item__content {
					height: 100%;

					.editor {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

	}

	.dialog-footer{
		.save-button{
			margin-left: 10px;
		}
	}
}

.px-publish-view {
	display: flex;
	flex-direction: column;

	.px-project-name{
		font-weight: bold;
		color: $--color-danger;
	}

	.operate-bar{
		display: flex;

	}

	.name {
		display: inline-block;
		width: 200px;
	}
}

.meta-search-dialog {
	.wrapper{
		padding: 10px;
		height: 50vh;
		display: flex;
		flex-direction: column;

		.inputs{
			display: flex;
			align-items: center;
			margin-bottom: 5px;

			.input-keyword{
				flex: 1;
				margin-right: 5px;
			}
		}

		.scrollbar{
			flex: 1;
		}
	}
}

.dialog-footer {
	display: flex;
	justify-content: space-between;
}

.props-editor-dialog {
	.scrollbar {
		height: 40vh;

		.scrollbar-view {
			padding-right: 10px;
			padding-bottom: 10px;
		}
	}
}

.events-details-dialog {
	.scrollbar {
		height: 40vh;

		.collapse {
			margin-right: 10px;

			.group {
				margin-left: 10px;

				.data-item {
					max-width: 300px;
					display: flex;
					justify-content: space-between;
				}

				.data-item + .data-item {
					margin-top: 5px;
				}
			}
		}
	}
}

.code-sync-serve-dialog {
	.dialog-footer {
		.status {
			font-size: 14px;
			color: $--color-text-primary;
		}
	}
}

.missing-packages-dialog {
	.wrapper {
		height: 50vh;
		display: flex;
		flex-direction: column;

		.list {
			flex: 1;
			height: 0;
		}
	}
}

.pack-manager-dialog {
	.scrollbar {
		height: 50vh;

		.popover-publish {
			//margin-right: 10px;
		}

		.operate-wrapper > :not(*:first-child) {
			margin-left: 10px;
		}
	}

	.popover-px-config {
		margin-left: 10px;

	}
}

.project-x-config {
	.input {
		flex: 1;
	}

	.bottom-bar {
		display: flex;
		justify-content: space-between;
		margin-top: 10px;
	}
}

.pack-failed-details{
	width: 80vw !important;
}

.code-conflict-resolve-editor{
	.wrapper{
		height: 100%;
		padding: 10px;
		flex: 1;
		display: flex;
		flex-direction: column;

		.container {
			flex: 1;

			.editor{
				height: 100%;
			}
		}
	}
}

.project-conflict-resolve-editor{
	.wrapper{
		height: 50vh;
		padding: 10px;
		display: flex;
		flex-direction: column;

		.category-tab{
			flex: 1;

			.el-tabs__content{
				height: 100%;
			}
		}

		.compare-view{

		}
	}
}

.remote-change-class {
	background-color: rgba(64, 200, 174, 0.2);
}

.remote-change-marker-class {
	background-color: rgba(64, 200, 174, 0.5);
}

.local-change-class {
	background-color: rgba(64, 166, 255, 0.2);
}

.local-change-marker-class {
	background-color: rgba(64, 166, 255, 0.5);
}

.project-remark-dialog{
	.wrapper{
		height: 100%;

		.editor{
			height: 100%;
		}

		.project-scrollbar{
			height: 100%;

			.project-remark{
				padding: 5px;
			}
		}
	}
}
