Small style optimization

Small style optimization

/* ### message groups ### */
.messageGroupList {
	.columnSubject {
		> .labelList {
			float: right;
			padding-left: 7px;
		}

		> h3 {
			> .messageGroupLink {
				font-size: @wcfTitleFontSize;
			}

			> .badge.label {
				top: -2px;
			}
		}

		> small {
			display: block;
		}

		> nav {
			font-size: @wcfSmallFontSize;

			> ul > li {
				display: inline;
			}
		}
	}

	tr {
		&.new .columnSubject > h3 > .messageGroupLink {
			font-weight: bold;
		}

		&.new .columnAvatar div > p > img,
		&:hover .columnAvatar div > p > img {
			opacity: 1;
		}

		&.messageDisabled {
			color: @wcfDisabledColor;

			> td {
				background-color: @wcfDisabledBackgroundColor !important;
			}

			a:not(.badge) {
				color: @wcfDisabledColor;
			}
		}

		&.messageDeleted {
			color: @wcfDeletedColor;

			> td {
				background-color: @wcfDeletedBackgroundColor !important;
			}

			a:not(.badge) {
				color: @wcfDeletedColor;
			}
		}

		.columnSubject .statusDisplay .pageNavigation {
			opacity: 0;

			.transition(opacity, .2s);
		}

		&:hover .columnSubject .statusDisplay .pageNavigation {
			opacity: 1;
		}

		&.new .columnAvatar > div {
			&:after {
				color: @wcfLinkColor;
				content: "\f069";
				font-family: FontAwesome;
				font-weight: normal !important;
				font-style: normal !important;
				font-size: 14px;
				position: absolute;
				text-decoration: none !important;
				top: -4px;
				right: -2px;

				.textShadow(@wcfContainerBackgroundColor);
			}
		}
	}

	.columnAvatar {
		div {
			position: relative;
			width: 40px;
			height: 38px;

			> p > img {
				opacity: .6;

				.transition(opacity, .2s);
			}
		}

		.myAvatar {
			position: absolute;
			width: 16px;
			height: 16px;
			bottom: -2px;
			left: 24px;
			opacity: 1;

			.boxShadow(0, 0, rgba(0, 0, 0, .3), 3px);
		}
	}

	.columnLastPost {
		white-space: nowrap;

		> div > div > small {
			color: @wcfDimmedColor;
		}
	}
}

/* ### messages ### */
@media only screen and (min-width: 801px) {
	.messageList {
		.messageGroupStarter {
			position: relative;

			> .message:after {
				content: "\f005";
				font-family: FontAwesome;
				font-size: 14px;
				display: block;
				left: 4px;
				position: absolute;
				top: 2px;

				.textShadow(@wcfSidebarBackgroundColor);
			}

			> .message.messageSidebarOrientationRight:after {
				left: auto;
				right: 4px;
			}
		}
	}
}

.message {
	background-color: @wcfContainerHoverBackgroundColor;
	border: 1px solid @wcfContainerBorderColor;
	//overflow: hidden; /* todo: fixes floating issues when using message on pages with a sidebar */
	position: relative;

	&:hover {
		.messageHeader .messageQuickOptions > li > a {
			opacity: 1;
		}

		.messageOptions nav {
			opacity: 1;
		}
	}

	&.messageDisabled {
		background-color: @wcfDisabledBackgroundColor;

		.messageSidebar {
			color: @wcfDisabledColor;

			a {
				color: @wcfDisabledColor;
			}
		}
	}

	&.messageDeleted {
		background-color: @wcfDeletedBackgroundColor;

		.messageSidebar {
			color: @wcfDeletedColor;

			a {
				color: @wcfDeletedColor;
			}
		}
	}

	&.jsMarked {
		background-color: @wcfSelectedBackgroundColor;

		.messageSidebar {
			color: @wcfSelectedColor;

			a {
				color: @wcfSelectedColor;
			}
		}
	}

	.messageOptions {
		font-size: @wcfSmallFontSize;
		position: relative;

		&.forceHidden nav {
			display: none !important;
		}

		&.forceOpen nav {
			opacity: 1;
		}

		nav {
			bottom: -2px;
			opacity: 0;
			position: absolute;
			right: -22px;
			text-align: right;

			.transition(opacity, .1s);

			ul.smallButtons {
				> li {
					a.button {
						border-radius: 0;
					}
				}
			}
		}
	}

	.messageHeader {
		.messageQuickOptions {
			float: right;

			> li {
				display: inline-block;

				> a {
					opacity: .6;

					.transition(opacity, .2s);

					> span.icon {
						color: @wcfDimmedColor;

						.transition(color, .2s);
					}

					&:hover {
						> span.icon {
							color: @wcfLinkColor;
						}
					}
				}
			}

			input[type=checkbox] {
				position: relative;
				top: 1px;
			}
		}

		.permalink {
			color: @wcfDimmedColor;
		}
	}

	&.dividers {
		.userCredits {
			border-top: 1px solid @wcfContainerBorderColor;
		}
	}
}

.touch .message .messageOptions nav {
	opacity: 1;
}

@media only screen and (max-width: 800px) {
	.message {
		border-width: 1px 0;
	}
}

/* sidebars orientations */
.message.messageSidebarOrientationLeft {
	.messageContent {
		border-left: 1px solid @wcfContainerBorderColor;
		margin: 0 0 0 211px;
	}

	.messageSidebar {
		float: left;
	}
}

.message.messageSidebarOrientationRight {
	.messageContent {
		border-right: 1px solid @wcfContainerBorderColor;
		margin: 0 211px 0 0;
	}

	.messageSidebar {
		float: right;
	}
}

/* pointer */
.message.messageSidebarOrientationLeft,
.message.messageSidebarOrientationRight {
	.messageHeader {
		&:before,
		&:after {
			border-width: 20px;
			content: "";
			display: block;
			height: 0;
			position: absolute;
			top: 35px;
			width: 0;
		}

		&:before {
			z-index: 100;
		}

		&:after {
			z-index: 101;
		}
	}
}

.message.messageSidebarOrientationLeft {
	.messageHeader {
		&:before,
		&:after {
			border-style: inset solid inset none;
		}

		&:before {
			border-color: transparent @wcfContainerBorderColor transparent transparent;
			left: -20px;
		}

		&:after {
			border-color: transparent @wcfContainerBackgroundColor transparent transparent;
			left: -19px;
		}
	}
}

.message.messageSidebarOrientationRight {
	.messageHeader {
		&:before,
		&:after {
			border-style: inset none inset solid;
		}

		&:before {
			border-color: transparent transparent transparent @wcfContainerBorderColor;
			right: -20px;
		}

		&:after {
			border-color: transparent transparent transparent @wcfContainerBackgroundColor;
			right: -19px;
		}
	}
}

/* new message badge */
.message .newMessageBadge {
	color: @wcfTabularBoxColor;
	display: block;
	font-size: @wcfSmallFontSize;
	font-weight: bold;
	padding: 6px 10px;
	position: absolute;
	text-transform: uppercase;
	top: 24px;

	.boxShadow(1px, 1px, rgba(0, 0, 0, .2), 3px);
	.linearGradient(darken(@wcfTabularBoxBackgroundColor, 10%), @wcfTabularBoxBackgroundColor, darken(@wcfTabularBoxBackgroundColor, 10%));
	.textShadow(darken(@wcfTabularBoxBackgroundColor, 10%));

	&:before {
		border-bottom: 4px solid darken(@wcfTabularBoxBackgroundColor, 20%);
		content: "";
		display: block;
		position: absolute;
		top: -4px;
	}
}

.message.messageSidebarOrientationLeft .newMessageBadge {
	border-radius: 0 5px 5px 0;
	left: -219px;

	&:before {
		border-left: 6px solid transparent;
		left: 0;
	}
}

.message.messageSidebarOrientationRight	.newMessageBadge {
	right: -219px;
}

.message.messageReduced .newMessageBadge {
	right: -7px;
	top: 21px;
}

.message.messageSidebarOrientationRight,
.message.messageReduced {
	.newMessageBadge {
		border-radius: 5px 0 0 5px;

		&:before {
			border-right: 6px solid transparent;
			right: 0;
		}
	}
}

.messageBody {
	color: @wcfColor;
	display: block;
	line-height: 1.5;

	> div:not(.messageFooter) {
		overflow: hidden;
		padding-bottom: @wcfGapMedium;
	}

	> footer {
		padding-bottom: @wcfGapMedium;
	}

	> .messageSignature {
		color: @wcfDimmedColor;
	}

	.messageFooter {
		> *:not(:first-child) {
			margin-top: @wcfGapSmall;
		}

		> .messageFooterNote {
			border-left: 2px solid @wcfContainerBorderColor;
			color: @wcfDimmedColor;
			font-size: @wcfSmallFontSize;
			padding: @wcfGapTiny @wcfGapSmall;

			@messageFooterNoteGradientColor: fade(@wcfContainerBorderColor, 20%);
			.linearGradientNative(~"left top, @{messageFooterNoteGradientColor} 0%, transparent 40%");
		}
	}
}

.messageHeader + .messageBody > div:first-child,
.messageBody > div:not(.messageFooter):not(:first-child) {
	border-top: 1px dotted @wcfContainerBorderColor;
	padding: @wcfGapMedium 0;
}

.message .messageBody {
	padding: @wcfGapMedium @wcfGapLarge 1px;
}

.message .messageContent {
	background-color: @wcfContainerBackgroundColor;

	.messageHeader {
		padding: @wcfGapMedium @wcfGapLarge 0;
		position: relative;

		.messageHeadline {
			> h1 {
				color: @wcfColor;
				font-size: @wcfSubHeadlineFontSize;
				font-weight: bold;
				overflow: hidden;
				padding-right: 21px; // reserved space for new badge
				text-overflow: ellipsis;

				.textShadow(@wcfContainerBackgroundColor);

				+ p {
					margin-top: 2px;
				}
			}

			> p {
				font-size: @wcfSmallFontSize;

				> .likesBadge {
					font-size: 100%;
					margin: -2px 0 -1px 4px;
				}

				> .username:after {
					content: " - ";
				}
			}
		}

		.box32 > .messageHeadline > p:first-child {
			font-size: 100%;

			> .username {
				font-size: @wcfTitleFontSize;
				font-weight: bold;

				.textShadow(@wcfContainerBackgroundColor);
			}

			> .username {
				display: block;
			}

			> .username:after {
				content: "";
			}

			> .likesBadge {
				font-size: @wcfSmallFontSize;
				top: -1px;
			}
		}
	}
}

.message .messageSidebar {
	line-height: 1.3;
	margin-bottom: -1px;
	padding: @wcfGapMedium @wcfGapLarge @wcfGapLarge;
	position: relative;
	text-align: center;
	width: 170px; /* Width toggle */

	&:after {
		clear: both;
		content: '';
		display: block;
	}

	header .username {
		color: @wcfLinkColor;
		font-size: @wcfTitleFontSize;
		font-weight: bold;
		padding: 0 3px 1px;

		.textShadow(@wcfContainerHoverBackgroundColor);

		a {
			text-decoration: none;
		}
	}

	.userTitle {
		margin: 7px 0 0;
	}

	.userRank {
		margin: 2px 0 0;
	}

	.userAvatar {
		display: inline-block;
		margin: @wcfGapSmall 0 0;
		position: relative;
		text-align: left;

		> .badgeOnline {
			border-radius: 0 5px 5px 0;
			color: rgba(238, 255, 238, 1);
			bottom: 7px;
			left: -5px;
			position: absolute;
			text-transform: uppercase;

			.boxShadow(1px, 1px, rgba(0, 0, 0, .2), 3px);
			.linearGradient(darken(rgba(0, 153, 0, 1), 10%), rgba(0, 153, 0, 1), darken(rgba(0, 153, 0, 1), 10%));
			.textShadow(darken(rgba(0, 153, 0, 1), 10%));

			&:before {
				border-bottom: 4px solid darken(rgba(0, 153, 0, 1), 20%);
				border-left: 6px solid transparent;
				content: "";
				display: block;
				left: 0;
				position: absolute;
				top: -4px;
			}
		}
	}

	.userCredits {
		font-size: @wcfSmallFontSize;
		margin: @wcfGapSmall 0 0;
		overflow: hidden;
		padding: @wcfGapSmall 0 0;

		.dataList {
			> dt {
				width: 46%;
			}

			> dd {
				margin-left: 49%;
				word-wrap: break-word;
			}
		}
	}
}

.message:not(.messageReduced) .messageOptions {
	.clearfix();
}

.message:not(.messageReduced) .messageBody {
	.clearfix();
}

li:nth-child(2n+1) .message {
	&.messageSidebarOrientationLeft .messageHeader:after {
		border-right-color: @wcfContainerAccentBackgroundColor;
	}

	&.messageSidebarOrientationRight .messageHeader:after {
		border-left-color: @wcfContainerAccentBackgroundColor;
	}

	.messageContent {
		background-color: @wcfContainerAccentBackgroundColor;
	}
}

.messageReduced {
	.messageOptions > .breadcrumbs {
		bottom: 10px;
		left: 0;
		opacity: 1;
		position: relative;
	}
}

