135 lines
No EOL
3.6 KiB
YAML
135 lines
No EOL
3.6 KiB
YAML
apiVersion: v1
|
|
kind: ConfigMap
|
|
metadata:
|
|
name: authentik-custom-css
|
|
namespace: authentik
|
|
data:
|
|
custom.css: |
|
|
/* Custom CSS for Authentik Login Page and Admin Interface */
|
|
|
|
:root {
|
|
--ak-accent: #3a3a40;
|
|
--pf-global--primary-color--100: #3a3a40;
|
|
--pf-global--primary-color--200: #3a3a40;
|
|
--pf-global--primary-color--400: var(--ak-accent);
|
|
}
|
|
|
|
/*** Main login page ***/
|
|
.pf-c-login__main {
|
|
background-color: transparent !important;
|
|
backdrop-filter: blur(8px);
|
|
border: 2px solid #807e82;
|
|
border-radius: 25px;
|
|
animation: pulse-border 3s infinite;
|
|
}
|
|
|
|
/* Glowing border animation */
|
|
@keyframes pulse-border {
|
|
0%, 100% {
|
|
box-shadow: 0 0 10px #807e82, 0 0 15px #807e82;
|
|
}
|
|
50% {
|
|
box-shadow: 0 0 15px #807e82, 0 0 25px #807e82;
|
|
}
|
|
}
|
|
|
|
/* Sidebar and footer transparency */
|
|
.pf-c-page__sidebar,
|
|
.pf-c-login__main-footer-band,
|
|
.pf-c-login__footer .pf-c-list {
|
|
background-color: transparent !important;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
/* Pseudo-elements for background effects */
|
|
.pf-c-login__main::before,
|
|
.pf-c-login__main-footer-band::before,
|
|
.pf-c-login__footer .pf-c-list::before,
|
|
.pf-c-page__sidebar::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -1;
|
|
opacity: 0.1;
|
|
background-color: var(--ak-dark-background);
|
|
border-radius: 25px;
|
|
}
|
|
|
|
/* Login button styling */
|
|
.pf-c-button.pf-m-block {
|
|
--pf-c-button--disabled--BackgroundColor: var(--pf-c-button--m-link--disabled--BackgroundColor);
|
|
color: white;
|
|
background-color: #3a3a40;
|
|
border-radius: 20px;
|
|
opacity: 0.785;
|
|
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
|
|
width: 50%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* Form input styling */
|
|
.pf-c-form-control,
|
|
.pf-c-input-group {
|
|
border-radius: 20px;
|
|
border: 2px solid #3a3a40 !important;
|
|
}
|
|
|
|
/* Text color for various elements */
|
|
a,
|
|
body,
|
|
h1,
|
|
h2,
|
|
.pf-c-expandable-section__toggle,
|
|
.pf-c-page__header-tools,
|
|
.pf-c-button {
|
|
color: #b7b7b7 !important;
|
|
}
|
|
|
|
.pf-c-button.pf-m-secondary.pf-m-block::after {
|
|
content: none; /* Removes the content from the ::after pseudo-element */
|
|
box-shadow: none; /* Removes any shadow that may create a square effect */
|
|
border: none; /* If there's any border being applied, remove it */
|
|
}
|
|
|
|
/* Light mode adjustments */
|
|
:host([theme="light"]) .pf-c-page__header-tools-item .fas,
|
|
:host([theme="light"]) .pf-c-notification-badge__count,
|
|
:host([theme="light"]) .pf-c-page__header-tools-group .pf-c-button {
|
|
color: #b7b7b7 !important;
|
|
}
|
|
|
|
/* App card styling */
|
|
.pf-c-card.pf-m-compact,
|
|
.pf-c-expandable-section.pf-m-display-lg {
|
|
border-radius: 20px;
|
|
background: rgba(18, 18, 18, 0.4);
|
|
backdrop-filter: blur(7px);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
transition: box-shadow 0.3s ease-in-out;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
|
|
background: linear-gradient(135deg, rgba(30, 30, 30, 0.3) 0%, rgba(15, 15, 15, 0.3) 100%);
|
|
}
|
|
|
|
/* App card hover effect */
|
|
.pf-c-card.pf-m-compact:hover,
|
|
.pf-c-expandable-section.pf-m-display-lg:hover {
|
|
box-shadow: 0 0 15px 3px #d6d6d6;
|
|
}
|
|
|
|
/* App icon rounded corners */
|
|
.icon.pf-c-avatar {
|
|
border-radius: 15px;
|
|
}
|
|
|
|
/*** Admin interface ***/
|
|
.pf-c-page__sidebar {
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.pf-c-page,
|
|
.pf-c-tabs__item {
|
|
background-color: transparent !important;
|
|
} |