• Home
• com.liferay
• com.liferay.chat.web
• 5.0.22
• source code
• main.scss

×

Project download

Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $

You can buy this project and download/modify it how often you want.

META-INF.resources.css.main.scss Maven / Gradle / Ivy

@import 'bourbon';

html body {
	height: auto;
	padding-bottom: 24px;
}

/* ---------- Bottom dock ---------- */

.chat-bar {
	background: #e5e5e5 url(../images/btm_dock_bg.png) repeat-x;
	border: 1px solid #b5b5b5;
	border-bottom-width: 0;
	bottom: 0;
	height: 24px;
	left: 15px;
	position: fixed;
	right: 15px;
	z-index: 1000;

	.status-message,
	.trigger-name {
		text-shadow: 1px 1px #fff;
	}
}

.chat-sound {
	position: absolute;
}

.chat-status {
	float: left;
}

/* ---------- Bottom dock tabs ---------- */

.chat-bar {
	div ul {
		&,
		li {
			list-style-type: none;
			margin: 0;
			padding: 0;
			position: relative;
		}

		li {
			.chat-panel-trigger {
				border-left: 1px solid #b5b5b5;
				border-right: 1px solid #e0e0e0;
				color: #111;
				cursor: pointer;
				float: left;
				font: bold 11px/24px Tahoma, Geneva, sans-serif;
				padding: 0 6px;
				text-decoration: none;

				&:hover {
					background: #fff;
				}

				.unread {
					background: url(../images/unread_messages.png);
					color: #fff;
					font: bold 10px/16px Arial, Helvetica, sans-serif;
					height: 16px;
					position: absolute;
					right: -4px;
					text-align: center;
					top: -6px;
					width: 16px;
					z-index: 30;
				}
			}

			&.selected .chat-panel-trigger {
				background: #fff;
				border: solid #262626;
				border-width: 0 1px 1px;
				height: 25px;
				line-height: 27px;
				margin: -2px 0 -1px;
				position: relative;
				z-index: 30;

				.unread {
					right: -5px;
					top: -4px;
				}
			}

			&.typing .chat-panel-trigger {
				padding-left: 24px;
			}
		}
	}

	.chat-tabs li {
		float: right;
	}

	/* ---------- Bottom dock popups ---------- */

	.chat-panel {
		bottom: 24px;
		display: none;
		position: absolute;
		right: 0;
		z-index: 20;
	}

	.selected .chat-panel {
		display: block;
	}
}

/* ---------- Typing status ---------- */

.typing-status {
	background: url(../images/typing.png) no-repeat 0 0;
	display: none;
	float: left;
	height: 16px;
	left: 4px;
	position: absolute;
	top: 5px;
	width: 16px;
}

.selected .typing-status {
	top: 6px;
}

.typing .typing-status {
	display: block;
}

/* ---------- Online users ---------- */

