habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web/user: experiment with some slightly different styles (#6405)

Browse Source 
* web/user: experiment with some slightly different styles

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* rework application card

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* fix color and expand

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* fix expansion

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Jens L
2023-07-28 00:23:06 +02:00
committed by GitHub
parent a2714ab1f1
commit de16988cac
4 changed files with 89 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
web/src/user/UserInterface.ts
View File

@ -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` <ak-locale-context>
<ak-enterprise-status interface="user"></ak-enterprise-status>
<div class="pf-c-page">
<div class="background-wrapper" style="${this.uiConfig.theme.background}"></div>
<div class="background-wrapper" style="${this.uiConfig.theme.background}">
${this.uiConfig.theme.background === ""
? html`<div class="background-default-slant"></div>`
: html``}
</div>
<header class="pf-c-page__header">
<div class="pf-c-page__header-brand">
<a href="#/" class="pf-c-page__header-brand-link">
@ -215,7 +238,7 @@ export class UserInterface extends Interface {
? "pf-m-unread"
: ""}"
>
<i class="pf-icon-bell" aria-hidden="true"></i>
<i class="fas fa-bell" aria-hidden="true"></i>
<span class="pf-c-notification-badge__count"
>${this.notificationsCount}</span
>
@ -244,7 +267,7 @@ export class UserInterface extends Interface {
</div>
${this.me.user.isSuperuser
? html`<a
class="pf-c-button pf-m-primary pf-m-small pf-u-display-none pf-u-display-block-on-md"
class="pf-c-button pf-m-secondary pf-m-small pf-u-display-none pf-u-display-block-on-md"
href="/if/admin"
>
${msg("Admin interface")}