@charset "UTF-8"; .V2-comment-frm { margin-top: 0px; padding-top: 10px; border-top: 1px solid #eee; position: relative; } .V2-comments > ul > li > .V2-comment-item + .V2-comment-frm { margin-bottom: 10px; } .V2-comment-editor-disabled { background: #eee; border: 1px solid #f5a6a6; padding: 10px; border-radius: 3px; text-align: center; font-weight: bold; } .V2-comment-editor-disabled:before { content: 'Chức năng bình luận ở link này đã bị khóa'; } .V2-comment-frm[disabled]:before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,.5); z-index: 999; } .V2-comment-frm[disabled] > div { opacity: .5; } .V2-comments > ul > li > ul > li .V2-comment-frm { border-top: 0; padding: 10px; } .V2-comment-frm, .V2-comment-frm * { box-sizing: border-box; } .V2-comment-frm .editor > .tile { display: none; } .V2-comment-frm[act="new"] .editor > .tile .close-btn { display: none !important; } .V2-comment-frm .avatar { float: left; display: none; } .V2-comment-frm .avatar img { float: left; width: 50px; } .V2-comments > ul > li > ul > li .V2-comment-frm .avatar img { width: 30px; } .V2-comment-frm .editor { float: right; width: 100%; } .V2-comment-frm .editor textarea { border: 0; padding: 0; margin: 0; } .V2-comment-frm .editor .mentions-input-box .mentions, .V2-comment-frm .editor textarea { line-height: 18px; } .V2-comment-frm .editor textarea:focus::-webkit-input-placeholder { color: #e5e5e5; } .V2-comment-frm .editor textarea:focus::-moz-placeholder { color: #e5e5e5; } .V2-comment-frm .editor textarea:focus:-ms-input-placeholder { color: #e5e5e5; } .V2-comment-frm.focus .avatar { display: block; } .V2-comment-frm.focus .editor { width: calc(100% - 65px); } .V2-comment-frm .editor > .attachments { list-style-type: none; } .V2-comment-frm .editor > .attachments > li { margin-bottom: 20px; } .V2-comment-frm .editor > .attachments > li input[type="file"] { display: none; } .V2-comment-frm .editor > .attachments .attachment-item { background: #fff; } .V2-comment-frm .editor > .attachments .attachment-item > .header { background: #f6f6f6; border: 1px solid #d9dbdc; padding: 10px; text-align: left; font-size: 12px; } .V2-comment-frm .editor > .attachments .attachment-item > .header > .tile .icon { font-size: 21px; color: #666; margin-right: 3px; } .V2-comment-frm .editor > .attachments .attachment-item > .header > .tile .type { font-weight: bold; margin-right: 5px; } .V2-comment-frm .editor > .attachments .attachment-item > .header > .tile a.label { text-decoration: underline; } .V2-comment-frm .editor > .attachments .attachment-item > .header > .remove-btn { float: right; background: #fff; border: 1px solid #ddd; font-size: 11px; padding: 5px 10px; border-radius: 3px; margin: 0; position: relative; top: -2px; color: #666; cursor: pointer; font-weight: bold; } .V2-comment-frm .editor > .attachments .attachment-item > .header > .remove-btn:hover { background: #d5616e; border: 1px solid #d5616e; color: #fff; } .V2-comment-frm .editor > .attachments .attachment-item > .header > .remove-btn:after { content: 'Remove'; } .V2-comment-frm .editor > .attachments .attachment-item > .media-content { text-align: center; padding: 10px; background: #000; } .V2-comment-frm .editor > .attachments .attachment-item > .media-content object, .V2-comment-frm .editor > .attachments .attachment-item > .media-content iframe, .V2-comment-frm .editor > .attachments .attachment-item > .media-content embed { width: 100%; height: 335px; overflow: hidden; border: 0; } .V2-comment-frm .editor > .attachments .attachment-item > .image-content { text-align: center; background: #eee; border: 1px solid #ddd; border-top: none; padding: 10px; } .V2-comment-frm .editor > .attachments .attachment-item > .image-content img { max-width: 100%; } .V2-comment-frm .command-bar { list-style-type: none; background: #f6f6f6; padding: 5px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid #d9dbdc; } .V2-popup-detail-scene .attachmentViewFullSize img{ max-width: 100%; } .V2-comment-frm .command-bar > li { padding: 7px 0px; font-size: 17px; width: 30px; height: 30px; text-align: center; box-sizing: border-box; color: #666; } .V2-comment-frm .command-bar > li:hover { box-shadow: inset 0 0 0 1px #ddd; cursor: pointer; border-radius: 3px; color: #333; } .V2-comment-frm .command-bar > li.active { box-shadow: inset 0 0 0 1px #ddd; background: #fff; } .V2-comment-frm .command-bar > li.left { float: left; margin-left: 5px; } .V2-comment-frm .command-bar > li.right { float: right; margin-right: 5px; } .V2-comment-frm .editor > div > .input-frm { padding: 7px 5px 6px; box-shadow: inset 0 1px #f0f0f0; border: 1px solid #d9dbdc; border-top: 0; border-bottom: 0; background: #fff; } .V2-comment-frm .editor > div > .footer { border: 1px solid #d9dbdc; padding: 7px 10px; text-align: right; background: #f6f6f6; } .V2-comment-frm .editor > div > .footer .submit { background: #6d6d6d; border: 0; border-radius: 3px; color: #fff; font-size: 13px; font-weight: bold; padding: 8px 10px; cursor: pointer; } .V2-comment-frm .editor > div > .footer .submit:hover { background: #d5616e; } .V2-comment-frm .editor > div > .footer .submit ins { text-decoration: none; } .V2-comment-frm .editor > div > .footer .submit ins:after { content: 'Gửi bình luận'; } .V2-comments > ul > li > ul > li .V2-comment-frm.focus .editor { width: calc(100% - 45px); } .V2-comments > .tile { font-family: helvetica, arial, sans-serif; font-size: 16px; font-weight: bold; color: #999; text-transform: lowercase; padding: 10px 0; border-bottom: 1px solid #ddd; margin-bottom: 10px; } .V2-comments > .tile .comment-btn , .V2-comments > .tile .quick-note-btn { font-size: 11px; color: #333; text-transform: initial; float: right; cursor: pointer; padding: 3px 10px; margin-top: -4px; margin-left: 3px; background: linear-gradient(to top, rgba(0,0,0,.075), #fff); border: 1px solid #aaa; border-radius: 2px; } .V2-comments > .tile > .comment-btn:hover , .V2-comments > .tile > .quick-note-btn:hover { color: #C00607; } .V2-comments > .tile .comment-btn .fa, .V2-comments > .tile .quick-note-btn .fa { font-size: 14px; vertical-align: -2px; margin-right: 5px; } .V2-comments > ul, .V2-comments > ul > li > ul { list-style-type: none; } .V2-comments > ul.best-comments { background: #f4f8fc; margin: 20px 0; box-shadow: 0 0 0 1px #d4e1ee; } .V2-comments > ul > li, .V2-comments > ul > li > ul > li { position: relative; } .V2-comments > ul > li.no-comment { padding: 20px; font-size: 14px; border: 1px solid #eee; background: #fafafa; text-align: center; color: #999; } .V2-comments > ul > li > ul > li { background: #f4f5f6; border-left: 2px solid #d4d6dd; } .V2-comments > ul > li + li { border-top: 1px solid #eee; } .V2-comments > ul > li > ul > li:not(:last-child) { border-bottom: 1px solid #eaeaea; } .V2-comments > ul > li > ul { margin: 10px 0 15px 50px; } .V2-comment-item { padding: 15px 10px; } .V2-comment-item[suspected-spammer] .V2-comment-lc, .V2-comment-item[suspected-spammer] .V2-comment-header, .V2-comment-item[suspected-spammer] .V2-comment-body, .V2-comment-item[suspected-spammer] .V2-comment-footer { opacity: .5; } .V2-comment-item .suspected-spammer-vote-box { background: #fff; padding: 5px 10px; font-size: 11px; text-align: center; margin: 20px 0 10px 0; border-radius: 5px; border: 1px solid #ddd; } .V2-comment-item .suspected-spammer-vote-box .vote-btn { display: inline-block; background: #e00000; color: #fff; padding: 1px 10px; border-radius: 5px; font-weight: bold; margin-left: 10px; cursor: pointer; } .V2-comment-item .suspected-spammer-vote-box .vote-btn[flag="0"] { background: #00962b; } .V2-comment-item .suspected-spammer-vote-box .vote-btn + .vote-btn { margin-left: 5px; } .V2-comment-item .V2-comment-report-btn { display: none; } .V2-comment-item:hover .V2-comment-report-btn { display: inline-block; } .V2-comment-item .V2-comment-gift { display: inline-block; float: left; width: 35%; text-align: left; } .V2-comment-gift > *{ vertical-align: middle; } .V2-comment-gift img { width: 18px; height: 18px; border-radius: 50%; border: 1px solid #fff; } .V2-comment-gift .gift-message { color : #8e8e8e; font-size: 11px; } .V2-comment-gift .gift-token { font-size: 11px; } .V2-comment-item .V2-comment-report-btn { vertical-align: middle; color: #b3b3b3; margin-right: 5px; font-size: 11px; cursor: pointer; border-radius: 50px; padding: 2px 8px; } .V2-comment-item .V2-comment-report-btn:hover { color: #dd0000; } .V2-comment-item .V2-item-manage-menu { display: none; } .V2-comment-item:hover .V2-item-manage-menu { display: inline-block; } .V2-comment-item[disabled] { font-size: 11px; color: #9197a3; } .V2-comment-item[disabled] .admin-btn { font-size: 12px; margin-left: 5px; color: #d55f6f; cursor: pointer; } .V2-comment-item[disabled] .admin-btn:hover { text-decoration: underline; } .V2-comment-item[disabled] .admin-btn:before { content: ''; width: 2px; height: 2px; background: #9197a3; display: inline-block; margin: 0 8px 0 5px; vertical-align: 3px; } .V2-comments > ul > li > ul > li .V2-comment-item { padding-left: 10px !important; } .V2-comment-item .V2-comment-lc { float: left; text-align: right; width: 44px; } .V2-comment-item .V2-comment-lc img { width: 44px; } .V2-comments > ul > li > ul > li .V2-comment-item .V2-comment-lc { width: 26px; } .V2-comments > ul > li > ul > li .V2-comment-item .V2-comment-lc img { width: 26px; } .V2-comment-item .V2-comment-rc { margin-left: 58px; } .V2-comments > ul > li > ul > li .V2-comment-item .V2-comment-rc { margin-left: 40px; } .V2-comment-header { margin-bottom: 0; position: relative; } .V2-comment-header .comment-info-group,.V2-comment-header .comment-button-group { display: inline-block; } .V2-comment-header .comment-info-group { line-height: 22px; } .V2-comment-header .comment-info-group > div,.V2-comment-header .comment-button-group > div { display: inline-block; } .V2-comment-header .comment-button-group { text-align: right; float: right; } .V2-comment-header > * { vertical-align: middle; display: inline-block; } .V2-comment-header .LHV2-follow-switcher[type="text"], .V2-comment-header .V2-member-mute-switcher[type="text"], .V2-comment-header .V2-member-block-switcher[type="text_icon"] { font-size: 12px; } .V2-comment-item .hover-show-inline, .V2-comment-item .hover-show-block, .V2-comment-item .hover-show-inline-block { display: none !important; } .V2-comment-item:hover .hover-show-inline { display: inline !important; } .V2-comment-item:hover .hover-show-block { display: block !important; } .V2-comment-item:hover .hover-show-inline-block { display: inline-block !important; } .V2-comment-header .anchor { position: absolute; top: -60px; } .V2-comment-header .member { font-weight: bold; } .V2-comment-header .date { color: #999; } .V2-comments .V2-comment-header .separate, .V2-comments .V2-comment-footer .separate { width: 2px; height: 2px; background: #9197a3; display: inline-block; margin: 0 3px; } .V2-comment-vote { float: right; font-weight: bold; } .V2-comment-vote .counter:not([disabled]):hover { cursor: pointer; color: #cd0607; } .V2-comment-vote i { background: #f9fafa; border: 1px solid #79ad6c; width: 22px; height: 22px; font-size: 14px; text-align: center; padding: 3px; box-sizing: border-box; border-radius: 3px; color: #9dc992; cursor: pointer; margin-left: 2px; } .V2-comment-vote i:not([disabled]):hover { background: #9dc992; border-color: #9dc992; color: #fff; } .V2-comment-vote i[disabled] { background: #e7e7e8; color: #b5b5b5; border-color: #dadbdb; cursor: default; } .V2-comment-vote-icon{ float: right; margin-right: 5px; border: 1px solid #e5e5e5; padding: 2px 8px 2px 8px; border-radius: 50px; /* box-shadow: 1px 1px 2px #e5e5e5; */ background: white; height: 22.5px; } .V2-comment-vote-icon .counter{ font-weight: bold; font-size: 90%; margin-bottom: 44px; position: relative; top: -3px; margin-right: 1px; } .V2-comment-vote-icon .V2-voted-icon{ vertical-align: middle; cursor: pointer; align-items: center; margin-left: 8px; margin-right: 3px; top: 2px; } .V2-comment-vote-icon .V2-voted-icon .V2-voted-icon-voted{ position: relative; background: #fff; border-radius: 10px; display: inline-block; margin: 0 0 0 -7px; outline: none; } .V2-comment-vote-icon .V2-voted-icon img{ width: 18px; } .V2-comment-vote-icon .V2-comment-vote-gold{ position: relative; top: 2px; } .V2-comment-vote-icon .V2-comment-vote-gold .gift-star{ color: #8e9cbf; } .V2-comment-vote-icon .V2-comment-vote-gold .gift-star:hover{ cursor: pointer; color: #6d84b4; } .V2-comment-vote-icon .V2-comment-vote-gold .gifted-star{ color: #d9d9d9; } .V2-gift-gold-hover{ cursor: pointer; } .V2-comment-vote-icon .V2-gift-gold{ position: relative; top: -5px; font-size: 11px; line-height: 19px; left: -1px; color: #a0afcd; /*cursor: pointer;*/ } .V2-comment-body { padding-right: 50px; line-height: 22px; font-family: helvetica, arial, sans-serif; font-size: 14px; word-break: break-word; } .V2-comment-body .V2-quote { margin: 10px 0; background: #fff; border: 1px solid #bdbdbd; } .V2-comment-body .V2-quote > .quote__header { padding: 10px; padding-left: 35px; border-bottom: 1px solid #ddd; position: relative; background: #ddd; font-size: 11px; } .V2-comment-body .V2-quote > .quote__header:before { content: '\f10d'; font: normal normal normal 18px/1 FontAwesome; line-height: 30px; color: #8c8c8c; display: block; position: absolute; top: calc((100% - 30px)/2); left: 10px; } .V2-comment-body .V2-quote > .quote__header a { color: #666; } .V2-comment-body .V2-quote > .quote__header .username { font-weight: bold; color: #333; } .V2-comment-body .V2-quote > .quote__body { padding: 10px; color: #666; } .V2-comment-body .quote { color: #161616; margin: 10px 0 10px; position: relative; background: #fff; border: 1px solid #E1E1E1; border-left: 3px solid #8AA2B9; padding: 10px 15px; font-size: 13px; line-height: 22px; font-family: Lucida Grande; box-sizing: border-box; border-radius: 4px; } .V2-comment-body .quote + br { line-height: 0; } .V2-comment-body .quote-close { display: none; } /* V3 Quote */ .V3-quote { position: relative; margin: 10px 0; background: #fff; border: 1px solid #e1e1e1; border-top: 3px solid #f0eac9; padding: 14px; } .V3-quote .quote__dropcap{ float: left; } .V3-quote .quote__header, .V3-quote .quote__body{ margin-left: 30px; } .V3-quote .quote__gocomment{ position: absolute; bottom:14px; right: 14px; } .V3-quote .quote__gocomment a:hover svg path { fill: #c00607; opacity: 1; } .V3-quote > .quote__header { font-size: 12px; padding: 5px 0 10px; } .V3-quote > .quote__header .separate { width: 2px; height: 2px; background: #9197a3; display: inline-block; margin: 3px; } .V3-quote > .quote__header a { color: #737373; } .V3-quote > .quote__header .username { font-weight: bold; color: #333; } .V3-quote > .quote__body { line-height: 17px; padding-right: 18px; color: #666; } .V2-comment-body > .attachments { max-width: 100%; margin-top: 15px; } .V2-comment-body > .attachments .attachment-item { margin-bottom: 10px; } .V2-comment-body > .attachments .attachment-item .remove-btn { display: inline-block; font-size: 11px; color: #dd0000; cursor: pointer; float: right; margin-left: 5px; position: relative; z-index: 2; } .V2-comment-body > .attachments .attachment-item .remove-btn:before { content: '[Xóa]'; } .V2-comment-body > .attachments .attachment-item[type="link"] { background: #f5f5f5; padding: 7px 10px; border-left: 2px solid #ddd; } .V2-comment-body > .attachments .attachment-item[type="link"] a { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; display: inline-block; padding-right: 20px; max-width: calc(100% - 70px); } .V2-comment-body > .attachments .attachment-item[type="link"] .fa { font-size: 11px; color: #1078ee; position: absolute; top: 4px; right: 0; } .V2-comment-body > .attachments > [type="image"] { width: 70%; } .V2-comment-body > .attachments .attachment-item[type="image"] { float: left; margin: 0 20px 10px 0; box-sizing: border-box; transition: all .25s ease-out; } .V2-comment-body > .attachments .attachment-item[type="image"] .image-content { width: 100%; position: relative; box-sizing: border-box; } /** anh 16+ 18+ **/ .V2-comment-body > .attachments .attachment-item[type="image"] .image-content.censorship-label-4, .V2-comment-body > .attachments .attachment-item[type="image"] .image-content.censorship-label-9 { filter: blur(5px); } .V2-comment-body > .attachments .attachment-item[type="image"] .image-content div { } .V2-comment-body > .attachments .attachment-item[type="image"] .image-content:hover div:before { content: '\f065'; font: normal normal normal 21px/1 FontAwesome; position: absolute; bottom: 5px; right: 5px; display: none; width: 30px; height: 30px; background: rgba(255,255,255,.75); z-index: 2; text-align: center; padding: 5px 0; box-sizing: border-box; border-radius: 3px; cursor: pointer; } .V2-comment-body > .attachments .attachment-item[type="image"] .image-content .remove-att { display: none; position: absolute; top: 5px; right: 5px; width: 30px; height: 30px; background: rgba(255,255,255,.75); z-index: 2; text-align: center; padding: 5px 0; box-sizing: border-box; border-radius: 3px; cursor: pointer; } .V2-comment-body > .attachments .attachment-item[type="image"] .image-content .remove-att i { font-size: 18px; } .V2-comment-body > .attachments .attachment-item[type="image"] .image-content:hover .remove-att { display: block; } .V2-comment-body > .attachments .attachment-item[type="image"] .image-content img { max-width: 100%; border-radius: 10px; height: auto !important; } .V2-comment-body > .attachments .attachment-item[type="image"] .source-url { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; padding: 5px 0; } .V2-comment-body > .attachments .attachment-item[type="image"] .source-url a { color: #666; } .V2-comment-body > .attachments .attachment-item[type="image"] .source-url a:hover { color: #dd0000; } .V2-comment-body > .attachments .attachment-item[type="image"].fullsize { float: none; clear: both; width: calc(100% - 20px); } .V2-comment-body > .attachments .attachment-item[type="image"].fullsize .image-content { height: initial; padding: 2px; } .V2-comment-body > .attachments .attachment-item[type="image"].fullsize .image-content div { position: relative; top: 0; left: 0; width: initial; height: initial; } .V2-comment-body > .attachments .attachment-item[type="image"].fullsize .image-content:hover div:before { content: '\f066'; } .V2-comment-body > .attachments .attachment-item[type="image"].fullsize .image-content img { width: 100% !important; height: initial !important; position: static; transform: translate(0,0); } .V2-comment-body > .attachments .attachment-item[type="media"] .media-content iframe, .V2-comment-body > .attachments .attachment-item[type="media"] .media-content embed, .V2-comment-body > .attachments .attachment-item[type="media"] .media-content object { width: 100%; height: 350px; border: 0; } .V2-comment-body > .attachments .attachment-item[type="media"] > .info { padding: 8px 10px; background: #f5f5f5; color: #666; } .V2-comment-body > .attachments .attachment-item[type="media"] > .info .fa { font-size: 18px; vertical-align: -1px; margin-right: 3px; } .V2-comment-footer { margin-top: 10px; text-align: right; } .V2-comment-footer .best-comment-icon { color: #6aa23a; float: left; font-size: 11px; } .V2-comment-footer .best-comment-icon .fa { font-size: 12px; } .V2-comment-reply-btn { color: #6d84b4; border: 1px solid #afbdd4; display: inline-block; padding: 3px 10px; border-radius: 3px; cursor: pointer; font-size: 11px; background: #f3f3f7; vertical-align: middle; } .V2-comment-reply-btn[disabled] { cursor: default; color: #d1d1d1; background: #fbfbfb; border-color: #e8e8e8; text-shadow: 1px 1px #fff; } .V2-comment-reply-btn:not([disabled]):hover { border-color: #3b5998; } .V2-comments { margin-bottom: 25px; } .V2-comments.old-style .V2-comment-item { padding: 8px 10px; } .V2-comments.old-style .V2-comment-header { margin-bottom: 0; font-size: 11px; height: 28px; } .V2-comments.old-style .V2-comment-header .LHV2-follow-switcher[type="text"], .V2-comments.old-style .V2-comment-header .V2-member-mute-switcher[type="text"], .V2-comments.old-style .V2-comment-header .V2-member-block-switcher[type="text_icon"] { font-size: inherit; } .V2-comments.old-style .V2-comment-footer { margin-top: 7px; } .V2-comments.old-style .V2-comment-body { font-family: "lucida grande",tahoma,verdana,arial,sans-serif; font-size: 12px; line-height: 1.4em; color: #333; } .V2-comments .V2-comment-body .sticker-player { width: 250px; position: relative; text-align: center; } .V2-comments .V2-comment-body .sticker-player img { max-width: 100%; max-height: 100%; } .V2-comments .V2-comment-body .gif-player { width: 300px; position: relative; } .V2-comments .V2-comment-body .gif-player img.gif, .V2-comments .V2-comment-body .gif-player video { width: 100%; } .V2-comments .V2-comment-body .gif-player .power-by-giphy { position: absolute; bottom: 3px; right: 3px; opacity: .75; width: 75px; } .V2-comments .V2-comment-body .comment-message { display: inline-block; } .V2-comments .V2-comment-body .comment-message, .V2-comments .V2-comment-body .comment-message-edit { position: relative; margin-top: 10px; border: 1px solid #cccccc; padding: 5px 10px; border-radius: 5px; } .V2-comments .V2-comment-body .comment-message:before , .V2-comments .V2-comment-body .comment-message-edit:before { display: block; content: ""; position: absolute; top:-11px; width:0; height: 0; border-top: 6px solid transparent; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #fff; z-index:2; } .V2-comments .V2-comment-body .comment-message:after , .V2-comments .V2-comment-body .comment-message-edit:after { display: block; content: ""; position: absolute; top:-12px; width:0; height: 0; border-top: 6px solid transparent; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #cccccc; z-index: 1; } .V2-comments .V2-comment-body .comment-message-edit .text_mes, .V2-comments .V2-comment-body .comment-message-edit .message_text{ } .V2-comments.old-style > ul > li > ul { margin: 0 0 10px 18px; border-top: 1px solid #eaeaea; position: relative; } .V2-comments.old-style > ul > li > ul:before { content: ''; display: block; width: 0; height: 0; position: absolute; top: -12px; left: 17px; border: 5px solid transparent; border-bottom: 7px solid #eaeaea; } .V2-comments.old-style > ul > li > ul:after { content: ''; display: block; width: 0; height: 0; position: absolute; top: -11px; left: 17px; border: 5px solid transparent; border-bottom: 7px solid #f4f5f6; } .V2-comments.old-style > ul > li > ul > li { border-left: 0; border-bottom: 1px solid #e5eaf1; border-top: 2px solid #fff; } .V2-comments.old-style > ul > li > ul > li:first-child { border-top: 0; } .V2-comments.old-style > ul > li > ul > li:last-child { border-bottom: 0; } .V2-comments.old-style .V2-comment-reply-btn { padding: 2px 8px; background: #fff; border: 1px solid #ddd; margin-left: 3px; border-radius: 50px; } .V2-comments.old-style .V2-comment-vote { font-size: 90%; border: 1px solid #e5e5e5; border-radius: 50px; padding: 5px 8px 5px 8px; /* box-shadow: 1px 1px 2px #e5e5e5; */ background: white; height: 16.5px; } .V2-comments.old-style .V2-comment-vote .counter{ position: relative; top: -2px; } .V2-comments.old-style .V2-comment-vote .comment-voted{ margin-left: 2px; position: relative; top: 0.2px; color: #78a15d; } .V2-comments.old-style .V2-comment-vote .comment-vote{ margin-left: 2px; position: relative; top: 0.2px; color: #abbad5; } .V2-comments.old-style .V2-comment-vote .comment-vote:hover{ color: #6d84b4; cursor: pointer; } .V2-comments.old-style .V2-comment-vote i { background: #6fa756; border-color: #5d9643; color: #fff; width: 18px; height: 18px; font-size: 11px; padding: 2px; border-radius: 50%; } .V2-comments.old-style .V2-comment-vote i[disabled] { background: white; color: #b7b7b7; border: 1px dashed #b7b7b7; } .V2-comments.old-style > ul.best-comments { box-shadow: none; margin: 10px 0; } .V2-comments.old-style .V2-comment-frm .editor > .tile { background: #81b546; border: 1px solid #72a638; border-bottom: 0 !important; color: #fff; font-weight: bold; font-size: 11px; padding: 5px 10px; display: block; position: relative; } .V2-comments.old-style .V2-comment-frm .editor > .tile .close-btn { background: #fff; display: block; padding: 5px; box-sizing: border-box; width: 13px; height: 13px; position: absolute; top: calc((100% - 13px)/2); right: 10px; cursor: pointer; box-shadow: 0 0 0 1px rgba(0,0,0,.1); border-radius: 1px; font: normal normal normal 14px/1 FontAwesome; color: #999; } .V2-comments.old-style .V2-comment-frm .editor > .tile .close-btn:hover { color: #C00607; } .V2-comments.old-style .V2-comment-frm .editor > .tile .close-btn:after { font-style: normal; content: '\f104'; position: absolute; top: -1px; left: 6px; } .V2-comments.old-style .V2-comment-frm .editor > .tile .close-btn:before { font-style: normal; content: '\f105'; position: absolute; top: -1px; left: 3px; } .V2-comments.old-style .V2-comment-frm .editor > .tile .close-btn:before { } .V2-comments.old-style .V2-comment-frm .editor > .tile .close-btn:after { } .V2-comments.old-style .V2-comment-frm[act="reply"] .editor > .tile { background: #8db5d7; border: 1px solid #7eaacf; } .V2-comments.old-style .V2-comment-frm[act="edit"] .editor > .tile { background: #e6c851; border: 1px solid #dcbc3c; } .V2-comments.old-style .V2-comment-frm:not([act="edit"]).focus .avatar { display: none; } .V2-comments.old-style .V2-comment-frm:not([act="edit"]).focus .editor { width: 100%; } .V2-comments.old-style .V2-comment-frm .command-bar { padding: 3px; border: 1px solid #d5d5d5 !important; border-top: 0 !important; border-bottom: 0 !important; border-radius: 0; } .V2-comments.old-style .V2-comment-frm .command-bar > li { padding: 4px 0; width: 24px; height: 24px; font-size: 14px; position: relative; font-size: 15px; } .V2-comments.old-style .V2-comment-frm .command-bar > li .fa-youtube-play { font-size: 18px; } .V2-comments.old-style .V2-comment-frm .command-bar > li .fa-link { font-size: 16px; margin-top: 2px; } .V2-comments.old-style .V2-comment-frm .command-bar > li:hover { box-shadow: none; background: transparent; color: #2684d3; } .V2-comments.old-style .V2-comment-frm .editor > div > .input-frm { border: 1px solid #d5d5d5 !important; border-top: 0; } .V2-comments.old-style .V2-comment-frm .editor > div > .footer {border: 0;background: transparent;padding: 10px 0 0;} .V2-comments.old-style .V2-comment-frm .editor > div > .footer .submit { padding: 6px 15px; font-size: 12px; border-radius: 2px; } .V2-comment-voters { width: 400px; margin: 100px auto; background: #fff; position: relative; box-shadow: 0 0 0 7px rgba(0,0,0,.25); } .V2-comment-voters .close-btn { position: absolute; top: 10px; right: 10px; cursor: pointer; z-index: 1; font: normal normal normal 21px/1 FontAwesome; color: #000; opacity: .5; width: 14px; height: 14px; } .V2-comment-voters .close-btn:hover { opacity: 1; } .V2-comment-voters .close-btn ins { text-decoration: none; } .V2-comment-voters .close-btn ins:after { font-style: normal; content: '\f104'; position: absolute; top: 50%; left: calc(50% - 1px); transform: translateY(-50%); } .V2-comment-voters .close-btn ins:before { font-style: normal; content: '\f105'; position: absolute; top: 50%; left: calc(50% - 2px); transform: translate(-50%,-50%); } .V2-comment-voters .tile { background: #efefef; padding: 10px; border-bottom: 1px solid #dfdfdf; font-weight: bold; font-size: 13px; } .V2-comment-voters ul { list-style-type: none; } .V2-comment-voters li { padding: 10px; position: relative; } .V2-comment-voters li+li { border-top: 1px solid #f5f5f5; } .V2-comment-voters li > * { vertical-align: middle; display: inline-block; } .V2-comment-voters li .avatar img { width: 40px; } .V2-comment-voters li .username { font-weight: bold; font-size: 12px; margin-left: 5px; } .V2-comment-voters li .LHV2-follow-switcher { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); } .V2-best-comment-switch-btn { cursor: pointer; } .V2-best-comment-switch-btn .icon:before { content: '\f006'; } .V2-best-comment-switch-btn:after { content: 'Set bình luận hay'; } .V2-best-comment-switch-btn[flag="1"] .icon:before { content: '\f005'; } .V2-best-comment-switch-btn[flag="1"]:after { content: 'Bỏ bình luận hay'; } .best-comments .V2-best-comment-switch-btn[flag="1"] { color: #dd0000; } .best-comments .V2-best-comment-switch-btn[flag="1"]:hover { text-decoration: underline; } .V2-comment-edit-log-toggle { display: inline-block; vertical-align: middle; color: #b3b3b3; margin-right: 5px; font-size: 11px; cursor: pointer; } .V2-comment-edit-log-toggle:hover { color: #dd0000; } .V2-comment-edit-log-toggle:before { content: 'Đã sửa'; } .V2-comment-edit-log { width: 600px; list-style-type: none; overflow-y: auto; max-height: calc(100vh - 300px); } .V2-comment-edit-log > li { padding: 15px; } .V2-comment-edit-log > li:first-child { background: #f5f5f5; } .V2-comment-edit-log > li + li { border-top: 1px solid #ddd; } .V2-comment-edit-log > li > .avatar { float: left; width: 50px; border: 1px solid #ddd; background: #fff; padding: 2px; } .V2-comment-edit-log > li > .avatar img { width: 100%; } .V2-comment-edit-log > li > .info { margin-left: 70px; } .V2-comment-edit-log > li > .info > .log-header .poster { font-weight: bold; } .V2-comment-edit-log > li > .info > .log-body { margin: 10px 0; color: #333; font-size: 11px; line-height: 16px; } .V2-comment-edit-log > li > .info > .log-footer .date { color: #999; font-size: 11px; } .V2-emoticon-popup { background: #fff; position: absolute; border: 1px solid #ccc; z-index: 2; top: calc(100% + 3px); left: calc((100% - 302px)/2); box-shadow: 0 0 3px rgba(0,0,0,.15); } .V2-emoticon-popup.loading { width: 180px; left: calc((100% - 180px)/2); } .V2-emoticon-popup.loading > div { padding: 10px; white-space: nowrap; } .V2-emoticon-popup.loading > div:before { content: 'Loading emoticons...'; font-size: 11px; } .V2-emoticon-popup:before { content: ''; display: block; width: 0; height: 0; position: absolute; top: -14px; left: calc(50% - 7px); border: 7px solid transparent; border-bottom: 7px solid #ccc; } .V2-emoticon-popup:after { content: ''; display: block; width: 0; height: 0; position: absolute; top: -12px; left: calc(50% - 7px); border: 7px solid transparent; border-bottom: 7px solid #fff; } .V2-emoticon-popup > .recent { list-style-type: none; height: 35px; padding: 0 25px; } .V2-emoticon-popup > .slider { padding: 5px 25px; position: relative; border-top: 1px solid #ddd; } .V2-emoticon-popup > .slider > .next-btn { position: absolute; top: 0; right: 0; width: 20px; height: 100%; border-left: 1px solid #eee; cursor: pointer; color: #333; } .V2-emoticon-popup > .slider > .next-btn[disabled] { color: #eee !important; cursor: default !important; border-left: 1px solid #f5f5f5 !important; } .V2-emoticon-popup > .slider > .next-btn:not([disabled]):hover { background: #eee; border-left: 1px solid #ddd; } .V2-emoticon-popup > .slider > .next-btn:before { content: '\f105'; font: normal normal normal 21px/1 FontAwesome; display: block; width: 20px; height: 20px; position: absolute; top: calc(50% - 10px); left: calc(50% - 10px); } .V2-emoticon-popup > .slider > .next-btn:not([disabled]):hover:before { color: #4285f4; } .V2-emoticon-popup > .slider > .prev-btn { position: absolute; top: 0; left: 0; width: 20px; height: 100%; border-right: 1px solid #eee; cursor: pointer; color: #333; } .V2-emoticon-popup > .slider > .prev-btn[disabled] { color: #eee !important; cursor: default !important; border-right: 1px solid #f5f5f5 !important; } .V2-emoticon-popup > .slider > .prev-btn:not([disabled]):hover { background: #eee; border-right: 1px solid #ddd; } .V2-emoticon-popup > .slider > .prev-btn:before { content: '\f104'; font: normal normal normal 21px/1 FontAwesome; display: block; width: 20px; height: 20px; position: absolute; top: calc(50% - 10px); left: calc(50% - 10px); } .V2-emoticon-popup > .slider > .prev-btn:not([disabled]):hover:before { color: #4285f4; } .V2-emoticon-popup > .slider > .frame { max-width: 250px; overflow: hidden; position: relative; } .V2-emoticon-popup > .slider > .frame > div { position: relative; left: 0; transition: all .25s ease-out; } .V2-emoticon-popup > .slider ul { list-style-type: none; width: 250px; display: inline-block; box-sizing: border-box; vertical-align: top; } .V2-emoticon-popup > .recent li, .V2-emoticon-popup > .slider ul li { display: block; box-sizing: border-box; width: 50px; height: 30px; text-align: center; float: left; padding: 6px; } .V2-emoticon-popup > .recent li:hover, .V2-emoticon-popup > .slider ul li:hover { background: #f5f5f5; border-radius: 3px; } .V2-comments.old-style .V2-comment-frm .editor > .tabs { border: 1px solid #ddd; border-top: 0; background: linear-gradient(to top, #f3f3f3, #fff); height: 31px; padding: 0 1px 1px; } .V2-comments.old-style .V2-comment-frm .editor > .tabs > div { float: left; line-height: 30px; border-right: 1px solid #ddd; font-weight: bold; padding: 0 15px; color: #999; } .V2-comments.old-style .V2-comment-frm .editor > .tabs > div:not(.active):hover { background: linear-gradient(to top, #e6e6e6, #fff); cursor: pointer; color: #333; } .V2-comments.old-style .V2-comment-frm .editor > .tabs > div.active { background: rgba(255,255,255,.5); color: #333; } .V2-comments .V2-comment-frm .editor .gif-frm { border: 1px solid #ddd; border-top: 0; } .V2-comments .V2-comment-frm .editor .gif-frm .top-bar { padding: 10px; border-bottom: 1px solid #ddd; background: #efefef; } .V2-comments .V2-comment-frm .editor .gif-frm .search-frm { border: 1px solid #ccc; background: #fff; border-radius: 3px; width: calc(100% - 165px); display: inline-block; vertical-align: middle; box-sizing: border-box; margin-right: 6px; } .V2-comments .V2-comment-frm .editor .gif-frm .search-frm input { width: calc(100% - 30px); height: 30px; padding: 10px; font-size: 12px; border: 0; } .V2-comments .V2-comment-frm .editor .gif-frm .search-frm .fa { font-size: 14px; color: #80b4d2; text-align: center; display: inline-block; width: 30px; } .V2-comments .V2-comment-frm .editor .gif-frm .upload-btn { vertical-align: middle; } .V2-comments .V2-comment-frm .editor .gif-frm .upload-btn .browser-btn > div { display: inline-block; cursor: pointer; vertical-align: middle; width: 150px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 3px; background: linear-gradient(to top, #dadada, #f5f5f5); box-shadow: inset 0 1px #fff, 0 1px #f3f3f3; padding: 7px 10px 8px; font-weight: bold; font-size: 12px; } .V2-comments .V2-comment-frm .editor .gif-frm .upload-btn .browser-btn > div .fa { font-size: 14px; margin-right: 5px; } .V2-comments .V2-comment-frm .editor .gif-frm .upload-btn .dragdrop-active .drag-drop-area { top: 0; left: 0; background: transparent; border: 0; width: 100%; height: auto; font-weight: normal; } .V2-comments .V2-comment-frm .editor .gif-frm .upload-btn .dragdrop-active .drag-drop-area:after { content: none; } .V2-comments .V2-comment-frm .editor .gif-frm .upload-btn .dragdrop-active .drag-drop-area span:before { content: ''; display: block; position: absolute; top: -16px; left: -16px; background: #fff4e2; border: 2px dashed #f7c2b8; width: calc(100% + 32px); height: calc(100% + 32px); z-index: -1; box-sizing: border-box; } .V2-comments .V2-comment-frm .editor .gif-frm .upload-btn .dragdrop-active .drag-drop-area span { color: #9a5050; } .V2-comments .V2-comment-frm .editor .gif-frm .gif-list { position: relative; max-height: 350px; overflow-y: scroll; } .V2-comments .V2-comment-frm .editor .gif-frm .gif-list ul { margin: 0; list-style-type: none; padding: 10px; position: relative; } .V2-comments .V2-comment-frm .editor .gif-frm .gif-list ul:empty:before { content: 'Bạn không có GIF nào trong recent list, xin sử dụng ô tìm kiếm để tìm GIFs bạn muốn'; } .V2-comments .V2-comment-frm .editor .gif-frm .gif-list li { display: inline-block; width: 192px; display: inline-block; background: #FEFEFE; margin: 0 0 10px 10px; position: relative; background: #ddd; } .V2-comments .V2-comment-frm .editor .gif-frm .gif-list li:nth-child(3n+1) { margin-left: 0; } .V2-comments .V2-comment-frm .editor .gif-frm .gif-list li video, .V2-comments .V2-comment-frm .editor .gif-frm .gif-list li img { width: 100%; height: 100%; position: absolute; top: 0; left: 0; cursor: pointer; } .V2-gif-uploading { border-radius: 5px; position: absolute; width: 350px; padding: 20px; } .V2-gif-uploading .upload-progress .step:before { content: 'Uploading...'; font-weight: bold; font-size: 11px; } .V2-gif-uploading[data-step="process"] .upload-progress .step:before { content: 'Processing...'; } .V2-gif-uploading .upload-progress .progress-bar { height: 8px; background: #fff; border: 1px solid #2ca7e8; position: relative; margin-top: 5px; } .V2-gif-uploading .upload-progress .progress-bar > div { position: absolute; top: 0; left: 0; height: 100%; background: #39baff; } .V2-gif-uploading[data-step="process"] .upload-progress .progress-bar > div { width: 100% !important; overflow: hidden; } .V2-gif-uploading[data-step="process"] .upload-progress .progress-bar > div:after { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent) ); background-image: -moz-linear-gradient( -45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent ); z-index: 1; -webkit-background-size: 50px 50px; -moz-background-size: 50px 50px; -webkit-animation: file-process 2s linear infinite; overflow: hidden; } @-webkit-keyframes file-process { 0% { background-position: 0 0; } 100% { background-position: 50px 50px; } } .V2-gif-uploading .upload-progress .info { font-size: 11px; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .V2-gif-uploading .upload-progress .info span:first-child { font-weight: bold; } .V2-gif-uploading .upload-progress .info span+span { margin-left: 5px; } .V2-comments .V2-comment-frm .editor .sticker-frm { border: 1px solid #ddd; border-top: 0; } .V2-comments .V2-comment-frm .editor .sticker-frm .top-bar { padding: 10px; border-bottom: 1px solid #ddd; background: #efefef; } .V2-comments .V2-comment-frm .editor .sticker-frm .search-frm { border: 1px solid #ccc; background: #fff; border-radius: 3px; width: calc(100% - 145px); display: inline-block; vertical-align: middle; box-sizing: border-box; margin-right: 6px; } .V2-comments .V2-comment-frm .editor .sticker-frm .search-frm input { width: calc(100% - 30px); height: 30px; padding: 10px; font-size: 12px; border: 0; } .V2-comments .V2-comment-frm .editor .sticker-frm .search-frm .fa { font-size: 14px; color: #80b4d2; text-align: center; display: inline-block; width: 30px; } .V2-comments .V2-comment-frm .editor .sticker-frm .more-list { float: right; height: auto; position: relative; display: inline-flex; width: 40px; background: #efefef; } .V2-comments .V2-comment-frm .editor .sticker-frm .more-list span{ background-color: #fa3e3e; border-radius: 2px; color: #fff; padding: 1px 3px;cursor: pointer; position: absolute; right: 4px; top: 4px; } .V2-comments .V2-comment-frm .editor .sticker-frm .next-btn { float: right; width: 130px; height: auto; position: relative; background: #efefef; text-align: right; padding-right: 15px; } .V2-comments .V2-comment-frm .editor .sticker-frm .previous-btn { float: left; width: 34px; height: auto; position: relative; background: #efefef; text-align: center; } .V2-comments .V2-comment-frm .editor .sticker-frm .sticker-list ul { position:absolute; display:block; padding-left: 34px; margin:0; width:4000px; } .V2-comments .V2-comment-frm .editor .sticker-frm .sticker-list ul li { display:block; list-style:none; float:left; } .V2-comments .V2-comment-frm .editor .sticker-frm .sticker-item-list { overflow-y: auto; max-height: 400px; } .V2-comments .V2-comment-frm .editor .sticker-frm .sticker-item-list ul {list-style-type: none;padding: 0;margin: 15px 0 0 15px;overflow: hidden;display: inline-block;} .V2-comments .V2-comment-frm .editor .sticker-frm .sticker-item-list li {float: left;width: 80px;height: 80px;display: block;text-align: center;margin: 0 15px 15px 0;} .V2-comments .V2-comment-frm .editor .sticker-frm .sticker-item-list li:nth-child(6n+1) { margin-left: 0; } .V2-comments .V2-comment-frm .editor .sticker-frm .sticker-item-list img { max-width: 100%; max-height: 100%; cursor: pointer; } .V2-comments .V2-comment-frm .editor .sticker-frm .sticker-list {float: left;width: 75%;margin-right: 15px; position: relative; overflow: hidden;} .V2-comments .V2-comment-frm .editor .sticker-frm .sticker-list ul {list-style-type: none;margin: 0;} .V2-comments .V2-comment-frm .editor .sticker-frm .sticker-list li {float: left;width: 34px;height: 34px;display: block;margin-right: 15px;text-align: center;} .V2-comments .V2-comment-frm .editor .sticker-frm .sticker-list li:last-child {margin-right: 0} .V2-comments .V2-comment-frm .editor .sticker-frm .sticker-list img { max-width: 100%; max-height: 100%; cursor: pointer; } .V2-comments .V2-comment-frm .editor .sticker-frm .sticker-list .fa { font-size: 32px; color: #666; cursor: pointer; line-height: 34px; } .V2-comments .V2-comment-frm .editor .sticker-frm .sticker-list .fa:hover { color: #333; } .V2-comments .V2-comment-frm .editor .sticker-frm .add-btn { display: inline-block; cursor: pointer; vertical-align: middle; width: 130px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 3px; background: linear-gradient(to top, #dadada, #f5f5f5); box-shadow: inset 0 1px #fff, 0 1px #f3f3f3; padding: 7px 10px 8px; font-weight: bold; font-size: 12px; vertical-align: middle; } .V2-comments .V2-comment-frm .editor .sticker-frm .add-btn .fa { font-size: 14px; margin-right: 2px; vertical-align: -1px; } .V2-sticker-add-frm .sticker-list{ } .V2-sticker-add-frm .sticker-list .sticker-box { float: left; margin: 0 14px 14px 0px; padding: 16px 16px 12px; position: relative; width: 230px; border: 1px solid #dddfe2; border-radius: 3px; } .V2-sticker-add-frm .sticker-list .sticker-box .name-sticker{ text-transform: uppercase; } .V2-sticker-add-frm .sticker-list .sticker-box .box-img{ display: block; margin-bottom: 10px; height: 85px; } .V2-sticker-add-frm .sticker-list .sticker-box .cover-sticker{ width: 85px; float: left; } .V2-sticker-add-frm .sticker-list .sticker-box .cover-sticker img{ max-height: 85px; max-width: 85px; } .V2-sticker-add-frm .sticker-list .sticker-box .items-sticker{ float: right; width: 140px; height: 90px; } .V2-sticker-add-frm .sticker-list .sticker-box .items-sticker img{ max-height: 40px; max-width: 40px; margin: 0px 5px 5px 0; } .V2-sticker-add-frm .sticker-list .sticker-box .action{ margin: 10px 0; } .V2-sticker-add-frm .sticker-list .sticker-box .action .btn{ float: right; margin-left: 3px; display: inline-block; border: 1px solid #ccc; background: #fff; padding: 5px 10px; cursor: pointer; box-sizing: border-box; position: relative; height: auto; line-height: normal; vertical-align: middle; font-size: 12px; font-weight: bold; } .V2-sticker-add-frm .sticker-list .sticker-box .action .btn.btn-blue{ border: 1px solid #0076ad; background: #1b91c8; color: #fff; } .V2-sticker-add-frm .sticker-list .sticker-box .action .btn.btn-red{ background: #e30000; color: #fff; } .V2-sticker-add-frm { width: 595px; position: absolute; margin: 100px 0; top: 0; left: calc((100% - 595px)/2); } .V2-sticker-add-frm > .row { } .V2-sticker-add-frm > .row .cell:first-child { float: left; width: 50px; } .V2-sticker-add-frm > .row .cell:last-child { margin-left: 60px; } .V2-sticker-add-frm .input-wrap { height: 50px; border: 1px solid #ccc; border-radius: 5px; overflow: hidden; box-sizing: border-box; } .V2-sticker-add-frm .input-wrap input { height: 100%; position: absolute; border: 0; padding: 15px; } .V2-sticker-add-frm .cover-uploader-wrap { position: relative; overflow: hidden; border-radius: 5px; background-size: cover; } .V2-sticker-add-frm .cover-uploader-wrap[data-file] { box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); } .V2-sticker-add-frm .cover-uploader-wrap .uploader-progress-bar { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; opacity: .5; border: 0; } .V2-sticker-add-frm .cover-uploader, .V2-sticker-add-frm .cover-uploader .browser-btn { width: 50px; height: 50px; position: relative; box-sizing: border-box; z-index: 1; } .V2-sticker-add-frm .cover-uploader .browser-btn input { z-index: 2; } .V2-sticker-add-frm .cover-uploader .browser-btn > div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; padding: 0; box-sizing: border-box; border: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); border-radius: 5px; background-color: #ddd; } .V2-sticker-add-frm .cover-uploader .browser-btn:hover > div { box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); border: 0; } .V2-sticker-add-frm .cover-uploader .browser-btn > div .fa { line-height: 50px; font-size: 14px; color: #999; } .V2-sticker-add-frm .cover-uploader .browser-btn:hover > div .fa { color: #666; } .V2-sticker-add-frm .cover-uploader-wrap[data-file] .cover-uploader { opacity: 0; } .V2-sticker-add-frm .sitcker-item-list-label { margin: 30px 0 0 0; } .V2-sticker-add-frm .sticker-item-list { list-style-type: none; padding: 0; margin: 0; overflow: hidden; } .V2-sticker-add-frm .sticker-item-list > li { float: left; width: 130px; height: 130px; position: relative; margin: 0 0 15px 15px; } .V2-sticker-add-frm .sticker-item-list > li:nth-child(4n+1) { margin-left: 0; } .V2-sticker-add-frm .sticker-item-list > .sticker-item { background-size: cover; } .V2-sticker-add-frm .sticker-item-list > li > .fa { display: block; position: absolute; top: 9px; right: 5px; width: 23px; height: 23px; border-radius: 50%; background: rgba(0,0,0,.05); color: #333; text-align: center; line-height: 23px; font-size: 14px; cursor: pointer; box-shadow: 0 0 0 1px rgba(255,255,255,.5); text-shadow: 0 0 1px rgba(255,255,255,.75); } .V2-sticker-add-frm .sticker-item-list > li > .fa:hover { background: rgba(0,0,0,.25); } .V2-sticker-add-frm .sticker-item-list > li .uploader-progress-bar { position: absolute; top: 1px; left: 1px; width: calc(100% - 2px); background: rgba(255,255,255,.5); border: 0; height: 4px; } .V2-sticker-add-frm .sticker-item-list > li .step:after { content: 'Uploading...'; width: 80px; height: 20px; position: absolute; top: calc((100% - 20px)/2 + 4px); left: calc((100% - 80px)/2); font-size: 11px; line-height: 20px; text-align: center; color: #000; display: block; text-shadow: 1px 1px #fff; display: block; background: rgba(255,255,255,.75); border-radius: 5px; } .V2-sticker-add-frm .sticker-item-list > li[data-uploader-step="process"] .step:after { content: 'Processing...'; } .V2-sticker-add-frm .sticker-item-list > li[data-uploader-step="queue"] .step:after { content: 'Waiting...'; } .V2-sticker-add-frm .sticker-item-list > li .sticker-uploader, .V2-sticker-add-frm .sticker-item-list > li .sticker-uploader .browser-btn { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .V2-sticker-add-frm .sticker-item-list > li .sticker-uploader .browser-btn { z-index: 1; } .V2-sticker-add-frm .sticker-item-list > li .sticker-uploader .browser-btn > div { background: #ddd; position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; padding: 0; box-sizing: border-box; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); border: 0; border-radius: 5px; z-index: -1; } .V2-sticker-add-frm .sticker-item-list > li .sticker-uploader .browser-btn:hover > div { box-shadow: inset 0 0 0 5px rgba(0,0,0,.05); } .V2-sticker-add-frm .sticker-item-list > li .sticker-uploader .browser-btn > div .fa { line-height: 130px; font-size: 42px; color: #999; } .V2-sticker-add-frm .sticker-item-list > li .sticker-uploader .browser-btn:hover > div .fa { color: #666; } .V2-gif-add-frm .gif-frm .gif-preview { position: relative; } .V2-gif-add-frm .gif-frm .gif-preview > i { position: absolute; top: 5px; right: 5px; background: rgba(255,255,255,.25); display: block; color: rgba(255,255,255,.5); cursor: pointer; border-radius: 50%; width: 23px; height: 23px; text-align: center; font-size: 14px; line-height: 23px; z-index: 2; } .V2-gif-add-frm .gif-frm .gif-preview > i:hover { background: rgba(255,255,255,.5); color: #fff; } .V2-gif-add-frm .gif-frm .gif-preview video { width: 100%; border-radius: 5px; position: relative; } .V2-gif-add-frm .gif-frm { background: #ececec; border: 1px solid #e4e4e4; padding: 15px; box-sizing: border-box; } .V2-gif-add-frm .gif-frm .upload-progress .step:before { content: 'Uploading...'; font-weight: bold; font-size: 11px; } .V2-gif-add-frm .gif-frm[data-step="convert"] .upload-progress .step:before { content: 'Converting...'; } .V2-gif-add-frm .gif-frm .upload-progress .progress-bar { height: 8px; background: #fff; border: 1px solid #2ca7e8; position: relative; margin-top: 5px; } .V2-gif-add-frm .gif-frm .upload-progress .progress-bar > div { position: absolute; top: 0; left: 0; height: 100%; background: #39baff; } .V2-gif-add-frm .gif-frm[data-step="convert"] .upload-progress .progress-bar > div { width: 100% !important; overflow: hidden; } .V2-gif-add-frm .gif-frm[data-step="convert"] .upload-progress .progress-bar > div:after { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent) ); background-image: -moz-linear-gradient( -45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent ); z-index: 1; -webkit-background-size: 50px 50px; -moz-background-size: 50px 50px; -webkit-animation: process 2s linear infinite; overflow: hidden; } @-webkit-keyframes process { 0% { background-position: 0 0; } 100% { background-position: 50px 50px; } } .V2-gif-add-frm .gif-frm .upload-progress .info { font-size: 11px; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .V2-gif-add-frm .gif-frm .upload-progress .info span:first-child { font-weight: bold; } .V2-gif-add-frm .gif-frm .upload-progress .info span+span { margin-left: 5px; } .V2-gif-add-frm .gif-frm .gif-uploader .osc-uploader { display: block; } .V2-gif-add-frm .gif-frm .gif-uploader .browser-btn > div { font-size: 14px; border: 0; box-shadow: none; background: transparent; text-align: center; } .V2-gif-add-frm .gif-frm .gif-uploader .browser-btn > div .fa { font-size: 21px; vertical-align: -1px; margin-right: 5px; } .V2-gif-add-frm .gif-frm .gif-uploader .dragdrop-active .drag-drop-area { top: 0; left: 0; background: transparent; border: 0; width: 100%; height: auto; font-weight: normal; } .V2-gif-add-frm .gif-frm .gif-uploader .dragdrop-active .drag-drop-area:after { content: none; } .V2-gif-add-frm .gif-frm .gif-uploader .dragdrop-active .drag-drop-area span:before { content: ''; display: block; position: absolute; top: -16px; left: -16px; background: #fff4e2; border: 2px dashed #f7c2b8; width: calc(100% + 32px); height: calc(100% + 32px); z-index: -1; box-sizing: border-box; } .V2-gif-add-frm .gif-frm .gif-uploader .dragdrop-active .drag-drop-area span { color: #9a5050; } .V2-gif-add-frm .gif-frm[data-step="browse"] .upload-progress { display: none; } .V2-gif-add-frm .gif-frm[data-step="browse"] .gif-preview { display: none; } .V2-gif-add-frm .gif-frm[data-step="upload"] .gif-uploader, .V2-gif-add-frm .gif-frm[data-step="convert"] .gif-uploader { display: none; } .V2-gif-add-frm .gif-frm[data-step="upload"] .gif-preview, .V2-gif-add-frm .gif-frm[data-step="convert"] .gif-preview { display: none; } .V2-gif-add-frm .gif-frm[data-step="preview"] .upload-progress { display: none; } .V2-gif-add-frm .gif-frm[data-step="preview"] .gif-uploader { display: none; } /* Comment btn */ .btn__gray--noboder { border: none; color: #999; } .btn__gray { color: #bbb; border: 1px solid #eee !important; } .btn__gray--hover:hover { border: 1px solid #ddd !important; color: #6d84b4 !important; } .comment-spam-vote { margin-top: 10px; font-size: 11px; position: relative; } .comment-spam-vote[disabled="disabled"] { opacity: 0.25; } .comment-spam-vote[disabled="disabled"]:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; } .comment-spam-vote .message { color: #4a4a4a; } .comment-spam-vote .vote-btns { margin-left: 10px; } .comment-spam-vote .vote-btn { font-weight: bold; background: #fff; padding: 1px 2px; text-align: center; border-radius: 3px; border: 1px solid #c7c7c7; display: inline-block; cursor: pointer; } .comment-spam-vote .vote-btn:hover { border: 1px solid #a5a5a5; background: #fbfbfb; } .comment-spam-vote .vote-btn + .vote-btn { margin-left: 3px; } .comment-spam-vote .vote-btn:before { content: 'Đúng là spam'; color: #0d6306; } .comment-spam-vote .vote-btn[data-value="0"]:before { content: 'Không phải spam'; color: #af0a0a; } .vote-icon-box{ text-align: center; width: 583px; padding:26px; } .vote-icon-box-container h4 { font-size: 22px; line-height: 24px; font-family: "Roboto", Tahoma, 'Verdana', Helvetica, sans-serif; margin-bottom: 10px; } .vote-icon-box-container h6 { font-size: 16px; line-height: 19px; font-weight: 500; font-family: "Roboto", Tahoma, 'Verdana', Helvetica, sans-serif; margin-bottom: 22px; } .vote-icon-box-container h6 img{ vertical-align: middle; margin-top: -4px; } .vote-icon-box-container .link-container{ background-color: #f7f7f7; border-bottom: 1px solid #e1e1e1; } .vote-icon-box-container .link-container .link-container-gif-token{ font-size: 22px; line-height: 24px; float: left; width: 100%; font-weight: 500; margin-top: 26px; margin-bottom: 15px; } .vote-icon-box-container .link-container .link-container-gif-token img{ vertical-align: middle; width: 43px; margin-left: 10px; margin-bottom: 10px; } .vote-icon-box-container .link-container .link-container-gif-token input{ width: 85px; height: 27px; font-size: 22px; padding: 5px; border: 1px solid #b7b7b7; border-radius: 4px; } .vote-icon-box-container .link-container-info{ font-size: 14px; line-height: 19px; color: #e5e5e5; margin-bottom: 17px; margin-top: 22px; font-family: "Roboto", Tahoma, 'Verdana', Helvetica, sans-serif; } .vote-icon-box-container .action-container-star{ box-shadow: 1px 1px 1px 2px #f4f4f4; } .vote-icon-box-container .action-container-star .action-container-star-icon{ width: calc((100% - (4*10px))/5); display: inline-block; text-align: center; padding-bottom: 29px; padding-top: 20px; } .vote-icon-box-container .action-container-star .action-container-star-icon label{ display: block; cursor: pointer; } .vote-icon-box-container .action-container-star .action-container-star-icon .container{ position: relative; cursor: pointer; font-size: 27px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: inline-block; top: 13px; } .vote-icon-box-container .action-container-star .action-container-star-icon .container input{ opacity: 0; cursor: pointer; position: absolute; width: 100%; height: 100%; z-index: 10; } .vote-icon-box-container .action-container-star .action-container-star-icon .container .checkmark{ height: 25px; width: 25px; background-color: #d6d6d6; border-radius: 50%; border: 2px solid white; display: block; } .action-container-star .action-container-star-icon .container:hover input ~ .checkmark { background-color: #ccc; } .action-container-star .action-container-star-icon .container input:checked ~ .checkmark { background-color: #5ab400; } .action-container-star .action-container-star-icon .container .checkmark:after { content: ""; position: absolute; /*display: none;*/ left: 11px; top: 5px; width: 5px; height: 12px; border: solid white; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .vote-icon-box-container .action-container{ background-color: #f7f7f7; position: relative; } .vote-icon-box-container .action-container .action-container-info{ font-size: 14px; line-height: 24px; font-weight: bold; font-family: "Roboto", Tahoma, 'Verdana', Helvetica, sans-serif; padding-top: 14px; margin-bottom: 12px; border-top: 4px solid #e5e5e5; } .vote-icon-box-container .action-container .action-container-info:after{ content: ""; position: absolute; display: block; left: 50%; top: -3px; width: 6px; height: 6px; background-color: #e5e5e5; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: translateX(-50%) rotate(45deg); } .vote-icon-box-container .action-container .action-container-icon-parten{ display: flex; padding-left: 10px; padding-right: 10px; padding-bottom: 18px; } .vote-icon-box-container .action-container .action-container-icon{ width: calc((100% - 5*7px)/6); text-align: center; border-radius: 4px; border: 1px solid #f1f1f1; background: white; margin-right: 2px; margin-left: 2px; height: 115px; box-shadow: 1px 1px 3px #c4c1c1; } .vote-icon-box-container .action-container .action-container-icon .container-icon{ cursor: pointer; } .vote-icon-box-container .action-container .action-container-icon .action-container-icon-star-vote{ padding: 13px; } .vote-icon-box-container .action-container .action-container-icon .action-container-icon-name{ width: 80px; height:37px; background:#f6f6f8; margin-left: 4px; margin-right: 8px; border-radius:5px; } .vote-icon-box-container .action-container .action-container-icon img{ cursor: pointer; } .vote-icon-box-container .action-container .action-container-icon div { display: block; } .vote-icon-box-container .action-container .action-container-icon .icon-name{ cursor: pointer; display: block; font-size: 12px; line-height: 14px; color: #5b5b5b; font-family: "Roboto", Tahoma, 'Verdana', Helvetica, sans-serif; padding-top: 5px; text-align: center; } .action-container-icon .container-icon input{ display: none; } .vote-icon-box-container .action-container-member-gif{ background-color: #fdf9ee; margin-top: 20px; padding: 7px; margin-bottom: 24px; font-size: 14px; line-height: 24px; } .vote-icon-box-container .action-container-member-gif .user-avatar{ width: 32px; height: 32px; border-radius: 50%; } .vote-icon-box-container .action-container-member-gif .avatar{ width: 32px; height: 32px; border-radius: 50%; vertical-align: middle; } .vote-icon-box-container .action-container-member-gif .user-name{ font-size: 14px; line-height: 24px; font-weight: bold; margin-left: 5px; font-family: "Roboto", Tahoma, 'Verdana', Helvetica, sans-serif; } .vote-icon-box-container .action-container-member-gif .total-token{ font-size: 14px; line-height: 24px; color: #c41616; font-family: "Roboto", Tahoma, 'Verdana', Helvetica, sans-serif; font-weight: bold; } .vote-icon-box-container .submit-vote{ margin-top: 30px; } .vote-icon-box-container .submit-vote .submit-vote-icon{ background-color: #ea6153; color: white; padding: 9px 19px; font-size: 18px; line-height: 24px; border-radius: 4px; font-family: "Roboto", Tahoma, 'Verdana', Helvetica, sans-serif; cursor: pointer; } .V2-list-voter-gold{ border-radius: 4px; } .V2-list-voter-gold .box-tile{ border-bottom: 1px solid #bbb; padding: 10px; color: red; } .V2-list-voter-gold .list-voter{ list-style-type: none; margin: 0; padding: 0; } .V2-list-voter-gold .list-voter li{ padding: 5px 10px; font-size: 12px; display: flex; } .V2-list-voter-gold .list-voter li + li{ border-top: 1px solid #efefef; } /*.V2-list-voter-gold .list-voter .user-info{*/ /*margin-left: 24px;*/ /*}*/ .V2-list-voter-gold .list-voter .user-info a img { width: 24px; height: 24px; border-radius: 50%; vertical-align: -8px; } .V2-list-voter-gold .list-voter .user-info a span{ margin-left: 5px; } .V2-list-voter-gold .list-voter .icon-voted{ width: 24px; } .V2-list-voter-gold .list-voter .icon-voted img{ width: 24px; } .V2-list-voter-gold .list-voter .gold{ font-weight: bold; } .V2-list-voter-gold .list-voter .star-count{ margin-top: 3px; width: 16px; } .V2-list-voter-gold .list-voter .member-info{ width: 200px; } .V2-list-voter-gold .list-voter .icon-title{ margin-top: 3px; margin-left: 5px; margin-right: 5px; width: 80px; text-align: center; } .V2-list-voter-gold-popup{ background-color: #363636; border-radius: 4px; width: 110px; top: 20px; position: absolute; z-index: 10000; } .V2-list-voter-gold-popup:before{ width: 10px; height:10px; background-color: #363636; content: ''; display: inline-block; left:50%; top:-8px; position:absolute; transform: rotate(-45deg) translate(-50%); } .V2-list-voter-gold-popup .list-voter-gold{ list-style: none; padding: 5px; margin-left: 8px; } .V2-list-voter-gold-popup .list-voter-gold li{ width:100%; padding:3px 0; color: white; } .V2-list-voter-gold-popup .list-voter-gold .member-more{ color: white; font-size: 9px; } .V2-list-voter-gold-popup .list-voter-gold .user-info{ color: white; } .V2-list-voter-gold-popup .list-voter-gold .icon-voted{ float: right; } .V2-list-voter-gold-popup .list-voter-gold .icon-voted img { width: 18px; } .container-confirm-gift-star{ padding: 26px; width: 464px; height: 239px; position: relative; } .container-confirm-gift-star .gift-star-for{ font-size: 16px; line-height: 24px; font-weight: bold; } .container-confirm-gift-star .gift-star-for span{ color: #ca0607; } .container-confirm-gift-star .gift-star-content{ font-size: 14px; line-height: 24px; color: #ca0607; margin-bottom: 13px; } .container-confirm-gift-star .gift-star-question{ font-size: 16px; line-height: 24px; color: black; margin-bottom: 10px; } .container-confirm-gift-star .gift-star-message-input{ width: 100%; height: 83px; text-align: unset; border-radius: 4px; border: 1px solid #dadada; } .container-confirm-gift-star .gift-star-message-input::placeholder{ font-size: 14px; line-height: 19px; color: #d6d6d6; padding: 4px; } .container-confirm-gift-star .gift-star-btn-patent{ text-align: center; display: flex; position: absolute; top: 76%; left: 50%; transform: translateX(-50%); } .container-confirm-gift-star .gift-star-btn-patent .gift-star-btn{ width: 64px; height: 16px; padding: 7px; border-radius: 4px; color: white; cursor: pointer; } .container-confirm-gift-star .gift-star-btn-patent .gift-star-cancel-btn{ background: #bfbfbf; margin: 11px 3px 11px 11px; } .container-confirm-gift-star .gift-star-btn-patent .gift-star-done-btn{ background: #ea6153; margin: 11px 11px 11px 7px; } .V2-gif-star-btn{ color: #6d84b4; display: inline-block; padding: 3px 10px; cursor: pointer; font-size: 11px; vertical-align: middle; border: 1px solid #ddd; margin-left: 3px; border-radius: 50px; } /** For Content_raw */ .V2-comments.old-style .V2-comment-body .comment-raw { margin-bottom: 10px; max-width: calc(100% - 60px); } .V2-comments.old-style .V2-comment-body .comment-raw.raw-box { } .V2-comments.old-style .V2-comment-body .comment-raw.raw-box .comment-box-highlight { border: 1px solid #bee0ef; background-color: #f0f6f9; padding: 10px; margin-top: 0; border-radius: 5px; margin-bottom: 4px; } .V2-comments.old-style .V2-comment-body .comment-raw.raw-gif { } .V2-comments.old-style .V2-comment-body .comment-raw.raw-image { } .V2-comments.old-style .V2-comment-body .comment-raw.raw-link { } .V2-comments.old-style .V2-comment-body .comment-raw.raw-paragraph { } .V2-comments.old-style .V2-comment-body .comment-raw.raw-quote2 { } .V2-comments.old-style .V2-comment-body .comment-raw.raw-quote2 .comment-quote { font-size: 90%; color: #666; margin: 5px 0 10px 50px; position: relative; padding-right: 40px; } .V2-comments.old-style .V2-comment-body .comment-raw.raw-quote2 .comment-quote:before { content: ""; font: normal normal normal 18px/1 FontAwesome; display: inline-block; position: absolute; top: 0; left: -30px; } .V2-comments.old-style .V2-comment-body .comment-raw.raw-quote2 .comment-quote:after { content: ""; font: normal normal normal 18px/1 FontAwesome; display: inline-block; margin-left: 15px; position: relative; top: 3px; } .V2-comments.old-style .V2-comment-body .comment-raw.raw-sticker { } .V2-comments.old-style .V2-comment-body .comment-raw.raw-tagList { } .V2-comments.old-style .V2-comment-body .comment-raw.raw-text { } .comment-info-group .link-gift a.link-open-gift { color: #8b9dc3 !important; } .comment-info-group .link-gift a.link-open-gift:hover { color: #d55f6f !important; } /** confirm like comment **/ .V2-comment-vote-confirm-bg-overlay { position: absolute; top: 0; z-index: 1000; background: rgba(0, 0, 0, 0.6); width: 100%; height: 100%; display: block; } .V2-comment-vote { position: relative; } .V2-comment-vote-confirm { width: 380px; max-width: 380px; position: fixed; top: calc(50% - 100px); left: calc(50% - 190px); background: #F0F0F0; box-shadow: inset 0px 1px 0px #CDCDCD; z-index: 1001; } .V2-comment-vote-confirm .container { background: linear-gradient(180deg, #F6F5FD 0%, rgba(246, 245, 253, 0) 62.8%); border-radius: 16px; } .V2-comment-vote-confirm .container .header { position: relative; background: linear-gradient(180deg, #EEEEF0 0%, #EFEFEF 100%); box-shadow: inset 0px -1px 0px #CDCDCD; padding: 10px 10px 10px 20px; } .V2-comment-vote-confirm .container .header .counter-remaining { position: absolute; top: 10px; right: 8px; font-size: 11px; line-height: 20px; color: #848B92; } .V2-comment-vote-confirm .container .header .btn-vote-token-close { position: absolute; top: 11px; right: 10px; padding: 0; border: none; cursor: pointer; } .V2-comment-vote-confirm .container .vote-confirm-content { font-size: 13px; color: #263238; font-weight: 400; font-family: "arial", tahoma, helvetica, clean, sans-serif; padding: 20px; } .V2-comment-vote-confirm .container .vote-confirm-content p { line-height: 150%; } .V2-comment-vote-confirm .counter-remaining { background: #FFFFFF; border: 1px solid #CACACA; box-sizing: border-box; width: 100px; padding: 4px 10px; margin-top: 10px; } .V2-comment-vote-confirm .footer { padding: 10px 10px 10px 0px; background: #F0F0F0; box-shadow: inset 0px 1px 0px #CDCDCD; } .V2-comment-vote-confirm .footer .btn-vote-token-close, .V2-comment-vote-confirm .footer .btn-vote-token { float: right; background: #E8E7ED; border: 1px solid #9C9BA0; box-sizing: border-box; border-radius: 4px; padding: 6px 10px; cursor: pointer; } .V2-comment-vote-confirm .footer .btn-vote-token { margin-left: 10px; background: #1591CA; color: #fff; font-weight: bold; }