Core: Login background image blurry on 27' screen

[LukasReschke]

Click on the image to see how it looks on my 27' screen :wink:

Resolution is 2560x1440.

cc @karlitschek @jancborchardt @owncloud/designers

[LukasReschke]

Besides that, this rocks. Now we just need to figure out what to do with large screens. :wink:

[LukasReschke]

Also the checkbox can be kinda hidden depending on the screen resolution. Is there some CSS magic possibility to have it black if the background is white and white if it is darkish?

[skjnldsv]

You mean on the checkbox location, or calculating the whole image brightness?

[vincchan]

What about a blurred background? Seems to improve the visibility of the checkbox and doesn't make the low resolution of the image that apparent.

[jancborchardt]

@vincchan yeah! I also thought about a blurred background initially, with 20px radius gaussian blur.

cc @ChristophWurst who had another enhancement to the background which improved the yellow tint.

Also as a sidenote @owncloud/designers we should try to center that log in box vertically on large displays like that. @Henni @skjnldsv let me guess – you have some flexbox-fu to do that? ;)

[ChristophWurst]

@jancborchardt as discussed, I created a b/w version of the image and added a blue tone to it afterwards:

[skjnldsv]

@jancborchardt or position absolute? 😆

Just kidding, we should indeed use flex!

[jancborchardt]

@skjnldsv haha, just make fun of that – we did need to support IE8 until not too long ago. ;D

[skjnldsv]

What about ie6?? :'(

[jancborchardt]

The only thing I’ll say about that is that this was my Halloween costume a few years ago:

[skjnldsv]

AHahhahah! FA-BU-LOUS! 👍 👍 👍

[DeepDiver1975]

We need to address the spinner issue as well ...

[jancborchardt]

Yeah, for the loading spinner we have: Switch to simpler looking loading spinner #19091

[MorrisJobke]

I would go for the blur.

[Henni]

Simple experiment with flexbox:


I don't know how to fix the low contrast problem (especially in the footer), yet. Grey boxes are a bit harsh.

[skjnldsv]

Nice work!
Maybe adding a blur behind the text?

[Henni]

@skjnldsv probably won't solve the problem if the text is wide enough to cover the white clouds.

[skjnldsv]

Dynamically clip trough the image and change the text color?
http://salsita.github.io/jq-clipthru/demo/

Edit: or like this site: http://2015.xoxofest.com/

[jancborchardt]

About the text: We just need to do it like we do in Gallery, add a dark text-shadow around the text:

text-shadow: 1px 1px 4px #333, 1px -1px 4px #333, -1px 1px 4px #333, -1px -1px 4px #333;

(see https://github.com/owncloud/gallery/blob/master/css/slideshow.css#L146)

[Henni]

@skjnldsv there is also a css property for this (except for IE & Edge) https://css-tricks.com/reverse-text-color-mix-blend-mode/ but I don't like the result.

@jancborchardt that approach looks like this:

The result is ok, but the checkbox is still hardly visible.

[skjnldsv]

It's not that great! :/
Yep, there's the mix-blend-mode, but there are many possibility in it, revert the color, just darken it?
Worth a try I think :)

[PVince81]

@felixheidecke

[PVince81]

Backlog for now, unless @felixheidecke or someone else finds a new cloudy and sharper login image

[PVince81]

Login image has changed. Please reopen if new one is also blurry.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.