web: fix Colours for user settings in dark mode

This commit is contained in:
Jens Langhammer 2021-03-06 23:00:29 +01:00
parent 0032bb6aee
commit 90d234a458
3 changed files with 11 additions and 2 deletions

View File

@ -13,7 +13,7 @@
<p>{% trans "Configure settings relevant to your user profile." %}</p> <p>{% trans "Configure settings relevant to your user profile." %}</p>
</div> </div>
</section> </section>
<ak-tabs vertical="true"> <ak-tabs vertical="true" style="height: 100%;">
<section slot="page-1" data-tab-title="{% trans 'User details' %}" class="pf-c-page__main-section pf-m-no-padding-mobile"> <section slot="page-1" data-tab-title="{% trans 'User details' %}" class="pf-c-page__main-section pf-m-no-padding-mobile">
<div class="pf-u-display-flex pf-u-justify-content-center"> <div class="pf-u-display-flex pf-u-justify-content-center">
<div class="pf-u-w-75"> <div class="pf-u-w-75">

View File

@ -156,6 +156,10 @@ ak-message {
.pf-c-table__sort-indicator i { .pf-c-table__sort-indicator i {
color: var(--ak-dark-foreground) !important; color: var(--ak-dark-foreground) !important;
} }
/* tabs, vertical */
.pf-c-tabs__link {
background-color: var(--ak-dark-background-light);
}
/* table, on mobile */ /* table, on mobile */
@media screen and (max-width: 1200px) { @media screen and (max-width: 1200px) {
.pf-m-grid-xl.pf-c-table tbody:first-of-type { .pf-m-grid-xl.pf-c-table tbody:first-of-type {

View File

@ -4,6 +4,8 @@ import { ifDefined } from "lit-html/directives/if-defined";
import TabsStyle from "@patternfly/patternfly/components/Tabs/tabs.css"; import TabsStyle from "@patternfly/patternfly/components/Tabs/tabs.css";
// @ts-ignore // @ts-ignore
import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css"; import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css";
// @ts-ignore
import AKGlobal from "../authentik.css";
import { CURRENT_CLASS } from "../constants"; import { CURRENT_CLASS } from "../constants";
import { gettext } from "django"; import { gettext } from "django";
@ -16,7 +18,7 @@ export class Tabs extends LitElement {
vertical = false; vertical = false;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [GlobalsStyle, TabsStyle, css` return [GlobalsStyle, TabsStyle, AKGlobal, css`
::slotted(*) { ::slotted(*) {
height: 100%; height: 100%;
flex-grow: 2; flex-grow: 2;
@ -24,6 +26,9 @@ export class Tabs extends LitElement {
:host([vertical]) { :host([vertical]) {
display: flex; display: flex;
} }
:host([vertical]) .pf-c-tabs__list {
height: 100%;
}
`]; `];
} }