serve.zone/dcrouter
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: update styles in various components to use dynamic theming and improve layout consistency

Browse Source
This commit is contained in:
Jürgen Kunz
2025-06-19 12:14:52 +00:00
parent 2ab2e30336
commit 3ba47f9a71
9 changed files with 333 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
ts_web/elements/ops-view-network.ts
View File

@@ -74,14 +74,11 @@ export class OpsViewNetwork extends DeesElement {
}
.controlBar {
background: white;
border: 1px solid #e9ecef;
border-radius: 8px;
padding: 16px;
display: flex;
gap: 16px;
align-items: center;
flex-wrap: wrap;
margin-bottom: 24px;
}
.controlGroup {
@@ -92,7 +89,7 @@ export class OpsViewNetwork extends DeesElement {
.controlLabel {
font-size: 14px;
color: #666;
color: ${cssManager.bdTheme('#666', '#999')};
margin-right: 8px;
}
@@ -114,28 +111,28 @@ export class OpsViewNetwork extends DeesElement {
}
.protocolBadge.http {
background: #e3f2fd;
color: #1976d2;
background: ${cssManager.bdTheme('#e3f2fd', '#1a2c3a')};
color: ${cssManager.bdTheme('#1976d2', '#5a9fd4')};
}
.protocolBadge.https {
background: #e8f5e9;
color: #388e3c;
background: ${cssManager.bdTheme('#e8f5e9', '#1a3a1a')};
color: ${cssManager.bdTheme('#388e3c', '#66bb6a')};
}
.protocolBadge.tcp {
background: #fff3e0;
color: #f57c00;
background: ${cssManager.bdTheme('#fff3e0', '#3a2a1a')};
color: ${cssManager.bdTheme('#f57c00', '#ff9933')};
}
.protocolBadge.smtp {
background: #f3e5f5;
color: #7b1fa2;
background: ${cssManager.bdTheme('#f3e5f5', '#2a1a3a')};
color: ${cssManager.bdTheme('#7b1fa2', '#ba68c8')};
}
.protocolBadge.dns {
background: #e0f2f1;
color: #00796b;
background: ${cssManager.bdTheme('#e0f2f1', '#1a3a3a')};
color: ${cssManager.bdTheme('#00796b', '#4db6ac')};
}
.statusBadge {
@@ -148,18 +145,18 @@ export class OpsViewNetwork extends DeesElement {
}
.statusBadge.success {
background: #e8f5e9;
color: #388e3c;
background: ${cssManager.bdTheme('#e8f5e9', '#1a3a1a')};
color: ${cssManager.bdTheme('#388e3c', '#66bb6a')};
}
.statusBadge.error {
background: #ffebee;
color: #d32f2f;
background: ${cssManager.bdTheme('#ffebee', '#3a1a1a')};
color: ${cssManager.bdTheme('#d32f2f', '#ff6666')};
}
.statusBadge.warning {
background: #fff3e0;
color: #f57c00;
background: ${cssManager.bdTheme('#fff3e0', '#3a2a1a')};
color: ${cssManager.bdTheme('#f57c00', '#ff9933')};
}
`,
];