From 80d343bb0ba2ee8299dd194e5b95fbf55664c540 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Acid=20Chicken=20=28=E7=A1=AB=E9=85=B8=E9=B6=8F=29?=
 <root@acid-chicken.com>
Date: Mon, 13 Aug 2018 03:36:42 +0900
Subject: [PATCH 1/8] Update avatar.vue

---
 .../app/common/views/components/avatar.vue    | 50 ++++++++++++++++---
 1 file changed, 43 insertions(+), 7 deletions(-)

diff --git a/src/client/app/common/views/components/avatar.vue b/src/client/app/common/views/components/avatar.vue
index 6685296c1..5339c8999 100644
--- a/src/client/app/common/views/components/avatar.vue
+++ b/src/client/app/common/views/components/avatar.vue
@@ -1,8 +1,16 @@
 <template>
-	<span class="mk-avatar" :title="user | acct" :style="style" v-if="disableLink && !disablePreview" v-user-preview="user.id" @click="onClick"></span>
-	<span class="mk-avatar" :title="user | acct" :style="style" v-else-if="disableLink && disablePreview" @click="onClick"></span>
-	<router-link class="mk-avatar" :to="user | userPage" :title="user | acct" :target="target" :style="style" v-else-if="!disableLink && !disablePreview" v-user-preview="user.id"></router-link>
-	<router-link class="mk-avatar" :to="user | userPage" :title="user | acct" :target="target" :style="style" v-else-if="!disableLink && disablePreview"></router-link>
+	<span :class="{ mk-avatar: true, cat: cat }" :title="user | acct" v-if="disableLink && !disablePreview" v-user-preview="user.id" @click="onClick">
+		<span class="inner" :style="style"></span>
+	</span>
+	<span :class="{ mk-avatar: true, cat: cat }" :title="user | acct" v-else-if="disableLink && disablePreview" @click="onClick">
+		<span class="inner" :style="style"></span>
+	</span>
+	<router-link :class="{ mk-avatar: true, cat: cat }" :to="user | userPage" :title="user | acct" :target="target" v-else-if="!disableLink && !disablePreview" v-user-preview="user.id">
+		<span class="inner" :style="style"></span>
+	</router-link>
+	<router-link :class="{ mk-avatar: true, cat: cat }" :to="user | userPage" :title="user | acct" :target="target" v-else-if="!disableLink && disablePreview">
+		<span class="inner" :style="style"></span>
+	</router-link>
 </template>
 
 <script lang="ts">
