From: Luzifr <szekely@woltlab.com>
Date: Wed, 14 Mar 2012 19:38:07 +0000 (+0100)
Subject: Small LESS-update & more LESS-files
X-Git-Tag: 2.0.0_Beta_1~1229^2
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=e6cc25954f1f1b1f210c933a62b3cf1158f4c2a8;p=GitHub%2FWoltLab%2FWCF.git

Small LESS-update & more LESS-files
---

diff --git a/wcfsetup/install/files/style/message.css b/wcfsetup/install/files/style/message.css
new file mode 100755
index 0000000000..fa252bb780
--- /dev/null
+++ b/wcfsetup/install/files/style/message.css
@@ -0,0 +1,895 @@
+/**
+ * Message Styles  
+ *
+ * @author		Harald Szekely 
+ * @copyright	2011 WoltLab GmbH 
+ */
+
+/* ############## Article ############## */
+
+/* Globals */
+
+.wcf-message {
+	border: 1px solid #bcd;
+	background-color: #d8e7f5;
+	margin-top: 15px;
+	position: relative;
+	
+	-webkit-box-shadow: 0 3px 7px #eee;
+	-moz-box-shadow: 0 3px 7px #eee;
+	-ms-box-shadow: 0 3px 7px #eee;
+	-o-box-shadow: 0 3px 7px #eee;
+	box-shadow: 0 3px 7px #eee;
+}
+
+.wcf-message:after {
+	content: '';
+	display: block;
+	clear: both;
+}
+
+/* Message Deleted */
+
+.wcf-message.deleted {
+	opacity: .5;
+}
+
+/* Special */
+
+.wcf-messageRed {
+	border-color: #c00;
+	background-color: #fee;
+}
+
+
+
+/* -- -- -- -- Message Content -- -- -- -- -- */
+
+/* Globals */
+
+.wcf-message .wcf-messageContent {
+	border-radius: 5px;
+	background-color: #fcfdfe;
+}
+
+li:nth-child(2n+1) .wcf-message .wcf-messageContent {
+	/* Auto-colorer for every 2nd message */
+	background-color: #f3f7fb;
+}
+
+/* Orientation */
+
+@media screen and (min-width: 480px) {
+	
+	.wcf-message.left .wcf-messageContent {
+		border-left: 1px solid #bcd;
+		margin: 0 0 0 211px;
+	}
+
+	.wcf-message.right .wcf-messageContent {
+		border-right: 1px solid #bcd;
+		margin: 0 211px 0 0;
+	}
+	
+}
+
+@media screen and (max-width: 480px) {
+	
+	.wcf-message .wcf-messageContent {
+		border-top: 1px solid #bcd;
+		margin: 0;
+	}
+
+}
+
+
+
+/* Message Header */
+
+.wcf-message .wcf-messageContent header {
+	position: relative;
+}
+
+@media screen and (min-width: 480px) {
+	
+	.wcf-message .wcf-messageContent header {
+		padding: 20px 20px 5px;
+	}
+	
+}
+
+@media screen and (max-width: 480px) {
+	
+	.wcf-message .wcf-messageContent header {
+		padding: 10px 20px 0;
+	}
+
+}
+
+
+
+/* Message Header Contents */
+
+.wcf-message .wcf-messageContent header time {
+	font-size: 85%;
+	color: #999;
+	margin-top: 7px;
+}
+
+.wcf-message .wcf-messageContent header .wcf-likesDisplay {
+	margin-top: 1px;
+	margin-left: 5px;
+	display: inline-block;
+}
+
+.wcf-message .wcf-messageContent header .wcf-likesDisplay .wcf-badge {
+	font-size: 76%;
+	margin-left: 0;
+	top: 0;
+}
+
+.wcf-message .wcf-messageContent header .wcf-messageTitle {
+	font-weight: bold;
+	color: #999;
+	text-shadow: 0 1px 1px rgba(255, 255, 255, 1);
+}
+
+@media screen and (min-width: 480px) {
+	
+	.wcf-message .wcf-messageContent header .wcf-messageTitle {
+		font-size: 130%;
+		padding: 13px 0 0;
+	}
+
+}
+
+@media screen and (max-width: 480px) {
+	
+	.wcf-message .wcf-messageContent header .wcf-messageTitle {
+		font-size: 170%;
+		padding: 7px 0 0;
+	}
+
+}
+
+.wcf-message header .wcf-messageCounter {
+	font-size: 90%;
+	font-weight: bold;
+	float: right;
+	margin-left: 7px;
+}
+
+.wcf-message header .wcf-messageCounter a {
+	padding: 2px 5px;
+}
+
+
+
+/* -- -- -- -- Message Pointer -- -- -- -- -- */
+
+/* Level 1 - Globals */
+
+.wcf-message header > .pointer {
+	display: block !important;
+	position: absolute;
+	width: 0;
+	height: 0;
+	z-index: 100;
+}
+
+/* Level 2 - Globals */
+
+.wcf-message header > .pointer > span {
+	display: block;
+	position: absolute;
+	width: 0;
+	height: 0;
+}
+
+@media screen and (min-width: 480px) {
+	
+	/* Level 1 - Globals */
+	
+	.wcf-message header > .pointer {
+		border-width: 20px;
+		top: 35px;
+	}
+	
+	/* Level 1 - Left-Right */
+	
+	.wcf-message.left header > .pointer {
+		border-style: solid solid solid none;
+		border-color: transparent #bcd transparent transparent;
+		left: -20px;
+	}
+	
+	.wcf-message.right header > .pointer {
+		border-style: solid none solid solid;
+		border-color: transparent transparent transparent #bcd;
+		right: -20px;
+	}
+	
+	/* Level 2 - Globals */
+	
+	.wcf-message header > .pointer > span {
+		border-width: 20px;
+		top: -20px;
+	}
+	
+	/* Level 2 - Left-Right */
+	
+	.wcf-message.left header > .pointer > span {
+		border-style: solid solid solid none;
+		border-color: transparent #fcfdfe transparent transparent;
+		left: 1px;
+	}
+	
+	.wcf-message.right header > .pointer > span {
+		border-style: solid none solid solid;
+		border-color: transparent transparent transparent #fcfdfe;
+		right: 1px;
+	}
+	
+	li:nth-child(2n+1) .wcf-message.left header > .pointer > span {
+		/* Auto-colorer for every 2nd message-left */
+		border-right-color: #f3f7fb;
+	}
+	
+	li:nth-child(2n+1) .wcf-message.right header > .pointer > span {
+		/* Auto-colorer for every 2nd message-right arrow */
+		border-left-color: #f3f7fb;
+	}
+	
+}
+
+@media screen and (max-width: 480px) {
+	
+	/* Level 1 - Globals */
+	
+	.wcf-message header > .pointer {
+		border-width: 10px;
+		top: -10px;
+	}
+	
+	/* Level 1 - Left-Right */
+	
+	.wcf-message header > .pointer {
+		border-style: none solid solid solid;
+		border-color: transparent transparent #bcd transparent;
+		left: 47%;
+	}
+	
+	/* Level 2 - Globals */
+	
+	.wcf-message header > .pointer > span {
+		border-width: 10px;
+		top: 1px;
+	}
+	
+	/* Level 2 - Left-Right */
+	
+	.wcf-message header > .pointer > span {
+		border-style: none solid solid solid;
+		border-color: transparent transparent #fcfdfe transparent;
+		left: -10px;		
+	}
+	
+	li:nth-child(2n+1) .wcf-message header > .pointer > span {
+		/* Auto-colorer for every 2nd message arrow */
+		border-bottom-color: #f3f7fb;
+	}
+	
+}
+
+
+
+/* -- -- -- -- Message Content -- -- -- -- -- */
+
+/* Message Body */
+
+.wcf-message .wcf-messageBody {
+	color: #666;
+	display: block;
+	position: relative;
+}
+
+@media screen and (min-width: 480px) {
+	
+	.wcf-message .wcf-messageBody {
+		font-size: 90%;
+		line-height: 1.75;
+		padding: 10px 20px 1px;
+	}
+	
+}
+
+@media screen and (max-width: 480px) {
+	
+	.wcf-message .wcf-messageBody {
+		font-size: 120%;
+		line-height: 1.9;
+		padding: 5px 20px 1px;
+	}
+	
+}
+
+.wcf-message .wcf-messageBody:after {
+	content: '';
+	display: block;
+	clear: both;
+}
+
+.wcf-message .wcf-messageBody > div {
+	border-top: 1px dotted #ccc;
+	padding: 10px 0;
+	display: block;
+	overflow: hidden;
+}
+
+.wcf-message .wcf-messageBody .wcf-signature {
+	overflow: hidden;
+}
+
+@media screen and (min-width: 480px) {
+	
+	.wcf-message .wcf-messageBody .wcf-signature {
+		padding: 10px 0 20px;
+	}
+	
+}
+
+@media screen and (max-width: 480px) {
+	
+	.wcf-message .wcf-messageBody .wcf-signature {
+		padding: 5px 0;
+	}
+	
+}
+
+
+
+/* -- -- -- -- Message Sidebar -- -- -- -- -- */
+
+/* Globals */
+
+.wcf-message .wcf-messageSidebar {
+	font-size: 90%;
+	line-height: 1.3;
+	position: relative;
+}
+	
+@media screen and (min-width: 480px) {
+	
+	.wcf-message .wcf-messageSidebar {
+		text-align: center;
+		margin-bottom: -1px;
+		padding: 10px 20px 20px;
+		/* Width toggle */
+		width: 170px;
+	}
+}
+
+@media screen and (max-width: 480px) {
+	
+	.wcf-message .wcf-messageSidebar {
+		text-align: left;
+		padding: 5px 0 10px;
+		width: 100%;
+	}
+	
+}
+
+.wcf-message .wcf-messageSidebar:after {
+	content: '';
+	display: block;
+	clear: both;
+}
+
+/* Orientation */
+
+@media screen and (min-width: 480px) {
+	
+	.wcf-message.left .wcf-messageSidebar {
+		float: left;
+	}
+	
+	.wcf-message.right .wcf-messageSidebar {
+		float: right;
+	}
+	
+}
+
+@media screen and (max-width: 480px) {
+	
+	.wcf-message .wcf-messageSidebar {
+		float: none;
+	}
+	
+}
+
+
+
+/* Message Sidebar Header */
+
+.wcf-message .wcf-messageSidebar header .wcf-username,
+.wcf-message .wcf-messageSidebar header .wcf-username a {
+	font-size: 110%;
+	font-weight: bold;
+	text-decoration: none;
+	text-shadow: 0 1px 1px rgba(255, 255, 255, 1);
+	color: #369;
+	padding: 1px 3px;
+}
+
+/* Message Sidebar Contents */
+
+.wcf-message .wcf-messageSidebar a {
+	color: #369;
+}
+
+.wcf-message .wcf-messageSidebar a:hover {
+	color: #036;
+}
+
+.wcf-message .wcf-messageSidebar .userTitle .wcf-badge {
+	font-size: 95%;
+	color: rgba(255, 255, 255, 1);
+	border-radius: 13px;
+	background-color: #369;
+	margin-top: 3px;
+	padding: 0 10px;
+	display: inline-block;
+	
+	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 1);
+	-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 1);
+	-ms-box-shadow: 0 1px 0 rgba(255, 255, 255, 1);
+	-o-box-shadow: 0 1px 0 rgba(255, 255, 255, 1);
+	box-shadow: 0 1px 0 rgba(255, 255, 255, 1);
+}
+
+.wcf-message .wcf-messageSidebar .userRank {
+	font-size: 95%;
+	color: rgba(255, 255, 255, 1);
+	margin: 3px 0 0;
+	padding: 0 0 7px;
+	display: block;
+}
+
+.wcf-message .wcf-messageSidebar .wcf-userAvatar {
+	margin: 7px 0 0;
+	padding: 0 0 7px;
+	display: block;
+}
+
+.wcf-message .wcf-messageSidebar .wcf-userAvatar img {
+	border: none;
+	padding: 0;
+}
+
+.wcf-message .wcf-messageSidebar .userCredits {
+	font-size: 95%;
+	color: #369;
+	margin: 7px 0 0;
+	padding: 0 0 7px;
+	display: block;
+}
+
+.wcf-message .wcf-messageSidebar .userCredits p,
+.wcf-message .wcf-messageSidebar .userCredits a {
+	color: #369;
+}
+
+.wcf-message .wcf-messageSidebar .userStatus,
+.wcf-message .wcf-messageSidebar .userContacts {
+	color: #369;
+	margin: 7px 0 0;
+	display: block;
+}
+
+.wcf-message .wcf-messageSidebar .userStatus ul,
+.wcf-message .wcf-messageSidebar .userContact ul {
+	list-style-type: none;
+}
+
+.wcf-message .wcf-messageSidebar .userStatus ul li,
+.wcf-message .wcf-messageSidebar .userContact ul li {
+	display: inline;
+}
+
+.wcf-message .wcf-messageSidebar .userStatus ul li a,
+.wcf-message .wcf-messageSidebar .userContact ul li a {
+	text-align: left;
+	text-decoration: none;
+	margin: 0 -3px;
+	padding: 1px 3px 0;
+	display: inline-block;
+	
+	-webkit-transition: background-color .2s linear;
+	-moz-transition: background-color .2s linear;
+	-ms-transition: background-color .2s linear;
+	-o-transition: background-color .2s linear;
+	transition: background-color .2s linear;
+}
+
+.wcf-message .wcf-messageSidebar .userStatus ul li a:hover,
+.wcf-message .wcf-messageSidebar .userContacts ul li a:hover {
+	border-radius: 7px;
+	background-color: #bcd;
+	
+	-webkit-box-shadow: 0 1px 7px #eee;
+	-moz-box-shadow: 0 1px 7px #eee;
+	-ms-box-shadow: 0 1px 7px #eee;
+	-o-box-shadow: 0 1px 7px #eee;
+	box-shadow: 0 1px 7px #eee;
+}
+
+.wcf-message .wcf-messageSidebar .userStatus ul li a span,
+.wcf-message .wcf-messageSidebar .userContact ul li a span {
+	display: block;
+	position: absolute;
+	left: -9000px;
+	top: -9000px;
+}
+@media screen and (min-width: 480px) {
+	
+	/* Message Sidebar Dividers only when sidebar not on top */
+	.wcf-message.dividers .wcf-userAvatar,
+	.wcf-message.dividers .userRank,
+	.wcf-message.dividers .userCredits,
+	.wcf-message.dividers .userStatus  {
+		border-bottom: 1px dotted #bcd;
+	}
+	
+	.wcf-message.dividers .wcf-messageSidebar div:last-child {
+		border: 0;
+	}
+	
+	.wcf-message .wcf-messageSidebar > div > header,
+	.wcf-message .wcf-messageSidebar > div > div {
+		vertical-align: top;
+	}
+	
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+	
+	.wcf-message .wcf-messageSidebar {
+		display: table !important;
+		border-collapse: separate;
+		width: 100%;
+	}
+	
+	.wcf-message .wcf-messageSidebar > div {
+		display: table-row !important;
+	}
+	
+	.wcf-message .wcf-messageSidebar > div > header,
+	.wcf-message .wcf-messageSidebar > div > div {
+		padding: 10px !important;
+		display: table-cell !important;
+		vertical-align: top;
+		width: 25%;
+	}
+	
+	.wcf-message .wcf-messageSidebar header {
+		min-width: 25%;
+	}
+	
+	.wcf-message .wcf-messageSidebar header .wcf-username,
+	.wcf-message .wcf-messageSidebar header .wcf-username a {
+		font-size: 130%;
+		padding: 3px;
+	}
+	
+	.wcf-message .wcf-messageSidebar .wcf-userAvatar img {
+		height: auto;
+		width: 50%;
+		min-width: 50px;
+	}
+	
+	.wcf-message .wcf-messageSidebar .userCredits {
+		font-size: 75%;
+	}
+	
+}
+
+
+
+/* -- -- -- -- Thread Starter Badge -- -- -- -- -- */
+
+/* Globals */
+
+.wcf-message .wcf-messageSidebar .userStatus .wbb-threadStarter {
+	border: 1px solid #ccc;
+	background-color: rgba(255, 255, 255, 1);
+	display: block !important;
+	position: absolute;
+}
+
+@media screen and (min-width: 480px) {
+	
+	.wcf-message.left .wcf-messageSidebar .userStatus .wbb-threadStarter {
+		top: -3px;
+		left: 15px;
+		width: 16px;
+		height: 15px;
+	}
+	
+	.wcf-message.right .wcf-messageSidebar .userStatus .wbb-threadStarter {
+		top: -3px;
+		right: 15px;
+		width: 16px;
+		height: 15px;
+	}
+	
+}
+
+@media screen and (max-width: 480px) {
+	
+	.wcf-message .wcf-messageSidebar .userStatus .wbb-threadStarter {
+		top: -3px;
+		left: 47%;
+		width: 16px;
+		height: 15px;
+	}
+	
+}
+
+/* Level 1 - Globals */
+
+.wcf-message .wcf-messageSidebar .wbb-threadStarter > .pointer {
+	display: block !important;
+	position: absolute;
+	width: 0;
+	height: 0;
+	z-index: 100;
+}
+
+/* Level 2 - Globals */
+
+.wcf-message .wcf-messageSidebar .wbb-threadStarter > .pointer > span {
+	display: block;
+	position: absolute;
+	width: 0;
+	height: 0;
+}
+
+.wcf-message .wcf-messageSidebar .wbb-threadStarter > .pointer > span img {
+	position: absolute;
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+	
+	/* Level 1 - Globals */
+	
+	.wcf-message .wcf-messageSidebar .wbb-threadStarter > .pointer {
+		border-width: 9px;
+		top: 15px;
+	}
+	
+	/* Level 1 - Left-Right */
+	
+	.wcf-message.left .wcf-messageSidebar .wbb-threadStarter > .pointer {
+		border-style: none solid solid solid;
+		border-color: #ccc #ccc transparent #ccc;
+		left: -1px;
+	}
+	
+	.wcf-message.right .wcf-messageSidebar .wbb-threadStarter > .pointer {
+		border-style: none solid solid solid;
+		border-color: #ccc #ccc transparent #ccc;
+		left: -1px;
+	}
+	
+	/* Level 2 - Globals */
+	
+	.wcf-message .wcf-messageSidebar .wbb-threadStarter > .pointer > span {
+		border-width: 8px;
+		top: -1px;
+	}
+	
+	/* Level 2 - Left-Right */
+	
+	.wcf-message.left .wcf-messageSidebar .wbb-threadStarter > .pointer > span {
+		border-style: none solid solid solid;
+		border-color: #fff #fff transparent #fff;
+		left: -8px;
+	}
+	
+	.wcf-message.right .wcf-messageSidebar .wbb-threadStarter > .pointer > span {
+		border-style: none solid solid solid;
+		border-color: #fff #fff transparent #fff;
+		right: -8px;
+	}
+	
+	.wcf-message .wcf-messageSidebar .wbb-threadStarter > .pointer > span img {
+		top: -13px;
+		left: -8px;
+	}
+	
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+	
+	/* Level 1 - Globals */
+	
+	.wcf-message .wcf-messageSidebar .wbb-threadStarter  > .pointer {
+		border-width: 9px;
+		top: 15px;
+	}
+	
+	/* Level 1 - Left-Right */
+	
+	.wcf-message .wcf-messageSidebar .wbb-threadStarter  > .pointer {
+		border-style: none solid solid solid;
+		border-color: #ccc #ccc transparent #ccc;
+		left: -1px;
+	}
+	
+	/* Level 2 - Globals */
+	
+	.wcf-message .wcf-messageSidebar .wbb-threadStarter  > .pointer > span {
+		border-width: 8px;
+		top: -1px;
+	}
+	
+	/* Level 2 - Left-Right */
+	
+	.wcf-message .wcf-messageSidebar .wbb-threadStarter  > .pointer > span {
+		border-style: none solid solid solid;
+		border-color: #fff #fff transparent #fff;
+		left: -8px;		
+	}
+	
+	.wcf-message .wcf-messageSidebar .wbb-threadStarter > .pointer > span img {
+		top: -15px;
+		left: -8px;
+	}
+	
+}
+
+
+
+/* -- -- -- -- Message Footer -- -- -- -- -- */
+
+/* Footer */
+
+.wcf-message .wcf-messageFooter {
+	font-size: 100%;
+	line-height: 1;
+	position: relative;
+}
+
+.wcf-message .wcf-messageFooter:after {
+	content: '';
+	display: block;
+	clear: both;
+}
+
+/* Message Footer Signature */
+
+.wcf-message .wcf-messageSignature {
+	color: #999;
+	border-top: 1px dotted #ccc;
+	display: block;
+}
+
+/* Message Footer Navi */
+
+.wcf-message .wcf-messageFooter nav {
+	/* General toggle switch for nav-bar orientation (options: left|center|right) */
+	text-align: right;
+	position: absolute;
+}
+
+@media screen and (min-width: 480px) {
+		
+	.wcf-message .wcf-messageSignature {
+		margin: 10px 0 0;
+		padding: 10px 0;
+	}
+		
+	.wcf-message .wcf-messageFooter nav {
+		right: -20px;
+		bottom: -1px;
+		opacity: 0;
+		
+		-webkit-transition: opacity .1s linear;
+		-moz-transition: opacity .1s linear;
+		-ms-transition: opacity .1s linear;
+		-o-transition: opacity .1s linear;
+		transition: opacity .1s linear;
+	}
+	
+	.wcf-message:hover .wcf-messageFooter nav {
+		opacity: 1;
+	}
+
+}
+
+@media screen and (max-width: 480px) {
+		
+	.wcf-message .wcf-messageSignature {
+		margin: 5px 0 0;
+		padding: 0;
+	}
+		
+	.wcf-message .wcf-messageFooter nav {
+		font-size: 125%;
+		right: -20px;
+		bottom: -1px;
+		opacity: 1;
+	}
+		
+	.wcf-message .wcf-messageFooter nav .wcf-smallButtons > li {
+		margin-left: -7px;
+	}
+		
+	.wcf-message .wcf-messageFooter nav .wcf-smallButtons > li > a {
+		padding: 5px 8px;
+	}
+		
+	.wcf-message .wcf-messageFooter nav .wcf-smallButtons > li > a > img {
+		width: 24px;
+		height: 24px;
+	}
+		
+	.wcf-message .wcf-messageFooter nav .wcf-smallButtons > li > a > span {
+		position: absolute;
+		left: -9000px;
+		top: -9000px;
+	}
+	
+}
+
+/* ToDo: Reduced Messages */
+
+.wcf-messageReduced .messageCredits {
+	display: table-cell;
+	width: 25%;
+}
+
+.wcf-messageReduced .wcf-messageCredits > .wcf-userAvatar {
+	float: left;
+}
+
+.wcf-messageReduced .wcf-messageCredits > div {
+	padding-left: 50px;
+	position: relative;
+}
+
+.wcf-messageReduced .wcf-messageFooter > .wcf-breadcrumbs {
+	position: relative;
+	bottom: 10px;
+	left: 0;
+	opacity: 1;
+}
+
+
+
+/* ToDo: CK-Editor */
+
+.cke_skin_kama {
+	/* Removes the fat border around the editor, should better be moved into the wcf-stylesheet */
+	padding: 0 !important;
+}
+
+/* ToDo: Message Tabs */
+
+/* Smilies */
+
+.wcf-smiliesContent {
+	/* none */
+	text-align: center;
+}
+
+.wcf-smiliesContent li {
+	display: inline-block;
+	margin: 2px;
+	cursor: pointer;
+}
+
+
+
+
+/* -- -- -- -- -- EOF -- -- -- -- -- */
diff --git a/wcfsetup/install/files/style/user.less b/wcfsetup/install/files/style/user.less
new file mode 100755
index 0000000000..20ec8cd5b6
--- /dev/null
+++ b/wcfsetup/install/files/style/user.less
@@ -0,0 +1,427 @@
+/**
+ * User Styles  
+ *
+ * @author		Harald Szekely 
+ * @copyright	2011-2012 WoltLab GmbH 
+ */
+
+/* ############## User ############## */
+
+/* User Avatar */
+
+.wcf-userAvatar  {
+	/* none */
+}
+
+/* User Avatar Boxed */
+
+.wcf-userAvatarFramed  {
+	/* none */
+}
+
+.wcf-userAvatarFramed img  {
+	border: 1px @borderStyle @borderColor11;
+	background-color: @backColor1;
+	padding: 1px;
+}
+
+/* User Name */
+
+.wcf-username  {
+	/* none */
+}
+
+
+
+/* ############## ToDo: Sidebar User Avatars ############## */
+
+/* I've changed the layout, so the classes may not match any more! */
+
+.wcf-sidebar .wcf-userAvatar {
+	text-align: center;
+	padding: 5px 25px;
+}
+
+.wcf-sidebar .userFollowing ul,
+.wcf-sidebar .userFollowers ul {
+	margin: 0 25px;
+	white-space: normal;
+}
+
+.wcf-sidebar .userFollowing ul:after,
+.wcf-sidebar .userFollowers ul:after {
+	content: "";
+	height: 0;
+	display: block;
+	clear: both;
+}
+
+.wcf-sidebar .userFollowing li,
+.wcf-sidebar .userFollowers li {
+	float: left;
+	margin-right: 3px;
+}
+
+.wcf-sidebar .userFollowing .wcf-userAvatarFramed,
+.wcf-sidebar .userFollowers .wcf-userAvatarFramed {
+	display: inline-block;
+	padding: 3px 0 0;
+}
+
+.wcf-sidebar .userFollowing .wcf-badgeButton,
+.wcf-sidebar .userFollowers .wcf-badgeButton {
+	margin: 15px 15px 0;
+	float: right;
+}
+
+
+
+/* ############## User Notifications ############## */
+
+/* ToDo: 
+
+Be careful with the following classes! 
+ - [.scrollableContainer] Don't touch!
+ - [.scrollableItems] Keep the inflated width, you may lower its number but it must be incredible bloated
+ - [.scrollableItems > div] Must be a fixed-width float, otherwise it would break the "scrollable"-class from jQueryTools. 
+ 	Do NOT use css-tables or [display: inline-block] as it won't work with the whole magic
+
+*/
+
+/* ToDo: User Notification Container */
+
+.userNotificationContainer {
+	width: 240px;
+	z-index: 500; /* adjust to any value you like, it *MUST* be higher than 'header.pageHeader nav.topMenu' */
+	overflow: hidden;
+}
+
+/* ToDo: Scrollable Container (jQueryTools - do not modify the class-name!) */
+
+.scrollableContainer {
+	position: relative;
+	width: 250px;
+	overflow: hidden;
+}
+
+.scrollableContainer .scrollableItems {
+	position: relative;
+	width: 20000em;
+}
+
+.scrollableContainer .scrollableItems > div {
+	border-right: 1px solid rgba(192, 192, 192, 1);
+	float: left;
+	width: 250px;
+}
+
+.scrollableContainer {
+	font-size: 90%;
+}
+
+.scrollableContainer > div:first-child ul {
+	margin: 0;
+	padding: 0;
+}
+
+.scrollableContainer > div:first-child li {
+	border-top: 1px solid rgba(192, 192, 192, 1);
+	cursor: pointer;
+	padding: 7px;
+}
+
+.scrollableContainer > div:first-child li:first-child {
+	border-top-width: 0;
+}
+
+.scrollableContainer > div:first-child p {
+	padding: 0 1px;
+}
+
+/* ToDo: User Notification Details */
+
+.userNotificationDetails {
+	padding: 7px;
+	width: 236px;
+}
+
+.userNotificationDetails header {
+	margin-bottom: 7px;
+	display: table;
+	width: 100%;
+}
+
+.userNotificationDetails .row {
+	display: table-row;
+}
+
+.userNotificationDetails .row div {
+	text-align: center;
+	display: table-cell;
+	vertical-align: middle;
+}
+
+.userNotificationDetails .row div:first-child {
+	width: 64px;
+}
+
+.userNotificationDetails .row div:last-child {
+	padding-left: 7px;
+}
+
+.userNotificationDetails .avatar img {
+	height: 64px;
+	width: 64px;
+}
+
+.userNotificationDetails h1 {
+	font-size: 110%;
+}
+
+.userNotificationDetails section {
+	border-top: 1px solid rgba(192, 192, 192, 1);
+	padding-top: 7px;
+}
+
+.userNotificationDetails nav {
+	text-align: center;
+	border-top: 1px solid rgba(192, 192, 192, 1);
+	margin-top: 7px;
+	padding-top: 7px;
+}
+
+.userNotificationDetails ul {
+	list-style-type: none;
+	display: inline-block;
+}
+
+.userNotificationDetails li {
+	cursor: pointer;
+	border: 1px solid rgba(192, 192, 192, 1) !important;
+	padding: 3px;
+	display: inline-block;
+}
+
+/* User Notification Details Loading */
+
+#userNotificationDetailsLoading {
+	background-color: rgba(255, 255, 255, .5);
+	background-image: url('{../../icon/spinner1.svg');
+	background-position: center center;
+	background-size: 24px;
+	background-repeat: no-repeat;
+	position: absolute;
+}
+
+
+
+/* ############## Profile Comments ############## */
+
+/* Globals */
+
+.wcf-commentList .wcf-containerContent {
+	position: relative;
+}
+
+.wcf-commentList .wcf-containerContent small {
+	font-size: 85%;
+	color: rgba(192, 192, 192, 1);
+	margin-top: 3px;
+}
+
+/* Comment List */
+
+.wcf-commentList > .wcf-container {
+	border-top: 1px solid rgba(204, 204, 204, 1);
+	padding: 7px;
+}
+
+.wcf-commentList > .wcf-container:first-child {
+	border-top-width: 0;
+}
+
+/* Comment Add */
+
+.wcf-commentAdd .wcf-containerIcon {
+	margin-left: 2em;
+}
+
+.wcf-commentResponseAdd {
+	border-top: 1px solid rgba(204, 204, 204, 1);
+	background-color: rgba(0, 0, 0, .015);
+	margin-top: 7px;
+	padding: 7px;
+}
+
+.wcf-commentResponseAdd .wcf-containerIcon {
+	margin-left: 10px;
+}
+
+
+
+/* Comment Response List */
+
+.wcf-commentResponseList {
+	margin-top: 7px;
+}
+
+.wcf-commentResponseAdd ~ .wcf-commentResponseList {
+	margin-top: 0;
+}
+
+.wcf-commentResponseList > .wcf-container,
+.wcf-commentResponseList > div > .wcf-container {
+	border-top: 1px solid rgba(204, 204, 204, 1);
+	background-color: rgba(0, 0, 0, .015);
+}
+
+.wcf-commentResponseList > .wcf-container:nth-child(2n+1) {
+	/* Auto-colorer for every 2nd row */
+	background-color: rgba(0, 0, 0, .0);
+}
+
+
+
+/* Comment Options */
+
+.wcf-commentContent > div > .wcf-commentOptions,
+.wcf-commentResponseList > li .wcf-commentOptions {
+	font-size: 85%;
+	display: block;
+	position: absolute;
+	top: 2px;
+	right: 2px;
+}
+
+.wcf-commentContent > div > .wcf-commentOptions > li,
+.wcf-commentResponseList > li .wcf-commentOptions > li {
+	float: left;
+	opacity: 0;
+	
+	-webkit-transition: opacity .1s linear;
+	-moz-transition: opacity .1s linear;
+	-ms-transition: opacity .1s linear;
+	-o-transition: opacity .1s linear;
+	transition: opacity .1s linear;
+}
+
+.wcf-commentContent > div:hover > .wcf-commentOptions > li,
+.wcf-commentResponseList > li:hover .wcf-commentOptions > li {
+	opacity: 1;
+}
+
+.wcf-commentContent > div > .wcf-commentOptions > li a,
+.wcf-commentResponseList > li .wcf-commentOptions li a {
+	color: rgba(153, 153, 153, 1);
+	cursor: pointer;
+	display: inline-block;
+	padding: 5px 10px;
+}
+
+
+
+/* Toggle Comments Links */
+
+.wcf-commentResponsePrevious,
+.wcf-commentResponseRecent {
+	width: 100%;
+	text-align: center;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.wcf-commentResponsePrevious a,
+.wcf-commentResponseRecent a {
+	white-space: nowrap;
+	cursor: pointer;
+	border-radius: 3px;
+	padding: 0 13px;
+	display: inline-block;
+	width: 15%;
+	min-width: 150px;
+}
+
+
+
+/* ############## Members List ############## */
+
+/* Globals */
+
+.wcf-userList {
+	/* none */
+}
+
+.wcf-userList > li {
+	
+}
+
+.wcf-userList > li:not(:only-child) {
+	margin-left: -1px !important;
+}
+
+/* Long/Short */
+
+@media screen and (max-width: 1023px) {
+	
+	.wcf-userList > li {
+		padding: 0 !important;
+		width: 100%;
+	}
+	
+	.wcf-userList > li > div {
+		border-width: 0 !important;
+		height: auto !important;
+		box-shadow: none;
+	}
+	
+}
+
+@media screen and (min-width: 1024px) {
+	
+	.wcf-userList > li {
+		border-width: 0;
+		background-color: transparent;
+		float: left;
+		width: 50%;
+		min-width: 300px;
+	}
+	
+}
+
+@media screen and (min-width: 1600px) {
+	
+	.wcf-userList > li {
+		border-width: 0;
+		background-color: transparent;
+		float: left;
+		width: 33.3%;
+	}
+	
+}
+
+@media screen and (min-width: 2000px) {
+	
+	.wcf-userList > li {
+		border-width: 0;
+		background-color: transparent;
+		float: left;
+		width: 20%;
+	}
+	
+}
+
+.wcf-userList > li > .wcf-container {
+	border-width: 1px;
+	border-style: @borderStyle;
+	border-color: @borderColor11;
+	height: 80px;
+	padding: 7px;
+}
+
+.wcf-userList > li > .wcf-container .wcf-userJoinDate {
+	font-size: 85%;
+	color: rgba(153, 153, 153, 1);
+	display: block;
+}
+
+/* -- -- -- -- -- EOF -- -- -- -- -- */
diff --git a/wcfsetup/install/files/style/wcf.less b/wcfsetup/install/files/style/wcf.less
index 236a42caa8..dd3a3a88e7 100644
--- a/wcfsetup/install/files/style/wcf.less
+++ b/wcfsetup/install/files/style/wcf.less
@@ -2829,7 +2829,7 @@ input[type='button'],
 }
 
 .wcf-boxDecor {
-	background-color: rgba(253, 253, 253, 1);
+	background-color: @backColor10;
 }
 
 /* Headings */
