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?
