Ich habe ein paar einfache Anpassungen an der Chat-Seite vorgenommen, um das Design zu verbessern und sie flüssiger zu gestalten. Hier ist eine Zusammenfassung der Änderungen, die ich vorgenommen habe:
- Tipp-Indikator verschoben:
Ich habe den Tipp-Indikator neu positioniert, sodass er jetzt über dem Textfeld angezeigt wird und nicht darunter. Das fühlt sich einfach natürlicher an und ist leichter zu bemerken, wenn jemand tippt. - Schriftgröße des Tipp-Indikators erhöht:
Ich habe die Schriftgröße des Tipp-Indikators etwas vergrößert. Er ist jetzt besser sichtbar und sticht etwas mehr hervor, sodass er auf einen Blick leichter zu lesen ist. - Bilder aufgeräumt:
Ich habe den Dokumentnamen/URL entfernt, der die Bilder umgab, und ihnen einen kleinen abgerundeten Rand hinzugefügt. Das verleiht den Bildern ein saubereres, polierteres Aussehen und entfernt unnötige Unordnung. - Tipp-Indikator dynamischer gestaltet:
Ich habe dem Tipp-Indikator einen kleinen dynamischen Effekt hinzugefügt. Wenn er jetzt erscheint, gleiten die Nachrichten leicht nach oben, um Platz zu schaffen, und wenn der Indikator verschwindet, gleiten die Nachrichten wieder nach unten. Dieser sanfte Übergang lässt das gesamte Erlebnis flüssiger und interaktiver wirken.
Das sind nur kleine Design-Anpassungen. Für mich sieht es sauberer aus, fühlt sich flüssiger an und ist insgesamt polierter. Lass mich wissen, was du denkst, und schlag gerne weitere Änderungen oder Verbesserungen vor!
Hier ist der Code:
// Tipp-Indikator
/* Platz unter dem Antwort-Indikator hinzufügen */
.chat-replying-indicator-container {
order: -1; /* Verschiebt den Antwort-Indikator über den Textbereich */
}
.chat-composer__outer-container {
display: flex
;
align-items: center;
box-sizing: border-box;
width: 100%;
padding-inline: 0rem;
padding-bottom: 1rem;
}
.chat-message-collapser .chat-message-collapser-header {
display: none;
align-items: center;
}
.chat-message .onebox img:not(.ytp-thumbnail-image, .onebox-avatar-inline),
.chat-message img.onebox,
.chat-message .chat-uploads img,
.chat-message p img,
.chat-message aside.onebox .onebox-body .aspect-image-full-size,
.chat-message aside.onebox .onebox-body .aspect-image-full-size img,
.chat-message .chat-message-text p img:not(.emoji) {
object-fit: cover; /* Den Container abdecken, um den abgerundeten Rand beizubehalten */
max-height: 300px;
max-width: 90%;
width: unset;
overflow: hidden;
border-radius: 20px; /* Abgerundete Ecken */
}
.chat-replying-indicator {
color: var(--primary-medium);
display: inline-flex;
font-size: 1em;
padding-bottom:10px;
}
.chat-replying-indicator-container {
margin-bottom: 10px; /* Den Wert nach Bedarf anpassen */
margin-top: -20px;
}
.chat-replying-indicator-container {
margin-top: -30px; /* Standardposition, wenn nicht getippt wird */
transition: margin-top 0.3s ease; /* Sanfter Übergang */
}
.chat-replying-indicator-container:has(.chat-replying-indicator__text) {
margin-top: 0px; /* Position beim Tippen */
}
PS: Das ist speziell für Mobilgeräte.
So sieht es jetzt aus:
