💁🏻重构页面，采用更完善动画和更精细的主页(@JLinMr)

main/fclite.css

@@ -41,10 +41,6 @@
     --load-more-btn-bg-color: var(--container-bg-color);
 }
 
-body {
-    background-color: var(--background-color);
-}
-
 #friend-circle-lite-root {
     width: 100%;
 }
@@ -119,7 +115,7 @@ body {
     z-index: 999;
     opacity: 0;
     visibility: hidden;
-    transition: opacity 0.3s;
+    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
 }
 
 .modal-open {
@@ -128,10 +124,11 @@ body {
 }
 
 .modal-content {
+    opacity: 0;
     position: relative;
     top: 50%;
     left: 50%;
-    transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%) translateY(-50px);
     width: 350px;
     background-color: var(--modal-content-bg-color);
     padding: 20px;
@@ -140,7 +137,12 @@ body {
     max-height: 90%;
     overflow: hidden;
     border-radius: 20px;
-    transition: opacity 0.3s;
+    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
+}
+
+.modal.modal-open .modal-content {
+    transform: translate(-50%, -50%) translateY(0);
+    opacity: 1;
 }
 
 .modal-content:hover #modal-bg  {
@@ -293,7 +295,7 @@ body {
     font-size: 12px;
     color: var(--author-color);
     padding: 5px;
-    height: 25px;
+    line-height: 15px;
 }
 
 .card-author:hover {