From f93f7e635bff2b3a7c1b284accc62e6021f2be3a Mon Sep 17 00:00:00 2001 From: Jens Langhammer Date: Sat, 25 Dec 2021 20:30:35 +0100 Subject: [PATCH] web: fix styling for modals, ensure correct classes are used Signed-off-by: Jens Langhammer --- web/src/authentik.css | 14 ++++---------- web/src/elements/forms/ConfirmationForm.ts | 4 ++-- web/src/elements/forms/DeleteBulkForm.ts | 6 +++--- web/src/elements/forms/DeleteForm.ts | 6 +++--- web/src/elements/forms/ModalForm.ts | 4 ++-- web/src/locales/en.po | 5 ++++- web/src/locales/fr_FR.po | 5 ++++- web/src/locales/pseudo-LOCALE.po | 5 ++++- web/src/pages/groups/MemberSelectModal.ts | 6 ++++-- web/src/pages/users/GroupSelectModal.ts | 6 ++++-- web/src/pages/users/UserActiveForm.ts | 4 ++-- 11 files changed, 36 insertions(+), 29 deletions(-) diff --git a/web/src/authentik.css b/web/src/authentik.css index 17630882e..1467a7e27 100644 --- a/web/src/authentik.css +++ b/web/src/authentik.css @@ -170,9 +170,6 @@ html > form > input { } /* tabs */ .pf-c-tabs { - background-color: var(--ak-dark-background-light); - } - .pf-c-tabs.pf-m-vertical { background-color: transparent; } .pf-c-tabs.pf-m-box.pf-m-vertical .pf-c-tabs__list::before { @@ -294,14 +291,11 @@ html > form > input { color: var(--ak-dark-foreground); } /* modal */ - .pf-c-modal-box__header { - background-color: var(--ak-dark-background-light); - } + .pf-c-modal-box, + .pf-c-modal-box__header, + .pf-c-modal-box__footer, .pf-c-modal-box__body { - background-color: var(--ak-dark-background-light); - } - .pf-c-modal-box__footer { - background-color: var(--ak-dark-background-light); + background-color: var(--ak-dark-background); } /* sidebar */ .pf-c-nav { diff --git a/web/src/elements/forms/ConfirmationForm.ts b/web/src/elements/forms/ConfirmationForm.ts index dd4360d89..ed5b463ba 100644 --- a/web/src/elements/forms/ConfirmationForm.ts +++ b/web/src/elements/forms/ConfirmationForm.ts @@ -55,14 +55,14 @@ export class ConfirmationForm extends ModalButton { } renderModalInner(): TemplateResult { - return html`
+ return html`

-
+
diff --git a/web/src/elements/forms/DeleteBulkForm.ts b/web/src/elements/forms/DeleteBulkForm.ts index e8d6deb7d..7ec4dc782 100644 --- a/web/src/elements/forms/DeleteBulkForm.ts +++ b/web/src/elements/forms/DeleteBulkForm.ts @@ -177,12 +177,12 @@ export class DeleteBulkForm extends ModalButton { } renderModalInner(): TemplateResult { - return html`
+ return html`

${t`Delete ${this.objectLabel}`}

-
+

${t`Are you sure you want to delete ${this.objects.length} ${this.objectLabel}?`} @@ -190,7 +190,7 @@ export class DeleteBulkForm extends ModalButton {

-
+
+ return html`

${t`Delete ${this.objectLabel}`}

-
+

${t`Are you sure you want to delete ${this.objectLabel} ${objName} ?`}

@@ -88,7 +88,7 @@ export class DeleteForm extends ModalButton { return html``; } return html` -
+

${t`The following objects use ${objName} `}

    diff --git a/web/src/elements/forms/ModalForm.ts b/web/src/elements/forms/ModalForm.ts index 7f3fd244e..adef5706a 100644 --- a/web/src/elements/forms/ModalForm.ts +++ b/web/src/elements/forms/ModalForm.ts @@ -58,14 +58,14 @@ export class ModalForm extends ModalButton { return html`${this.loading ? html`` : html``} -
    +

    -
    +