Merge branch 'destinygg:master' into feature/escape-pins-chat

assets/chat/css/chat/_index.scss

@@ -9,6 +9,7 @@
 @use 'scrollbar-theme';
 @use 'toolbar';
 @use 'window-select';
+@use 'event-bar';
 
 #chat {
   min-width: a.$chat-min-width;

assets/chat/css/chat/_output.scss

@@ -4,6 +4,7 @@
   flex: 1;
   overflow: hidden;
   width: 100%;
+  position: relative;
 }
 
 .chat-output {
@@ -15,6 +16,7 @@
   font-family: a.$chat-lines-font;
   line-height: 1.65em;
   outline: 0 !important;
+  overflow-anchor: none;
 }
 
 .onstreamchat {

assets/chat/css/chat/event-bar/_event-bar-event.scss

@@ -0,0 +1,148 @@
+@use '../../abstracts/' as a;
+@use '../../messages/event/_donation' as donation;
+
+.event-bar-event {
+  position: relative;
+  cursor: pointer;
+  transition: transform 100ms;
+
+  font-size: 1.1em;
+  border-radius: 10px;
+  border-style: solid;
+  border-color: unset;
+  border-width: 2px;
+  margin: a.$gutter-sm;
+
+  .event-contents {
+    display: flex;
+    padding: 0 a.$gutter-xs 0 0.4em;
+    background-color: a.$color-chat-emphasize;
+    justify-content: space-between;
+    align-items: center;
+    border-radius: 10px;
+  }
+
+  .event-info {
+    margin-right: a.$gutter-xs;
+    max-width: 12ch;
+    overflow: hidden;
+  }
+
+  .event-icon {
+    width: 2em;
+    height: 2em;
+    border: 0.25em solid transparent;
+    opacity: 0.75;
+
+    &.subscription {
+      @include a.icon-background('../img/sub-regular.svg');
+    }
+
+    &.giftsub {
+      filter: invert(100%);
+
+      @include a.icon-background('../img/sub-gift.png');
+    }
+
+    &.massgift {
+      filter: invert(100%);
+
+      @include a.icon-background('../img/sub-mass-gift.png');
+    }
+  }
+
+  .user {
+    font-weight: 500;
+    color: a.$color-label-user;
+    display: inline-block;
+    animation: scrolling-event-username 12s linear 3s infinite;
+    word-wrap: normal;
+
+    &::before {
+      content: unset;
+    }
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  &.amount-0 {
+    border-color: #1c5cdb;
+  }
+
+  @each $amount, $color in donation.$amount-color-map {
+    &.amount-#{$amount} {
+      border-color: $color;
+
+      .event-icon {
+        filter: invert(100%);
+
+        @include a.icon-background('../img/donation-amount-#{$amount}.png');
+      }
+    }
+  }
+
+  &.rainbow-border {
+    background-clip: padding-box;
+    border: solid 2px transparent;
+
+    &:before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      z-index: -1;
+      margin: -2px;
+      border-radius: inherit;
+      background: var(--rainbow-gradient);
+    }
+  }
+
+  &:hover {
+    transform: scale(1.05);
+  }
+
+  // Ensure `removed` can override `enter` because `enter` is not removed from
+  // the event after the animation completes.
+  &.enter {
+    animation: event-bar-appear 500ms linear;
+  }
+
+  &.removed {
+    animation: event-bar-disappear 500ms linear;
+  }
+}
+
+@keyframes event-bar-appear {
+  0% {
+    transform: scale(0.1);
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes event-bar-disappear {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    transform: scale(0.1);
+    opacity: 0;
+  }
+}
+
+@keyframes scrolling-event-username {
+  25%,
+  50% {
+    transform: translateX(calc(-1 * max(0px, 100% - 12ch)));
+  }
+
+  75%,
+  100% {
+    transform: translateX(0%);
+  }
+}

assets/chat/css/chat/event-bar/_index.scss

@@ -0,0 +1,49 @@
+@use '../../abstracts/' as a;
+
+@use 'event-bar-event';
+
+#chat-event-bar {
+  &:empty {
+    display: none;
+  }
+
+  display: inline-flex;
+  overflow-x: scroll;
+  background: #111113;
+  z-index: 6;
+
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+#chat-event-selected {
+  position: absolute;
+  z-index: 210;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+
+  .event-bar-selected-message {
+    margin: a.$gutter-sm;
+
+    .focus:not(.watching-focus) & {
+      opacity: 1;
+    }
+  }
+
+  &.hidden {
+    display: none;
+  }
+}
+
+.onstreamchat {
+  #chat-event-bar {
+    display: none;
+  }
+
+  #chat-event-selected,
+  #chat-pinned-message {
+    display: none;
+  }
+}

