¶ Setup
¶ Docker
- Go to your docker compose
- Create a folder and a file called
theme/custom.css - add a volume to the server
- ./themes/custom.css:/web/dist/custom.css - add some custom css ( optional )
- Restart the server container
¶ dont see the style?
- Go to the browser developers tools > Netwroking and disable cache
¶ didnt work?
-
if you own the domain and use cloudflare
go to your domain > Cache > Configuration > Custom purge and addhttps://yourdomain.com/static/dist/custom.cssand purge -
if you use anything else than cloudflare try to find the caching settings to purge the file
-
if you dont own the domain, try contacting the domain holder to clear the cache for the css
¶ Login css ( skeuomorphic )
/* some other css */
/* Skeuomorph style */
.pf-c-login__main {
overflow: auto;
position: relative;
border-radius: 12px;
background-color: rgba(28, 30, 33, 0.8);
border: 1px solid rgba(100,100,100, 0.5);
border-left: 1px solid rgba(30,30,30, 0.5);
border-right: 1px solid rgba(30,30,30, 0.5);
border-bottom-color: rgba(200,200,200, 0.5);
backdrop-filter: blur(10px);
box-shadow:
0px 24px 38px 3px rgba(0, 0, 0, 0.75),
inset 0px 24px 48px 0 rgba(0, 0, 0, 0.5),
inset 0 1px 0px 0 rgba(0, 0, 0, 0.5),
0 1px 0px 0 rgba(0, 0, 0, 0.8),
inset 0 -1px 0 0 rgba(255,255,255,0.1),
0px -1px 0px 0 rgba(255,255,255,0.5);
}
.pf-c-login__main::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 400px;
background: radial-gradient(
circle at 50% 0%,
rgba(32, 63, 109, 1) 5%,
rgba(28, 30, 33, 0) 50%
);
pointer-events: none;
z-index: -1;
max-height: 100%;
}
/* optinal image at the bottom */
/* .pf-c-login__main::after {
content: "";
display: block;
position: relative;
margin-top: -60px;
width: 100%;
height: 150px;
background-image: url("");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
} */
.pf-c-login__main-body * input {
--leftright-shadow: inset 1px 0 0 0 rgba(0,0,0,0.5), inset -1px 0 0 0 rgba(0,0,0,0.5);
/* background-color: rgba(100,100,100, 0.5); */
background: linear-gradient(to bottom,
rgba(60,60,60, 0.5),
rgba(100,100,100, 0.5)
);
border: none;
/* border-width: 1px !important;
border-top-color: rgba(0,0,0, 0.5);
border-bottom-color: rgba(200,200,200, 0.5); */
border-radius: 5px;
color: white;
box-shadow:
0 -1px 0 0 rgba(255,255,255,0.5),
0 1px 0 0 rgba(0,0,0,0.5),
inset 0 -1px 0 0 rgba(255,255,255,0.3),
inset 0 1px 0 0 rgba(0,0,0,0.3),
var(--leftright-shadow),
0 0 1px 1px rgba(0, 0, 0, 0.3);
;
outline: 0px solid transparent;
outline-offset: -1px;
transition: box-shadow 0.1s linear, outline 0.1s linear;
padding: 8px !important;
}
.pf-c-login__main-body * input:hover {
box-shadow:
0 -1px 0 0 rgba(255,255,255,0.1),
0 1px 0 0 rgba(0,0,0,0.5),
inset 0 -1px 0 0 rgba(255,255,255,0.3),
inset 0 1px 0 0 rgba(0,0,0,0.3),
var(--leftright-shadow),
0 0 8px 2px rgba(0,0,0,0.3);
}
.pf-c-login__main-body * input:focus {
outline: 2px solid rgba(255,255,255,0.5);
box-shadow:
0 -1px 0 0 rgba(255,255,255,0.1),
0 1px 0 0 rgba(0,0,0,0.5),
inset 0 -1px 0 0 rgba(255,255,255,0.3),
inset 0 1px 0 0 rgba(0,0,0,0.3),
var(--leftright-shadow),
0 0 4px 4px rgba(200,200,200,0.5);
}
.pf-c-login__footer {
padding: 0px;
}
.pf-c-login__footer ul.pf-c-list.pf-m-inline {
padding: 0px;
border-radius: 12px;
background-color: rgba(28, 30, 33, 0.8);
border: 1px solid rgba(100,100,100, 0.5);
border-left: 1px solid rgba(30,30,30, 0.5);
border-right: 1px solid rgba(30,30,30, 0.5);
border-bottom-color: rgba(200,200,200, 0.5);
backdrop-filter: blur(10px);
box-shadow:
inset 0px 24px 48px 0 rgba(0, 0, 0, 0.5),
inset 0 1px 0px 0 rgba(0, 0, 0, 0.5),
0 1px 0px 0 rgba(0, 0, 0, 0.8),
inset 0 -1px 0 0 rgba(255,255,255,0.1),
0px -1px 0px 0 rgba(255,255,255,0.5);
}
/* some other css */
¶ Preview
outdated screenshots
