/** Saturday, April 26, 2025. 仅为视频或图片播放器样式，依存文件：
	\js\player.js
	\cs\player.css
	\js\dialogBox.js
	\cs\dialogBox.css
	
	打开视频或图片播放器弹窗事件: player.openPlayerBox(sef);
	
	打开弹窗函数
	return dialogBox.open('Contents..');
	return dialogBox.open({
		dialogStyle: 'player',
		title: opt.title,
		content: opt.content,
		foot: {
			left: 'left',
			center: 'center',
			right: 'right',
		},
	});
*/
*, :after, :before {
    box-sizing: inherit;
}
div.player {/*960*540 960*492*/
	width:960px;
	min-height:540px;
	box-shadow: 5px 5px 21px #666;
}
/****** The following is the code for the [image] style. **********************************************/
.swiper {
	width: 100%;
	height: 100%;
}
div.player > div.body {
	height:490px;
}
div.player .swiper-pagination-horizontal {
	left: 50%;
	width: 64px;
	background: rgba(41, 41, 41, .34);
	border: .5px solid hsla(0, 0%, 100%, .2);
	border-radius: 16px;
	color: #fff;
	-webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
div.player .swiper-button-prev,
div.player .swiper-button-next {
	top: 55%;
    background-color: rgba(0, 0, 0, .4);
    border-radius: 50%;
    color: #fff;
    width: 48px;
    height: 48px;
    transform: translateY(-50%);
    transition: all .3s;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
div.player .swiper-button-prev:after,
div.player .swiper-button-next:after{
	font-size: 14px;
	font-weight: bold;
}
div.player .swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
}
div.player .swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
/****** The following is the code for the [video] style. **********************************************/
div.player video{
	width: 100%;
	height: 100%;
    /* left: 0; */
	/* right:0; */
	/* bottom:0; */
    /* outline: none; */
    /* position: absolute; */
    /* top: 0; */
}
/* 手机端优化 */
@media (max-width: 768px) {
	div.player {
		width: 100%;
		min-height: 100%;
		box-shadow: none;
	}
	div.player .swiper-slide {
		background: #000;
	}
	/* div.player .swiper-slide img {
		object-fit: contain;
	}
	.swiper-button-next, .swiper-button-prev {
		top: 55%;
	} */
}

/**
div.player .video_control{
	color:#fff;
	position:absolute;
	z-index: 10;
	right: 0;
    bottom: 0;
	left: 0;
	width: 100%;
    height: 48px;
	line-height:48px;
    opacity: 1;
    position: absolute;
    background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, .37), rgba(0, 0, 0, .75), rgba(0, 0, 0, .75));
    transition: opacity .5s ease, visibility .5s ease;
    visibility: visible;
}
div.player .video_control > div.progress{
    height: 2px;
	background: hsla(0, 0%, 100%, .5);
}
div.player .video_control > div.progress-played {
    background: hsla(0, 0%, 100%, .3);
    border-radius: inherit;
    flex: 1 1;
    height: 100%;
    margin-right: 2px;
    pointer-events: none;
    position: relative;
    transition: height .2s ease-in, opacity .2s ease-out;
}
div.player .video_control > div.progress-thumb {
	background: rgba(0, 0, 0, .54);
    border-radius: 4px;
    bottom: -4px;
    color: #fff;
    display: none;
    font-size: 11px;
    left: 50%;
    opacity: .85;
    padding: 4px 6px;
    position: relative;
    text-align: center;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    white-space: nowrap;
}
div.player .video_control > div.strip {
	padding:0px 10px 0px 10px;
}
div.player .video_control > div.strip svg{
	cursor:pointer;
    font-size: 14px;
    font-weight: 400;
}
div.player .dropdown {
	position: relative;
	display: inline-block;
	top: -13px;
	margin: 0px 10px 0px 10px;
}
div.player .dropdown > a {
	background: rgba(0, 0, 0, .38);
    border-radius: 12px;
    display: inline-block;
    height: 24px;
    line-height: 24px;
    min-width: 52px;
    text-align: center;
	font-size: 13px;
}
div.player .dropdown-content {
    display: none;
	position: absolute;
	z-index: 5;
	width: 78px;
	background: #000;
	z-index: 99999999999;
	color: #fffc;
	background: rgba(0, 0, 0, .54);
	margin: 0px;
	padding: 0px;
	overflow: hidden;
	bottom: 100%;
	right: 50%;
	-webkit-transform: translate(50%);
	transform: translate(50%);
	font-size: 14px;
	border-radius: 1px;
	opacity: .85;
	overflow: auto;
	text-align: center;
}
div.player .dropdown-content > a {
    padding: 0px;
    text-decoration: none;
    display: block;
	border-bottom: 1px solid #ddd;
}
div.player .dropdown-content a:hover,
div.player .dropdown-content a.on {color:red;}
div.player .dropdown:hover .dropdown-content {
    display: block;
}
*/