490e9adbd8
- Introduced custom branding CSS styles in `custom-branding.css`. - Created example JSON configuration for custom branding in `custom-branding.example.json`. - Implemented branding configuration logic in `BrandingConfig.ts` to normalize and validate branding settings. - Developed CSS loader to manage loading and unloading of custom stylesheets in `BrandingCssLoader.ts`. - Added DOM rendering capabilities for branding elements in `BrandingDomRenderer.ts`. - Defined types and interfaces for branding elements and configurations in `BrandingTypes.ts`. - Included localization support for German in `de-de.js`. - Added unit tests for branding configuration, CSS loader, and DOM renderer. - Validated project structure and static assets with new validation scripts.
45 lines
883 B
CSS
45 lines
883 B
CSS
.custom-branding-banner {
|
|
align-items: center;
|
|
background: #f3f2f1;
|
|
border-bottom: 1px solid #edebe9;
|
|
box-sizing: border-box;
|
|
color: #323130;
|
|
display: flex;
|
|
font-family: "Segoe UI", "Segoe UI Web (West European)", sans-serif;
|
|
font-size: 14px;
|
|
gap: 16px;
|
|
min-height: 40px;
|
|
padding: 8px 24px;
|
|
}
|
|
|
|
.custom-branding-link {
|
|
color: #005a9e;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.custom-branding-link:hover {
|
|
color: #004578;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.custom-branding-link:focus-visible,
|
|
.custom-branding-banner button:focus-visible {
|
|
outline: 2px solid #005a9e;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
@media screen and (max-width: 640px) {
|
|
.custom-branding-banner {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
padding: 8px 12px;
|
|
}
|
|
}
|
|
|
|
@media (forced-colors: active) {
|
|
.custom-branding-banner {
|
|
border-bottom: 1px solid CanvasText;
|
|
}
|
|
}
|