diff options
| author | Tomas Bzatek <tbzatek@users.sourceforge.net> | 2021-01-15 22:13:31 +0100 |
|---|---|---|
| committer | Tomas Bzatek <tbzatek@users.sourceforge.net> | 2021-01-15 22:13:31 +0100 |
| commit | 278b3551049df0883c4162ccfe4c150027893c37 (patch) | |
| tree | 3db8ab6420d7f5f969b7b88cf6716ac77bd03c2a /templates/fluid/styles.css | |
| parent | e95ef0305b117303eb742f31641c8c8cefbee9a0 (diff) | |
| download | cataract-278b3551049df0883c4162ccfe4c150027893c37.tar.xz | |
fluid: Rework index item thumbnails
Even the recent Firefox still doesn't support the background-image:image-set
CSS styles for HiDPI thumbnails. Rework this to a regular image placed inside
the <a> tag.
Diffstat (limited to 'templates/fluid/styles.css')
| -rw-r--r-- | templates/fluid/styles.css | 19 |
1 files changed, 15 insertions, 4 deletions
diff --git a/templates/fluid/styles.css b/templates/fluid/styles.css index d730844..2ad267d 100644 --- a/templates/fluid/styles.css +++ b/templates/fluid/styles.css @@ -610,8 +610,6 @@ div.index_item { margin: 20px; border-radius: 8px; border-width: 0px; - background-position: 50% 50%; - background-repeat: no-repeat; box-shadow: 0 0 0px 1px #6b6c69, 0 0 12px 2px rgba(255, 245, 200, 0.38); transition-property: box-shadow; @@ -631,12 +629,25 @@ div.index_item a { height: 330px; text-align: left; text-decoration: none; +} + +div.index_item a span.album_thumbnail { + position: relative; + display: inline-block; +} + +div.index_item a span.album_thumbnail:after { + content: ''; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: inline-block; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.0) 63%, rgba(0, 0, 0, 0.61) 85%, rgba(0, 0, 0, 0.65) 100%); background: -webkit-linear-gradient(to bottom, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.0) 63%, rgba(0, 0, 0, 0.61) 85%, rgba(0, 0, 0, 0.65) 100%); background: -moz-linear-gradient(to bottom, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.0) 63%, rgba(0, 0, 0, 0.61) 85%, rgba(0, 0, 0, 0.65) 100%); background: -o-linear-gradient(to bottom, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.0) 63%, rgba(0, 0, 0, 0.61) 85%, rgba(0, 0, 0, 0.65) 100%); - transition-property: background; - transition-duration: 0.3s; } div.index_item span.album_text { |