This repository has been archived on 2024-05-31. You can view files and clone it, but cannot push or open issues or pull requests.
authentik/web/src/authentik.css
Jens Langhammer 0b34f70205 web/admin: fix missing dark theme for notifications
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
2021-07-23 21:27:56 +02:00

328 lines
9.7 KiB
CSS

:root {
--ak-accent: #fd4b2d;
--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-light-ish: #212427;
--ak-dark-background-lighter: #2b2e33;
}
html {
--pf-c-nav__link--PaddingTop: 0.5rem;
--pf-c-nav__link--PaddingRight: 0.5rem;
--pf-c-nav__link--PaddingBottom: 0.5rem;
--pf-c-nav__link--PaddingLeft: 0.5rem;
}
html > form > input {
position: absolute;
top: -2000px;
left: -2000px;
}
.pf-c-page__header {
z-index: 0;
}
/*****************************
* Login adjustments
*****************************/
/* Ensure card is displayed on small screens */
.pf-c-login__main {
display: block;
position: relative;
}
.ak-login-container {
height: calc(100vh - var(--pf-global--spacer--lg) - var(--pf-global--spacer--lg));
width: 35rem;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.pf-c-login__header {
flex-grow: 1;
}
.pf-c-login__footer {
flex-grow: 2;
}
.pf-c-login__footer ul.pf-c-list.pf-m-inline {
justify-content: center;
}
/*****************************
* End Login adjustments
*****************************/
.pf-c-content h1 {
display: flex;
align-items: flex-start;
}
.pf-c-content h1 i {
font-style: normal;
}
.pf-c-content h1 :first-child {
margin-right: var(--pf-global--spacer--sm);
}
/* ensure background on non-flow pages match */
.pf-c-background-image::before {
background-image: var(--ak-flow-background);
background-position: center;
}
.pf-m-success {
color: var(--pf-global--success-color--100);
}
.pf-c-button.pf-m-success {
color: var(--pf-c-button--m-primary--Color);
background-color: var(--pf-global--success-color--100);
}
.pf-m-warning {
color: var(--pf-global--warning-color--100);
}
.pf-c-button.pf-m-warning {
color: var(--pf-c-button--m-primary--Color);
background-color: var(--pf-global--warning-color--100);
}
.pf-m-danger {
color: var(--pf-global--danger-color--100);
}
.pf-c-button.pf-m-danger {
color: var(--pf-c-button--m-primary--Color);
background-color: var(--pf-global--danger-color--100);
}
body {
background-color: var(--ak-dark-background) !important;
}
.ak-static-page h1 {
color: var(--ak-dark-foreground);
}
.form-help-text {
color: var(--pf-global--Color--100);
}
@media (prefers-color-scheme: dark) {
:root {
--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-drawer__content {
--pf-c-drawer__content--BackgroundColor: var(--ak-dark-background);
}
.pf-c-title {
color: var(--ak-dark-foreground);
}
.pf-u-mb-xl {
color: var(--ak-dark-foreground);
}
/* Header sections */
.pf-c-page__main-section {
--pf-c-page__main-section--BackgroundColor: var(--ak-dark-background);
}
.sidebar-trigger,
.notification-trigger {
background-color: var(--ak-dark-background-light) !important;
}
.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);
color: var(--ak-dark-foreground);
}
.pf-c-card__title,
.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);
}
.pf-c-table__text {
color: var(--ak-dark-foreground);
}
.pf-c-table__sort:not(.pf-m-selected) .pf-c-table__button .pf-c-table__text {
color: var(--ak-dark-foreground) !important;
}
.pf-c-table__sort-indicator i {
color: var(--ak-dark-foreground) !important;
}
.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);
}
.pf-c-tabs__item.pf-m-current {
--pf-c-tabs__link--after--BorderColor: #fd4b2d;
}
/* tabs, vertical */
.pf-c-tabs.pf-m-vertical .pf-c-tabs__link {
background-color: var(--ak-dark-background-light);
}
/* table, on mobile */
@media screen and (max-width: 1200px) {
.pf-m-grid-xl.pf-c-table tbody:first-of-type {
border-top-color: var(--ak-dark-background);
}
.pf-m-grid-xl.pf-c-table tr:not(.pf-c-table__expandable-row) {
border-bottom-color: var(--ak-dark-background);
}
}
/* class for pagination text */
.pf-c-options-menu__toggle {
color: var(--ak-dark-foreground);
}
/* table icon used for expanding rows */
.pf-c-table__toggle-icon {
color: var(--ak-dark-foreground);
}
/* expandable elements */
.pf-c-expandable-section__toggle-text {
color: var(--ak-dark-foreground);
}
.pf-c-expandable-section__toggle-icon {
color: var(--ak-dark-foreground);
}
/* header for form group */
.pf-c-form__field-group-header-title-text {
color: var(--ak-dark-foreground);
}
.pf-c-form__field-group {
border-bottom: 0;
}
/* inputs */
optgroup, option {
color: var(--ak-dark-foreground);
}
.pf-c-input-group {
--pf-c-input-group--BackgroundColor: transparent;
}
.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;
--pf-c-form-control--BackgroundColor: var(--ak-dark-background-light);
color: var(--ak-dark-foreground);
}
.pf-c-form-control:disabled {
background-color: var(--ak-dark-background-light);
}
.pf-c-form-control[readonly] {
background-color: var(--ak-dark-background-light);
}
.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-m-tertiary,
.pf-c-button.pf-m-tertiary {
--pf-c-button--after--BorderColor: var(--ak-dark-foreground-darker);
color: var(--ak-dark-foreground-darker);
}
.pf-m-tertiary:hover,
.pf-c-button.pf-m-tertiary:hover {
--pf-c-button--after--BorderColor: var(--ak-dark-background-lighter);
}
.pf-c-form__label-text {
color: var(--ak-dark-foreground);
}
.pf-c-check__label {
color: var(--ak-dark-foreground);
}
.form-help-text {
color: var(--ak-dark-foreground);
}
.pf-c-dropdown__toggle::before {
border-color: transparent;
}
.pf-c-toggle-group__button {
color: var(--ak-dark-foreground) !important;
}
.pf-c-toggle-group__button:not(.pf-m-selected) {
background-color: var(--ak-dark-background-light) !important;
}
/* inputs help text */
.pf-c-form__helper-text:not(.pf-m-error) {
color: var(--ak-dark-foreground);
}
/* modal */
.pf-c-modal-box__header {
background-color: var(--ak-dark-background-light);
}
.pf-c-modal-box__body {
background-color: var(--ak-dark-background-light);
}
.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-body,
.pf-c-login__main-header,
.pf-c-login__main-header-desc {
color: var(--ak-dark-foreground);
}
.pf-c-login__main-footer-links-item img {
filter: invert(1);
}
.pf-c-login__main-footer-band {
background-color: var(--ak-dark-background-lighter);
color: var(--ak-dark-foreground);
}
.form-control-static {
color: var(--ak-dark-foreground);
}
/* notifications */
.pf-c-drawer__panel {
background-color: var(--ak-dark-background);
}
.pf-c-notification-drawer {
--pf-c-notification-drawer--BackgroundColor: var(--ak-dark-background);
}
.pf-c-notification-drawer__header {
background-color: var(--ak-dark-background-lighter);
color: var(--ak-dark-foreground);
}
.pf-c-notification-drawer__list-item {
background-color: var(--ak-dark-background-light-ish);
color: var(--ak-dark-foreground);
}
/* data list */
.pf-c-data-list__item {
--pf-c-data-list__item--BackgroundColor: var(--ak-dark-background-light);
--pf-c-data-list__item--BorderBottomColor: var(--ak-dark-background-lighter);
color: var(--ak-dark-foreground);
}
}