Improve comments design

1 files changed, 46 insertions, 49 deletions

diff --git a/assets/css/src/comment.css b/assets/css/src/comment.css
index 1b8affbc..abbca492 100644
--- a/assets/css/src/comment.css
+++ b/assets/css/src/comment.css
@@ -1,68 +1,75 @@
-/* comments */
-.comment {
-    margin-bottom: 20px;
+/* sorting */
+.comment-sorting {
+    text-align: right;
+    font-size: 0.5em;
 }
 
-.comment:hover {
-    background: #F7F8E0;
+.comment-sorting a {
+    color: #555;
+    font-weight: normal;
+    text-decoration: none;
 }
 
-.comment-inner {
-    border-left: 4px solid #333;
-    padding-bottom: 10px;
-    padding-left: 20px;
-    margin-left: 20px;
-    margin-right: 10px;
+.comment-sorting a:hover {
+    color: #aaa;
 }
 
-.comment-preview {
-    border: 2px solid #000;
-    border-radius: 3px;
-    padding: 10px;
+/* comment container */
+.comment {
+    padding: 5px;
+    margin-bottom: 15px;
 }
 
-.comment-preview .comment-inner {
-    border: none;
-    padding: 0;
-    margin: 0;
+.comment:hover {
+    background: #fafafa;
 }
 
+/* comment title */
 .comment-title {
-    margin-bottom: 8px;
-    padding-bottom: 3px;
-    border-bottom: 1px dotted #aaa;
+    border-bottom: 1px dotted #eee;
+    margin-left: 55px;
+    margin-bottom: 10px;
 }
 
-.ui-tooltip .comment-title {
-    font-size: 80%;
+.comment-username {
+    font-weight: bold;
+    font-size: 1.1em;
 }
 
-.ui-tooltip .comment-inner {
-    padding-bottom: 0;
+.comment-date {
+    color: #999;
+    font-size: 0.7em;
+    font-weight: 200;
 }
 
+/* comment actions */
 .comment-actions {
     font-size: 0.8em;
-    padding: 0;
-    text-align: right;
+    margin-left: 55px;
+    margin-top: 8px;
 }
 
 .comment-actions li {
     display: inline;
-    padding-left: 5px;
-    padding-right: 5px;
-    border-right: 1px dotted #000;
 }
 
-.comment-actions li:last-child {
-    padding-right: 0;
-    border: 0;
+.comment-actions a {
+    color: #999;
+    text-decoration: none;
+}
+
+.comment-actions a:focus,
+.comment-actions a:hover {
+    color: #333;
+    text-decoration: underline;
 }
 
-.comment-username {
-    font-weight: bold;
+/* comment content */
+.comment-content {
+    margin-left: 55px;
 }
 
+/* comment textarea */
 .comment-textarea {
     height: 200px;
     width: 80%;
@@ -74,17 +81,7 @@
     width: 500px;
 }
 
-.comment-sorting {
-    text-align: right;
-    font-size: 0.5em;
-}
-
-.comment-sorting a {
-    color: #555;
-    font-weight: normal;
-    text-decoration: none;
-}
-
-.comment-sorting a:hover {
-    color: #aaa;
+/* comment board tooltip */
+.comment-tooltip {
+    min-width: 550px;
 }