zwplayer-vue2x 1.0.31 → 1.0.32

package/zwplayerlib/zwplayer/css/zwplayer.css

@@ -1,6 +1,6 @@
 @font-face {
   font-family: "xiconfont"; /* Project id  */
-  src: url('zwplayer.ttf?t=1682038826666') format('truetype');
+  src: url('zwplayer.ttf?t=1682038836666') format('truetype');
 }
 
 .xicon {
@@ -124,200 +124,323 @@
 }
 
 .xicon-4k-fill:before {
-  content: "\e66a";
+    content: "\e66a";
 }
 
 .xicon-cc:before {
-  content: "\e66c";
+    content: "\e66c";
 }
 
 .xicon-cc {
-	font-size: 26px;
+    font-size: 26px;
 }
 
 .xicon-cc-fill:before {
-  content: "\e66d";
+    content: "\e66d";
 }
 
 .xicon-hd:before {
-  content: "\e66e";
+    content: "\e66e";
 }
 
 .xicon-hd {
-	font-size: 26px;
+    font-size: 26px;
 }
 
 .xicon-hd-fill:before {
-  content: "\e672";
+    content: "\e672";
 }
 
 .xicon-config:before {
-  content: "\e8b7";
+    content: "\e8b7";
 }
 
 .xicon-camera {
-	font-size: 22px;
+    font-size: 22px;
 }
 
 .xicon-camera:before {
-  content: "\e7ba";
+    content: "\e7ba";
 }
 
 .xicon-chapter:before {
-  content: "\e608";
+    content: "\e608";
 }
 
 .xicon-brightness:before {
-  content: "\e80d";
+    content: "\e80d";
 }
 
 .xicon-contrast:before {
-  content: "\e65d";
+    content: "\e65d";
 }
 
 .xicon-saturation:before {
-  content: "\e631";
+    content: "\e631";
 }
 
 .xicon-hue:before {
-  content: "\e68e";
+    content: "\e68e";
 }
 
 .xicon-subtitles:before {
-  content: "\e911";
+    content: "\e911";
 }
 
 .xicon-subtitle_on:before {
-  content: "\e609";
+    content: "\e609";
 }
 
 .xicon-subtitle_disable:before {
-  content: "\e60a";
+    content: "\e60a";
 }
 
 .xicon-num-0:before {
-  content: "\e625";
+    content: "\e625";
 }
 
 .xicon-num-1:before {
-  content: "\e626";
+    content: "\e626";
 }
 
 .xicon-num-2:before {
-  content: "\e627";
+    content: "\e627";
 }
 
 .xicon-num-3:before {
-  content: "\e628";
+    content: "\e628";
 }
 
 .xicon-num-4:before {
-  content: "\e629";
+    content: "\e629";
 }
 
 .xicon-num-5:before {
-  content: "\e62a";
+    content: "\e62a";
 }
 
 .xicon-num-6:before {
-  content: "\e62c";
+    content: "\e62c";
 }
 
 .xicon-num-7:before {
-  content: "\e62e";
+    content: "\e62e";
 }
 
 .xicon-num-8:before {
-  content: "\e62f";
+    content: "\e62f";
 }
 
 .xicon-num-9:before {
-  content: "\e630";
+    content: "\e630";
 }
 
 .xicon-send:before {
-  content: "\e632";
+    content: "\e632";
 }
 
 .xicon-arrow-left:before {
-  content: "\e620";
+    content: "\e620";
 }
 
 .xicon-arrow-up:before {
-  content: "\e61d";
+    content: "\e61d";
 }
 
 .xicon-arrow-right:before {
-  content: "\e61f";
+    content: "\e61f";
 }
 
 .xicon-arrow-down:before {
-  content: "\e61e";
+    content: "\e61e";
 }
 
 .xicon-media-next:before {
-  content: "\e60b";
+    content: "\e60b";
 }
 
 .xicon-media-prev:before {
-  content: "\e60d";
+    content: "\e60d";
 }
 
 .xicon-pic-in-pic:before {
-  content: "\e610";
+    content: "\e610";
 }
 
 .xicon-smile:before {
-  content: "\e613";
+    content: "\e613";
 }
 
 .xicon-smile2:before {
-  content: "\e673";
+    content: "\e673";
 }
 
 .xicon-smile3:before {
-  content: "\e633";
+    content: "\e633";
 }
 
 .xicon-smile4:before {
-  content: "\e681";
+    content: "\e681";
 }
 
 .xicon-danmu:before {
-  content: "\e624";
+    content: "\e624";
 }
 
 .xicon-danmu-setting:before {
-  content: "\e615";
+    content: "\e615";
 }
 
 .xicon-danmu-color:before {
-  content: "\e6a2";
+    content: "\e6a2";
 }
 
 .xicon-danmu-top:before {
-  content: "\e69b";
+    content: "\e69b";
 }
 
 .xicon-danmu-bottom:before {
-  content: "\e69f";
+    content: "\e69f";
 }
 
 .xicon-danmu-config:before {
-  content: "\e615";
+    content: "\e615";
 }
 
 .xicon-danmu-smile:before {
-  content: "\e613";
+    content: "\e613";
 }
 
 .xicon-disabled:before {
-  content: "\e6ad";
+    content: "\e6ad";
+}
+
+
+.xicon-open-file:before {
+  content: "\e602";
+}
+
+.xicon-open-file2:before {
+  content: "\e604";
+}
+
+.xicon-audio-effect:before {
+  content: "\e6aa";
 }
 