assets/chat/css/menus/_emote-list.scss

@@ -22,11 +22,6 @@
     background: none;
     border-radius: 0;
   }
-
-  .favorite {
-    flex: 0 88px;
-    border-top: 1px solid a.$color-surface-dark4;
-  }
 }
 
 .emote-group {
@@ -36,6 +31,20 @@
   margin: a.$gutter-lg;
 }
 
+.favorite-emote {
+  position: relative;
+}
+
+.favorite-emote:after {
+  content: url('../img/icon-pin.svg');
+  position: absolute;
+  width: 1em;
+  height: 1em;
+  right: -0.5em;
+  top: -0.5em;
+  transform: rotate(45deg);
+}
+
 .emote-item {
   user-select: none;
   padding: a.$gutter-sm;

assets/chat/css/menus/_event-action-menu.scss

@@ -0,0 +1,23 @@
+@use '../abstracts/' as a;
+
+#event-action-menu {
+  height: fit-content;
+  width: fit-content;
+  min-width: 75px;
+  max-width: 250px;
+  z-index: 221;
+
+  .chat-menu-inner {
+    background-color: a.$color-surface-dark3;
+  }
+
+  .event-action {
+    transition: background-color 150ms ease;
+    color: a.$color-light;
+    padding: 0.5rem 1rem;
+
+    &:hover {
+      background-color: a.$color-surface-dark4;
+    }
+  }
+}

assets/chat/css/menus/_index.scss

@@ -7,6 +7,7 @@
 @use 'user-info';
 @use 'user-list';
 @use 'whispers-list';
+@use 'event-action-menu';
 
 .chat-menu {
   display: none;

assets/chat/css/messages/_index.scss

@@ -1,9 +1,9 @@
 @use '../abstracts' as a;
 
 @use 'base';
-@use 'modifiers';
 @use 'ui';
 @use 'user';
 @use 'emote';
 @use 'event';
 @use 'pinned';
+@use 'modifiers';

assets/chat/css/messages/event/_event.scss

@@ -32,15 +32,16 @@
   }
 
   .event-icon {
-    width: 2.25em;
-    height: 2.25em;
     color: a.$color-chat-disabled;
     position: relative;
     text-decoration: none;
     display: inline-block;
     border: 0.25em solid transparent;
     flex-shrink: 0;
     opacity: 0.75;
+    width: 100%;
+    height: 100%;
+    transition: background 200ms ease;
   }
 
   .event-bottom {
@@ -50,6 +51,21 @@
     border-bottom-left-radius: 10px;
   }
 
+  .event-button {
+    width: 2.25em;
+    height: 2.25em;
+
+    &:hover:not(:disabled) {
+      .event-icon {
+        @include a.icon-background('../img/icon-ellipsis-vertical.svg');
+      }
+    }
+
+    &:disabled {
+      cursor: default;
+    }
+  }
+
   &:not(:has(.event-bottom)) {
     .event-top {
       border-bottom-right-radius: 10px;

assets/chat/css/messages/pinned/_frame.scss

@@ -1,6 +1,6 @@
 @use '../../abstracts/' as a;
 
-#chat-pinned-frame {
+#chat-pinned-message {
   display: none;
   padding: 4px;
   position: absolute;
@@ -38,7 +38,7 @@
 }
 
 .onstreamchat {
-  #chat-pinned-frame {
+  #chat-pinned-message {
     display: none !important;
   }
 }