封装页面CSS到样式表，全屏歌词居中显示

src/chanting/evening_chanting_A.md

@@ -4,10 +4,10 @@
   <source src="http://122.114.50.251:8010/jly/audio/大金塔晚课（礼敬洁地）1031.mp3" type="audio/mpeg">
 </audio>
 </div>
-<div class="live" id="lyriccontainer" style="font-size:4vmin;display: flex;align-items: center;justify-content: center;width:100%;flex-direction: column">
-	<div id="line-last" style="height:25vh;display: flex;flex-direction: column;width:100%" class="to-top"><span></span><span></span></div>
-	<div id="line-current" class='active' style="height:30vh;display: flex;flex-direction: column;width:100%"><span style="margin-left:4vw"></span><span style="margin-left:4vw"></span></div>
-	<div id="line-next" style="height:25vh;display: flex;flex-direction: column;width:100%" class="to-bottom"><span style="margin-left:6vw"></span><span style="margin-left:6vw"></span></div>
+<div class="live" id="lyriccontainer">
+	<div id="line-last" style="padding-left:0vw;"><span></span><span></span></div>
+	<div id="line-current" class='active' style="padding-left:4vw;height:30vh;"><span></span><span></span></div>
+	<div id="line-next"><span></span><span></span></div>
 </div>
 <button id='lyricFullscreen'> 全 屏 </button>
 <div>

src/chanting/evening_chanting_B.md

@@ -1,18 +1,17 @@
+# **晚 课**<br>**大金塔课诵本**<br>**傣调试用版**
 <div>
 <audio id="audio" controls style="width:100%;">
   <source src="http://122.114.50.251:8010/jly/audio/大金塔晚课（傣）1031.mp3" type="audio/mpeg">
 </audio>
 </div>
-<div class="live" id="lyriccontainer" style="font-size:4vmin;display: flex;align-items: center;justify-content: center;width:100%;flex-direction: column">
-	<div id="line-last" style="height:25vh;display: flex;flex-direction: column;width:100%" class="to-top"><span></span><span></span></div>
-	<div id="line-current" class='active' style="height:30vh;display: flex;flex-direction: column;width:100%"><span style="margin-left:4vw"></span><span style="margin-left:4vw"></span></div>
-	<div id="line-next" style="height:25vh;display: flex;flex-direction: column;width:100%" class="to-bottom"><span style="margin-left:6vw"></span><span style="margin-left:6vw"></span></div>
+<div class="live" id="lyriccontainer">
+	<div id="line-last" style="padding-left:0vw;"><span></span><span></span></div>
+	<div id="line-current" class='active' style="padding-left:4vw;height:30vh;"><span></span><span></span></div>
+	<div id="line-next"><span></span><span></span></div>
 </div>
 <button id='lyricFullscreen'> 全 屏 </button>
 <div>
 
-# **晚 课**<br>**大金塔课诵本**<br>**傣调试用版**
-
 ## ᩁᨲᨶᨲ᩠ᨲᨿ ᩅᨶ᩠ᨴᨶᩣ(礼拜三宝)
 
 拉答那答亚 万达那

src/chanting/evening_chanting_C.md

@@ -7,10 +7,10 @@
   <source src="http://122.114.50.251:8010/jly/audio/dhammacakka_0218.mp3" type="audio/mpeg">
 </audio>
 </div>
-<div class="live" id="lyriccontainer" style="font-size:4vmin;display: flex;align-items: center;justify-content: center;width:100%;flex-direction: column">
-	<div id="line-last" style="height:25vh;display: flex;flex-direction: column;width:100%" class="to-top"><span></span><span></span></div>
-	<div id="line-current" class='active' style="height:30vh;display: flex;flex-direction: column;width:100%"><span style="margin-left:4vw"></span><span style="margin-left:4vw"></span></div>
-	<div id="line-next" style="height:25vh;display: flex;flex-direction: column;width:100%" class="to-bottom"><span style="margin-left:6vw"></span><span style="margin-left:6vw"></span></div>
+<div class="live" id="lyriccontainer">
+	<div id="line-last" style="padding-left:0vw;"><span></span><span></span></div>
+	<div id="line-current" class='active' style="padding-left:4vw;height:30vh;"><span></span><span></span></div>
+	<div id="line-next"><span></span><span></span></div>
 </div>
 <button id='lyricFullscreen'> 全 屏 </button>
 Evaṃ me sutaṃ- ekaṃ samayaṃ bhagavā bārāṇasiyaṃ viharati isipatane migadāye. 

theme/mycss/lrc.css

@@ -1,42 +1,29 @@
+*:fullscreen, *:-webkit-full-screen, *:-moz-full-screen {
+    background-color: white;
+}
+::backdrop
+{
+    background-color: white;
+}
 .live {
-	background:white;
+	background: linear-gradient(to right, rgba(0,0,0,.1) 0%, rgba(202,234,206) 50%, rgba(0,0,0,.1) 100%);
+	font-size:4vmin;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width:100%;
+	flex-direction: column
 }
 .live .active {
-  background: rgb(202,234,206);
   font-weight:bold
 }
-.live ul{
-	list-style-type:none;	
+.live div {
+  height:25vh;
+  display: flex;
+  flex-direction: column;
+  padding-left:6vw
 }
-.live li{
-	flex-direction:column;
-}
-.liveli {
-    /*实现垂直居中*/
-    align-items: center;
-    /*实现水平居中*/
-    justify-content: center;
-	flex-direction: column
-}
-
-	
-.live ul{
-	font-family:"Times New Roman",Georgia,Serif;
-}
-
-.to-top {
-    background-image: linear-gradient(
-      to top,
-      rgba(202,234,206) 0%,
-      rgb(0,0,0,0) 60%);
-  }
 
 
-.to-bottom {
-    background-image: linear-gradient(
-      to bottom,
-      rgba(202,234,206) 0%,
-      rgb(0,0,0,0) 60%);
-  }