cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-09-10 08:39:34 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

refactor: timeline has overrideable styles

Browse Source
This commit is contained in:
Carlos Valente
2024-10-21 22:11:37 +02:00
committed by Carlos Valente
parent dd13eb31d8
commit 59c1c77d48
1 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/views/timeline/Timeline.module.scss
+10 -10
View File
@@ -1,16 +1,16 @@
@use '../../theme/viewerDefs' as *; @use '../../theme/viewerDefs' as *;
$timeline-height: 1rem; $timeline-height: 1rem;
$view-background: $ui-black; $timeline-color: color-mix(in srgb, transparent 60%, var(--background-color-override, $viewer-background-color));
.timeline { .timeline {
flex: 1; flex: 1;
font-weight: 600; font-weight: 600;
color: $ui-white; color: var(--color-override, $viewer-color);
background-color: $view-background; background: var(--background-color-override, $viewer-background-color);
box-sizing: content-box; box-sizing: content-box;
// create progress background // 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; position: relative;
} }
@@ -18,7 +18,7 @@ $view-background: $ui-black;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: absolute; 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 // avoiding content being larger than the view
height: calc(100% - 3rem); height: calc(100% - 3rem);
} }
@@ -26,7 +26,7 @@ $view-background: $ui-black;
// generate combined timeline // generate combined timeline
.timelineBlock { .timelineBlock {
height: $timeline-height; height: $timeline-height;
background: $white-60; background: $timeline-color;
width: 100%; width: 100%;
&[data-status='done'] { &[data-status='done'] {
@@ -34,7 +34,7 @@ $view-background: $ui-black;
} }
&[data-status='live'] { &[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; overflow: hidden;
line-height: 1rem; line-height: 1rem;
background-color: var(--lighter, $viewer-card-bg-color); background-color: var(--lighter, var(--card-background-color-override, $viewer-card-bg-color));
border-bottom: 2px solid $view-background; border-bottom: 2px solid var(--background-color-override, $viewer-background-color);
border-top: 2px solid $view-background; border-top: 2px solid var(--background-color-override, $viewer-background-color);
box-shadow: 0 0.25rem 0 0 var(--color, $gray-300); box-shadow: 0 0.25rem 0 0 var(--color, $gray-300);
&[data-status='done'] { &[data-status='done'] {