.book .book-body .page-wrapper .page-inner { position: relative; left: 0px; transition: 300ms ease left; } .book .book-body .page-wrapper .page-inner section.normal { overflow: visible; } .book .book-body .page-wrapper .page-inner .comments-section { position: relative; } .book .book-body .page-wrapper .page-inner .comments-section .comments-icon { position: absolute; display: none; z-index: 1; right: -40px; top: 0px; bottom: 0px; width: 64px; } .book .book-body .page-wrapper .page-inner .comments-section .comments-icon .marker { background: #eee; padding: 4px; cursor: pointer; width: 24px; float: right; font-size: 12px; height: 24px; line-height: 16px; text-align: center; border-radius: 3px; color: #555; user-select: none; -webkit-user-select: none; } .book .book-body .page-wrapper .page-inner .comments-section .comments-icon .marker:hover { background: #ddd; } .book .book-body .page-wrapper .page-inner .comments-section .comments-area { position: absolute; display: none; width: 240px; right: -304px; top: 0px; font-size: 12px; } .book .book-body .page-wrapper .page-inner .comments-section .comments-area input { width: 100%; resize: none; outline: none; border: none; background: transparent; color: inherit; margin: 0px; padding: 0px; } .book .book-body .page-wrapper .page-inner .comments-section .comments-area input + input { margin-top: 8px; } .book .book-body .page-wrapper .page-inner .comments-section .comments-area .comments-toolbar { margin-top: 6px; } .book .book-body .page-wrapper .page-inner .comments-section .comments-area .comments-toolbar a { display: inline-block; margin-right: 12px; } .book .book-body .page-wrapper .page-inner .comments-section .comments-area .comments-threads { margin-bottom: 15px; } .book .book-body .page-wrapper .page-inner .comments-section .comments-area .thread { padding: 0px; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid rgba(0, 0, 0, 0.07); cursor: pointer; } .book .book-body .page-wrapper .page-inner .comments-section .comments-area .thread:hover .thread-body .thread-title { text-decoration: underline; } .book .book-body .page-wrapper .page-inner .comments-section .comments-area .thread .thread-body .thread-user { opacity: 0.8; } .book .book-body .page-wrapper .page-inner .comments-section .comments-area .thread .thread-body .thread-title { font-weight: bold; } .book .book-body .page-wrapper .page-inner .comments-section .comments-area .comments-list { margin-bottom: 15px; } .book .book-body .page-wrapper .page-inner .comments-section .comments-area .comments-list .comments-toolbar { margin: 6px 0px 12px; } .book .book-body .page-wrapper .page-inner .comments-section .comments-area .comments-list .comments-toolbar a { color: inherit; opacity: 0.4; } .book .book-body .page-wrapper .page-inner .comments-section .comments-area .comment { padding: 0px; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid rgba(0, 0, 0, 0.07); } .book .book-body .page-wrapper .page-inner .comments-section .comments-area .comment .comment-avatar { margin-top: 4px; width: 24px; height: 24px; display: block; overflow: hidden; border-radius: 24px; float: left; } .book .book-body .page-wrapper .page-inner .comments-section .comments-area .comment .comment-avatar img { width: 100%; height: 100%; } .book .book-body .page-wrapper .page-inner .comments-section .comments-area .comment .comment-body { margin-left: 30px; } .book .book-body .page-wrapper .page-inner .comments-section .comments-area .comment .comment-body .comment-user { font-weight: bold; color: inherit; } .book .book-body .page-wrapper .page-inner .comments-section .comments-area .comment .comment-body .comment-content { opacity: 0.8; } .book .book-body .page-wrapper .page-inner .comments-section.has-highlight-comments { background-image: linear-gradient(to bottom, rgba(39, 243, 106, 0.1), rgba(39, 243, 106, 0.1)); } .book .book-body .page-wrapper .page-inner .comments-section.has-comments .comments-icon, .book .book-body .page-wrapper .page-inner .comments-section:hover .comments-icon { display: block; } .book .book-body .page-wrapper .page-inner .comments-section.has-comments-open { background-image: linear-gradient(to bottom, rgba(39, 243, 106, 0.1), rgba(39, 243, 106, 0.1)); } .book .book-body .page-wrapper .page-inner .comments-section.has-comments-open .comments-icon { display: block; } .book .book-body .page-wrapper .page-inner .comments-section.has-comments-open .comments-icon .marker { background-image: linear-gradient(to bottom, rgba(39, 243, 106, 0.1), rgba(39, 243, 106, 0.1)); } .book .book-body .page-wrapper .page-inner .comments-section.has-comments-open .comments-area { display: block; }