2024.7.30

public/css/main.css

@@ -1,11 +1,15 @@
 @font-face {
     font-family: 'zql';
     src: url('../font/zql.woff2') format('woff2'),
-         url('../font/zql.woff') format('woff');
-    unicode-range: U+0000-007F,  /* 基本拉丁字母 */
-                   U+4E00-9FFF,  /* 基本汉字 */
-                   U+2000-206F,  /* 通用标点符号 */
-                   U+3000-303F;  /* 中文标点符号 */
+        url('../font/zql.woff') format('woff');
+    unicode-range: U+0000-007F,
+        /* 基本拉丁字母 */
+        U+4E00-9FFF,
+        /* 基本汉字 */
+        U+2000-206F,
+        /* 通用标点符号 */
+        U+3000-303F;
+    /* 中文标点符号 */
 }
 
 ::-webkit-scrollbar {
@@ -42,6 +46,7 @@ body {
     /*background-repeat: initial;*/
     /*background-size: inherit;*/
     background-attachment: fixed;
+    z-index: 5;
 }
 
 hr {
@@ -1637,7 +1642,7 @@ input[type=submit] {
 
 @media only screen and (max-width: 683px) {
     .links-item {
-        width:144px;
+        width: 144px;
         margin: 0 0 8px
     }
 }
@@ -1656,7 +1661,8 @@ input[type=submit] {
     border-radius: 6px
 }
 
-.tocify ul,.tocify li {
+.tocify ul,
+.tocify li {
     list-style: none;
     margin: 0;
     padding: 0;
@@ -1677,11 +1683,12 @@ input[type=submit] {
 
 @media only screen and (max-width: 683px) {
     .tocify {
-        display:none
+        display: none
     }
 }
 
-.dark .light-wormhole,.dark-wormhole {
+.dark .light-wormhole,
+.dark-wormhole {
     display: none
 }
 
@@ -1701,7 +1708,7 @@ input[type=submit] {
     --waline-active-color: #000000 !important;
 
     /* 徽章 */
-    --waline-badge-color: #000000!important;
+    --waline-badge-color: #000000 !important;
 }
 
 /* @media (prefers-color-scheme: dark) {
@@ -1716,7 +1723,7 @@ input[type=submit] {
     border: 0px solid #ccc !important;
 }
 
-.wl-reaction-img img{
+.wl-reaction-img img {
     box-shadow: none;
 }
 
@@ -1744,4 +1751,69 @@ input[type=submit] {
 /* 修改小方块的背景填充颜色 */
 [data-theme=dark] .ch-subdomain-bg {
     fill: var(--gray-200);
+}
+
+/* 弹幕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;
+    position: absolute;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    pointer-events: auto;
+    text-shadow: 0ch;
+    z-index: 11;
+}
+
+.barrage .header {
+    /* width: 25px; */
+    /* height: 25px;  */
+    -webkit-border-radius: 50%;
+            border-radius: 50%;
+    /* border: 1px solid white; */
+    margin-right: 5px;
+    overflow: hidden; /* 确保头像不会溢出 */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.barrage .header img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover; /* 使头像充满容器并保持比例 */
+}
+
+.pause {
+    -webkit-animation-play-state: paused;
+    animation-play-state: paused;
 }