Create custom.css
This commit is contained in:
twoleftankles
GitHub
parent
c28046d29d
commit
4de3e77002
1 changed files with 305 additions and 0 deletions
305
custom.css
Normal file
305
custom.css
Normal file
|
|
@ -0,0 +1,305 @@
|
|||
/* Yip Yip Bitches */
|
||||
|
||||
: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;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.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: 100%; /* If you change this it will be ugly */
|
||||
}
|
||||
|
||||
|
||||
.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 */
|
||||
}
|
||||
|
||||
.pf-c-button.pf-m-block {
|
||||
margin-top: 6px !important;
|
||||
margin-bottom: 6px !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Login button */
|
||||
|
||||
.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 */
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.pf-c-list.pf-m-inline {
|
||||
--pf-c-list--PaddingLeft: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
list-style: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.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;
|
||||
opacity: 0.60;
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*Email or username input, this also applies to other fields in Authentik */
|
||||
|
||||
.pf-c-form-control,
|
||||
.pf-c-input-group {
|
||||
opacity: 0.785;
|
||||
border-radius: 20px 20px 20px 20px;
|
||||
border: 2px solid #3a3a40;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
|
||||
.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 in app card */
|
||||
.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;
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue