discourse/plugins/chat/assets/stylesheets/common/chat-onebox.scss
Joffrey JAFFEUX cbb9396353
REFACTOR: <ChatMessage> component (#22172)
- Moves `<ChatMessageInfo />` to `<Chat::Message::Info />`
- Moves `<ChatMessageAvatar />` to `<Chat::Message::Avatar />`
- Moves `<ChatMessageLeftGutter />` to `<Chat::Message::LeftGutter />`, adds tests
- Creates `<Chat::Message::Error />`
- Creates `<Chat::Message::MentionWarning />`, adds tests and a styleguide
- Creates a model for ChatMessageMentionWarning, adds fabricator for it
- Keeps the enter/leave viewport logic inside the `<ChatMessage />` component instead of bubbling it to the channel and thread components
- Adds a scale animation when clicking a reaction
- Creates `chat/later-fn` modifier which accepts a function and a delay. It allows to call a function Xms after a component has been inserted, it's useful for animations.
- Moves css code out of chat-message into relevant files
- Deletes unused code

<!-- NOTE: All pull requests should have tests (rspec in Ruby, qunit in JavaScript). If your code does not include test coverage, please include an explanation of why it was omitted. -->
2023-06-19 09:50:54 +02:00

78 lines
1.2 KiB
SCSS

.chat-onebox {
.chat-onebox-body {
.chat-onebox-title {
margin-bottom: 3px;
}
.chat-onebox-description {
color: var(--primary-medium);
}
.chat-onebox-members-count {
color: var(--primary-medium);
margin-top: 1em;
margin-bottom: 3px;
}
.chat-onebox-members {
align-items: center;
color: var(--primary-medium);
display: flex;
flex-wrap: wrap;
.avatar {
aspect-ratio: 30 / 30;
margin-right: 0.25rem;
}
}
}
}
.chat-drawer-container .chat-message .onebox {
width: 85%;
border: 2px solid var(--primary-low);
header {
margin-bottom: 0.5em;
}
.onebox-body {
grid-template-rows: auto auto auto;
overflow: auto;
}
h3 {
@include line-clamp(2);
font-weight: 500;
font-size: var(--font-down-1);
}
p {
display: none;
}
}
.has-full-page-chat .chat-message .onebox:not(img),
.chat-drawer-container .chat-message .onebox {
margin: 0.5em 0;
border-width: 2px;
header {
margin-bottom: 0.5em;
}
h3 a,
h4 a {
font-size: 14px;
}
pre {
display: flex;
max-height: 150px;
}
p {
overflow: hidden;
}
}