.messageCollapsed {
	color: @wcfDimmedColor;
	opacity: .8;
	padding: @wcfGapMedium @wcfGapLarge;

	.transition(opacity, .1s);

	&:hover {
		opacity: 1;
	}

	&.messageCollapsedExpandable {
		cursor: pointer;
	}

	h1 {
		font-size: @wcfSmallFontSize;
	}

	.messageCounter {
		padding-top: 3px;
	}

	&.jsMarked {
		background-color: @wcfSelectedBackgroundColor !important;
		color: @wcfColor;

		a {
			color: @wcfColor;
		}
	}
}

@media only screen and (max-width: 800px) {
	.messageCollapsed {
		padding: @wcfGapSmall;
	}
}

@media only screen and (min-width: 641px) and (max-width: 800px) {
	.messageCollapsed {
		padding: @wcfGapSmall @wcfGapMedium;
	}
}

/* quick reply and inline editor */
.messageBody > span.icon-spinner {
	left: 50%;
	margin: -21px -21px 0 0;
	position: absolute;
	top: 50%;
}

#messageQuickReply {
	.formSubmit {
		padding-bottom: @wcfGapMedium;
	}
}

/* message quotes */
#showQuotes {
	bottom: @wcfGapLarge + @wcfGapTiny;
	cursor: pointer;
	opacity: .7;
	position: fixed;
	right: @wcfGapLarge + @wcfGapTiny;

	.transition(opacity, .2s);

	&:hover {
		opacity: 1;
	}
}

#messageQuoteList {
	max-width: 800px !important;

	li {
		&:not(:first-child) {
			margin-top: @wcfGapSmall;
		}

		> span {
			float: left;
			width: 40px;

			> input {
				vertical-align: bottom;
			}

			> span {
				cursor: pointer;
				vertical-align: middle;
			}
		}

		div.jsQuote {
			margin-left: 60px;
		}

		div.jsFullQuote {
			display: none;
		}
	}
}

#quoteManagerCopy {
	cursor: pointer;

	.pointer {
		border-width: 5px 5px 0;
		bottom: -5px;
		margin-left: -5px;
		top: auto;
	}
}

/* share buttons */
.messageShareButtons {
	> ul > li {
		display: inline-block;

		> a {
			text-decoration: none;

			> .icon {
				height: 28px;
			}
		}

		> .badge {
			background-color: @wcfContainerBackgroundColor;
			border: 1px solid @wcfContainerBorderColor;
			border-radius: 3px;
			color: @wcfColor;
			line-height: 23px;
			padding: 0 7px;
			position: relative;
			vertical-align: 1px;

			&:before {
				border: 6px solid @wcfContainerBorderColor;
				border-color: transparent @wcfContainerBorderColor transparent transparent;
				content: "";
				display: block;
				height: 0;
				margin-top: -6px;
				position: absolute;
				right: 100%;
				top: 50%;
				width: 0;
			}

			&:after {
				border: 6px solid @wcfContainerBackgroundColor;
				border-color: transparent @wcfContainerBackgroundColor transparent transparent;
				content: "";
				display: block;
				height: 0;
				margin-right: -1px;
				margin-top: -6px;
				position: absolute;
				right: 100%;
				top: 50%;
				width: 0;
			}
		}
	}

	.jsShareFacebook {
		> a > .icon {
			color: rgb(59, 89, 152);
		}
	}

	.jsShareTwitter {
		> a > .icon {
			color: rgb(64, 153, 255);
		}
	}

	.jsShareGoogle {
		> a > .icon {
			color: rgb(211, 72, 54);
		}
	}

	.jsShareReddit {
		> a > img {
			vertical-align: -7px;
			padding: 0 4px;
		}
	}
}

.contentNavigation > .messageShareButtons {
	float: right;
	margin-right: @wcfGapMedium;
	margin-top: 0;
}

.messageSearchResultList {
	> li > .box48 > div > .containerHeadline > h3 {
		padding-right: 100px;
	}
}

.likeButton.active {
	.icon {
		color: rgba(0, 153, 0, 1);
	}
}

.dislikeButton.active {
	.icon {
		color: rgba(204, 0, 0, 1);
	}
}

/* ckeditor fixes */
.cke_editor_text {
	border-style: solid !important;
	padding: 0 !important;
}

.cke_source,
.cke_wysiwyg_div {
	padding: 8px !important;
}

/* fixes textarea width */
.cke_source {
	box-sizing: border-box !important;
	-moz-box-sizing: border-box !important;
	-webkit-box-sizing: border-box !important;
}

.cke_combo__fontsize .cke_combo_text {
	width: auto !important;
}

.cke_dialog_background_cover {
	background-color: #000 !important;
}

.cke_wysiwyg_div,
.cke_inner {
	background-color: transparent !important;
}

/* fixes list styling */
.cke_wysiwyg_div {
	ul,
	ol {
		.nativeList;
	}

	ul {
		list-style-type: disc;
	}

	ol {
		list-style-type: decimal;
	}
}

@media only screen and (max-width: 800px) {
	.message.messageSidebarOrientationLeft,
	.message.messageSidebarOrientationRight {
		.messageContent {
			border: 0;
			margin: 0;
		}

		.messageSidebar {
			float: none;
		}

		.messageHeader {
			&:before,
			&:after {
				display: none;
			}
		}
	}

	.message .messageHeader .messageQuickOptions,
	.message .messageBody .messageSignature,
	.message .messageSidebar .userCredits {
		display: none;
	}

	.message .messageSidebar {
		padding: 7px;
		text-align: left;
		width: auto;

		> div {
			margin-left: 40px;
		}

		.userAvatar {
			left: 7px;
			position: absolute;
			top: 0;

			img {
				height: 32px !important;
				width: 32px !important;
			}

			> .badgeOnline {
				display: none;
			}
		}

		.userTitle {
			margin-top: -2px;
		}
	}

	/* reduce paddings */
	.message .messageContent .messageHeader {
		padding: 7px 7px 0;
	}

	.message .messageBody {
		padding: 7px;
	}

	.message .messageBody > div:not(.messageFooter) {
		padding: 7px 0;
	}

	.message .messageBody > footer {
		padding: 0;
		position: absolute;
		right: 7px;
		top: 7px;
	}

	.message .messageOptions nav {
		opacity: 1;
		position: static;
		text-align: left;
	}

	.message.messageReduced .messageOptions {
		display: none;
	}

	.message .newMessageBadge {
		display: none;
	}
}

@media only screen and (min-width: 641px) and (max-width: 800px) {
	.message .messageSidebar,
	.message .messageContent .messageHeader,
	.message .messageBody {
		padding-left: @wcfGapMedium;
		padding-right: @wcfGapMedium;
	}

	.message .messageSidebar {
		.userAvatar {
			left: @wcfGapMedium;
		}
	}

	.message .messageBody > footer {
		right: @wcfGapMedium;
	}
}

@media only screen and (max-width: 800px) {
	.moderationList {
		thead {
			display: none;
		}

		tbody {
			.columnAssignedUserID,
			.columnLastChangeTime {
				display: none;
			}
		}
	}
}

/* ### message groups ### */
.messageGroupList {
	.columnSubject {
		> .labelList {
			float: right;
			padding-left: 7px;
		}

		> h3 {
			> .messageGroupLink {
				font-size: @wcfTitleFontSize;
			}

			> .badge.label {
				top: -2px;
			}
		}

		> small {
			display: block;
		}

		> nav {
			font-size: @wcfSmallFontSize;

			> ul > li {
				display: inline;
			}
		}
	}

	tr {
		&.new .columnSubject > h3 > .messageGroupLink {
			font-weight: bold;
		}

		&.new .columnAvatar div > p > img,
		&:hover .columnAvatar div > p > img {
			opacity: 1;
		}

		&.messageDisabled {
			color: @wcfDisabledColor;

			> td {
				background-color: @wcfDisabledBackgroundColor !important;
			}

			a:not(.badge) {
				color: @wcfDisabledColor;
			}
		}

		&.messageDeleted {
			color: @wcfDeletedColor;

			> td {
				background-color: @wcfDeletedBackgroundColor !important;
			}

			a:not(.badge) {
				color: @wcfDeletedColor;
			}
		}

		.columnSubject .statusDisplay .pageNavigation {
			opacity: 0;

			.transition(opacity, .2s);
		}

		&:hover .columnSubject .statusDisplay .pageNavigation {
			opacity: 1;
		}

		&.new .columnAvatar > div {
			&:after {
				color: @wcfLinkColor;
				content: "\f069";
				font-family: FontAwesome;
				font-weight: normal !important;
				font-style: normal !important;
				font-size: 14px;
				position: absolute;
				text-decoration: none !important;
				top: -4px;
				right: -2px;

				.textShadow(@wcfContainerBackgroundColor);
			}
		}
	}

	.columnAvatar {
		div {
			position: relative;
			width: 40px;
			height: 38px;

			> p > img {
				opacity: .6;

				.transition(opacity, .2s);
			}
		}

		.myAvatar {
			position: absolute;
			width: 16px;
			height: 16px;
			bottom: -2px;
			left: 24px;
			opacity: 1;

			.boxShadow(0, 0, rgba(0, 0, 0, .3), 3px);
		}
	}

	.columnLastPost {
		white-space: nowrap;

		> div > div > small {
			color: @wcfDimmedColor;
		}
	}
}

/* ### messages ### */
@media only screen and (min-width: 801px) {
	.messageList {
		.messageGroupStarter {
			position: relative;

			> .message:after {
				content: "\f005";
				font-family: FontAwesome;
				font-size: 14px;
				display: block;
				left: 4px;
				position: absolute;
				top: 2px;

				.textShadow(@wcfSidebarBackgroundColor);
			}

			> .message.messageSidebarOrientationRight:after {
				left: auto;
				right: 4px;
			}
		}
	}
}

.message {
	background-color: @wcfContainerHoverBackgroundColor;
	border: 1px solid @wcfContainerBorderColor;
	//overflow: hidden; /* todo: fixes floating issues when using message on pages with a sidebar */
	position: relative;

	&:hover {
		.messageHeader .messageQuickOptions > li > a {
			opacity: 1;
		}

		.messageOptions nav {
			opacity: 1;
		}
	}

	&.messageDisabled {
		background-color: @wcfDisabledBackgroundColor;

		.messageSidebar {
			color: @wcfDisabledColor;

			a {
				color: @wcfDisabledColor;
			}
		}
	}

	&.messageDeleted {
		background-color: @wcfDeletedBackgroundColor;

		.messageSidebar {
			color: @wcfDeletedColor;

			a {
				color: @wcfDeletedColor;
			}
		}
	}

	&.jsMarked {
		background-color: @wcfSelectedBackgroundColor;

		.messageSidebar {
			color: @wcfSelectedColor;

			a {
				color: @wcfSelectedColor;
			}
		}
	}

	.messageOptions {
		font-size: @wcfSmallFontSize;
		position: relative;

		&.forceHidden nav {
			display: none !important;
		}

		&.forceOpen nav {
			opacity: 1;
		}

		nav {
			bottom: -2px;
			opacity: 0;
			position: absolute;
			right: -22px;
			text-align: right;

			.transition(opacity, .1s);

			ul.smallButtons {
				> li {
					a.button {
						border-radius: 0;
					}
				}
			}
		}
	}

	.messageHeader {
		.messageQuickOptions {
			float: right;

			> li {
				display: inline-block;

				> a {
					opacity: .6;

					.transition(opacity, .2s);

					> span.icon {
						color: @wcfDimmedColor;

						.transition(color, .2s);
					}

					&:hover {
						> span.icon {
							color: @wcfLinkColor;
						}
					}
				}
			}

			input[type=checkbox] {
				position: relative;
				top: 1px;
			}
		}

		.permalink {
			color: @wcfDimmedColor;
		}
	}

	&.dividers {
		.userCredits {
			border-top: 1px solid @wcfContainerBorderColor;
		}
	}
}

.touch .message .messageOptions nav {
	opacity: 1;
}

@media only screen and (max-width: 800px) {
	.message {
		border-width: 1px 0;
	}
}

/* sidebars orientations */
.message.messageSidebarOrientationLeft {
	.messageContent {
		border-left: 1px solid @wcfContainerBorderColor;
		margin: 0 0 0 211px;
	}

	.messageSidebar {
		float: left;
	}
}

.message.messageSidebarOrientationRight {
	.messageContent {
		border-right: 1px solid @wcfContainerBorderColor;
		margin: 0 211px 0 0;
	}

	.messageSidebar {
		float: right;
	}
}

/* pointer */
.message.messageSidebarOrientationLeft,
.message.messageSidebarOrientationRight {
	.messageHeader {
		&:before,
		&:after {
			border-width: 20px;
			content: "";
			display: block;
			height: 0;
			position: absolute;
			top: 35px;
			width: 0;
		}

		&:before {
			z-index: 100;
		}

		&:after {
			z-index: 101;
		}
	}
}

.message.messageSidebarOrientationLeft {
	.messageHeader {
		&:before,
		&:after {
			border-style: inset solid inset none;
		}

		&:before {
			border-color: transparent @wcfContainerBorderColor transparent transparent;
			left: -20px;
		}

		&:after {
			border-color: transparent @wcfContainerBackgroundColor transparent transparent;
			left: -19px;
		}
	}
}

.message.messageSidebarOrientationRight {
	.messageHeader {
		&:before,
		&:after {
			border-style: inset none inset solid;
		}

		&:before {
			border-color: transparent transparent transparent @wcfContainerBorderColor;
			right: -20px;
		}

		&:after {
			border-color: transparent transparent transparent @wcfContainerBackgroundColor;
			right: -19px;
		}
	}
}

/* new message badge */
.message .newMessageBadge {
	color: @wcfTabularBoxColor;
	display: block;
	font-size: @wcfSmallFontSize;
	font-weight: bold;
	padding: 6px 10px;
	position: absolute;
	text-transform: uppercase;
	top: 24px;

	.boxShadow(1px, 1px, rgba(0, 0, 0, .2), 3px);
	.linearGradient(darken(@wcfTabularBoxBackgroundColor, 10%), @wcfTabularBoxBackgroundColor, darken(@wcfTabularBoxBackgroundColor, 10%));
	.textShadow(darken(@wcfTabularBoxBackgroundColor, 10%));

	&:before {
		border-bottom: 4px solid darken(@wcfTabularBoxBackgroundColor, 20%);
		content: "";
		display: block;
		position: absolute;
		top: -4px;
	}
}

.message.messageSidebarOrientationLeft .newMessageBadge {
	border-radius: 0 5px 5px 0;
	left: -219px;

	&:before {
		border-left: 6px solid transparent;
		left: 0;
	}
}

.message.messageSidebarOrientationRight	.newMessageBadge {
	right: -219px;
}

.message.messageReduced .newMessageBadge {
	right: -7px;
	top: 21px;
}

.message.messageSidebarOrientationRight,
.message.messageReduced {
	.newMessageBadge {
		border-radius: 5px 0 0 5px;

		&:before {
			border-right: 6px solid transparent;
			right: 0;
		}
	}
}

.messageBody {
	color: @wcfColor;
	display: block;
	line-height: 1.5;

	> div:not(.messageFooter) {
		overflow: hidden;
		padding-bottom: @wcfGapMedium;
	}

	> footer {
		padding-bottom: @wcfGapMedium;
	}

	> .messageSignature {
		color: @wcfDimmedColor;
	}

	.messageFooter {
		> *:not(:first-child) {
			margin-top: @wcfGapSmall;
		}

		> .messageFooterNote {
			border-left: 2px solid @wcfContainerBorderColor;
			color: @wcfDimmedColor;
			font-size: @wcfSmallFontSize;
			padding: @wcfGapTiny @wcfGapSmall;

			@messageFooterNoteGradientColor: fade(@wcfContainerBorderColor, 20%);
			.linearGradientNative(~"left top, @{messageFooterNoteGradientColor} 0%, transparent 40%");
		}
	}
}

.messageHeader + .messageBody > div,
.messageBody > div:not(.messageFooter):not(:first-child) {
	border-top: 1px dotted @wcfContainerBorderColor;
	padding: @wcfGapMedium 0;
}

.message .messageBody {
	padding: @wcfGapMedium @wcfGapLarge 1px;
}

.message .messageContent {
	background-color: @wcfContainerBackgroundColor;

	.messageHeader {
		padding: @wcfGapMedium @wcfGapLarge 0;
		position: relative;

		.messageHeadline {
			> h1 {
				color: @wcfColor;
				font-size: @wcfSubHeadlineFontSize;
				font-weight: bold;
				overflow: hidden;
				padding-right: 21px; // reserved space for new badge
				text-overflow: ellipsis;

				.textShadow(@wcfContainerBackgroundColor);

				+ p {
					margin-top: 2px;
				}
			}

			> p {
				font-size: @wcfSmallFontSize;

				> .likesBadge {
					font-size: 100%;
					margin: -2px 0 -1px 4px;
				}

				> .username:after {
					content: " - ";
				}
			}
		}

		.box32 > .messageHeadline > p:first-child {
			font-size: 100%;

			> .username {
				font-size: @wcfTitleFontSize;
				font-weight: bold;

				.textShadow(@wcfContainerBackgroundColor);
			}

			> .username {
				display: block;
			}

			> .username:after {
				content: "";
			}

			> .likesBadge {
				font-size: @wcfSmallFontSize;
				top: -1px;
			}
		}
	}
}

.message .messageSidebar {
	line-height: 1.3;
	margin-bottom: -1px;
	padding: @wcfGapMedium @wcfGapLarge @wcfGapLarge;
	position: relative;
	text-align: center;
	width: 170px; /* Width toggle */

	&:after {
		clear: both;
		content: '';
		display: block;
	}

	header .username {
		color: @wcfLinkColor;
		font-size: @wcfTitleFontSize;
		font-weight: bold;
		padding: 0 3px 1px;

		.textShadow(@wcfContainerHoverBackgroundColor);

		a {
			text-decoration: none;
		}
	}

	.userTitle {
		margin: 7px 0 0;
	}

	.userRank {
		margin: 2px 0 0;
	}

	.userAvatar {
		display: inline-block;
		margin: @wcfGapSmall 0 0;
		position: relative;
		text-align: left;

		> .badgeOnline {
			border-radius: 0 5px 5px 0;
			color: rgba(238, 255, 238, 1);
			bottom: 7px;
			left: -5px;
			position: absolute;
			text-transform: uppercase;

			.boxShadow(1px, 1px, rgba(0, 0, 0, .2), 3px);
			.linearGradient(darken(rgba(0, 153, 0, 1), 10%), rgba(0, 153, 0, 1), darken(rgba(0, 153, 0, 1), 10%));
			.textShadow(darken(rgba(0, 153, 0, 1), 10%));

			&:before {
				border-bottom: 4px solid darken(rgba(0, 153, 0, 1), 20%);
				border-left: 6px solid transparent;
				content: "";
				display: block;
				left: 0;
				position: absolute;
				top: -4px;
			}
		}
	}

	.userCredits {
		font-size: @wcfSmallFontSize;
		margin: @wcfGapSmall 0 0;
		overflow: hidden;
		padding: @wcfGapSmall 0 0;

		.dataList {
			> dt {
				width: 46%;
			}

			> dd {
				margin-left: 49%;
				word-wrap: break-word;
			}
		}
	}
}

.message:not(.messageReduced) .messageOptions {
	.clearfix();
}

.message:not(.messageReduced) .messageBody {
	.clearfix();
}

li:nth-child(2n+1) .message {
	&.messageSidebarOrientationLeft .messageHeader:after {
		border-right-color: @wcfContainerAccentBackgroundColor;
	}

	&.messageSidebarOrientationRight .messageHeader:after {
		border-left-color: @wcfContainerAccentBackgroundColor;
	}

	.messageContent {
		background-color: @wcfContainerAccentBackgroundColor;
	}
}

.messageReduced {
	.messageOptions > .breadcrumbs {
		bottom: 10px;
		left: 0;
		opacity: 1;
		position: relative;
	}
}

.messageCollapsed {
	color: @wcfDimmedColor;
	opacity: .8;
	padding: @wcfGapMedium @wcfGapLarge;

	.transition(opacity, .1s);

	&:hover {
		opacity: 1;
	}

	&.messageCollapsedExpandable {
		cursor: pointer;
	}

	h1 {
		font-size: @wcfSmallFontSize;
	}

	.messageCounter {
		padding-top: 3px;
	}

	&.jsMarked {
		background-color: @wcfSelectedBackgroundColor !important;
		color: @wcfColor;

		a {
			color: @wcfColor;
		}
	}
}

@media only screen and (max-width: 800px) {
	.messageCollapsed {
		padding: @wcfGapSmall;
	}
}

@media only screen and (min-width: 641px) and (max-width: 800px) {
	.messageCollapsed {
		padding: @wcfGapSmall @wcfGapMedium;
	}
}

/* quick reply and inline editor */
.messageBody > span.icon-spinner {
	left: 50%;
	margin: -21px -21px 0 0;
	position: absolute;
	top: 50%;
}

#messageQuickReply {
	.formSubmit {
		padding-bottom: @wcfGapMedium;
	}
}

/* message quotes */
#showQuotes {
	bottom: @wcfGapLarge + @wcfGapTiny;
	cursor: pointer;
	opacity: .7;
	position: fixed;
	right: @wcfGapLarge + @wcfGapTiny;

	.transition(opacity, .2s);

	&:hover {
		opacity: 1;
	}
}

#messageQuoteList {
	max-width: 800px !important;

	li {
		&:not(:first-child) {
			margin-top: @wcfGapSmall;
		}

		> span {
			float: left;
			width: 40px;

			> input {
				vertical-align: bottom;
			}

			> span {
				cursor: pointer;
				vertical-align: middle;
			}
		}

		div.jsQuote {
			margin-left: 60px;
		}

		div.jsFullQuote {
			display: none;
		}
	}
}

#quoteManagerCopy {
	cursor: pointer;

	.pointer {
		border-width: 5px 5px 0;
		bottom: -5px;
		margin-left: -5px;
		top: auto;
	}
}

/* share buttons */
.messageShareButtons {
	> ul > li {
		display: inline-block;

		> a {
			text-decoration: none;

			> .icon {
				height: 28px;
			}
		}

		> .badge {
			background-color: @wcfContainerBackgroundColor;
			border: 1px solid @wcfContainerBorderColor;
			border-radius: 3px;
			color: @wcfColor;
			line-height: 23px;
			padding: 0 7px;
			position: relative;
			vertical-align: 1px;

			&:before {
				border: 6px solid @wcfContainerBorderColor;
				border-color: transparent @wcfContainerBorderColor transparent transparent;
				content: "";
				display: block;
				height: 0;
				margin-top: -6px;
				position: absolute;
				right: 100%;
				top: 50%;
				width: 0;
			}

			&:after {
				border: 6px solid @wcfContainerBackgroundColor;
				border-color: transparent @wcfContainerBackgroundColor transparent transparent;
				content: "";
				display: block;
				height: 0;
				margin-right: -1px;
				margin-top: -6px;
				position: absolute;
				right: 100%;
				top: 50%;
				width: 0;
			}
		}
	}

	.jsShareFacebook {
		> a > .icon {
			color: rgb(59, 89, 152);
		}
	}

	.jsShareTwitter {
		> a > .icon {
			color: rgb(64, 153, 255);
		}
	}

	.jsShareGoogle {
		> a > .icon {
			color: rgb(211, 72, 54);
		}
	}

	.jsShareReddit {
		> a > img {
			vertical-align: -7px;
			padding: 0 4px;
		}
	}
}

.contentNavigation > .messageShareButtons {
	float: right;
	margin-right: @wcfGapMedium;
	margin-top: 0;
}

.messageSearchResultList {
	> li > .box48 > div > .containerHeadline > h3 {
		padding-right: 100px;
	}
}

.likeButton.active {
	.icon {
		color: rgba(0, 153, 0, 1);
	}
}

.dislikeButton.active {
	.icon {
		color: rgba(204, 0, 0, 1);
	}
}

/* ckeditor fixes */
.cke_editor_text {
	border-style: solid !important;
	padding: 0 !important;
}

.cke_source,
.cke_wysiwyg_div {
	padding: 8px !important;
}

/* fixes textarea width */
.cke_source {
	box-sizing: border-box !important;
	-moz-box-sizing: border-box !important;
	-webkit-box-sizing: border-box !important;
}

.cke_combo__fontsize .cke_combo_text {
	width: auto !important;
}

.cke_dialog_background_cover {
	background-color: #000 !important;
}

.cke_wysiwyg_div,
.cke_inner {
	background-color: transparent !important;
}

/* fixes list styling */
.cke_wysiwyg_div {
	ul,
	ol {
		.nativeList;
	}

	ul {
		list-style-type: disc;
	}

	ol {
		list-style-type: decimal;
	}
}

@media only screen and (max-width: 800px) {
	.message.messageSidebarOrientationLeft,
	.message.messageSidebarOrientationRight {
		.messageContent {
			border: 0;
			margin: 0;
		}

		.messageSidebar {
			float: none;
		}

		.messageHeader {
			&:before,
			&:after {
				display: none;
			}
		}
	}

	.message .messageHeader .messageQuickOptions,
	.message .messageBody .messageSignature,
	.message .messageSidebar .userCredits {
		display: none;
	}

	.message .messageSidebar {
		padding: 7px;
		text-align: left;
		width: auto;

		> div {
			margin-left: 40px;
		}

		.userAvatar {
			left: 7px;
			position: absolute;
			top: 0;

			img {
				height: 32px !important;
				width: 32px !important;
			}

			> .badgeOnline {
				display: none;
			}
		}

		.userTitle {
			margin-top: -2px;
		}
	}

	/* reduce paddings */
	.message .messageContent .messageHeader {
		padding: 7px 7px 0;
	}

	.message .messageBody {
		padding: 7px;
	}

	.message .messageBody > div:not(.messageFooter) {
		padding: 7px 0;
	}

	.message .messageBody > footer {
		padding: 0;
		position: absolute;
		right: 7px;
		top: 7px;
	}

	.message .messageOptions nav {
		opacity: 1;
		position: static;
		text-align: left;
	}

	.message.messageReduced .messageOptions {
		display: none;
	}

	.message .newMessageBadge {
		display: none;
	}
}

