💄 #12494

2018-09-02 01:09:53 +08:00
parent 8cc787a718
commit b2fa8216a0
11 changed files with 603 additions and 246 deletions
--- a/nijigen/css/base.css
+++ b/nijigen/css/base.css
@@ -503,6 +503,77 @@ blockquote {
    margin-top: -5px;
    border-right-color: rgba(0, 0, 0, 0.8); }

+/*
+ * Symphony - A modern community (forum/BBS/SNS/blog) platform written in Java.
+ * Copyright (C) 2012-2018, b3log.org & hacpai.com
+ *
+ * 本文件属于 Sym 商业版的一部分，请仔细阅读项目根文件夹的 LICENSE 并严格遵守相关约定
+ */
+/**
+ * comment
+ *
+ * @author <a href="http://vanessa.b3log.org">Liyuan Li</ta>
+ * @version 0.1.0.0, Sep 1, 2018
+ */
+.em00, .em01, .em02, .em03, .em04, .em05, .em06, .em07, .em08, .em09, .em10, .em11, .em12, .em13, .em14 {
+  cursor: pointer;
+  background-image: url(../../../images/emotions/emotions.png);
+  background-size: 120px;
+  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 0; }
+
+.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; }
+
 /**
 * Solo - A small and beautiful blogging system written in Java.
 * Copyright (c) 2010-2018, b3log.org & hacpai.com
@@ -598,6 +669,12 @@ a {
  transition: all .3s;
  cursor: url(../images/pointer.cur), url(../images/pointer.cur), auto; }

+.content-reset img {
+  vertical-align: sub; }
+
+.ft__red {
+  color: #b94a48; }
+
 .module {
  border-radius: 5px;
  overflow: hidden;
@@ -717,6 +794,11 @@ a {
    left: 30px; }
  .header__nav {
    text-align: center; }
+    .header__nav img {
+      float: left;
+      height: 20px;
+      width: 20px;
+      margin: 15px 5px 0 0; }
  .header__login {
    position: absolute;
    right: 30px;
@@ -857,6 +939,92 @@ a {
  text-decoration: none;
  background-color: #6658b8; }

+.comments {
+  position: relative; }
+  .comments__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; }
+    .comments__item:hover {
+      box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.8); }
+      .comments__item:hover .comments__avatar {
+        transform: rotate(720deg);
+        border-radius: 0; }
+      .comments__item:hover .comments__content {
+        background-color: #fff; }
+      .comments__item:hover .comments__meta {
+        background-color: #d9edf7; }
+  .comments__meta {
+    border-radius: 5px 5px 0 0;
+    min-height: 37px;
+    line-height: 37px;
+    padding-left: 45px;
+    background: rgba(217, 237, 247, 0.6);
+    color: #3d4450;
+    padding-right: 15px; }
+    .comments__meta a {
+      font-weight: 700;
+      color: #3d4450; }
+      .comments__meta a:hover {
+        color: #b94a48; }
+    .comments__meta--only {
+      border-radius: 5px; }
+  .comments__content {
+    border-radius: 0 0 5px 5px;
+    background-color: rgba(255, 255, 255, 0.8);
+    padding: 15px 15px 15px 45px; }
+  .comments__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; }
+  .comments__captcha {
+    height: 30px; }
+  .comments__reply {
+    border-radius: 5px;
+    margin: 15px auto 0; }
+
+.comment-body-ref {
+  right: 0;
+  position: absolute;
+  left: 64px; }
+  .comment-body-ref .breadcrumb {
+    display: none; }
+
+.form input,
+.form textarea {
+  border: 1px solid #d1d5da;
+  background-color: #fafafa;
+  border-radius: 3px;
+  box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075);
+  padding: 7px 8px;
+  width: 100%;
+  line-height: 17px;
+  box-sizing: border-box; }
+  .form input:focus,
+  .form textarea:focus {
+    background-color: #fff;
+    box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075), 0 0 0 0.2em #dbedff;
+    border: 1px solid #4285f4; }
+
+.form .ft__red {
+  line-height: 34px; }
+
+.form .btn {
+  float: right;
+  height: 34px;
+  margin: 0 0 0 10px;
+  padding: 0 15px; }
+
@media (max-width: 768px) {
  .header__nav {
    display: none; }
--- a/nijigen/css/base.scss
+++ b/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;