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;
	}
}
 
#tplChat {
	#main > div {
		overflow: hidden;
		position: relative;
	}
	
	#timsChatTopic {
		padding: @wcfGapTiny;
		.transition(height, .2s);
		.transition(padding-top, .2s);
		.transition(padding-bottom, .2s);
		
		&.empty {
			height: 0px;
			overflow: hidden;
			border: 0px;
			padding: 0px;
			margin: 0px;
		}
	}
	
	.timsChatMessageContainer {
		height: 200px;
		overflow-y: scroll;
		overflow-x: hidden;
		display: none;
		
		&.active {
			display: block;
		}
		
		&.markEnabled {
			ul {
				.timsChatMessage {
					&.jsMarked {
						background-color: @wcfSelectedBackgroundColor;
						color: @wcfSelectedColor;
					}
					
					> {
						.markContainer {
							display: table-cell;
						}
					}
				}
			}
		}
		
		ul {
			display: table;
			width: 100%;
			
			.timsChatMessage {
				display: table-row;
				height: 20px;
				.transition(opacity, .2s);
				
				&.unloaded {
					opacity: .5;
				}
				
				&::before {
					.icon;
					.icon16;
					padding: @wcfGapTiny;
				}
				
				&:nth-child(even) {
					background-color: @wcfContainerAccentBackgroundColor;
				}
				
				> {
					time, .usernameContainer, .text, .markContainer {
						display: table-cell;
						vertical-align: top;
						padding: @wcfGapTiny 0;
					}
					
					.markContainer {
						display: none;
						padding: 0;
					}
					
					time {
						&::before {
							content: "[";
						}
						&::after {
							content: "]";
						}
					}
					
					.usernameContainer {
						text-align: right;
						min-width: 100px;
						padding-right: @wcfGapSmall;
						white-space: nowrap;
						font-weight: bold;
					}
					
					.text {
						width: 100%;
					}
				}
			}
		}
	}
	
	.sidebar {
		overflow: auto;
		position: absolute !important;
		right: 0;
		height: 100%;
		
		padding-top: 0px !important;
		
		> div {
			> .chatTabMenuContainer {
				padding: 14px 0 21px;
				
				> .chatSidebarMenu {
					background: @wcfContentBackgroundColor;
					margin: -14px 0 0;
					.borderRadius(0);
				}
			}
		}
		
		#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%;
			}
		}
	}
}