mastodon/app/javascript/styles/bliss/messaging.scss

85 lines
1.4 KiB
SCSS
Raw Normal View History

$messagingBoxWidth: 15em;
$messagingBoxHeight: 20em;
.fixed-box {
2019-12-13 17:19:37 +01:00
border: solid 1px white;
padding: 1em;
position: fixed;
bottom: 0;
}
.messaging-box {
@extend .fixed-box;
2019-12-13 17:19:37 +01:00
right: 1em;
width: $messagingBoxWidth;
background: $ui-base-color;
}
.conversations_list {
@extend .fixed-box;
width: $messagingBoxWidth;
right: $messagingBoxWidth + 5em;
background: $ui-secondary-color;
}
.conversation-item {
&.has-new-message {
background: $ui-highlight-color;
color: $classic-primary-color;
}
}
.conversation_created-at {
margin-right: 1em;
}
.conversation_stream {
padding-top: 1em;
height: $messagingBoxHeight;
overflow: auto;
background: $ui-secondary-color;
.message {
-webkit-border-radius: 0.5rem;
-moz-border-radius: 0.5rem;
border-radius: 0.5rem;
margin-bottom: 0.5em;
padding: 0.5em 1em;
width: 80%;
}
.mine {
text-align: right;
background: $classic-primary-color;
float: right;
.arrow-down {
border-top-color: $classic-primary-color;
left: 1em;
}
}
.theirs {
text-align: left;
background: $ui-highlight-color;
float: left;
.arrow-down {
border-top-color: $ui-highlight-color;
right: 1em;
}
}
.arrow-down {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid $classic-primary-color;
position: relative;
bottom: -1em;
}
2019-12-13 17:19:37 +01:00
}