diff --git a/web/src/common/styles/authentik.css b/web/src/common/styles/authentik.css index 912594337..e696e6f80 100644 --- a/web/src/common/styles/authentik.css +++ b/web/src/common/styles/authentik.css @@ -9,6 +9,9 @@ --ak-dark-background-light: #1c1e21; --ak-dark-background-light-ish: #212427; --ak-dark-background-lighter: #2b2e33; + + /* PatternFly likes to override global variables for some reason */ + --ak-global--Color--100: var(--pf-global--Color--100); } ::-webkit-scrollbar { diff --git a/web/src/common/styles/theme-dark.css b/web/src/common/styles/theme-dark.css index 9e52b715c..52501ab86 100644 --- a/web/src/common/styles/theme-dark.css +++ b/web/src/common/styles/theme-dark.css @@ -1,11 +1,12 @@ -body { - background-color: var(--ak-dark-background) !important; -} :root { --pf-global--Color--100: var(--ak-dark-foreground) !important; + --ak-global--Color--100: var(--ak-dark-foreground) !important; --pf-c-page__main-section--m-light--BackgroundColor: var(--ak-dark-background-darker); --pf-global--link--Color: var(--ak-dark-foreground-link) !important; } +body { + background-color: var(--ak-dark-background) !important; +} .pf-c-radio { --pf-c-radio__label--Color: var(--ak-dark-foreground); } diff --git a/web/src/user/LibraryApplication.ts b/web/src/user/LibraryApplication.ts index c44da31f0..eff21dbb2 100644 --- a/web/src/user/LibraryApplication.ts +++ b/web/src/user/LibraryApplication.ts @@ -1,5 +1,6 @@ import { truncateWords } from "@goauthentik/common/utils"; import { AKElement, rootInterface } from "@goauthentik/elements/Base"; +import "@goauthentik/elements/Expand"; import { UserInterface } from "@goauthentik/user/UserInterface"; import { msg } from "@lit/localize"; @@ -32,27 +33,47 @@ export class LibraryApplication extends AKElement { PFButton, PFAvatar, css` - .pf-c-card { - height: 100%; + :host { + --icon-height: 4rem; + --icon-border: 0.25rem; } - i.pf-icon { - height: 36px; - display: flex; - flex-direction: column; - justify-content: center; + .pf-c-card { + --pf-c-card--BoxShadow: var(--pf-global--BoxShadow--md); } .pf-c-avatar { --pf-c-avatar--BorderRadius: 0; + --pf-c-avatar--Height: calc( + var(--icon-height) + var(--icon-border) + var(--icon-border) + ); + --pf-c-avatar--Width: calc( + var(--icon-height) + var(--icon-border) + var(--icon-border) + ); } .pf-c-card__header { - min-height: 60px; justify-content: space-between; + flex-direction: column; } .pf-c-card__header a { display: flex; flex-direction: column; justify-content: center; - margin-right: 0.25em; + } + .icon { + font-size: var(--icon-height); + color: var(--ak-global--Color--100); + padding: var(--icon-border); + max-height: calc(var(--icon-height) + var(--icon-border) + var(--icon-border)); + line-height: calc(var(--icon-height) + var(--icon-border) + var(--icon-border)); + } + .expander { + flex-grow: 1; + } + .pf-c-card__title { + text-align: center; + /* This is not ideal as it hard limits us to 2 lines of text for the title + of the application. In theory that should be fine for most cases, but ideally + we don't do this */ + height: 48px; } `, ]; @@ -62,7 +83,7 @@ export class LibraryApplication extends AKElement { if (this.application?.metaIcon) { if (this.application.metaIcon.startsWith("fa://")) { const icon = this.application.metaIcon.replaceAll("fa://", ""); - return html``; + return html``; } return html`${msg(`; } - return html``; + return html`${this.application?.name.charAt(0).toUpperCase()}`; } render(): TemplateResult { @@ -82,7 +103,7 @@ export class LibraryApplication extends AKElement { class="pf-c-card pf-m-hoverable pf-m-compact ${this.selected ? "pf-m-selectable pf-m-selected" : ""}" - style="background: ${this.background} !important" + style=${this.background !== "" ? `background: ${this.background} !important` : ""} >
${this.renderIcon()} - ${rootInterface()?.uiConfig?.enabledFeatures.applicationEdit && me?.user.isSuperuser - ? html` - - - - ` - : html``}
-

- ${this.application.name} -

+ ${this.application.name} +
+
+
${this.application.metaPublisher}
- -
- ${truncateWords(this.application.metaDescription || "", 35)} -
+ ${truncateWords(this.application.metaDescription || "", 10)} + ${rootInterface()?.uiConfig?.enabledFeatures.applicationEdit && me?.user.isSuperuser + ? html` + +  ${msg("Edit")} + + ` + : html``} + `; } } diff --git a/web/src/user/UserInterface.ts b/web/src/user/UserInterface.ts index 62c9e5e33..63a31111f 100644 --- a/web/src/user/UserInterface.ts +++ b/web/src/user/UserInterface.ts @@ -73,12 +73,22 @@ export class UserInterface extends Interface { z-index: auto !important; background-color: transparent !important; } + .pf-c-page__header { + background-color: transparent !important; + box-shadow: none !important; + color: black !important; + } + :host([theme="dark"]) .pf-c-page__header { + color: var(--ak-dark-foreground) !important; + } + .pf-c-page__header-tools-item .fas, + .pf-c-notification-badge__count, + .pf-c-page__header-tools-group .pf-c-button { + color: var(--ak-global--Color--100) !important; + } .pf-c-page { background-color: transparent; } - .background-wrapper { - background-color: var(--pf-c-page--BackgroundColor) !important; - } .display-none { display: none; } @@ -96,6 +106,15 @@ export class UserInterface extends Interface { z-index: -1; top: 0; left: 0; + background-color: var(--pf-c-page--BackgroundColor) !important; + } + .background-default-slant { + background-color: white; /*var(--ak-accent);*/ + clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 5vw)); + height: 50vh; + } + :host([theme="dark"]) .background-default-slant { + background-color: black; } ak-locale-context { display: flex; @@ -158,7 +177,11 @@ export class UserInterface extends Interface { return html`
-
+
+ ${this.uiConfig.theme.background === "" + ? html`
` + : html``} +
@@ -215,7 +238,7 @@ export class UserInterface extends Interface { ? "pf-m-unread" : ""}" > - + ${this.notificationsCount} @@ -244,7 +267,7 @@ export class UserInterface extends Interface {
${this.me.user.isSuperuser ? html` ${msg("Admin interface")}