Clean all superposed white backgrounds #1657

skjnldsv · 2016-10-07T14:16:36Z

In nextcloud there's too much elements with a white background. If the parent element already have a white bg, we should reapply one. This causes a lot of difficulties for themers to create their own.
We should also use transparents borders so we can easily change background without breaking the contrast between bg and borders.

The though came from my work on a dark theme. Changing the body bgcolor isn't enough.

mention-bot · 2016-10-07T14:16:40Z

@skjnldsv, thanks for your PR! By analyzing the history of the files in this pull request, we identified @jancborchardt, @MorrisJobke and @DeepDiver1975 to be potential reviewers.

irgendwie · 2016-10-07T16:39:58Z

apps/files/css/files.css

@@ -215,7 +213,7 @@ table th:focus .sort-indicator.hidden {

 table th,
 table td {
-	border-bottom: 1px solid #eee;
+	border-bottom: 1px solid 1px solid rgba(0,0,0,0.08);


irgendwie · 2016-10-07T16:40:16Z

core/css/apps.css

@@ -439,8 +438,7 @@
 	width: 27%;
 	min-width: 300px;
 	display: block;
-	background: #fff;
-	border-left: 1px solid #eee;
+	border-left: 1px solid 1px solid rgba(0,0,0,0.08)


sigh... Copy/paste wasn't really effective here...

@skjnldsv Nice, very good call on using transparency vs greyspale! Also the code style is rgba(0, 0, 0, .08) (space after comma and no 0 before dot ;)

jancborchardt · 2016-10-08T08:38:15Z

apps/files/css/files.css

@@ -144,7 +142,7 @@
 #filestable tbody tr.searchresult,
 table tr.mouseOver td {
 	transition: background-color 0.3s ease;
-	background-color: #f8f8f8;
+	background-color: rgba(0,0,0,0.08);


Compare this with line 216 where you use the ame .08 color for #eee, instead of #f8f8f8 like here. ;) They should be different, no?

It should! To be honest, i'm not calculating the hex to rgba! :p
It's a visual estimation ^^

I will calculate the new value. I like it more precise! :)

Done @jancborchardt .
Values are now calculated base on a rgba transparency on white background.

skjnldsv · 2016-10-08T13:04:03Z

core/css/inputs.css

 	outline: 0;
 	padding-right: 24px !important;
 }

 select:hover {
-	background-color: #fefefe;


@jancborchardt I'm not really sure this is humanly visible 😆

Probably not really. Do you want to adjust this to the equivalent of #fff instead? Or rather it really needs to be solid #fff because by default the select is grey and it could be on top of dark background.

We shouldn't think of dark backgrounds superposition. Because the rgba I'm changing are planned on a #fff bg. If we want a dark background with the same contrast, we should reverse the values. :)

For this line, I think we could just remove it. Or choose a completely different value to set for all inputs:hover.

skjnldsv · 2016-10-08T13:07:25Z

core/css/inputs.css

@@ -272,8 +272,8 @@ button:hover, button:focus,
 .button:hover, .button:focus,
 .button a:focus,
 select:hover, select:focus, select:active {
-	background-color: rgba(255, 255, 255, .95);


@jancborchardt same here. This is not visible to the eye. I changed to something more visible. What do you think?

The point about this was that the background color shines a bit through. For example when we have it in the header of the link share page there are buttons on the top right.

Okay, makes sense! :)

codecov-io · 2016-10-08T13:49:11Z

Current coverage is 56.23% (diff: 100%)

Merging #1657 into master will not change coverage

@@             master      #1657   diff @@
==========================================
  Files          1070       1070          
  Lines         60505      60505          
  Methods        6829       6829          
  Messages          0          0          
  Branches          0          0          
==========================================
  Hits          34027      34027          
  Misses        26478      26478          
  Partials          0          0

Powered by Codecov. Last update 0beecbf...d056698

skjnldsv · 2016-10-08T17:07:46Z

apps/files/css/files.css

 }
-tbody a { color:#000; }


We don't need to redefine the a colors since it's already set on core/styles.css

See nextcloud/server#1657

see nextcloud/server#1657

nickvergessen · 2016-10-10T07:42:55Z

@skjnldsv you need to "sign off" all your commits:
https://github.com/nextcloud/server/blob/master/CONTRIBUTING.md#sign-your-work

Can you fix all your commit messages please?

skjnldsv · 2016-10-10T12:39:02Z

I know, I forgot, I will when I will squash those commits :)
Thanks

See nextcloud/server#1657

georgehrke · 2016-10-12T13:47:16Z

This also removes the background on the login for me 🙈

skjnldsv · 2016-10-12T13:57:46Z

@georgehrke Yep, the login form don't have a background. We should apply one to it for this case only. :)

jancborchardt · 2016-10-18T08:33:29Z

@skjnldsv can you fix what @georgehrke mentioned and the other things? Then squash or so, and we can review it. :)

