docs: match the login button to the theme's button classes

Use the same classes the login page puts on its own buttons so the SSO link
picks up the theme styling, and note that copying a real button's markup does
not work: a button cannot navigate without an href and DOMPurify removes
onclick. Warn against copying btnQuick, which is the Quick Connect binding
hook rather than styling.

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2026-07-29 16:01:32 +02:00
parent b5a0bd79a3
commit 45dc748a84

View File

@@ -95,9 +95,14 @@ only injection point, and it needs a little CSS to look like a real button.
Dashboard → General → Branding → **Login disclaimer**: Dashboard → General → Branding → **Login disclaimer**:
```html ```html
<a href="/OidcAuth/login" class="raised block emby-button">Sign in with SSO</a> <a href="/OidcAuth/login" class="raised cancel block emby-button"><span>Sign in with SSO</span></a>
``` ```
`cancel` gives the grey look of the Quick Connect button; swap it for
`button-submit` to match the blue Sign In button. Do not copy `btnQuick` off the
Quick Connect button — that class is what the login page binds Quick Connect to,
not styling.
Dashboard → General → Branding → **Custom CSS**: Dashboard → General → Branding → **Custom CSS**:
```css ```css
@@ -119,6 +124,10 @@ from the classes instead. `.disclaimerContainer` is not a block by default,
which is what otherwise leaves the link shrink-wrapped and centred instead of which is what otherwise leaves the link shrink-wrapped and centred instead of
matching the width of the buttons above it. matching the width of the buttons above it.
It has to be an anchor. Copying the markup of a real login button does not work:
`<button>` cannot navigate without an `href`, and DOMPurify removes `onclick`
along with `is`, so the result renders correctly and does nothing when clicked.
Styling via the theme's own classes rather than inline styles keeps the button Styling via the theme's own classes rather than inline styles keeps the button
correct when the theme changes, since `.raised` is defined per theme. correct when the theme changes, since `.raised` is defined per theme.