root: fix static templates (#7925)

* root: fix static HTML templates to match flow executor

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

* remove top margin on smaller viewports

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

---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Jens L 2023-12-19 13:59:53 +01:00 committed by GitHub
parent 67b47f42c7
commit b7532740ef
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 34 additions and 36 deletions

View File

@ -44,28 +44,14 @@
{% block body %} {% block body %}
<div class="pf-c-background-image"> <div class="pf-c-background-image">
<svg xmlns="http://www.w3.org/2000/svg" class="pf-c-background-image__filter" width="0" height="0">
<filter id="image_overlay">
<feColorMatrix in="SourceGraphic" type="matrix" values="1.3 0 0 0 0 0 1.3 0 0 0 0 0 1.3 0 0 0 0 0 1 0" />
<feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
<feFuncR type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncR>
<feFuncG type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncG>
<feFuncB type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncB>
<feFuncA type="table" tableValues="0 1"></feFuncA>
</feComponentTransfer>
</filter>
</svg>
</div> </div>
<ak-message-container></ak-message-container> <ak-message-container></ak-message-container>
<div class="pf-c-login"> <div class="pf-c-login stacked">
<div class="ak-login-container"> <div class="ak-login-container">
<header class="pf-c-login__header"> <main class="pf-c-login__main">
<div class="pf-c-brand ak-brand"> <div class="pf-c-login__main-header pf-c-brand ak-brand">
<img src="{{ tenant.branding_logo }}" alt="authentik Logo" /> <img src="{{ tenant.branding_logo }}" alt="authentik Logo" />
</div> </div>
</header>
{% block main_container %}
<main class="pf-c-login__main">
<header class="pf-c-login__main-header"> <header class="pf-c-login__main-header">
<h1 class="pf-c-title pf-m-3xl"> <h1 class="pf-c-title pf-m-3xl">
{% block card_title %} {% block card_title %}
@ -77,7 +63,6 @@
{% endblock %} {% endblock %}
</div> </div>
</main> </main>
{% endblock %}
<footer class="pf-c-login__footer"> <footer class="pf-c-login__footer">
<ul class="pf-c-list pf-m-inline"> <ul class="pf-c-list pf-m-inline">
{% for link in footer_links %} {% for link in footer_links %}

View File

@ -26,26 +26,13 @@
</head> </head>
<body> <body>
<div class="pf-c-background-image"> <div class="pf-c-background-image">
<svg xmlns="http://www.w3.org/2000/svg" class="pf-c-background-image__filter" width="0" height="0">
<filter id="image_overlay">
<feColorMatrix in="SourceGraphic" type="matrix" values="1.3 0 0 0 0 0 1.3 0 0 0 0 0 1.3 0 0 0 0 0 1 0" />
<feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
<feFuncR type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncR>
<feFuncG type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncG>
<feFuncB type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncB>
<feFuncA type="table" tableValues="0 1"></feFuncA>
</feComponentTransfer>
</filter>
</svg>
</div> </div>
<div class="pf-c-login"> <div class="pf-c-login stacked">
<div class="ak-login-container"> <div class="ak-login-container">
<header class="pf-c-login__header"> <main class="pf-c-login__main">
<div class="pf-c-brand ak-brand"> <div class="pf-c-login__main-header pf-c-brand ak-brand">
<img src="/outpost.goauthentik.io/static/dist/assets/icons/icon_left_brand.svg" alt="authentik Logo" /> <img src="/outpost.goauthentik.io/static/dist/assets/icons/icon_left_brand.svg" alt="authentik Logo" />
</div> </div>
</header>
<main class="pf-c-login__main">
<header class="pf-c-login__main-header"> <header class="pf-c-login__main-header">
<h1 class="pf-c-title pf-m-3xl"> <h1 class="pf-c-title pf-m-3xl">
{{ .Title }} {{ .Title }}

View File

@ -124,3 +124,27 @@ html > form > input {
margin-right: 6px; margin-right: 6px;
margin-bottom: 6px; margin-bottom: 6px;
} }
/* Flow-card adjustments for static pages */
.pf-c-brand {
padding-top: calc(
var(--pf-c-login__main-footer-links--PaddingTop) +
var(--pf-c-login__main-footer-links--PaddingBottom) +
var(--pf-c-login__main-body--PaddingBottom)
);
max-height: 9rem;
}
.ak-brand {
display: flex;
justify-content: center;
}
.ak-brand img {
padding: 0 2rem;
max-height: inherit;
}
@media (min-height: 60rem) {
.pf-c-login.stacked .pf-c-login__main {
margin-top: 13rem;
}
}

View File

@ -115,9 +115,11 @@ export class FlowExecutor extends Interface implements StageHost {
background-color: transparent; background-color: transparent;
} }
/* layouts */ /* layouts */
@media (min-height: 60rem) {
.pf-c-login.stacked .pf-c-login__main { .pf-c-login.stacked .pf-c-login__main {
margin-top: 13rem; margin-top: 13rem;
} }
}
.pf-c-login__container.content-right { .pf-c-login__container.content-right {
grid-template-areas: grid-template-areas:
"header main" "header main"