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; 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 { #tplChat {
#main > div { #main > div {
overflow: hidden; overflow: hidden;
@ -77,14 +89,8 @@
opacity: .5; opacity: .5;
} }
&::before {
.icon;
.icon16;
padding: @wcfGapTiny;
}
&:nth-child(even) { &:nth-child(even) {
> .innerMessageContainer.bubble .innerMessage { > .innerMessageContainer.bubble .innerMessage, .innerMessageContainer.right.bubble .innerMessage {
background-color: @wcfContainerAccentBackgroundColor; background-color: @wcfContainerAccentBackgroundColor;
&:after { &: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 { > .innerMessageContainer {
padding: 5px 20px 5px 5px; padding: 5px 20px 5px 5px;
position: relative; position: relative;
@ -121,6 +143,10 @@
&.bubble { &.bubble {
.userAvatar { .userAvatar {
margin-left: 0; margin-left: 0;
.icon {
padding: 2px;
}
} }
.innerMessage { .innerMessage {
@ -151,27 +177,51 @@
} }
&:before { &:before {
border-color: transparent @wcfContainerBorderColor; .__bubbleArrow;
border-style: solid;
border-width: 6px 6px 6px 0;
content: "";
display: block;
left: -6px;
position: absolute;
top: 5px;
width: 0;
} }
&:after { &:after {
border-color: transparent @wcfContainerBackgroundColor;; .__bubbleArrow;
border-style: solid; border-color: transparent @wcfContainerBackgroundColor;
border-width: 5px 5px 5px 0;
content: "";
display: block;
left: -5px; left: -5px;
position: absolute;
top: 6px; 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;
}
} }
} }
} }