chore: extract views directory

apps/client/src/views/timeline/Timeline.module.scss

@@ -0,0 +1,114 @@
+@use '../../theme/viewerDefs' as *;
+
+$timeline-height: 1rem;
+$view-background: $ui-black;
+
+.timeline {
+  flex: 1;
+  font-weight: 600;
+  color: $ui-white;
+  background-color: $view-background;
+  box-sizing: content-box;
+  // create progress background
+  box-shadow: inset 0 1rem 0 0 $gray-1100;
+  position: relative;
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  border-left: 1px solid $view-background;
+  // avoiding content being larger than the view
+  height: calc(100% - 3rem);
+}
+
+// generate combined timeline
+.timelineBlock {
+  height: $timeline-height;
+  background: $white-60;
+  width: 100%;
+
+  &[data-status='done'] {
+    background: $active-red;
+  }
+
+  &[data-status='live'] {
+    background: linear-gradient(to right, $active-red var(--progress, 0%), $white-60 var(--progress, 0%));
+  }
+}
+
+.smallArea {
+  .content {
+    gap: 0rem;
+    writing-mode: vertical-rl;
+  }
+
+  .timeOverview {
+    opacity: 0;
+  }
+}
+
+.hide {
+  // hide text elements
+  & > div {
+    display: none;
+  }
+}
+
+.content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  padding-top: 0.25rem;
+  padding-inline-start: 0.25rem;
+  overflow: hidden;
+  line-height: 1rem;
+
+  background-color: var(--lighter, $viewer-card-bg-color);
+  border-bottom: 2px solid $view-background;
+  border-top: 2px solid $view-background;
+  box-shadow: 0 0.25rem 0 0 var(--color, $gray-300);
+
+  &[data-status='done'] {
+    opacity: $opacity-disabled;
+  }
+
+  &[data-status='live'] {
+    box-shadow: 0 0.25rem 0 0 $active-red;
+  }
+}
+
+.delay {
+  margin-top: -2rem;
+  margin-bottom: -1rem;
+}
+
+.timeOverview {
+  padding-top: 0.25rem;
+  padding-inline-start: 0.25em;
+  text-transform: capitalize;
+  white-space: normal;
+  height: 6rem;
+
+  &[data-status='done'] {
+    opacity: $opacity-disabled;
+  }
+
+  &[data-status='live'] {
+    .status {
+      color: $active-red;
+    }
+  }
+
+  &[data-status='future'] {
+    .status {
+      color: $green-500;
+    }
+  }
+}
+
+.cross {
+  text-decoration: line-through;
+}