habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web/admin: fix missing dark theme for notifications

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/authentik.css
View File

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

2
web/src/elements/notifications/NotificationDrawer.ts
View File

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

3
web/src/interfaces/AdminInterface.ts
View File

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