Bastelstube/Tims-Chat
1
0
Fork 0
mirror of https://github.com/wbbaddons/Tims-Chat.git synced 2024-10-31 14:10:08 +00:00
Code Issues Releases Wiki Activity

Add styles for aligning message bubbles on the right

Browse Source
This commit is contained in:
Maximilian Mader 2013-06-24 17:41:52 +02:00
parent 871440d783
commit c3dd2c899b
1 changed files with 74 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
file/style/be.bastelstu.wcf.chat.less
View File

@ -15,7 +15,19 @@
border-color: @wcfInputHoverBorderColor;
}
}
.__bubbleArrow {
border-color: transparent @wcfContainerBorderColor;
left: -6px;
top: 5px;
border-width: 6px 6px 6px 0;
border-style: solid;
content: "";
display: block;
position: absolute;
width: 0;
}
#tplChat {
#main > div {
overflow: hidden;
@ -77,14 +89,8 @@
opacity: .5;
}
&::before {
.icon;
.icon16;
padding: @wcfGapTiny;
}
&:nth-child(even) {
> .innerMessageContainer.bubble .innerMessage {
> .innerMessageContainer.bubble .innerMessage, .innerMessageContainer.right.bubble .innerMessage {
background-color: @wcfContainerAccentBackgroundColor;
&:after {
@ -93,6 +99,22 @@
}
}
&::before {
.icon;
.icon16;
padding: 8px 0 0 4px;
height: 16px;
width: 16px;
margin-right: -16px;
float: left;
}
.messageIcon {
float: left;
padding: 8px 0 0 4px;
margin-right: -16px;
}
> .innerMessageContainer {
padding: 5px 20px 5px 5px;
position: relative;
@ -121,6 +143,10 @@
&.bubble {
.userAvatar {
margin-left: 0;
.icon {
padding: 2px;
}
}
.innerMessage {
@ -151,27 +177,51 @@
}
&:before {
border-color: transparent @wcfContainerBorderColor;
border-style: solid;
border-width: 6px 6px 6px 0;
content: "";
display: block;
left: -6px;
position: absolute;
top: 5px;
width: 0;
.__bubbleArrow;
}
&:after {
border-color: transparent @wcfContainerBackgroundColor;;
border-style: solid;
border-width: 5px 5px 5px 0;
content: "";
display: block;
.__bubbleArrow;
border-color: transparent @wcfContainerBackgroundColor;
left: -5px;
position: absolute;
top: 6px;
width: 0;
border-width: 5px 5px 5px 0;
}
}
&.right {
.userAvatar {
float: right;
}
.innerMessage {
margin-right: 46px;
margin-left: 0px;
&:before {
.__bubbleArrow;
left: auto;
right: -6px;
border-width: 6px 0 6px 6px;
}
&:after {
.__bubbleArrow;
border-color: transparent @wcfContainerBackgroundColor;
left: auto;
right: -5px;
top: 6px;
border-width: 5px 0 5px 5px;
}
time {
float: left;
margin-right: @wcfGapTiny;
}
.username {
float: right;
}
}
}
}