From cefbe6a87fee244840e088955aa787a7ad3abb3e Mon Sep 17 00:00:00 2001 From: Matt Burke Date: Sat, 13 Oct 2018 14:30:34 -0400 Subject: Add placeholder image to card-based gallery entries page for #3651 I referenced https://css-tricks.com/using-svg/ for using the SVG icon. The icon has a black foreground and white background, which doesn't look very good as a placeholder. So, using the background-image style to show the svg and the inversion filter to make it white on gray. With the image always present, there isn't much difference between the with and without image preview templates, so I merged them. Tested on Chrome, Firefox, and Safari on OSX. --- app/Resources/static/themes/material/css/cards.scss | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'app/Resources/static/themes/material/css/cards.scss') diff --git a/app/Resources/static/themes/material/css/cards.scss b/app/Resources/static/themes/material/css/cards.scss index 8f7f8f7b..9dcbb8bb 100644 --- a/app/Resources/static/themes/material/css/cards.scss +++ b/app/Resources/static/themes/material/css/cards.scss @@ -123,6 +123,12 @@ main { display: block; } + .card-image .placeholder { + background-color: #111; + filter: invert(100%); + -webkit-filter: invert(100%); + } + &.sw { max-width: 370px; margin-left: auto; -- cgit v1.2.3