From 3a54aa6171ad14854e877e1b4f320f808ed61811 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Tue, 15 Aug 2023 01:37:16 +0800
Subject: ...

---
 FrontEnd/src/pages/timeline/Timeline.css               |  8 +++++++-
 FrontEnd/src/pages/timeline/TimelinePostCard.css       |  3 ++-
 FrontEnd/src/pages/timeline/TimelinePostCreateView.css | 11 +++++++++++
 FrontEnd/src/pages/timeline/TimelinePostCreateView.tsx |  2 +-
 4 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/FrontEnd/src/pages/timeline/Timeline.css b/FrontEnd/src/pages/timeline/Timeline.css
index 419ab9b1..ba5f7b04 100644
--- a/FrontEnd/src/pages/timeline/Timeline.css
+++ b/FrontEnd/src/pages/timeline/Timeline.css
@@ -2,12 +2,18 @@
   --timeline-shadow-color: #00000080;
   --timeline-post-line-color: #eadd2c;
   --timeline-post-line-shadow: 2px 1px 10px -1px var(--timeline-shadow-color);
-  --timeline-post-card-background-color: rgb(255, 255, 255);
+  --timeline-post-card-background-color: hsl(0, 0%, 100%);
   --timeline-post-card-shadow: 4px 2px 10px -2px var(--timeline-shadow-color);
   --timeline-post-card-border-radius: 10px;
   --timeline-post-text-color: #000000;
 }
 
+@media (prefers-color-scheme: dark) {
+  .timeline {
+    --timeline-post-card-background-color: hsl(0, 0%, 12%);
+  }
+}
+
 .timeline {
   z-index: 0;
   position: relative;
diff --git a/FrontEnd/src/pages/timeline/TimelinePostCard.css b/FrontEnd/src/pages/timeline/TimelinePostCard.css
index 67b447aa..f60610c0 100644
--- a/FrontEnd/src/pages/timeline/TimelinePostCard.css
+++ b/FrontEnd/src/pages/timeline/TimelinePostCard.css
@@ -1,8 +1,9 @@
 .timeline-post-card {
   padding: 1em 1em 1em 3em;
-  background-color: var(--cru-background-color);
+  background-color: var(--timeline-post-card-background-color);
   box-shadow: var(--timeline-post-card-shadow);
   border-radius: var(--timeline-post-card-border-radius);
+  border: none;
   position: relative;
   z-index: 1;
 }
\ No newline at end of file
diff --git a/FrontEnd/src/pages/timeline/TimelinePostCreateView.css b/FrontEnd/src/pages/timeline/TimelinePostCreateView.css
index d33d4bb7..f54c5103 100644
--- a/FrontEnd/src/pages/timeline/TimelinePostCreateView.css
+++ b/FrontEnd/src/pages/timeline/TimelinePostCreateView.css
@@ -16,6 +16,17 @@
 .timeline-post-create-edit-text {
   width: 100%;
   height: 100%;
+  background-color: var(--cru-background-color);
+  color: var(--cru-text-primary-color);
+  border: 1px solid transparent;
+}
+
+.timeline-post-create-edit-text:hover {
+  border-color: var(--cru-button-secondary-normal-color)
+}
+
+.timeline-post-create-edit-text:focus {
+  border-color: var(--cru-button-secondary-normal-color)
 }
 
 .timeline-post-create-image {
diff --git a/FrontEnd/src/pages/timeline/TimelinePostCreateView.tsx b/FrontEnd/src/pages/timeline/TimelinePostCreateView.tsx
index 52b6c3d3..572a9119 100644
--- a/FrontEnd/src/pages/timeline/TimelinePostCreateView.tsx
+++ b/FrontEnd/src/pages/timeline/TimelinePostCreateView.tsx
@@ -42,7 +42,7 @@ function TimelinePostEditText(props: TimelinePostEditTextProps) {
       onChange={(event) => {
         onChange(event.target.value);
       }}
-      className={className}
+      className={classNames("timeline-post-create-edit-text", className)}
     />
   );
 }
-- 
cgit v1.2.3