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

web/user: make more themable

Browse source 
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: {
userDisplay: UserDisplay;
};
color: {
theme: {
background: string;
cardBackground: string;
};
@ -57,7 +57,7 @@ export class DefaultUIConfig implements UIConfig {
navbar = {
userDisplay: UserDisplay.username,
};
color = {
theme = {
background: "",
cardBackground: "",
};

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

@ -75,7 +75,7 @@ export class UserInterface extends LitElement {
background-color: transparent !important;
}
.pf-c-page {
background-color: var(--pf-c-page--BackgroundColor) !important;
background-color: transparent !important;
}
.display-none {
display: none;
@ -87,6 +87,12 @@ export class UserInterface extends LitElement {
.has-notifications {
color: #2b9af3;
}
.background-wrapper {
height: 100vh;
width: 100vw;
position: absolute;
z-index: -1;
}
`,
];
}
@ -128,10 +134,8 @@ export class UserInterface extends LitElement {
render(): TemplateResult {
return html`${until(
uiConfig().then((config) => {
return html`<div
class="pf-c-page"
style="background: ${config.color.background} !important"
>
return html`<div class="pf-c-page">
<div class="background-wrapper" style="${config.theme.background}"></div>
<header class="pf-c-page__header">
<div class="pf-c-page__header-brand">
<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-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:
groupClass = "pf-m-4-col";
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;
}
return html`<div class="pf-l-grid pf-m-gutter">
${this.getApps().map(([group, apps]) => {
return html`<div class="pf-l-grid__item ${groupClass}">
<div class="pf-c-content app-group-header">
<h2>${group}</h2>
<h2 class="text-shadow">${group}</h2>
</div>
<div class="pf-l-grid pf-m-gutter ${groupGrid}">
${apps.map((app) => {
return html`<ak-library-app
class="pf-l-grid__item"
.application=${app}
background=${config.color.cardBackground}
background=${config.theme.cardBackground}
?selected=${app.slug === this.selectedApp?.slug}
></ak-library-app>`;
})}
@ -172,7 +175,7 @@ export class LibraryPage extends LitElement {
id="main-content"
>
<div class="pf-c-content header">
<h1>${t`My applications`}</h1>
<h1 class="text-shadow">${t`My applications`}</h1>
${config.enabledFeatures.search
? html`<input
@input=${(ev: InputEvent) => {
@ -198,7 +201,7 @@ export class LibraryPage extends LitElement {
}
}}
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
placeholder=${t`Search...`}
/>`