wcfsetup/install/files/style/ui/attachment.scss

   1 /* attachment list in messages */
   2 .attachmentFileList {
   3         > ul > li:not(:last-child) {
   4                 margin-right: 10px;
   5         }
   6 }
   7
   8 /* attachment in messages */
   9 .attachmentThumbnailList > ul {
  10         margin-bottom: -15px;
  11
  12         @include screen-sm-up {
  13                 margin-right: -10px;
  14         }
  15 }
  16
  17 .attachmentThumbnail {
  18         box-shadow: 0 0 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
  19         margin-bottom: 15px !important;
  20         position: relative;
  21
  22         @include screen-sm-up {
  23                 margin-right: 10px !important;
  24         }
  25
  26         @include screen-xs {
  27                 margin-right: 0 !important;
  28                 width: 100%;
  29         }
  30
  31         .attachmentThumbnailContainer {
  32                 position: relative;
  33                 padding: 2px 2px 0;
  34         }
  35
  36         .attachmentThumbnailImage {
  37                 align-items: center;
  38                 background-color: #333;
  39                 display: flex;
  40                 justify-content: center;
  41                 overflow: hidden;
  42                 text-align: center;
  43
  44                 @include screen-sm-up {
  45                         height: #{$wcf_option_attachment_thumbnail_height}px;
  46                         width: #{$wcf_option_attachment_thumbnail_width}px;
  47                 }
  48
  49                 @include screen-xs {
  50                         max-height: #{$wcf_option_attachment_thumbnail_height}px;
  51                         min-height: 100px;
  52                 }
  53
  54                 img {
  55                         backface-visibility: hidden;
  56                         max-width: 100%;
  57                         opacity: .85;
  58                         transform: translate3d(0,0,0);
  59                         transition: .2s ease opacity;
  60                 }
  61
  62                 .attachmentThumbnailImageScalable {
  63                         @include screen-xs {
  64                                 width: 100%;
  65                         }
  66                 }
  67         }
  68
  69         .attachmentThumbnailData {
  70                 backface-visibility: hidden;
  71                 background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, .5) 100%);
  72                 bottom: 0;
  73                 left: 2px;
  74                 pointer-events: none;
  75                 position: absolute;
  76                 right: 2px;
  77                 top: 2px;
  78                 transform: translate3d(0, 0, 0);
  79         }
  80
  81         .attachmentFilename {
  82                 color: #fff;
  83                 bottom: 0;
  84                 overflow: hidden;
  85                 padding: 10px;
  86                 position: absolute;
  87                 text-overflow: ellipsis;
  88                 text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
  89                 transition: .2s ease opacity;
  90                 width: 100%;
  91                 white-space: nowrap;
  92
  93                 @include wcfFontHeadline;
  94         }
  95
  96         .attachmentMetaData {
  97                 color: $wcfContentDimmedText;
  98                 padding: 10px 15px;
  99
 100                 li:not(:last-child) {
 101                         margin-right: 10px;
 102                 }
 103
 104                 .icon {
 105                         color: inherit;
 106                 }
 107         }
 108
 109         &:hover {
 110                 .attachmentThumbnailImage {
 111                         img {
 112                                 opacity: 1;
 113                         }
 114                 }
 115
 116                 .attachmentFilename {
 117                         opacity: 0;
 118                 }
 119         }
 120 }
 121
 122 /* attachments tab in editor */
 123 .formAttachmentContent {
 124         > .formAttachmentList {
 125                 display: flex;
 126                 flex-wrap: wrap;
 127                 margin-left: 0 !important;
 128
 129                 > li {
 130                         display: flex;
 131                         flex: 0 0 100%;
 132                         margin-bottom: 20px;
 133
 134                         > .attachmentTinyThumbnail {
 135                                 border-bottom-width: 0;
 136                         }
 137                 }
 138         }
 139
 140         @include screen-md-up {
 141                 > .formAttachmentList {
 142                         margin-right: -20px;
 143
 144                         > li {
 145                                 /* Safari sometimes trips over fractional values, causing two
 146                                    items to be exactly 1 pixel wider than the available space.
 147                                    Reserving 21px covers all sort of rounding errors, without
 148                                    being visually noticeable */
 149                                 flex: 0 0 calc(50% - 21px);
 150                                 max-width: calc(50% - 21px); /* IE fix */
 151                                 margin-right: 20px;
 152                         }
 153                 }
 154         }
 155
 156         > dl {
 157                 margin-top: 0 !important;
 158
 159                 > dd > div {
 160                         align-items: center;
 161                         display: flex;
 162
 163                         > .button {
 164                                 flex: 0 0 auto;
 165
 166                                 &:not(:first-child) {
 167                                         margin-left: 10px;
 168                                 }
 169                         }
 170
 171                         & + small {
 172                                 margin-top: 10px !important;
 173                         }
 174                 }
 175         }
 176 }
 177
 178 .attachmentTinyThumbnail {
 179         max-height: 64px;
 180         max-width: 64px;
 181 }
 182
 183 /* embedded images */
 184 .embeddedAttachmentLink,
 185 .embeddedImageLink {
 186         border: 1px solid $wcfContentBorderInner;
 187         display: inline-block;
 188         max-width: 100%;
 189         min-height: 48px;
 190         padding: 2px;
 191         position: relative;
 192
 193         &::after {
 194                 background-color: rgba(0, 0, 0, .8);
 195                 border-radius: 2px;
 196                 box-shadow: 0 0 0 3px rgba(0, 0, 0, .15);
 197                 bottom: 5px;
 198                 color: white;
 199                 content: $fa-var-search;
 200                 display: block;
 201                 font-family: FontAwesome;
 202                 font-size: 21px;
 203                 font-style: normal;
 204                 font-weight: normal;
 205                 opacity: .5;
 206                 padding: 2px 8px;
 207                 position: absolute;
 208                 right: 5px;
 209                 text-decoration: none;
 210                 transition: .2s ease opacity;
 211         }
 212
 213         &:hover {
 214                 &::after {
 215                         opacity: .8;
 216                 }
 217         }
 218 }
 219
 220 .popoverContent .embeddedAttachmentLink,
 221 .popoverContent .embeddedImageLink {
 222         /* this will also suppress the link being displayed in the browser's "status bar" on hover */
 223         pointer-events: none;
 224 }