web: fix Colours for user settings in dark mode
This commit is contained in:
parent
0032bb6aee
commit
90d234a458
|
@ -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">
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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%;
|
||||||
|
}
|
||||||
`];
|
`];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Reference in New Issue