Fix bug
This commit is contained in:
		
							parent
							
								
									a7cbdbc1f2
								
							
						
					
					
						commit
						8682fd21c4
					
				
					 1 changed files with 67 additions and 66 deletions
				
			
		| 
						 | 
				
			
			@ -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
 | 
			
		||||
 | 
			
		||||
	> .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
 | 
			
		||||
 | 
			
		||||
			> h1
 | 
			
		||||
				margin 0
 | 
			
		||||
				font-size 1em
 | 
			
		||||
				color isDark ? #d6dae0 : #555
 | 
			
		||||
 | 
			
		||||
		> p
 | 
			
		||||
			margin 0
 | 
			
		||||
			color isDark ? #a4aab3 : #777
 | 
			
		||||
			font-size 0.8em
 | 
			
		||||
 | 
			
		||||
		> footer
 | 
			
		||||
			margin-top 8px
 | 
			
		||||
			height 16px
 | 
			
		||||
 | 
			
		||||
			> img
 | 
			
		||||
				display inline-block
 | 
			
		||||
				width 16px
 | 
			
		||||
				height 16px
 | 
			
		||||
				margin-right 4px
 | 
			
		||||
				vertical-align top
 | 
			
		||||
 | 
			
		||||
			> p
 | 
			
		||||
				display inline-block
 | 
			
		||||
				margin 0
 | 
			
		||||
				color isDark ? #b0b4bf : #666
 | 
			
		||||
				font-size 0.8em
 | 
			
		||||
				line-height 16px
 | 
			
		||||
				vertical-align top
 | 
			
		||||
 | 
			
		||||
	@media (max-width 500px)
 | 
			
		||||
		font-size 8px
 | 
			
		||||
		border none
 | 
			
		||||
			> article > header > h1
 | 
			
		||||
				text-decoration underline
 | 
			
		||||
 | 
			
		||||
		> .thumbnail
 | 
			
		||||
			width 70px
 | 
			
		||||
			position absolute
 | 
			
		||||
			width 100px
 | 
			
		||||
			height 100%
 | 
			
		||||
			background-position center
 | 
			
		||||
			background-size cover
 | 
			
		||||
 | 
			
		||||
			& + article
 | 
			
		||||
				left 70px
 | 
			
		||||
				width calc(100% - 70px)
 | 
			
		||||
				left 100px
 | 
			
		||||
				width calc(100% - 100px)
 | 
			
		||||
 | 
			
		||||
		> article
 | 
			
		||||
			padding 8px
 | 
			
		||||
			padding 16px
 | 
			
		||||
 | 
			
		||||
			> header
 | 
			
		||||
				margin-bottom 8px
 | 
			
		||||
 | 
			
		||||
				> h1
 | 
			
		||||
					margin 0
 | 
			
		||||
					font-size 1em
 | 
			
		||||
					color isDark ? #d6dae0 : #555
 | 
			
		||||
 | 
			
		||||
			> p
 | 
			
		||||
				margin 0
 | 
			
		||||
				color isDark ? #a4aab3 : #777
 | 
			
		||||
				font-size 0.8em
 | 
			
		||||
 | 
			
		||||
			> footer
 | 
			
		||||
				margin-top 8px
 | 
			
		||||
				height 16px
 | 
			
		||||
 | 
			
		||||
				> img
 | 
			
		||||
					display inline-block
 | 
			
		||||
					width 16px
 | 
			
		||||
					height 16px
 | 
			
		||||
					margin-right 4px
 | 
			
		||||
					vertical-align top
 | 
			
		||||
 | 
			
		||||
				> p
 | 
			
		||||
					display inline-block
 | 
			
		||||
					margin 0
 | 
			
		||||
					color isDark ? #b0b4bf : #666
 | 
			
		||||
					font-size 0.8em
 | 
			
		||||
					line-height 16px
 | 
			
		||||
					vertical-align top
 | 
			
		||||
 | 
			
		||||
		@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)
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue