fix(chart-log, simple-appdash): align terminal and dashboard theming with brightness mode and improve app dashboard scroll presentation

This commit is contained in:
2026-04-03 13:33:56 +00:00
parent 77130ffb5e
commit f052fb9c9f
5 changed files with 98 additions and 9 deletions

View File

@@ -299,15 +299,51 @@ export class DeesSimpleAppDash extends DeesElement {
overscroll-behavior: contain;
}
.appcontent::before {
content: '';
position: sticky;
top: 0;
left: 0;
right: 0;
display: block;
height: 8px;
margin-bottom: -8px;
z-index: 10;
pointer-events: none;
background: linear-gradient(
to bottom,
${cssManager.bdTheme('hsl(0 0% 0% / 0.08)', 'hsl(0 0% 0% / 0.4)')},
${cssManager.bdTheme('hsl(0 0% 0% / 0.03)', 'hsl(0 0% 0% / 0.12)')},
transparent
);
}
.controlbar::before {
content: '';
position: absolute;
top: -8px;
left: 240px;
right: 0;
height: 8px;
pointer-events: none;
background: linear-gradient(
to top,
${cssManager.bdTheme('hsl(0 0% 0% / 0.08)', 'hsl(0 0% 0% / 0.4)')},
${cssManager.bdTheme('hsl(0 0% 0% / 0.03)', 'hsl(0 0% 0% / 0.12)')},
transparent
);
}
.controlbar {
color: #fff;
color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 55%)')};
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 24px;
background: ${cssManager.bdTheme('hsl(220 13% 18%)', 'hsl(220 13% 12%)')};
z-index: 2;
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
z-index: 11;
display: flex;
justify-content: flex-end;
align-items: center;
@@ -325,9 +361,10 @@ export class DeesSimpleAppDash extends DeesElement {
height: 100%;
white-space: nowrap;
cursor: default;
color: hsl(0 0% 70%);
color: ${cssManager.bdTheme('hsl(0 0% 55%)', 'hsl(0 0% 50%)')};
transition: all 0.15s ease;
border-left: 1px solid hsl(0 0% 100% / 0.08);
border-left: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
}
.control:first-child {
@@ -335,8 +372,8 @@ export class DeesSimpleAppDash extends DeesElement {
}
.control:hover {
background: hsl(0 0% 100% / 0.06);
color: hsl(0 0% 95%);
background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.04)', 'hsl(0 0% 100% / 0.06)')};
color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
}
.control dees-icon {