skjnldsv · 2016-10-18T08:40:28Z

@jancborchardt Not now. I'm lost for now. This pr extends to more than just white backgrounds I think.
Could you read your irc private message? :)
I sent you something.

jancborchardt · 2016-10-18T11:54:05Z

@skjnldsv I’m not on IRC atm ;) either Github or email.

skjnldsv · 2016-10-18T11:55:14Z

Just sent you one 🚀

MorrisJobke · 2016-11-30T14:42:53Z

@skjnldsv What is the status of this?

skjnldsv · 2016-11-30T14:45:06Z

@MorrisJobke on hold while I wait for the scss pr. Too much sh*** to clean.
Let's close and see after!

See nextcloud/server#1657 Signed-off-by: John Molakvoæ (skjnldsv) <[email protected]>

see nextcloud/server#1657 Signed-off-by: John Molakvoæ (skjnldsv) <[email protected]>

skjnldsv added design Design, UI, UX, etc. 2. developing Work in progress feature: theming labels Oct 7, 2016

skjnldsv self-assigned this Oct 7, 2016

irgendwie reviewed Oct 7, 2016

View reviewed changes

First cleanup

5109648

skjnldsv force-pushed the white-bg-cleanup branch from 502a0d0 to 5109648 Compare October 8, 2016 03:50

jancborchardt requested changes Oct 8, 2016

View reviewed changes

skjnldsv force-pushed the white-bg-cleanup branch from 9f8746b to 372b2b1 Compare October 8, 2016 12:23

Changed to exact values and various fixes

8e68407

skjnldsv force-pushed the white-bg-cleanup branch from 372b2b1 to 8e68407 Compare October 8, 2016 12:24

Inputs

b1e3fc0

skjnldsv force-pushed the white-bg-cleanup branch from 3cda90b to b1e3fc0 Compare October 8, 2016 12:43

skjnldsv added 2 commits October 8, 2016 14:51

Inputs 2

c334c65

Rgba structure fix

3215fad

skjnldsv force-pushed the white-bg-cleanup branch from 1c6ac20 to 3215fad Compare October 8, 2016 13:01

skjnldsv commented Oct 8, 2016

View reviewed changes

Font color fix & inherit

d056698

skjnldsv commented Oct 8, 2016

View reviewed changes

skjnldsv added a commit to nextcloud/mail that referenced this pull request Oct 9, 2016

Clean all superposed white backgrounds

acb2daf

See nextcloud/server#1657

skjnldsv mentioned this pull request Oct 9, 2016

Clean all superposed white backgrounds nextcloud/mail#142

Closed

skjnldsv added a commit to nextcloud/activity that referenced this pull request Oct 9, 2016

Clean all superposed white backgrounds

1f59cc0

See nextcloud/server#1657

skjnldsv mentioned this pull request Oct 9, 2016

Clean all superposed white backgrounds nextcloud/activity#51

Merged

skjnldsv added a commit to nextcloud/gallery that referenced this pull request Oct 9, 2016

Clean all superposed white backgrounds

39cd9b5

see nextcloud/server#1657

skjnldsv mentioned this pull request Oct 9, 2016

