web: dark mode (#368)
* web: initial dark mode * web: re-fix sidebar colour in dark mode * web: fix dark mode for user settings * web: fix dark mode for flows * core: match delete template's footer with generic form * admin: show app icon in app list
This commit is contained in:
Jens L
GitHub
parent
3487c41ce0
commit
c03754abec
|
|
@ -36,24 +36,34 @@
|
|||
<table class="pf-c-table pf-m-compact pf-m-grid-xl" role="grid">
|
||||
<thead>
|
||||
<tr role="row">
|
||||
<th role="columnheader"></th>
|
||||
<th role="columnheader" scope="col">{% trans 'Name' %}</th>
|
||||
<th role="columnheader" scope="col">{% trans 'Slug' %}</th>
|
||||
<th role="columnheader" scope="col">{% trans 'Provider' %}</th>
|
||||
<th role="columnheader" scope="col">{% trans 'Provider Type' %}</th>
|
||||
<th role="cell"></th>
|
||||
<th role="columnheader"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody role="rowgroup">
|
||||
{% for application in object_list %}
|
||||
<tr role="row">
|
||||
<th role="columnheader">
|
||||
<td role="cell" {% if application.meta_icon %} style="vertical-align: bottom;" {% endif %}>
|
||||
{% if application.meta_icon %}
|
||||
<img class="app-icon pf-c-avatar" src="{{ application.meta_icon.url }}" alt="{% trans 'Application Icon' %}">
|
||||
{% else %}
|
||||
<i class="pf-icon pf-icon-arrow"></i>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td role="cell">
|
||||
<a href="/applications/{{ application.slug }}/">
|
||||
<div>{{ application.name }}</div>
|
||||
<div>
|
||||
{{ application.name }}
|
||||
</div>
|
||||
{% if application.meta_publisher %}
|
||||
<small>{{ application.meta_publisher }}</small>
|
||||
{% endif %}
|
||||
</a>
|
||||
</th>
|
||||
</td>
|
||||
<td role="cell">
|
||||
<code>{{ application.slug }}</span>
|
||||
</td>
|
||||
|
|
|
|||
|
|
@ -28,16 +28,14 @@
|
|||
{% endblocktrans %}
|
||||
</p>
|
||||
<input type="hidden" name="confirmdelete" value="yes">
|
||||
<div class="pf-c-form__group pf-m-action">
|
||||
<div class="pf-c-form__actions">
|
||||
<input class="pf-c-button pf-m-danger" type="submit" value="{% trans 'Delete' %}" />
|
||||
<a class="pf-c-button pf-m-secondary" href="{% back %}">{% trans "Back" %}</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="pf-c-modal-box__footer">
|
||||
<input class="pf-c-button pf-m-danger" type="submit" value="{% trans 'Delete' %}" />
|
||||
<a class="pf-c-button pf-m-secondary" href="{% back %}">{% trans "Back" %}</a>
|
||||
</footer>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -85,3 +85,98 @@ select[multiple] {
|
|||
.subtext {
|
||||
font-size: var(--pf-global--FontSize--sm);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--ak-dark-foreground: #fafafa;
|
||||
--ak-dark-foreground-darker: #bebebe;
|
||||
--ak-dark-foreground-link: #5a5cb9;
|
||||
--ak-dark-background: #18191a;
|
||||
--ak-dark-background-darker: #000000;
|
||||
--ak-dark-background-light: #1c1e21;
|
||||
--ak-dark-background-lighter: #2b2e33;
|
||||
|
||||
--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);
|
||||
}
|
||||
/* Global page background colour */
|
||||
.pf-c-page {
|
||||
--pf-c-page--BackgroundColor: var(--ak-dark-background);
|
||||
}
|
||||
.pf-c-title {
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
/* Header sections */
|
||||
.pf-c-page__main-section {
|
||||
background-color: var(--ak-dark-background);
|
||||
}
|
||||
.pf-c-page__main-section.pf-m-light {
|
||||
background-color: var(--ak-dark-background-light);
|
||||
}
|
||||
.pf-c-content {
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
/* Card */
|
||||
.pf-c-card {
|
||||
--pf-c-card--BackgroundColor: var(--ak-dark-background-light);
|
||||
}
|
||||
.pf-c-card__header-main,
|
||||
.pf-c-card__body {
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
.pf-c-toolbar {
|
||||
--pf-c-toolbar--BackgroundColor: var(--ak-dark-background-light);
|
||||
}
|
||||
.pf-c-pagination.pf-m-bottom {
|
||||
background-color: var(--ak-dark-background-light);
|
||||
}
|
||||
/* table */
|
||||
.pf-c-table {
|
||||
--pf-c-table--BackgroundColor: var(--ak-dark-background-light);
|
||||
--pf-c-table--BorderColor: var(--ak-dark-background-lighter);
|
||||
--pf-c-table--cell--Color: var(--ak-dark-foreground);
|
||||
}
|
||||
/* inputs */
|
||||
.pf-c-form-control {
|
||||
--pf-c-form-control--BorderTopColor: var(--ak-dark-background-lighter);
|
||||
--pf-c-form-control--BorderRightColor: var(--ak-dark-background-lighter);
|
||||
--pf-c-form-control--BorderLeftColor: var(--ak-dark-background-lighter);
|
||||
--pf-global--BackgroundColor--100: transparent;
|
||||
background-color: var(--ak-dark-background-light);
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
.pf-c-button.pf-m-control {
|
||||
--pf-c-button--after--BorderColor: var(--ak-dark-background-lighter) var(--ak-dark-background-lighter) var(--pf-c-button--m-control--after--BorderBottomColor) var(--ak-dark-background-lighter);
|
||||
background-color: var(--ak-dark-background-light);
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
.pf-c-form__label-text {
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
.pf-c-check__label {
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
/* inputs help text */
|
||||
.pf-c-form__helper-text {
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
/* modal */
|
||||
.pf-c-modal-box__footer {
|
||||
background-color: var(--ak-dark-background-light);
|
||||
}
|
||||
/* sidebar */
|
||||
.pf-c-nav {
|
||||
background-color: var(--ak-dark-background-light);
|
||||
}
|
||||
/* flows */
|
||||
.pf-c-login__main {
|
||||
background-color: var(--ak-dark-background);
|
||||
}
|
||||
.pf-c-login__main-footer-links-item-link > img {
|
||||
filter: invert(1);
|
||||
}
|
||||
.form-control-static {
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import PFAddons from "@patternfly/patternfly/patternfly-addons.css";
|
|||
// @ts-ignore
|
||||
import FA from "@fortawesome/fontawesome-free/css/fontawesome.css";
|
||||
// @ts-ignore
|
||||
import PBGlobal from "../authentik.css";
|
||||
import AKGlobal from "../authentik.css";
|
||||
import { CSSResult } from "lit-element";
|
||||
|
||||
export const COMMON_STYLES: CSSResult[] = [PF, PFAddons, FA, PBGlobal];
|
||||
export const COMMON_STYLES: CSSResult[] = [PF, PFAddons, FA, AKGlobal];
|
||||
|
|
|
|||
|
|
@ -16,9 +16,13 @@ export class AggregateCard extends LitElement {
|
|||
|
||||
static get styles(): CSSResult[] {
|
||||
return COMMON_STYLES.concat([css`
|
||||
.pf-c-card.pf-c-card-aggregate {
|
||||
height: 100%;
|
||||
}
|
||||
.center-value {
|
||||
font-size: var(--pf-global--icon--FontSize--lg);
|
||||
text-align: center;
|
||||
color: var(--pf-global--Color--100);
|
||||
}
|
||||
`]);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@ import PageStyle from "@patternfly/patternfly/components/Page/page.css";
|
|||
import NavStyle from "@patternfly/patternfly/components/Nav/nav.css";
|
||||
// @ts-ignore
|
||||
import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css";
|
||||
// @ts-ignore
|
||||
import AKGlobal from "../../authentik.css";
|
||||
|
||||
import { until } from "lit-html/directives/until";
|
||||
|
||||
|
|
@ -31,6 +33,7 @@ export class Sidebar extends LitElement {
|
|||
GlobalsStyle,
|
||||
PageStyle,
|
||||
NavStyle,
|
||||
AKGlobal,
|
||||
css`
|
||||
.pf-c-nav__list .sidebar-brand {
|
||||
max-height: 82px;
|
||||
|
|
|
|||
Reference in a new issue