Improved attachment styling

diff --git a/wcfsetup/install/files/style/ui/attachment.scss b/wcfsetup/install/files/style/ui/attachment.scss
index bd95199a032b4e3bbb7e1aa8558d61b32209d6c0..d12357115f1505f16b6e7453569684c8fb339312 100644 (file)
--- a/wcfsetup/install/files/style/ui/attachment.scss
+++ b/wcfsetup/install/files/style/ui/attachment.scss
@@ -12,9 +12,7 @@
 }
 
 .attachmentThumbnail {
-       border-radius: 3px;
-       box-shadow: 0 0 1px #aaa;
-       background: #fff;
+       box-shadow: 0 0 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
        margin-bottom: 15px !important;
        margin-right: 15px !important;
        position: relative;
@@ -25,11 +23,11 @@
        
        .attachmentThumbnailContainer {
                position: relative;
+               padding: 5px 5px 0;
        }
        
        .attachmentThumbnailImage {
                align-items: center;
-               border-radius: 3px 3px 0 0;
                background-color: #333;
                display: flex;
                justify-content: center;
@@ -72,13 +70,13 @@
        
        .attachmentThumbnailData {
                backface-visibility: hidden;
-               background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .7) 100%);
-               border-radius: 3px 3px 0 0;
-               height: 100%;
+               background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, .5) 100%);
+               bottom: 0;
+               left: 5px;
                position: absolute;
-               top: 0;
-               transform: translate3d(0,0,0);
-               width: 100%;
+               right: 5px;
+               top: 5px;
+               transform: translate3d(0, 0, 0);
        }
        
        .attachmentFilename {
@@ -88,7 +86,7 @@
                padding: 10px;
                position: absolute;
                text-overflow: ellipsis;
-               text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
+               text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
                width: 100%;
                white-space: nowrap;
        
@@ -97,7 +95,7 @@
        
        .attachmentMetaData {
                color: $wcfContentDimmedText;
-               padding: 10px;
+               padding: 10px 15px;
                
                li:not(:last-child) {
                        margin-right: 10px;