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

fix(dees-moadl): theming

Browse Source
This commit is contained in:
Juergen Kunz
2025-06-24 08:23:24 +00:00
parent 169f74aa2e
commit c82c407350
1 changed files with 23 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
ts_web/elements/dees-modal.ts
View File

@ -93,12 +93,12 @@ export class DeesModal extends DeesElement {
opacity: 0; opacity: 0;
width: 480px; width: 480px;
min-height: 120px; min-height: 120px;
background: #111; background: ${cssManager.bdTheme('#ffffff', '#111')};
border-radius: 8px; border-radius: 8px;
border: 1px solid #222; border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
transition: all 0.2s; transition: all 0.2s;
overflow: hidden; overflow: hidden;
box-shadow: 0px 2px 5px #00000080; box-shadow: ${cssManager.bdTheme('0px 2px 10px rgba(0, 0, 0, 0.1)', '0px 2px 5px rgba(0, 0, 0, 0.5)')};
} }
.modal.show { .modal.show {
@ -118,7 +118,7 @@ export class DeesModal extends DeesElement {
text-align: center; text-align: center;
font-weight: 600; font-weight: 600;
font-size: 12px; font-size: 12px;
border-bottom: 1px solid #222; border-bottom: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
} }
.modal .content { .modal .content {
@ -127,7 +127,7 @@ export class DeesModal extends DeesElement {
.modal .bottomButtons { .modal .bottomButtons {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
border-top: 1px solid #222; border-top: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
justify-content: flex-end; justify-content: flex-end;
} }
@ -138,8 +138,10 @@ export class DeesModal extends DeesElement {
line-height: 16px; line-height: 16px;
text-align: center; text-align: center;
font-size: 14px; font-size: 14px;
cursor: default; cursor: pointer;
user-select: none; user-select: none;
transition: all 0.2s;
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)')};
} }
.modal .bottomButtons .bottomButton:first-child { .modal .bottomButtons .bottomButton:first-child {
@ -151,13 +153,26 @@ export class DeesModal extends DeesElement {
.modal .bottomButtons .bottomButton:hover { .modal .bottomButtons .bottomButton:hover {
background: ${cssManager.bdTheme(colors.bright.blue, colors.dark.blue)}; background: ${cssManager.bdTheme(colors.bright.blue, colors.dark.blue)};
color: #ffffff;
} }
.modal .bottomButtons .bottomButton:active { .modal .bottomButtons .bottomButton:active {
background: ${cssManager.bdTheme(colors.bright.blueActive, colors.dark.blueActive)}; background: ${cssManager.bdTheme(colors.bright.blueActive, colors.dark.blueActive)};
color: #ffffff;
} }
.modal .bottomButtons .bottomButton:last-child { .modal .bottomButtons .bottomButton:last-child {
border-right: none; border-right: none;
} }
.modal .bottomButtons .bottomButton.primary {
background: ${cssManager.bdTheme(colors.bright.blue, colors.dark.blue)};
color: #ffffff;
}
.modal .bottomButtons .bottomButton.primary:hover {
background: ${cssManager.bdTheme(colors.bright.blueActive, colors.dark.blueActive)};
}
.modal .bottomButtons .bottomButton.primary:active {
background: ${cssManager.bdTheme(colors.bright.blueMuted, colors.dark.blueMuted)};
}
`, `,
]; ];
@ -174,8 +189,8 @@ export class DeesModal extends DeesElement {
<div class="content">${this.content}</div> <div class="content">${this.content}</div>
<div class="bottomButtons"> <div class="bottomButtons">
${this.menuOptions.map( ${this.menuOptions.map(
(actionArg) => html` (actionArg, index) => html`
<div class="bottomButton" @click=${() => { <div class="bottomButton ${index === this.menuOptions.length - 1 ? 'primary' : ''} ${actionArg.name === 'OK' ? 'ok' : ''}" @click=${() => {
actionArg.action(this); actionArg.action(this);
}}>${actionArg.name}</div> }}>${actionArg.name}</div>
` `