バグ修正やデザイン調整など

src/client/app/common/views/components/media-banner.vue

@@ -1,11 +1,11 @@
 <template>
 <div class="mk-media-banner">
-	<div class="mk-media-banner-sensitive" v-if="media.isSensitive && hide" @click="hide = false">
-		<span class="mk-media-banner-icon">%fa:exclamation-triangle%</span>
+	<div class="sensitive" v-if="media.isSensitive && hide" @click="hide = false">
+		<span class="icon">%fa:exclamation-triangle%</span>
 		<b>%i18n:@sensitive%</b>
 		<span>%i18n:@click-to-show%</span>
 	</div>
-	<div class="mk-media-banner-audio" v-else-if="media.type.startsWith('audio')">
+	<div class="audio" v-else-if="media.type.startsWith('audio')">
 		<audio class="audio"
 			:src="media.url"
 			:title="media.name"
@@ -13,12 +13,12 @@
 			ref="audio"
 			preload="metadata" />
 	</div>
-	<a class="mk-media-banner-download" v-else
+	<a class="download" v-else
 		:href="media.url"
 		:title="media.name"
 		:download="media.name"
 	>
-		<span class="mk-media-banner-icon">%fa:download%</span>
+		<span class="icon">%fa:download%</span>
 		<b>{{ media.name }}</b>
 	</a>
 </div>
@@ -48,40 +48,38 @@ root(isDark)
 	margin-top 4px
 	overflow hidden
 
-	.mk-media-banner-download,
-	.mk-media-banner-sensitive
+	> .download,
+	> .sensitive
 		display flex
 		align-items center
 		font-size 12px
-		padding .2em .6em
+		padding 8px 12px
 		white-space nowrap
 
 		> *
 			display block
 
 		> b
-			flex-shrink 2147483647
 			overflow hidden
 			text-overflow ellipsis
 
 		> *:not(:last-child)
 			margin-right .2em
 
-		> .mk-media-banner-icon
+		> .icon
 			font-size 1.6em
 
-	.mk-media-banner-download
+	> .download
 		background isDark ? #21242d : #f7f7f7
 
-	.mk-media-banner-sensitive
+	> .sensitive
 		background #111
 		color #fff
 
-	.mk-media-banner-audio
+	> .audio
 		.audio
 			display block
 			width 100%
-			height 100%
 
 .mk-media-banner[data-darkmode]
 	root(true)