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

108 lines
2.1 KiB
SCSS
Raw Normal View History

2020-05-07 13:10:53 +00:00
.chat-view {
display: flex;
height: 100%;
2020-05-07 13:10:53 +00:00
.chat-view-inner {
height: auto;
width: 100%;
overflow: visible;
display: flex;
}
.chat-view-body {
2022-04-12 14:03:29 +00:00
box-sizing: border-box;
2020-05-07 13:10:53 +00:00
background-color: var(--chatBg, $fallback--bg);
display: flex;
flex-direction: column;
width: 100%;
overflow: visible;
2022-04-12 14:03:29 +00:00
min-height: calc(100vh - var(--navbar-height));
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-11 20:30:41 +00:00
z-index: 1;
2020-05-07 13:10:53 +00:00
}
.chat-view-heading {
2022-04-20 21:39:54 +00:00
grid-template-columns: auto minmax(50%, 1fr);
2020-05-07 13:10:53 +00:00
}
.go-back-button {
text-align: center;
2022-04-20 20:22:51 +00:00
line-height: 1;
2022-04-12 14:17:52 +00:00
height: 100%;
2022-04-20 17:16:41 +00:00
align-self: start;
width: var(--__panel-heading-height-inner);
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%;
}
}
}
}