212 lines
6 KiB
CSS
212 lines
6 KiB
CSS
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;
|
|
}
|
|
|
|
/* Fix patternfly sidebar and header with open Modal */
|
|
.pf-c-page__sidebar {
|
|
z-index: 0;
|
|
}
|
|
|
|
.pf-c-page__header {
|
|
z-index: 0;
|
|
}
|
|
|
|
/* Ensure card is displayed on small screens */
|
|
.pf-c-login__main {
|
|
display: block;
|
|
}
|
|
|
|
/* login page's icons */
|
|
.pf-c-login__main-footer-links-item-link img {
|
|
fill: var(--pf-c-login__main-footer-links-item-link-svg--Fill);
|
|
width: 100%;
|
|
max-width: var(--pf-c-login__main-footer-links-item-link-svg--Width);
|
|
height: 100%;
|
|
max-height: var(--pf-c-login__main-footer-links-item-link-svg--Height);
|
|
}
|
|
|
|
/* fix multiple selects height */
|
|
select[multiple] {
|
|
height: initial;
|
|
}
|
|
|
|
/* Form with user */
|
|
.form-control-static {
|
|
margin-top: var(--pf-global--spacer--sm);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.form-control-static .left {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.form-control-static img {
|
|
margin-right: var(--pf-global--spacer--xs);
|
|
}
|
|
.form-control-static a {
|
|
padding-top: var(--pf-global--spacer--xs);
|
|
padding-bottom: var(--pf-global--spacer--xs);
|
|
line-height: var(--pf-global--spacer--xl);
|
|
}
|
|
|
|
/* Static OTP Tokens, authentik.stages.otp_static */
|
|
.ak-otp-tokens {
|
|
list-style: circle;
|
|
columns: 2;
|
|
-webkit-columns: 2;
|
|
-moz-columns: 2;
|
|
margin-left: var(--pf-global--spacer--xs);
|
|
}
|
|
.ak-otp-tokens li {
|
|
font-size: var(--pf-global--FontSize--2xl);
|
|
font-family: monospace;
|
|
}
|
|
|
|
/* Fix pre elements within alerts */
|
|
.pf-c-alert pre {
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
/* 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);
|
|
}
|
|
/* 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-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);
|
|
}
|
|
/* inputs help text */
|
|
.pf-c-form__helper-text {
|
|
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 {
|
|
color: var(--ak-dark-foreground);
|
|
}
|
|
.pf-c-login__main-footer-links-item-link > img {
|
|
filter: invert(1);
|
|
}
|
|
.form-control-static {
|
|
color: var(--ak-dark-foreground);
|
|
}
|
|
}
|