feat: Refactor theming in app components to use dynamic CSS variables
This commit is contained in:
@ -22,15 +22,15 @@ export class DeesAppuiActivitylog extends DeesElement {
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
color: #fff;
|
||||
color: ${cssManager.bdTheme('#333', '#fff')};
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
height: 100%;
|
||||
background: #111c28;
|
||||
background: ${cssManager.bdTheme('#f8f8f8', '#111c28')};
|
||||
font-family: 'Intel One Mono', sans-serif;
|
||||
border-left: 1px solid #202020;
|
||||
border-left: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
|
||||
cursor: default;
|
||||
}
|
||||
.maincontainer {
|
||||
@ -47,7 +47,8 @@ export class DeesAppuiActivitylog extends DeesElement {
|
||||
height: 32px;
|
||||
width: 100%;
|
||||
padding: 0px 12px 0px 12px;
|
||||
background: #0e151f;
|
||||
background: ${cssManager.bdTheme('#ffffff', '#0e151f')};
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
|
||||
}
|
||||
|
||||
.topbar .heading {
|
||||
@ -57,6 +58,7 @@ export class DeesAppuiActivitylog extends DeesElement {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
font-family: 'Geist Sans', sans-serif;
|
||||
color: ${cssManager.bdTheme('#666', '#ccc')};
|
||||
}
|
||||
|
||||
.activityContainer {
|
||||
@ -73,7 +75,7 @@ export class DeesAppuiActivitylog extends DeesElement {
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
padding-top: 16px;
|
||||
color: #888
|
||||
color: ${cssManager.bdTheme('#666', '#888')}
|
||||
}
|
||||
|
||||
.streamingIndicator.bottom {
|
||||
@ -85,19 +87,19 @@ export class DeesAppuiActivitylog extends DeesElement {
|
||||
min-height: 30px;
|
||||
font-size: 12px;
|
||||
padding: 8px 16px;
|
||||
border-bottom: 1px dotted #ffffff20;
|
||||
border-bottom: 1px dotted ${cssManager.bdTheme('#00000020', '#ffffff20')};
|
||||
}
|
||||
|
||||
.activityentry:last-of-type {
|
||||
border-bottom: 1px solid #ffffff00;
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
|
||||
.activityentry:hover {
|
||||
background: #00000080;
|
||||
background: ${cssManager.bdTheme('#00000005', '#00000080')};
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
color: #ff8787;
|
||||
color: ${cssManager.bdTheme('#e57373', '#ff8787')};
|
||||
}
|
||||
|
||||
.searchbox {
|
||||
@ -105,10 +107,11 @@ export class DeesAppuiActivitylog extends DeesElement {
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background: #0e151f;
|
||||
background: ${cssManager.bdTheme('#ffffff', '#0e151f')};
|
||||
border-top: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
|
||||
}
|
||||
.searchbox input {
|
||||
color: #fff;
|
||||
color: ${cssManager.bdTheme('#333', '#fff')};
|
||||
background: none;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
@ -127,7 +130,10 @@ export class DeesAppuiActivitylog extends DeesElement {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
bottom: 40px;
|
||||
background: linear-gradient(180deg, #111c2800 0%, #0e151f 100%);
|
||||
background: ${cssManager.bdTheme(
|
||||
'linear-gradient(180deg, #f8f8f800 0%, #ffffff 100%)',
|
||||
'linear-gradient(180deg, #111c2800 0%, #0e151f 100%)'
|
||||
)};
|
||||
pointer-events: none;
|
||||
}
|
||||
.topShadow {
|
||||
@ -135,7 +141,10 @@ export class DeesAppuiActivitylog extends DeesElement {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
top: 32px;
|
||||
background: linear-gradient(0deg, #111c2800 0%, #0e151f 100%);
|
||||
background: ${cssManager.bdTheme(
|
||||
'linear-gradient(0deg, #f8f8f800 0%, #ffffff 100%)',
|
||||
'linear-gradient(0deg, #111c2800 0%, #0e151f 100%)'
|
||||
)};
|
||||
pointer-events: none;
|
||||
}
|
||||
`,
|
||||
|
Reference in New Issue
Block a user