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         border: 1px solid transparent;
  19         border-radius: var(--wcfBorderRadius);
  20         box-shadow: var(--wcfBoxShadowCard);
  21         margin-bottom: 15px !important;
  22         position: relative;
  23
  24         @include screen-sm-up {
  25                 margin-right: 10px !important;
  26         }
  27
  28         @include screen-xs {
  29                 margin-right: 0 !important;
  30                 width: 100%;
  31         }
  32
  33         .attachmentThumbnailContainer {
  34                 position: relative;
  35                 padding: 2px 2px 0;
  36         }
  37
  38         .attachmentThumbnailImage {
  39                 align-items: center;
  40                 background-color: #333;
  41                 border-radius: calc(var(--wcfBorderRadius) - 1px);
  42                 display: flex;
  43                 justify-content: center;
  44                 overflow: hidden;
  45                 text-align: center;
  46
  47                 @include screen-sm-up {
  48                         height: #{$wcf_option_attachment_thumbnail_height}px;
  49                         width: #{$wcf_option_attachment_thumbnail_width}px;
  50                 }
  51
  52                 @include screen-xs {
  53                         max-height: #{$wcf_option_attachment_thumbnail_height}px;
  54                         min-height: 100px;
  55                 }
  56
  57                 img {
  58                         backface-visibility: hidden;
  59                         height: auto;
  60                         max-width: 100%;
  61                         opacity: 0.85;
  62                         transform: translate3d(0, 0, 0);
  63                         transition: 0.2s ease opacity;
  64                 }
  65
  66                 .attachmentThumbnailImageScalable {
  67                         @include screen-xs {
  68                                 width: 100%;
  69                         }
  70                 }
  71         }
  72
  73         .attachmentThumbnailData {
  74                 backface-visibility: hidden;
  75                 background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, 0.5) 100%);
  76                 bottom: 0;
  77                 left: 2px;
  78                 pointer-events: none;
  79                 position: absolute;
  80                 right: 2px;
  81                 top: 2px;
  82                 transform: translate3d(0, 0, 0);
  83         }
  84
  85         .attachmentFilename {
  86                 color: #fff;
  87                 bottom: 0;
  88                 overflow: hidden;
  89                 padding: 10px;
  90                 position: absolute;
  91                 text-overflow: ellipsis;
  92                 text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
  93                 transition: 0.2s ease opacity;
  94                 width: 100%;
  95                 white-space: nowrap;
  96
  97                 @include wcfFontHeadline;
  98         }
  99
 100         .attachmentMetaData {
 101                 color: var(--wcfContentDimmedText);
 102                 padding: 10px;
 103
 104                 @include wcfFontSmall;
 105
 106                 li:not(:last-child) {
 107                         margin-right: 10px;
 108                 }
 109
 110                 .icon {
 111                         color: inherit;
 112                 }
 113         }
 114
 115         &:hover {
 116                 .attachmentThumbnailImage {
 117                         img {
 118                                 opacity: 1;
 119                         }
 120                 }
 121
 122                 .attachmentFilename {
 123                         opacity: 0;
 124                 }
 125         }
 126
 127         > a {
 128                 display: block;
 129         }
 130 }
 131
 132 html[data-color-scheme="dark"] {
 133         .attachmentThumbnail {
 134                 border-color: var(--wcfContentBorderInner);
 135         }
 136 }
 137
 138 /* attachments tab in editor */
 139 .formAttachmentContent {
 140         .formAttachmentList {
 141                 display: flex;
 142                 flex-wrap: wrap;
 143                 margin-left: 0 !important;
 144
 145                 > li {
 146                         display: flex;
 147                         flex: 0 0 100%;
 148                         margin-bottom: 20px;
 149
 150                         > .attachmentTinyThumbnail {
 151                                 border-bottom-width: 0;
 152                         }
 153                 }
 154         }
 155
 156         .formAttachmentListItem > fa-icon[size="64"] {
 157                 flex-basis: 64px;
 158         }
 159
 160         @include screen-md-up {
 161                 .formAttachmentList {
 162                         margin-right: -20px;
 163
 164                         > li {
 165                                 /* Safari sometimes trips over fractional values, causing two
 166                                    items to be exactly 1 pixel wider than the available space.
 167                                    Reserving 21px covers all sort of rounding errors, without
 168                                    being visually noticeable */
 169                                 /* The `flex` shorthand fails in IE11 if `calc()` is used. */
 170                                 flex-grow: 0;
 171                                 flex-shrink: 0;
 172                                 flex-basis: calc(50% - 21px);
 173                                 margin-right: 20px;
 174                         }
 175                 }
 176         }
 177
 178         > dl {
 179                 margin-top: 0 !important;
 180         }
 181
 182         > dl > dd > div,
 183         .formAttachmentButtons {
 184                 align-items: center;
 185                 display: flex;
 186
 187                 > .button {
 188                         flex: 0 0 auto;
 189
 190                         &:not(:first-child) {
 191                                 margin-left: 10px;
 192                         }
 193                 }
 194
 195                 & + small {
 196                         margin-top: 10px !important;
 197                 }
 198         }
 199 }
 200
 201 .attachmentTinyThumbnail {
 202         max-height: 64px;
 203         max-width: 64px;
 204         object-fit: contain;
 205 }
 206
 207 /* embedded images */
 208 .embeddedAttachmentLink,
 209 .embeddedImageLink {
 210         border: 1px solid var(--wcfContentBorderInner);
 211         display: inline-block;
 212         height: auto;
 213         margin: 2px 0;
 214         max-width: 100%;
 215         min-height: 48px;
 216         padding: 2px;
 217         position: relative;
 218
 219         &:hover .embeddedAttachmentLinkEnlarge {
 220                 opacity: 0.8;
 221         }
 222 }
 223
 224 .embeddedAttachmentLinkEnlarge {
 225         background-color: rgba(0, 0, 0, 0.8);
 226         border-radius: 2px;
 227         box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
 228         bottom: 5px;
 229         color: white;
 230         display: block;
 231         opacity: 0.5;
 232         padding: 2px;
 233         position: absolute;
 234         right: 5px;
 235         text-decoration: none;
 236         transition: 0.2s ease opacity;
 237 }
 238
 239 .popoverContent .embeddedAttachmentLink,
 240 .popoverContent .embeddedImageLink {
 241         /* this will also suppress the link being displayed in the browser's "status bar" on hover */
 242         pointer-events: none;
 243 }
 244
 245 .messageSectionTitle {
 246         align-items: center;
 247         display: flex;
 248         margin-bottom: 10px;
 249
 250         &::before {
 251                 border-top: 1px solid var(--wcfContentBorderInner);
 252                 content: "";
 253                 flex: 0 0 20px;
 254                 margin-right: 10px;
 255         }
 256
 257         &::after {
 258                 border-top: 1px solid var(--wcfContentBorderInner);
 259                 content: "";
 260                 flex: 1 0 auto;
 261                 margin-left: 10px;
 262         }
 263 }
 264
 265 .messageAttachmentList {
 266         display: grid;
 267         gap: 10px;
 268         grid-template-columns: repeat(auto-fill, 300px);
 269
 270         @include screen-xs {
 271                 grid-template-columns: 1fr;
 272         }
 273 }
 274
 275 .messageAttachment {
 276         border: 1px solid var(--wcfContentBorderInner);
 277         border-radius: 3px;
 278         color: inherit;
 279         column-gap: 8px;
 280         display: grid;
 281         grid-template-areas:
 282                 "icon filename"
 283                 "icon meta";
 284         grid-template-columns: 32px auto;
 285         padding: 8px;
 286         row-gap: 1px;
 287         user-select: none;
 288
 289         &:focus,
 290         &:hover {
 291                 color: inherit;
 292
 293                 .messageAttachmentIconDefault {
 294                         display: none;
 295                 }
 296         }
 297
 298         &:not(:focus):not(:hover) {
 299                 .messageAttachmentIconDownload {
 300                         display: none;
 301                 }
 302         }
 303 }
 304
 305 .messageAttachmentIcon {
 306         align-self: center;
 307         grid-area: icon;
 308 }
 309
 310 .messageAttachmentIconDefault,
 311 .messageAttachmentIconDownload {
 312         cursor: inherit !important;
 313 }
 314
 315 .messageAttachmentFilename {
 316         font-weight: 600;
 317         grid-area: filename;
 318         overflow: hidden;
 319         text-overflow: ellipsis;
 320         white-space: nowrap;
 321 }
 322
 323 .messageAttachmentMeta {
 324         @include wcfFontSmall;
 325
 326         color: var(--wcfContentDimmedText);
 327         grid-area: meta;
 328 }