@@ -2877,6 +2877,63 @@ input[type='button'],
 
 
 
+/* ############## List Box ############## */
+
+/* Globals */
+
+.wcf-listBox {
+	line-height: 1.5;
+	border-width: 1px 0;
+	border-style: @borderStyle;
+	border-color: @borderColor11;
+	background-color: @backColor10;
+	margin-top: -1px !important;
+	box-sizing: border-box;
+}
+
+.wcf-listBox:first-child {
+	border-top-width: 0;
+}
+
+.wcf-listBox:last-child {
+	border-bottom-width: 0;
+}
+
+.wcf-listBox:nth-child(2n+1) {
+	/* auto-colorer for every 2nd row */
+	background-color: transparent;
+}
+
+.wcf-listBox:hover {
+	background-color: darken(@backColor10, 2%);
+}
+
+/* List Box Contents */
+
+.wcf-listBox > .wcf-container {
+	margin-top: 0;
+	padding: 7px;
+}
+
+.wcf-listBox .wcf-username {
+	font-size: 120%;
+	display: inline;
+}
+
+.wcf-listBox time {
+	font-size: 85%;
+	color: rgba(153, 153, 153, 1);
+	display: inline;
+}
+
+.wcf-listBox .wcf-badge {
+	font-size: 85%;
+	padding: 0 5px;
+	display: inline-block;
+}
+
+
+
 /* ############## Tab Menu ############## */
 
 /* Globals */