@media only screen and (min-width: 641px) and (max-width: 800px) {
	.message .messageSidebar,
	.message .messageContent .messageHeader,
	.message .messageBody {
		padding-left: @wcfGapMedium;
		padding-right: @wcfGapMedium;
	}

	.message .messageSidebar {
		.userAvatar {
			left: @wcfGapMedium;
		}
	}

	.message .messageBody > footer {
		right: @wcfGapMedium;
	}
}

@media only screen and (max-width: 800px) {
	.moderationList {
		thead {
			display: none;
		}

		tbody {
			.columnAssignedUserID,
			.columnLastChangeTime {
				display: none;
			}
		}
	}
}


Small style optimization

Small style optimization

/* ### message groups ### */
.messageGroupList {
	.columnSubject {
		> .labelList {
			float: right;
			padding-left: 7px;
		}

		> h3 {
			> .messageGroupLink {
				font-size: @wcfTitleFontSize;
			}

			> .badge.label {
				top: -2px;
			}
		}

		> small {
			display: block;
		}

		> nav {
			font-size: @wcfSmallFontSize;

			> ul > li {
				display: inline;
			}
		}
	}

	tr {
		&.new .columnSubject > h3 > .messageGroupLink {
			font-weight: bold;
		}

		&.new .columnAvatar div > p > img,
		&:hover .columnAvatar div > p > img {
			opacity: 1;
		}

		&.messageDisabled {
			color: @wcfDisabledColor;

			> td {
				background-color: @wcfDisabledBackgroundColor !important;
			}

			a:not(.badge) {
				color: @wcfDisabledColor;
			}
		}

		&.messageDeleted {
			color: @wcfDeletedColor;

			> td {
				background-color: @wcfDeletedBackgroundColor !important;
			}

			a:not(.badge) {
				color: @wcfDeletedColor;
			}
		}

		.columnSubject .statusDisplay .pageNavigation {
			opacity: 0;

			.transition(opacity, .2s);
		}

		&:hover .columnSubject .statusDisplay .pageNavigation {
			opacity: 1;
		}

		&.new .columnAvatar > div {
			&:after {
				color: @wcfLinkColor;
				content: "\f069";
				font-family: FontAwesome;
				font-weight: normal !important;
				font-style: normal !important;
				font-size: 14px;
				position: absolute;
				text-decoration: none !important;
				top: -4px;
				right: -2px;

				.textShadow(@wcfContainerBackgroundColor);
			}
		}
	}

	.columnAvatar {
		div {
			position: relative;
			width: 40px;
			height: 38px;

			> p > img {
				opacity: .6;

				.transition(opacity, .2s);
			}
		}

		.myAvatar {
			position: absolute;
			width: 16px;
			height: 16px;
			bottom: -2px;
			left: 24px;
			opacity: 1;

			.boxShadow(0, 0, rgba(0, 0, 0, .3), 3px);
		}
	}

	.columnLastPost {
		white-space: nowrap;

		> div > div > small {
			color: @wcfDimmedColor;
		}
	}
}

/* ### messages ### */
@media only screen and (min-width: 801px) {
	.messageList {
		.messageGroupStarter {
			position: relative;

			> .message:after {
				content: "\f005";
				font-family: FontAwesome;
				font-size: 14px;
				display: block;
				left: 4px;
				position: absolute;
				top: 2px;

				.textShadow(@wcfSidebarBackgroundColor);
			}

			> .message.messageSidebarOrientationRight:after {
				left: auto;
				right: 4px;
			}
		}
	}
}

.message {
	background-color: @wcfContainerHoverBackgroundColor;
	border: 1px solid @wcfContainerBorderColor;
	//overflow: hidden; /* todo: fixes floating issues when using message on pages with a sidebar */
	position: relative;

	&:hover {
		.messageHeader .messageQuickOptions > li > a {
			opacity: 1;
		}

		.messageOptions nav {
			opacity: 1;
		}
	}

	&.messageDisabled {
		background-color: @wcfDisabledBackgroundColor;

		.messageSidebar {
			color: @wcfDisabledColor;

			a {
				color: @wcfDisabledColor;
			}
		}
	}

	&.messageDeleted {
		background-color: @wcfDeletedBackgroundColor;

		.messageSidebar {
			color: @wcfDeletedColor;

			a {
				color: @wcfDeletedColor;
			}
		}
	}

	&.jsMarked {
		background-color: @wcfSelectedBackgroundColor;

		.messageSidebar {
			color: @wcfSelectedColor;

			a {
				color: @wcfSelectedColor;
			}
		}
	}

	.messageOptions {
		font-size: @wcfSmallFontSize;
		position: relative;

		&.forceHidden nav {
			display: none !important;
		}

		&.forceOpen nav {
			opacity: 1;
		}

		nav {
			bottom: -2px;
			opacity: 0;
			position: absolute;
			right: -22px;
			text-align: right;

			.transition(opacity, .1s);

			ul.smallButtons {
				> li {
					a.button {
						.borderRadius(0);
					}
				}
			}
		}
	}

	.messageHeader {
		.messageQuickOptions {
			float: right;

			> li {
				display: inline-block;

				> a {
					opacity: .6;

					.transition(opacity, .2s);

					> span.icon {
						color: @wcfDimmedColor;

						.transition(color, .2s);
					}

					&:hover {
						> span.icon {
							color: @wcfLinkColor;
						}
					}
				}
			}

			input[type=checkbox] {
				position: relative;
				top: 1px;
			}
		}

		.permalink {
			color: @wcfDimmedColor;
		}
	}

	&.dividers {
		.userCredits {
			border-top: 1px solid @wcfContainerBorderColor;
		}
	}
}

.touch .message .messageOptions nav {
	opacity: 1;
}

@media only screen and (max-width: 800px) {
	.message {
		border-width: 1px 0;
	}
}

/* sidebars orientations */
.message.messageSidebarOrientationLeft {
	.messageContent {
		border-left: 1px solid @wcfContainerBorderColor;
		margin: 0 0 0 211px;
	}

	.messageSidebar {
		float: left;
	}
}

.message.messageSidebarOrientationRight {
	.messageContent {
		border-right: 1px solid @wcfContainerBorderColor;
		margin: 0 211px 0 0;
	}

	.messageSidebar {
		float: right;
	}
}

/* pointer */
.message.messageSidebarOrientationLeft,
.message.messageSidebarOrientationRight {
	.messageHeader {
		&:before,
		&:after {
			border-width: 20px;
			content: "";
			display: block;
			height: 0;
			position: absolute;
			top: 35px;
			width: 0;
		}

		&:before {
			z-index: 100;
		}

		&:after {
			z-index: 101;
		}
	}
}

.message.messageSidebarOrientationLeft {
	.messageHeader {
		&:before,
		&:after {
			border-style: inset solid inset none;
		}

		&:before {
			border-color: transparent @wcfContainerBorderColor transparent transparent;
			left: -20px;
		}

		&:after {
			border-color: transparent @wcfContainerBackgroundColor transparent transparent;
			left: -19px;
		}
	}
}

.message.messageSidebarOrientationRight {
	.messageHeader {
		&:before,
		&:after {
			border-style: inset none inset solid;
		}

		&:before {
			border-color: transparent transparent transparent @wcfContainerBorderColor;
			right: -20px;
		}

		&:after {
			border-color: transparent transparent transparent @wcfContainerBackgroundColor;
			right: -19px;
		}
	}
}

/* new message badge */
.message .newMessageBadge {
	color: @wcfTabularBoxColor;
	display: block;
	font-size: @wcfSmallFontSize;
	font-weight: bold;
	padding: 6px 10px;
	position: absolute;
	text-transform: uppercase;
	top: 24px;

	.boxShadow(1px, 1px, rgba(0, 0, 0, .2), 3px);
	.linearGradient(darken(@wcfTabularBoxBackgroundColor, 10%), @wcfTabularBoxBackgroundColor, darken(@wcfTabularBoxBackgroundColor, 10%));
	.textShadow(darken(@wcfTabularBoxBackgroundColor, 10%));

	&:before {
		border-bottom: 4px solid darken(@wcfTabularBoxBackgroundColor, 20%);
		content: "";
		display: block;
		position: absolute;
		top: -4px;
	}
}

.message.messageSidebarOrientationLeft .newMessageBadge {
	left: -219px;

	.borderRadius(0, 5px, 5px, 0);

	&:before {
		border-left: 6px solid transparent;
		left: 0;
	}
}

.message.messageSidebarOrientationRight	.newMessageBadge {
	right: -219px;
}

.message.messageReduced .newMessageBadge {
	right: -7px;
	top: 21px;
}

.message.messageSidebarOrientationRight,
.message.messageReduced {
	.newMessageBadge {
		.borderRadius(5px, 0, 0, 5px);

		&:before {
			border-right: 6px solid transparent;
			right: 0;
		}
	}
}

.message .messageBody {
	color: @wcfColor;
	display: block;
	line-height: 1.5;
	padding: @wcfGapMedium @wcfGapLarge 1px;
	/*position: relative;*/

	> div:not(.messageFooter) {
		border-top: 1px dotted @wcfContainerBorderColor;
		overflow: hidden;
		padding: @wcfGapMedium 0;
	}

	> footer {
		padding-bottom: @wcfGapMedium;
	}

	> .messageSignature {
		color: @wcfDimmedColor;
	}

	.messageFooter {
		> *:not(:first-child) {
			margin-top: @wcfGapSmall;
		}

		> .messageFooterNote {
			border-left: 2px solid @wcfContainerBorderColor;
			color: @wcfDimmedColor;
			font-size: @wcfSmallFontSize;
			padding: @wcfGapTiny @wcfGapSmall;

			@messageFooterNoteGradientColor: fade(@wcfContainerBorderColor, 20%);
			.linearGradientNative(~"left top, @{messageFooterNoteGradientColor} 0%, transparent 40%");
		}
	}
}

.message .messageContent {
	background-color: @wcfContainerBackgroundColor;

	.messageHeader {
		padding: @wcfGapMedium @wcfGapLarge 0;
		position: relative;

		.messageHeadline {
			> h1 {
				color: @wcfColor;
				font-size: @wcfSubHeadlineFontSize;
				font-weight: bold;
				overflow: hidden;
				padding-right: 21px; // reserved space for new badge
				text-overflow: ellipsis;

				.textShadow(@wcfContainerBackgroundColor);

				+ p {
					margin-top: 2px;
				}
			}

			> p {
				font-size: @wcfSmallFontSize;

				> .likesBadge {
					font-size: 100%;
					margin: -2px 0 -1px 4px;
				}

				> .username:after {
					content: " - ";
				}
			}
		}

		.box32 > .messageHeadline > p:first-child {
			font-size: 100%;

			> .username {
				font-size: @wcfTitleFontSize;
				font-weight: bold;

				.textShadow(@wcfContainerBackgroundColor);
			}

			> .username {
				display: block;
			}

			> .username:after {
				content: "";
			}

			> .likesBadge {
				font-size: @wcfSmallFontSize;
				top: -1px;
			}
		}
	}
}

.message .messageSidebar {
	line-height: 1.3;
	margin-bottom: -1px;
	padding: @wcfGapMedium @wcfGapLarge @wcfGapLarge;
	position: relative;
	text-align: center;
	width: 170px; /* Width toggle */

	&:after {
		clear: both;
		content: '';
		display: block;
	}

	header .username {
		color: @wcfLinkColor;
		font-size: @wcfTitleFontSize;
		font-weight: bold;
		padding: 0 3px 1px;

		.textShadow(@wcfContainerHoverBackgroundColor);

		a {
			text-decoration: none;
		}
	}

	.userTitle {
		margin: 7px 0 0;
	}

	.userRank {
		margin: 2px 0 0;
	}

	.userAvatar {
		display: inline-block;
		margin: @wcfGapSmall 0 0;
		position: relative;
		text-align: left;

		> .badgeOnline {
			color: rgba(238, 255, 238, 1);
			bottom: 7px;
			left: -5px;
			position: absolute;
			text-transform: uppercase;

			.borderRadius(0, 5px, 5px, 0);
			.boxShadow(1px, 1px, rgba(0, 0, 0, .2), 3px);
			.linearGradient(darken(rgba(0, 153, 0, 1), 10%), rgba(0, 153, 0, 1), darken(rgba(0, 153, 0, 1), 10%));
			.textShadow(darken(rgba(0, 153, 0, 1), 10%));

			&:before {
				border-bottom: 4px solid darken(rgba(0, 153, 0, 1), 20%);
				border-left: 6px solid transparent;
				content: "";
				display: block;
				left: 0;
				position: absolute;
				top: -4px;
			}
		}
	}

	.userCredits {
		font-size: @wcfSmallFontSize;
		margin: @wcfGapSmall 0 0;
		overflow: hidden;
		padding: @wcfGapSmall 0 0;

		.dataList {
			> dt {
				width: 46%;
			}

			> dd {
				margin-left: 49%;
				word-wrap: break-word;
			}
		}
	}
}

