💄 #12494

nijigen/css/base.scss

@@ -25,6 +25,7 @@
 @import "../../../scss/reset-content";
 @import "../../../scss/function";
 @import "../../../scss/tooltipped";
+@import "../../../scss/comment";
 @import "icon";
 
 $purple: #7266BA !default;
@@ -42,6 +43,14 @@ a {
   cursor: url(../images/pointer.cur), url(../images/pointer.cur), auto
 }
 
+.content-reset img {
+  vertical-align: sub;
+}
+
+.ft__red {
+  color: $red;
+}
+
 // module
 .module {
   border-radius: 5px;
@@ -216,6 +225,13 @@ a {
 
   &__nav {
     text-align: center;
+
+    img {
+      float: left;
+      height: 20px;
+      width: 20px;
+      margin: 15px 5px 0 0;
+    }
   }
 
   &__login {
@@ -412,6 +428,126 @@ a {
   }
 }
 
+// comment
+.comments {
+  position: relative;
+  &__item {
+    border-radius: 5px;
+    list-style: none;
+    margin-bottom: 30px;
+    box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.2);
+    transition: all .3s;
+    position: relative;
+
+    &:hover {
+      box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.8);
+
+      .comments__avatar {
+        transform: rotate(720deg);
+        border-radius: 0;
+      }
+
+      .comments__content {
+        background-color: #fff;
+      }
+
+      .comments__meta {
+        background-color: rgba(217, 237, 247, 1);
+      }
+    }
+  }
+
+  &__meta {
+    border-radius: 5px 5px 0 0;
+    min-height: 37px;
+    line-height: 37px;
+    padding-left: 45px;
+    background: rgba(217, 237, 247, 0.6);
+    color: $black;
+    padding-right: 15px;
+    a {
+      font-weight: 700;
+      color: $black;
+      &:hover {
+        color: $red;
+      }
+    }
+
+    &--only {
+      border-radius: 5px;
+    }
+  }
+
+  &__content {
+    border-radius: 0 0 5px 5px;
+    background-color: rgba(255, 255, 255, 0.8);
+    padding: 15px 15px 15px 45px;
+  }
+
+  &__avatar {
+    position: absolute;
+    height: 54px;
+    width: 54px;
+    background-position: center center;
+    background-size: cover;
+    border: 2px solid #fff;
+    border-radius: 35px;
+    left: -29px;
+    top: 15px;
+    transition: all .8s ease;
+  }
+
+  &__captcha {
+    height: 30px;
+  }
+
+  &__reply {
+    border-radius: 5px;
+    margin: 15px auto 0
+  }
+}
+
+.comment-body-ref {
+  right: 0;
+  position: absolute;
+  left: 64px;
+
+  .breadcrumb {
+    display: none;
+  }
+}
+
+.form {
+  input,
+  textarea {
+    border: 1px solid #d1d5da;
+    background-color: #fafafa;
+    border-radius: 3px;
+    box-shadow: inset 0 1px 2px rgba(27, 31, 35, .075);
+    padding: 7px 8px;
+    width: 100%;
+    line-height: 17px;
+    box-sizing: border-box;
+
+    &:focus {
+      background-color: #fff;
+      box-shadow: inset 0 1px 2px rgba(27, 31, 35, .075), 0 0 0 0.2em #dbedff;
+      border: 1px solid #4285f4;
+    }
+  }
+
+  .ft__red {
+    line-height: 34px;
+  }
+
+  .btn {
+    float: right;
+    height: 34px;
+    margin: 0 0 0 10px;
+    padding: 0 15px;
+  }
+}
+
 @media (max-width: 768px) {
   .header__nav {
     display: none;