cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-19 22:24:11 +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 *;
$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;
}
@@ -18,7 +18,7 @@ $view-background: $ui-black;
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);
}
@@ -26,7 +26,7 @@ $view-background: $ui-black;
// generate combined timeline
.timelineBlock {
height: $timeline-height;
background: $white-60;
background: $timeline-color;
width: 100%;
&[data-status='done'] {
@@ -34,7 +34,7 @@ $view-background: $ui-black;
}
&[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'] {