123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124 |
- .comment-item-box {
- margin: 10px 0 0 0;
- padding: 15px 5px 0 5px;
- border-top: 1px solid #eee;
- }
-
- .comment-item-left {
- display: inline-block;
- vertical-align: top;
- width: 40px;
- }
-
- .comment-item-right {
- display: inline-block;
- width: 90%;
- margin-left: 10px;
- margin-bottom: 20px;
- }
- .comment-item-avatar {
- width: 40px;
- height: 40px;
- border-radius: 20px;
- background-position: center;
- background-size: cover;
- cursor: pointer;
- }
- .comment-item-content {
- margin: 10px 0;
- word-break: break-all;
- }
-
- .comment-item-bottom {
- margin: 20px auto;
- }
-
- .comment-item-bottom-left {
- float: left;
- user-select: none;
- }
-
- .comment-item-bottom-right {
- float: right;
- margin-left: 5px;
- cursor: pointer;
- }
-
- .comment-favor {
- font-size: 20px;
- }
-
- .comment-favored {
- color: #c00;
- }
-
- .comment-item-image {
- width: 400px;
- max-width: 100%;
- }
-
- .comment-item-image .comment-item-image-wrapper {
- float: left;
- width: 25%;
- box-sizing: border-box;
- padding: 5px;
- }
-
- .comment-item-image .comment-item-image-wrapper .comment-img-thumbnail {
- background-position: center;
- background-size: cover;
- display: inline-block;
- width: 100%;
- height: 0;
- padding-bottom: 100%;
- border-radius: 5px;
- cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/QPI84fxmD.undefined"),
- auto;
- }
-
- .comment-item-image .comment-item-image-wrapper .comment-img-divider {
- display: inline-block;
- width: 100%;
- height: 0;
- padding-bottom: 100%;
- border-radius: 5px;
- }
-
- .comment-item-image .comment-img {
- margin-right: 10px;
- }
-
- .avatar-hover-card-overlay {
- padding-top: 0;
- }
- .avatar-hover-card-overlay .ant-popover-inner-content {
- padding: 0;
- }
- .avatar-hover-card-overlay .ant-popover-arrow {
- display: none;
- }
-
- @media screen and (max-width: 616px) and (min-width: 449px) {
- .comment-item-right {
- display: inline-block;
- width: 85%;
- margin-left: 10px;
- }
- }
-
- @media screen and (max-width: 449px) and (min-width: 365px) {
- .comment-item-right {
- display: inline-block;
- width: 80%;
- margin-left: 10px;
- }
- }
-
- @media screen and (max-width: 365px) {
- .comment-item-right {
- display: inline-block;
- width: 75%;
- margin-left: 10px;
- }
- }
|