From 96d829517f316eae6d8eb95dce51071fcb4ec4e3 Mon Sep 17 00:00:00 2001
From: mokeyjay <ggmokeyjay@gmail.com>
Date: Mon, 11 Dec 2023 01:45:27 +0800
Subject: [PATCH] fix background color

---
 README.en.md          |  1 +
 README.md             |  1 +
 app/Views/index.php   | 12 +++++++-----
 app/Views/loading.php |  2 +-
 4 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/README.en.md b/README.en.md
index 8e290a7..d4f9258 100755
--- a/README.en.md
+++ b/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
diff --git a/README.md b/README.md
index 061f670..c02aa6a 100755
--- a/README.md
+++ b/README.md
@@ -58,6 +58,7 @@
 - 不再依赖 bootstrap，加载更快啦
 - 改为使用官方 php、nginx 包
 - 从本地存储获取图片时不再重复检查完整性
+- `background_color` 配置项现在支持[更多种颜色](https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-color)了
 ### 修复
 - 部分环境变量在一些情况下无法被正常获取的问题
 - 定时任务实际上是一小时执行一次，而非文档说的半小时一次
diff --git a/app/Views/index.php b/app/Views/index.php
index b666fde..ef3aba0 100755
--- a/app/Views/index.php
+++ b/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,7 +28,7 @@
       display: flex;
       align-items: center;
       height: 100%;
-      background-color: #fff;
+      visibility: hidden;
     }
     img {
       width: 100vw;
@@ -35,11 +36,15 @@
 
     .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 {
@@ -47,7 +52,6 @@
       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 {
@@ -55,7 +59,6 @@
       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 {
@@ -63,7 +66,6 @@
       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 {
diff --git a/app/Views/loading.php b/app/Views/loading.php
index a71ec58..bcd103f 100644
--- a/app/Views/loading.php
+++ b/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; }