更新synthetic的css，把背景換成webp

Author: RimoChan

librian/librian本體/前端/src/加載畫面.sass

@@ -1,7 +1,7 @@
 @import "../黑科技/synthetic_css/synthetic_offline.sass"
 
 #加載畫面
-    background-image: url('../黑科技/synthetic_css/紙背景花紋.jpg')
+    background-image: url('../黑科技/synthetic_css/紙背景花紋.webp')
     color: 000
     display: none
     flex-direction: column

librian/librian本體/前端/src/各種面板.sass

@@ -2,7 +2,7 @@
 
 =面板
     @extend div, .synth
-    background-image: url('../黑科技/synthetic_css/紙背景花紋.jpg')
+    background-image: url('../黑科技/synthetic_css/紙背景花紋.webp')
     background-attachment: scroll
     color: #000
     font-size: 24px
@@ -26,11 +26,10 @@
         padding: 8px
         margin: 8px
         border-radius: 8px
-
     hr
         width: 90%
         border: none
-        border-top: 1px solid rgba(120, 50 ,0 ,0.5)
+        border-top: 1px solid rgba(120, 50, 0, 0.5)
     .檔
         display: flex
         justify-content: space-between

librian/librian本體/前端/黑科技/synthetic_css/_synthetic_offline.sass

@@ -3,10 +3,11 @@
     background-image: url($x)
     background-size: cover
     background-attachment: fixed
-        
+
+
 body
     &.syn
-        +bg('紙背景花紋.jpg')
+        +bg('紙背景花紋.webp')
         font-family: 'Noto Serif SC'
         button, input, textarea
             font-family: 'Noto Serif SC'
@@ -39,7 +40,7 @@ header
 
 div
     &.syn
-        +bg('紙背景花紋模糊.jpg')
+        +bg('紙背景花紋模糊.webp')
         box-shadow: 0px 0px 1vw rgba(0, 0, 0, 0.6)
     &.synth
         @extend .syn
@@ -58,6 +59,22 @@ div
             background: rgba(255,255,200,0.65)
             backdrop-filter: blur(4px)
 
+table
+    &.syn
+        border-radius: 2px
+        border-collapse: collapse
+        border-style: hidden
+        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5)
+        th
+            background-color: rgba(0, 0, 0, 0.08)
+        td,th
+            padding: 0.2em 1em
+            text-align: center
+            vertical-align: center
+            border: 1px solid rgba(0, 0, 0, 0.5)
+    &.synth
+        @extend .syn
+        
 button, a
     &.syn
         $shadow_range: 0.8vw
@@ -70,18 +87,21 @@ button, a
         color: inherit
         cursor: pointer
 
-        +bg('./紙背景花紋模糊.jpg')
+        +bg('./紙背景花紋模糊.webp')
 
         box-shadow: 0px 0px $shadow_range rgba(0, 0, 0, 0.6), 0px 0px $shadow_range/2 rgba(0, 0, 0, 0) inset
         filter: brightness(1.05) hue-rotate(-6deg)
 
         transition: box-shadow 0.2s, filter 0.1s
-        &:hover
+        &:hover:not(:disabled)
             box-shadow: 0px 0px $shadow_range/2 rgba(0, 0, 0, 0.7), 0px 0px $shadow_range/2 rgba(0, 0, 0, 0) inset
             filter: brightness(1.1) hue-rotate(-12deg)
         &:active
             box-shadow: 0px 0px $shadow_range/2 rgba(0, 0, 0, 0), 0px 0px $shadow_range/2 rgba(0, 0, 0, 0.6) inset
             filter: blur(0.1vw)
+        &:disabled
+            cursor: not-allowed
+            color: rgba(0, 0, 0, 0.6)
 
     &.synth
         @extend .syn
@@ -186,7 +206,7 @@ input[type="checkbox"]
     &.synth
         @extend .syn
 
-input[type="text"], input[type="password"]
+input[type="text"], input[type="password"], input[type="number"]
     &.syn
         background: rgba(0,0,0,0)
         outline: none
@@ -232,7 +252,7 @@ progress
             backdrop-filter: saturate(0.8) contrast(1.8) brightness(1.3)
 
         &::-moz-progress-bar
-            +bg('紙背景花紋模糊.jpg')
+            +bg('紙背景花紋模糊.webp')
             border-radius: 3px
             filter: brightness(0.8) saturate(0.8) contrast(1.8) brightness(1.3)
 

librian/librian本體/前端/黑科技/synthetic_css/synthetic_offline.css

@@ -27,7 +27,7 @@ body {
     animation-delay: 0.2s;
     animation-fill-mode: both;
     background-color: #dec6a1;
-    background-image: url('../dist/紙背景花紋.jpg');
+    background-image: url('../dist/紙背景花紋.webp');
     background-size: cover;
     background-attachment: fixed;
 }
@@ -41,7 +41,7 @@ a {
     text-decoration: none;
     color: inherit;
     cursor: pointer;
-    background-image: url('../dist/紙背景花紋模糊.jpg');
+    background-image: url('../dist/紙背景花紋模糊.webp');
     background-size: cover;
     background-attachment: fixed;
     box-shadow: 0px 0px 0.8vw rgba(0, 0, 0, 0.6), 0px 0px 0.4vw rgba(0, 0, 0, 0) inset;
@@ -78,7 +78,7 @@ a:active {
     -webkit-mask-image: url('虛僞的假面.png');
     -webkit-mask-size: cover;
     filter: hue-rotate(var(--s));
-    background: url('../dist/紙背景花紋模糊.jpg');
+    background: url('../dist/紙背景花紋模糊.webp');
     background-size: cover;
     width: 100%;
     height: 100%;

librian/librian本體/前端/黑科技/synthetic_css/紙背景花紋.jpg

@@ -11,7 +11,7 @@ small {
     size: A4;
     margin: 1.5cm;
     margin-bottom: 2cm;
-    background: url('./紙背景花紋印刷.jpg');
+    background: url('./紙背景花紋印刷.webp');
     background-size: 125%;
     background-position: 50% 50%;
     counter-increment: page;
@@ -84,7 +84,7 @@ p>* {
 }
 
 .代, .插入 {
-    background: url('./紙背景插入.jpg');
+    background: url('./紙背景插入.webp');
     background-size: cover;
     background-position: fixed;
     border: 1px solid rgba(0, 0, 0, 0.4);