mastodon/app/javascript/styles/mastodon/messaging/messaging-conversation.scss

142 lines
2.7 KiB
SCSS

$textareaHeight : 60px;
$conversationMargin: 1em;
$conversationWidth: 20em;
.main-instant-messaging {
.conversation {
.conversation__content {
padding-right: 0;
}
.conversation_reply,
.icon-button {
&:hover {
color: $ui-highlight-color;
background: mix($ui-base-color, $ui-secondary-color);
}
}
.conversation_reply,
.icon-button,
.status__action-bar-dropdown {
display: inline-block;
float: right;
width: 18em;
height: 3.2em;
text-align: center;
}
}
.conversations_list {
@extend .fixed-box;
right: $messagingBoxWidth + 2em;
bottom: 0;
width: 50%;
padding: 0.5em;
overflow-x: auto;
border: 0;
z-index: 2;
}
/**
block containing one stream, in line at the bottom of the screen
*/
.conversation-item {
float: right;
width: $conversationWidth;
margin-left: $conversationMargin;
border-radius: 15px;
border: 3px solid white;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
background: $classic-primary-color;
&.has-new-message {
background: $ui-highlight-color;
color: $classic-primary-color;
}
&.is-focused {
border-color: $ui-base-color;
}
&.reduced{
}
.top-title {
padding: 1em;
background: $classic-base-color;
border-top-left-radius: 1em;
border-top-right-radius: 1em;
button, .btn{
background: transparent;
color: white;
float:right;
border: 0;
}
}
.body{
height: 17.7em;
&.reduced{
display:none;
}
}
.username {
font-weight: bold;
}
.conversation-stream{
width: $conversationWidth - 2em;
}
.conversation-stream,
.conversation_input {
height: 100%;
display: block;
}
&.hidden {
.conversation-stream,
.conversation_input {
display: none;
}
}
.messager-send {
background: #282c37;
color: white;
float: right;
padding: 0 1em;
margin-left: 1em;
border: 0;
margin-top: -$textareaHeight;
height:$textareaHeight;
width: 3em;
}
.messager-textarea{
box-sizing: border-box;
padding: 1rem;
padding-right: 4em;
background: $ui-base-color;
color: white;
border: 0;
width: 100%;
display: block;
height: $textareaHeight;
overflow: auto;
}
button[type=submit]{
background: $classic-base-color;
color: white;
padding: 0.5rem;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 0;
}
}
}