design.estate/dees-catalog
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Juergen Kunz
2025-06-27 15:58:26 +00:00
parent 50aa071e2e
commit 82ebd9c556
3 changed files with 330 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
ts_web/elements/dees-chart-log.ts
View File

@ -53,17 +53,17 @@ export class DeesChartLog extends DeesElement {
cssManager.defaultStyles,
css`
:host {
font-family: 'Geist Mono', 'Consolas', 'Monaco', monospace;
color: #ccc;
font-family: 'SF Mono', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
font-size: 12px;
line-height: 1.4;
line-height: 1.5;
}
.mainbox {
position: relative;
width: 100%;
height: 400px;
background: ${cssManager.bdTheme('#f8f9fa', '#0a0a0a')};
border: 1px solid ${cssManager.bdTheme('#dee2e6', '#333')};
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
border-radius: 8px;
display: flex;
flex-direction: column;
@ -71,9 +71,9 @@ export class DeesChartLog extends DeesElement {
}
.header {
background: ${cssManager.bdTheme('#e9ecef', '#1a1a1a')};
padding: 8px 16px;
border-bottom: 1px solid ${cssManager.bdTheme('#dee2e6', '#333')};
background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 7%)')};
padding: 12px 16px;
border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
display: flex;
justify-content: space-between;
align-items: center;
@ -81,8 +81,10 @@ export class DeesChartLog extends DeesElement {
}
.title {
font-weight: 600;
color: ${cssManager.bdTheme('#212529', '#fff')};
font-weight: 500;
font-size: 14px;
color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.controls {
@ -91,44 +93,48 @@ export class DeesChartLog extends DeesElement {
}
.control-button {
background: ${cssManager.bdTheme('#e9ecef', '#2a2a2a')};
border: 1px solid ${cssManager.bdTheme('#ced4da', '#444')};
border-radius: 4px;
padding: 4px 8px;
color: ${cssManager.bdTheme('#495057', '#ccc')};
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 14.9%)')};
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
border-radius: 6px;
padding: 6px 12px;
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
cursor: pointer;
font-size: 11px;
transition: all 0.2s;
font-size: 12px;
font-weight: 500;
transition: all 0.15s;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.control-button:hover {
background: ${cssManager.bdTheme('#dee2e6', '#3a3a3a')};
border-color: ${cssManager.bdTheme('#adb5bd', '#555')};
background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
}
.control-button.active {
background: ${cssManager.bdTheme('#007bff', '#4a4a4a')};
color: ${cssManager.bdTheme('#fff', '#fff')};
background: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 93.9%)')};
color: ${cssManager.bdTheme('hsl(0 0% 98%)', 'hsl(0 0% 3.9%)')};
}
.logContainer {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: 8px 16px;
padding: 16px;
font-size: 12px;
}
.logEntry {
margin-bottom: 2px;
margin-bottom: 4px;
display: flex;
white-space: pre-wrap;
word-break: break-all;
font-variant-numeric: tabular-nums;
}
.timestamp {
color: ${cssManager.bdTheme('#6c757d', '#666')};
margin-right: 8px;
color: ${cssManager.bdTheme('hsl(0 0% 63.9%)', 'hsl(0 0% 45.1%)')};
margin-right: 12px;
flex-shrink: 0;
}
@ -143,38 +149,38 @@ export class DeesChartLog extends DeesElement {
}
.level.debug {
color: ${cssManager.bdTheme('#6c757d', '#999')};
background: ${cssManager.bdTheme('rgba(108, 117, 125, 0.1)', '#333')};
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
background: ${cssManager.bdTheme('hsl(0 0% 45.1% / 0.1)', 'hsl(0 0% 63.9% / 0.1)')};
}
.level.info {
color: ${cssManager.bdTheme('#0066cc', '#4a9eff')};
background: ${cssManager.bdTheme('rgba(0, 102, 204, 0.1)', 'rgba(74, 158, 255, 0.1)')};
color: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')};
background: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.1)', 'hsl(217.2 91.2% 59.8% / 0.1)')};
}
.level.warn {
color: ${cssManager.bdTheme('#ff8800', '#ffb84a')};
background: ${cssManager.bdTheme('rgba(255, 136, 0, 0.1)', 'rgba(255, 184, 74, 0.1)')};
color: ${cssManager.bdTheme('hsl(25 95% 53%)', 'hsl(25 95% 63%)')};
background: ${cssManager.bdTheme('hsl(25 95% 53% / 0.1)', 'hsl(25 95% 63% / 0.1)')};
}
.level.error {
color: ${cssManager.bdTheme('#dc3545', '#ff4a4a')};
background: ${cssManager.bdTheme('rgba(220, 53, 69, 0.1)', 'rgba(255, 74, 74, 0.1)')};
color: ${cssManager.bdTheme('hsl(0 84.2% 60.2%)', 'hsl(0 72.2% 50.6%)')};
background: ${cssManager.bdTheme('hsl(0 84.2% 60.2% / 0.1)', 'hsl(0 72.2% 50.6% / 0.1)')};
}
.level.success {
color: ${cssManager.bdTheme('#28a745', '#4aff88')};
background: ${cssManager.bdTheme('rgba(40, 167, 69, 0.1)', 'rgba(74, 255, 136, 0.1)')};
color: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3%)', 'hsl(142.1 70.6% 45.3%)')};
background: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3% / 0.1)', 'hsl(142.1 70.6% 45.3% / 0.1)')};
}
.source {
color: ${cssManager.bdTheme('#6c757d', '#888')};
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
margin-right: 8px;
flex-shrink: 0;
}
.message {
color: ${cssManager.bdTheme('#212529', '#ddd')};
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
flex: 1;
}
@ -183,7 +189,7 @@ export class DeesChartLog extends DeesElement {
align-items: center;
justify-content: center;
height: 100%;
color: ${cssManager.bdTheme('#6c757d', '#666')};
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
font-style: italic;
}
@ -193,16 +199,16 @@ export class DeesChartLog extends DeesElement {
}
.logContainer::-webkit-scrollbar-track {
background: ${cssManager.bdTheme('#e9ecef', '#1a1a1a')};
background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 10%)')};
}
.logContainer::-webkit-scrollbar-thumb {
background: ${cssManager.bdTheme('#adb5bd', '#444')};
background: ${cssManager.bdTheme('hsl(0 0% 70%)', 'hsl(0 0% 30%)')};
border-radius: 4px;
}
.logContainer::-webkit-scrollbar-thumb:hover {
background: ${cssManager.bdTheme('#6c757d', '#555')};
background: ${cssManager.bdTheme('hsl(0 0% 60%)', 'hsl(0 0% 40%)')};
}
`,
];