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
 */
#tplChat {
	#content {
		text-align: left;
		
		#timsChatTopic {
			padding: 5px;
			margin-bottom: @wcfGapSmall;
			.transition(height, .2s);
			.transition(padding-top, .2s);
			.transition(padding-bottom, .2s);
			
			&.empty {
				height: 0px;
				overflow: hidden;
				border: 0px;
				padding: 0px;
			}
		}
	}
	
	.timsChatMessageContainer {
		height: 200px;
		overflow-y: scroll;
		overflow-x: hidden;
		
		ul {
			display: table;
			width: 100%;
		
			.timsChatMessage {
				min-height: 16px;
				display: table-row;
				.transition(opacity, .2s);
				
				.username {
					font-weight: bold;
				}
				
				> {
					time, .usernameContainer, .text {
						display: table-cell;
						vertical-align: top;
					}
					
					time {
						&::before {
							content: "[";
						}
						&::after {
							content: "]";
						}
					}
					
					.usernameContainer {
						text-align: right;
						min-width: 100px;
						padding: 0px 5px;
						white-space: nowrap;
					}
					
					.text {
						width: 100%;
					}
				}
				
				&.unloaded {
					opacity: .5;
				}
				
				&::before {
					.icon;
					.icon16;
				}
				
				&:nth-child(even) {
					background-color: @wcfContainerAccentBackgroundColor;
				}
			}
		}
	}
	
	#timsChatLog .timsChatMessageContainer {
		height: auto;
		overflow: visible;
	}
	
	.sidebar {
		margin-bottom: -20px !important;
		padding: 0;
		
		#sidebarContent {
			padding-top: 0px;
			overflow: hidden;
			
			.timsChatSidebarTabs {
				height: 34px;
				z-index: 131;
				position: relative;
				.boxShadowNative(0 0 5px 0 rgba(0, 0, 0, 0.1));
				
				.left & {
					margin-right: 1px;
				}
				
				.right & {
					margin-left: 1px;
				}
				
				ul {
					height: 33px;
					
					li {
						width: 50%;
						float: left;
						text-align: center;
						
						a {
							color: fade(@wcfColor, 80%);
							.textShadow(@wcfContentBackgroundColor);
							height: 22px;
							padding: 9px 0 0;
							
							.transition(border-radius, .2s);
							.transition(background-color, .2s);
							.transition(font-size, .2s);
							
							
							.collapsed & {
								border: none !important;
							}
						}
						
						&.active a {
							background-color: @wcfContentBackgroundColor;
							border-bottom: 1px solid darken(@wcfSidebarBackgroundColor, 6%);
							.borderRadius(0, 7px);
							color: @wcfColor;
							font-size: 130%;
							font-weight: bold;
						}
						
						&:first-child.active a {
							.borderRadius(0, 0, 7px, 0);
							border-right: 1px solid darken(@wcfSidebarBackgroundColor, 6%);
							
							.right & {
								margin-left: -1px;
							}
						}
						
						&:last-child.active a {
							.borderRadius(0, 0, 0, 7px);
							border-left: 1px solid darken(@wcfSidebarBackgroundColor, 6%);
							
							.left & {
								margin-right: -1px;
							}
						}
						
						.badge {
							.badgeBG(@wcfSidebarBackgroundColor + rgba(0, 0, 0, 0.2));
							.badgeShadow(@wcfSidebarBackgroundColor + rgba(0, 0, 0, 0.2));
							position: relative;
							top: -1px;
							color: #fff;
						}
						
						&.active .badge {
							font-size: 65% !important;
							.badgeBG(@wcfContentBackgroundColor);
							.badgeShadow(@wcfContentBackgroundColor);
						}
					}
				}
			}
			
			#sidebarContainer {
				overflow-y: auto;
				height: 420px;
				width: 100%;
				border-top: 1px solid darken(@wcfSidebarBackgroundColor, 8%);
				z-index: 131;
				position: relative;
				
				a {
					outline: none;
					overflow: hidden;
				}
				
				ul:not(.dropdownMenu) {
					> li {
						margin-top: @wcfGapSmall;
						background-color: transparent !important;
						box-shadow: none !important;
						
						> a {
							background-color: fade(@wcfContentBackgroundColor, 33.33%);
							.textShadow(fade(@wcfContentBackgroundColor, 33.33%));
							.transition(background-color, .2s);
						}
						
						&.activeMenuItem, &.dropdownOpen, &:hover {
							> a {
								background-color: @wcfContentBackgroundColor !important;
								.boxShadowNative(0 0 5px rgba(0, 0, 0, 0.1));
							}
						}
					}
				}
				
				#timsChatRoomList {
					margin-top: @wcfGapSmall;
					
					> div {
						> div {
							text-align: center;
							margin-top: @wcfGapMedium;
						}
					}
				}
				
				#timsChatUserList {
					.timsChatUser {
						&.away {
							opacity: .5;
						}
						
						&.suspended a {
							text-decoration: line-through;
						}
					}
				}
			}
		}
		
		h2 {
			margin: auto;
		}
		
		ul {
			li {
				a {
					color: @wcfLinkColor;
					display: block;
					padding: 5px 25px 7px 35px;
				}
			}
		}
	}
	
	#timsChatForm {
		white-space: nowrap;
		margin-top: 10px;
		// Fix to align chatInput in center
		text-align: center;
		
		#timsChatInput {
			position: relative;
			z-index: 10;
		}
	}
	
	#timsChatControls {
		position: relative;
		.borderRadius(5px, 5px, 0, 5px);
		
		#smilies {
			padding: 14px 21px 7px;
			border-bottom-right-radius: 0px;
			
			li {
				.transition(opacity, .2s);
			}
			
			&.disabled {
				li {
					opacity: .5;
				}
			}
		}
	}
	
	@media only screen and (min-width: 641px) {
		#timsChatOptions {
			top: -1px;
			right: 1px;
			margin-left: 0;
			position: relative;
			width: 100%;
			
			> ul {
				.smallButtons;
				margin-right: -1px;
				text-align: right;
				
				> li {
					> a {
						.button;
						.borderRadius(0);
						margin: 0;
						padding-right: 7px;
					}
					
					display: inline-block;
					margin-left: -5px;
				}
				
				> li:first-child {
					> a {
						border-bottom-left-radius: 14px;
					}
				}
				
				> li:last-child {
					> a {
						border-bottom-right-radius: 14px;
					}
				}
			}
		}
	}
	
	@media only screen and (max-width: 640px) {
		#timsChatMessageContainer {
			overflow: auto;
			
			.timsChatMessage {
				> time {
					display: none !important;
				}
				
				> .usernameContainer {
					min-width: 0px !important;
				}
			}
		}
		
		#timsChatOptions {
			margin-top: 5px;
			position: relative;
			
			&:hover > ul {
				display: block;
			}
			
			> .invisible {
				.button;
				margin-left: @wcfGapSmall;
				padding-left: 28px;
				
				&:before {
					content: "\f03a";
					font-family: FontAwesome;
					font-size: 14px;
					left: 9px;
					position: absolute;
					top: 6px;
				}
			}
			
			> ul {
				.dropdown .dropdownMenu;
				font-size: 120%;
				left: @wcfGapSmall;
				
				> li.active {
					> ul.invisible {
						display: block;
						font-size: 85%;
						padding-left: 14px;
					}
					
					> a {
						position: relative;
						
						&:after {
							content: "\f00c";
							font-family: FontAwesome;
							font-size: 14px;
							position: absolute;
							right: 7px;
						}
					}
				}
			}
		}
	}
	
	#toggleRooms .ajaxLoad {
		position: absolute;
		right: 5px;
		top: 3px;
		display: none;
	}
	
	#timsChatCopyright {
		.textShadow(@wcfContentBackgroundColor);
	}
	
	#timsChatCopyrightDialog > div {
		background-position: right center;
		background-repeat: no-repeat;
		min-height: 150px;
	}
	
	.badgeBG(@backgroundColor) when (lightness(@backgroundColor) < 50%) {
		background-color: lighten(@backgroundColor, lightness(@backgroundColor) / 2);
	}
	
	.badgeBG(@backgroundColor) when (lightness(@backgroundColor) < 20%) {
		background-color: lighten(@backgroundColor, 20%);
	}
	
	.badgeBG(@backgroundColor) when (lightness(@backgroundColor) >= 50%) {
		background-color: darken(@backgroundColor, lightness(@backgroundColor) / 2);
	}
}

html.fullscreen {
	#top {
		height: 0px;
	}
	
	height: 100%;
	overflow: hidden;
	
	#content {
		height: 100%;
		
		> div {
			width: 100%;
			height: 100%;

			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;
			}

			#timsChatControls {
				margin-bottom: 15px;
			}
		}
	}
	
	#tplChat, #tplChatLog {
		height: 100%;
		overflow: hidden;
		
		#pageHeader, #pageFooter {
			display: none;
		}
		
		#main {
			height: 100%;
			margin: 0;
			padding: 0;
			
			> div, .sidebar, #sidebarContainer {
				height: 100%;
			}
		}
	}
}