+.xicon-loop:before {
+  content: "\e51e";
+}
+
+.xicon-download:before {
+  content: "\e75d";
+}
+
+.xicon-record:before {
+  content: "\e698";
+}
+
+.xicon-zone:before {
+  content: "\e887";
+}
 .xicon.xicon-lite {
-	font-size: 20px;
+    font-size: 20px;
+}
+
+/* 直播录制状态小红点 - 在录制按钮上 */
+.zwp-live-recording-indicator {
+    position: absolute;
+    top: 2px;
+    right: 6px;
+    width: 10px;
+    height: 10px;
+    background: #ff0000;
+    border-radius: 50%;
+    z-index: 1001;
+    display: none;
+    box-shadow: 0 0 6px rgba(255, 0, 0, 0.8);
+    border: 1px solid rgba(255, 255, 255, 0.8);
+}
+
+/* 闪烁动画 */
+.zwp-live-recording-indicator.recording {
+    display: block;
+    animation: recording-pulse 1.2s ease-in-out infinite;
+}
+
+@keyframes recording-pulse {
+    0% {
+        opacity: 1;
+        transform: scale(1);
+        box-shadow: 0 0 8px rgba(255, 0, 0, 0.9);
+    }
+    50% {
+        opacity: 0.4;
+        transform: scale(0.6);
+        box-shadow: 0 0 4px rgba(255, 0, 0, 0.5);
+    }
+    100% {
+        opacity: 1;
+        transform: scale(1);
+        box-shadow: 0 0 8px rgba(255, 0, 0, 0.9);
+    }
+}
+
+/* 音频录制状态 - 绿色指示灯 */
+.zwp-live-recording-indicator.audio-recording {
+    background: #00ff00;
+    box-shadow: 0 0 6px rgba(0, 255, 0, 0.8);
+    border: 1px solid rgba(255, 255, 255, 0.8);
 }
