diff --git a/ts_web/elements/upl-statuspage-statusdetails.ts b/ts_web/elements/upl-statuspage-statusdetails.ts index 54184fb..94c558a 100644 --- a/ts_web/elements/upl-statuspage-statusdetails.ts +++ b/ts_web/elements/upl-statuspage-statusdetails.ts @@ -114,20 +114,10 @@ export class UplStatuspageStatusdetails extends DeesElement { } .mainbox .barContainer .bar.no-data { - background: ${colors.border.muted}; - opacity: 0.3; + background: ${cssManager.bdTheme('#d1d5db', '#52525b')}; + opacity: ${cssManager.bdTheme('0.5', '0.35')}; } - .timeIndicator { - position: absolute; - width: 2px; - height: calc(100% - ${unsafeCSS(spacing.md)}); - background: ${colors.text.primary}; - top: ${unsafeCSS(spacing.sm)}; - transition: left 0.3s; - opacity: 0.5; - pointer-events: none; - } .time-labels { display: flex; @@ -258,8 +248,6 @@ export class UplStatuspageStatusdetails extends DeesElement { ]; public render(): TemplateResult { - const timeIndicatorPosition = this.calculateTimeIndicatorPosition(); - return html`
${this.serviceName} - Last ${this.hoursToShow} Hours @@ -271,7 +259,6 @@ export class UplStatuspageStatusdetails extends DeesElement { ` : html`
${this.renderBars()} -
${this.getTimeLabel(0)} @@ -349,14 +336,6 @@ export class UplStatuspageStatusdetails extends DeesElement { }); } - private calculateTimeIndicatorPosition(): number { - const containerWidth = 888; // Approximate width minus padding - const barWidth = 19; // Width + margin - const totalBars = this.hoursToShow; - const currentMinutes = new Date().getMinutes(); - const currentPosition = (totalBars - 1 + currentMinutes / 60) * barWidth + 6; - return Math.min(currentPosition, containerWidth - 11); - } private getTimeLabel(hoursAgo: number): string { const date = new Date(Date.now() - (hoursAgo * 60 * 60 * 1000));