From 1851cb120518e59e1a948ba13a49fff481483a4b Mon Sep 17 00:00:00 2001 From: Tomas Bzatek Date: Thu, 14 Jan 2021 21:59:38 +0100 Subject: fluid: Use box-shadow for index item borders Fractional HiDPI scaling (1.5x) on newer Webkit-based browsers tend to cause extra black borders around the index item thumbnails due to rounding error. Turned out borders created by CSS box-shadow are rendered differently and less prone to rounding errors. Though this way of border rendering is slightly different but generally more acceptable. --- templates/fluid/styles.css | 20 ++++++++------------ 1 file changed, 8 insertions(+), 12 deletions(-) (limited to 'templates/fluid') diff --git a/templates/fluid/styles.css b/templates/fluid/styles.css index 6cd28eb..f1f5729 100644 --- a/templates/fluid/styles.css +++ b/templates/fluid/styles.css @@ -607,23 +607,19 @@ div.index_item { float: left; margin: 20px; border-radius: 8px; - -moz-border-radius: 8px; - -webkit-border-radius: 8px; - border: 1px solid #6b6c69; + border-width: 0px; background-position: 50% 50%; background-repeat: no-repeat; - box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.3); - -moz-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.3); - -webkit-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.3); + box-shadow: 0 0 0px 1px #6b6c69, + 0 0 12px 2px rgba(255, 245, 200, 0.38); transition-property: box-shadow; - transition-duration: 0.3s; -} + transition-duration: 0.25s; +} div.index_item:hover { - border: 1px solid #AAAAAA; - box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.6); - -moz-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.6); - -webkit-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.6); + border-width: 0px; + box-shadow: 0 0 0px 1px #aaaaaa, + 0 0 12px 2px rgba(255, 245, 200, 0.66); } div.index_item a { -- cgit v1.2.3