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

106
ts_web/elements/upl-statuspage-footer.ts
View File

@@ -144,17 +144,33 @@ export class UplStatuspageFooter extends DeesElement {
}
.footer-link {
color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
color: ${sharedStyles.colors.text.secondary};
text-decoration: none;
transition: color 0.15s ease;
transition: all ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
font-size: 13px;
font-weight: 400;
position: relative;
}
.footer-link::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 1px;
background: ${sharedStyles.colors.text.primary};
transition: width ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
}
.footer-link:hover {
color: ${sharedStyles.colors.text.primary};
}
.footer-link:hover::after {
width: 100%;
}
.footer-actions {
display: flex;
flex-direction: column;
@@ -164,25 +180,33 @@ export class UplStatuspageFooter extends DeesElement {
.action-button {
padding: 8px 16px;
height: 36px;
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
border-radius: 6px;
border: 1px solid ${sharedStyles.colors.border.default};
background: ${sharedStyles.colors.background.card};
border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
cursor: pointer;
text-align: center;
transition: all 0.15s ease;
transition: all ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
white-space: nowrap;
font-size: 13px;
font-weight: 400;
font-weight: 500;
color: ${sharedStyles.colors.text.primary};
font-family: ${unsafeCSS(sharedStyles.fonts.base)};
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.action-button:hover {
background: ${cssManager.bdTheme('#f9fafb', '#18181b')};
border-color: ${cssManager.bdTheme('#d1d5db', '#3f3f46')};
background: ${sharedStyles.colors.background.secondary};
border-color: ${sharedStyles.colors.border.muted};
transform: translateY(-1px);
box-shadow: ${unsafeCSS(sharedStyles.shadows.sm)};
}
.action-button:active {
transform: translateY(0);
box-shadow: none;
}
.footer-bottom {
@@ -203,30 +227,43 @@ export class UplStatuspageFooter extends DeesElement {
.social-links {
display: flex;
gap: ${unsafeCSS(sharedStyles.spacing.md)};
gap: ${unsafeCSS(sharedStyles.spacing.sm)};
align-items: center;
}
.social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 6px;
transition: all 0.15s ease;
color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
width: 34px;
height: 34px;
border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
transition: all ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
color: ${sharedStyles.colors.text.muted};
border: 1px solid transparent;
}
.social-link:hover {
color: ${sharedStyles.colors.text.primary};
background: ${cssManager.bdTheme('#f3f4f6', '#27272a')};
background: ${sharedStyles.colors.background.secondary};
border-color: ${sharedStyles.colors.border.default};
transform: translateY(-2px);
box-shadow: ${unsafeCSS(sharedStyles.shadows.sm)};
}
.social-link:active {
transform: translateY(0);
}
.social-link svg {
width: 16px;
height: 16px;
fill: currentColor;
transition: transform ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
}
.social-link:hover svg {
transform: scale(1.1);
}
.copyright {
@@ -241,20 +278,37 @@ export class UplStatuspageFooter extends DeesElement {
.powered-by {
font-size: 12px;
color: ${cssManager.bdTheme('#9ca3af', '#71717a')};
color: ${sharedStyles.colors.text.muted};
text-align: right;
}
.powered-by a {
color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
color: ${sharedStyles.colors.text.secondary};
text-decoration: none;
transition: color 0.15s ease;
transition: all ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
font-weight: 500;
position: relative;
}
.powered-by a::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
width: 0;
height: 1px;
background: ${sharedStyles.colors.text.primary};
transition: width ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
}
.powered-by a:hover {
color: ${sharedStyles.colors.text.primary};
}
.powered-by a:hover::after {
width: 100%;
}
.status-update {
padding: 12px 16px;
background: ${cssManager.bdTheme('#f9fafb', '#18181b')};