.message:not(.messageReduced) .messageOptions {
	.clearfix();
}

.message:not(.messageReduced) .messageBody {
	.clearfix();
}

li:nth-child(2n+1) .message {
	&.messageSidebarOrientationLeft .messageHeader:after {
		border-right-color: @wcfContainerAccentBackgroundColor;
	}

	&.messageSidebarOrientationRight .messageHeader:after {
		border-left-color: @wcfContainerAccentBackgroundColor;
	}

	.messageContent {
		background-color: @wcfContainerAccentBackgroundColor;
	}
}

.messageReduced {
	.messageOptions > .breadcrumbs {
		bottom: 10px;
		left: 0;
		opacity: 1;
		position: relative;
	}
}

.messageCollapsed {
	color: @wcfDimmedColor;
	opacity: .8;
	padding: @wcfGapMedium @wcfGapLarge;

	.transition(opacity, .1s);

	&:hover {
		opacity: 1;
	}

	&.messageCollapsedExpandable {
		cursor: pointer;
	}

	h1 {
		font-size: @wcfSmallFontSize;
	}

	.messageCounter {
		padding-top: 3px;
	}

	&.jsMarked {
		background-color: @wcfSelectedBackgroundColor !important;
		color: @wcfColor;

		a {
			color: @wcfColor;
		}
	}
}

@media only screen and (max-width: 800px) {
	.messageCollapsed {
		padding: @wcfGapSmall;
	}
}

@media only screen and (min-width: 641px) and (max-width: 800px) {
	.messageCollapsed {
		padding: @wcfGapSmall @wcfGapMedium;
	}
}

/* quick reply and inline editor */
.messageBody > span.icon-spinner {
	left: 50%;
	margin: -21px -21px 0 0;
	position: absolute;
	top: 50%;
}

#messageQuickReply {
	.formSubmit {
		padding-bottom: @wcfGapMedium;
	}
}

/* message quotes */
#showQuotes {
	bottom: @wcfGapLarge + @wcfGapTiny;
	cursor: pointer;
	opacity: .7;
	position: fixed;
	right: @wcfGapLarge + @wcfGapTiny;

	.transition(opacity, .2s);

	&:hover {
		opacity: 1;
	}
}

#messageQuoteList {
	max-width: 800px !important;

	li {
		&:not(:first-child) {
			margin-top: @wcfGapSmall;
		}

		> span {
			float: left;
			width: 40px;

			> input {
				vertical-align: bottom;
			}

			> span {
				cursor: pointer;
				vertical-align: middle;
			}
		}

		div.jsQuote {
			margin-left: 60px;
		}

		div.jsFullQuote {
			display: none;
		}
	}
}

#quoteManagerCopy {
	cursor: pointer;

	.pointer {
		border-width: 5px 5px 0;
		bottom: -5px;
		margin-left: -5px;
		top: auto;
	}
}

/* share buttons */
.messageShareButtons {
	> ul > li {
		display: inline-block;

		> a {
			text-decoration: none;

			> .icon {
				height: 28px;
			}
		}

		> .badge {
			background-color: @wcfContainerBackgroundColor;
			border: 1px solid @wcfContainerBorderColor;
			color: @wcfColor;
			line-height: 23px;
			padding: 0 7px;
			position: relative;
			vertical-align: 1px;

			.borderRadius(3px);

			&:before {
				border: 6px solid @wcfContainerBorderColor;
				border-color: transparent @wcfContainerBorderColor transparent transparent;
				content: "";
				display: block;
				height: 0;
				margin-top: -6px;
				position: absolute;
				right: 100%;
				top: 50%;
				width: 0;
			}

			&:after {
				border: 6px solid @wcfContainerBackgroundColor;
				border-color: transparent @wcfContainerBackgroundColor transparent transparent;
				content: "";
				display: block;
				height: 0;
				margin-right: -1px;
				margin-top: -6px;
				position: absolute;
				right: 100%;
				top: 50%;
				width: 0;
			}
		}
	}

	.jsShareFacebook {
		> a > .icon {
			color: rgb(59, 89, 152);
		}
	}

	.jsShareTwitter {
		> a > .icon {
			color: rgb(64, 153, 255);
		}
	}

	.jsShareGoogle {
		> a > .icon {
			color: rgb(211, 72, 54);
		}
	}

	.jsShareReddit {
		> a > img {
			vertical-align: -7px;
			padding: 0 4px;
		}
	}
}

.contentNavigation > .messageShareButtons {
	float: right;
	margin-right: @wcfGapMedium;
	margin-top: 0;
}

/* ckeditor fixes */
.cke_editor_text {
	border-style: solid !important;
	padding: 0 !important;
}

.cke_source {
	padding: 8px !important;
}

.cke_combo__fontsize .cke_combo_text {
	width: auto !important;
}

.cke_dialog_background_cover {
	background-color: #000 !important;
}

@media only screen and (max-width: 800px) {
	.message.messageSidebarOrientationLeft,
	.message.messageSidebarOrientationRight {
		.messageContent {
			border: 0;
			margin: 0;
		}

		.messageSidebar {
			float: none;
		}

		.messageHeader {
			&:before,
			&:after {
				display: none;
			}
		}
	}

	.message .messageHeader .messageQuickOptions,
	.message .messageBody .messageSignature,
	.message .messageSidebar .userCredits {
		display: none;
	}

	.message .messageSidebar {
		padding: 7px;
		text-align: left;
		width: auto;

		> div {
			margin-left: 40px;
		}

		.userAvatar {
			left: 7px;
			position: absolute;
			top: 0;

			img {
				height: 32px !important;
				width: 32px !important;
			}

			> .badgeOnline {
				display: none;
			}
		}

		.userTitle {
			margin-top: -2px;
		}
	}

	/* reduce paddings */
	.message .messageContent .messageHeader {
		padding: 7px 7px 0;
	}

	.message .messageBody {
		padding: 7px;
	}

	.message .messageBody > div:not(.messageFooter) {
		padding: 7px 0;
	}

	.message .messageBody > footer {
		padding: 0;
		position: absolute;
		right: 7px;
		top: 7px;
	}

	.message .messageOptions nav {
		opacity: 1;
		position: static;
		text-align: left;
	}

	.message.messageReduced .messageOptions {
		display: none;
	}

	.message .newMessageBadge {
		display: none;
	}
}

@media only screen and (min-width: 641px) and (max-width: 800px) {
	.message .messageSidebar,
	.message .messageContent .messageHeader,
	.message .messageBody {
		padding-left: @wcfGapMedium;
		padding-right: @wcfGapMedium;
	}

	.message .messageSidebar {
		.userAvatar {
			left: @wcfGapMedium;
		}
	}

	.message .messageBody > footer {
		right: @wcfGapMedium;
	}
}

/* ### message groups ### */
.messageGroupList {
	.columnSubject {
		> .labelList {
			float: right;
			padding-left: 7px;
		}

		> h3 {
			> .messageGroupLink {
				font-size: @wcfTitleFontSize;
			}

			> .badge.label {
				top: -2px;
			}
		}

		> small {
			display: block;
		}

		> nav {
			font-size: @wcfSmallFontSize;

			> ul > li {
				display: inline;
			}
		}
	}

	tr {
		&.new .columnSubject > h3 > .messageGroupLink {
			font-weight: bold;
		}

		&.new .columnAvatar div > p > img,
		&:hover .columnAvatar div > p > img {
			opacity: 1;
		}

		&.messageDisabled {
			color: @wcfDisabledColor;

			> td {
				background-color: @wcfDisabledBackgroundColor !important;
			}

			a:not(.badge) {
				color: @wcfDisabledColor;
			}
		}

		&.messageDeleted {
			color: @wcfDeletedColor;

			> td {
				background-color: @wcfDeletedBackgroundColor !important;
			}

			a:not(.badge) {
				color: @wcfDeletedColor;
			}
		}

		.columnSubject .statusDisplay .pageNavigation {
			opacity: 0;

			.transition(opacity, .2s);
		}

		&:hover .columnSubject .statusDisplay .pageNavigation {
			opacity: 1;
		}

		&.new .columnAvatar > div {
			&:after {
				color: @wcfLinkColor;
				content: "\f069";
				font-family: FontAwesome;
				font-weight: normal !important;
				font-style: normal !important;
				font-size: 14px;
				position: absolute;
				text-decoration: none !important;
				top: -4px;
				right: -2px;

				.textShadow(@wcfContainerBackgroundColor);
			}
		}
	}

	.columnAvatar {
		div {
			position: relative;
			width: 40px;
			height: 38px;

			> p > img {
				opacity: .6;

				.transition(opacity, .2s);
			}
		}

		.myAvatar {
			position: absolute;
			width: 16px;
			height: 16px;
			bottom: -2px;
			left: 24px;
			opacity: 1;

			.boxShadow(0, 0, rgba(0, 0, 0, .3), 3px);
		}
	}

	.columnLastPost {
		white-space: nowrap;

		> div > div > small {
			color: @wcfDimmedColor;
		}
	}
}

/* ### messages ### */
@media only screen and (min-width: 801px) {
	.messageList {
		.messageGroupStarter {
			position: relative;

			> .message:after {
				content: "\f005";
				font-family: FontAwesome;
				font-size: 14px;
				display: block;
				left: 4px;
				position: absolute;
				top: 2px;

				.textShadow(@wcfSidebarBackgroundColor);
			}

			> .message.messageSidebarOrientationRight:after {
				left: auto;
				right: 4px;
			}
		}
	}
}

.message {
	background-color: @wcfContainerHoverBackgroundColor;
	border: 1px solid @wcfContainerBorderColor;
	//overflow: hidden; /* todo: fixes floating issues when using message on pages with a sidebar */
	position: relative;

	&:hover {
		.messageHeader .messageQuickOptions > li > a {
			opacity: 1;
		}

		.messageOptions nav {
			opacity: 1;
		}
	}

	&.messageDisabled {
		background-color: @wcfDisabledBackgroundColor;

		.messageSidebar {
			color: @wcfDisabledColor;

			a {
				color: @wcfDisabledColor;
			}
		}
	}

	&.messageDeleted {
		background-color: @wcfDeletedBackgroundColor;

		.messageSidebar {
			color: @wcfDeletedColor;

			a {
				color: @wcfDeletedColor;
			}
		}
	}

	&.jsMarked {
		background-color: @wcfSelectedBackgroundColor;

		.messageSidebar {
			color: @wcfSelectedColor;

			a {
				color: @wcfSelectedColor;
			}
		}
	}

	.messageOptions {
		font-size: @wcfSmallFontSize;
		position: relative;

		&.forceHidden nav {
			display: none !important;
		}

		&.forceOpen nav {
			opacity: 1;
		}

		nav {
			bottom: -2px;
			opacity: 0;
			position: absolute;
			right: -22px;
			text-align: right;

			.transition(opacity, .1s);

			ul.smallButtons {
				> li {
					a.button {
						.borderRadius(0);
					}
				}
			}
		}
	}

	.messageHeader {
		.messageQuickOptions {
			float: right;

			> li {
				display: inline-block;

				> a {
					opacity: .6;

					.transition(opacity, .2s);

					> span.icon {
						color: @wcfDimmedColor;

						.transition(color, .2s);
					}

					&:hover {
						> span.icon {
							color: @wcfLinkColor;
						}
					}
				}
			}

			input[type=checkbox] {
				position: relative;
				top: 1px;
			}
		}

		.permalink {
			color: @wcfDimmedColor;
		}
	}

	&.dividers {
		.userCredits {
			border-top: 1px solid @wcfContainerBorderColor;
		}
	}
}

.touch .message .messageOptions nav {
	opacity: 1;
}

@media only screen and (max-width: 800px) {
	.message {
		border-width: 1px 0;
	}
}

/* sidebars orientations */
.message.messageSidebarOrientationLeft {
	.messageContent {
		border-left: 1px solid @wcfContainerBorderColor;
		margin: 0 0 0 211px;
	}

	.messageSidebar {
		float: left;
	}
}

.message.messageSidebarOrientationRight {
	.messageContent {
		border-right: 1px solid @wcfContainerBorderColor;
		margin: 0 211px 0 0;
	}

	.messageSidebar {
		float: right;
	}
}

/* pointer */
.message.messageSidebarOrientationLeft,
.message.messageSidebarOrientationRight {
	.messageHeader {
		&:before,
		&:after {
			border-width: 20px;
			content: "";
			display: block;
			height: 0;
			position: absolute;
			top: 35px;
			width: 0;
		}

		&:before {
			z-index: 100;
		}

		&:after {
			z-index: 101;
		}
	}
}

.message.messageSidebarOrientationLeft {
	.messageHeader {
		&:before,
		&:after {
			border-style: inset solid inset none;
		}

		&:before {
			border-color: transparent @wcfContainerBorderColor transparent transparent;
			left: -20px;
		}

		&:after {
			border-color: transparent @wcfContainerBackgroundColor transparent transparent;
			left: -19px;
		}
	}
}

