139 lines
2.6 KiB
SCSS
139 lines
2.6 KiB
SCSS
@import "theme.scss";
|
|
|
|
$scrollbarBottom: 4px;
|
|
$borderRadius: 8px;
|
|
|
|
#channel-content {
|
|
flex: 1;
|
|
display: flex;
|
|
}
|
|
|
|
#channel-feed-wrapper {
|
|
flex: 1;
|
|
width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#channel-feed-content-wrapper {
|
|
/* https://stackoverflow.com/q/18614301 */
|
|
/* to keep the scrollbar at the bottom by default */
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
padding-bottom: calc(16px + 8px);
|
|
margin-bottom: calc(65px - $scrollbarBottom - $borderRadius);
|
|
height: calc(100vh - 71px - 65px + 4px + 8px); /* TODO: Going to have to find a way to do this without a fixed height since the message box needs to be scalable */
|
|
overflow-y: scroll;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
#channel-feed {
|
|
|
|
.date-spacer {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 16px;
|
|
padding-right: 16px;
|
|
|
|
.line {
|
|
flex: 1;
|
|
height: 1;
|
|
background-color: $background-modifier-accent;
|
|
}
|
|
|
|
.date {
|
|
font-size: 12px;
|
|
line-height: 13px;
|
|
font-weight: 600;
|
|
color: $text-muted;
|
|
padding: 2px 4px;
|
|
margin: 0 8px;
|
|
}
|
|
}
|
|
|
|
.message:hover {
|
|
background-color: $background-message-hover;
|
|
}
|
|
}
|
|
|
|
#channel-feed-input-wrapper {
|
|
position: relative;
|
|
height: 0;
|
|
}
|
|
|
|
#channel-feed-input {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
box-sizing: border-box;
|
|
padding-bottom: 16px;
|
|
margin: 0 16px;
|
|
width: calc(100% - 32px);
|
|
display: flex;
|
|
flex-flow: column-reverse;
|
|
background-color: $background-primary;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
#error-bar {
|
|
position: relative;
|
|
height: 0;
|
|
}
|
|
|
|
#send-error:not(:empty) {
|
|
cursor: pointer;
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
margin-bottom: 8px;
|
|
padding: 8px;
|
|
border-radius: 8px;
|
|
line-height: 1;
|
|
border: 1px solid $error;
|
|
background-color: $background-secondary;
|
|
color: $header-primary;
|
|
}
|
|
|
|
#input-bar {
|
|
font-family: Whitney;
|
|
background-color: $channeltextarea-background;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
#resource-input-button {
|
|
color: $text-normal;
|
|
cursor: pointer;
|
|
margin: 10px;
|
|
|
|
|
|
svg {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
}
|
|
|
|
#text-input {
|
|
flex: 1;
|
|
padding: 12px 12px 12px 0;
|
|
color: $text-normal;
|
|
overflow-wrap: anywhere;
|
|
overflow-y: scroll;
|
|
max-height: 300px;
|
|
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
|
|
&.sending {
|
|
color: $text-sending;
|
|
}
|
|
|
|
&::before {
|
|
color: $text-muted;
|
|
}
|
|
}
|