Kennt sich jemand gut mit CSS aus für OBS?

also das problem bei mir ist nun dieser ich hab zwar nun meine schöne box für den text aber leider wenn der text kurz ist, ist dieser (also ist für ein twitch chat) dann ist die nachricht auf einer höhe mit den badges und den Namen wie verhindere ich das nun?

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-20px) rotateY(15deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotateY(15deg);
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
    transform: translateY(0) rotateY(15deg);
  }
  100% {
    opacity: 0;
    transform: translateY(20px) rotateY(15deg);
  }
}
.overlay, .widget, .twitch-chat, .chat-line {
  overflow: visible !important;
}
.twitch-chat {
  perspective: 1000px;
  display: flex;
  flex-direction: column-reverse; /* Nachrichten von oben nach unten */
}
.chat-line {
  margin: 5px 0;
  display: flex;
  align-items: center; /* Vertikal zentrieren */
  flex-wrap: wrap;
  animation: fadeIn 0.5s ease-in-out forwards, fadeOut 0.5s ease-in-out 29.5s forwards;
  opacity: 0;
  transform-style: preserve-3d; /* Beibehalten der 3D-Darstellung */
  transform: rotateY(15deg); /* 3D-Effekt auf der Y-Achse */
}
.badges {
  display: inline-flex;
  align-items: center; /* Vertikal zentrieren */
  margin-right: 5px;
}
.chat-line .username {
  font-family: 'Roboto', sans-serif;
  font-weight: 800;
  font-size: 20px;
  line-height: 18px;
  border-radius: 5px;
  color: #2ccce4 !important;
  background: transparent;
  padding: 2px 5px;
  z-index: 20;
  text-shadow: 
    -1px -1px 1 rgba(0, 0, 0, 0.50),
    1px -1px 1 rgba(0, 0, 0, 0.50),
    -1px 1px 1 rgba(0, 0, 0, 0.50),
    1px 1px 1 rgba(0, 0, 0, 0.50); /* Schwarze Umrandung */
}
.chat-line .message {
  font-family: 'Roboto', sans-serif;
  font-weight: 800;
  font-size: 15px;
  line-height: 19px;
  border-radius: 4px; /* Border-Radius für die Bubble */
  background: rgba(0, 0, 0, 0.75) !important; /* Schwarzer Hintergrund mit 75% Transparenz */
  background-size: contain;
  color: #ffffff !important; /* Weißer Text */
  padding: 4px 5px; /* Padding für die Bubble */
  max-width: 100%;
  margin-top: 0; /* Kein zusätzlicher Margin */
}
.colon {
  display: none;
}

oh und ich würde den text gerne nach links ausblenden, also das der text von oben eingeblendet wird, aber nach links ausblendet, ist das irgendwie möglich?

Answer 1

[Mauritan]

Wenn ich mir das irgendwie richtig vorstellen sollte, dann hilft, wenn Du die Werte in Prozent statt in Pixel setzt.