Tims-Chat/file/style/be.bastelstu.wcf.chat.less

/**
 * Styles for Tims Chat
 * 
 * @author	Tim Düsterhus, Maximilian Mader
 * @copyright	2010-2013 Tim Düsterhus
 * @license	Creative Commons Attribution-NonCommercial-ShareAlike <http://creativecommons.org/licenses/by-nc-sa/3.0/legalcode>
 * @package	be.bastelstu.wcf.chat
 */
@keyframes timsChatNotify {
	from {
		border-color: @wcfContainerBorderColor;
	}

	to {
		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;
		position: relative;
	}
	
	#timsChatTopic {
		padding: @wcfGapTiny;
		.transition(height, .2s);
		.transition(padding-top, .2s);
		.transition(padding-bottom, .2s);
		
		&.empty, &.hidden {
			height: 0px;
			overflow: hidden;
			border: 0px;
			padding: 0px;
			margin: 0px;
			
			~ #timsChatMessageContainer {
				margin-top: 0;
			}
		}
		
		.jsTopicCloser {
			cursor: pointer;
			float: right;
		}
	}
	
	#privateChannelsMenu {
		.transition(opacity, .2s);
		.marginTop;
		z-index: -1;
		position: absolute;
		opacity: 0;
		
		&.shown {
			opacity: 1;
			z-index: 130;

			~ .timsChatMessageContainer {
				margin-left: 35px;
				border-top-left-radius: 0;
			}
		}

		> ul {
			text-align: right;
			
			> li:first-child {
				> .userAvatar.framed {
					 img, > canvas, > .icon {
						border-radius: @wcfContainerBorderRadius 0 0 0;
					}
				}
			}

			> li:last-child {
				> .userAvatar.framed {
					 img, > canvas, > .icon {
						border-radius: 0 0 0 @wcfContainerBorderRadius;
					}
				}
			}

			> li {
				margin-bottom: -1px;
				background-color: @wcfContainerBackgroundColor;
				
				> .userAvatar, .userAvatar > .icon {
					cursor: pointer;
				}

				> .userAvatar {
					&.large {
						display: none;
					}
					
					&.small {
						display: block;
					}
					
					&.framed {
						> .icon {
							background-color: @wcfContentBackgroundColor;
							border: 1px solid @wcfContainerBorderColor;
							padding: 1px;
						}
					}
				}

				&.active {
					> .userAvatar {
						&.large {
							display: block;
						}
						
						&.small {
							display: none;
						}
						
						&.framed {
							> img, > canvas, > .icon {
								border-right-color: @wcfContentBackgroundColor;
								
								border-radius: @wcfContainerBorderRadius 0 0 @wcfContainerBorderRadius;
							}
						}
					}
				}
				
				&.notify {
					> .userAvatar {
						> * {
							// TODO
							opacity: .4;
						}
					}
				}
			}
		}
	}
	
	.timsChatMessageContainer {
		height: 320px;
		overflow-y: scroll;
		overflow-x: hidden;
		display: none;
		
		&.active {
			display: block;
		}
		
		&.markEnabled {
			ul {
				.timsChatMessage {
					&.jsMarked {
						background-color: @wcfSelectedBackgroundColor;
						color: @wcfSelectedColor;
					}
					
					> .innerMessageContainer {
						.markContainer {
							display: block;
						}
					}
				}
			}
		}
		
		ul {
			display: table;
			width: 100%;
			
			.timsChatMessage {
				display: table-row;
				height: 20px;
				.transition(opacity, .2s);
				
				&.unloaded {
					opacity: .5;
				}
				
				&:nth-child(even) {
					> .innerMessageContainer.bubble .innerMessage, .innerMessageContainer.right.bubble .innerMessage {
						background-color: @wcfContainerAccentBackgroundColor;
						
						&:after {
							border-color: transparent @wcfContainerAccentBackgroundColor;
						}
					}
				}
				
				.messageIcon {
					float: left;
					padding: 8px 0 0 4px;
					margin-right: -16px;
				}
				
				> .innerMessageContainer {
					padding: 5px 20px 5px 5px;
					position: relative;
					
					.userAvatar {
						float: left;
						margin-left: 16px;
					}
					
					.innerMessage {
						margin-left: 46px;
						padding: 2px 5px 5px;
						
						time {
							float: right;
						}
						
						> .text {
							img {
								max-width: 480px;
								max-height: 320px;
							}
						}
					}
					
					&.bubble {
						.userAvatar {
							margin-left: 0;
							
							.icon {
								padding: 2px;
							}
						}
						
						.innerMessage {
							border-width: 1px;
							border-style: solid;
							border-color: @wcfContainerBorderColor;
							border-radius: @wcfContainerBorderRadius;
							background-color: @wcfContainerBackgroundColor;
							position: relative;
									
							.username {
								font-weight: bold;
							}
							
							> ul.text {
								li {
									.clearfix;
									border-style: solid;
									border-width: 0 0 1px 0;
									border-color: @wcfContainerBorderColor;
									padding: 3px 0 4px;
									
									&:last-child {
										border-style: none;
										padding: 3px 0 0 0;
									}
								}
							}
							
							&:before {
								.__bubbleArrow;
							}
							
							&:after {
								.__bubbleArrow;
								border-color: transparent @wcfContainerBackgroundColor;
								left: -5px;
								top: 6px;
								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;
								}
							}
						}
					}
					
					> .markContainer {
						display: none;
						position: absolute;
						right: 0px;
						top: 6px;
					}
				}
			}
		}
	}
	
	.sidebar {
		padding-top: 0px !important;
		
		> div {
			height: 400px;
			overflow: auto !important;
			> .chatTabMenuContainer {
				padding: 14px 0 21px;
				
				> .chatSidebarMenu {
					background: @wcfContentBackgroundColor;
					margin: -14px 0 0;
					border-radius: 0px;
				}
			}
		}
		
		#sidebarContent {
			fieldset {
				padding-top: 0px;
				padding-bottom: 0px;
			}
			
			nav {
				ul {
					> li {
						> a {
							padding: @wcfGapTiny @wcfGapMedium @wcfGapTiny @wcfGapLarge;
							height: 24px; // height of avatar image
						}
						
						> a:before {
							display: inline-block;
							content: "";
							height: 100%;
							vertical-align: middle;
						}
						
						> &.active {
							margin-top: @wcfGapSmall;
						}
					}
				}
			}
			
			ul:not(.dropdownMenu) {
				> li {
					margin-top: @wcfGapSmall;
				}
			}
			
			#timsChatUserList {
				.timsChatUser {
					> a {
						background: @wcfContentBackgroundColor;
						
						img {
							margin-right: @wcfGapSmall;
						}
					}
					
					&.away {
						opacity: .5;
					}
					
					&.suspended a {
						text-decoration: line-through;
					}
				}
			}
		}
	}
	
	#timsChatRoomList {
		> div {
			> div {
				margin-top: @wcfGapMedium;
				text-align: center;
			}
		}
	}
	
	#smilies {
		li {
			.transition(opacity, .2s);
		}
		
		&.disabled {
			li {
				opacity: .5;
			}
		}
		
		margin-top: @wcfGapMedium;
	}
	
	@media only screen and (max-width: 800px) {
		#timsChatMessageContainer {
			overflow: auto;
			
			.timsChatMessage {
				> time {
					display: none !important;
				}
				
				> .usernameContainer {
					min-width: 0px !important;
				}
			}
		}
	}
	
	#timsChatOptions {
		> ul {
			text-align: right;
		}
	}
	
	#toggleRooms .ajaxLoad {
		position: absolute;
		right: 10px;
		top: 7px;
		display: none;
	}
	
	#timsChatCopyright {
		.textShadow(@wcfContentBackgroundColor);
	}
	
	#timsChatCopyrightDialog > div {
		background-position: right center;
		background-repeat: no-repeat;
		min-height: 150px;
	}
	
	.notification {
		animation-duration: .2s;
		animation-name: timsChatNotify;
		animation-iteration-count: 5;
		animation-direction: alternate;
		animation-timing-function: linear;
		border-color: @wcfInputHoverBorderColor;
	}
}

html.fullscreen {
	#top {
		height: 0px;
	}
	
	height: 100%;
	overflow: hidden;
	
	#content {
		height: 100%;
		
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		
		display: -moz-box;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		
		-webkit-box-orient: vertical;
		-moz-box-orient: vertical;
		-webkit-box-direction: normal;
		-moz-box-direction: normal;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		
		.timsChatMessageContainer {
			-webkit-box-flex: 1;
			-moz-box-flex: 1;
			-webkit-flex: 1 0 auto;
			-ms-flex: 1 0 auto;
			flex: 1 0 auto;
		}
	}
	
	#timsChatOptions {
		margin-bottom: @wcfGapMedium;
	}
	
	#tplChat {
		height: 100%;
		overflow: hidden;
		
		#pageHeader, #pageFooter {
			display: none;
		}
		
		#main {
			height: 100%;
			margin: 0;
			padding: 0;
			
			> div, .sidebar, #sidebarContainer {
				height: 100%;
			}
		}
	}
}