.comment-toggle { display: -webkit-box; display: -ms-flexbox; display: flex } .comment-toggle .comment-toggle-input { display: none } .comment-toggle .comment-toggle-input:checked+.comment-toggle-icon { background-color: #2aa0ff } .comment-toggle .comment-toggle-input:checked+.comment-toggle-icon:before { margin-left: 11px } .comment-toggle .comment-toggle-icon { display: block; width: 32px; height: 20px; background-color: #434343; border-radius: 10px; box-sizing: border-box; cursor: pointer; padding: 2.5px 3px; -webkit-transition: all .3s; transition: all .3s } .comment-toggle .comment-toggle-icon:before { -webkit-transition: all .3s; transition: all .3s; content: ""; display: block; width: 15px; height: 15px; border-radius: 50%; background-color: #fff } .comment-toggle .comment-toggle-button { display: block; color: #fff!important; background-color: #434343; border-radius: 2px; line-height: 20px; height: 20px; padding: 0 3px; font-size: 12px; cursor: pointer; margin: 0 5px } .comment { font: 13px/1.6 Helvetica Neue,Helvetica,Arial,\\5FAE\8F6F\96C5\9ED1,Microsoft YaHei,sans-serif; min-height: 40px; margin: 5px auto; word-wrap: break-word } .comment .icon { max-width: 20px } .comment * { margin: 0; padding: 0; box-sizing: border-box } .comment b,.comment strong { font-weight: 700; color: #000 } .comment :focus { outline: none } .comment abbr[title] { text-decoration: none } .comment.loading { position: relative; background: url(https://a.disquscdn.com/next/embed/assets/img/loader-bg.173909e4737a7481df14d5492b5eeb48.png) no-repeat!important; display: block; height: 52px; width: 54px; margin: 20px auto; overflow: hidden; box-sizing: border-box } .comment.loading>* { display: none } .comment.loading:after { content: ""; display: block; box-sizing: border-box; width: 26px; height: 26px; position: absolute; top: 13px; left: 15px; border-width: 3px; border-style: solid; border-color: rgba(51,54,58,.4) transparent; border-radius: 13px; -webkit-transform-origin: 50% 50% 0; transform-origin: 50% 50% 0; -webkit-animation: disqus-loader-spinner-animation .7s infinite linear!important; animation: disqus-loader-spinner-animation .7s infinite linear!important } .comment.guestbook .comment-header { display: none } .comment-box { margin: 20px 0 } .comment-box,.comment-header { display: -webkit-box; display: -ms-flexbox; display: flex } .comment-header { height: 36px; line-height: 36px; font-weight: 700; font-size: 15px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; border-bottom: 2px solid #e7e9ee; color: #656c7a } .comment-header .comment-header-item { display: inline-block; border-bottom: 2px solid #656c7a; margin-bottom: -2px; padding: 0 7px } .comment-header .comment-show { position: relative; color: #2a2e2e; cursor: pointer; display: none } .comment-header .comment-header-count,.comment-header .comment-show { width: 120px; text-align: center; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; text-transform: capitalize } .comment-header .comment-header-count { display: inline-block } .comment-header .comment-header-count:after { content: " "; display: block; height: 2px; position: absolute; bottom: -2px; left: 0; right: 0; background: #2e9fff } .comment-form { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -ms-flex: auto; flex: auto } .placeholder { color: #7f919e; line-height: 30px; font-size: 12px; position: absolute; top: 7px; left: 10px; right: 9px; white-space: nowrap; text-overflow: ellipsis; cursor: text; overflow: hidden } .comment-form-wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border: 2px solid #dbdfe4; border-radius: 4px; width: 100% } .comment-actions,.comment-form-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex } .comment-actions { background: #f6f8f9; border-radius: 0 0 2px 2px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; height: 0; -webkit-transition: opacity .2s linear; transition: opacity .2s linear; opacity: 0; filter: alpha(opacity=0); visibility: hidden } .comment-actions .comment-actions-group { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative } .comment-actions .comment-actions-input { display: none } .comment-actions .comment-actions-input[type=checkbox]:checked+.comment-actions-label .icon { fill: #1d2f3a } .comment-actions .comment-actions-label { display: inline-block; width: 34px; height: 34px; cursor: pointer } .comment-actions .comment-actions-label .icon { height: 18px; margin: 8px; display: inline-block; color: #737474; cursor: pointer; fill: #c2c6cc; -webkit-transition: all .2s; transition: all .2s } .comment-actions .comment-actions-label:hover .icon { fill: #1d2f3a!important } .comment-actions .exit { display: none } .comment-actions .emojione-list { cursor: default; position: absolute; opacity: 0; filter: alpha(opacity=0); visibility: hidden; list-style: none; width: 125px; height: 125px; background-color: hsla(0,0%,100%,.96); padding: 5px 0 0 5px; border-radius: 2px; border: 2px solid #c2c6cc; top: -125px; left: -2px; margin-left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap } .comment-actions .emojione-item { position: relative; height: 24px; width: 24px; margin: 0 5px 5px 0 } .comment-actions .emojione-item:before { content: ""; display: inline-block; position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 4 } .comment-actions .emojione-item-image { height: 22px; width: 22px } .comment-actions .comment-actions-input[type=checkbox]:checked+.emojione .emojione-list { opacity: 1; filter: alpha(opacity=100); visibility: visible!important } .expanded .comment-image { display: -webkit-box; display: -ms-flexbox; display: flex } .expanded .comment-image .comment-image-progress { position: relative; height: 80px; width: 0; background: url("https://a.disquscdn.com/next/embed/assets/img/loader.5cc23909da9c4a9874500d7a85c4125f.gif") 50% no-repeat; margin: 0 5px; overflow: hidden } .expanded .comment-image .comment-image-progress:before { position: absolute; content: ""; display: block; top: 55px; bottom: 20px; left: 0; right: 0; height: 5px; width: 100%; background-color: #dbdfe4 } .expanded .comment-image .comment-image-progress .comment-image-loaded { position: absolute; background-color: #7f919e; top: 55px; left: 0; right: 0; bottom: 20px; height: 5px; width: 0 } .expanded .comment-image .comment-image-list { list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex } .expanded .comment-image .comment-image-item { height: 80px; margin-left: 5px; position: relative; border-radius: 3px; overflow: hidden } .expanded .comment-image .comment-image-item:before { overflow: hidden; line-height: 0; height: 0; -webkit-transition: all .3s; transition: all .3s; content: "\70B9\51FB\79FB\9664"; display: block; text-align: center; position: absolute; bottom: 0; left: 0; right: 0; width: 100%; font-size: 12px; background-color: rgba(0,0,0,.5); line-height: 25px; color: #fff } .expanded .comment-image .comment-image-item:hover:before { height: 25px } .expanded .comment-image .comment-image-item .comment-image-object { height: 100%; border-radius: 3px; overflow: hidden } .expanded .comment-image .comment-image-item.loading .comment-image-object { width: 20px; margin: 0 30px } .comment-form-wrapper .tips,.expanded .comment-image .comment-image-item.loading:before { display: none } .comment-form-wrapper.editing+.comment-login { opacity: 1; height: auto; margin-top: 10px } .comment-form-wrapper.editing .comment-form-textarea { font: 13px/15px Helvetica Neue,Helvetica,Arial,\\5FAE\8F6F\96C5\9ED1,Microsoft YaHei; height: 74px } .comment-form-wrapper.editing .comment-image { -webkit-transition: padding-bottom .15s ease-in-out; transition: padding-bottom .15s ease-in-out; background-color: rgba(16,48,68,.03) } .comment-form-wrapper.editing .comment-actions { -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; border-top: 2px solid #dbdfe4; opacity: 1; height: 36px; filter: alpha(opacity=100); visibility: visible!important } .comment-form-wrapper.editing .comment-actions-form { -webkit-transition: all .3s .5s; transition: all .3s .5s; margin: 87px -2px -2px } .comment-form-wrapper.editing .comment-form-submit { opacity: 1 } .comment-form-wrapper.editing { position: relative; display: block } .comment-form-wrapper.editing .comment-tips { position: absolute; width: 125px; height: 70px; font-size: 12px; border-radius: 4px; top: 50%; margin-top: -35px; left: -125px; background-color: #fff; border: 2px solid #c2c6cc; padding: 5px; line-height: 15px; display: none; cursor: text } .comment-form-wrapper.editing .comment-tips:before { content: ""; width: 0; height: 0; position: absolute; right: -8px; top: 50%; margin-top: -8px; border-style: solid; border-width: 8px 0 8px 8px; border-color: transparent #c2c6cc } .comment-form-wrapper.editing .comment-tips:after { content: ""; width: 0; height: 0; position: absolute; right: -5px; top: 50%; margin-top: -5px; border-style: solid; border-width: 5px 0 5px 5px; border-color: transparent #fff } .comment-form-wrapper.editing #tips-input:checked+.tips .comment-tips { display: block } .comment-form-wrapper.focus { border: 2px solid #c2c6cc } .comment-form-wrapper.focus .comment-actions { border-top: 2px solid #c2c6cc } .comment-form-wrapper.focus .comment-actions .comment-actions-label .icon { fill: #656c7a } .comment-form-wrapper.focus.expanded .comment-image { border-top: 2px solid #c2c6cc } .comment-form-wrapper.expanded .comment-image { border-top: 2px solid #dbdfe4; padding: 10px 0 8px } .comment-form-wrapper.logged-in .comment-form-submit { border-radius: 0 0 4px; -webkit-transition: none; transition: none; opacity: 1 } .comment-form-wrapper.logged-in .comment-actions-form { margin: 0; -webkit-transition: all .5s; transition: all .5s } .comment-form-wrapper.logged-in+.comment-login { height: 0; opacity: 0; margin-top: -40px } .comment-form-wrapper.logged-in .tips { display: none } .comment-form-wrapper.logged-in .exit { display: block } .comment-form-wrapper .comment-form-textarea { width: 100%; display: block; border: none; overflow: auto; color: #2a2e2e; cursor: text; resize: none; height: 44px; font: 18px/30px Helvetica Neue,Helvetica,Arial,\\5FAE\8F6F\96C5\9ED1,Microsoft YaHei; padding: 7px; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out } .comment-actions-form { display: -webkit-box; display: -ms-flexbox; display: flex } .comment-actions-form .comment-form-submit { z-index: 1; border: none; opacity: 0; margin: -2px; white-space: nowrap; border-radius: 4px; height: 38px; width: 80px; display: inline-block; background-color: rgba(29,47,58,.6); cursor: pointer; line-height: 38px } .comment-actions-form .comment-form-submit .icon { margin: 9px; fill: #fff; cursor: pointer; width: 20px; height: 20px } .comment-actions-form .comment-form-submit:hover { background-color: rgba(29,47,58,.75) } .comment-login { display: -webkit-box; display: -ms-flexbox; display: flex; opacity: 0; -webkit-transition: all .5s .2s; transition: all .5s .2s; height: 0; margin: -40px -5px 40px; overflow: hidden; -ms-flex-wrap: wrap; flex-wrap: wrap } .comment-thread-form { text-align: center; color: #656c7a; line-height: 32px; font-size: 14px } .comment-thread-form .comment-form-submit { background-color: rgba(29,47,58,.6); border: none; white-space: nowrap; border-radius: 4px; height: 38px; width: 120px; display: inline-block; cursor: pointer; line-height: 38px; margin: 10px 0; color: #fff; font-size: 15px } .comment-thread-form .comment-form-submit:hover { background-color: rgba(29,47,58,.75) } .comment-form-item { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 10px 0 } .comment-form-item .comment-form-label { display: block; height: 32px; line-height: 32px; font-size: 14px; color: #656c7a; width: 80px; text-align: right; font-weight: 700 } .comment-form-item .comment-form-textarea { background-color: #fff; border: 2px solid #dbdfe4; -webkit-transition: all .2s linear; transition: all .2s linear; padding: 2px 10px; border-radius: 4px; font-size: 13px; height: 64px; margin: 0 5px; width: 30px; line-height: 20px; -webkit-box-flex: 1; -ms-flex: auto; flex: auto } .comment-form-item .comment-form-textarea:focus { border: 2px solid #c2c6cc } .comment-form-input { background-color: #fff; border: 2px solid #dbdfe4; -webkit-transition: all .2s linear; transition: all .2s linear; padding: 0 10px; border-radius: 4px; font-size: 13px; height: 32px; margin: 0 5px; width: 30px; line-height: 32px; -webkit-box-flex: 1; -ms-flex: auto; flex: auto } .comment-form-input:focus { border: 2px solid #c2c6cc } .comment-item-children,.comment-list { text-align: left; list-style: none; padding-left: 0; margin-left: 0; line-height: 20px } .comment-avatar,.comment-item-avatar { display: block; width: 48px; height: 48px; margin-right: 12px } .comment-avatar img,.comment-item-avatar img { border-radius: 3px; width: 48px; height: 48px } @-webkit-keyframes disqus-loader-spinner-animation { 0% { -webkit-transform: rotate(0); transform: rotate(0) } to { -webkit-transform: rotate(1turn); transform: rotate(1turn) } } @keyframes disqus-loader-spinner-animation { 0% { -webkit-transform: rotate(0); transform: rotate(0) } to { -webkit-transform: rotate(1turn); transform: rotate(1turn) } } .comment-list { font-size: 13px } .comment-list p { margin: 0 } .comment-list a { text-decoration: none; color: #0095dd } .comment-list a[href="javascript:void(0);"] { color: #000; cursor: default } .comment-list #comment-preview { opacity: .6 } .comment-list .comment-item { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 10px } .comment-list .comment-item .comment-item { margin-bottom: 0 } .comment-list .comment-item-header { line-height: 1.2; color: #c2c6cc } .comment-list .comment-item-header .comment-item-time { color: #7f919e; word-spacing: -2px; font-weight: 500 } .comment-list .comment-item-header .comment-item-cancel,.comment-list .comment-item-header .comment-item-name { color: #0095dd; font-weight: 700; border-bottom: none } .comment-list .comment-item-header .comment-item-name[href^=javascript] { cursor: text; color: #000 } .comment-list .comment-item-header .comment-item-reply { color: #656c7a; font-weight: 500; border-bottom: none } .comment-list .comment-item-images { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 -5px; -ms-flex-wrap: wrap; flex-wrap: wrap } .comment-list .comment-item-images .comment-item-imagelink { height: 100px; margin: 0 5px } .comment-list .comment-item-images .comment-item-imagelink:hover { border-bottom: none } .comment-list .comment-item-images .comment-item-image { height: 100% } .comment-list .comment-item.transparent { opacity: .4 } .comment-list .comment-item-content { min-height: 40px; padding: 5px 0; font-size: 13px } .comment-list .comment-item-content .at { padding-right: 4px } .comment-list .comment-item-content .comment-item-content { min-height: 20px } .comment-list .comment-item-content img.emojione { width: 22px; height: 22px; margin: 0 3px } .comment-list .comment-box { margin: 6px 0 } .comment-list .comment-avatar,.comment-list .comment-avatar-image,.comment-list .comment-item-children .comment-item-avatar,.comment-list .comment-item-children .comment-item-avatar img { width: 36px; height: 36px; margin-right: 6px } .comment-list .comment-form-textarea { height: 32px; padding: 5px; line-height: 22px; font-size: 15px } .comment-list .comment-item-main { -webkit-box-flex: 1; -ms-flex: 1; flex: 1 } .comment-list .comment-item-children .comment-item-children .comment-item-children .comment-box,.comment-list .comment-item-children .comment-item-children .comment-item-children .comment-item-children { margin-left: -42px } .comment-loadmore { font-weight: 500; display: block; text-align: center; padding: 11px 14px; background-color: rgba(29,47,58,.6); color: #fff!important; line-height: 1.1; border-radius: 3px; -webkit-transition: background .2s; transition: background .2s; text-shadow: none } .comment-loadmore:hover { background-color: rgba(29,47,58,.7); border-bottom: none!important } .comment-loadmore.loading { background-color: #edeff2; color: #444!important; cursor: wait } @media screen and (max-width:450px) { .comment-item .comment-item-children .comment-box,.comment-item .comment-item-children .comment-item-children { margin-left: 0!important } .comment-item .at,.comment-item .comment-avatar,.comment-item .comment-item-children .comment-item-avatar { display: none } } .emojione .tips { display: none!important }