Fix super chat styling

FreeTubeApp · Nov 2, 2022 · 5295fbe · 5295fbe
1 parent 8beff23
commit 5295fbe
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 25 deletions.
diff --git a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
@@ -59,13 +59,14 @@
 
 .superChatContent {
   margin-left: 32px;
-  margin-top: 6px;
+  margin-top: -25px;
   color: var(--text-with-main-color);
 }
 
 .superChat .channelThumbnail {
   margin-top: 3px;
   margin-left: 3px;
+  height: 25px;
 }
 
 .donationAmount {
@@ -88,21 +89,43 @@
   position: absolute;
 }
 
+.comment .superChatMessage {
+  padding: 5px;
+}
+
+.comment .upperSuperChatMessage {
+  padding: 0px;
+}
+
+.comment {
+  width: 100%;
+  padding-top: 5px;
+  padding-bottom: 7px;
+  display: grid;
+  grid-template-columns: min-content auto;
+  gap: 5px;
+}
+
 .superChatMessage {
   width: 90%;
+  grid-template-columns: auto;
   margin-left: 5%;
   margin-right: 5%;
-  margin-top: 10px;
+  margin-top: 25px;
+  margin-bottom: 10px;
   background-color: var(--primary-color);
   border-radius: 5px 5px 5px 5px;
   -webkit-border-radius: 5px 5px 5px 5px;
+  position: relative;
 }
 
 .upperSuperChatMessage {
   margin-top: -15px;
   width: 100%;
   height: 55px;
   background-color: var(--primary-color-hover);
+  border-radius: 5px 5px 0px 0px;
+  -webkit-border-radius: 5px 5px 0px 0px;
 }
 
 .upperSuperChatMessage .channelThumbnail {
@@ -114,17 +137,17 @@
 .upperSuperChatMessage .channelName {
   color: var(--text-with-main-color);
   opacity: 0.7;
-  position: relative;
-  top: 5px;
-  margin-left: 60px;
+  position: absolute;
+  top: -20px;
+  margin-left: 65px;
 }
 
 .upperSuperChatMessage .donationAmount {
   color: var(--text-with-main-color);
   font-weight: bold;
   margin-left: 65px;
-  position: relative;
-  bottom: 5px;
+  position: absolute;
+  top: 0px;
 }
 
 .superChatMessage .chatMessage {
@@ -137,23 +160,6 @@
   overflow-y: auto;
 }
 
-.comment .superChatMessage {
-  padding: 5px;
-}
-
-.comment .upperSuperChatMessage {
-  padding: 0px;
-}
-
-.comment {
-  width: 100%;
-  padding-top: 5px;
-  padding-bottom: 7px;
-  display: grid;
-  grid-template-columns: min-content auto;
-  gap: 5px;
-}
-
 .channelThumbnail {
   width: 25px;
   border-radius: 200px;

diff --git a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.vue b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.vue
@@ -113,10 +113,10 @@
           v-for="(comment, index) in comments"
           :key="index"
           class="comment"
+          :class="{ superChatMessage: typeof (comment.superchat) !== 'undefined' }"
         >
           <div
             v-if="typeof (comment.superchat) !== 'undefined'"
-            class="superChatMessage"
             :class="comment.superchat.colorClass"
           >
             <div