web: fix background for modals on light theme

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-12-26 14:53:23 +01:00
parent 53b10e64f8
commit 4a56b5e827
7 changed files with 16 additions and 16 deletions

View file

@ -55,14 +55,14 @@ export class ConfirmationForm extends ModalButton {
} }
renderModalInner(): TemplateResult { renderModalInner(): TemplateResult {
return html`<section class="pf-c-modal-box__header pf-c-page__main-section"> return html`<section class="pf-c-modal-box__header pf-c-page__main-section pf-m-light">
<div class="pf-c-content"> <div class="pf-c-content">
<h1 class="pf-c-title pf-m-2xl"> <h1 class="pf-c-title pf-m-2xl">
<slot name="header"></slot> <slot name="header"></slot>
</h1> </h1>
</div> </div>
</section> </section>
<section class="pf-c-modal-box__body pf-c-page__main-section"> <section class="pf-c-modal-box__body pf-c-page__main-section pf-m-light">
<form class="pf-c-form pf-m-horizontal"> <form class="pf-c-form pf-m-horizontal">
<slot class="pf-c-content" name="body"></slot> <slot class="pf-c-content" name="body"></slot>
</form> </form>

View file

@ -177,12 +177,12 @@ export class DeleteBulkForm extends ModalButton {
} }
renderModalInner(): TemplateResult { renderModalInner(): TemplateResult {
return html`<section class="pf-c-modal-box__header pf-c-page__main-section"> return html`<section class="pf-c-modal-box__header pf-c-page__main-section pf-m-light">
<div class="pf-c-content"> <div class="pf-c-content">
<h1 class="pf-c-title pf-m-2xl">${t`Delete ${this.objectLabel}`}</h1> <h1 class="pf-c-title pf-m-2xl">${t`Delete ${this.objectLabel}`}</h1>
</div> </div>
</section> </section>
<section class="pf-c-modal-box__body pf-c-page__main-section"> <section class="pf-c-modal-box__body pf-c-page__main-section pf-m-light">
<form class="pf-c-form pf-m-horizontal"> <form class="pf-c-form pf-m-horizontal">
<p class="pf-c-title"> <p class="pf-c-title">
${t`Are you sure you want to delete ${this.objects.length} ${this.objectLabel}?`} ${t`Are you sure you want to delete ${this.objects.length} ${this.objectLabel}?`}
@ -190,7 +190,7 @@ export class DeleteBulkForm extends ModalButton {
<slot name="notice"></slot> <slot name="notice"></slot>
</form> </form>
</section> </section>
<section class="pf-c-modal-box__body pf-c-page__main-section"> <section class="pf-c-modal-box__body pf-c-page__main-section pf-m-light">
<ak-delete-objects-table <ak-delete-objects-table
.objects=${this.objects} .objects=${this.objects}
.usedBy=${this.usedBy} .usedBy=${this.usedBy}

View file

@ -71,12 +71,12 @@ export class DeleteForm extends ModalButton {
} else { } else {
objName = ""; objName = "";
} }
return html`<section class="pf-c-modal-box__header pf-c-page__main-section"> return html`<section class="pf-c-modal-box__header pf-c-page__main-section pf-m-light">
<div class="pf-c-content"> <div class="pf-c-content">
<h1 class="pf-c-title pf-m-2xl">${t`Delete ${this.objectLabel}`}</h1> <h1 class="pf-c-title pf-m-2xl">${t`Delete ${this.objectLabel}`}</h1>
</div> </div>
</section> </section>
<section class="pf-c-modal-box__body pf-c-page__main-section"> <section class="pf-c-modal-box__body pf-c-page__main-section pf-m-light">
<form class="pf-c-form pf-m-horizontal"> <form class="pf-c-form pf-m-horizontal">
<p>${t`Are you sure you want to delete ${this.objectLabel} ${objName} ?`}</p> <p>${t`Are you sure you want to delete ${this.objectLabel} ${objName} ?`}</p>
</form> </form>
@ -88,7 +88,7 @@ export class DeleteForm extends ModalButton {
return html``; return html``;
} }
return html` return html`
<section class="pf-c-modal-box__body pf-c-page__main-section"> <section class="pf-c-modal-box__body pf-c-page__main-section pf-m-light">
<form class="pf-c-form pf-m-horizontal"> <form class="pf-c-form pf-m-horizontal">
<p>${t`The following objects use ${objName} `}</p> <p>${t`The following objects use ${objName} `}</p>
<ul class="pf-c-list"> <ul class="pf-c-list">

View file

@ -58,14 +58,14 @@ export class ModalForm extends ModalButton {
return html`${this.loading return html`${this.loading
? html`<ak-loading-overlay ?topMost=${true}></ak-loading-overlay>` ? html`<ak-loading-overlay ?topMost=${true}></ak-loading-overlay>`
: html``} : html``}
<section class="pf-c-modal-box__header pf-c-page__main-section"> <section class="pf-c-modal-box__header pf-c-page__main-section pf-m-light">
<div class="pf-c-content"> <div class="pf-c-content">
<h1 class="pf-c-title pf-m-2xl"> <h1 class="pf-c-title pf-m-2xl">
<slot name="header"></slot> <slot name="header"></slot>
</h1> </h1>
</div> </div>
</section> </section>
<section class="pf-c-modal-box__body pf-c-page__main-section"> <section class="pf-c-modal-box__body pf-c-page__main-section pf-m-light">
<slot name="form"></slot> <slot name="form"></slot>
</section> </section>
<footer class="pf-c-modal-box__footer"> <footer class="pf-c-modal-box__footer">

View file

@ -63,12 +63,12 @@ export class MemberSelectTable extends TableModal<User> {
} }
renderModalInner(): TemplateResult { renderModalInner(): TemplateResult {
return html`<section class="pf-c-modal-box__header pf-c-page__main-section"> return html`<section class="pf-c-modal-box__header pf-c-page__main-section pf-m-light">
<div class="pf-c-content"> <div class="pf-c-content">
<h1 class="pf-c-title pf-m-2xl">${t`Select users to add`}</h1> <h1 class="pf-c-title pf-m-2xl">${t`Select users to add`}</h1>
</div> </div>
</section> </section>
<section class="pf-c-modal-box__body pf-c-page__main-section"> <section class="pf-c-modal-box__body pf-c-page__main-section pf-m-light">
${this.renderTable()} ${this.renderTable()}
</section> </section>
<footer class="pf-c-modal-box__footer"> <footer class="pf-c-modal-box__footer">

View file

@ -61,12 +61,12 @@ export class GroupSelectModal extends TableModal<Group> {
} }
renderModalInner(): TemplateResult { renderModalInner(): TemplateResult {
return html`<section class="pf-c-modal-box__header pf-c-page__main-section"> return html`<section class="pf-c-modal-box__header pf-c-page__main-section pf-m-light">
<div class="pf-c-content"> <div class="pf-c-content">
<h1 class="pf-c-title pf-m-2xl">${t`Select groups to add user to`}</h1> <h1 class="pf-c-title pf-m-2xl">${t`Select groups to add user to`}</h1>
</div> </div>
</section> </section>
<section class="pf-c-modal-box__body pf-c-page__main-section"> <section class="pf-c-modal-box__body pf-c-page__main-section pf-m-light">
${this.renderTable()} ${this.renderTable()}
</section> </section>
<footer class="pf-c-modal-box__footer"> <footer class="pf-c-modal-box__footer">

View file

@ -25,12 +25,12 @@ export class UserActiveForm extends DeleteForm {
} }
renderModalInner(): TemplateResult { renderModalInner(): TemplateResult {
return html`<section class="pf-c-modal-box__header pf-c-page__main-section"> return html`<section class="pf-c-modal-box__header pf-c-page__main-section pf-m-light">
<div class="pf-c-content"> <div class="pf-c-content">
<h1 class="pf-c-title pf-m-2xl">${t`Update ${this.objectLabel}`}</h1> <h1 class="pf-c-title pf-m-2xl">${t`Update ${this.objectLabel}`}</h1>
</div> </div>
</section> </section>
<section class="pf-c-modal-box__body pf-c-page__main-section"> <section class="pf-c-modal-box__body pf-c-page__main-section pf-m-light">
<form class="pf-c-form pf-m-horizontal"> <form class="pf-c-form pf-m-horizontal">
<p> <p>
${t`Are you sure you want to update ${this.objectLabel} "${this.obj?.name}"?`} ${t`Are you sure you want to update ${this.objectLabel} "${this.obj?.name}"?`}