From 7a02ce51be12ac460c67493ce81e9e80f95fc2d2 Mon Sep 17 00:00:00 2001
From: Z <tdxdxoz@gmail.com>
Date: Wed, 20 Nov 2019 23:20:05 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=BA=86=E8=AF=84=E8=AE=BA?=
 =?UTF-8?q?=E9=A2=84=E8=A7=88=E7=9A=84=E7=BB=93=E6=9E=84=E5=92=8C=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E6=96=B9=E5=BC=8F(=E5=A2=9E=E5=8A=A0=E4=BA=86wrapper)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/javascript/mastodon/components/status.js  |  2 +-
 .../closed-social/timeline_comments.scss      | 25 ++++++++++---------
 app/javascript/styles/mastodon/variables.scss |  3 +++
 app/javascript/styles/thu/variables.scss      |  3 ++-
 4 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js
index 09c8ffceb..9e93eb916 100644
--- a/app/javascript/mastodon/components/status.js
+++ b/app/javascript/mastodon/components/status.js
@@ -472,7 +472,7 @@ class Status extends ImmutablePureComponent {
     }
 
   if(sonsIds && sonsIds.size > 0) {
-    sons = <div className='comments_timeline'>{this.renderChildren(sonsIds)}</div>;
+    sons = <div className='comments-timeline__wrapper'><div className='comments-timeline'>{this.renderChildren(sonsIds)}</div></div>;
   }
     
     let deepRec;
diff --git a/app/javascript/styles/closed-social/timeline_comments.scss b/app/javascript/styles/closed-social/timeline_comments.scss
index d7eb8fafa..c9e3f136c 100644
--- a/app/javascript/styles/closed-social/timeline_comments.scss
+++ b/app/javascript/styles/closed-social/timeline_comments.scss
@@ -1,28 +1,29 @@
-.comments_timeline {
-	height: 160px;
+.comments-timeline {
+	max-height: 160px;
+  min-width: 60%;
 	overflow: hidden;
 	-webkit-mask-image: linear-gradient(#1a1a1a,transparent);
 	mask-image: linear-gradient(#1a1a1a,transparent);
 	transform: scale(0.85);
 	transform-origin: 100% 0%;
 	margin-bottom: -32px;
-  position: relative;
-  z-index:99;
+  position: absolute;
+  z-index:9;
 	&:hover {
-	  overflow: visible;
+	  max-height: none;
 		-webkit-mask-image: none;
 		mask-image: none;
-    > div {
-      background: lighten($ui-base-color, 5%);
-    }
+    z-index:99;
+    background: $tc-background;
 	}
 	&:active {
-	  overflow: visible;
+	  max-height: none;
 		-webkit-mask-image: none;
 		mask-image: none;
-    > div {
-      background: lighten($ui-base-color, 5%);
-    }
+    background: $tc-background;
 	}
 }
 
+.comments-timeline__wrapper {
+  height: 135px;
+}
diff --git a/app/javascript/styles/mastodon/variables.scss b/app/javascript/styles/mastodon/variables.scss
index a82c44229..390cd5370 100644
--- a/app/javascript/styles/mastodon/variables.scss
+++ b/app/javascript/styles/mastodon/variables.scss
@@ -39,6 +39,9 @@ $inverted-text-color: $ui-base-color !default;
 $lighter-text-color: $ui-base-lighter-color !default;
 $light-text-color: $ui-primary-color !default;
 
+//timeline comeents
+$tc-background: lighten($ui-base-color, 8%) !default;
+
 // Language codes that uses CJK fonts
 $cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
 
diff --git a/app/javascript/styles/thu/variables.scss b/app/javascript/styles/thu/variables.scss
index 6b51d1d69..315324471 100644
--- a/app/javascript/styles/thu/variables.scss
+++ b/app/javascript/styles/thu/variables.scss
@@ -1,7 +1,8 @@
 // Dependent colors
-$classic-base-color: rgba(48,43,56,0.85);
+$classic-base-color: rgba(40,44,55,0.8);
 
 // Differences
 $ui-base-color: $classic-base-color !default;
+$tc-background: rgba(50,41,64,0.9) !default;