trustchain-oc1-orchestral/authentik
Archived
10
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

web/flows: fix compatibility mode (#4910)

Browse source 
* fix compatibility mode

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* attach stylesheets to document instead of nothing, fix dark theme

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Jens L 2023-03-12 22:19:03 +01:00 committed by GitHub
parent 94f22cffba
commit 56375d7245
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 21 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
web/src/common/styles/authentik.css
View file

@ -9,12 +9,6 @@
--ak-dark-background-light: #1c1e21; --ak-dark-background-light: #1c1e21;
--ak-dark-background-light-ish: #212427; --ak-dark-background-light-ish: #212427;
--ak-dark-background-lighter: #2b2e33; --ak-dark-background-lighter: #2b2e33;
--pf-c-background-image--BackgroundImage: var(--ak-flow-background);
--pf-c-background-image--BackgroundImage-2x: var(--ak-flow-background);
--pf-c-background-image--BackgroundImage--sm: var(--ak-flow-background);
--pf-c-background-image--BackgroundImage--sm-2x: var(--ak-flow-background);
--pf-c-background-image--BackgroundImage--lg: var(--ak-flow-background);
} }
::-webkit-scrollbar { ::-webkit-scrollbar {

12
web/src/common/styles/theme-dark.css
View file

@ -140,12 +140,12 @@ select[multiple] option:checked {
--pf-c-input-group--BackgroundColor: transparent; --pf-c-input-group--BackgroundColor: transparent;
} }
.pf-c-form-control { .pf-c-form-control {
--pf-c-form-control--BorderTopColor: var(--ak-dark-background-lighter); --pf-c-form-control--BorderTopColor: transparent !important;
--pf-c-form-control--BorderRightColor: var(--ak-dark-background-lighter); --pf-c-form-control--BorderRightColor: transparent !important;
--pf-c-form-control--BorderLeftColor: var(--ak-dark-background-lighter); --pf-c-form-control--BorderLeftColor: transparent !important;
--pf-global--BackgroundColor--100: transparent; --pf-global--BackgroundColor--100: var(--ak-dark-background-light) !important;
--pf-c-form-control--BackgroundColor: var(--ak-dark-background-light); --pf-c-form-control--BackgroundColor: var(--ak-dark-background-light);
color: var(--ak-dark-foreground); --pf-c-form-control--Color: var(--ak-dark-foreground) !important;
} }
.pf-c-form-control:disabled { .pf-c-form-control:disabled {
background-color: var(--ak-dark-background-light); background-color: var(--ak-dark-background-light);
@ -252,7 +252,7 @@ select[multiple] option:checked {
} }
/* flows */ /* flows */
.pf-c-login__main { .pf-c-login__main {
background-color: var(--ak-dark-background); --pf-c-login__main--BackgroundColor: var(--ak-dark-background);
} }
.pf-c-login__main-body, .pf-c-login__main-body,
.pf-c-login__main-header, .pf-c-login__main-header,

12
web/src/elements/Base.ts
View file

@ -61,9 +61,13 @@ export class AKElement extends LitElement {
protected createRenderRoot(): ShadowRoot | Element { protected createRenderRoot(): ShadowRoot | Element {
const root = super.createRenderRoot() as ShadowRoot; const root = super.createRenderRoot() as ShadowRoot;
root.adoptedStyleSheets = [...root.adoptedStyleSheets, AKGlobal]; let styleRoot: AdoptedStyleSheetsElement = root;
this._initTheme(root); if ("ShadyDOM" in window) {
this._initCustomCSS(root); styleRoot = document;
}
styleRoot.adoptedStyleSheets = [...styleRoot.adoptedStyleSheets, AKGlobal];
this._initTheme(styleRoot);
this._initCustomCSS(styleRoot);
return root; return root;
} }
@ -83,7 +87,7 @@ export class AKElement extends LitElement {
this._applyTheme(root, await this.getTheme()); this._applyTheme(root, await this.getTheme());
} }
private async _initCustomCSS(root: ShadowRoot): Promise<void> { private async _initCustomCSS(root: AdoptedStyleSheetsElement): Promise<void> {
const sheets = await fetchCustomCSS(); const sheets = await fetchCustomCSS();
sheets.map((css) => { sheets.map((css) => {
if (css === "") { if (css === "") {

7
web/src/flow/FlowExecutor.ts
View file

@ -121,6 +121,13 @@ export class FlowExecutor extends Interface implements StageHost {
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [PFBase, PFLogin, PFDrawer, PFButton, PFTitle, PFList, PFBackgroundImage].concat(css` return [PFBase, PFLogin, PFDrawer, PFButton, PFTitle, PFList, PFBackgroundImage].concat(css`
.pf-c-background-image::before {
--pf-c-background-image--BackgroundImage: var(--ak-flow-background);
--pf-c-background-image--BackgroundImage-2x: var(--ak-flow-background);
--pf-c-background-image--BackgroundImage--sm: var(--ak-flow-background);
--pf-c-background-image--BackgroundImage--sm-2x: var(--ak-flow-background);
--pf-c-background-image--BackgroundImage--lg: var(--ak-flow-background);
}
.ak-hidden { .ak-hidden {
display: none; display: none;
} }