Fix box shadow of header elements

[MorrisJobke]

• unify shadow blur from 3px to 10px
• remove opacity of background of app labels
• for IE: use box-shadow as fallback (because the filter: drop-shadow is not supported)

Found while reviewing nextcloud/notifications#89

cc @nextcloud/designers

Before (opacity, bigger blur, no shadow on notifications in Safari):

After:

[codecov]

Codecov Report

Merging #7572 into master will increase coverage by <.01%.
The diff coverage is n/a.

@@ Coverage Diff @@## master #7572 +/- ##
============================================
+ Coverage 51.16% 51.16% +<.01% 
Complexity 24883 24883 ============================================
Files 1602 1602 Lines 94730 94730 Branches 1368 1368 ============================================
+ Hits 48470 48471 +1 + Misses 46260 46259 -1

Impacted Files	Coverage Δ	Complexity Δ
lib/private/Files/Cache/Propagator.php	96.2% <0%> (+1.26%)	16% <0%> (ø)	⬇️

[jancborchardt]

Good stuff, but why reduce it from 10px which we used basically everywhere to 3px? It looks a bit strange and more like a thick border than a slight shadow.

[MorrisJobke]

Good stuff, but why reduce it from 10px which we used basically everywhere to 3px? It looks a bit strange and more like a thick border than a slight shadow.

Because we use that in our newer filters ;) See the line I just changed, I thought that we move to that. Otherwise we need to touch a lot more occurrences.

[skjnldsv]

I disagree! The filter: drop-shadow is far better than the box-shadow as the arrow isn't included in the shadow generation. I'm against the removal of this.

What's up with safari anyway? it should supports filter? https://caniuse.com/#feat=css-filters 😕

[MorrisJobke]

Usually it does this, but somehow not for the notifications drop down. I will check tomorrow and adapt this pr then

[MorrisJobke]

Okay - I moved to the 10px and to the filter: drop-shadow. I also added fixes for IE 11, because this supports only box-shadow. I tested it and it works now 👍