wip

1 files changed, 10 insertions, 18 deletions

diff --git a/src/client/app/common/views/components/messaging.vue b/src/client/app/common/views/components/messaging.vue
index 8e5393e6e5..91453e16ec 100644
--- a/src/client/app/common/views/components/messaging.vue
+++ b/src/client/app/common/views/components/messaging.vue
@@ -167,9 +167,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.mk-messaging
 
 	&[data-compact]
 		font-size 0.8em
@@ -318,20 +316,20 @@ root(isDark)
 			display block
 			text-decoration none
 			background var(--face)
-			border-bottom solid 1px isDark ? #1c2023 : #eee
+			border-bottom solid 1px var(--faceDivider)
 
 			*
 				pointer-events none
 				user-select none
 
 			&:hover
-				background isDark ? #1e2129 : #fafafa
+				box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
 
-				> .avatar
+				.avatar
 					filter saturate(200%)
 
 			&:active
-				background isDark ? #14161b : #eee
+				box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
 
 			&[data-is-read]
 			&[data-is-me]
@@ -371,17 +369,17 @@ root(isDark)
 						overflow hidden
 						text-overflow ellipsis
 						font-size 1em
-						color isDark ? #fff : rgba(#000, 0.9)
+						color var(--noteHeaderName)
 						font-weight bold
 						transition all 0.1s ease
 
 					> .username
 						margin 0 8px
-						color isDark ? #606984 : rgba(#000, 0.5)
+						color var(--noteHeaderAcct)
 
 					> .mk-time
 						margin 0 0 0 auto
-						color isDark ? #606984 : rgba(#000, 0.5)
+						color var(--noteHeaderInfo)
 						font-size 80%
 
 				> .avatar
@@ -401,10 +399,10 @@ root(isDark)
 						overflow hidden
 						overflow-wrap break-word
 						font-size 1.1em
-						color isDark ? #fff : rgba(#000, 0.8)
+						color var(--faceText)
 
 						.me
-							color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.4)
+							opacity 0.7
 
 					> .image
 						display block
@@ -449,10 +447,4 @@ root(isDark)
 					> .avatar
 						margin 0 12px 0 0
 
-.mk-messaging[data-darkmode]
-	root(true)
-
-.mk-messaging:not([data-darkmode])
-	root(false)
-
 </style>