@@ -30,6 +38,9 @@ export default Vue.extend({
 		lightmode(): boolean {
 			return this.$store.state.device.lightmode;
 		},
+		cat(): boolean {
+			return this.user.isCat && this.$store.state.settings.circleIcons;
+		}
 		style(): any {
 			return {
 				backgroundColor: this.lightmode
@@ -54,7 +65,32 @@ export default Vue.extend({
 .mk-avatar
 	display inline-block
 	vertical-align bottom
-	background-size cover
-	background-position center center
-	transition border-radius 1s ease
+
+	&::before,
+	&::after
+		background #df548f
+		border solid 4px #ffffff
+		box-sizing border-box
+		content ''
+		display inline-block
+		height 50%
+		width 50%
+
+	&::before
+		border-radius 0 75% 75%
+		transform rotate(37.5deg) skew(30deg)
+
+	&::after
+		border-radius 75% 0 75% 75%
+		transform rotate(-37.5deg) skew(-30deg)
+
+	.inner
+		background-position center center
+		background-size cover
+		bottom 0
+		left 0
+		position absolute
+		right 0
+		top 0
+		transition border-radius 1s ease
 </style>

From 70f927ea43c4cbe1ff20a9a89474207e3619b092 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Acid=20Chicken=20=28=E7=A1=AB=E9=85=B8=E9=B6=8F=29?=
 <root@acid-chicken.com>
Date: Mon, 13 Aug 2018 03:39:32 +0900
Subject: [PATCH 2/8] Update avatar.vue

---
 src/client/app/common/views/components/avatar.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/client/app/common/views/components/avatar.vue b/src/client/app/common/views/components/avatar.vue
index 5339c8999..133276b26 100644
--- a/src/client/app/common/views/components/avatar.vue
+++ b/src/client/app/common/views/components/avatar.vue
@@ -66,8 +66,8 @@ export default Vue.extend({
 	display inline-block
 	vertical-align bottom
 
-	&::before,
-	&::after
+	&.cat::before,
+	&.cat::after
 		background #df548f
 		border solid 4px #ffffff
 		box-sizing border-box
@@ -76,11 +76,11 @@ export default Vue.extend({
 		height 50%
 		width 50%
 
-	&::before
+	&.cat::before
 		border-radius 0 75% 75%
 		transform rotate(37.5deg) skew(30deg)
 
-	&::after
+	&.cat::after
 		border-radius 75% 0 75% 75%
 		transform rotate(-37.5deg) skew(-30deg)
 

From e1f460f90fe0da3160fa505717a7890a8cd37d2b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Acid=20Chicken=20=28=E7=A1=AB=E9=85=B8=E9=B6=8F=29?=
 <root@acid-chicken.com>
Date: Mon, 13 Aug 2018 03:40:50 +0900
Subject: [PATCH 3/8] Update user.header.vue

---
 src/client/app/desktop/views/pages/user/user.header.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/client/app/desktop/views/pages/user/user.header.vue b/src/client/app/desktop/views/pages/user/user.header.vue
index 00545723e..d8f4656ed 100644
--- a/src/client/app/desktop/views/pages/user/user.header.vue
+++ b/src/client/app/desktop/views/pages/user/user.header.vue
@@ -176,6 +176,10 @@ root(isDark)
 		height 120px
 		box-shadow 1px 1px 3px rgba(#000, 0.2)
 
+		> &.cat::before,
+		> &.cat::after
+			border-width 8px
+
 	> .body
 		padding 16px 16px 16px 154px
 		color isDark ? #c5ced6 : #555

From 2913c7ccfbb153eba6054672958c571e8c0ad969 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Acid=20Chicken=20=28=E7=A1=AB=E9=85=B8=E9=B6=8F=29?=
 <root@acid-chicken.com>
Date: Mon, 13 Aug 2018 03:42:12 +0900
Subject: [PATCH 4/8] Update avatar.vue

---
 src/client/app/common/views/components/avatar.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/client/app/common/views/components/avatar.vue b/src/client/app/common/views/components/avatar.vue
index 133276b26..097bea843 100644
--- a/src/client/app/common/views/components/avatar.vue
+++ b/src/client/app/common/views/components/avatar.vue
@@ -93,4 +93,5 @@ export default Vue.extend({
 		right 0
 		top 0
 		transition border-radius 1s ease
+		z-index 1
 </style>

From 4edd9efc0b76c394b9a781a30f1c5e85b2294eb0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Acid=20Chicken=20=28=E7=A1=AB=E9=85=B8=E9=B6=8F=29?=
 <root@acid-chicken.com>
Date: Mon, 13 Aug 2018 03:47:56 +0900
Subject: [PATCH 5/8] Update avatar.vue

refs: https://github.com/syuilo/misskey/pull/2182#discussion_r209464350
---
 src/client/app/common/views/components/avatar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/client/app/common/views/components/avatar.vue b/src/client/app/common/views/components/avatar.vue
index 097bea843..d59c486f1 100644
--- a/src/client/app/common/views/components/avatar.vue
+++ b/src/client/app/common/views/components/avatar.vue
@@ -40,7 +40,7 @@ export default Vue.extend({
 		},
 		cat(): boolean {
 			return this.user.isCat && this.$store.state.settings.circleIcons;
-		}
+		},
 		style(): any {
 			return {
 				backgroundColor: this.lightmode

From f15878cc6f0d274dbe6183a84a103fce022b6a73 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Acid=20Chicken=20=28=E7=A1=AB=E9=85=B8=E9=B6=8F=29?=
 <root@acid-chicken.com>
Date: Mon, 13 Aug 2018 22:49:32 +0900
Subject: [PATCH 6/8] Update avatar.vue

refs: https://github.com/syuilo/misskey/pull/2182#discussion_r209609541
---
 src/client/app/common/views/components/avatar.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/client/app/common/views/components/avatar.vue b/src/client/app/common/views/components/avatar.vue
index d59c486f1..77d4d5492 100644
--- a/src/client/app/common/views/components/avatar.vue
+++ b/src/client/app/common/views/components/avatar.vue
@@ -1,14 +1,14 @@
 <template>
-	<span :class="{ mk-avatar: true, cat: cat }" :title="user | acct" v-if="disableLink && !disablePreview" v-user-preview="user.id" @click="onClick">
+	<span class="mk-avatar" :class="{ cat }" :title="user | acct" v-if="disableLink && !disablePreview" v-user-preview="user.id" @click="onClick">
 		<span class="inner" :style="style"></span>
 	</span>
-	<span :class="{ mk-avatar: true, cat: cat }" :title="user | acct" v-else-if="disableLink && disablePreview" @click="onClick">
+	<span class="mk-avatar" :class="{ cat }" :title="user | acct" v-else-if="disableLink && disablePreview" @click="onClick">
 		<span class="inner" :style="style"></span>
 	</span>
-	<router-link :class="{ mk-avatar: true, cat: cat }" :to="user | userPage" :title="user | acct" :target="target" v-else-if="!disableLink && !disablePreview" v-user-preview="user.id">
+	<router-link class="mk-avatar" :class="{ cat }" :to="user | userPage" :title="user | acct" :target="target" v-else-if="!disableLink && !disablePreview" v-user-preview="user.id">
 		<span class="inner" :style="style"></span>
 	</router-link>
-	<router-link :class="{ mk-avatar: true, cat: cat }" :to="user | userPage" :title="user | acct" :target="target" v-else-if="!disableLink && disablePreview">
+	<router-link class="mk-avatar" :class="{ cat }" :to="user | userPage" :title="user | acct" :target="target" v-else-if="!disableLink && disablePreview">
 		<span class="inner" :style="style"></span>
 	</router-link>
 </template>

From 38b75ad977828802cd84968d793166afd658a36a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Acid=20Chicken=20=28=E7=A1=AB=E9=85=B8=E9=B6=8F=29?=
 <root@acid-chicken.com>
Date: Tue, 14 Aug 2018 02:10:06 +0900
Subject: [PATCH 7/8] Update avatar.vue

---
 .../app/common/views/components/avatar.vue       | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/client/app/common/views/components/avatar.vue b/src/client/app/common/views/components/avatar.vue
index 77d4d5492..7f6a555ad 100644
--- a/src/client/app/common/views/components/avatar.vue
+++ b/src/client/app/common/views/components/avatar.vue
@@ -1,14 +1,14 @@
 <template>
-	<span class="mk-avatar" :class="{ cat }" :title="user | acct" v-if="disableLink && !disablePreview" v-user-preview="user.id" @click="onClick">
+	<span class="mk-avatar" :class="{ cat, white }" :title="user | acct" v-if="disableLink && !disablePreview" v-user-preview="user.id" @click="onClick">
 		<span class="inner" :style="style"></span>
 	</span>
-	<span class="mk-avatar" :class="{ cat }" :title="user | acct" v-else-if="disableLink && disablePreview" @click="onClick">
+	<span class="mk-avatar" :class="{ cat, white }" :title="user | acct" v-else-if="disableLink && disablePreview" @click="onClick">
 		<span class="inner" :style="style"></span>
 	</span>
-	<router-link class="mk-avatar" :class="{ cat }" :to="user | userPage" :title="user | acct" :target="target" v-else-if="!disableLink && !disablePreview" v-user-preview="user.id">
+	<router-link class="mk-avatar" :class="{ cat, white }" :to="user | userPage" :title="user | acct" :target="target" v-else-if="!disableLink && !disablePreview" v-user-preview="user.id">
 		<span class="inner" :style="style"></span>
 	</router-link>
-	<router-link class="mk-avatar" :class="{ cat }" :to="user | userPage" :title="user | acct" :target="target" v-else-if="!disableLink && disablePreview">
+	<router-link class="mk-avatar" :class="{ cat, white }" :to="user | userPage" :title="user | acct" :target="target" v-else-if="!disableLink && disablePreview">
 		<span class="inner" :style="style"></span>
 	</router-link>
 </template>
@@ -41,6 +41,9 @@ export default Vue.extend({
 		cat(): boolean {
 			return this.user.isCat && this.$store.state.settings.circleIcons;
 		},
+		white():boolean {
+			return this.$store.state.device.darkmode;
+		},
 		style(): any {
 			return {
 				backgroundColor: this.lightmode
@@ -69,13 +72,16 @@ export default Vue.extend({
 	&.cat::before,
 	&.cat::after
 		background #df548f
-		border solid 4px #ffffff
+		border solid 4px #202224
 		box-sizing border-box
 		content ''
 		display inline-block
 		height 50%
 		width 50%
 
+		&.white
+			border-color #e0eefd
+ 
 	&.cat::before
 		border-radius 0 75% 75%
 		transform rotate(37.5deg) skew(30deg)

From cc5c32b4d20d780ae7a837094e38998d7d963eb4 Mon Sep 17 00:00:00 2001
From: Aya Morisawa <AyaMorisawa4869@gmail.com>
Date: Tue, 14 Aug 2018 05:24:51 +0900
Subject: [PATCH 8/8] Clean up

---
 .../app/common/views/components/avatar.vue    | 31 ++++++++++---------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/client/app/common/views/components/avatar.vue b/src/client/app/common/views/components/avatar.vue
index 7f6a555ad..13334daeb 100644
--- a/src/client/app/common/views/components/avatar.vue
+++ b/src/client/app/common/views/components/avatar.vue
@@ -1,14 +1,14 @@
 <template>
-	<span class="mk-avatar" :class="{ cat, white }" :title="user | acct" v-if="disableLink && !disablePreview" v-user-preview="user.id" @click="onClick">
+	<span class="mk-avatar" :class="{ cat }" :title="user | acct" v-if="disableLink && !disablePreview" v-user-preview="user.id" @click="onClick">
 		<span class="inner" :style="style"></span>
 	</span>
-	<span class="mk-avatar" :class="{ cat, white }" :title="user | acct" v-else-if="disableLink && disablePreview" @click="onClick">
+	<span class="mk-avatar" :class="{ cat }" :title="user | acct" v-else-if="disableLink && disablePreview" @click="onClick">
 		<span class="inner" :style="style"></span>
 	</span>
-	<router-link class="mk-avatar" :class="{ cat, white }" :to="user | userPage" :title="user | acct" :target="target" v-else-if="!disableLink && !disablePreview" v-user-preview="user.id">
+	<router-link class="mk-avatar" :class="{ cat }" :to="user | userPage" :title="user | acct" :target="target" v-else-if="!disableLink && !disablePreview" v-user-preview="user.id">
 		<span class="inner" :style="style"></span>
 	</router-link>
-	<router-link class="mk-avatar" :class="{ cat, white }" :to="user | userPage" :title="user | acct" :target="target" v-else-if="!disableLink && disablePreview">
+	<router-link class="mk-avatar" :class="{ cat }" :to="user | userPage" :title="user | acct" :target="target" v-else-if="!disableLink && disablePreview">
 		<span class="inner" :style="style"></span>
 	</router-link>
 </template>
@@ -41,17 +41,14 @@ export default Vue.extend({
 		cat(): boolean {
 			return this.user.isCat && this.$store.state.settings.circleIcons;
 		},
-		white():boolean {
-			return this.$store.state.device.darkmode;
-		},
 		style(): any {
 			return {
 				backgroundColor: this.lightmode
-					? `rgb(${ this.user.avatarColor.slice(0, 3).join(',') })`
+					? `rgb(${this.user.avatarColor.slice(0, 3).join(',')})`
 					: this.user.avatarColor && this.user.avatarColor.length == 3
-						? `rgb(${ this.user.avatarColor.join(',') })`
+						? `rgb(${this.user.avatarColor.join(',')})`
 						: null,
-				backgroundImage: this.lightmode ? null : `url(${ this.user.avatarUrl })`,
+				backgroundImage: this.lightmode ? null : `url(${this.user.avatarUrl})`,
 				borderRadius: this.$store.state.settings.circleIcons ? '100%' : null
 			};
 		}
@@ -65,23 +62,21 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.mk-avatar
+
+root(isDark)
 	display inline-block
 	vertical-align bottom
 
 	&.cat::before,
 	&.cat::after
 		background #df548f
-		border solid 4px #202224
+		border solid 4px isDark ? #e0eefd : #202224
 		box-sizing border-box
 		content ''
 		display inline-block
 		height 50%
 		width 50%
 
-		&.white
-			border-color #e0eefd
- 
 	&.cat::before
 		border-radius 0 75% 75%
 		transform rotate(37.5deg) skew(30deg)
@@ -100,4 +95,10 @@ export default Vue.extend({
 		top 0
 		transition border-radius 1s ease
 		z-index 1
+
+.mk-avatar[data-darkmode]
+	root(true)
+
+.mk-avatar:not([data-darkmode])
+	root(false)
 </style>