fixed 弹幕修复

themes/Ying/assets/css/main.css

@@ -2192,69 +2192,126 @@ input[type=submit] {
 }
 
 /* 弹幕css */
-.barrage {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -moz-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-orient: horizontal;
-    -webkit-box-direction: normal;
-    -webkit-flex-direction: row;
-    -moz-box-orient: horizontal;
-    -moz-box-direction: normal;
-    -ms-flex-direction: row;
-    flex-direction: row;
-    cursor: pointer;
-    -webkit-flex-wrap: nowrap;
-    -ms-flex-wrap: nowrap;
-    flex-wrap: nowrap;
-    -webkit-box-align: center;
-    -webkit-align-items: center;
-    -moz-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-    word-break: keep-all;
-    white-space: nowrap;
-    -webkit-border-radius: 20px;
-    border-radius: 20px;
-    padding: 0 20px;
-    padding-left: 15px;
-    opacity: 0.8;
-    will-change: transform;
+.barrager {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none; /* 容器不阻挡点击 */
+    z-index: 1; /* 在 main (z-index: 10) 背后，但在 body 背景之上 */
+    overflow: hidden;
+}
+
+/* 弹幕条目 (左到右) */
+.barrage-item {
     position: absolute;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
+    display: inline-flex;
+    align-items: flex-start; /* 顶部对齐 */
+    white-space: nowrap;
+    will-change: transform;
+    pointer-events: auto; /* 弹幕本身可点击 */
     user-select: none;
-    pointer-events: auto;
-    text-shadow: 0ch;
-    z-index: 11;
+    transform: translateX(-100%); /* 初始在左侧外 */
+    z-index: 10;
+    /* 初始透明度，配合动画实现淡入淡出 */
+    opacity: 0.9;
+    /* 缩小整体尺寸 */
+    transform-origin: left top;
 }
 
-.barrage .header-avatar {
-    -webkit-border-radius: 50%;
+/* 头像样式 */
+.barrage-avatar {
+    width: 28px; /* 缩小头像 */
+    height: 28px;
     border-radius: 50%;
-    position: relative;
-    right: 7px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 26px !important;
-    height: 26px !important;
-    min-width: 26px !important;
-}
-
-.barrage .header-avatar img {
-    width: 26px !important;
-    height: 26px !important;
+    margin-right: 8px;
     object-fit: cover;
-    border-radius: 50%;
+    border: 1px solid rgba(0,0,0,0.05);
+    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+    flex-shrink: 0;
+    background: #fff;
 }
 
-.pause {
-    -webkit-animation-play-state: paused;
-    animation-play-state: paused;
+/* 聊天气泡样式 (仿QQ/微信风格) */
+.barrage-bubble {
+    background: #ffffff; /* QQ/微信 白底 */
+    color: #1f1f1f;      /* 深黑文字 */
+    padding: 6px 10px; /* 缩小内边距 */
+    border-radius: 6px;  /* 稍微减小圆角 */
+    font-size: 13px; /* 缩小字体 */
+    line-height: 1.4;
+    position: relative;
+    box-shadow: 0 1px 5px rgba(0,0,0,0.08);
+    max-width: 260px; /* 减小最大宽度 */
+    white-space: normal;
+    word-break: break-all;
+}
+
+/* 气泡小尾巴 */
+.barrage-bubble::before {
+    content: '';
+    position: absolute;
+    top: 10px; /* 调整位置 */
+    left: -5px; /* 调整大小 */
+    width: 0;
+    height: 0;
+    border-top: 5px solid transparent;
+    border-bottom: 5px solid transparent;
+    border-right: 5px solid #ffffff;
+}
+
+/* 昼夜切换适配 */
+[data-theme="dark"] .barrage-avatar {
+    border-color: #444;
+    background: #222;
+}
+
+[data-theme="dark"] .barrage-bubble {
+    background: #262626; /* 深色模式深灰底 */
+    color: #e5e5e5;
+    border: 1px solid rgba(255,255,255,0.05);
+    box-shadow: none;
+}
+
+[data-theme="dark"] .barrage-bubble::before {
+    border-right-color: #262626;
+}
+
+/* 悬停效果 */
+.barrage-item:hover .barrage-bubble {
+    background: #f0f0f0; /* 悬停微暗 */
+    z-index: 100;
+}
+
+.barrage-item:hover .barrage-bubble::before {
+    border-right-color: #f0f0f0;
+}
+
+[data-theme="dark"] .barrage-item:hover .barrage-bubble {
+    background: #333;
+}
+
+[data-theme="dark"] .barrage-item:hover .barrage-bubble::before {
+    border-right-color: #333;
+}
+
+/* 左到右动画的关键帧 */
+@keyframes barrage-slide-right {
+    0% {
+        transform: translateX(-100%); /* 左侧屏幕外 */
+        opacity: 0;
+    }
+    5% {
+        opacity: 1; /* 快速淡入 */
+    }
+    95% {
+        opacity: 1;
+    }
+    100% {
+        transform: translateX(100vw); /* 右侧屏幕外 */
+        opacity: 0; /* 淡出 */
+    }
 }
 
 /* artalk样式重写css */