Commit | Line | Data |
---|---|---|
5290f551 | 1 | /* attachment list in messages */ |
e3b932b6 AE |
2 | .attachmentFileList { |
3 | > ul > li:not(:last-child) { | |
4 | margin-right: 10px; | |
5 | } | |
6 | } | |
7 | ||
5290f551 | 8 | /* attachment in messages */ |
de105cbb MW |
9 | .attachmentThumbnailList > ul { |
10 | margin-bottom: -15px; | |
8a52619a | 11 | |
1b373201 MW |
12 | @include screen-sm-up { |
13 | margin-right: -10px; | |
14 | } | |
de105cbb MW |
15 | } |
16 | ||
e3b932b6 | 17 | .attachmentThumbnail { |
8a52619a | 18 | box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); |
de105cbb | 19 | margin-bottom: 15px !important; |
e3b932b6 | 20 | position: relative; |
8a52619a | 21 | |
1b373201 MW |
22 | @include screen-sm-up { |
23 | margin-right: 10px !important; | |
24 | } | |
8a52619a | 25 | |
de105cbb | 26 | @include screen-xs { |
1b373201 | 27 | margin-right: 0 !important; |
de105cbb MW |
28 | width: 100%; |
29 | } | |
8a52619a | 30 | |
de105cbb MW |
31 | .attachmentThumbnailContainer { |
32 | position: relative; | |
1b373201 | 33 | padding: 2px 2px 0; |
de105cbb | 34 | } |
8a52619a | 35 | |
de105cbb MW |
36 | .attachmentThumbnailImage { |
37 | align-items: center; | |
de105cbb MW |
38 | background-color: #333; |
39 | display: flex; | |
40 | justify-content: center; | |
41 | overflow: hidden; | |
42 | text-align: center; | |
8a52619a | 43 | |
de105cbb MW |
44 | @include screen-sm-up { |
45 | height: #{$wcf_option_attachment_thumbnail_height}px; | |
46 | width: #{$wcf_option_attachment_thumbnail_width}px; | |
47 | } | |
8a52619a | 48 | |
de105cbb MW |
49 | @include screen-xs { |
50 | max-height: #{$wcf_option_attachment_thumbnail_height}px; | |
51 | min-height: 100px; | |
52 | } | |
8a52619a | 53 | |
de105cbb MW |
54 | img { |
55 | backface-visibility: hidden; | |
de105cbb | 56 | max-width: 100%; |
8a52619a TD |
57 | opacity: 0.85; |
58 | transform: translate3d(0, 0, 0); | |
59 | transition: 0.2s ease opacity; | |
de105cbb | 60 | } |
8a52619a | 61 | |
de105cbb MW |
62 | .attachmentThumbnailImageScalable { |
63 | @include screen-xs { | |
64 | width: 100%; | |
65 | } | |
66 | } | |
67 | } | |
8a52619a | 68 | |
de105cbb MW |
69 | .attachmentThumbnailData { |
70 | backface-visibility: hidden; | |
8a52619a | 71 | background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, 0.5) 100%); |
d969670c | 72 | bottom: 0; |
6315a0ac | 73 | left: 2px; |
4f226af1 | 74 | pointer-events: none; |
de105cbb | 75 | position: absolute; |
6315a0ac MW |
76 | right: 2px; |
77 | top: 2px; | |
d969670c | 78 | transform: translate3d(0, 0, 0); |
e3b932b6 | 79 | } |
8a52619a | 80 | |
de105cbb MW |
81 | .attachmentFilename { |
82 | color: #fff; | |
e3b932b6 | 83 | bottom: 0; |
de105cbb | 84 | overflow: hidden; |
e3b932b6 AE |
85 | padding: 10px; |
86 | position: absolute; | |
de105cbb | 87 | text-overflow: ellipsis; |
d969670c | 88 | text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); |
8a52619a | 89 | transition: 0.2s ease opacity; |
de105cbb MW |
90 | width: 100%; |
91 | white-space: nowrap; | |
8a52619a | 92 | |
de105cbb MW |
93 | @include wcfFontHeadline; |
94 | } | |
8a52619a | 95 | |
de105cbb MW |
96 | .attachmentMetaData { |
97 | color: $wcfContentDimmedText; | |
d969670c | 98 | padding: 10px 15px; |
8a52619a | 99 | |
de105cbb MW |
100 | li:not(:last-child) { |
101 | margin-right: 10px; | |
102 | } | |
8a52619a | 103 | |
de105cbb MW |
104 | .icon { |
105 | color: inherit; | |
e3b932b6 AE |
106 | } |
107 | } | |
8a52619a | 108 | |
c521e594 MW |
109 | &:hover { |
110 | .attachmentThumbnailImage { | |
111 | img { | |
112 | opacity: 1; | |
113 | } | |
114 | } | |
8a52619a | 115 | |
c521e594 MW |
116 | .attachmentFilename { |
117 | opacity: 0; | |
118 | } | |
119 | } | |
e3b932b6 | 120 | } |
5290f551 AE |
121 | |
122 | /* attachments tab in editor */ | |
123 | .formAttachmentContent { | |
71212588 | 124 | .formAttachmentList { |
5290f551 AE |
125 | display: flex; |
126 | flex-wrap: wrap; | |
1b373201 | 127 | margin-left: 0 !important; |
8a52619a | 128 | |
1b373201 | 129 | > li { |
e13b022e | 130 | display: flex; |
1b373201 MW |
131 | flex: 0 0 100%; |
132 | margin-bottom: 20px; | |
8a52619a | 133 | |
5290f551 | 134 | > .attachmentTinyThumbnail { |
e13b022e | 135 | border-bottom-width: 0; |
5290f551 AE |
136 | } |
137 | } | |
138 | } | |
8a52619a | 139 | |
1b373201 | 140 | @include screen-md-up { |
71212588 | 141 | .formAttachmentList { |
1b373201 | 142 | margin-right: -20px; |
8a52619a | 143 | |
1b373201 | 144 | > li { |
ca4b5f74 AE |
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 */ | |
212264b7 AE |
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); | |
1b373201 | 153 | margin-right: 20px; |
5290f551 AE |
154 | } |
155 | } | |
1b373201 | 156 | } |
8a52619a | 157 | |
1b373201 MW |
158 | > dl { |
159 | margin-top: 0 !important; | |
71212588 | 160 | } |
8a52619a | 161 | |
71212588 MS |
162 | > dl > dd > div, |
163 | .formAttachmentButtons { | |
164 | align-items: center; | |
165 | display: flex; | |
8a52619a | 166 | |
71212588 MS |
167 | > .button { |
168 | flex: 0 0 auto; | |
8a52619a | 169 | |
71212588 MS |
170 | &:not(:first-child) { |
171 | margin-left: 10px; | |
1b373201 | 172 | } |
5290f551 | 173 | } |
8a52619a | 174 | |
71212588 MS |
175 | & + small { |
176 | margin-top: 10px !important; | |
177 | } | |
5290f551 AE |
178 | } |
179 | } | |
28a3196c | 180 | |
50898692 MW |
181 | .attachmentTinyThumbnail { |
182 | max-height: 64px; | |
183 | max-width: 64px; | |
184 | } | |
185 | ||
28a3196c | 186 | /* embedded images */ |
13416a9d AE |
187 | .embeddedAttachmentLink, |
188 | .embeddedImageLink { | |
28a3196c | 189 | border: 1px solid $wcfContentBorderInner; |
c521e594 | 190 | display: inline-block; |
54001828 | 191 | margin: 2px 0; |
c521e594 MW |
192 | max-width: 100%; |
193 | min-height: 48px; | |
28a3196c | 194 | padding: 2px; |
c521e594 | 195 | position: relative; |
8a52619a | 196 | |
c521e594 | 197 | &::after { |
8a52619a | 198 | background-color: rgba(0, 0, 0, 0.8); |
c521e594 | 199 | border-radius: 2px; |
8a52619a | 200 | box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15); |
c521e594 MW |
201 | bottom: 5px; |
202 | color: white; | |
203 | content: $fa-var-search; | |
204 | display: block; | |
205 | font-family: FontAwesome; | |
206 | font-size: 21px; | |
55f6d1fe MW |
207 | font-style: normal; |
208 | font-weight: normal; | |
8a52619a | 209 | opacity: 0.5; |
c521e594 MW |
210 | padding: 2px 8px; |
211 | position: absolute; | |
212 | right: 5px; | |
213 | text-decoration: none; | |
8a52619a | 214 | transition: 0.2s ease opacity; |
c521e594 | 215 | } |
8a52619a | 216 | |
c521e594 MW |
217 | &:hover { |
218 | &::after { | |
8a52619a | 219 | opacity: 0.8; |
c521e594 MW |
220 | } |
221 | } | |
28a3196c | 222 | } |
e8547f54 AE |
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 | } |