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

fix(dees-statsgrid): update styles to use shared theme CSS variables

Browse Source
This commit is contained in:
Jürgen Kunz
2026-04-04 10:53:53 +00:00
parent 31d728ec49
commit 4dba14060e
1 changed files with 16 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
ts_web/elements/00group-dataview/dees-statsgrid/dees-statsgrid.ts
View File

@@ -281,7 +281,7 @@ export class DeesStatsGrid extends DeesElement {
.gauge-background {
fill: none;
stroke: ${cssManager.bdTheme('#e8e8e8', '#1a1a1a')};
stroke: var(--dees-color-border-default);
stroke-width: 6;
}
@@ -329,7 +329,7 @@ export class DeesStatsGrid extends DeesElement {
.percentage-bar {
width: 100%;
height: 6px;
background: ${cssManager.bdTheme('#e8e8e8', '#1a1a1a')};
background: var(--dees-color-border-default);
border-radius: 3px;
overflow: hidden;
margin-top: auto;
@@ -337,7 +337,7 @@ export class DeesStatsGrid extends DeesElement {
.percentage-fill {
height: 100%;
background: ${cssManager.bdTheme('#333333', '#e0e0e0')};
background: var(--dees-color-text-muted);
transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 3px;
}
@@ -386,14 +386,14 @@ export class DeesStatsGrid extends DeesElement {
.multi-percentage-bar {
width: 100%;
height: 4px;
background: ${cssManager.bdTheme('#e8e8e8', '#1a1a1a')};
background: var(--dees-color-border-default);
border-radius: 2px;
overflow: hidden;
}
.multi-percentage-fill {
height: 100%;
background: ${cssManager.bdTheme('#333333', '#e0e0e0')};
background: var(--dees-color-text-muted);
transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 2px;
}
@@ -464,7 +464,7 @@ export class DeesStatsGrid extends DeesElement {
.cpu-core-bar-wrapper {
flex: 1;
width: 100%;
background: ${cssManager.bdTheme('#e8e8e8', '#1a1a1a')};
background: var(--dees-color-border-default);
border-radius: 2px;
position: relative;
overflow: hidden;
@@ -477,21 +477,21 @@ export class DeesStatsGrid extends DeesElement {
left: 0;
right: 0;
width: 100%;
background: ${cssManager.bdTheme('#666666', '#888888')};
background: var(--dees-color-text-muted);
transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
border-radius: 2px 2px 0 0;
}
.cpu-core-bar-fill.low {
background: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3%)', 'hsl(142.1 70.6% 45.3%)')};
background: var(--dees-color-accent-success);
}
.cpu-core-bar-fill.medium {
background: ${cssManager.bdTheme('hsl(45.4 93.4% 47.5%)', 'hsl(45.4 93.4% 47.5%)')};
background: var(--dees-color-accent-warning);
}
.cpu-core-bar-fill.high {
background: ${cssManager.bdTheme('hsl(0 84.2% 60.2%)', 'hsl(0 84.2% 60.2%)')};
background: var(--dees-color-accent-error);
}
.cpu-core-label {
@@ -531,24 +531,24 @@ export class DeesStatsGrid extends DeesElement {
.partition-bar {
width: 100%;
height: 6px;
background: ${cssManager.bdTheme('#e8e8e8', '#1a1a1a')};
background: var(--dees-color-border-default);
border-radius: 3px;
overflow: hidden;
}
.partition-bar-fill {
height: 100%;
background: ${cssManager.bdTheme('#333333', '#e0e0e0')};
background: var(--dees-color-text-muted);
transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 3px;
}
.partition-bar-fill.warning {
background: ${cssManager.bdTheme('hsl(45.4 93.4% 47.5%)', 'hsl(45.4 93.4% 47.5%)')};
background: var(--dees-color-accent-warning);
}
.partition-bar-fill.critical {
background: ${cssManager.bdTheme('hsl(0 84.2% 60.2%)', 'hsl(0 84.2% 60.2%)')};
background: var(--dees-color-accent-error);
}
.partition-stats {
@@ -695,7 +695,7 @@ export class DeesStatsGrid extends DeesElement {
.disk-health-bar {
width: 100%;
height: 4px;
background: ${cssManager.bdTheme('#e8e8e8', '#1a1a1a')};
background: var(--dees-color-border-default);
border-radius: 2px;
overflow: hidden;
}
@@ -771,7 +771,7 @@ export class DeesStatsGrid extends DeesElement {
.trend-line {
fill: none;
stroke: ${cssManager.bdTheme('#999999', '#666666')};
stroke: var(--dees-color-text-muted);
stroke-width: 1.5;
stroke-linejoin: round;
stroke-linecap: round;