+
+/* 音频录制闪烁动画 */
+.zwp-live-recording-indicator.audio-recording.recording {
+    animation: audio-recording-pulse 1.2s ease-in-out infinite;
+}
+
+@keyframes audio-recording-pulse {
+    0% {
+        opacity: 1;
+        transform: scale(1);
+        box-shadow: 0 0 8px rgba(0, 255, 0, 0.9);
+    }
+    50% {
+        opacity: 0.4;
+        transform: scale(0.6);
+        box-shadow: 0 0 4px rgba(0, 255, 0, 0.5);
+    }
+    100% {
+        opacity: 1;
+        transform: scale(1);
+        box-shadow: 0 0 8px rgba(0, 255, 0, 0.9);
+    }
+}
+
+/* 录制选项菜单样式 */
+.zwp-recording-options-menu {
+    font-family: Arial, sans-serif;
+    font-size: 13px;
+    line-height: 1.4;
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+
+.zwp-recording-option:hover {
+    background: rgba(255, 255, 255, 0.1) !important;
+}
+
+.zwp-recording-option span {
+    margin-right: 8px;
+    font-size: 14px;
+}
+
+/* 确保录制按钮容器支持绝对定位 */
+.zwp-recordButton {
+    position: relative;
+}
+
 /*-----end for icon-------------*/
 
 .zwp-wrap.hide-cursor, .zwp-wrap.hide-cursor * {
@@ -325,26 +448,26 @@
 }
 
 .zwp-wrap.zwp-fullscreen-win {
-	position: fixed;
-	left: 0 !important;
-	top: 0 !important;
-	width: 100%!important;
-	height: 100%!important;
-	padding-top: 0!important;
-	z-index: 20000;
+    position: fixed;
+    left: 0 !important;
+    top: 0 !important;
+    width: 100% !important;
+    height: 100% !important;
+    padding-top: 0 !important;
+    z-index: 20000;
 }
 
 .zwp-wrap .zwp-controlbar {
-	position: absolute;
-	height: 48px;
-	width: 100%;
-	bottom: 0;
-	background: #19191975;
-	z-index: 3;
-	box-sizing: border-box;
-	padding: 6px 10px;
-	display: flex;
-	background-image: linear-gradient(180deg,transparent,rgba(0,0,0,.15),rgba(0,0,0,.50),rgba(0,0,0,.30));
+    position: absolute;
+    height: 48px;
+    width: 100%;
+    bottom: 0;
+    background: #19191975;
+    z-index: 3;
+    box-sizing: border-box;
+    padding: 6px 10px;
+    display: flex;
+    background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, .15), rgba(0, 0, 0, .50), rgba(0, 0, 0, .30));
 }
 
 .zwp-wrap .zwp-controlbar.zwp-vodplayer {
@@ -411,7 +534,7 @@
 }
 
 .zwp-wrap .zwp-controlbar .zwp-button > button:focus {
-	outline: none;   
+	outline: none;
 }
 
 .zwp-wrap .zwp-controlbar .zwp-button:not(.zwp_disabled) > button:hover {
@@ -768,6 +891,7 @@
 	padding-bottom: 0px;
 	bottom: 40px;
 	height: 20px;
+	/* 确保作为片段选择器的定位参考 */
 }
 
 .zwp__time-rail.has-duration {
@@ -801,7 +925,7 @@
 }
 
 .zwp__time_divider {
-	
+
 }
 
 .zwp__time {
@@ -1386,8 +1510,8 @@
 	padding: 6px 0px;
 	margin: 0;
 	border-radius: 3px;
-	width: 160px;
-	left: -62px;
+	width: 200px;
+	left: -82px;
 	display: none;
 	z-index: 1;
 	min-height: 120px;
@@ -1462,12 +1586,56 @@
 	display: block;
 }
 
+.zwp-popupwindow.zwp-volumeBoostPanel {
+	width: 360px;
+	right: 30px;
+	bottom: 70px;
+}
+
 .zwp-popupwindow.zwp-colorSettingPanel {
 	width: 360px;
 	right: 30px;
 	bottom: 70px;
 }
 
