diff options
Diffstat (limited to 'src/components/attachment/attachment.vue')
| -rw-r--r-- | src/components/attachment/attachment.vue | 226 |
1 files changed, 116 insertions, 110 deletions
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index a1b35d91..04f6add4 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -1,5 +1,5 @@ <template> - <div class="attachment base03-border" :class="{[type]: true, loading}" v-show="!isEmpty"> + <div class="attachment" :class="{[type]: true, loading}" v-show="!isEmpty"> <a class="image-attachment" v-if="hidden" @click.prevent="toggleHidden()"> <img :key="nsfwImage" :src="nsfwImage"/> </a> @@ -8,10 +8,10 @@ </div> <a v-if="type === 'image' && !hidden" class="image-attachment" :href="attachment.url" target="_blank"> - <StillImage class="base03-border" referrerpolicy="no-referrer" :mimetype="attachment.mimetype" :src="attachment.large_thumb_url || attachment.url"/> + <StillImage referrerpolicy="no-referrer" :mimetype="attachment.mimetype" :src="attachment.large_thumb_url || attachment.url"/> </a> - <video class="base03" v-if="type === 'video' && !hidden" :src="attachment.url" controls loop></video> + <video v-if="type === 'video' && !hidden" :src="attachment.url" controls loop></video> <audio v-if="type === 'audio'" :src="attachment.url" controls></audio> @@ -30,115 +30,121 @@ <script src="./attachment.js"></script> <style lang="scss"> - .attachments { +@import '../../_variables.scss'; + +.attachments { + display: flex; + flex-wrap: wrap; + margin-right: -0.7em; + + .attachment.media-upload-container { + flex: 0 0 auto; + max-height: 300px; + max-width: 100%; + line-height: 0; + + video { + max-height: 300px; + } + } + + .attachment { + flex: 1 0 30%; + margin: 0.5em 0.7em 0.6em 0.0em; + align-self: flex-start; + border-color: $fallback--border; + border-color: var(--border, $fallback--border); + + border-style: solid; + border-width: 1px; + border-radius: $fallback--attachmentRadius; + border-radius: var(--attachmentRadius, $fallback--attachmentRadius); + overflow: hidden; + + // fixes small gap below video + &.video { + line-height: 0; + } + + &.html { + flex-basis: 90%; + width: 100%; display: flex; - flex-wrap: wrap; - margin-right: -0.7em; + } + + &.loading { + cursor: progress; + } + + .hider { + position: absolute; + margin: 10px; + padding: 5px; + background: rgba(230,230,230,0.6); + font-weight: bold; + z-index: 4; + } + + video { + max-height: 500px; + height: 100%; + width: 100%; + z-index: 0; + } + + audio { + width: 100%; + } + + img.media-upload { + margin-bottom: -2px; + max-height: 300px; + max-width: 100%; + } + + .oembed { + width: 100%; + margin-right: 15px; + display: flex; + + img { + width: 100%; + } - .attachment.media-upload-container { - flex: 0 0 auto; - max-height: 300px; - max-width: 100%; + .image { + flex: 1; + img { + border: 0px; + border-radius: $fallback--attachmentRadius; + border-radius: var(--attachmentRadius, $fallback--attachmentRadius); + height: 100%; + object-fit: cover; + } } - - .attachment { - flex: 1 0 30%; - margin: 0.5em 0.7em 0.6em 0.0em; - align-self: flex-start; - - border-style: solid; - border-width: 1px; - border-radius: 5px; - overflow: hidden; - - // fixes small gap below video - &.video { - line-height: 0; - } - - &.html { - flex-basis: 90%; - width: 100%; - display: flex; - } - - &.loading { - cursor: progress; - } - - .hider { - position: absolute; - margin: 10px; - padding: 5px; - background: rgba(230,230,230,0.6); - font-weight: bold; - z-index: 4; - } - - video { - max-height: 500px; - height: 100%; - width: 100%; - z-index: 0; - } - - audio { - width: 100%; - } - - img.media-upload { - margin-bottom: -2px; - max-height: 300px; - max-width: 100%; - } - - .oembed { - width: 100%; - margin-right: 15px; - display: flex; - - img { - width: 100%; - } - - .image { - flex: 1; - img { - border: 0px; - border-radius: 5px; - height: 100%; - object-fit: cover; - } - } - - .text { - flex: 2; - margin: 8px; - word-break: break-all; - h1 { - font-size: 14px; - margin: 0px; - } - } - } - - a.image-attachment { - display: flex; - flex: 1; - - .still-image { - width: 100%; - height: 100%; - } - - img { - object-fit: contain; - width: 100%; - height: 100%; /* If this isn't here, chrome will stretch the images */ - max-height: 500px; - image-orientation: from-image; - } - } + + .text { + flex: 2; + margin: 8px; + word-break: break-all; + h1 { + font-size: 14px; + margin: 0px; + } + } + } + + a.image-attachment { + display: flex; + flex: 1; + + img { + object-fit: contain; + width: 100%; + height: 100%; /* If this isn't here, chrome will stretch the images */ + max-height: 500px; + image-orientation: from-image; } - } + } + } +} </style> |