Multiple style improvements for attachment lists

diff --git a/wcfsetup/install/files/style/ui/attachment.scss b/wcfsetup/install/files/style/ui/attachment.scss
index a01f7d37dab126ea4ce6ad897fc1d19bfeb13a59..5a99cd28e1d631b304228747fdb9b69bc2153a7b 100644 (file)
--- a/wcfsetup/install/files/style/ui/attachment.scss
+++ b/wcfsetup/install/files/style/ui/attachment.scss
@@ -8,22 +8,29 @@
 /* attachment in messages */
 .attachmentThumbnailList > ul {
        margin-bottom: -15px;
-       margin-right: -15px;
+       
+       @include screen-sm-up {
+               margin-right: -10px;
+       }
 }
 
 .attachmentThumbnail {
        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;
        
+       @include screen-sm-up {
+               margin-right: 10px !important;
+       }
+       
        @include screen-xs {
+               margin-right: 0 !important;
                width: 100%;
        }
        
        .attachmentThumbnailContainer {
                position: relative;
-               padding: 5px 5px 0;
+               padding: 2px 2px 0;
        }
        
        .attachmentThumbnailImage {
@@ -111,13 +118,12 @@
        > .formAttachmentList {
                display: flex;
                flex-wrap: wrap;
-               margin-right: -20px;
+               margin-left: 0 !important;
                
-               > .box64 {
+               > li {
                        display: flex !important; /* jquery-ui sortable sometimes sets display:block */
-                       flex: 0 0 calc(50% - 20px);
-                       max-width: calc(50% - 20px); /* IE fix */
-                       margin-right: 20px;
+                       flex: 0 0 100%;
+                       margin-bottom: 20px;
                        
                        > .attachmentTinyThumbnail {
                                max-height: 64px;
@@ -126,20 +132,36 @@
                }
        }
        
-       > dl > dd > div {
-               align-items: center;
-               display: flex;
-               
-               > .button {
-                       flex: 0 0 auto;
+       @include screen-md-up {
+               > .formAttachmentList {
+                       margin-right: -20px;
                        
-                       &:not(:first-child) {
-                               margin-left: 10px;
+                       > li {
+                               flex: 0 0 calc(50% - 20px);
+                               max-width: calc(50% - 20px); /* IE fix */
+                               margin-right: 20px;
                        }
                }
+       }
+       
+       > dl {
+               margin-top: 0 !important;
                
-               & + small {
-                       margin-top: 10px !important;
+               > dd > div {
+                       align-items: center;
+                       display: flex;
+                       
+                       > .button {
+                               flex: 0 0 auto;
+                               
+                               &:not(:first-child) {
+                                       margin-left: 10px;
+                               }
+                       }
+                       
+                       & + small {
+                               margin-top: 10px !important;
+                       }
                }
        }
 }