Summary
Custom CSS set in the admin panel cannot override the login page
background, text colour, button colour, or input colour. This affects
all auth plugins that use the Page() function in
server/common/response.go.
Root cause
The login page HTML is structured like this:
<head>
<style>
html { background: #f2f3f5; }
button { background: #466372; }
</style>
</head>
<body>
<style>
/* custom CSS injected here */
</style>
</body>Custom CSS lands in <body> while Filestash's base styles are in
<head>. When specificity is equal the browser applies whichever
comes last, so the <head> styles always win. Properties like
html { background } cannot be overridden no matter what you write
in custom CSS.
Affected
Any page rendered through Page(): all auth plugin login pages
(passthrough, htpasswd, local, admin, wordpress) and error pages.
The SPA (files/, viewer, admin panel) is unaffected.
Steps to reproduce
- Go to Admin, Settings, Custom CSS
- Add
html { background: red !important; }
- Navigate to
/api/session/auth/?action=redirect
- Background remains
#f2f3f5
Proposed fix
Two changes to server/common/response.go:
1. Convert hardcoded values to CSS variables:
:root {
--page-bg: #f2f3f5;
--page-color: #313538;
--page-input-bg: white;
--page-button-bg: #466372;
--page-button-color: white;
--page-error-color: #f26d6d;
}Defaults match current values exactly so existing deployments are
unaffected.
2. Move custom CSS injection from <body> to <head>, right
after the base styles so it correctly wins the cascade.
Also removes the .flash colour duplicated across three auth plugins
since it is now handled centrally via --page-error-color.
Result
Admins can theme the login page via custom CSS:
:root {
--page-bg: #141417;
--page-color: #e2e2ea;
--page-input-bg: #1d1d22;
--page-button-bg: #38bdf8;
--page-button-color: #0a0c10;
}I have a working patch ready if you'd like me to open a PR.
Summary
Custom CSS set in the admin panel cannot override the login page
background, text colour, button colour, or input colour. This affects
all auth plugins that use the
Page()function inserver/common/response.go.Root cause
The login page HTML is structured like this:
Custom CSS lands in
<body>while Filestash's base styles are in<head>. When specificity is equal the browser applies whichevercomes last, so the
<head>styles always win. Properties likehtml { background }cannot be overridden no matter what you writein custom CSS.
Affected
Any page rendered through
Page(): all auth plugin login pages(passthrough, htpasswd, local, admin, wordpress) and error pages.
The SPA (files/, viewer, admin panel) is unaffected.
Steps to reproduce
html { background: red !important; }/api/session/auth/?action=redirect#f2f3f5Proposed fix
Two changes to
server/common/response.go:1. Convert hardcoded values to CSS variables:
Defaults match current values exactly so existing deployments are
unaffected.
2. Move custom CSS injection from
<body>to<head>, rightafter the base styles so it correctly wins the cascade.
Also removes the
.flashcolour duplicated across three auth pluginssince it is now handled centrally via
--page-error-color.Result
Admins can theme the login page via custom CSS:
I have a working patch ready if you'd like me to open a PR.