web: add fullHeight toggle to empty state, add dark empty state

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

web/src/authentik.css

@@ -77,6 +77,7 @@ ak-message {
         --pf-global--Color--100: var(--ak-dark-foreground);
         --pf-c-page__main-section--m-light--BackgroundColor: var(--ak-dark-background-darker);
         --pf-global--link--Color: var(--ak-dark-foreground-link);
+        --pf-global--BackgroundColor--light-300: var(--ak-dark-background);
     }
     /* Global page background colour */
     .pf-c-page {
@@ -131,6 +132,10 @@ ak-message {
     .pf-c-table__expandable-row.pf-m-expanded {
         --pf-c-table__expandable-row--m-expanded--BorderBottomColor: var(--ak-dark-background-lighter);
     }
+    /* tabs */
+    .pf-c-tabs {
+        background-color: var(--ak-dark-background-light);
+    }
     /* tabs, vertical */
     .pf-c-tabs.pf-m-vertical .pf-c-tabs__link {
         background-color: var(--ak-dark-background-light);

web/src/elements/EmptyState.ts

@@ -2,6 +2,7 @@ import { CSSResult, customElement, html, LitElement, property, TemplateResult }
 import PFEmptyState from "@patternfly/patternfly/components/EmptyState/empty-state.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 import PFTitle from "@patternfly/patternfly/components/Title/title.css";
+import AKGlobal from "../authentik.css";
 
 import { SpinnerSize } from "./Spinner";
 
@@ -14,15 +15,18 @@ export class EmptyState extends LitElement {
     @property({type: Boolean})
     loading = false;
 
+    @property({type: Boolean})
+    fullHeight = false;
+
     @property()
-    header?: string;
+    header: string = "";
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFEmptyState, PFTitle];
+        return [PFBase, PFEmptyState, PFTitle, AKGlobal];
     }
 
     render(): TemplateResult {
-        return html`<div class="pf-c-empty-state">
+        return html`<div class="pf-c-empty-state ${this.fullHeight && 'pf-m-full-height'}">
             <div class="pf-c-empty-state__content">
                 ${this.loading ?
                     html`<div class="pf-c-empty-state__icon">

web/src/elements/router/RouterOutlet.ts

@@ -2,6 +2,7 @@ import { css, CSSResult, customElement, html, LitElement, property, TemplateResu
 import { Route } from "./Route";
 import { ROUTES } from "../../routes";
 import { RouteMatch } from "./RouteMatch";
+import AKGlobal from "../../authentik.css";
 
 import "../../pages/generic/SiteShell";
 import "./Router404";
@@ -15,10 +16,11 @@ export class RouterOutlet extends LitElement {
     defaultUrl?: string;
 
     static get styles(): CSSResult[] {
-        return [
+        return [AKGlobal,
             css`
                 :host {
                     height: 100vh;
+                    background-color: var(--pf-c-page--BackgroundColor) !important;
                 }
                 *:first-child {
                     height: 100%;