From 56375d7245b91645c39eb25f826e938399802468 Mon Sep 17 00:00:00 2001
From: Jens L <jens.langhammer@beryju.org>
Date: Sun, 12 Mar 2023 22:19:03 +0100
Subject: [PATCH] web/flows: fix compatibility mode (#4910)

* 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>
---
 web/src/common/styles/authentik.css  |  6 ------
 web/src/common/styles/theme-dark.css | 12 ++++++------
 web/src/elements/Base.ts             | 12 ++++++++----
 web/src/flow/FlowExecutor.ts         |  7 +++++++
 4 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/web/src/common/styles/authentik.css b/web/src/common/styles/authentik.css
index d2b7a073e..e5baaa48b 100644
--- a/web/src/common/styles/authentik.css
+++ b/web/src/common/styles/authentik.css
@@ -9,12 +9,6 @@
     --ak-dark-background-light: #1c1e21;
     --ak-dark-background-light-ish: #212427;
     --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 {
diff --git a/web/src/common/styles/theme-dark.css b/web/src/common/styles/theme-dark.css
index b72931d2b..7b62f5571 100644
--- a/web/src/common/styles/theme-dark.css
+++ b/web/src/common/styles/theme-dark.css
@@ -140,12 +140,12 @@ select[multiple] option:checked {
     --pf-c-input-group--BackgroundColor: transparent;
 }
 .pf-c-form-control {
-    --pf-c-form-control--BorderTopColor: var(--ak-dark-background-lighter);
-    --pf-c-form-control--BorderRightColor: var(--ak-dark-background-lighter);
-    --pf-c-form-control--BorderLeftColor: var(--ak-dark-background-lighter);
-    --pf-global--BackgroundColor--100: transparent;
+    --pf-c-form-control--BorderTopColor: transparent !important;
+    --pf-c-form-control--BorderRightColor: transparent !important;
+    --pf-c-form-control--BorderLeftColor: transparent !important;
+    --pf-global--BackgroundColor--100: var(--ak-dark-background-light) !important;
     --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 {
     background-color: var(--ak-dark-background-light);
@@ -252,7 +252,7 @@ select[multiple] option:checked {
 }
 /* flows */
 .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-header,
diff --git a/web/src/elements/Base.ts b/web/src/elements/Base.ts
index a0be77b6f..2992821d2 100644
--- a/web/src/elements/Base.ts
+++ b/web/src/elements/Base.ts
@@ -61,9 +61,13 @@ export class AKElement extends LitElement {
 
     protected createRenderRoot(): ShadowRoot | Element {
         const root = super.createRenderRoot() as ShadowRoot;
-        root.adoptedStyleSheets = [...root.adoptedStyleSheets, AKGlobal];
-        this._initTheme(root);
-        this._initCustomCSS(root);
+        let styleRoot: AdoptedStyleSheetsElement = root;
+        if ("ShadyDOM" in window) {
+            styleRoot = document;
+        }
+        styleRoot.adoptedStyleSheets = [...styleRoot.adoptedStyleSheets, AKGlobal];
+        this._initTheme(styleRoot);
+        this._initCustomCSS(styleRoot);
         return root;
     }
 
@@ -83,7 +87,7 @@ export class AKElement extends LitElement {
         this._applyTheme(root, await this.getTheme());
     }
 
-    private async _initCustomCSS(root: ShadowRoot): Promise<void> {
+    private async _initCustomCSS(root: AdoptedStyleSheetsElement): Promise<void> {
         const sheets = await fetchCustomCSS();
         sheets.map((css) => {
             if (css === "") {
diff --git a/web/src/flow/FlowExecutor.ts b/web/src/flow/FlowExecutor.ts
index 7f011d04c..99dabd3d7 100644
--- a/web/src/flow/FlowExecutor.ts
+++ b/web/src/flow/FlowExecutor.ts
@@ -121,6 +121,13 @@ export class FlowExecutor extends Interface implements StageHost {
 
     static get styles(): CSSResult[] {
         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 {
                 display: none;
             }