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

update

Browse Source
This commit is contained in:
Jürgen Kunz
2025-06-29 22:36:12 +00:00
parent 313e736f29
commit f7d3709dac
4 changed files with 89 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
ts_web/elements/upl-statuspage-header.ts
View File

@@ -1,6 +1,6 @@
import { DeesElement, property, html, customElement, type TemplateResult, css, cssManager, unsafeCSS } from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';
import { fonts } from '../styles/shared.styles.js';
import { fonts, shadows } from '../styles/shared.styles.js';
import { demoFunc } from './upl-statuspage-header.demo.js';
declare global {
@@ -46,10 +46,9 @@ export class UplStatuspageHeader extends DeesElement {
css`
:host {
display: block;
background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
background: transparent;
font-family: ${unsafeCSS(fonts.base)};
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#262626')};
}
.mainbox {
@@ -66,10 +65,11 @@ export class UplStatuspageHeader extends DeesElement {
}
.mainbox .actions .actionButton {
background: transparent;
background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.8)', 'rgba(0, 0, 0, 0.6)')};
backdrop-filter: blur(10px);
font-size: 14px;
font-weight: 500;
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#262626')};
border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.08)')};
padding: 8px 16px;
border-radius: 6px;
cursor: pointer;
@@ -80,12 +80,14 @@ export class UplStatuspageHeader extends DeesElement {
justify-content: center;
min-height: 36px;
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
box-shadow: ${unsafeCSS(shadows.sm)};
}
.mainbox .actions .actionButton:hover {
background: ${cssManager.bdTheme('#f9fafb', '#262626')};
border-color: ${cssManager.bdTheme('#d1d5db', '#404040')};
background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.95)', 'rgba(0, 0, 0, 0.8)')};
border-color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.12)', 'rgba(255, 255, 255, 0.12)')};
transform: translateY(-1px);
box-shadow: ${unsafeCSS(shadows.md)};
}
.mainbox .actions .actionButton:active {
@@ -93,7 +95,7 @@ export class UplStatuspageHeader extends DeesElement {
}
.header-content {
padding: 48px 0 64px 0;
padding: 64px 0 48px 0;
text-align: center;
}
@@ -144,12 +146,14 @@ export class UplStatuspageHeader extends DeesElement {
.actionButton.primary {
background: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
color: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
border-color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
border-color: transparent;
backdrop-filter: none;
}
.actionButton.primary:hover {
background: ${cssManager.bdTheme('#262626', '#f4f4f5')};
border-color: ${cssManager.bdTheme('#262626', '#f4f4f5')};
background: ${cssManager.bdTheme('#262626', '#e5e7eb')};
transform: translateY(-1px);
box-shadow: ${unsafeCSS(shadows.md)};
}
`
]