1 files changed, 27 insertions, 12 deletions
diff --git a/FrontEnd/src/app/views/timeline-common/timeline-common.sass b/FrontEnd/src/app/views/timeline-common/timeline-common.sass
index 4151bfcc..8d9ee04d 100644
--- a/FrontEnd/src/app/views/timeline-common/timeline-common.sass
+++ b/FrontEnd/src/app/views/timeline-common/timeline-common.sass
@@ -4,8 +4,13 @@
   z-index: 0
   position: relative
 
+  background-image: url("views/timeline-common/timeline-background.svg")
+  background-size: 100% auto
+  background-repeat: no-repeat repeat
+
   &-item
-    display: flex
+    position: relative
+    padding: 0.5em
 
 $timeline-line-width: 7px
 $timeline-line-node-radius: 18px
@@ -30,11 +35,15 @@ $timeline-line-color-current: #36c2e6
 
 .timeline-line
   &-area-container
+    position: absolute
     display: flex
     justify-content: flex-end
     padding-right: 5px
+    z-index: 1
 
-    flex: 0 0 auto
+    top: 0em
+    bottom: 0em
+    left: 0.5em
     width: 60px
 
   &-area
@@ -48,14 +57,14 @@ $timeline-line-color-current: #36c2e6
     background: $timeline-line-color
 
     &.start
-      height: 14px
+      height: 1.4em
       flex: 0 0 auto
 
     &.end
       flex: 1 1 auto
 
     &.current-end
-      height: 20px
+      height: 2em
       flex: 0 0 auto
       background: linear-gradient($timeline-line-color-current, transparent)
 
@@ -78,13 +87,16 @@ $timeline-line-color-current: #36c2e6
     animation-name: timeline-line-node-noncurrent
 
 .timeline-top
-  display: flex
-  justify-content: space-between
+  position: relative
+  text-align: right
 
   .timeline-line-segment
     flex: 1 1 auto
 
 .current
+  &.timeline-item
+    padding-bottom: 2.5em
+
   .timeline-line
     &-segment
 
@@ -97,9 +109,15 @@ $timeline-line-color-current: #36c2e6
     &-node
       animation-name: timeline-line-node-current
 
-.timeline-content-area
-  padding: 10px 0
-  flex-grow: 1
+.timeline-item-card
+  @extend .cru-card
+  @extend .clearfix
+  position: relative
+  padding: 0.5em 2em 0.5em 60px
+  transition: background 0.5s
+
+  &:hover
+    background: $gray-200
 
 .timeline-item-delete-button
   position: absolute
@@ -121,9 +139,6 @@ $timeline-line-color-current: #36c2e6
   background: change-color($color: white, $alpha: 0.8)
   z-index: 100
 
-.timeline-page-top-space
-  transition: height 0.5s
-
 .timeline-sync-state-badge
   font-size: 0.8em
   padding: 3px 8px