文章评论列表及评论功能(TODO)

bootstyle/css/bootstyle.css

@@ -2,44 +2,156 @@ body.top-navbar {
     padding-top: 60px;
 }
 
-a:hover{
-    text-decoration:none;
+a:hover {
+    text-decoration: none;
     color: #00B;
 }
 
-.page-header a{
+.page-header a {
     color: #000000;
 }
-.page-header a:hover{
+
+.page-header a:hover {
     color: #9A9A9A;
 }
 
-.page-header-m{
+.page-header-m {
     margin: 20px 0px 5px;
 }
 
-.page-header-bottom{
+.page-header-bottom {
     margin: 0px 0px 5px;
     font-size: 12px;
     color: #585858;
 }
 
-.article-tags{
+.article-tags {
     color: #676767;
     font-size: 12px;
 }
 
-.article-tags a{
+.article-tags a {
     text-decoration: none;
 }
 
-#footer{
+#footer {
     margin-top: 20px;
 }
-#footer .container{
+
+#footer .container {
     padding: 10px 15px 10px;
 }
 
-.pagination-btn{
+.pagination-btn {
     margin-top: 20px;
+}
+
+/* emotions */
+.em00, .em01, .em02, .em03, .em04, .em05, .em06, .em07, .em08, .em09, .em10, .em11, .em12, .em13, .em14 {
+    cursor: pointer;
+    background-image: url("../images/emotions/emotions-ease.png");
+    float: left;
+    height: 24px;
+    margin-right: 5px;
+    width: 24px;
+    transition: all .2s ease-out;
+    -webkit-transition: all .2s ease-out;
+    -moz-transition: all .2s ease-out;
+}
+
+#emotions span:hover {
+    transform: scale(1.2) rotate(360deg);
+    -webkit-transform: scale(1.2) rotate(360deg);
+    -moz-transform: scale(1.2) rotate(360deg);
+}
+
+.em01 {
+    background-position: -24px 0;
+}
+.em02 {
+    background-position: -48px 0;
+}
+.em03 {
+    background-position: -72px 0;
+}
+.em04 {
+    background-position: -96px 1px;
+}
+.em05 {
+    background-position: 0 -24px;
+}
+.em06 {
+    background-position: -24px -24px;
+}
+.em07 {
+    background-position: -48px -24px;
+}
+.em08 {
+    background-position: -72px -24px;
+}
+.em09 {
+    background-position: -96px -24px;
+}
+.em10 {
+    background-position: 0 -48px;
+}
+.em11 {
+    background-position: -24px -48px ;
+}
+.em12 {
+    background-position: -48px -48px;
+}
+.em13 {
+    background-position: -72px -48px;
+}
+.em14 {
+    background-position: -96px -48px;
+}
+/* emotions */
+
+.form-actions-m{
+    padding-left: 0px !important;
+    padding-bottom: 0px;
+    margin-bottom: 0px;
+}
+
+.article-relative {
+    background-color: #FCFCFC;
+    box-shadow: 0 0 2px #D5D5D5;
+    padding: 5px 0 5px 20px;
+}
+.article-relative:hover {
+    background-color: #fff;
+    box-shadow: 0 0 4px #D5D5D5;
+}
+
+.article-relative ul {
+    list-style: none;
+}
+
+.article-comments{
+    margin-bottom: 20px;
+}
+
+.bs-docs-example {
+    position: relative;
+    padding: 20px;
+    *padding-top: 0px;
+    background-color: #fff;
+    border: 1px solid #ddd;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    margin-bottom: 20px;
+}
+
+.bs-docs-example-child {
+    position: relative;
+    padding: 5px;
+    *padding-top: 0px;
+    background-color: #fff;
+    border: 1px solid #ddd;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
 }