+/* 滑动条范围标签样式 */
+.zwp-slider-min-label,
+.zwp-slider-max-label {
+	color: rgba(255, 255, 255, 0.7);
+	font-size: 11px;
+	padding: 2px 4px;
+	flex-shrink: 0;
+}
+
+.zwp-slider-min-label {
+	margin-right: 8px;
+}
+
+.zwp-slider-max-label {
+	margin-left: 8px;
+}
+
+.zwp-popupwindow .row-content {
+	display: flex;
+	align-items: center;
+}
+
+.zwp-popupwindow .row-content .zwp-slider {
+	flex-grow: 1;
+	margin: 0 8px;
+}
+
+.zwp-popupwindow .row-content .zwp-slider-value {
+	flex-shrink: 0;
+	min-width: 35px;
+	text-align: center;
+	background-color: rgba(255, 255, 255, 0.1);
+	border-radius: 3px;
+	padding: 2px 4px;
+	font-size: 11px;
+	font-family: 'Courier New', monospace;
+}
+
 .zwp-popupwindow .form-row {
 	line-height: 24px;
 	padding: 3px 12px;
@@ -1598,7 +1766,7 @@
 }
 
 .zwp-chapterlist li:hover .title {
-	
+
 }
 
 .zwp-chapterlist li .item-content {
@@ -1657,23 +1825,23 @@
 }
 
 .zwp-wrap .zwp__layers .danmuplayer .danmu-layer .danmu {
-	position: absolute; 
-	display: inline-block; 
-	white-space: pre; 
-	pointer-events: none; 
+	position: absolute;
+	display: inline-block;
+	white-space: pre;
+	pointer-events: none;
 	/*opacity: 0.80;*/
-	text-shadow: rgb(0, 0, 0) 1px 0px 1px, rgb(0, 0, 0) 0px 1px 1px, rgb(0, 0, 0) 0px -1px 1px, rgb(0, 0, 0) -1px 0px 1px;  
-	/*transform: translateX(-1053px); 
+	text-shadow: rgb(0, 0, 0) 1px 0px 1px, rgb(0, 0, 0) 0px 1px 1px, rgb(0, 0, 0) 0px -1px 1px, rgb(0, 0, 0) -1px 0px 1px;
+	/*transform: translateX(-1053px);
 	transition: transform 8.1s linear;
 
 	/*-dynamic-*/
-	left: 979.435px; 
-	top: 0px; 
+	left: 979.435px;
+	top: 0px;
 	font-weight: bold;
-	line-height: 1.125; 
-	color: rgb(255, 255, 255); 
-	font-size: 20px; 
-	font-family: SimHei, "Microsoft JhengHei", Arial, Helvetica, sans-serif; 
+	line-height: 1.125;
+	color: rgb(255, 255, 255);
+	font-size: 20px;
+	font-family: SimHei, "Microsoft JhengHei", Arial, Helvetica, sans-serif;
 }
 
 .zwp-wrap .zwp__layers .danmuplayer .danmu-layer .danmu span {
@@ -1756,7 +1924,7 @@
 }
 
 .zwp-wrap .zwp-subtitles-show .zwp-simple-subtitles-viever {
-	
+
 }
 /*subtitles end */
 
@@ -1859,7 +2027,7 @@ input[type=range].zwp-slider::-webkit-slider-thumb {
     box-sizing: border-box;
     -webkit-appearance: none !important;
 }
