User Profile Comments reloaded

(at the moment still left

diff --git a/wcfsetup/install/files/acp/style/style.css b/wcfsetup/install/files/acp/style/style.css
index b2c363e3f06e4b2a391c2ff1c044abd97b1cde09..ea0e5b4de418166c0b4a720669342ed4fa591055 100644 (file)
--- 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;
+}
+