.player_main-box {
display: flex;
width: 100%;
height: calc(100vh - 0px);
position: absolute; /* 绝对定位 */
bottom: 0; /* 定位在底部 */
padding: 0px 0px 0px 180px;
}
.player_left-box {
flex: 1;
background-color: black;
width: 100%;
margin: 76px 0px 0px 0px; /* 上 右 下 左 */
position: relative; /* 添加这一行创建定位上下文 */
}
.player_left_player-switch {
position: absolute;
top: 50%;
right: 0;
z-index: 99999;
background: #1d1d1d;
border-radius: 15px 0 0 15px;
height: 46px;
line-height: 46px;
width: 25px;
color: hsla(0,0%,100%,.87);
padding-left: 6px;
margin-top: -23px;
font-weight: 700;
cursor: pointer;
}
.player_left_player-switch svg {
height: 45px;
width: 15px;
fill: #fff;
}
.player_left_player-switch svg:hover {
fill: #ee1010;
}
.player_right-box {
position: relative;
max-width: 400px;
display: flex;
flex-direction: column;
margin: 76px 20px 0px 0px; /* 上 右 下 左 */
padding: 0px 0px 0px 0px; /* 上 右 下 左 */
/* 新增以下属性实现纵向滚动并隐藏滚动条 */
overflow-y: auto; /* 或 scroll */
scrollbar-width: none; /* Firefox 隐藏滚动条 */
-ms-overflow-style: none; /* IE 和 Edge 隐藏滚动条 */
}
/* Chrome, Safari 和 Opera 隐藏滚动条 */
.player_right-box::-webkit-scrollbar {
display: none;
}
/* 悬浮按钮样式 */
.floating-button {
position: absolute; /* 绝对定位 */
right: 20px; /* 距离右侧10px */
top: 10px; /* 距离顶部10px */
padding: 8px 5px 0px 7px; /* 上 右 下 左 */
width: 30px;
height: 30px;
background: rgb(44 46 53 / 90%);
backdrop-filter: blur(10px);
font-size: 14px;
color: #bebcbb; /* 白色文字 */
border: none; /* 无边框 */
border-radius: 7px; /* 轻微圆角 */
cursor: pointer; /* 鼠标悬停时显示手型 */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 阴影效果 */
z-index: 100; /* 确保按钮在最上层 */
transition: all 0.3s ease; /* 悬停动画 */
}
/* 鼠标悬停效果 */
.floating-button:hover {
color: #000;
transform: scale(1.05); /* 轻微放大 */
}
.floating-button svg{
width: 16px;
height: 16px;
fill: #7b7777;
color: #FFF;
position: absolute;
top: 55%;
left: 55%;
transform: translate(-50%, -50%);
}
.floating-button:hover svg{
fill: #FFF;
color: #000;
}
.player-right_container {
width: 100;
height: 100vh;
max-height: 100vh;
padding: 10px;
/* 玻璃模糊效果 */
background: rgb(29 29 29);
backdrop-filter: blur(10px);
border-radius: 0px 10px 10px 0px; /* 左上, 右上, 右下, 左下 */
display: flex;
flex-direction: column;
}
.index_comment-box {
width: 100%;
height: 100vh;
padding: 10px;
background: rgba(29, 30, 33, 0.9);
backdrop-filter: blur(10px);
border-radius: 10px;
display: none;
flex-direction: column;
position: relative;
z-index: 110;
}
.comment-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 15px;
margin-bottom: 15px;
}
.comment-title {
color: white;
font-size: 18px;
font-weight: bold;
margin-top: 9px;
}
.close-btn {
background: #a63943ab;
color: white;
border: none;
width: 30px;
height: 30px;
border-radius: 50%;
cursor: pointer;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
}
.comment-input-area {
margin-bottom: 15px;
}
.index_comment-textarea {
width: 100%;
height: 80px;
padding: 10px;
border-radius: 8px;
border: 1px solid #444;
background: rgba(0, 0, 0, 0.3);
color: white;
resize: vertical;
font-family: inherit;
}
.index_submit-btn {
margin-top: 10px;
padding: 8px 15px;
background: #b53d3da8;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.index_submit-btn:hover {
background: #d13a3aa8;
}
.index_comments-list {
flex: 1;
overflow-y: auto;
}
/* 滚动条美化 */
.index_comments-list::-webkit-scrollbar {
width: 8px;
}
.index_comments-list::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
}
.index_comments-list::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.3);
border-radius: 4px;
}
.index_comments-list::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.5);
}
.index_comment-item {
padding: 10px;
margin-bottom: 10px;
}
.index_comment-author {
color: #FFF;
font-size: 16px;
margin-bottom: 5px;
}
.index_comment-content {
font-size: 14px;
color: #968d8d;
}
.index_comment-date {
color: #a4b0be;
font-size: 12px;
margin-top: 10px;
}
.fade-in {
animation: fadeIn 0.3s ease-in-out;
}
.fade-out {
animation: fadeOut 0.3s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeOut {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(-20px); }
}
.player-right_header {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.player-right_header img {
width: 100px;
height: 70px;
margin-right: 10px;
border-radius: 5px;
object-fit: cover; /* 可选：确保图片填充容器（可能裁剪） */
}
.player-right_info {
flex-grow: 1;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1; /* 限制显示行 */
overflow: hidden;
text-overflow: ellipsis;
}
.player-right_content {
font-size: 12px;
color: #ccc;
margin: 0px 0px 10px 0px;
}
#jianjie{
cursor: pointer;
font-size: 12px;
color: #ccc;
margin: 5px 0px 5px 10px;
}
#jianjie:hover{
color: #fd0000;
}
#jianjie:hover svg path {
fill: #fd0000;
}
#player-vod_class,
#player-vod_remarks{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1; /* 限制显示行 */
overflow: hidden;
text-overflow: ellipsis;
color: #949494;
font-size: 12px;
margin: 5px 0px 5px 0px;
}
.content-text {
line-height: 1.5em;
max-height: 3.6em; /* 2 行高度（1.5em × 2） */
color: #949494;
overflow: hidden;
position: relative;
display: -webkit-box;
font-size: 14px;
background:#232328a8;
backdrop-filter: blur(10px);
border-radius: 10px;
padding: 6px 10px 10px 10px;
margin: 0px 0px 0px 0px; /* 上 右 下 左 */
-webkit-line-clamp: 2; /* 限制显示行数 */
-webkit-box-orient: vertical;
text-overflow: ellipsis;
/* 新增以下属性实现纵向滚动并隐藏滚动条 */
overflow-y: auto; /* 或 scroll */
scrollbar-width: none; /* Firefox 隐藏滚动条 */
-ms-overflow-style: none; /* IE 和 Edge 隐藏滚动条 */
}
/* Chrome, Safari 和 Opera 隐藏滚动条 */
.player_right-box::-webkit-scrollbar {
display: none;
}
/* 展开状态 */
.content-text.expanded {
max-height: none;
display: block;
}
/* 图标样式 */
.toggle-icon {
display: none;
text-align: center;
/* margin-top: 0.5em;*/
cursor: pointer;
color: #666;
}
/* 仅当内容确实超过 2 行时显示图标 */
.toggle-icon.visible {
display: block;
}
.player-right_actions {
display: flex;
justify-content: space-between;
align-items: center;
margin: 10px 0px 10px 0px; /* 上 右 下 左 */
padding: 15px 20px 15px 20px;
background: #232328a8;
backdrop-filter: blur(10px);
border-radius: 10px;
}
.player-right_action-item {
width: 24px;
height: 24px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
}
.player-right_action-item.list {
background-image: url('data:image/svg+xml;utf8,');
}
.player-right_action-item.list:hover {
background-image: url('data:image/svg+xml;utf8,');
}
.player-right_action-item.list.selected {
background-image: url('data:image/svg+xml;utf8,');
}
.player-right_action-item.comment {
background-image: url('data:image/svg+xml;utf8,');
}
.player-right_action-item.comment:hover {
background-image: url('data:image/svg+xml;utf8,');
}
.player-right_action-item.download {
background-image: url('data:image/svg+xml;utf8,');
}
.player-right_action-item.download:hover {
background-image: url('data:image/svg+xml;utf8,');
}
.player-right_action-item.more {
background-image: url('data:image/svg+xml;utf8,');
}
.player-right_action-item.more:hover, .player-right_action-item.more:active {
background-image: url('data:image/svg+xml;utf8,');
}
/* 分段选项卡容器样式 */
.player-right_tabs-container {
position: relative;
margin-bottom: 10px;
width: 100%;
overflow: hidden;
display: flex;
}
/* 固定"全部"按钮样式 */
.player-right_tab-fixed {
background-color: #00000000;
color: #fff;
border: none;
padding: 0px 5px;
border-radius: 5px;
cursor: pointer;
font-size: 12px;
flex: 0 0 auto;
white-space: nowrap;
margin: 8px 0px 0px 10px;
min-width: 40px;
text-align: center;
height:25PX;
}
.player-right_tab-fixed.active {
background-color: #333;
color: #ff0000;
}
/* 可滚动分段容器包装器 */
.player-right_tabs-scroll-wrapper {
flex-grow: 1;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
display: flex;
align-items: center;
}
.player-right_tabs-scroll-wrapper::-webkit-scrollbar {
display: none;
}
/* 滚动容器内的 tabs 保持 flex 布局 */
.player-right_tabs {
display: flex;
gap: 10px;
padding: 5px 0;
min-width: max-content;
height: 34px;
align-items: center;
}
/* 无内容隐藏盒子 */
.player-right_tabs:empty {
display: none;
}
.player-right_tabs button {
background: none;
border: none;
color: #fff;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
font-size: 12px;
flex: 0 0 auto;
white-space: nowrap;
}
.player-right_tabs button.active {
color: #ff0000;
background-color: #333;
}
/* 集数列表容器样式 */
.player-right_cass {
flex-grow: 1;
overflow-y: auto;
margin-top: 0px;
padding-right: 5px;
height: 300px;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
}
/* 隐藏 WebKit 滚动条 */
.player-right_cass::-webkit-scrollbar {
display: none;
}
.player-right_calendar {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin: 5px 0px 5px 5px; /* 上 右 下 左 */
}
/* 无内容隐藏盒子 */
.player-right_calendar:empty {
display: none;
}
.player-right_calendar-item {
position: relative; /* 添加这一行 */
width: calc((100% - 24.95px) / 6); /* 7个间隙共35px */
aspect-ratio: 1/1;
background-color: #333;
text-align: center;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
color: white;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
user-select: none;
}
.player-right_calendar-item:hover {
background-color: #555;
}
.player-right_calendar-item.active {
background-color: #555;
box-shadow: 0 0 0 2px #00ff88;
}
.item-text {
text-align: center;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
/* 频率波动图样式 */
.frequency-wave {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
align-items: flex-end;
justify-content: center;
padding-bottom: 15px;
box-sizing: border-box;
}
.frequency-bar {
width: 4px;
margin: 0 1px;
background: linear-gradient(to top, #00ff88, #00aaff);
border-radius: 2px;
animation: wave 1.5s infinite ease-in-out;
}
@keyframes wave {
0%, 100% {
height: 10%;
opacity: 0.7;
}
50% {
height: 70%;
opacity: 1;
}
}
.player-right_calendar-item.playing .frequency-wave {
display: flex;
}
.player-right_calendar-item.playing .item-text {
display: none;
}
/* 播放源 主容器：横向滑动区域 */
.player-right-from_container {
display: flex;
overflow-x: auto;
scroll-behavior: smooth;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE and Edge */
padding: 10px 0;
gap: 10px;
width: 100%;
height: 55px;
box-sizing: border-box;
}
/* 隐藏滚动条 */
.player-right-from_container::-webkit-scrollbar {
display: none;
}
/* 无内容隐藏盒子 */
.player-right-from_container:empty {
display: none;
}
/* 卡片样式 */
.player-right-from_item {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0px 15px 0px 10px; /* 上 右 下 左 */
background-color: rgba(255, 255, 255, 0.05);
border-radius: 20px;
cursor: pointer;
transition: all 0.3s ease;
width: auto;
flex-shrink: 0;
position: relative;
color: rgb(142 170 178);
font-size: 14px;
user-select: none;
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* 标准语法 */
}
/* 卡片悬停效果 */
.player-right-from_item:hover {
background-color: rgba(255, 255, 255, 0.1);
}
/* 选中状态 */
.player-right-from_item.active {
background-color: rgb(108 58 58 / 30%);
color: rgb(241 159 76);
}
.player-right-from_item img {
width: 20px;
height: 20px;
}
/* 数字角标 */
.player-right-from_badge {
position: absolute;
top: -8px;
right: 10px;
background-color: #ffd700;
color: black;
font-size: 10px; /* 基础大小（浏览器允许的最小值） */
width: auto;
height: 16px;
line-height: 16px;
border-radius: 50px;
text-align: center;
font-weight: bold;
padding: 2px 5px 0px 5px;
transform: scale(0.8); /* 缩小到 80% */
transform-origin: right top; /* 从右上角缩放（避免偏移） */
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* 标准语法 */
}
/* 首页 动态波形图 */
/*
.audio-control-container_index {
position: fixed;
left: 50px;
bottom: 30px;
z-index: 5000;
display: none;
}
*/
/* 首页 动态波形图 */
.audio-control-container_index {
position: fixed;
left: 0px;
bottom: 50px;
z-index: 5000;
display: none; /* 默认隐藏 */
width: 160px;
max-width: 160px;
height: 50px;
background: rgb(67 75 99 / 90%);
backdrop-filter: blur(10px);
padding: 10px 0px 10px 0px;
border-radius: 0px 100px 100px 0px;
cursor: pointer;
/* 添加渐变边框 */
border: 2px solid transparent; /* 边框宽度和透明占位 */
background-clip: padding-box; /* 防止背景色覆盖边框 */
border-image: linear-gradient(90deg, rgba(255,255,255,0), #4facfe 50%, rgba(255,255,255,0)) 1;
border-image-slice: 1; /* 控制渐变范围 */
}
.audio-control-container_index::before {
content: '';
position: fixed;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
border-radius: 0px 102px 102px 0px; /* 比原容器大2px */
box-shadow: 0 0 0 2px rgba(79, 172, 254, 0.5); /* 模拟渐变边框 */
pointer-events: none;
}
.audio-visualizer-playinfo{
display: flex;
gap: 10px; /* 可选：设置子元素间距 */
color: #fff;
}
.audio-visualizer-playinfo img {
width: 50px;
height: 50px;
border-radius: 100px;
position: absolute; /* 绝对定位 */
right: 0px;
bottom: -3px;
animation: rotate 4s linear infinite; /* 4秒旋转一圈，无限循环 */
transform-origin: center; /* 旋转中心点设为图片中心 */
}
/* 定义旋转动画 */
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.audio-visualizer-playinfo_name {
display: flex;
flex-direction: column;
width: calc(100% - 50px);
}
.audio-visualizer-playinfo_names {
font-size: 16px;
font-weight: bold;
background: linear-gradient(90deg, #fbfafa, #e0dad6, #67fdc3, #ced9bd, #eff3ed, #ffffff, #0095ff, #a8a9b1, #be93e8, #fb4ede, #e8e1e1);
background-size: 200% auto;
color: transparent;
background-clip: text;
-webkit-background-clip: text;
animation: gradientText 3s linear infinite;
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0px 0px 0px 5px;
text-align: center; /* 替代flex居中 */
max-width: 100%; /* 确保宽度限制生效 */
}
@keyframes gradientText {
0% {
background-position: 0% center;
}
100% {
background-position: 200% center;
}
}
.audio-control-container_index.visible {
display: block;
}
.audio-visualizer-button_index {
position: relative;
width: 130px;
height: 20px;
top: -56px;
text-align: center;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
color: white;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
user-select: none;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.audio-visualizer-button_index:hover {
/* background-color: #555; */
}
.audio-visualizer-button_index.active {
background-color: #555;
box-shadow: 0 0 0 2px #00ff88;
}
.visualizer-wave-container_index {
position: absolute;
top: 10px;
left: 0;
width: 90%;
height: 50%;
display: flex;
align-items: flex-end;
justify-content: center;
box-sizing: border-box;
padding-bottom: 0px;
}
.visualizer-bar_index {
width: 10px;
margin: 0 1px;
background: linear-gradient(to top, #00ff88, #00aaff);
border-radius: 2px;
animation: wave-animation 1.5s infinite ease-in-out;
}
@keyframes wave-animation {
0%, 100% {
height: 10%;
opacity: 0.7;
}
50% {
height: 70%;
opacity: 1;
}
}
.audio-visualizer-button_index.playing .visualizer-wave-container_index {
display: flex;
}
.audio-visualizer-button_index.playing .button-label_index {
display: none;
}
.player_left-shikan {
display: none;
width: 100%;
height: 100%;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 20px;
box-sizing: border-box;
display: none; /* 强制隐藏 */
user-select: none; /* 标准语法 */
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
}
.player_left-vip-message {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.player_left-vip-description {
font-size: 16px;
margin-bottom: 30px;
max-width: 500px;
line-height: 1.6;
}
.player_left-vip-button {
background-color: #ff6b6b;
color: white;
border: none;
padding: 12px 30px;
font-size: 18px;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
}
.player_left-vip-button:hover {
background-color: #ff5252;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(255, 107, 107, 0.6);
}
.player_left-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 15px;
margin-top: 30px;
max-width: 600px;
}
.player_left-feature-item {
background-color: rgba(255, 255, 255, 0.1);
padding: 15px;
border-radius: 8px;
backdrop-filter: blur(10px);
}
.player_left-feature-title {
font-weight: bold;
margin-bottom: 5px;
color: #ffd700;
}
.player_left-feature-desc {
font-size: 14px;
opacity: 0.9;
}
/* 播放器主容器 */
.uniqueII-video-player-container {
display: flex;
width: 100%;
height: calc(100vh - 76px);
transition: all 0.3s ease;
position: relative; /* 添加定位上下文 */
}
.uniqueII-video-player-container {
container-type: inline-size; /* 或 container: size / inline-size */
}
/* 响应式样式：屏幕宽度小于690px时隐藏弹幕输入框，移除弹幕图标激活状态 */
/* @media (max-width: 690px) { */
@container (max-width: 690px) {
.uniqueII-clear-screen-switch,
.uniqueII-control-btn,
.uniqueII-time-display {
display: none;
}
}
/* 屏幕宽度大于690px时显示弹幕输入框，添加弹幕图标激活状态 */
/* @media (min-width: 691px) { */
@container (min-width: 691px) {
.uniqueII-clear-screen-switch,
.uniqueII-control-btn,
.uniqueII-time-display {
display: flex;
}
}
/* 提示消息样式 */
.unique-notification {
position: fixed;
bottom: 80px;
left: 50%;
transform: translateX(-50%);
padding: 10px 20px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 5px;
z-index: 1000;
font-size: 14px;
display: none;
backdrop-filter: blur(10px);
}