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:
11
README.md
11
README.md
@@ -95,9 +95,14 @@ only injection point, and it needs a little CSS to look like a real button.
|
||||
Dashboard → General → Branding → **Login disclaimer**:
|
||||
|
||||
```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**:
|
||||
|
||||
```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
|
||||
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
|
||||
correct when the theme changes, since `.raised` is defined per theme.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user