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

update footer

Browse Source
This commit is contained in:
Jürgen Kunz
2025-06-30 07:24:15 +00:00
parent df4dd3f539
commit f9604263e3
2 changed files with 195 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -118,10 +118,10 @@ export class UplStatuspageFooter extends DeesElement {
}
.footer-main {
display: grid;
grid-template-columns: 1fr auto;
gap: ${unsafeCSS(spacing['2xl'])};
display: flex;
justify-content: space-between;
align-items: start;
gap: ${unsafeCSS(spacing['2xl'])};
}
.company-info {
@@ -131,9 +131,10 @@ export class UplStatuspageFooter extends DeesElement {
}
.company-name {
font-size: 20px;
font-weight: 600;
font-size: 16px;
font-weight: 500;
color: ${colors.text.primary};
letter-spacing: -0.01em;
}
.company-links {
@@ -143,15 +144,15 @@ export class UplStatuspageFooter extends DeesElement {
}
.footer-link {
color: ${colors.text.secondary};
color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
text-decoration: none;
transition: color 0.2s ease;
font-size: 14px;
transition: color 0.15s ease;
font-size: 13px;
font-weight: 400;
}
.footer-link:hover {
color: ${colors.text.primary};
text-decoration: underline;
}
.footer-actions {
@@ -161,37 +162,36 @@ export class UplStatuspageFooter extends DeesElement {
}
.action-button {
padding: ${unsafeCSS(spacing.sm)} ${unsafeCSS(spacing.md)};
border: 1px solid ${colors.border.default};
background: transparent;
border-radius: ${unsafeCSS(borderRadius.base)};
padding: 8px 16px;
height: 36px;
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
border-radius: 6px;
cursor: pointer;
text-align: center;
transition: all 0.2s ease;
transition: all 0.15s ease;
white-space: nowrap;
font-size: 14px;
font-weight: 500;
font-size: 13px;
font-weight: 400;
color: ${colors.text.primary};
font-family: ${unsafeCSS(fonts.base)};
display: inline-flex;
align-items: center;
justify-content: center;
}
.action-button:hover {
background: ${colors.background.secondary};
border-color: ${colors.border.muted};
transform: translateY(-1px);
}
.action-button:active {
transform: translateY(0);
background: ${cssManager.bdTheme('#f9fafb', '#18181b')};
border-color: ${cssManager.bdTheme('#d1d5db', '#3f3f46')};
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: ${unsafeCSS(spacing.xl)};
margin-top: ${unsafeCSS(spacing.xl)};
border-top: 1px solid ${colors.border.default};
padding-top: ${unsafeCSS(spacing.lg)};
margin-top: ${unsafeCSS(spacing.lg)};
border-top: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
}
.footer-meta {
@@ -208,60 +208,62 @@ export class UplStatuspageFooter extends DeesElement {
}
.social-link {
display: inline-block;
width: 20px;
height: 20px;
opacity: 0.7;
transition: all 0.2s ease;
color: ${colors.text.secondary};
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')};
}
.social-link:hover {
opacity: 1;
color: ${colors.text.primary};
transform: translateY(-1px);
background: ${cssManager.bdTheme('#f3f4f6', '#27272a')};
}
.social-link svg {
width: 100%;
height: 100%;
width: 16px;
height: 16px;
fill: currentColor;
}
.copyright {
font-size: 14px;
color: ${colors.text.secondary};
font-size: 13px;
color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
}
.last-updated {
font-size: 13px;
color: ${colors.text.muted};
font-size: 12px;
color: ${cssManager.bdTheme('#9ca3af', '#71717a')};
}
.powered-by {
font-size: 13px;
color: ${colors.text.muted};
font-size: 12px;
color: ${cssManager.bdTheme('#9ca3af', '#71717a')};
text-align: right;
}
.powered-by a {
color: ${colors.text.secondary};
color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
text-decoration: none;
transition: color 0.2s ease;
transition: color 0.15s ease;
}
.powered-by a:hover {
color: ${colors.text.primary};
text-decoration: underline;
}
.status-update {
padding: ${unsafeCSS(spacing.md)} ${unsafeCSS(spacing.lg)};
background: ${colors.background.muted};
border-radius: ${unsafeCSS(borderRadius.base)};
font-size: 14px;
padding: 12px 16px;
background: ${cssManager.bdTheme('#f9fafb', '#18181b')};
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
border-radius: 6px;
font-size: 13px;
margin-bottom: ${unsafeCSS(spacing.lg)};
line-height: 1.6;
line-height: 1.5;
color: ${cssManager.bdTheme('#4b5563', '#d1d5db')};
}
.language-selector {
@@ -348,25 +350,24 @@ export class UplStatuspageFooter extends DeesElement {
}
.additional-link {
font-size: 14px;
color: ${colors.text.secondary};
font-size: 13px;
color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
text-decoration: none;
transition: color 0.2s ease;
transition: color 0.15s ease;
}
.additional-link:hover {
color: ${colors.text.primary};
text-decoration: underline;
}
@media (max-width: 640px) {
.container {
padding: ${unsafeCSS(spacing.xl)} ${unsafeCSS(spacing.md)};
padding: ${unsafeCSS(spacing.lg)} ${unsafeCSS(spacing.md)};
}
.footer-main {
grid-template-columns: 1fr;
gap: ${unsafeCSS(spacing.xl)};
flex-direction: column;
gap: ${unsafeCSS(spacing.lg)};
}
.footer-bottom {
@@ -411,13 +412,16 @@ export class UplStatuspageFooter extends DeesElement {
${this.offline ? html`
<div class="offline-indicator">
<span>⚠</span> You are currently offline
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 2V6M6 10H6.01M11 6C11 8.76142 8.76142 11 6 11C3.23858 11 1 8.76142 1 6C1 3.23858 3.23858 1 6 1C8.76142 1 11 3.23858 11 6Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
You are currently offline
</div>
` : ''}
${this.latestStatusUpdate ? html`
<div class="status-update">
<strong>Latest Update:</strong> ${this.latestStatusUpdate}
Latest Update: ${this.latestStatusUpdate}
</div>
` : ''}