Add a drop shadow to the contextual notes on tablet/desktop

[gissoo]

This is the link to the appropriate design (look at the shadow of the contextual note container here, will be the same for desktop and tablet).

[thatbudakguy]

<@rlskoeser> we put it off because it was hard. You can't put a css drop shadow on an absolutely positioned div. I tried a few different things. What I remember as possibilities to try next: move the shape that's visible into an inner container that could have a drop shadow (this will require recalculating sizes and positions) or try using a background image for the shadow. I don't know if the background image would be visible / allowed to extend into padding (which I think you'd have to add, but not as hard as the other option, this is one of the things I tried when still trying to get drop shadow to work).
_{View in Slack}

[rlskoeser]

@gissoo noting because I had a tab open about using borders to simulate drop shadows. I couldn't get the example to work with our styles, but wondered if a border with an image would work to solve this?

Here's what the contextual notes look like with just a simple gray border on bottom and right edges:

I haven't used border images before so I don't know how we need to set them up, but might work here.

[thatbudakguy]

a border with an image

can you expand on this? is the screenshot you posted using an actual image laid underneath the contextual note, or just a css border (or some combination)? the example you posted looks pretty useful, especially if we use a transparent border. i think even just having it on the bottom would help somewhat.

[rlskoeser]

This image is just a straight up css border on bottom and right — I used gray, forget how many pixels (5ish?). I agree, I think this might be better than nothing - especially for the one contextual note in DBV that comes right before the interlude, where you end up with a purple note over a purple background.

I'm not sure how well transparent works, it might be transparent over the other color (i.e. purple).

IDK if border image would work here or not. Here's an example https://developer.mozilla.org/en-US/docs/Web/CSS/border-image

[thatbudakguy]

whoa, had no idea about border-image. i think if we can, a regular border is the way to go. I'll see if I can mock up something and test how transparency works out.

[rlskoeser]

@gissoo would a simple gray border (see screenshot above) be better than nothing?

(never mind! no last minute changes, too easy to introduce errors! 😬 )