fix background color

README.en.md

@@ -60,6 +60,7 @@ Both APIs automatically return the respective cross-domain header according to `
 - Removed the dependency on Bootstrap for faster loading.  
 - Switched to using the official PHP and Nginx packages.
 - No longer repeatedly check integrity when retrieving images from local storage.
+- The `background_color` configuration now supports [more colors](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color)
 ### Fixes
 - Some environment variables cannot be obtained normally in some cases
 - The scheduled task actually runs once every hour, not every half hour as stated in the documentation

README.md

@@ -58,6 +58,7 @@
 - 不再依赖 bootstrap，加载更快啦
 - 改为使用官方 php、nginx 包
 - 从本地存储获取图片时不再重复检查完整性
+- `background_color` 配置项现在支持[更多种颜色](https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-color)了
 ### 修复
 - 部分环境变量在一些情况下无法被正常获取的问题
 - 定时任务实际上是一小时执行一次，而非文档说的半小时一次

app/Views/index.php

@@ -12,6 +12,7 @@
   <title>Pixiv 每日排行榜 Top<?= app\Libs\Config::$limit ?> 小挂件</title>
 
   <style>
+    body { background-color : <?= app\Libs\Config::$background_color ?>; }
     * { margin: 0; padding: 0; outline: none; }
 
     .carousel {
@@ -27,43 +28,44 @@
       display: flex;
       align-items: center;
       height: 100%;
-      background-color: #fff;
+      visibility: hidden;
     }
     img {
       width: 100vw;
     }
 
     .list-item.current {
       z-index: 2;
+      visibility: visible;
     }
 
     /* 翻页动画 */
-    .current-to-prev {
+    .current-to-prev, .current-to-next, .next-to-current, .prev-to-current {
       z-index: 1;
+      visibility: visible;
+    }
+    .current-to-prev {
       animation: slide-current-to-prev .5s cubic-bezier(0.34, 0.69, 0.1, 1);
     }
     @keyframes slide-current-to-prev {
       from { transform: translateX(0) }
       to { transform: translateX(-100vw) }
     }
     .current-to-next {
-      z-index: 1;
       animation: slide-current-to-next .5s cubic-bezier(0.34, 0.69, 0.1, 1);
     }
     @keyframes slide-current-to-next {
       from { transform: translateX(0) }
       to { transform: translateX(100vw) }
     }
     .next-to-current {
-      z-index: 1;
       animation: slide-next-to-current .5s cubic-bezier(0.34, 0.69, 0.1, 1);
     }
     @keyframes slide-next-to-current {
       from { transform: translateX(100vw) }
       to { transform: translateX(0) }
     }
     .prev-to-current {
-      z-index: 1;
       animation: slide-prev-to-current .5s cubic-bezier(0.34, 0.69, 0.1, 1);
     }
     @keyframes slide-prev-to-current {

app/Views/loading.php

@@ -12,7 +12,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Pixiv 每日排行榜 Top<?=Config::$limit?> 小挂件</title>
   <style>
-    html, body { height : 100%; background-color : #<?=Config::$background_color?>; }
+    html, body { height : 100%; background-color : <?=Config::$background_color?>; }
     body { display: flex; align-items: center; justify-content: center; margin: 0; }
     div { text-align : center; }