diff options
| author | Tomas Bzatek <tbzatek@users.sourceforge.net> | 2021-01-14 21:59:38 +0100 |
|---|---|---|
| committer | Tomas Bzatek <tbzatek@users.sourceforge.net> | 2021-01-15 21:47:39 +0100 |
| commit | 1851cb120518e59e1a948ba13a49fff481483a4b (patch) | |
| tree | 98e417f8bd2bb74ad287b1b15af23811eb58c1fd | |
| parent | 399a18f690c7e4f02c709501325ce3818bb44648 (diff) | |
| download | cataract-1851cb120518e59e1a948ba13a49fff481483a4b.tar.xz | |
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.
| -rw-r--r-- | templates/fluid/styles.css | 20 |
1 files changed, 8 insertions, 12 deletions
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 { |