akkoma-fe/src/components/chat/chat.scss

115 lines
2.3 KiB
SCSS
Raw Normal View History

2020-05-07 13:10:53 +00:00
.chat-view {
display: flex;
height: 100%;
// Stick the form to the top/bottom of screen
margin-bottom: calc(var(--___columnMargin) / -2);
margin-top: calc(var(--___columnMargin) / -2);
2020-05-07 13:10:53 +00:00
.chat-view-inner {
height: auto;
width: 100%;
overflow: visible;
display: flex;
}
.chat-view-body {
background-color: var(--chatBg, $fallback--bg);
display: flex;
flex-direction: column;
width: 100%;
overflow: visible;
min-height: 100%;
margin: 0 0 0 0;
2020-05-07 13:10:53 +00:00
border-radius: 10px 10px 0 0;
border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0;
2020-05-07 13:10:53 +00:00
&::after {
border-radius: 0;
2020-05-07 13:10:53 +00:00
}
}
.message-list {
padding: 0 0.8em;
2020-05-07 13:10:53 +00:00
height: 100%;
display: flex;
flex-direction: column;
}
.footer {
position: sticky;
bottom: 0;
background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg);
2022-04-05 10:19:12 +00:00
z-index: 10;
2020-05-07 13:10:53 +00:00
}
.chat-view-heading {
align-items: center;
justify-content: space-between;
display: flex;
z-index: 2;
position: sticky;
overflow: hidden;
}
.go-back-button {
cursor: pointer;
width: 28px;
text-align: center;
padding: 0.6em;
margin: -0.6em 0.6em -0.6em -0.6em;
2020-05-07 13:10:53 +00:00
}
.jump-to-bottom-button {
width: 2.5em;
height: 2.5em;
border-radius: 100%;
position: absolute;
right: 1.3em;
top: -3.2em;
background-color: $fallback--fg;
background-color: var(--btn, $fallback--fg);
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.3);
2020-05-07 13:10:53 +00:00
z-index: 10;
transition: 0.35s all;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
opacity: 0;
visibility: hidden;
cursor: pointer;
&.visible {
opacity: 1;
visibility: visible;
}
i {
font-size: 1em;
color: $fallback--text;
color: var(--text, $fallback--text);
}
.unread-message-count {
font-size: 0.8em;
left: 50%;
margin-top: -1rem;
2021-02-26 09:00:21 +00:00
padding: 0.1em;
border-radius: 50px;
position: absolute;
2020-05-07 13:10:53 +00:00
}
.chat-loading-error {
width: 100%;
display: flex;
align-items: flex-end;
height: 100%;
.error {
width: 100%;
}
}
}
}