trustchain-oc1-orchestral
/
authentik
Archived
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web: update styling of notification drawer to match rest

This commit is contained in:
Jens Langhammer 2021-01-15 12:16:35 +01:00
parent d637bd0bf9
commit 0b41cb84f0
2 changed files with 14 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/src/authentik.css
View File

@ -228,4 +228,11 @@ select[multiple] {
.form-control-static { .form-control-static {
color: var(--ak-dark-foreground); color: var(--ak-dark-foreground);
} }
/* notifications */
.pf-c-notification-drawer {
--pf-c-notification-drawer--BackgroundColor: var(--ak-dark-background);
}
.pf-c-notification-drawer__header {
background-color: var(--ak-dark-background-lighter);
}
} }

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

@ -17,8 +17,10 @@ export class NotificationDrawer extends LitElement {
return COMMON_STYLES.concat( return COMMON_STYLES.concat(
css` css`
.pf-c-notification-drawer__header { .pf-c-notification-drawer__header {
height: 82px; height: 114px;
padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft); padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
display: flex;
flex-direction: column;
} }
` `
); );
@ -72,13 +74,13 @@ export class NotificationDrawer extends LitElement {
} }
return html`<div class="pf-c-drawer__body pf-m-no-padding"> return html`<div class="pf-c-drawer__body pf-m-no-padding">
<div class="pf-c-notification-drawer"> <div class="pf-c-notification-drawer">
<div class="pf-c-notification-drawer__header"> <div class="pf-c-notification-drawer__header pf-c-content">
<h1 class="pf-c-notification-drawer__header-title"> <h1>
${gettext("Notifications")} ${gettext("Notifications")}
</h1> </h1>
<span class="pf-c-notification-drawer__header-status"> <p>
${gettext(`${this.unread} unread`)} ${gettext(`${this.unread} unread`)}
</span> </p>
</div> </div>
<div class="pf-c-notification-drawer__body"> <div class="pf-c-notification-drawer__body">
<ul class="pf-c-notification-drawer__list"> <ul class="pf-c-notification-drawer__list">