Server: blurry buttons

[schiessle]

Don't know it is just me, but the buttons look really blurry on my system (both on the internal monitor of the laptop and on the external), some examples:

• Password enforce dialog on public links:
  

• Admin security setting "enforce two factor"
  

Basically all rounded blue buttons are quite blurry on the edges, the gray buttons look good:

[schiessle]

cc @nextcloud/designers

[nextcloud-bot]

GitMate.io thinks possibly related issues are https://github.com/nextcloud/server/issues/3752 (Backupcodes button sizes), https://github.com/nextcloud/server/issues/11824 ("Add Group" button has disappeared), https://github.com/nextcloud/server/issues/2104 (More contextually relevant button labels), https://github.com/nextcloud/server/issues/4352 (Password reset button broken), and https://github.com/nextcloud/server/issues/10346 (Logout button on shared email-links).

[skjnldsv]

You mean the antialiasing?

[MariusBluem]

Yes.

[skjnldsv]

Unfortunately we cannot really do much about this.
The only thing would be to make sure the background goes under the border with background-clip: border-box;

The difference is tiny but noticeable (same background, only change is the background-clip property.

| Before | After |
|:---------:|:------:|
|||

[MariusBluem]

@schiessle and me just tested this with Firefox and even IE11 in a Windows-VM. Same design issue/behaviour. Maybe we should go back to the old buttons - better stable, known and looking good than new, fancy and full of issues 🤔

[skjnldsv]

Maybe we should go back to the old buttons - better stable, known and looking good than new, fancy and full of issues

No preferences here :)
@jancborchardt ?

[MorrisJobke]

@schiessle and me just tested this with Firefox and even IE11 in a Windows-VM. Same design issue/behaviour. Maybe we should go back to the old buttons - better stable, known and looking good than new, fancy and full of issues 🤔

👍 I would say that this is a blocker for the beta 1 - we should not change this after beta 1.

[juliushaertl]

How about removing the white border from the primary buttons? This seems to at least improve the antialiasing a bit.

Before (Firefox):

After (Firefox):

[MariusBluem]

How about removing the white border from the primary buttons? This seems to at least improve the antialiasing a bit.

Awesome! I think this would fix this in a nice way ... What do you think @schiessle 🤔

[jancborchardt]

I think removing the white border as @juliushaertl said is the best call.

We only need these white borders in 2 cases right now: On the log in screen, and when a button is in the header. In other words, when the background is not the default (white).

For that we could add an additional class like .button-border?

[skjnldsv]

For that we could add an additional class like .button-border?

I'll rather not. We need to keep our design simple, instead of adding too many classes ;)

[jancborchardt]

Ok, then smth like this (quick note, did not test!):

/* Apply border to primary button if on log in page (and not in a dark container) or if in header */
#body-login :not(body-login-container) .button-primary,
#header .button-primary  {
  border: 1px solid #fff;
}

[jancborchardt]

And we remove the border from buttons completely otherwise, also from non-primary ones.

What do you think?

[skjnldsv]

Though if the primary color is too luminous, we'll need the border again :(

[jancborchardt]

Or a very slight, very light box-shadow?

[skjnldsv]

We could trick the border with an inset shadow yes. Could work :)
But I doubt shadow on the buttons would look good.

[skjnldsv]

Any new here?
last call to make a decision is this week!

[MorrisJobke]

@jancborchardt What to do here?

[jancborchardt]

I will work on a pull request to remove the border like mentioned at https://github.com/nextcloud/server/issues/12294#issuecomment-436585033

[MorrisJobke]

I will work on a pull request to remove the border like mentioned at #12294 (comment)

But then the download button in the header of the public page does not look like a button anymore (it's blue on blue background). 🤔

[jancborchardt]

But then the download button in the header of the public page does not look like a button anymore (it's blue on blue background).

It does, as the rule I wrote specifically only sets the border to white for primary buttons on the log in screen or in the header.

Pull request at https://github.com/nextcloud/server/pull/12558, please review (and help with the theming question …)