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

162
ts_web/elements/upl-statuspage-assetsselector.ts
View File

@@ -76,23 +76,24 @@ export class UplStatuspageAssetsselector extends DeesElement {
flex: 1;
min-width: 200px;
padding: ${unsafeCSS(sharedStyles.spacing.xs)} ${unsafeCSS(sharedStyles.spacing.sm)};
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
border: 1px solid ${sharedStyles.colors.border.default};
border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
background: ${sharedStyles.colors.background.card};
color: ${sharedStyles.colors.text.primary};
font-size: 13px;
font-family: ${unsafeCSS(sharedStyles.fonts.base)};
transition: all 0.2s ease;
transition: all ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
height: 32px;
}
.search-input:focus {
outline: none;
border-color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
border-color: ${sharedStyles.colors.text.primary};
box-shadow: 0 0 0 2px ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)')};
}
.search-input::placeholder {
color: ${cssManager.bdTheme('#9ca3af', '#71717a')};
color: ${sharedStyles.colors.text.muted};
}
.filter-button {
@@ -100,27 +101,28 @@ export class UplStatuspageAssetsselector extends DeesElement {
align-items: center;
justify-content: center;
padding: ${unsafeCSS(sharedStyles.spacing.xs)} ${unsafeCSS(sharedStyles.spacing.sm)};
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
border: 1px solid ${sharedStyles.colors.border.default};
border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
background: transparent;
color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
background: ${sharedStyles.colors.background.card};
color: ${sharedStyles.colors.text.secondary};
cursor: pointer;
font-size: 13px;
font-weight: 400;
font-weight: 500;
font-family: ${unsafeCSS(sharedStyles.fonts.base)};
transition: all 0.2s ease;
transition: all ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
height: 32px;
}
.filter-button:hover {
border-color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
border-color: ${sharedStyles.colors.border.muted};
color: ${sharedStyles.colors.text.primary};
box-shadow: ${unsafeCSS(sharedStyles.shadows.sm)};
}
.filter-button.active {
background: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
color: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
border-color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
background: ${sharedStyles.colors.text.primary};
color: ${sharedStyles.colors.background.primary};
border-color: ${sharedStyles.colors.text.primary};
}
.selected-services {
@@ -134,56 +136,99 @@ export class UplStatuspageAssetsselector extends DeesElement {
display: inline-flex;
align-items: center;
gap: ${unsafeCSS(sharedStyles.spacing.xs)};
padding: ${unsafeCSS(sharedStyles.spacing.xs)} ${unsafeCSS(sharedStyles.spacing.md)};
background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
padding: 6px ${unsafeCSS(sharedStyles.spacing.md)};
background: ${sharedStyles.colors.background.card};
border: 1px solid ${sharedStyles.colors.border.default};
border-radius: ${unsafeCSS(sharedStyles.borderRadius.full)};
font-size: 13px;
transition: all 0.2s ease;
font-weight: 500;
transition: all ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
animation: pillFadeIn 0.3s ${unsafeCSS(sharedStyles.easings.default)} both;
}
.service-pill:nth-child(1) { animation-delay: 0ms; }
.service-pill:nth-child(2) { animation-delay: 30ms; }
.service-pill:nth-child(3) { animation-delay: 60ms; }
.service-pill:nth-child(4) { animation-delay: 90ms; }
.service-pill:nth-child(5) { animation-delay: 120ms; }
@keyframes pillFadeIn {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
.service-pill:hover {
border-color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
border-color: ${sharedStyles.colors.border.muted};
box-shadow: ${unsafeCSS(sharedStyles.shadows.sm)};
transform: translateY(-1px);
}
.service-pill .status-dot {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
.service-pill .status-dot.operational {
box-shadow: 0 0 0 2px ${cssManager.bdTheme('rgba(34, 197, 94, 0.2)', 'rgba(34, 197, 94, 0.3)')};
}
.manage-button {
display: inline-flex;
align-items: center;
gap: ${unsafeCSS(sharedStyles.spacing.xs)};
padding: ${unsafeCSS(sharedStyles.spacing.xs)} ${unsafeCSS(sharedStyles.spacing.md)};
background: transparent;
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
padding: 6px ${unsafeCSS(sharedStyles.spacing.md)};
background: ${sharedStyles.colors.background.card};
border: 1px solid ${sharedStyles.colors.border.default};
border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
transition: all ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
color: ${sharedStyles.colors.text.secondary};
font-family: ${unsafeCSS(sharedStyles.fonts.base)};
}
.manage-button:hover {
border-color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
border-color: ${sharedStyles.colors.border.muted};
color: ${sharedStyles.colors.text.primary};
box-shadow: ${unsafeCSS(sharedStyles.shadows.sm)};
transform: translateY(-1px);
}
.manage-button:active {
transform: translateY(0);
}
.expandable-section {
margin-top: ${unsafeCSS(sharedStyles.spacing.lg)};
overflow: hidden;
transition: all 0.3s ease;
animation: expandIn 0.3s ${unsafeCSS(sharedStyles.easings.default)};
}
@keyframes expandIn {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.expandable-content {
padding: ${unsafeCSS(sharedStyles.spacing.lg)};
background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
background: ${sharedStyles.colors.background.secondary};
border: 1px solid ${sharedStyles.colors.border.default};
border-radius: ${unsafeCSS(sharedStyles.borderRadius.lg)};
}
.assets-grid {
@@ -196,22 +241,40 @@ export class UplStatuspageAssetsselector extends DeesElement {
.asset-card {
display: flex;
align-items: center;
padding: ${unsafeCSS(sharedStyles.spacing.sm)} ${unsafeCSS(sharedStyles.spacing.md)};
background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
padding: ${unsafeCSS(sharedStyles.spacing.md)};
background: ${sharedStyles.colors.background.card};
border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
cursor: pointer;
transition: all 0.2s ease;
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
transition: all ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
border: 1px solid ${sharedStyles.colors.border.default};
gap: ${unsafeCSS(sharedStyles.spacing.sm)};
animation: cardFadeIn 0.3s ${unsafeCSS(sharedStyles.easings.default)} both;
}
@keyframes cardFadeIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.asset-card:hover {
border-color: ${cssManager.bdTheme('#d1d5db', '#3f3f46')};
border-color: ${sharedStyles.colors.border.muted};
box-shadow: ${unsafeCSS(sharedStyles.shadows.sm)};
transform: translateY(-2px);
}
.asset-card.selected {
border-color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
background: ${cssManager.bdTheme('#f9fafb', '#0f0f0f')};
border-color: ${sharedStyles.colors.text.primary};
background: ${sharedStyles.colors.background.secondary};
}
.asset-card.selected:hover {
box-shadow: ${unsafeCSS(sharedStyles.shadows.md)};
}
.asset-checkbox {
@@ -255,13 +318,24 @@ export class UplStatuspageAssetsselector extends DeesElement {
width: 8px;
height: 8px;
border-radius: ${unsafeCSS(sharedStyles.borderRadius.full)};
flex-shrink: 0;
}
.status-indicator.operational, .status-dot.operational { background: #22c55e; }
.status-indicator.degraded, .status-dot.degraded { background: #fbbf24; }
.status-indicator.partial_outage, .status-dot.partial_outage { background: #f87171; }
.status-indicator.major_outage, .status-dot.major_outage { background: #ef4444; }
.status-indicator.maintenance, .status-dot.maintenance { background: #60a5fa; }
.status-indicator.operational, .status-dot.operational {
background: ${sharedStyles.colors.status.operational};
}
.status-indicator.degraded, .status-dot.degraded {
background: ${sharedStyles.colors.status.degraded};
}
.status-indicator.partial_outage, .status-dot.partial_outage {
background: ${sharedStyles.colors.status.partial};
}
.status-indicator.major_outage, .status-dot.major_outage {
background: ${sharedStyles.colors.status.major};
}
.status-indicator.maintenance, .status-dot.maintenance {
background: ${sharedStyles.colors.status.maintenance};
}
.status-text {
font-size: 12px;