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

web/user: make more themable 

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2022-04-05 23:47:15 +02:00
parent f2b540ed8a
commit e38d03b304
3 changed files with 19 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/common/config.ts
View File

@ -30,7 +30,7 @@ export interface UIConfig {
navbar: { navbar: {
userDisplay: UserDisplay; userDisplay: UserDisplay;
}; };
color: { theme: {
background: string; background: string;
cardBackground: string; cardBackground: string;
}; };
@ -57,7 +57,7 @@ export class DefaultUIConfig implements UIConfig {
navbar = { navbar = {
userDisplay: UserDisplay.username, userDisplay: UserDisplay.username,
}; };
color = { theme = {
background: "", background: "",
cardBackground: "", cardBackground: "",
}; };

14
web/src/interfaces/UserInterface.ts
View File

@ -75,7 +75,7 @@ export class UserInterface extends LitElement {
background-color: transparent !important; background-color: transparent !important;
} }
.pf-c-page { .pf-c-page {
background-color: var(--pf-c-page--BackgroundColor) !important; background-color: transparent !important;
} }
.display-none { .display-none {
display: none; display: none;
@ -87,6 +87,12 @@ export class UserInterface extends LitElement {
.has-notifications { .has-notifications {
color: #2b9af3; color: #2b9af3;
} }
.background-wrapper {
height: 100vh;
width: 100vw;
position: absolute;
z-index: -1;
}
`, `,
]; ];
} }
@ -128,10 +134,8 @@ export class UserInterface extends LitElement {
render(): TemplateResult { render(): TemplateResult {
return html`${until( return html`${until(
uiConfig().then((config) => { uiConfig().then((config) => {
return html`<div return html`<div class="pf-c-page">
class="pf-c-page" <div class="background-wrapper" style="${config.theme.background}"></div>
style="background: ${config.color.background} !important"
>
<header class="pf-c-page__header"> <header class="pf-c-page__header">
<div class="pf-c-page__header-brand"> <div class="pf-c-page__header-brand">
<a href="#/" class="pf-c-page__header-brand-link"> <a href="#/" class="pf-c-page__header-brand-link">

13
web/src/user/LibraryPage.ts
View File

@ -89,6 +89,9 @@ export class LibraryPage extends LitElement {
margin-bottom: 1em; margin-bottom: 1em;
margin-top: 1.2em; margin-top: 1.2em;
} }
.text-shadow {
text-shadow: 2px 2px 5px var(--ak-dark-background-light);
}
`); `);
} }
@ -138,21 +141,21 @@ export class LibraryPage extends LitElement {
case LayoutType.column_3: case LayoutType.column_3:
groupClass = "pf-m-4-col"; groupClass = "pf-m-4-col";
groupGrid = groupGrid =
"pf-m-all-12-col-on-sm pf-m-all-12-col-on-md pf-m-all-6-col-on-lg pf-m-all-4-col-on-xl"; "pf-m-all-12-col-on-sm pf-m-all-12-col-on-md pf-m-all-6-col-on-lg pf-m-all-6-col-on-xl";
break; break;
} }
return html`<div class="pf-l-grid pf-m-gutter"> return html`<div class="pf-l-grid pf-m-gutter">
${this.getApps().map(([group, apps]) => { ${this.getApps().map(([group, apps]) => {
return html`<div class="pf-l-grid__item ${groupClass}"> return html`<div class="pf-l-grid__item ${groupClass}">
<div class="pf-c-content app-group-header"> <div class="pf-c-content app-group-header">
<h2>${group}</h2> <h2 class="text-shadow">${group}</h2>
</div> </div>
<div class="pf-l-grid pf-m-gutter ${groupGrid}"> <div class="pf-l-grid pf-m-gutter ${groupGrid}">
${apps.map((app) => { ${apps.map((app) => {
return html`<ak-library-app return html`<ak-library-app
class="pf-l-grid__item" class="pf-l-grid__item"
.application=${app} .application=${app}
background=${config.color.cardBackground} background=${config.theme.cardBackground}
?selected=${app.slug === this.selectedApp?.slug} ?selected=${app.slug === this.selectedApp?.slug}
></ak-library-app>`; ></ak-library-app>`;
})} })}
@ -172,7 +175,7 @@ export class LibraryPage extends LitElement {
id="main-content" id="main-content"
> >
<div class="pf-c-content header"> <div class="pf-c-content header">
<h1>${t`My applications`}</h1> <h1 class="text-shadow">${t`My applications`}</h1>
${config.enabledFeatures.search ${config.enabledFeatures.search
? html`<input ? html`<input
@input=${(ev: InputEvent) => { @input=${(ev: InputEvent) => {
@ -198,7 +201,7 @@ export class LibraryPage extends LitElement {
} }
}} }}
type="text" type="text"
class="pf-u-display-none pf-u-display-block-on-md" class="pf-u-display-none pf-u-display-block-on-md text-shadow"
autofocus autofocus
placeholder=${t`Search...`} placeholder=${t`Search...`}
/>` />`