.buddy-list {
	.form-group {
		margin-bottom: 0;
	}

	.field.search-buddies {
		padding-right: 2px;
	}

	&.loading.selected {
		.chat-panel .chat-panel-window .chat-panel-content {
			opacity: 0.3;

			li:hover {
				background: none;
				border-color: transparent;
				cursor: default;
			}
		}

		.chat-panel-trigger .trigger-name {
			background: url(@theme_image_path@/application/loading_indicator.gif)
				no-repeat 0 0;
			padding: 2px 0 2px 20px;
		}
	}

	.chat-panel-content {
		list-style-type: none;
		margin: 0;
		max-height: 400px;
		overflow-x: hidden;
		overflow-y: scroll;
		padding: 2px 0;

		.online-users li {
			align-items: center;
			border: 1px solid #fff;
			cursor: pointer;
			display: flex;
			flex-wrap: nowrap;
			justify-content: flex-start;
			list-style-type: none;
			margin: 0;
			padding: 2px;
			width: 212px;
		}

		li {
			&.idle {
				height: 14px;
			}

			&:hover {
				background: #f3f3f3;
				border-color: #ddd;
			}
		}

		div {
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		img {
			background: #333;
			display: inline-block;
			height: 24px;
			margin: 0 6px 0 0;
			width: 24px;
		}

		.idle {
			div {
				line-height: 14px;
			}

			img {
				display: none;
			}
		}
	}
}

/* ---------- Popup window ---------- */

.portlet-chat .chat-settings {
	.settings {
		float: none;
	}

	li {
		border-bottom: 1px solid #999;
		clear: both;
		float: none;
		padding: 10px;
		position: static;
	}
}

.chat-settings {
	label {
		font-weight: bold;
	}

	input {
		vertical-align: middle;
	}

	.ctrl-holder {
		padding: 10px;
	}

	&.saved .chat-panel-trigger .trigger-name {
		background: url(@theme_image_path@/messages/success.png) no-repeat 0 0;
		padding-bottom: 2px;
		padding-left: 20px;
		padding-top: 2px;
	}
}

.chat-status .status-message {
	margin-left: 10px;
}

.chat-panel-window {
	background: #fff;
	border: 1px solid #262626;
	font: 12px Tahoma, Geneva, sans-serif;
	max-width: 452px;
	min-width: 226px;
	position: relative;
}

img.chat-panel-icon {
	background: #333;
	border: 1px solid #000;
	display: block;
	height: 48px;
	left: 6px;
	position: absolute;
	top: 4px;
	width: 48px;
}

.chat-panel-title {
	background: #20272b;
	color: #f2f2f2;
	font-weight: bold;
	height: 24px;
	line-height: 24px;
	padding-right: 35px;
	text-indent: 60px;
}

.chat-panel-button {
	cursor: pointer;
	height: 12px;
	width: 12px;

	&.close {
		background: url(../images/chat_close_button.png) left bottom;
		position: absolute;
		right: 4px;
		top: 6px;

		&:hover {
			background-position: left top;
		}
	}

	&.minimize {
		background: url(../images/chat_minimize_button.png) left bottom;
		position: absolute;
		right: 20px;
		top: 6px;

		&:hover {
			background-position: left top;
		}
	}
}

.buddy-list,
.chat-settings {
	.chat-panel-title {
		text-indent: 6px;
	}

	.chat-panel-button.minimize {
		right: 4px;
	}
}

.chat-panel-profile {
	background: #eee;
	border-bottom: 1px solid #ccc;
	height: 27px;
	padding-top: 5px;
	text-indent: 60px;
}

.chat-panel-output {
	border-bottom: 1px solid #000;
	height: 192px;
	overflow-x: auto;
	overflow-y: scroll;
	padding: 2px;
	word-wrap: break-word;

	.blurb {
		margin: 0;
		position: relative;
	}

	.date,
	.name {
		line-height: 11px;
		padding: 2px 4px 3px;
	}

	.name {
		background: #828f95;
		color: #fff;
		display: block;
		padding-right: 4.8em;
	}

	.date {
		color: #eee;
		font-size: 10px;
		font-style: normal;
		position: absolute;
		right: 0;
		top: 0;
	}

	.incoming {
		.name {
			background: #d3dadd;
			color: #555;
		}

		.date {
			color: #555;
		}
	}

	.text {
		display: block;
		line-height: 14px;
		padding: 4px 8px 8px;
	}
}

.chat-panel-input {
	border-top: 1px solid #369;
	height: 19px;
	position: relative;

	textarea.message-input {
		background: none;
		border-width: 0;
		bottom: 0;
		display: block;
		float: left;
		height: 14px;
		margin: 0;
		overflow: hidden;
		padding: 2px 0 2px 0;
		position: absolute;
		width: 100%;
	}
}

pre.chat-height-monitor {
	margin: 0;
	padding: 0;
}

.chat-height-monitor,
.chat-panel-input textarea {
	font: 14px/16px Tahoma, Geneva, sans-serif;
}

.chat-panel-input textarea.focus {
	background: #fff;
	border-width: 0;
}

.chat-height-monitor {
	left: -10000em;
	padding: 0;
	position: absolute;
	top: -10000em;
	white-space: pre;
	word-wrap: break-word;
}

.show-notifications-setting {
	display: none;
}

.desktop-notifications .show-notifications-setting {
	display: block;
}

/* ---------- Buddy service extensions ---------- */

.chat-bar {
	.online-users .buddy-services {
		display: none;
		flex-shrink: 0;
		max-width: 50%;
		text-align: right;
	}

	.chat-panel-content {
		li:hover .buddy-services {
			display: block;
		}

		.name {
			flex-grow: 1;
		}
	}

	.buddy-services div {
		background: transparent no-repeat;
		display: inline-block;
		height: 16px;
		margin-right: 3px;
		overflow: visible;
		width: 16px;
	}
}

/* ---------- Message waiting indicator (only background-color is used) ---------- */

.message-waiting {
	background-color: #a5d6ef;
}

/* ---------- Extras ---------- */

.chat-bar div ul li.selected .chat-panel-trigger {
	border-radius: 0 4px;
}

.chat-panel-window {
	border-radius: 4px 4px 0 4px;
}