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, 0.12), 0 1px 2px rgba(0, 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: 0.85;
  58                         transform: translate3d(0, 0, 0);
  59                         transition: 0.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, 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: 0.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                                 /* The `flex` shorthand fails in IE11 if `calc()` is used. */
 150                                 flex-grow: 0;
 151                                 flex-shrink: 0;
 152                                 flex-basis: calc(50% - 21px);
 153                                 margin-right: 20px;
 154                         }
 155                 }
 156         }
 157
 158         > dl {
 159                 margin-top: 0 !important;
 160         }
 161
 162         > dl > dd > div,
 163         .formAttachmentButtons {
 164                 align-items: center;
 165                 display: flex;
 166
 167                 > .button {
 168                         flex: 0 0 auto;
 169
 170                         &:not(:first-child) {
 171                                 margin-left: 10px;
 172                         }
 173                 }
 174
 175                 & + small {
 176                         margin-top: 10px !important;
 177                 }
 178         }
 179 }
 180
 181 .attachmentTinyThumbnail {
 182         max-height: 64px;
 183         max-width: 64px;
 184 }
 185
 186 /* embedded images */
 187 .embeddedAttachmentLink,
 188 .embeddedImageLink {
 189         border: 1px solid $wcfContentBorderInner;
 190         display: inline-block;
 191         margin: 2px 0;
 192         max-width: 100%;
 193         min-height: 48px;
 194         padding: 2px;
 195         position: relative;
 196
 197         &::after {
 198                 background-color: rgba(0, 0, 0, 0.8);
 199                 border-radius: 2px;
 200                 box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
 201                 bottom: 5px;
 202                 color: white;
 203                 content: $fa-var-search;
 204                 display: block;
 205                 font-family: FontAwesome;
 206                 font-size: 21px;
 207                 font-style: normal;
 208                 font-weight: normal;
 209                 opacity: 0.5;
 210                 padding: 2px 8px;
 211                 position: absolute;
 212                 right: 5px;
 213                 text-decoration: none;
 214                 transition: 0.2s ease opacity;
 215         }
 216
 217         &:hover {
 218                 &::after {
 219                         opacity: 0.8;
 220                 }
 221         }
 222 }
 223
 224 .popoverContent .embeddedAttachmentLink,
 225 .popoverContent .embeddedImageLink {
 226         /* this will also suppress the link being displayed in the browser's "status bar" on hover */
 227         pointer-events: none;
 228 }