- 
+
 input[type=range].zwp-slider::-webkit-slider-thumb:active {
     border: 0;
     background-color: #1fb5f9;
@@ -1975,12 +2143,12 @@ input[type=range].zwp-slider::-webkit-slider-thumb:active {
     background-color: #4c4e59bf;
     color: #e4e3e3;
 }
-  
+
 .zwp-barrage_form .btn_submit:active {
     background-color: #585858;
     color: #d4d3d3;
 }
-  
+
 .zwp-barrage_form .barrage_star {
     display:none;
 }
@@ -1999,7 +2167,7 @@ input[type=range].zwp-slider::-webkit-slider-thumb:active {
 .zwp-barrage_form .barrage_login .barrage_text {
     color: #bbb;
     padding-right:4px;
-    
+
 }
 
 .zwp-barrage_form .zwp-barrage_inp.logined .barrage_login {
@@ -2816,7 +2984,7 @@ input[type=range].zwp-slider::-webkit-slider-thumb:active {
 }
 
 .zwp-toast .zwp-toast-text {
-	
+
 }
 
 .zwp-toast .zwp-toast-closebtn {
@@ -2876,7 +3044,7 @@ input[type=range].zwp-slider::-webkit-slider-thumb:active {
 }
 
 .zwp-toast.zwp-confirm .closeBtn:hover {
-	
+
 }
 
 .zwp-toast.zwp-confirm .zwp-toast-text{
@@ -2980,13 +3148,14 @@ input[type=range].zwp-slider::-webkit-slider-thumb:active {
 }
 
 .zwp-popupmenu .zwp-menuitem .zwp-menuicon {
-	
+
 }
 
 .zwp-popupmenu .zwp-menuitem .zwp-menucaption {
-	
+
 }
 
+
 .zwp-wrap .zwp__layers .zwp-logo {
 	position: absolute;
 	right: 5%;
@@ -3006,7 +3175,7 @@ input[type=range].zwp-slider::-webkit-slider-thumb:active {
 
 .zwp-liteicon {
 	display: inline-block;
-	
+
 }
 
 .zwp-liteicon .xicon {
@@ -3131,3 +3300,524 @@ input[type=range].zwp-slider::-webkit-slider-thumb:active {
 }
 
 /* small window end */
+
+/* DRAGDROP: Drag and Drop Styles */
+.zwp-drag-over {
+	border: 3px dashed #007bff !important;
+	background-color: rgba(0, 123, 255, 0.1) !important;
+	transition: all 0.3s ease !important;
+}
+
+.zwp-drag-over::before {
+	content: '拖拽视音频文件到此处播放' !important;
+	position: absolute !important;
+	top: 50% !important;
+	left: 50% !important;
+	transform: translate(-50%, -50%) !important;
+	background-color: rgba(0, 0, 0, 0.8) !important;
+	color: white !important;
+	padding: 20px 30px !important;
+	border-radius: 8px !important;
+	font-size: 16px !important;
+	z-index: 9999 !important;
+	pointer-events: none !important;
+	white-space: nowrap !important;
+	font-family: Arial, sans-serif !important;
+}
+
+/* Hide drag-over prompt when local playback hint is visible to avoid duplicate prompts */
+.zwp-drag-over.zwp-drag-over-no-prompt::before {
+	display: none !important;
+}
+
+/* drag and drop end */
+
+/* local playback hint start */
+.zwp-local-playback-hint {
+	display: flex !important;
+	flex-direction: column !important;
+	align-items: center !important;
+	justify-content: center !important;
+	position: absolute !important;
+	top: 50% !important;
+	left: 50% !important;
+	transform: translate(-50%, -50%) !important;
+	text-align: center !important;
+	color: white !important;
+	font-family: Arial, "Microsoft YaHei", sans-serif !important;
+	pointer-events: auto !important;
+	z-index: 100 !important;
+	cursor: pointer !important;
+	transition: all 0.3s ease !important;
+	border-radius: 12px !important;
+	padding: 30px 20px !important;
+	background-color: rgba(0, 0, 0, 0.6) !important;
+	border: 2px solid rgba(255, 255, 255, 0.2) !important;
+	backdrop-filter: blur(5px) !important;
+}
+
+.zwp-local-playback-hint:hover {
+	background-color: rgba(0, 123, 255, 0.3) !important;
+	border-color: rgba(0, 123, 255, 0.6) !important;
+	transform: translate(-50%, -50%) scale(1.05) !important;
+	box-shadow: 0 8px 25px rgba(0, 123, 255, 0.4) !important;
+}
+
+.zwp-local-playback-hint:active {
+	transform: translate(-50%, -50%) scale(0.98) !important;
+}
+
+.zwp-local-playback-text {
+	font-size: 24px !important;
+	font-weight: bold !important;
+	margin-bottom: 10px !important;
+	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7) !important;
+	opacity: 0.9 !important;
+}
+
+.zwp-local-playback-subtitle {
+	font-size: 14px !important;
+	opacity: 0.7 !important;
+	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7) !important;
+	max-width: 80% !important;
+	line-height: 1.4 !important;
+}
+
+/* Mobile responsive styles for local playback hint */
+@media screen and (max-width: 1200px) {
+	.zwp-local-playback-text {
+		font-size: 18px !important;
+		line-height: 1.3 !important;
+		padding: 0 5px !important;
+	}
+
+	.zwp-local-playback-subtitle {
+		font-size: 13px !important;
+		line-height: 1.3 !important;
+		padding: 0 5px !important;
+	}
+}
+
+@media screen and (max-width: 768px) {
+	.zwp-local-playback-hint {
+		padding: 20px 15px !important;
+		width: 90% !important;
+		max-width: 320px !important;
+	}
+
+	.zwp-local-playback-text {
+		font-size: 16px !important;
+		margin-bottom: 8px !important;
+		text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8) !important;
+		line-height: 1.3 !important;
+		padding: 0 5px !important;
+	}
+
+	.zwp-local-playback-subtitle {
+		font-size: 12px !important;
+		max-width: 90% !important;
+		padding: 0 5px !important;
+	}
+}
+
+@media screen and (max-width: 600px) {
+	.zwp-local-playback-text {
+		font-size: 15px !important;
+		margin-bottom: 7px !important;
+		text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8) !important;
+		padding: 0 4px !important;
+	}
+
+	.zwp-local-playback-subtitle {
+		font-size: 11px !important;
+		max-width: 92% !important;
+		padding: 0 4px !important;
+	}
+}
+
+@media screen and (max-width: 480px) {
+	.zwp-local-playback-hint {
+		padding: 15px 10px !important;
+		width: 95% !important;
+		max-width: 280px !important;
+	}
+
+	.zwp-local-playback-text {
+		font-size: 14px !important;
+		margin-bottom: 6px !important;
+		text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9) !important;
+		padding: 0 3px !important;
+	}
+
+	.zwp-local-playback-subtitle {
+		font-size: 11px !important;
+		max-width: 95% !important;
+		padding: 0 3px !important;
+	}
+}
+
+@media screen and (max-width: 400px) {
+	.zwp-local-playback-text {
+		font-size: 13px !important;
+		margin-bottom: 5px !important;
+		padding: 0 2px !important;
+	}
+
+	.zwp-local-playback-subtitle {
+		font-size: 10px !important;
+		max-width: 98% !important;
+		padding: 0 2px !important;
+	}
+}
+
+@media screen and (max-width: 360px) {
+	.zwp-local-playback-hint {
+		padding: 12px 8px !important;
+		width: 98% !important;
+		max-width: 260px !important;
+	}
+
+	.zwp-local-playback-text {
+		font-size: 12px !important;
+		margin-bottom: 4px !important;
+		padding: 0 2px !important;
+	}
+
+	.zwp-local-playback-subtitle {
+		font-size: 9px !important;
+		padding: 0 2px !important;
+	}
+}
+
+@media screen and (max-device-width: 480px) and (orientation: portrait) {
+	.zwp-local-playback-text {
+		font-size: 14px !important;
+		padding: 0 8px !important;
+	}
+
+	.zwp-local-playback-subtitle {
+		font-size: 11px !important;
+		padding: 0 8px !important;
+		max-width: 90% !important;
+	}
+}
+
+@media (hover: none) and (pointer: coarse) {
+	.zwp-local-playback-text {
+		font-size: 16px !important;
+		padding: 0 5px !important;
+	}
+
+	.zwp-local-playback-subtitle {
+		font-size: 12px !important;
+		padding: 0 5px !important;
+	}
+}
+
+/* local playback hint end */
+
+/* local playback button start */
+.zwp-localPlaybackBtn svg {
+	width: 20px !important;
+	height: 20px !important;
+}
+
+.zwp-localPlaybackBtn:hover svg {
+	opacity: 0.8;
+}
+
+.zwp-localPlaybackBtn:active svg {
+	opacity: 0.6;
+}
+
+/* local playback button end */
+
+/* recording settings panel start */
+.zwp-popupwindow.zwp-recordingSettingsPanel {
+	width: 360px;
+	right: 30px;
+	bottom: 70px;
+}
+
+/* recording radio group styles */
+.zwp-radio-group {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	padding: 8px 0;
+}
+
+.zwp-radio-item {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	cursor: pointer;
+	padding: 4px 0;
+}
+
+.zwp-radio-item input[type="radio"] {
+	margin: 0;
+	width: 16px;
+	height: 16px;
+}
+
+.zwp-radio-label {
+	flex-grow: 1;
+	font-size: 14px;
+}
+
+.recording-note {
+	border-top: 1px solid rgb(255 255 255 / 10%);
+	padding-top: 8px;
+	margin-top: 8px;
+}
+
+.zwp-note-text {
+	font-size: 12px;
+	color: rgba(255, 255, 255, 0.6);
+	line-height: 1.4;
+	text-align: center;
+	white-space: nowrap;
+	padding: 0 8px;
+}
+
+/* recording settings panel end */
+
+/* keyboard shortcuts help panel start */
+.zwp-popupwindow.zwp-shortcutHelpPanel {
+	width: 400px;
+	right: 30px;
+	bottom: 70px;
+	max-height: 70vh;
+	overflow-y: auto;
+	overflow-x: hidden;
+}
+
+/* 快捷键面板滚动条样式 */
+.zwp-popupwindow.zwp-shortcutHelpPanel::-webkit-scrollbar {
+	width: 6px;
+}
+
+.zwp-popupwindow.zwp-shortcutHelpPanel::-webkit-scrollbar-track {
+	background: rgba(255, 255, 255, 0.05);
+	border-radius: 3px;
+}
+
+.zwp-popupwindow.zwp-shortcutHelpPanel::-webkit-scrollbar-thumb {
+	background: rgba(255, 255, 255, 0.2);
+	border-radius: 3px;
+	transition: background-color 0.2s ease;
+}
+
+.zwp-popupwindow.zwp-shortcutHelpPanel::-webkit-scrollbar-thumb:hover {
+	background: rgba(255, 255, 255, 0.3);
+}
+
+.zwp-shortcutHelpPanel .shortcut-list {
+	padding: 6px 0;
+	max-height: 300px;
+	overflow-y: auto;
+}
+
+/* 快捷键列表滚动条样式 */
+.zwp-shortcutHelpPanel .shortcut-list::-webkit-scrollbar {
+	width: 6px;
+}
+
+.zwp-shortcutHelpPanel .shortcut-list::-webkit-scrollbar-track {
+	background: rgba(255, 255, 255, 0.05);
+	border-radius: 3px;
+}
+
+.zwp-shortcutHelpPanel .shortcut-list::-webkit-scrollbar-thumb {
+	background: rgba(255, 255, 255, 0.2);
+	border-radius: 3px;
+	transition: background-color 0.2s ease;
+}
+
+.zwp-shortcutHelpPanel .shortcut-list::-webkit-scrollbar-thumb:hover {
+	background: rgba(255, 255, 255, 0.3);
+}
+
+.zwp-shortcutHelpPanel .shortcut-item {
+	display: flex;
+	align-items: center;
+	padding: 4px 8px;
+	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+	transition: background-color 0.2s ease;
+}
+
+.zwp-shortcutHelpPanel .shortcut-item:hover {
+	background-color: rgba(255, 255, 255, 0.05);
+}
+
+.zwp-shortcutHelpPanel .shortcut-item:last-child {
+	border-bottom: none;
+}
+
+.zwp-shortcutHelpPanel .shortcut-key {
+	flex: 0 0 100px;
+	background-color: rgba(255, 255, 255, 0.1);
+	border: 1px solid rgba(255, 255, 255, 0.2);
+	border-radius: 3px;
+	padding: 3px 6px;
+	margin-right: 10px;
+	text-align: center;
+	font-family: 'Courier New', monospace;
+	font-size: 11px;
+	font-weight: bold;
+	color: #fff;
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+	line-height: 1.2;
+}
+
+.zwp-shortcutHelpPanel .shortcut-desc {
+	flex: 1;
+	font-size: 12px;
+	line-height: 1.3;
+	color: rgba(255, 255, 255, 0.9);
+}
+
+/* keyboard shortcuts help panel end */
+
+/* --- 片段选择器样式 --- */
+.zwp-segment-layer {
+	position: absolute;
+	top: -10px;
+	bottom: -5px;
+	left: 0;
+	width: 100%;
+	pointer-events: none;
+	display: none;
+	z-index: 25;
+}
+
+.zwp-segment-layer.active {
+	display: block;
+}
+
+.zwp-segment-handle {
+	position: absolute;
+	top: 50%;
+	width: 12px;
+	height: 28px;
+	background: #fff;
+	cursor: ew-resize;
+	pointer-events: auto;
+	z-index: 30;
+	transform: translateX(-50%) translateY(-50%);
+	box-shadow: 0 0 4px rgba(0,0,0,0.5);
+	border-radius: 2px;
+}
+
+.zwp-segment-handle::after {
+	content: '';
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+	width: 2px;
+	height: 12px;
+	background: #ccc;
+}
+
+.zwp-segment-selection {
+	position: absolute;
+	top: 50%;
+	left: 0;
+	right: 0;
+	height: 20px;
+	background: rgba(255, 255, 255, 0.4);
+	z-index: 18;
+	transform: translateY(-50%);
+}
+
+.zwp-segmentButton.active .zwp-segmentBtn {
+	color: #ff4444;
+}
+
+/* 片段选择激活时的进度条样式 */
+.zwp__time-rail.segment-active .zwp__time-total {
+	background: rgba(255, 255, 255, 0.3);
+	opacity: 0.6;
+}
+
+.zwp__time-rail.segment-active .zwp__time-loaded {
+	background: rgba(255, 255, 255, 0.4);
+	opacity: 0.7;
+}
+
+/* 片段选择激活时的进度条悬停效果 */
+.zwp__time-rail.segment-active:hover .zwp__time-total {
+	background: rgba(255, 255, 255, 0.4);
+	opacity: 0.7;
+}
+
+/* 片段选择激活时，突出显示选中区域 */
+.zwp__time-rail.segment-active .zwp-segment-selection {
+	background: rgba(255, 255, 255, 0.6);
+	border: 1px solid rgba(255, 255, 255, 0.8);
+}
+
+/* 确保选中区域在视觉上突出 */
+.zwp__time-rail.segment-active .zwp-segment-handle {
+	background: #fff;
+	border: 1px solid rgba(0, 0, 0, 0.3);
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
+}
+
+/* 片段拖拽时间提示框 */
+.zwp-segment-tooltip {
+	position: absolute;
+	top: 0px;
+	left: 0;
+	transform: translateX(-50%) translateY(-100%);
+	background: rgba(0, 0, 0, 0.9);
+	color: #fff;
+	font-size: 12px;
+	font-family: Arial, sans-serif;
+	padding: 6px 10px;
+	border-radius: 4px;
+	white-space: nowrap;
+	z-index: 35;
+	pointer-events: none;
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+	border: 1px solid rgba(255, 255, 255, 0.2);
+	margin-top: -8px;
+}
+
+/* 时间提示框的三角形指示器 */
+.zwp-segment-tooltip::after {
+	content: '';
+	position: absolute;
+	top: 100%;
+	left: 50%;
+	transform: translateX(-50%);
+	border: 6px solid transparent;
+	border-top-color: rgba(0, 0, 0, 0.9);
+}
+
+/* 开始滑块提示框的样式 */
+.zwp-segment-tooltip.start-handle {
+	background: rgba(33, 150, 243, 0.9);
+	border-color: rgba(33, 150, 243, 0.3);
+}
+
+.zwp-segment-tooltip.start-handle::after {
+	border-top-color: rgba(33, 150, 243, 0.9);
+}
+
+/* 结束滑块提示框的样式 */
+.zwp-segment-tooltip.end-handle {
+	background: rgba(244, 67, 54, 0.9);
+	border-color: rgba(244, 67, 54, 0.3);
+}
+
+.zwp-segment-tooltip.end-handle::after {
+	border-top-color: rgba(244, 67, 54, 0.9);
+}
+
+/* 确保时间轨道可以作为绝对定位的参考 */
+.zwp__time-rail {
+	/* 已经是absolute定位，不需要修改 */
+}