diff --git a/src/App.scss b/src/App.scss index 5f03e2a1..61acc4ce 100644 --- a/src/App.scss +++ b/src/App.scss @@ -393,7 +393,7 @@ nav { .faint { color: $fallback--faint; - color: var($fallback--faint, --faint); + color: var(--faint, $fallback--faint); } @media all and (max-width: 959px) { diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index c84a74a0..6134f8e2 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -2,7 +2,7 @@ <div v-if="size==='hide'"> <a class="placeholder" v-if="type !== 'html'" target="_blank" :href="attachment.url">[{{nsfw ? "NSFW/" : ""}}{{type.toUpperCase()}}]</a> </div> - <div v-else class="attachment base03-border" :class="{[type]: true, loading, 'small-attachment': isSmall}" v-show="!isEmpty"> + <div v-else class="attachment" :class="{[type]: true, loading, 'small-attachment': isSmall}" v-show="!isEmpty"> <a class="image-attachment" v-if="hidden" @click.prevent="toggleHidden()"> <img :key="nsfwImage" :src="nsfwImage"/> </a> @@ -11,10 +11,10 @@ </div> <a v-if="type === 'image' && !hidden" class="image-attachment" :href="attachment.url" target="_blank"> - <StillImage :class="{'small': isSmall}" class="base03-border" referrerpolicy="no-referrer" :mimetype="attachment.mimetype" :src="attachment.large_thumb_url || attachment.url"/> + <StillImage :class="{'small': isSmall}" referrerpolicy="no-referrer" :mimetype="attachment.mimetype" :src="attachment.large_thumb_url || attachment.url"/> </a> - <video :class="{'small': isSmall}" class="base03" v-if="type === 'video' && !hidden" :src="attachment.url" controls loop></video> + <video :class="{'small': isSmall}" v-if="type === 'video' && !hidden" :src="attachment.url" controls loop></video> <audio v-if="type === 'audio'" :src="attachment.url" controls></audio> @@ -61,6 +61,7 @@ flex: 1 0 30%; margin: 0.5em 0.7em 0.6em 0.0em; align-self: flex-start; + line-height: 0; border-style: solid; border-width: 1px; @@ -109,7 +110,7 @@ } img.media-upload { - margin-bottom: -2px; + line-height: 0; max-height: 300px; max-width: 100%; } diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index 9c9ea1d5..65ab7f5e 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -136,7 +136,7 @@ position: relative; overflow: hidden; width: 100%; - flex: 1; + flex: 1 1 0; display: flex; flex-wrap: nowrap; diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 6fe61f36..885083c4 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -27,7 +27,7 @@ <div class="usercard media-body" v-if="userExpanded"> <user-card-content :user="status.user" :switcher="false"></user-card-content> </div> - <div v-if="!noHeading" class="media-body container"> + <div v-if="!noHeading" class="media-body container media-heading"> <div class="media-heading-left"> <div class="name-and-links"> <h4 class="user-name">{{status.user.name}}</h4> @@ -181,6 +181,9 @@ flex: 1; padding: 0; margin: 0 0 0.25em 0.8em; + } + + .media-heading { flex-wrap: nowrap; }