.message.messageSidebarOrientationRight {
	.messageHeader {
		&:before,
		&:after {
			border-style: inset none inset solid;
		}

		&:before {
			border-color: transparent transparent transparent @wcfContainerBorderColor;
			right: -20px;
		}

		&:after {
			border-color: transparent transparent transparent @wcfContainerBackgroundColor;
			right: -19px;
		}
	}
}

/* new message badge */
.message .newMessageBadge {
	color: @wcfTabularBoxColor;
	display: block;
	font-size: @wcfSmallFontSize;
	font-weight: bold;
	padding: 6px 10px;
	position: absolute;
	text-transform: uppercase;
	top: 24px;

	.boxShadow(1px, 1px, rgba(0, 0, 0, .2), 3px);
	.linearGradient(darken(@wcfTabularBoxBackgroundColor, 10%), @wcfTabularBoxBackgroundColor, darken(@wcfTabularBoxBackgroundColor, 10%));
	.textShadow(darken(@wcfTabularBoxBackgroundColor, 10%));

	&:before {
		border-bottom: 4px solid darken(@wcfTabularBoxBackgroundColor, 20%);
		content: "";
		display: block;
		position: absolute;
		top: -4px;
	}
}

.message.messageSidebarOrientationLeft .newMessageBadge {
	left: -219px;

	.borderRadius(0, 5px, 5px, 0);

	&:before {
		border-left: 6px solid transparent;
		left: 0;
	}
}

.message.messageSidebarOrientationRight	.newMessageBadge {
	right: -219px;
}

.message.messageReduced .newMessageBadge {
	right: -7px;
	top: 21px;
}

.message.messageSidebarOrientationRight,
.message.messageReduced {
	.newMessageBadge {
		.borderRadius(5px, 0, 0, 5px);

		&:before {
			border-right: 6px solid transparent;
			right: 0;
		}
	}
}

.message .messageBody {
	color: @wcfColor;
	display: block;
	line-height: 1.5;
	padding: @wcfGapMedium @wcfGapLarge 1px;
	/*position: relative;*/

	> div:not(.messageFooter) {
		border-top: 1px dotted @wcfContainerBorderColor;
		overflow: hidden;
		padding: @wcfGapMedium 0;
	}

	> footer {
		padding-bottom: @wcfGapMedium;
	}

	> .messageSignature {
		color: @wcfDimmedColor;
	}

	.messageFooter {
		> *:not(:first-child) {
			margin-top: @wcfGapSmall;
		}

		> .messageFooterNote {
			border-left: 2px solid @wcfContainerBorderColor;
			color: @wcfDimmedColor;
			font-size: @wcfSmallFontSize;
			padding: @wcfGapTiny @wcfGapSmall;

			@messageFooterNoteGradientColor: fade(@wcfContainerBorderColor, 20%);
			.linearGradientNative(~"left top, @{messageFooterNoteGradientColor} 0%, transparent 40%");
		}
	}
}

.message .messageContent {
	background-color: @wcfContainerBackgroundColor;

	.messageHeader {
		padding: @wcfGapMedium @wcfGapLarge 0;
		position: relative;

		.messageHeadline {
			> h1 {
				color: @wcfColor;
				font-size: @wcfSubHeadlineFontSize;
				font-weight: bold;
				overflow: hidden;
				padding-right: 21px; // reserved space for new badge
				text-overflow: ellipsis;

				.textShadow(@wcfContainerBackgroundColor);

				+ p {
					margin-top: 2px;
				}
			}

			> p {
				font-size: @wcfSmallFontSize;

				> .likesBadge {
					font-size: 100%;
					margin: -2px 0 -1px 4px;
				}

				> .username:after {
					content: " - ";
				}
			}
		}

		.box32 > .messageHeadline > p:first-child {
			font-size: 100%;

			> .username {
				font-size: @wcfTitleFontSize;
				font-weight: bold;

				.textShadow(@wcfContainerBackgroundColor);
			}

			> .username {
				display: block;
			}

			> .username:after {
				content: "";
			}

			> .likesBadge {
				font-size: @wcfSmallFontSize;
				top: -1px;
			}
		}
	}
}

.message .messageSidebar {
	line-height: 1.3;
	margin-bottom: -1px;
	padding: @wcfGapMedium @wcfGapLarge @wcfGapLarge;
	position: relative;
	text-align: center;
	width: 170px; /* Width toggle */

	&:after {
		clear: both;
		content: '';
		display: block;
	}

	header .username {
		color: @wcfLinkColor;
		font-size: @wcfTitleFontSize;
		font-weight: bold;
		padding: 0 3px 1px;

		.textShadow(@wcfContainerHoverBackgroundColor);

		a {
			text-decoration: none;
		}
	}

	.userTitle {
		margin: 7px 0 0;
	}

	.userRank {
		margin: 2px 0 0;
	}

	.userAvatar {
		display: inline-block;
		margin: @wcfGapSmall 0 0;
		position: relative;
		text-align: left;

		> .badgeOnline {
			color: rgba(238, 255, 238, 1);
			bottom: 7px;
			left: -5px;
			position: absolute;
			text-transform: uppercase;

			.borderRadius(0, 5px, 5px, 0);
			.boxShadow(1px, 1px, rgba(0, 0, 0, .2), 3px);
			.linearGradient(darken(rgba(0, 153, 0, 1), 10%), rgba(0, 153, 0, 1), darken(rgba(0, 153, 0, 1), 10%));
			.textShadow(darken(rgba(0, 153, 0, 1), 10%));

			&:before {
				border-bottom: 4px solid darken(rgba(0, 153, 0, 1), 20%);
				border-left: 6px solid transparent;
				content: "";
				display: block;
				left: 0;
				position: absolute;
				top: -4px;
			}
		}
	}

	.userCredits {
		font-size: @wcfSmallFontSize;
		margin: @wcfGapSmall 0 0;
		overflow: hidden;
		padding: @wcfGapSmall 0 0;

		.dataList {
			> dt {
				width: 45%;
			}

			> dd {
				margin-left: 48%;
				word-wrap: break-word;
			}
		}
	}
}

.message:not(.messageReduced) .messageOptions {
	.clearfix();
}

.message:not(.messageReduced) .messageBody {
	.clearfix();
}

li:nth-child(2n+1) .message {
	&.messageSidebarOrientationLeft .messageHeader:after {
		border-right-color: @wcfContainerAccentBackgroundColor;
	}

	&.messageSidebarOrientationRight .messageHeader:after {
		border-left-color: @wcfContainerAccentBackgroundColor;
	}

	.messageContent {
		background-color: @wcfContainerAccentBackgroundColor;
	}
}

.messageReduced {
	.messageOptions > .breadcrumbs {
		bottom: 10px;
		left: 0;
		opacity: 1;
		position: relative;
	}
}

.messageCollapsed {
	color: @wcfDimmedColor;
	opacity: .8;
	padding: @wcfGapMedium @wcfGapLarge;

	.transition(opacity, .1s);

	&:hover {
		opacity: 1;
	}

	&.messageCollapsedExpandable {
		cursor: pointer;
	}

	h1 {
		font-size: @wcfSmallFontSize;
	}

	.messageCounter {
		padding-top: 3px;
	}

	&.jsMarked {
		background-color: @wcfSelectedBackgroundColor !important;
		color: @wcfColor;

		a {
			color: @wcfColor;
		}
	}
}

@media only screen and (max-width: 800px) {
	.messageCollapsed {
		padding: @wcfGapSmall;
	}
}

@media only screen and (min-width: 641px) and (max-width: 800px) {
	.messageCollapsed {
		padding: @wcfGapSmall @wcfGapMedium;
	}
}

/* quick reply and inline editor */
.messageBody > span.icon-spinner {
	left: 50%;
	margin: -21px -21px 0 0;
	position: absolute;
	top: 50%;
}

#messageQuickReply {
	.formSubmit {
		padding-bottom: @wcfGapMedium;
	}
}

/* message quotes */
#showQuotes {
	bottom: @wcfGapLarge + @wcfGapTiny;
	cursor: pointer;
	opacity: .7;
	position: fixed;
	right: @wcfGapLarge + @wcfGapTiny;

	.transition(opacity, .2s);

	&:hover {
		opacity: 1;
	}
}

#messageQuoteList {
	max-width: 800px !important;

	li {
		&:not(:first-child) {
			margin-top: @wcfGapSmall;
		}

		> span {
			float: left;
			width: 40px;

			> input {
				vertical-align: bottom;
			}

			> span {
				cursor: pointer;
				vertical-align: middle;
			}
		}

		div.jsQuote {
			margin-left: 60px;
		}

		div.jsFullQuote {
			display: none;
		}
	}
}

#quoteManagerCopy {
	cursor: pointer;

	.pointer {
		border-width: 5px 5px 0;
		bottom: -5px;
		margin-left: -5px;
		top: auto;
	}
}

/* share buttons */
.messageShareButtons {
	> ul > li {
		display: inline-block;

		> a {
			text-decoration: none;

			> .icon {
				height: 28px;
			}
		}

		> .badge {
			background-color: @wcfContainerBackgroundColor;
			border: 1px solid @wcfContainerBorderColor;
			color: @wcfColor;
			line-height: 23px;
			padding: 0 7px;
			position: relative;
			vertical-align: 1px;

			.borderRadius(3px);

			&:before {
				border: 6px solid @wcfContainerBorderColor;
				border-color: transparent @wcfContainerBorderColor transparent transparent;
				content: "";
				display: block;
				height: 0;
				margin-top: -6px;
				position: absolute;
				right: 100%;
				top: 50%;
				width: 0;
			}

			&:after {
				border: 6px solid @wcfContainerBackgroundColor;
				border-color: transparent @wcfContainerBackgroundColor transparent transparent;
				content: "";
				display: block;
				height: 0;
				margin-right: -1px;
				margin-top: -6px;
				position: absolute;
				right: 100%;
				top: 50%;
				width: 0;
			}
		}
	}

	.jsShareFacebook {
		> a > .icon {
			color: rgb(59, 89, 152);
		}
	}

	.jsShareTwitter {
		> a > .icon {
			color: rgb(64, 153, 255);
		}
	}

	.jsShareGoogle {
		> a > .icon {
			color: rgb(211, 72, 54);
		}
	}

	.jsShareReddit {
		> a > img {
			vertical-align: -7px;
			padding: 0 4px;
		}
	}
}

.contentNavigation > .messageShareButtons {
	float: right;
	margin-right: @wcfGapMedium;
	margin-top: 0;
}

/* ckeditor fixes */
.cke_editor_text {
	border-style: solid !important;
	padding: 0 !important;
}

.cke_source {
	padding: 8px !important;
}

.cke_combo__fontsize .cke_combo_text {
	width: auto !important;
}

.cke_dialog_background_cover {
	background-color: #000 !important;
}

@media only screen and (max-width: 800px) {
	.message.messageSidebarOrientationLeft,
	.message.messageSidebarOrientationRight {
		.messageContent {
			border: 0;
			margin: 0;
		}

		.messageSidebar {
			float: none;
		}

		.messageHeader {
			&:before,
			&:after {
				display: none;
			}
		}
	}

	.message .messageHeader .messageQuickOptions,
	.message .messageBody .messageSignature,
	.message .messageSidebar .userCredits {
		display: none;
	}

	.message .messageSidebar {
		padding: 7px;
		text-align: left;
		width: auto;

		> div {
			margin-left: 40px;
		}

		.userAvatar {
			left: 7px;
			position: absolute;
			top: 0;

			img {
				height: 32px !important;
				width: 32px !important;
			}

			> .badgeOnline {
				display: none;
			}
		}

		.userTitle {
			margin-top: -2px;
		}
	}

	/* reduce paddings */
	.message .messageContent .messageHeader {
		padding: 7px 7px 0;
	}

	.message .messageBody {
		padding: 7px;
	}

	.message .messageBody > div:not(.messageFooter) {
		padding: 7px 0;
	}

	.message .messageBody > footer {
		padding: 0;
		position: absolute;
		right: 7px;
		top: 7px;
	}

	.message .messageOptions nav {
		opacity: 1;
		position: static;
		text-align: left;
	}

	.message.messageReduced .messageOptions {
		display: none;
	}

	.message .newMessageBadge {
		display: none;
	}
}

@media only screen and (min-width: 641px) and (max-width: 800px) {
	.message .messageSidebar,
	.message .messageContent .messageHeader,
	.message .messageBody {
		padding-left: @wcfGapMedium;
		padding-right: @wcfGapMedium;
	}

	.message .messageSidebar {
		.userAvatar {
			left: @wcfGapMedium;
		}
	}

	.message .messageBody > footer {
		right: @wcfGapMedium;
	}
}


Delete variables.less

Delete variables.less


impr(style): make checkboxes in forms smaller

.generic-form-fields .text-right a {
  line-height: 33px;
}

