fs
e814b5fd11
- Server renders initial file-upload state (src, alt, label text, has-current class) so there is no flash of broken-image icon while JS boots. JS no longer duplicates that work — it only reacts to user input (select, clear, drag-and-drop) and uses data-current-src solely to restore the server file after a blob preview. - Clicking the current preview image now opens the file dialog, mirrors the Replace button, with hover affordance (cursor + primary border). - Drop the transparency checker pattern in the preview — the admin UI does not need Figma-style transparency semantics. Preview is now a flat theme-aware surface (--app-preview-bg) that keeps white or black logos visible against a neutral gray. - Move tenant favicon out of the aside into the Master-data tab as its own details block next to the Tenant-logos section. Uses the same barrier-form pattern (HTML5 form attribute + app-file-upload.phtml) for a consistent instant-upload UX. - Tenant-logo slot label is a native <label> element — picks up the global form-label typography and spacing, no custom muted-color class needed. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
45 lines
1018 B
CSS
45 lines
1018 B
CSS
@layer components {
|
|
/* Topbar + login-hero logo. The server renders the theme-matching src
|
|
via appTenantLogoUrl($theme) / appAuthLogoUrl() — no CSS swap needed. */
|
|
.app-tenant-logo {
|
|
max-width: 160px;
|
|
height: 32px;
|
|
width: auto;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.login-logo .app-tenant-logo {
|
|
max-width: 320px;
|
|
height: auto;
|
|
max-height: 96px;
|
|
}
|
|
|
|
.app-topbar-brand .app-tenant-logo {
|
|
max-height: calc(var(--app-topbar-height) - 1rem);
|
|
}
|
|
|
|
/* Tenant-edit "Tenant logos" slots — two Pico .grid columns.
|
|
The slot's <label> uses the standard form-label rule (block,
|
|
margin-bottom, --app-color, text-sm) so it matches other inputs. */
|
|
.tenant-logo-slot {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
}
|
|
|
|
.tenant-logo-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.tenant-logo-actions button {
|
|
margin: 0;
|
|
}
|
|
|
|
.tenant-logo-readonly-preview {
|
|
max-width: 100%;
|
|
max-height: 120px;
|
|
object-fit: contain;
|
|
}
|
|
}
|