uptime.link/catalog
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(statuspage-ui): improve styling and animations across status page components

Browse Source
This commit is contained in:
Jürgen Kunz
2025-12-23 19:16:17 +00:00
parent 213323073f
commit 183a1d0658
12 changed files with 1462 additions and 467 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
ts_web/elements/upl-statuspage-statusbar.ts
View File

@@ -54,22 +54,32 @@ export class UplStatuspageStatusbar extends DeesElement {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 64px;
padding: ${unsafeCSS(sharedStyles.spacing.md)} ${unsafeCSS(sharedStyles.spacing.lg)};
border-radius: ${unsafeCSS(sharedStyles.borderRadius.lg)};
min-height: 72px;
padding: ${unsafeCSS(sharedStyles.spacing.lg)} ${unsafeCSS(sharedStyles.spacing.xl)};
border-radius: ${unsafeCSS(sharedStyles.borderRadius.xl)};
cursor: default;
transition: all ${unsafeCSS(sharedStyles.durations.normal)} ${unsafeCSS(sharedStyles.easings.default)};
transition: all ${unsafeCSS(sharedStyles.durations.slow)} ${unsafeCSS(sharedStyles.easings.default)};
position: relative;
overflow: hidden;
font-weight: 500;
font-size: 15px;
letter-spacing: -0.01em;
background: ${sharedStyles.colors.background.card};
border: 1px solid ${sharedStyles.colors.border.default};
box-shadow: ${unsafeCSS(sharedStyles.shadows.sm)};
}
/* Gradient background overlay */
.statusbar-inner::before {
content: '';
position: absolute;
inset: 0;
opacity: 1;
transition: opacity ${unsafeCSS(sharedStyles.durations.slow)} ${unsafeCSS(sharedStyles.easings.default)};
z-index: 0;
}
/* Left accent border */
.statusbar-inner::after {
content: '';
position: absolute;
left: 0;
@@ -77,31 +87,72 @@ export class UplStatuspageStatusbar extends DeesElement {
bottom: 0;
width: 4px;
transition: background ${unsafeCSS(sharedStyles.durations.normal)} ${unsafeCSS(sharedStyles.easings.default)};
z-index: 1;
}
/* Operational - green gradient */
.statusbar-inner.operational {
background: ${sharedStyles.colors.background.card};
}
.statusbar-inner.operational::before {
background: ${sharedStyles.statusGradients.operational};
}
.statusbar-inner.operational::after {
background: ${sharedStyles.colors.status.operational};
}
/* Degraded - yellow/amber gradient */
.statusbar-inner.degraded {
background: ${sharedStyles.colors.background.card};
}
.statusbar-inner.degraded::before {
background: ${sharedStyles.statusGradients.degraded};
}
.statusbar-inner.degraded::after {
background: ${sharedStyles.colors.status.degraded};
}
/* Partial outage - orange/red gradient */
.statusbar-inner.partial_outage {
background: ${sharedStyles.colors.background.card};
}
.statusbar-inner.partial_outage::before {
background: ${sharedStyles.statusGradients.partial};
}
.statusbar-inner.partial_outage::after {
background: ${sharedStyles.colors.status.partial};
}
/* Major outage - red gradient */
.statusbar-inner.major_outage {
background: ${sharedStyles.colors.background.card};
}
.statusbar-inner.major_outage::before {
background: ${sharedStyles.statusGradients.major};
}
.statusbar-inner.major_outage::after {
background: ${sharedStyles.colors.status.major};
}
/* Maintenance - blue gradient */
.statusbar-inner.maintenance {
background: ${sharedStyles.colors.background.card};
}
.statusbar-inner.maintenance::before {
background: ${sharedStyles.statusGradients.maintenance};
}
.statusbar-inner.maintenance::after {
background: ${sharedStyles.colors.status.maintenance};
}
.statusbar-inner:hover {
border-color: ${sharedStyles.colors.border.muted};
box-shadow: ${unsafeCSS(sharedStyles.shadows.base)};
box-shadow: ${unsafeCSS(sharedStyles.shadows.md)};
transform: translateY(-1px);
}
.statusbar-inner:hover::before {
opacity: 1.2;
}
.status-indicator {