diff options
Diffstat (limited to 'src/components/attachment/attachment.vue')
| -rw-r--r-- | src/components/attachment/attachment.vue | 200 |
1 files changed, 98 insertions, 102 deletions
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index a1b35d91..eeb6e6b8 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,111 @@ <script src="./attachment.js"></script> <style lang="scss"> - .attachments { - display: flex; - flex-wrap: wrap; - margin-right: -0.7em; +.attachments { + display: flex; + flex-wrap: wrap; + margin-right: -0.7em; - .attachment.media-upload-container { + .attachment.media-upload-container { flex: 0 0 auto; max-height: 300px; max-width: 100%; - } - - .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 { + } + + .attachment { + flex: 1 0 30%; + margin: 0.5em 0.7em 0.6em 0.0em; + align-self: flex-start; + border-color: var(--border); + + border-style: solid; + border-width: 1px; + border-radius: 5px; + overflow: hidden; + + // fixes small gap below video + &.video { line-height: 0; - } + } - &.html { + &.html { flex-basis: 90%; width: 100%; display: flex; - } + } - &.loading { + &.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; - } - } - } + } + + .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; + + 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> |