Clean all superposed white backgrounds nextcloud/gallery#164

Merged

nickvergessen added this to the Nextcloud 11.0 milestone Oct 10, 2016

skjnldsv added a commit to nextcloud/calendar that referenced this pull request Oct 10, 2016

Clean all superposed white backgrounds

2968b84

See nextcloud/server#1657

This was referenced Oct 10, 2016

Clean all superposed white backgrounds nextcloud/calendar#120

Closed

Dark mode accessibility #1692

Closed

Grey rgba first fix

ee64394

georgehrke pushed a commit to nextcloud/calendar that referenced this pull request Oct 11, 2016

Clean all superposed white backgrounds

45c7e9e

See nextcloud/server#1657

MorrisJobke modified the milestones: Nextcloud 12.0, Nextcloud 11.0 Nov 30, 2016

skjnldsv closed this Nov 30, 2016

skjnldsv added a commit to nextcloud/activity that referenced this pull request Nov 30, 2016

Clean all superposed white backgrounds

42dadb4

See nextcloud/server#1657 Signed-off-by: John Molakvoæ (skjnldsv) <[email protected]>

skjnldsv added a commit to nextcloud/gallery that referenced this pull request Nov 30, 2016

Clean all superposed white backgrounds

f9084a5

see nextcloud/server#1657 Signed-off-by: John Molakvoæ (skjnldsv) <[email protected]>

skjnldsv deleted the white-bg-cleanup branch November 30, 2016 14:51

MorrisJobke removed this from the Nextcloud 12.0 milestone Nov 30, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Clean all superposed white backgrounds #1657

Clean all superposed white backgrounds #1657

skjnldsv commented Oct 7, 2016 •

edited

Loading

mention-bot commented Oct 7, 2016

irgendwie Oct 7, 2016 •

edited

Loading

irgendwie Oct 7, 2016

skjnldsv Oct 7, 2016

jancborchardt Oct 8, 2016

jancborchardt Oct 8, 2016

skjnldsv Oct 8, 2016

skjnldsv Oct 8, 2016

skjnldsv Oct 8, 2016

skjnldsv Oct 8, 2016

jancborchardt Oct 8, 2016

skjnldsv Oct 8, 2016

skjnldsv Oct 8, 2016

jancborchardt Oct 8, 2016 •

edited

Loading

skjnldsv Oct 8, 2016

codecov-io commented Oct 8, 2016 •

edited

Loading

skjnldsv Oct 8, 2016

nickvergessen commented Oct 10, 2016

skjnldsv commented Oct 10, 2016

georgehrke commented Oct 12, 2016

skjnldsv commented Oct 12, 2016

jancborchardt commented Oct 18, 2016

skjnldsv commented Oct 18, 2016

jancborchardt commented Oct 18, 2016

skjnldsv commented Oct 18, 2016

MorrisJobke commented Nov 30, 2016

skjnldsv commented Nov 30, 2016

Clean all superposed white backgrounds #1657

Clean all superposed white backgrounds #1657

Conversation

skjnldsv commented Oct 7, 2016 • edited Loading

mention-bot commented Oct 7, 2016

irgendwie Oct 7, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jancborchardt Oct 8, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codecov-io commented Oct 8, 2016 • edited Loading

Current coverage is 56.23% (diff: 100%)

Choose a reason for hiding this comment

nickvergessen commented Oct 10, 2016

skjnldsv commented Oct 10, 2016

georgehrke commented Oct 12, 2016

skjnldsv commented Oct 12, 2016

jancborchardt commented Oct 18, 2016

skjnldsv commented Oct 18, 2016

jancborchardt commented Oct 18, 2016

skjnldsv commented Oct 18, 2016

MorrisJobke commented Nov 30, 2016

skjnldsv commented Nov 30, 2016

skjnldsv commented Oct 7, 2016 •

edited

Loading

irgendwie Oct 7, 2016 •

edited

Loading

jancborchardt Oct 8, 2016 •

edited

Loading

codecov-io commented Oct 8, 2016 •

edited

Loading