diff --git a/web/src/common/styles/authentik.css b/web/src/common/styles/authentik.css index 6346e8077..bf689443e 100644 --- a/web/src/common/styles/authentik.css +++ b/web/src/common/styles/authentik.css @@ -237,6 +237,9 @@ html > form > input { .pf-c-expandable-section__toggle-icon { color: var(--ak-dark-foreground); } + .pf-c-expandable-section.pf-m-display-lg { + background-color: var(--ak-dark-background-light-ish); + } /* header for form group */ .pf-c-form__field-group-header-title-text { color: var(--ak-dark-foreground); diff --git a/web/src/elements/Expand.ts b/web/src/elements/Expand.ts index d3b1005b9..151e28699 100644 --- a/web/src/elements/Expand.ts +++ b/web/src/elements/Expand.ts @@ -5,7 +5,9 @@ import { t } from "@lingui/macro"; import { CSSResult, TemplateResult, html } from "lit"; import { customElement, property } from "lit/decorators.js"; +import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFExpandableSection from "@patternfly/patternfly/components/ExpandableSection/expandable-section.css"; +import PFBase from "@patternfly/patternfly/patternfly-base.css"; @customElement("ak-expand") export class Expand extends AKElement { @@ -19,11 +21,15 @@ export class Expand extends AKElement { textClosed = t`Show more`; static get styles(): CSSResult[] { - return [PFExpandableSection]; + return [PFBase, PFExpandableSection, AKGlobal]; } render(): TemplateResult { - return html`
+ return html`
- +
+ +
`; } }