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

/**
 * Styles for Tim’s Chat
 *
 * @author	Tim Düsterhus, Maximilian Mader
 * @copyright	2010-2014 Tim Düsterhus
 * @license	Creative Commons Attribution-NonCommercial-ShareAlike <http://creativecommons.org/licenses/by-nc-sa/3.0/legalcode>
 * @package	be.bastelstu.chat
 */

@-webkit-keyframes timsChatNotify {
	from {
		border-color: @wcfContainerBorderColor;
	}
	
	to {
		border-color: @wcfInputHoverBorderColor;
	}
}

@-moz-keyframes timsChatNotify {
	from {
		border-color: @wcfContainerBorderColor;
	}
	
	to {
		border-color: @wcfInputHoverBorderColor;
	}
}

@-o-keyframes timsChatNotify {
	from {
		border-color: @wcfContainerBorderColor;
	}
	
	to {
		border-color: @wcfInputHoverBorderColor;
	}
}

@keyframes timsChatNotify {
	from {
		border-color: @wcfContainerBorderColor;
	}
	
	to {
		border-color: @wcfInputHoverBorderColor;
	}
}

// only apply styles to Tim’s Chat
#tplChat {
	#content {
		// styles related to the topic container
		#timsChatTopic {
			position: relative;
			
			#timsChatTopicCloser {
				position: absolute;
				top: @wcfGapSmall;
				right: @wcfGapSmall;
				cursor: pointer;
				
				&:hover {
					color: @wcfLinkColor;
				}
			}
		}
		
		#timsChatMessageTabMenu {
			&.singleTab {
				> nav.tabMenu {
					// hide tab menu when single tabbed
					// this is “a bit” hacky
					display: none !important;
				}
				
				// overwrite WCF margin overwrite on tab menu content with WCF marginTop like margin
				// this is “a bit” hacky
				margin-top: @wcfGapMedium !important;
				
				> .tabMenuContent {
				}
				
				.timsChatMessageContainer {
					&.notify {
						-webkit-animation-duration: .2s;
						-webkit-animation-name: timsChatNotify;
						-webkit-animation-iteration-count: 5;
						-webkit-animation-direction: alternate;
						-webkit-animation-timing-function: linear;
						
						-moz-animation-duration: .2s;
						-moz-animation-name: timsChatNotify;
						-moz-animation-iteration-count: 5;
						-moz-animation-direction: alternate;
						-moz-animation-timing-function: linear;
						
						-o-animation-duration: .2s;
						-o-animation-name: timsChatNotify;
						-o-animation-iteration-count: 5;
						-o-animation-direction: alternate;
						-o-animation-timing-function: linear;
						
						animation-duration: .2s;
						animation-name: timsChatNotify;
						animation-iteration-count: 5;
						animation-direction: alternate;
						animation-timing-function: linear;
						
						border-color: @wcfInputHoverBorderColor;
					}
				}
			}
			
			> nav.tabMenu {
				> ul {
					> li {
						> a {
							.notifyIcon {
								display: none;
							}
							
							> .icon, img {
								// fix vertical alignment of images in tabs
								vertical-align: middle;
								margin-right: @wcfGapTiny;
							}
							
							// styles related to the close button of private channels in tabs
							.jsChannelCloser {
								&:hover {
									color: @wcfLinkColor;
								}
							}
						}
						
						&.notify {
							.notifyIcon {
								display: inline;
							}
						}
					}
				}
			}
		}
		
		.timsChatMessageContainer {
			height: 300px;
			overflow-y: scroll;
			overflow-x: hidden;
			
			.timsChatMarkContainer {
				display: none;
			}
			
			> ul {
				> .timsChatMessage {
					clear: both;
					
					&.unloaded {
						opacity: 0.5;
					}
					
					> .timsChatMessageIcon {
						float: left;
						margin-right: -16px;
					}
					
					> .timsChatInnerMessageContainer {
						position: relative;
						
						> .timsChatAvatarContainer {
							position: relative;
							float: left;
							margin-left: 16px;
							
							> .timsChatAvatarExtraIcon {
								position: absolute;
								bottom: -8px;
								right: -8px;
							}
						}
						
						.timsChatInnerMessage {
							margin-left: 32 + @wcfGapMedium; // size of avatars + a small gap
							padding-right: @wcfGapSmall;
							
							.timsChatUsernameContainer {
								// sender username
								> span:first-child {
									font-weight: bold;
								}
							}
							
							time {
								float: right;
							}
						}
						
						&.bubble {
							> .timsChatAvatarContainer {
								margin-left: 0px;
							}
							
							.timsChatInnerMessage {
								position: relative;
								
								padding: @wcfGapSmall;
								border-radius: @wcfContainerBorderRadius;
								border-style: solid;
								border-width: 1px;
								border-color: @wcfContainerBorderColor;
								
								> .timsChatText {
									> li {
										border-style: solid;
										border-width: 0 0 1px 0;
										border-color:  @wcfContainerBorderColor;
										padding: (@wcfGapTiny - 1) 0  @wcfGapTiny;
										
										&:last-child {
											border-style: none;
											padding: (@wcfGapTiny - 1)  0 0 0;
										}
									}
								}
								
								// :before and :after are used to create the little arrows on the “speech bubble containers”
								&:before, &:after {
									content: "";
									display: block;
									position: absolute;
									width: 0;
									border-style: solid;
								}
								
								&:before{
									border-color: transparent @wcfContainerBorderColor;
									left: -@wcfGapSmall;
									top: @wcfGapSmall;
									border-width: @wcfGapSmall @wcfGapSmall @wcfGapSmall 0;
								}
								
								&:after {
									border-color: transparent @wcfContainerBackgroundColor;
									left: -@wcfGapSmall + 1;
									top: @wcfGapSmall + 1;
									border-width: (@wcfGapSmall - 1) (@wcfGapSmall - 1) (@wcfGapSmall - 1) 0;
								}
							}
							
							&.right {
								> .timsChatAvatarContainer {
									float: right;
								}
								
								.timsChatInnerMessage {
									margin-right: 32 + @wcfGapMedium;
									margin-left: 0;
									
									&:before{
										border-color: transparent @wcfContainerBorderColor;
										left: auto;
										right: -@wcfGapSmall;
										top: @wcfGapSmall;
										border-width: @wcfGapSmall 0 @wcfGapSmall @wcfGapSmall;
									}
									
									&:after {
										border-color: transparent @wcfContainerBackgroundColor;
										left: auto;
										right: -@wcfGapSmall + 1;
										top: @wcfGapSmall + 1;
										border-width: (@wcfGapSmall - 1) 0 (@wcfGapSmall - 1) (@wcfGapSmall - 1);
									}
								}
							}
						}
					}
					
					&:nth-child(even) {
						> .timsChatInnerMessageContainer {
							&.bubble {
								.timsChatInnerMessage {
									background-color: @wcfContainerAccentBackgroundColor;
									
									&:after {
										border-color: transparent @wcfContainerAccentBackgroundColor;
									}
								}
							}
						}
					}
					
					> .timsChatInnerMessageContainer {
						margin-bottom: @wcfGapSmall;
					}
				}
			}
			
			&.markEnabled {
				> ul {
					> .timsChatMessage {
						&.jsMarked {
							> .timsChatInnerMessageContainer {
								.timsChatInnerMessage {
									background-color: @wcfSelectedBackgroundColor;
									color: @wcfSelectedColor;
								}
								
								&.bubble {
									.timsChatInnerMessage {
										&:after {
											border-color: transparent @wcfSelectedBackgroundColor;
										}
									}
									
									&.right {
										.timsChatInnerMessage {
											&:after {
												border-color: transparent @wcfSelectedBackgroundColor;
											}
										}
									}
								}
							}
						}
						
						> .timsChatInnerMessageContainer {
							.timsChatMarkContainer {
								display: inline-block;
								position: absolute;
								right: -@wcfGapLarge;
								top: 0;
							}
						}
					}
				}
			}
		}
		
		#smilies {
			.marginTop();
			
			// don't display the smiley box on low resolution devices as a button will be shown instead
			@media only screen and (max-width: 800px) {
				display: none;
			}
			
			&, &.invisible {
				-webkit-transition: opacity .2s ease-in-out;
				   -moz-transition: opacity .2s ease-in-out;
				    -ms-transition: opacity .2s ease-in-out;
				     -o-transition: opacity .2s ease-in-out;
				        transition: opacity .2s ease-in-out;
			}
			
			&.invisible {
				opacity: .5;
			}
		}
		
		#timsChatOptions {
			float: right;
			
			// styles related to the smiley button that replaces the smiley box on low resolution devices
			#timsChatSmileyPopupButton {
				display: none;
				
				@media only screen and (max-width: 800px) {
					display: inline-block;
				}
			}
			
			// fix option buttons on low resolution devices, it will become a dropup not a dropdown
			> nav.buttonGroupNavigation {
				position: relative;
				display: inline-block;
				vertical-align: middle;
				
				@media only screen and (max-width: 800px) {
					margin-right: @wcfGapSmall;
					
					> ul {
						right: 1px;
						top: auto;
						bottom: 24px;
					}
				}
			}
			
			// clear the float on the first element after the option container, maybe someone alters their templates and puts an element down there ;)
			+ * {
				clear: right;
			}
		}
	}
	
	.sidebar {
		> div {
			> fieldset{
				padding-right: @wcfGapTiny;
				
				> div {
					overflow-y: auto;
					
					> ul {
						padding-right: @wcfGapSmall;
					}
				}
				
				&#timsChatUserListContainer {
					> div {
						height: 250px;
					}
				}
				
				&#timsChatRoomListContainer {
					> div#timsChatRoomList {
						height: 150px;
					}
				}
			}
		}
		
		#timsChatUserList {
			> ul {
				> li {
					&.you {
						a {
							&:hover {
								text-decoration: none;
								cursor: default;
							}
						}
					}
					
					a {
						img {
							margin-right: @wcfGapTiny;
						}
					}
				}
			}
		}
	}
	
	#timsChatUploadInput {
		display: none;
	}
	
	#timsChatUploadContainer {
		.innerError {
			position: absolute;
		}
	}
	
	#timsChatUploadDropdownMenu {
		z-index: 398;
	}
	
	#timsChatCopyrightDialog {
		> div {
			background-repeat: no-repeat;
			background-position: right top;
		}
	}
	
	#fish {
		font-size: 2rem;
	}
}

// TODO
html.fullscreen {
	html, body {
		padding: 0;
		margin: 0;
	}
	
	&,
	body,
	#tplChat #main,
	#tplChat #main > div,
	#tplChat #main > div > div,
	#tplChat #content {
		width: 100%;
		height: 100%;
		max-width: 100%;
		max-height: 100%;
	}
	
	#top,
	#pageHeader,
	#pageFooter,
	#mainMenu,
	#topMenu {
		display: none;
	}
	
	.sidebar, #main, #content {
		padding-bottom: 0;
	}
	
	#main, #content {
		padding-top: 0;
		border-top: none;
		border-bottom: none;
		border-radius: 0;
	}
}