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

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>
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-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 {

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-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,

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

@ -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 === "") {

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

@ -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;
}