@import "./theme";

.mfunsPlayer-danmaku-auxiliary {
	font-size: 12px;
	user-select: none;
	* {
		box-sizing: content-box;
	}
	.mfunsPlayer-danmaku-list-panel {
		height: 100%;

		.list-row {
			position: relative;
			line-height: 24px;
			height: 24px;
			white-space: nowrap;
		}
		.mfunsPlayer-danmaku-list-head {
			@extend .list-row;
			box-shadow: 1px 0px 2px #ccc;
			:hover {
				background-color: rgba($light-grey, 0.2);
			}
		}
		.mfunsPlayer-danmaku-list-container .list-row {
			&:hover{
				background-color: rgba($light-grey, 0.2);
				.list-operations {
					display: block;
				}
				.col-date {
					visibility: hidden;
				}
			}
			&[data-mode="7"] {
				background-color: rgba(#FF9900, 0.05);
				&:hover{
					background-color: rgba(#FF9900, 0.1);
				}
			}
		}
		.list-column,
		.list-cell {
			display: inline-block;
			height: 100%;
			padding: 0 4px;
			overflow: hidden;
			&.col-time {
				padding-left: 8px;
				width: 40px;
			}
			&.col-date {
				padding-right: 8px;
				width: 90px;
				text-align: center;
			}
			&.col-text {
				width: calc(100% - 162px);
				text-overflow: ellipsis;
				white-space: overflow;
			}
		}
		.list-operations {
			position: absolute;
			right: 0;
			top: 0;
			padding-right: 8px;
			width: 100px;
			height: 100%;
			display: none;
			text-align: right;
			.list-action {
				cursor: pointer;
				margin-left: 4px;
			}
		}
		.mfunsPlayer-danmaku-list-wrap {
			position: relative;
			overflow: hidden;
			width: 100%;
			height: calc(100% - 40px);
			.mfunsPlayer-danmaku-list-container {
				overflow: hidden;
				position: absolute;
				overflow-y: auto;
				scrollbar-width: thin;
				top: 24px;
				left: 0;
				width: 100%;
				height: calc(100% - 24px);
				&::-webkit-scrollbar {
					width: 5px;
				}
				&::-webkit-scrollbar-thumb {
					background-color: $text-grey;
				}
			}
			.mfunsPlayer-danmaku-list-status {
				position: absolute;
				top: 50%;
				width: 100%;
				div {
					text-align: center;
					display: none;
					color: $text-grey;
				}
				&.status-loading {
					.status-loading-text {
						display: block;
					}
				}
				&.status-failed {
					.status-failed-text {
						display: block;
					}
				}
				&.status-empty {
					.status-empty-text {
						display: block;
					}
				}
			}
		}
		.mfunsPlayer-danmaku-list-autoscroll {
			cursor: pointer;
		}
	}
	.mfunsPlayer-ade-panel {
		height: 100%;
		.mfunsPlayer-ade-wrap {
			height: calc(100% - 40px);
			padding: 0 8px;
			display: none;
			&.mfunsPlayer-ade-pos {
				padding-right: 0;
			}
		}
		.mfunsPlayer-ade-mode-selector span {
			cursor: pointer;
		}
		&.mode-pos {
			.mfunsPlayer-ade-pos {
				display: block;
			}
			.label-pos {
				color: $text-black;
				font-weight: bold;
			}
		}
		&.mode-script {
			.mfunsPlayer-ade-script {
				display: block;
			}
			.label-script {
				color: $text-black;
				font-weight: bold;
			}
		}
		&.mode-json {
			.mfunsPlayer-ade-json {
				display: block;
			}
			.label-json {
				color: $text-black;
				font-weight: bold;
			}
		}
		.mfunsPlayer-ade-head {
			height: 30px;
			line-height: 30px;
			font-weight: bold;
		}
		.mfunsPlayer-ade-prebox-container {
			position: relative;
			height: calc(100% - 70px);
			border: 1px solid $light-grey;
			border-radius: $theme-border-radius;
			.mfunsPlayer-ade-prebox {
				width: 100%;
				height: 100%;
				position: absolute;
				.cm-editor {
					height: 100%;
				}
			}
		}
		.mfunsPlayer-ade-body {
			position: relative;
			height: calc(100% - 68px);
			.mfunsPlayer-ade-pos-editor {
				width: 100%;
				height: 100%;
				position: absolute;
				overflow-y: scroll;
			}
		}
		.mfunsPlayer-ade-foot {
			margin-top: 6px;
			height: 24px;
			user-select: none;
			.mfunsPlayer-ade-button {
				cursor: pointer;
				height: 22px;
				line-height: 22px;
				padding: 0 5px;
				display: inline-block;
				border-radius: $theme-border-radius;
				border: 1px solid $text-grey;
				color: $text-grey;
			}
			.mfunsPlayer-ade-emit {
				border: 1px solid $theme-color;
				color: $theme-color;
			}
		}
	}
	.mfunsPlayer-danmaku-auxiliary-foot {
		display: flex;
		align-items: center;
		height: 40px;
		justify-content: space-between;
		box-sizing: border-box;
		border-top: 1px solid #e7e7e7;
		padding: 0 8px;
		color: $text-grey;
	}
}