diff --git a/authentik/core/templates/user/settings.html b/authentik/core/templates/user/settings.html index ff803e4be..bf7424569 100644 --- a/authentik/core/templates/user/settings.html +++ b/authentik/core/templates/user/settings.html @@ -13,7 +13,7 @@

{% trans "Configure settings relevant to your user profile." %}

- +
diff --git a/web/src/authentik.css b/web/src/authentik.css index 273b340d1..a7bc1b696 100644 --- a/web/src/authentik.css +++ b/web/src/authentik.css @@ -155,6 +155,10 @@ ak-message { .pf-c-table__sort-indicator i { color: var(--ak-dark-foreground) !important; } + /* tabs, vertical */ + .pf-c-tabs__link { + background-color: var(--ak-dark-background-light); + } /* table, on mobile */ @media screen and (max-width: 1200px) { .pf-m-grid-xl.pf-c-table tbody:first-of-type { diff --git a/web/src/elements/Tabs.ts b/web/src/elements/Tabs.ts index 814106eb4..2d1006f5c 100644 --- a/web/src/elements/Tabs.ts +++ b/web/src/elements/Tabs.ts @@ -4,6 +4,8 @@ import { ifDefined } from "lit-html/directives/if-defined"; import TabsStyle from "@patternfly/patternfly/components/Tabs/tabs.css"; // @ts-ignore import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css"; +// @ts-ignore +import AKGlobal from "../authentik.css"; import { CURRENT_CLASS } from "../constants"; import { gettext } from "django"; @@ -16,7 +18,7 @@ export class Tabs extends LitElement { vertical = false; static get styles(): CSSResult[] { - return [GlobalsStyle, TabsStyle, css` + return [GlobalsStyle, TabsStyle, AKGlobal, css` ::slotted(*) { height: 100%; flex-grow: 2; @@ -24,6 +26,9 @@ export class Tabs extends LitElement { :host([vertical]) { display: flex; } + :host([vertical]) .pf-c-tabs__list { + height: 100%; + } `]; }