1 files changed, 29 insertions, 66 deletions

diff --git a/FrontEnd/src/pages/timeline/Timeline.css b/FrontEnd/src/pages/timeline/Timeline.css
index f071f163..30ad75c9 100644
--- a/FrontEnd/src/pages/timeline/Timeline.css
+++ b/FrontEnd/src/pages/timeline/Timeline.css
@@ -1,7 +1,19 @@
 .timeline {
+  --timeline-background-color: #f3f3f3;
+  --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-shadow: 4px 2px 10px -2px var(--timeline-shadow-color);
+  --timeline-post-card-border-radius: 10px;
+  --timeline-post-text-color: #000000;
+}
+
+.timeline {
   z-index: 0;
   position: relative;
   width: 100%;
+  background-color: var(--timeline-background-color);
 }
 
 @keyframes timeline-line-node {
@@ -26,6 +38,7 @@
   from {
     transform: rotate(0turn);
   }
+
   to {
     transform: rotate(1turn);
   }
@@ -42,6 +55,7 @@
     transform: translate(0, 100%);
     opacity: 0;
   }
+
   to {
     opacity: 1;
   }
@@ -71,40 +85,46 @@
 }
 
 .timeline-line .segment {
-  width: 7px;
+  width: 12px;
   background: var(--cru-primary-color);
 }
+
 .timeline-line .segment.start {
   height: 1.8em;
   flex: 0 0 auto;
 }
+
 .timeline-line .segment.end {
   flex: 1 1 auto;
 }
+
 .timeline-line .segment.current-end {
   height: 2em;
   flex: 0 0 auto;
   background: linear-gradient(var(--cru-primary-enhance-color), white);
 }
+
 .timeline-line .node-container {
   flex: 0 0 auto;
   position: relative;
   width: 18px;
   height: 18px;
 }
+
 .timeline-line .node {
-  width: 20px;
-  height: 20px;
+  width: 24px;
+  height: 24px;
   position: absolute;
   background: var(--cru-primary-color);
-  left: -1px;
-  top: -1px;
+  left: -3px;
+  top: -3px;
   border-radius: 50%;
   box-sizing: border-box;
   z-index: 1;
   animation: 1s infinite alternate;
   animation-name: timeline-line-node;
 }
+
 .timeline-line .node-loading-edge {
   color: var(--cru-primary-color);
   width: 38px;
@@ -116,11 +136,10 @@
   z-index: 2;
   animation: 1.5s linear infinite timeline-line-node-loading-edge;
 }
+
 .timeline-line.current .segment.start {
-  background: linear-gradient(
-    var(--cru-primary-color),
-    var(--cru-primary-enhance-color)
-  );
+  background: linear-gradient(var(--cru-primary-color),
+      var(--cru-primary-enhance-color));
 }
 
 .timeline-line.current .segment.end {
@@ -137,67 +156,11 @@
   animation-name: timeline-line-node-loading;
 }
 
-.timeline-item {
-  position: relative;
-  padding: 0.5em;
-}
-
-.timeline-item-card {
-  position: relative;
-  padding: 0.5em 0.5em 0.5em 4em;
-}
-
-.timeline-item-card.enter-animation {
-  animation: 0.6s forwards;
-  opacity: 0;
-}
-
-@media (max-width: 575.98px) {
-  .timeline-item-card {
-    padding-left: 3em;
-  }
-}
-
-.timeline-item-header {
-  display: flex;
-  align-items: center;
-}
-
-.timeline-avatar {
-  border-radius: 50%;
-  width: 2em;
-  height: 2em;
-}
-
-.timeline-item-delete-button {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-}
-
-.timeline-content {
-  white-space: pre-line;
-}
-
 .timeline-content-image {
   max-width: 80%;
   max-height: 200px;
 }
 
-.timeline-date-item {
-  position: relative;
-  padding: 0.3em 0 0.3em 4em;
-}
-
-.timeline-date-item-badge {
-  display: inline-block;
-  padding: 0.1em 0.4em;
-  border-radius: 0.4em;
-  background: #7c7c7c;
-  color: white;
-  font-size: 0.8em;
-}
-
 .timeline-post-item-options-mask {
   background: rgba(255, 255, 255, 0.85);
   z-index: 100;
@@ -234,4 +197,4 @@
 .timeline-top {
   position: sticky;
   top: 56px;
-}
+}
\ No newline at end of file