diff options
| -rw-r--r-- | src/client/app/common/views/components/url-preview.vue | 119 |
1 files changed, 60 insertions, 59 deletions
diff --git a/src/client/app/common/views/components/url-preview.vue b/src/client/app/common/views/components/url-preview.vue index f54d374610..c2dc07b411 100644 --- a/src/client/app/common/views/components/url-preview.vue +++ b/src/client/app/common/views/components/url-preview.vue @@ -2,8 +2,8 @@ <iframe v-if="youtubeId" type="text/html" height="250" :src="`https://www.youtube.com/embed/${youtubeId}?origin=${misskeyUrl}`" frameborder="0"/> -<div v-else> - <a class="mk-url-preview" :href="url" target="_blank" :title="url" v-if="!fetching"> +<div v-else class="mk-url-preview"> + <a :href="url" target="_blank" :title="url" v-if="!fetching"> <div class="thumbnail" v-if="thumbnail" :style="`background-image: url(${thumbnail})`"></div> <article> <header> @@ -66,78 +66,79 @@ iframe width 100% root(isDark) - display block - font-size 16px - border solid 1px isDark ? #191b1f : #eee - border-radius 4px - overflow hidden + > a + display block + font-size 16px + border solid 1px isDark ? #191b1f : #eee + border-radius 4px + overflow hidden - &:hover - text-decoration none - border-color isDark ? #4f5561 : #ddd + &:hover + text-decoration none + border-color isDark ? #4f5561 : #ddd - > article > header > h1 - text-decoration underline + > article > header > h1 + text-decoration underline - > .thumbnail - position absolute - width 100px - height 100% - background-position center - background-size cover - - & + article - left 100px - width calc(100% - 100px) - - > article - padding 16px - - > header - margin-bottom 8px + > .thumbnail + position absolute + width 100px + height 100% + background-position center + background-size cover - > h1 - margin 0 - font-size 1em - color isDark ? #d6dae0 : #555 + & + article + left 100px + width calc(100% - 100px) - > p - margin 0 - color isDark ? #a4aab3 : #777 - font-size 0.8em + > article + padding 16px - > footer - margin-top 8px - height 16px + > header + margin-bottom 8px - > img - display inline-block - width 16px - height 16px - margin-right 4px - vertical-align top + > h1 + margin 0 + font-size 1em + color isDark ? #d6dae0 : #555 > p - display inline-block margin 0 - color isDark ? #b0b4bf : #666 + color isDark ? #a4aab3 : #777 font-size 0.8em - line-height 16px - vertical-align top - @media (max-width 500px) - font-size 8px - border none + > footer + margin-top 8px + height 16px - > .thumbnail - width 70px + > img + display inline-block + width 16px + height 16px + margin-right 4px + vertical-align top - & + article - left 70px - width calc(100% - 70px) + > p + display inline-block + margin 0 + color isDark ? #b0b4bf : #666 + font-size 0.8em + line-height 16px + vertical-align top - > article - padding 8px + @media (max-width 500px) + font-size 8px + border none + + > .thumbnail + width 70px + + & + article + left 70px + width calc(100% - 70px) + + > article + padding 8px .mk-url-preview[data-darkmode] root(true) |