.disabled-form {
  position: relative;
  &:before {
    content: ' ';
    background-color: rgba(255, 255, 255, 0.8);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

.form-control[type="checkbox"] {
  width: 20px;
  height: 20px;
}


[INTERNAL] sap_belize_plus chart design changes

Change-Id: Ic870cbdb8c9df1218ac777d621246b2385528123

// ======================================
// Global CSS for 'sap_belize_plus' theme
// ======================================

@sapUiChartLabelPressedColor: lighten(@sapUiButtonBackground, 8);  // #536b80
@sapUiChartValueAxisLabelFontColor: @sapUiContentForegroundTextColor;  // #fafafa
@sapUiChartCategoryAxisLineColor: lighten(@sapUiChartGridlineColor, 20);  // #cdcdcd
@sapUiChartValueAxisLineColor: lighten(@sapUiChartGridlineColor, 20);  // #cdcdcd
@sapUiChartCategoryAxisTickColor: lighten(@sapUiChartGridlineColor, 20);  // #cdcdcd
@sapUiChartValueAxisTickColor: lighten(@sapUiChartGridlineColor, 20);   // #cdcdcd
@sapUiChartGridlineColor: darken(desaturate(@sapUiContentForegroundBorderColor, 22), 1);  // #9a9a9a
@sapUiChartReferenceLineColor: lighten(@sapUiChartGridlineColor, 40);   // #ffffff
@sapUiChartLightText: @sapUiContentForegroundTextColor;             // #fafafa
@sapUiChartZeroAxisColor: lighten(@sapUiChartGridlineColor, 40);    // #ffffff

@sapUiChartDataPointBorderColor: @sapUiGroupContentBackground;      // #3f5161
@sapUiChartDataPointBorderHoverSelectedColor: lighten(@sapUiChartGridlineColor, 40);  // #ffffff
@sapUiChartDataPointNotSelectedBackgroundOpacity: 0.7;

@sapUiChartTargetColor: lighten(@sapUiChartGridlineColor, 40);       // #ffffff
@sapUiChartTargetShadowColor: @sapUiContentShadowColor;              // #000000
@sapUiChartBubbleBGOpacity: 0.9;

@sapUiChartScrollbarBorderColor: @sapUiScrollBarBorderColor;         // #0099db

@sapUiChartNegativeLargeText: lighten(@sapUiChartBad, 8);  //#f77b7c
@sapUiChartCriticalLargeText: lighten(@sapUiChartCritical, 10);  // #f7c174
@sapUiChartPositiveLargeText: lighten(@sapUiChartGood, 15);  // #a0dbb1
@sapUiChartNeutralLargeText: lighten(@sapUiChartNeutral, 30);  // #f1f2f3

@sapUiChartDataPointBG: darken(desaturate(@sapUiChartNeutral, 1), 10);  // #848f94
@sapUiChartDataPointBGBorderColor: darken(desaturate(@sapUiChartNeutral, 1), 10);  // #848f94
@sapUiChartDataLineColorWithBG: darken(@sapUiChartGridlineColor, 40);   // #333333
@sapUiChartDataLineColor: lighten(@sapUiChartGridlineColor, 40);   // #ffffff

@sapUiChartRadialRemainingCircle: darken(desaturate(@sapUiChartNeutral, 1), 10);  // #848f94
@sapUiChartRadialRemainingCircleBorderColor: darken(desaturate(@sapUiChartNeutral, 1), 10);  // #848f94
@sapUiChartRadialBG: transparent;

@sapUiChartPaletteSemanticBadLight3: lighten(desaturate(@sapUiChartBad, 2), 22.9);
@sapUiChartPaletteSemanticBadLight2: lighten(@sapUiChartBad, 15);
@sapUiChartPaletteSemanticBadLight1: lighten(@sapUiChartBad, 8);
@sapUiChartPaletteSemanticBadDark1: darken(@sapUiChartBad, 7);
@sapUiChartPaletteSemanticBadDark2: darken(@sapUiChartBad, 15);

@sapUiChartPaletteSemanticCriticalLight2: lighten(@sapUiChartCritical, 20);
@sapUiChartPaletteSemanticCriticalLight1: lighten(@sapUiChartCritical, 10);
@sapUiChartPaletteSemanticCriticalDark1: darken(@sapUiChartCritical, 10);
@sapUiChartPaletteSemanticCriticalDark2: darken(@sapUiChartCritical, 15);

@sapUiChartPaletteSemanticGoodLight2: lighten(@sapUiChartGood, 20);
@sapUiChartPaletteSemanticGoodLight1: lighten(@sapUiChartGood, 10);
@sapUiChartPaletteSemanticGoodDark1: darken(@sapUiChartGood, 10);
@sapUiChartPaletteSemanticGoodDark2: darken(@sapUiChartGood, 14.9);

@sapUiChartPaletteSemanticNeutralLight3: lighten(@sapUiChartNeutral, 30);
@sapUiChartPaletteSemanticNeutralLight2: lighten(@sapUiChartNeutral, 20);
@sapUiChartPaletteSemanticNeutralLight1: lighten(@sapUiChartNeutral, 10);
@sapUiChartPaletteSemanticNeutralDark1: darken(desaturate(@sapUiChartNeutral, 1), 10);
@sapUiChartPaletteSemanticNeutralDark2: darken(@sapUiChartNeutral, 20);

@sapUiChartPaletteSequentialHue1Light3: lighten(saturate(@sapUiChartSequence1, 2), 28);
@sapUiChartPaletteSequentialHue1Light2: lighten(saturate(@sapUiChartSequence1, 1), 18);
@sapUiChartPaletteSequentialHue1Light1: lighten(@sapUiChartSequence1, 9);
@sapUiChartPaletteSequentialHue1Dark1: darken(saturate(@sapUiChartSequence1, 1), 12);
@sapUiChartPaletteSequentialHue1Dark2: darken(saturate(@sapUiChartSequence1, 1), 24);

@sapUiChartPaletteSequentialHue2Light3: lighten(@sapUiChartSequence2, 28);
@sapUiChartPaletteSequentialHue2Light2: lighten(@sapUiChartSequence2, 18);
@sapUiChartPaletteSequentialHue2Light1: lighten(@sapUiChartSequence2, 9);
@sapUiChartPaletteSequentialHue2Dark2: darken(@sapUiChartSequence2, 24);

@sapUiChartPaletteSequentialHue3Light3: lighten(@sapUiChartSequence3, 28);
@sapUiChartPaletteSequentialHue3Light2: lighten(@sapUiChartSequence3, 18);
@sapUiChartPaletteSequentialHue3Light1: lighten(desaturate(@sapUiChartSequence3, 1), 9);
@sapUiChartPaletteSequentialHue3Dark2: darken(@sapUiChartSequence3, 24);

@sapUiChartPaletteSequentialNeutralLight3: lighten(@sapUiChartSequenceNeutral, 30);
@sapUiChartPaletteSequentialNeutralLight2: lighten(saturate(@sapUiChartSequenceNeutral, 1), 20);
@sapUiChartPaletteSequentialNeutralDark1: darken(desaturate(@sapUiChartSequenceNeutral, 1), 10);
@sapUiChartPaletteSequentialNeutralDark2: darken(@sapUiChartSequenceNeutral, 20);

@sapUiChoroplethBG: darken(saturate(@sapUiChartSequenceNeutral, 13), 8);
@sapUiChoroplethRegionBorder: lighten(@sapUiChartGridlineColor, 40);
@sapUiMapLegendBG: @sapUiGroupContentBackground;
@sapUiMapLegendBorderColor: lighten(@sapUiChartGridlineColor, 40);

@sapUiShellHoverBackground: lighten(@sapUiBrand, 49);
@sapUiShellActiveBackground: lighten(@sapUiBrand, 49);
@sapUiShellActiveTextColor: darken(@sapUiBrand, 14);
@sapUiShellHoverToggleBackground: lighten(@sapUiBrand, 55);

@sapUiButtonLiteHoverBackground: fade(@sapUiButtonHoverBackground, 50);
@sapUiToggleButtonPressedBackground: lighten(saturate(@sapUiButtonActiveBackground, 40), 30);
@sapUiToggleButtonPressedBorderColor:  lighten(@sapUiToggleButtonPressedBackground, 5);
@sapUiToggleButtonPressedTextColor: contrast(@sapUiToggleButtonPressedBackground, lighten(@sapUiButtonTextColor, 12), @sapUiContentContrastTextColor, @sapUiContentContrastTextThreshold);
@sapUiToggleButtonPressedHoverBackground: lighten(@sapUiToggleButtonPressedBackground, 5);
@sapUiToggleButtonPressedHoverBorderColor: lighten(@sapUiToggleButtonPressedBackground, 5);
@sapUiSegmentedButtonBackground: lighten(saturate(@sapUiButtonActiveBackground, 40), 30);
@sapUiSegmentedButtonBorderColor: darken(@sapUiButtonBorderColor, 10);
@sapUiSegmentedButtonSelectedBackground: lighten(saturate(@sapUiButtonActiveBackground, 40), 30);
@sapUiSegmentedButtonSelectedTextColor: contrast(@sapUiSegmentedButtonSelectedBackground, lighten(@sapUiSegmentedButtonTextColor, 12), @sapUiContentContrastTextColor, @sapUiContentContrastTextThreshold);
@sapUiSegmentedButtonSelectedHoverBackground: lighten(@sapUiSegmentedButtonSelectedBackground, 5);
@sapUiSegmentedButtonSelectedIconColor: contrast(@sapUiSegmentedButtonSelectedBackground, lighten(@sapUiContentIconColor, 12), @sapUiContentContrastIconColor, @sapUiContentContrastTextThreshold);
@sapUiSegmentedButtonFooterBorderColor: @sapUiButtonBorderColor;

@sapUiFieldPlaceholderTextColor: lighten(saturate(@sapUiBaseColor, 24), 52.5);

@sapUiListTextColor: darken(@sapUiBaseText, 2);
@sapUiListVerticalBorderColor: lighten(@sapUiListBorderColor, 3);
@sapUiListActiveTextColor: contrast(@sapUiListActiveBackground, lighten(@sapUiListTextColor, 2), @sapUiContentContrastTextColor, @sapUiContentContrastTextThreshold);
@sapUiListTableGroupHeaderBackground: darken(@sapUiListBackground, 2);
@sapUiListTableGroupHeaderBorderColor: lighten(@sapUiListBorderColor, 13.1);
@sapUiListTableGroupHeaderTextColor: contrast(@sapUiListTableGroupHeaderBackground, lighten(saturate(@sapUiBaseColor, 24), 49.2), @sapUiContentContrastTextColor, @sapUiContentContrastTextThreshold);
@sapUiListTableFooterBorder: lighten(@sapUiListBorderColor, 13.1);
@sapUiListTableFixedBorder: lighten(@sapUiListBorderColor, 30);

@sapUiShadowLevel0: 0 0 0.125rem 0 fade(@sapUiContentContrastShadowColor, 30);
@sapUiShadowLevel1: 0 0.125rem 0.375rem 0 fade(@sapUiContentShadowColor, 20), 0 0 0.125rem 0 fade(@sapUiContentContrastShadowColor, 30);
@sapUiShadowLevel2: 0 0.375rem 0.750rem 0 fade(@sapUiContentShadowColor, 30), 0 0 0.125rem 0 fade(@sapUiContentContrastShadowColor, 30);
@sapUiShadowLevel3: 0 1.250rem 2rem 0 fade(@sapUiContentShadowColor, 50), 0 0 0.125rem 0 fade(@sapUiContentContrastShadowColor, 30);
@sapUiShadowText: 0 1px fade(@sapUiContentShadowColor, 50);
@sapUiShadowHeader: 0 0.125rem 0 0 @sapUiContentShadowColor;

// ======================================
// Global CSS for 'sap_belize_plus' theme
// ======================================

@sapUiChartLabelPressedColor: lighten(@sapUiButtonBackground, 8);  // #536b80
@sapUiChartValueAxisLabelFontColor: @sapUiContentForegroundTextColor;  // #fafafa
@sapUiChartCategoryAxisLineColor: lighten(@sapUiChartGridlineColor, 20);  // #cdcdcd
@sapUiChartValueAxisLineColor: lighten(@sapUiChartGridlineColor, 20);  // #cdcdcd
@sapUiChartCategoryAxisTickColor: lighten(@sapUiChartGridlineColor, 20);  // #cdcdcd
@sapUiChartValueAxisTickColor: lighten(@sapUiChartGridlineColor, 20);   // #cdcdcd
@sapUiChartGridlineColor: darken(desaturate(@sapUiContentForegroundBorderColor, 22), 1);  // #9a9a9a
@sapUiChartReferenceLineColor: lighten(@sapUiChartGridlineColor, 40);   // #ffffff
@sapUiChartLightText: @sapUiContentForegroundTextColor;             // #fafafa
@sapUiChartZeroAxisColor: lighten(@sapUiChartGridlineColor, 40);    // #ffffff

@sapUiChartDataPointBorderColor: @sapUiGroupContentBackground;      // #3f5161
@sapUiChartDataPointBorderHoverSelectedColor: lighten(@sapUiChartGridlineColor, 40);  // #ffffff
@sapUiChartDataPointNotSelectedBackgroundOpacity: 0.7;

@sapUiChartTargetColor: lighten(@sapUiChartGridlineColor, 40);       // #ffffff
@sapUiChartTargetShadowColor: @sapUiContentShadowColor;              // #000000
@sapUiChartBubbleBGOpacity: 0.9;

@sapUiChartScrollbarBorderColor: @sapUiScrollBarBorderColor;         // #0099db

@sapUiChartNegativeLargeText: lighten(@sapUiChartBad, 8);  //#f77b7c
@sapUiChartCriticalLargeText: lighten(@sapUiChartCritical, 10);  // #f7c174
@sapUiChartPositiveLargeText: lighten(@sapUiChartGood, 15);  // #a0dbb1
@sapUiChartNeutralLargeText: lighten(@sapUiChartNeutral, 30);  // #f1f2f3

@sapUiChartDataPointBG: lighten(@sapUiChartNeutral, 10);  // #bac1c4
@sapUiChartDataPointBGBorderColor: lighten(@sapUiChartNeutral, 10);  // #bac1c4
@sapUiChartDataLineColorWithBG: darken(@sapUiChartGridlineColor, 40);   // #333333
@sapUiChartDataLineColor: lighten(@sapUiChartGridlineColor, 40);   // #ffffff

@sapUiChartRadialRemainingCircle: lighten(@sapUiChartNeutral, 20);  // #d5dadc
@sapUiChartRadialRemainingCircleBorderColor: lighten(@sapUiChartNeutral, 20);  // #d5dadc
@sapUiChartRadialBG: transparent;

@sapUiChartPaletteSemanticBadLight3: lighten(desaturate(@sapUiChartBad, 2), 22.9);
@sapUiChartPaletteSemanticBadLight2: lighten(@sapUiChartBad, 15);
@sapUiChartPaletteSemanticBadLight1: lighten(@sapUiChartBad, 8);
@sapUiChartPaletteSemanticBadDark1: darken(@sapUiChartBad, 7);
@sapUiChartPaletteSemanticBadDark2: darken(@sapUiChartBad, 15);

@sapUiChartPaletteSemanticCriticalLight2: lighten(@sapUiChartCritical, 20);
@sapUiChartPaletteSemanticCriticalLight1: lighten(@sapUiChartCritical, 10);
@sapUiChartPaletteSemanticCriticalDark1: darken(@sapUiChartCritical, 10);
@sapUiChartPaletteSemanticCriticalDark2: darken(@sapUiChartCritical, 15);

@sapUiChartPaletteSemanticGoodLight2: lighten(@sapUiChartGood, 20);
@sapUiChartPaletteSemanticGoodLight1: lighten(@sapUiChartGood, 10);
@sapUiChartPaletteSemanticGoodDark1: darken(@sapUiChartGood, 10);
@sapUiChartPaletteSemanticGoodDark2: darken(@sapUiChartGood, 14.9);

@sapUiChartPaletteSemanticNeutralLight3: lighten(@sapUiChartNeutral, 30);
@sapUiChartPaletteSemanticNeutralLight2: lighten(@sapUiChartNeutral, 20);
@sapUiChartPaletteSemanticNeutralLight1: lighten(@sapUiChartNeutral, 10);
@sapUiChartPaletteSemanticNeutralDark1: darken(desaturate(@sapUiChartNeutral, 1), 10);
@sapUiChartPaletteSemanticNeutralDark2: darken(@sapUiChartNeutral, 20);

@sapUiChartPaletteSequentialHue1Light3: lighten(saturate(@sapUiChartSequence1, 2), 28);
@sapUiChartPaletteSequentialHue1Light2: lighten(saturate(@sapUiChartSequence1, 1), 18);
@sapUiChartPaletteSequentialHue1Light1: lighten(@sapUiChartSequence1, 9);
@sapUiChartPaletteSequentialHue1Dark1: darken(saturate(@sapUiChartSequence1, 1), 12);
@sapUiChartPaletteSequentialHue1Dark2: darken(saturate(@sapUiChartSequence1, 1), 24);

@sapUiChartPaletteSequentialHue2Light3: lighten(@sapUiChartSequence2, 28);
@sapUiChartPaletteSequentialHue2Light2: lighten(@sapUiChartSequence2, 18);
@sapUiChartPaletteSequentialHue2Light1: lighten(@sapUiChartSequence2, 9);
@sapUiChartPaletteSequentialHue2Dark2: darken(@sapUiChartSequence2, 24);

@sapUiChartPaletteSequentialHue3Light3: lighten(@sapUiChartSequence3, 28);
@sapUiChartPaletteSequentialHue3Light2: lighten(@sapUiChartSequence3, 18);
@sapUiChartPaletteSequentialHue3Light1: lighten(desaturate(@sapUiChartSequence3, 1), 9);
@sapUiChartPaletteSequentialHue3Dark2: darken(@sapUiChartSequence3, 24);

@sapUiChartPaletteSequentialNeutralLight3: lighten(@sapUiChartSequenceNeutral, 30);
@sapUiChartPaletteSequentialNeutralLight2: lighten(saturate(@sapUiChartSequenceNeutral, 1), 20);
@sapUiChartPaletteSequentialNeutralDark1: darken(desaturate(@sapUiChartSequenceNeutral, 1), 10);
@sapUiChartPaletteSequentialNeutralDark2: darken(@sapUiChartSequenceNeutral, 20);

@sapUiChoroplethBG: darken(saturate(@sapUiChartSequenceNeutral, 13), 8);
@sapUiChoroplethRegionBorder: lighten(@sapUiChartGridlineColor, 40);
@sapUiMapLegendBG: @sapUiGroupContentBackground;
@sapUiMapLegendBorderColor: lighten(@sapUiChartGridlineColor, 40);

@sapUiShellHoverBackground: lighten(@sapUiBrand, 49);
@sapUiShellActiveBackground: lighten(@sapUiBrand, 49);
@sapUiShellActiveTextColor: darken(@sapUiBrand, 14);
@sapUiShellHoverToggleBackground: lighten(@sapUiBrand, 55);

@sapUiButtonLiteHoverBackground: fade(@sapUiButtonHoverBackground, 50);
@sapUiToggleButtonPressedBackground: lighten(saturate(@sapUiButtonActiveBackground, 40), 30);
@sapUiToggleButtonPressedBorderColor:  lighten(@sapUiToggleButtonPressedBackground, 5);
@sapUiToggleButtonPressedTextColor: contrast(@sapUiToggleButtonPressedBackground, lighten(@sapUiButtonTextColor, 12), @sapUiContentContrastTextColor, @sapUiContentContrastTextThreshold);
@sapUiToggleButtonPressedHoverBackground: lighten(@sapUiToggleButtonPressedBackground, 5);
@sapUiToggleButtonPressedHoverBorderColor: lighten(@sapUiToggleButtonPressedBackground, 5);
@sapUiSegmentedButtonBackground: lighten(saturate(@sapUiButtonActiveBackground, 40), 30);
@sapUiSegmentedButtonBorderColor: darken(@sapUiButtonBorderColor, 10);
@sapUiSegmentedButtonSelectedBackground: lighten(saturate(@sapUiButtonActiveBackground, 40), 30);
@sapUiSegmentedButtonSelectedTextColor: contrast(@sapUiSegmentedButtonSelectedBackground, lighten(@sapUiSegmentedButtonTextColor, 12), @sapUiContentContrastTextColor, @sapUiContentContrastTextThreshold);
@sapUiSegmentedButtonSelectedHoverBackground: lighten(@sapUiSegmentedButtonSelectedBackground, 5);
@sapUiSegmentedButtonSelectedIconColor: contrast(@sapUiSegmentedButtonSelectedBackground, lighten(@sapUiContentIconColor, 12), @sapUiContentContrastIconColor, @sapUiContentContrastTextThreshold);
@sapUiSegmentedButtonFooterBorderColor: @sapUiButtonBorderColor;

@sapUiFieldPlaceholderTextColor: lighten(saturate(@sapUiBaseColor, 24), 52.5);

@sapUiListTextColor: darken(@sapUiBaseText, 2);
@sapUiListVerticalBorderColor: lighten(@sapUiListBorderColor, 3);
@sapUiListActiveTextColor: contrast(@sapUiListActiveBackground, lighten(@sapUiListTextColor, 2), @sapUiContentContrastTextColor, @sapUiContentContrastTextThreshold);
@sapUiListTableGroupHeaderBackground: darken(@sapUiListBackground, 2);
@sapUiListTableGroupHeaderBorderColor: lighten(@sapUiListBorderColor, 13.1);
@sapUiListTableGroupHeaderTextColor: contrast(@sapUiListTableGroupHeaderBackground, lighten(saturate(@sapUiBaseColor, 24), 49.2), @sapUiContentContrastTextColor, @sapUiContentContrastTextThreshold);
@sapUiListTableFooterBorder: lighten(@sapUiListBorderColor, 13.1);
@sapUiListTableFixedBorder: lighten(@sapUiListBorderColor, 30);

@sapUiShadowLevel0: 0 0 0.125rem 0 fade(@sapUiContentContrastShadowColor, 30);
@sapUiShadowLevel1: 0 0.125rem 0.375rem 0 fade(@sapUiContentShadowColor, 20), 0 0 0.125rem 0 fade(@sapUiContentContrastShadowColor, 30);
@sapUiShadowLevel2: 0 0.375rem 0.750rem 0 fade(@sapUiContentShadowColor, 30), 0 0 0.125rem 0 fade(@sapUiContentContrastShadowColor, 30);
@sapUiShadowLevel3: 0 1.250rem 2rem 0 fade(@sapUiContentShadowColor, 50), 0 0 0.125rem 0 fade(@sapUiContentContrastShadowColor, 30);
@sapUiShadowText: 0 1px fade(@sapUiContentShadowColor, 50);
@sapUiShadowHeader: 0 0.125rem 0 0 @sapUiContentShadowColor;


styles moved to react-components

styles moved to react-components

.openstax-exercise-preview.has-actions {
  .panel-body,
  .panel-body:hover {
    .controls-overlay {
      .message {
        .action {
          &.include {
            background-color: @light-blue;
            &:before { background-image: url("../../images/icons/exercise-include-action.svg"); }
          }
          &.exclude {
            background-color: @openstax-primary;
            &:before { background-image: url("../../images/icons/exercise-exclude-card-view-action.svg"); }
          }
          &.details {
            background-color: @openstax-neutral-dark;
            &:before { background-image: url("../../images/icons/exercise-details-action.svg"); }
          }
          &.feedback-on {
            background-color: @openstax-neutral-dark;
            &:before { background-image: url("../../images/icons/exercise-feedback-on-action.svg"); }
          }
          &.feedback-off {
            background-color: @openstax-neutral-dark;
            &:before { background-image: url("../../images/icons/exercise-feedback-off-action.svg"); }
          }
          &.report-error {
            background-color: @openstax-quaternary;
            &:before { background-image: url("../../images/icons/exercise-report-error-action.svg"); }
          }
        }
      }
    }
  }

  &.actions-on-side {
    .panel-body,
    .panel-body:hover {
      .controls-overlay {
        .message {
          .action {
            &.exclude {
              background-color: @openstax-primary;
              &:before { background-image: url("../../images/icons/exercise-exclude-details-view-action.svg"); }
            }
          }
        }
      }
    }
  }
}

.openstax-exercise-preview.has-actions {
  .panel-body,
  .panel-body:hover {

    .controls-overlay {
      .message {
        .action {
          width: 140px;
          height: 130px;
          &:before {
            content: "";
            display: block;
            margin: 10% auto;
            background-repeat: no-repeat;
            background-size: 100%;
            padding-top: 0;
            margin-bottom: 5px;
          }
          &.include {
            background-color: @light-blue;
            &:before { background-image: url("../../images/icons/exercise-include-action.svg"); }
          }
          &.exclude {
            background-color: @openstax-primary;
            &:before { background-image: url("../../images/icons/exercise-exclude-card-view-action.svg"); }
          }
          &.details {
            background-color: @openstax-neutral-dark;
            &:before { background-image: url("../../images/icons/exercise-details-action.svg"); }
          }
          &.feedback-on {
            background-color: @openstax-neutral-dark;
            &:before { background-image: url("../../images/icons/exercise-feedback-on-action.svg"); }
          }
          &.feedback-off {
            background-color: @openstax-neutral-dark;
            &:before { background-image: url("../../images/icons/exercise-feedback-off-action.svg"); }
          }
          &.report-error {
            background-color: @openstax-quaternary;
            &:before { background-image: url("../../images/icons/exercise-report-error-action.svg"); }
          }
        }
      }
    }
  }

  &.actions-on-side {
    .panel-body,
    .panel-body:hover {

      .controls-overlay {
        .message {
          .action {
            width: 67px;
            height: 75px;
            &.exclude {
              background-color: @openstax-primary;
              &:before { background-image: url("../../images/icons/exercise-exclude-details-view-action.svg"); }
            }
          }
        }
      }
    }
  }
}