From 1f3b0c649a05f01ac1cb8538ed64e14a67a661bf Mon Sep 17 00:00:00 2001
From: Luzifr <szekely@woltlab.com>
Date: Tue, 29 Nov 2011 18:55:31 +0100
Subject: [PATCH] User Profile Comments reloaded

(at the moment still left
---
 wcfsetup/install/files/acp/style/style.css | 168 +++++++++++++--------
 1 file changed, 109 insertions(+), 59 deletions(-)

diff --git a/wcfsetup/install/files/acp/style/style.css b/wcfsetup/install/files/acp/style/style.css
index b2c363e3f0..ea0e5b4de4 100644
--- a/wcfsetup/install/files/acp/style/style.css
+++ b/wcfsetup/install/files/acp/style/style.css
@@ -727,7 +727,7 @@ div.main {
 /* -- -- -- Content -- -- -- */
 
 section.content {
-	background-color: #fff;
+	background-color: rgba(255, 255, 255, 1);
 	display: table-cell;
 	position: relative;
 	width: 100%;
@@ -4048,114 +4048,164 @@ div.scrollableContainer > div:first-child p {
 
 
 
+
+
+
 /* ToDo: User Comment List */
 
 .commentList {
-	background-color: rgba(0, 0, 0, .015);
-	margin: 0 auto;
+	line-height: 1.5;
 }
 
-.commentList small {
-	color: rgb(192, 192, 192);
-	font-size: 85%;
+.commentList > li {
+	border-top: 1px solid rgb(204, 204, 204);
 }
 
 .commentList > li:first-child {
 	border-top-width: 0;
 }
 
-.commentContent > .border > div {
-	background-color: rgba(0, 0, 0, .015);
-	border-top: 1px solid rgb(204, 204, 204);
+.commentList > li > div {
 	padding: 7px;
+	position: relative;
 }
 
-.commentContent > .border > div:last-child {
-	border-bottom-width: 0;
+.commentList > li > div:after {
+	content: '';
+	display: block;
+	clear: both;
 }
 
-.commentContent > .border > div a {
-	cursor: pointer;
+.commentList > li > div .userAvatar {
+	margin-right: 10px;
+	float: left;
+}
+
+.commentList > li:first-child:not([data-type="comment"]) > div .userAvatar {
+	margin-right: 0;
+	margin-left: 15px;
+}
+
+.commentList > li > div .userAvatar img {
+	background-color: #fff;
+	padding: 1px;
+	border: 1px solid #ddd;
+}
+
+.commentList > li > div .userAvatar img:after {
+	content: '';
+	display: block;
+	clear: both;
+}
+
+.commentList > li > div > div {
+	display: block;
+	margin-left: 65px;
+	position: relative;
+}
+
+.commentList > li > div > div small {
+	margin-top: 3px;
+	color: rgb(192, 192, 192);
+	font-size: 85%;
+}
+
+
+
+/* ToDo: User Comment Content */
+
+.commentContent {
+	margin-left: 50px;
+}
+
+.commentContent > div {
+	padding-top: 7px;
+	position: relative;
 }
 
-.commentList li,
-.commentResponseAdd {
+.commentContent > div > .commentResponseAdd {
 	border-top: 1px solid rgb(204, 204, 204);
+	background-color: rgba(0, 0, 0, .015);
 	padding: 7px;
 }
 
-.commentResponseAdd {
-	background-color: rgb(231, 242, 253);
+.commentContent > div > .commentResponseAdd:after {
+	content: '';
+	display: block;
+	clear: both;
 }
 
-.commentList li > div,
-.commentResponseAdd > div {
-	
+.commentContent > div > .commentResponseAdd > div .userAvatar {
+	float: left;
+	margin-right: 10px;
 }
 
-.commentList li > div > :first-child,
-.commentResponseAdd > div > :first-child {
-	display: table-cell;
-	padding-right: 7px;
+.commentContent > div > .commentResponseAdd > div .userAvatar img {
+	background-color: #fff;
+	padding: 1px;
+	border: 1px solid #ddd;
 }
 
-.commentList li > div > :last-child,
-.commentResponseAdd > div > :last-child {
-	display: table-cell;
-	padding-right: 3px;
-	vertical-align: top;
-	width: 100%;
+.commentContent > div > .commentResponseAdd > div > div {
+	margin-left: 50px;
+	display: block;
 }
 
-.commentContent > p > a {
+.commentContent > .userName {
+	margin-bottom: 3px;
 	display: block;
 }
 
-.commentResponseList {
+
+
+/* Comment Response List */
+
+.commentResponseList > li {
+	border-top: 1px solid rgb(204, 204, 204);
 	background-color: rgba(0, 0, 0, .015);
-	width: 100%;
 }
 
-.commentOptions li {
-	border-width: 0;
-	display: inline-block;
-	color: rgb(192, 192, 192);
-	font-size: 85%;
-	margin: 7px 0 3px 0;
-	padding: 0 3px 0 0;
+.commentResponseList > li > div {
+	padding: 7px;
+	position: relative;
 }
 
-.commentOptions li:last-child {
-	padding-right: 0;
+.commentResponseList > li:nth-child(2n+1) {
+	/* auto-colorer for every 2nd row */
+	background-color: rgba(0, 0, 0, .0);
 }
 
-.commentOptions li a {
-	cursor: pointer;
-}
 
-.commentResponseList ul.commentOptions li {
-	margin-bottom: 0;
-}
 
-.commentContent .border > :first-child {
-	border-top-left-radius: 5px;
-	border-top-right-radius: 5px;
-	border-top-width: 0;
+/* Comment Options */
+
+.commentOptions {
+	display: block;
+	font-size: 85%;
+	padding: 3px 0 0;
 }
 
-.commentContent .border > :last-child {
-	border-bottom-left-radius: 5px;
-	border-bottom-right-radius: 5px;
+.commentOptions > li {
+	color: rgb(153, 153, 153);
+	display: inline-block;
+	margin: 0 5px 0 0;
 }
 
-.commentList .userAvatar img {
-	background-color: #fff;
-	padding: 1px;
-	border: 1px solid #ddd;
+.commentOptions li a {
+	color: rgb(153, 153, 153);
+	cursor: pointer;
 }
 
 
 
+.commentResponsePrevious,
+.commentResponseRecent {
+	text-align: right;
+	color: rgb(153, 153, 153);
+	cursor: pointer;
+	margin-top: 7px;
+}
+
 
 
 
-- 
2.20.1