Add E-Cosplay logo to login, account, and email themes
- Bundle logo.jpg in the repo root as the source asset and copy it
into themes/ecosplay/login/resources/img and
themes/ecosplay/account/resources/img so Keycloak serves it under
${url.resourcesPath}/img/logo.jpg.
- Login: render the logo above the auth card in a brutalist white
frame (black border, offset hard shadow), 160x160.
- Account console: inject a 64x64 brand mark in the masthead via
a ::before pseudo-element on .pf-v5-c-masthead__brand using the
theme's resources/img/logo.jpg as background.
- Email: inline the logo as a base64 data URI (resized to 400x400
JPEG @ q82 ~14KB) directly in html/template.ftl, so external image
blocking in mail clients does not hide it. Rendered as a 160x160
framed brand mark above the message body.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -34,6 +34,7 @@ body,
|
|||||||
.pf-v5-c-masthead {
|
.pf-v5-c-masthead {
|
||||||
background-color: #111827 !important;
|
background-color: #111827 !important;
|
||||||
border-bottom: 4px solid #4f46e5 !important;
|
border-bottom: 4px solid #4f46e5 !important;
|
||||||
|
min-height: 88px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pf-v5-c-masthead__brand,
|
.pf-v5-c-masthead__brand,
|
||||||
@@ -45,6 +46,19 @@ body,
|
|||||||
font-style: italic !important;
|
font-style: italic !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Inject brand logo into the masthead via background-image */
|
||||||
|
.pf-v5-c-masthead__brand::before {
|
||||||
|
content: "";
|
||||||
|
display: inline-block;
|
||||||
|
width: 64px;
|
||||||
|
height: 64px;
|
||||||
|
margin-right: 16px;
|
||||||
|
background: #ffffff url("../img/logo.jpg") center/contain no-repeat;
|
||||||
|
border: 3px solid #4f46e5;
|
||||||
|
box-shadow: 4px 4px 0 rgba(0, 0, 0, 1);
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
/* Cards */
|
/* Cards */
|
||||||
.pf-v5-c-card {
|
.pf-v5-c-card {
|
||||||
background-color: #ffffff !important;
|
background-color: #ffffff !important;
|
||||||
|
|||||||
BIN
themes/ecosplay/account/resources/img/logo.jpg
Normal file
BIN
themes/ecosplay/account/resources/img/logo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
File diff suppressed because one or more lines are too long
BIN
themes/ecosplay/login/resources/img/logo.jpg
Normal file
BIN
themes/ecosplay/login/resources/img/logo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
@@ -48,6 +48,13 @@
|
|||||||
<main class="flex-grow flex items-center justify-center px-4 py-16 relative z-10">
|
<main class="flex-grow flex items-center justify-center px-4 py-16 relative z-10">
|
||||||
<div class="w-full max-w-xl">
|
<div class="w-full max-w-xl">
|
||||||
|
|
||||||
|
<!-- Logo above the card -->
|
||||||
|
<div class="flex justify-center mb-6">
|
||||||
|
<div class="bg-white border-4 border-gray-900 shadow-[8px_8px_0px_rgba(0,0,0,1)] p-3">
|
||||||
|
<img src="${url.resourcesPath}/img/logo.jpg" alt="E-Cosplay" class="block w-40 h-40 object-contain" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Card -->
|
<!-- Card -->
|
||||||
<div class="bg-white border-4 border-gray-900 shadow-[12px_12px_0px_rgba(0,0,0,1)] p-8 md:p-12">
|
<div class="bg-white border-4 border-gray-900 shadow-[12px_12px_0px_rgba(0,0,0,1)] p-8 md:p-12">
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user