diff --git a/changelog/unreleased/enhancement-branded-login-background.md b/changelog/unreleased/enhancement-branded-login-background.md new file mode 100644 index 00000000000..c55ae815bd8 --- /dev/null +++ b/changelog/unreleased/enhancement-branded-login-background.md @@ -0,0 +1,9 @@ +Enhancement: ownCloud branded login background + +The default login page background has been replaced with the ownCloud branding +background. The background image is now applied through the CSS custom +property `--oc-login-background-image`, so a future branding update only needs +to change one value. The image itself still comes from the theme +(`loginPage.backgroundImg` in theme.json) and remains fully customizable. + +https://github.com/owncloud/web/pull/13875 diff --git a/packages/design-system/src/styles/theme/login.scss b/packages/design-system/src/styles/theme/login.scss index 4b517cae83e..00719b10fd7 100644 --- a/packages/design-system/src/styles/theme/login.scss +++ b/packages/design-system/src/styles/theme/login.scss @@ -1,6 +1,12 @@ .oc-login { - @extend .oc-background-cover; - + // contain (not cover) so the logo baked into the branded background + // artwork is never cropped at viewport aspect ratios that differ from the + // image; the matching solid color fills any letterbox so it blends with + // the artwork's edges + @extend .oc-background-contain; + + background-color: #3c4d9b; + background-image: var(--oc-login-background-image); position: relative; &-logo { diff --git a/packages/web-runtime/src/layouts/Plain.vue b/packages/web-runtime/src/layouts/Plain.vue index a25df0319d0..2fa7a5cd7b8 100644 --- a/packages/web-runtime/src/layouts/Plain.vue +++ b/packages/web-runtime/src/layouts/Plain.vue @@ -1,7 +1,7 @@