Merge pull request #266 from ToxicAven/main

5 buncha fix

src/components/_chat.scss

@@ -140,6 +140,20 @@ main[class^="chatContent"] div[id^="message-content"] svg[class^="icon"] {
   }
 }
 
+@mixin header-list($bgc) {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  ul li,
+  ol li {
+    & > span {
+      background-color: $bgc;
+    }
+  }
+}
+
 // spoiler messages
 .theme-dark,
 .theme-light {
@@ -157,15 +171,16 @@ main[class^="chatContent"] div[id^="message-content"] svg[class^="icon"] {
   }
 
   span[class*="spoilerMarkdownContent"] {
-    h1 > span {
-      background-color: $surface0;
-    }
+    @include header-list($surface0);
+    //background-color: $surface0;
 
-    &[class*="hidden"] h1 > span {
-      background-color: $surface2;
+    &[class*="hidden"] {
+      //background-color: $surface2;
+      @include header-list($surface2);
 
       &:hover {
-        background-color: lighten($surface2, 5%);
+        //background-color: lighten($surface2, 5%);
+        @include header-list(lighten($surface2, 5%));
       }
     }
   }

src/components/_details.scss

@@ -35,6 +35,7 @@ rect[fill="rgba(242, 63, 67, 1)"] {
 
 // offline
 rect[fill="#82858f"],
+rect[fill="#80848e"],
 foreignObject[mask="url(#svg-mask-status-offline)"] > div,
 foreignObject[mask="url(#svg-mask-status-offline)"] > rect,
 div[class^="dotOffline"],

src/components/_popouts.scss

@@ -247,9 +247,12 @@ section[class*="positionContainer_"] {
   }
 }
 
-// Latte text color on gif categories
-.theme-light section[class^="positionContainer"] div[class^="categoryText"] {
-  color: $base;
+// Latte gif picker
+.theme-light #gif-picker-tab-panel {
+  background-color: unset;
+  div[class^="categoryText"] {
+    color: $base;
+  }
 }
 
 #emoji-picker-tab-panel {
@@ -796,3 +799,14 @@ div[class^="layerContainer"] div[class^="streamPreview"] div[class^="body"] {
     }
   }
 }
+
+// Event popout
+div[class^="layerContainer"] div[class^="eventStatusContainer"] {
+  div[class^="newBadge"] {
+    background-color: $brand !important;
+
+    div[class*="newBadgeText_"] {
+      color: $crust;
+    }
+  }
+}

src/components/_variables.scss

@@ -138,6 +138,7 @@ html {
   --primary-300: #{$subtext1};
   --primary-400: #{$subtext1};
   --primary-dark-700: #{$crust};
+  --primary-800: #{$crust};
 
   // update discord icon
   --status-green-560: #{$green};