rDrama/chat/src/features/chat/ChatMessage.css

71 lines
1.0 KiB
CSS
Raw Normal View History

[DO NOT MERGE] Chat restructure (#360) * Create new subdirectory for chat-related stuff * Gitignore * Have new code show up on chat * Have new code show up on chat * Fix config issue * More script stuff * Create UserInput components * More chat changes * More updates to chat * Add chat:watch script * Move up state and pass down * Match up existing functionality entirely * Match up existing functionality entirely * Send a message when hitting Enter * feature based directories * First crack at emoji drawer * Leave everything in a fucked up state ugh * Leave it in a better state * Stop for the night * Decouple by abstract chat functionality to provider * Wait a minute... * Small chat restructure * Prepare for notifications * Add root context * Flash number of messages * Read this and u die * Add quote functionality * Couple tweaks * Shallowenize the features dir/ * Add activity list * Ch-ch-ch-ch-ch-changes * Enable moving drawer * Hover style on activities * UserList changes * Add emoji processing logic * Duhhhh * Scroll to top when changing query * Put the emoji in the drawer * Improve emoji drawer * Add emoji genres * Do not show activities * Add feature flag technology * Fix issue where own messages were triggering notifications * Adjust startup scripts * Responsive part 1 * Styling changes for emoji genres * More emoji drawer styling * Add QuickEmojis * Re-add classnames * Set version * Modify build script * Modify build script * Mild renaming * Lots of styling changes * Leggo.
2022-09-24 03:49:40 +00:00
@keyframes fading-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.ChatMessage {
padding: 0.5rem;
padding-right: 3rem;
position: relative;
animation: fading-in 0.3s ease-in-out forwards;
}
.ChatMessage:nth-of-type(even) {
background: rgba(255, 255, 255, 0.02);
}
.ChatMessage-top {
display: flex;
align-items: center;
}
.ChatMessage-timestamp {
margin-left: 0.5rem;
}
.ChatMessage-bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 30px;
}
.ChatMessage-content {
margin-right: 0.5rem;
word-break: break-all;
display: inline-block;
}
.ChatMessage-button {
background: transparent !important;
}
.ChatMessage-delete {
position: absolute;
top: 4px;
right: 4px;
}
.ChatMessageList {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
-ms-overflow-style: none;
scrollbar-width: none;
}
.ChatMessageList::-webkit-scrollbar {
display: none;
}
lite-youtube {
min-width: min(80vw, 500px);
}