[Client] 🎨

src/web/app/desktop/tags/notifications.tag

@@ -64,7 +64,7 @@
 		</virtual>
 	</div>
 	<button class="more" if={ moreNotifications } onclick={ fetchMoreNotifications } disabled={ fetchingMoreNotifications }>
-		{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:desktop.tags.mk-notifications.more%' }
+		<i class="fa fa-spinner fa-pulse fa-fw" if={ fetchingMoreNotifications }></i>{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:desktop.tags.mk-notifications.more%' }
 	</button>
 	<p class="empty" if={ notifications.length == 0 && !loading }>ありません！</p>
 	<p class="loading" if={ loading }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:common.loading%<mk-ellipsis/></p>
@@ -178,6 +178,12 @@
 				color #555
 				border-top solid 1px rgba(0, 0, 0, 0.05)
 
+				&:hover
+					background rgba(0, 0, 0, 0.025)
+
+				&:active
+					background rgba(0, 0, 0, 0.05)
+
 			> .empty
 				margin 0
 				padding 16px

src/web/app/mobile/tags/notifications.tag

@@ -1,12 +1,14 @@
 <mk-notifications>
 	<div class="notifications" if={ notifications.length != 0 }>
 		<virtual each={ notification, i in notifications }>
-			<mk-notification notification={ notification }></mk-notification>
+			<div>
+				<mk-notification notification={ notification }></mk-notification>
+			</div>
 			<p class="date" if={ i != notifications.length - 1 && notification._date != notifications[i + 1]._date }><span><i class="fa fa-angle-up"></i>{ notification._datetext }</span><span><i class="fa fa-angle-down"></i>{ notifications[i + 1]._datetext }</span></p>
 		</virtual>
 	</div>
 	<button class="more" if={ moreNotifications } onclick={ fetchMoreNotifications } disabled={ fetchingMoreNotifications }>
-		{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:mobile.tags.mk-notifications.more%' }
+		<i class="fa fa-spinner fa-pulse fa-fw" if={ fetchingMoreNotifications }></i>{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:mobile.tags.mk-notifications.more%' }
 	</button>
 	<p class="empty" if={ notifications.length == 0 && !loading }>%i18n:mobile.tags.mk-notifications.empty%</p>
 	<p class="loading" if={ loading }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:common.loading%<mk-ellipsis/></p>
@@ -16,15 +18,17 @@
 			background #fff
 
 			> .notifications
-				margin 0 auto
-				max-width 500px
 
-				> mk-notification
+				> div
 					border-bottom solid 1px rgba(0, 0, 0, 0.05)
 
 					&:last-child
 						border-bottom none
 
+					> mk-notification
+						margin 0 auto
+						max-width 500px
+
 				> .date
 					display block
 					margin 0

src/web/app/reset.styl

@@ -34,6 +34,9 @@ button
 	*
 		pointer-events none
 
+	&[disabled]
+		cursor default
+
 pre
 	overflow auto
 	white-space pre