web/admin: fix missing dark theme for notifications

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-07-23 21:27:56 +02:00
parent a4b051fcc1
commit 0b34f70205
3 changed files with 11 additions and 2 deletions

View file

@ -7,6 +7,7 @@
--ak-dark-background: #18191a;
--ak-dark-background-darker: #000000;
--ak-dark-background-light: #1c1e21;
--ak-dark-background-light-ish: #212427;
--ak-dark-background-lighter: #2b2e33;
}
@ -303,6 +304,9 @@ body {
color: var(--ak-dark-foreground);
}
/* notifications */
.pf-c-drawer__panel {
background-color: var(--ak-dark-background);
}
.pf-c-notification-drawer {
--pf-c-notification-drawer--BackgroundColor: var(--ak-dark-background);
}
@ -310,6 +314,10 @@ body {
background-color: var(--ak-dark-background-lighter);
color: var(--ak-dark-foreground);
}
.pf-c-notification-drawer__list-item {
background-color: var(--ak-dark-background-light-ish);
color: var(--ak-dark-foreground);
}
/* data list */
.pf-c-data-list__item {
--pf-c-data-list__item--BackgroundColor: var(--ak-dark-background-light);

View file

@ -64,7 +64,7 @@ export class NotificationDrawer extends LitElement {
default:
break;
}
return html`<li class="pf-c-notification-drawer__list-item pf-m-read">
return html`<li class="pf-c-notification-drawer__list-item">
<div class="pf-c-notification-drawer__list-item-header">
<span class="pf-c-notification-drawer__list-item-header-icon ${level}">
<i class="fas fa-info-circle" aria-hidden="true"></i>

View file

@ -9,6 +9,7 @@ import PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFPage from "@patternfly/patternfly/components/Page/page.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css";
import PFDrawer from "@patternfly/patternfly/components/Drawer/drawer.css";
import AKGlobal from "../authentik.css";
import "../elements/router/RouterOutlet";
import "../elements/messages/MessageContainer";
@ -33,7 +34,7 @@ export class AdminInterface extends LitElement {
ws: WebsocketClient;
static get styles(): CSSResult[] {
return [PFBase, PFPage, PFButton, PFDrawer, css`
return [PFBase, PFPage, PFButton, PFDrawer, AKGlobal, css`
.pf-c-page__main, .pf-c-drawer__content, .pf-c-page__drawer {
z-index: auto !important;
}