refactor: timeline has overrideable styles

cpvalente · Oct 21, 2024 · f0e14be · f0e14be
1 parent dd13eb3
commit f0e14be
Showing 1 changed file with 10 additions and 10 deletions.
diff --git a/apps/client/src/views/timeline/Timeline.module.scss b/apps/client/src/views/timeline/Timeline.module.scss
@@ -1,40 +1,40 @@
 @use '../../theme/viewerDefs' as *;
 
 $timeline-height: 1rem;
-$view-background: $ui-black;
+$timeline-color: color-mix(in srgb, transparent 60%, var(--background-color-override, $viewer-background-color));
 
 .timeline {
   flex: 1;
   font-weight: 600;
-  color: $ui-white;
-  background-color: $view-background;
+  color: var(--color-override, $viewer-color);
+  background: var(--background-color-override, $viewer-background-color);
   box-sizing: content-box;
   // create progress background
-  box-shadow: inset 0 1rem 0 0 $gray-1100;
+  box-shadow: inset 0 1rem 0 0 var(--card-background-color-override, $viewer-card-bg-color);
   position: relative;
 }
 
 .column {
   display: flex;
   flex-direction: column;
   position: absolute;
-  border-left: 1px solid $view-background;
+  border-left: 1px solid var(--background-color-override, $viewer-background-color);
   // avoiding content being larger than the view
   height: calc(100% - 3rem);
 }
 
 // generate combined timeline
 .timelineBlock {
   height: $timeline-height;
-  background: $white-60;
+  background: $timeline-color;
   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%));
+    background: linear-gradient(to right, $active-red var(--progress, 0%), $timeline-color var(--progress, 0%));
   }
 }
 
@@ -66,9 +66,9 @@ $view-background: $ui-black;
   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;
+  background-color: var(--lighter, var(--card-background-color-override, $viewer-card-bg-color));
+  border-bottom: 2px solid var(--background-color-override, $viewer-background-color);
+  border-top: 2px solid var(--background-color-override, $viewer-background-color);
   box-shadow: 0 0.25rem 0 0 var(--color, $gray-300);
 
   &[data-status='done'] {