306e1c656b
Fixed some bugs with the glow on hover for the login button and some other minor issues with the 2024.12 update. Sorry in advance for the unorganized code and lack of comments. Still havent had the titme to dedicate to cleaning this up.
357 lines
8.7 KiB
CSS
357 lines
8.7 KiB
CSS
:root {
|
|
--ak-accent: #3a3a40;
|
|
--pf-global--primary-color--100: #3a3a40;
|
|
--pf-global--primary-color--200: #3a3a40;
|
|
--pf-global--primary-color--400: var(--ak-accent);
|
|
--pf-c-form-control--BorderRadius: 20px;
|
|
}
|
|
|
|
|
|
|
|
/*** Main login page ***/
|
|
|
|
.pf-c-login__main {
|
|
background-color: transparent !important;
|
|
backdrop-filter: blur(8px);
|
|
border: 2px solid #807e82;
|
|
}
|
|
|
|
/* Glowing border */
|
|
|
|
@keyframes pulse-border {
|
|
0% {
|
|
box-shadow: 0 0 10px #807e82, 0 0 15px #807e82;
|
|
}
|
|
50% {
|
|
box-shadow: 0 0 15px #807e82, 0 0 25px #807e82;
|
|
}
|
|
100% {
|
|
box-shadow: 0 0 10px #807e82, 0 0 15px #807e82;
|
|
}
|
|
}
|
|
|
|
.pf-c-login__main {
|
|
animation: pulse-border 3s infinite; /* added this */
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.pf-c-page__sidebar {
|
|
background-color: transparent !important;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
.pf-c-login__main-footer-band,
|
|
.pf-c-login__footer .pf-c-list {
|
|
background-color: transparent !important;
|
|
}
|
|
.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;
|
|
}
|
|
|
|
|
|
|
|
|
|
/*** Other Auth Providers ***/
|
|
|
|
|
|
.pf-c-login__main-footer-links-item { /* Sets auth provider buttons width */
|
|
width: 85% !important;
|
|
}
|
|
|
|
.pf-c-button__icon {
|
|
display: flex;
|
|
align-items: center; /* Centers the icons vertically */
|
|
}
|
|
|
|
.pf-c-button.pf-m-link {
|
|
--pf-c-button--disabled--BackgroundColor: var(--pf-c-button--m-link--disabled--BackgroundColor);
|
|
color: white; /* Text color */
|
|
background-color: #222324; /* Button color */
|
|
border-radius: 20px 20px 20px 20px; /* Corner Radius */
|
|
opacity: 0.785; /* Transparency */
|
|
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3); /* Shadow */
|
|
display: flex;
|
|
justify-content: center; /* Centers the text horizontally */
|
|
align-items: center; /* Centers the text vertically */
|
|
width: 90%; /* If you change this it will be ugly */
|
|
margin: 0 auto !important; /* Centers the box horizontally */
|
|
}
|
|
|
|
|
|
.pf-c-button.pf-m-secondary.ak-stage-authenticator-validate-webauthn:hover,
|
|
.pf-c-button.pf-m-primary.ak-stage-authenticator-validate-webauthn:hover,
|
|
.pf-c-button.pf-m-block.ak-stage-authenticator-validate-code:hover,
|
|
.pf-c-button.pf-m-primary.ak-stage-identification:hover,
|
|
.pf-c-button.pf-m-block.ak-stage-identification:hover,
|
|
.pf-c-button.pf-m-link:hover,
|
|
.pf-c-button.pf-m-block:hover {
|
|
box-shadow: 0 0 5px 3px #d6d6d6; /* Animated glowing aura on hover */
|
|
}
|
|
|
|
/* Provider Icons */
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
white-space: normal; /* Allows text to wrap */
|
|
word-wrap: break-word; /* Breaks long words if necessary */
|
|
font-size: 14px; /* Adjusts the font size */
|
|
padding: 10px 15px; /* Adjusts padding for better spacing */
|
|
text-align: center; /* Centers the text *//* Login buttons */
|
|
|
|
.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 20px 20px 20px;
|
|
opacity: 0.785;
|
|
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
|
|
width: 50%; /* Set the width you desire */
|
|
margin: 0 auto; /* Centers the box horizontally */
|
|
padding-top: 5px; /* Adjust the value as needed */
|
|
padding-bottom: 5px; /* Adjust the value as needed */
|
|
}
|
|
|
|
.pf-c-button.pf-m-block.ak-stage-authenticator-validate-code,
|
|
.pf-c-form__group.pf-m-action.ak-stage-authenticator-validate-code {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
|
|
/* Add padding to create space above and below the buttons */
|
|
padding-top: 16px; /* Adjust the value as needed */
|
|
padding-bottom: 16px; /* Adjust the value as needed */
|
|
}
|
|
|
|
.pf-c-button.pf-m-secondary.ak-stage-authenticator-validate-webauthn,
|
|
.pf-c-button.pf-m-primary.ak-stage-authenticator-validate-webauthn,
|
|
.pf-c-button.pf-m-block.ak-stage-authenticator-validate-code,
|
|
.pf-c-button.pf-m-primary.ak-stage-identification,
|
|
.pf-c-button.pf-m-block.ak-stage-identification {
|
|
display: block;
|
|
margin: 6px auto !important; /* Centers the box horizontally */
|
|
border-radius: 20px 20px 20px 20px;
|
|
width: 50%; /* Sets the button's width to 50% */
|
|
white-space: normal; /* Allows text to wrap */
|
|
word-wrap: break-word; /* Breaks long words if necessary */
|
|
font-size: 16px; /* Adjusts the font size */
|
|
padding: 10px 15px; /* Adjusts padding for better spacing */
|
|
text-align: center; /* Centers the text */
|
|
box-sizing: border-box; /* Includes padding within the width */
|
|
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
|
|
padding-top: 5px; /* Adjust the value as needed */
|
|
padding-bottom: 5px; /* Adjust the value as needed */
|
|
}
|
|
|
|
|
|
|
|
/*** flows ***/
|
|
.pf-c-background-image {
|
|
--pf-c-background-image--Filter: none;
|
|
}
|
|
|
|
|
|
|
|
.pf-c-title.pf-m-3xl {
|
|
font-size: var(--pf-c-title--m-3xl--FontSize);
|
|
font-weight: var(--pf-c-title--m-3xl--FontWeight);
|
|
line-height: var(--pf-c-title--m-3xl--LineHeight);
|
|
text-align: center; /* added this */
|
|
}
|
|
|
|
|
|
|
|
.pf-c-list.pf-m-inline {
|
|
--pf-c-list--PaddingLeft: 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
list-style: none;
|
|
visibility: hidden; /* added this */
|
|
}
|
|
|
|
|
|
|
|
|
|
.ak-login-container {
|
|
/* fix #4830 */
|
|
justify-content: initial;
|
|
}
|
|
.pf-c-login__header {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
|
|
|
|
|
|
/* give both the blur and color same radius */
|
|
.pf-c-login__main,
|
|
.pf-c-login__main::before {
|
|
border-radius: 25px 25px 25px 25px;
|
|
}
|
|
.pf-c-login__main-footer-band,
|
|
.pf-c-login__main-footer-band::before {
|
|
border-radius: 25px 25px 25px 25px;
|
|
}
|
|
.pf-c-login__footer .pf-c-list,
|
|
.pf-c-login__footer .pf-c-list::before {
|
|
border-radius: 25px 25px 25px 25px;
|
|
}
|
|
|
|
.pf-c-login__main::before,
|
|
.pf-c-login__main-footer-band::before,
|
|
.pf-c-login__footer .pf-c-list::before {
|
|
background-color: var(--ak-dark-background);
|
|
}
|
|
.pf-c-form__label-text {
|
|
border-radius: 20px 20px 20px 20px; /* added this */
|
|
opacity: 0.60; /* added this */
|
|
color: var(--ak-dark-foreground);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/*Email or username input, this also applies to other fields in Authentik */
|
|
|
|
|
|
|
|
.pf-c-form-control {
|
|
border-radius: 20px 20px 20px 20px !important; /* added this */
|
|
border: 2px solid #3a3a40 !important; /* added this */
|
|
}
|
|
|
|
.pf-c-input-group {
|
|
border-radius: 20px 20px 20px 20px !important; /* added this */
|
|
}
|
|
|
|
.pf-c-title {
|
|
color: var(--ak-dark-foreground);
|
|
}
|
|
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.pf-c-login__main::before,
|
|
.pf-c-login__footer .pf-c-list::before {
|
|
background-color: var(--ak-dark-background);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*** user interface ***/
|
|
.header input {
|
|
border-bottom-color: var(--pf-global--primary-color--100);
|
|
}
|
|
|
|
|
|
/* Text color, this applies globally */
|
|
|
|
|
|
a,
|
|
body,
|
|
h1,
|
|
h2,
|
|
.pf-c-expandable-section__toggle, /* More details tab under application */
|
|
.pf-c-page__header-tools, /* Username in top right of application menu */
|
|
.pf-c-button /* Cant remember */{
|
|
color: #b7b7b7 !important;
|
|
}
|
|
|
|
|
|
|
|
/* Force light mode users to have a different colored icons for the notifications, settings, logout, admin menu buttons etc */
|
|
|
|
: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;
|
|
}
|
|
|
|
|
|
/* Sets app cards to have rounded corners and transparency */
|
|
|
|
.pf-c-card.pf-m-compact,
|
|
.pf-c-expandable-section.pf-m-display-lg {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: 20px; /* Rounded corners */
|
|
background: rgba(18, 18, 18, 0.4); /* Maintain the glass-like effect */
|
|
backdrop-filter: blur(7px); /* Frosted glass effect */
|
|
border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle border for outline */
|
|
transition: box-shadow 0.3s ease-in-out; /* Smooth transition for the box-shadow */
|
|
|
|
/* Default shadow style */
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
|
|
|
|
/* Darker transparent gradient for a modern look */
|
|
background: linear-gradient(
|
|
135deg,
|
|
rgba(30, 30, 30, 0.3) 0%,
|
|
rgba(15, 15, 15, 0.3) 100%
|
|
);
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Apps glow on hover */
|
|
|
|
|
|
|
|
.pf-c-card.pf-m-compact:hover,
|
|
.pf-c-expandable-section.pf-m-display-lg:hover {
|
|
box-shadow: 0 0 15px 3px #d6d6d6; /* Animated glowing aura on hover */
|
|
}
|
|
|
|
|
|
.pf-c-card.pf-m-compact::before,
|
|
.pf-c-expandable-section.pf-m-display-lg::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: inherit;
|
|
mix-blend-mode: overlay;
|
|
pointer-events: none;
|
|
}
|
|
|
|
|
|
|
|
/* Sets rounded corners for all app icons */
|
|
|
|
.icon.pf-c-avatar {
|
|
border-radius: 15px; /* Adjust the value as needed */
|
|
}
|
|
|
|
|
|
|
|
|
|
/*** admin interface ***/
|
|
.pf-c-page__sidebar {
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
|
|
.pf-c-page,
|
|
.pf-c-tabs__item {
|
|
background-color: transparent !important;
|
|
}
|