@charset "UTF-8"; /* | Snicker The first native FlatFile Comment Plugin 4 Bludit | @file ./system/themes/default/snicker.css | @author SamBrishes | @version 0.1.2 [0.1.0] - Alpha | | @website https://github.com/pytesNET/snicker | @license X11 / MIT License | @copyright Copyright © 2019 SamBrishes, pytesNET */ /* @start ANIMATIONs */ @keyframes spin{ 0% { transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); } 0% { transform: rotate(-359deg); -o-transform: rotate(-359deg); -ms-transform: rotate(-359deg); -moz-transform: rotate(-359deg); -webkit-transform: rotate(-359deg); } } @-moz-keyframes spin{ 0% { transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); } 0% { transform: rotate(-359deg); -o-transform: rotate(-359deg); -ms-transform: rotate(-359deg); -moz-transform: rotate(-359deg); -webkit-transform: rotate(-359deg); } } @-webkit-keyframes spin{ 0% { transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); } 0% { transform: rotate(-359deg); -o-transform: rotate(-359deg); -ms-transform: rotate(-359deg); -moz-transform: rotate(-359deg); -webkit-transform: rotate(-359deg); } } /* @end ANIMATIONs */ /* @start GENERAL */ .snicker-comments, .snicker-comments *, .snicker-comments *::before, .snicker-comments *::after{ box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .snicker-comments{ width: 100%; margin: 15px 0 30px 0; padding: 0; display: block; font-size: 14px; line-height: 1.5em; } .snicker-comments input, .snicker-comments textarea, .snicker-comments button{ font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; } .snicker-comments input[type="text"], .snicker-comments input[type="email"], .snicker-comments textarea{ color: #404448; width: 100%; max-width: none; height: auto; margin: 0; padding: 7px 14px; z-index: 10; display: block; font-size: 14px; text-align: left; line-height: 1.5em; border-width: 1px; border-style: solid; border-color: #a0a4a8; background-color: #ffffff; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } .snicker-comments textarea{ height: 150px; min-height: 150px; padding: 15px; resize: vertical; } .snicker-comments input[type="text"]:hover, .snicker-comments input[type="email"]:hover, .snicker-comments textarea:hover{ color: #343A40; border-color: #343A40; background-color: #ffffff; } .snicker-comments input[type="text"]:focus, .snicker-comments input[type="email"]:focus, .snicker-comments textarea:focus{ color: #343A40; border-color: #343A40; background-color: #ffffff; box-shadow: 0 0 0 3px rgba(52,58,64, 0.35); -moz-box-shadow: 0 0 0 3px rgba(52,58,64, 0.35); -webkit-box-shadow: 0 0 0 3px rgba(52,58,64, 0.35); } .snicker-comments input[type="checkbox"]{ display: none; } .snicker-comments input[type="checkbox"]+label{ color: #606468; cursor: pointer; height: auto; margin: 10px 5px; padding: 0; display: inline-block; font-size: 12px; line-height: 22px; vertical-align: top; } .snicker-comments input[type="checkbox"]+label:hover, .snicker-comments input[type="checkbox"]:checked+label{ color: #404448; } .snicker-comments input[type="checkbox"]+label:before{ width: 20px; height: 20px; content: ""; margin: 0 9px 0 0; display: inline-block; position: relative; vertical-align: top; background-color: #ffffff; border: 1px solid #a0a4a8; background-repeat: no-repeat; background-position: center center; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; transition: all 142ms linear; -moz-transition: all 142ms linear; -webkit-transition: all 142ms linear; } .snicker-comments input[type="checkbox"]+label:hover:before{ border-color: #343A40; } .snicker-comments input[type="checkbox"]:checked+label:before{ background-color: #343A40; border-color: #343A40; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC\ 9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDEyIDE2Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJNM\ TIgNWwtOCA4LTQtNCAxLjUtMS41TDQgMTBsNi41LTYuNUwxMiA1eiIvPjwvc3ZnPg=="); } .snicker-comments button{ color: rgba(255, 255, 255, 0.9); cursor: pointer; width: auto; margin: 0; padding: 10px 15px; display: inline-block; position: relative; font-size: 14px; text-align: left; line-height: 1.5em; vertical-align: top; background-color: #343A40; border: 1px solid #343A40; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; transition: background 142ms linear; -moz-transition: background 142ms linear; -webkit-transition: background 142ms linear; } .snicker-comments button:hover{ background-color: rgb(14, 16, 19); } .snicker-comments button:active{ background-color: #242A30; } .snicker-comments button:disabled, .snicker-comments button.disabled{ color: rgba(255, 255, 255, 0.35); cursor: not-allowed; background-color: #040A10; } .snicker-comments button.loading:before{ top: 8px; left: -36px; width: 28px; height: 28px; margin: 0 auto; padding: 0; content: ""; display: inline-block; position: absolute; background-size: 18px; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC\ 9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDEyIDE2Ij48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZ\ GQiIGQ9Ik0xMC4yNCA3LjRhNC4xNSA0LjE1IDAgMCAxLTEuMiAzLjYgNC4zNDYgNC4zNDYgMCAwIDEtNS40MS41NEw0Ljgg\ MTAuNC41IDkuOGwuNiA0LjIgMS4zMS0xLjI2YzIuMzYgMS43NCA1LjcgMS41NyA3Ljg0LS41NGE1Ljg3NiA1Ljg3NiAwIDA\ gMCAxLjc0LTQuNDZsLTEuNzUtLjM0ek0yLjk2IDVhNC4zNDYgNC4zNDYgMCAwIDEgNS40MS0uNTRMNy4yIDUuNmw0LjMuNi\ 0uNi00LjItMS4zMSAxLjI2Yy0yLjM2LTEuNzQtNS43LTEuNTctNy44NS41NEMuNSA1LjAzLS4wNiA2LjY1LjAxIDguMjZsM\ S43NS4zNUE0LjE3IDQuMTcgMCAwIDEgMi45NiA1eiIvPjwvc3ZnPg=="); background-repeat: no-repeat; background-position: center center; animation: spin 2s linear 0ms infinite; -moz-animation: spin 2s linear 0ms infinite; -webkit-animation: spin 2s linear 0ms infinite; } .snicker-comments .table{ width: 100%; margin: 0; padding: 0; display: table; border-spacing: 0; border-collapse: collapse; } .snicker-comments .table .table-cell{ display: table-cell; padding: 5px 10px; vertical-align: top; } .snicker-comments .align-left{ text-align: left; } .snicker-comments .align-right{ text-align: right; } .snicker-comments .align-center{ text-align: center; } /* Main Elements */ .snicker-comments .snicker-comments-form, .snicker-comments .snicker-comments-list{ width: auto; margin: 0; padding: 0; display: block; border: 1px solid#c0c4c8; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .snicker-comments .snicker-comments-list{ border-width: 0; } .snicker-comments .no-comments, .snicker-comments .disabled-comments{ width: 100%; margin: 15px 0; padding: 15px 0; display: block; font-size: 16px; text-align: center; font-style: italic; line-height: 50px; } .snicker-comments .no-comments{ background-color: #f4f8fa; border: 1px solid #c0c4c8; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .snicker-comments .comment-alert{ width: 100%; margin: 0 0 15px 0; padding: 10px 15px; display: block; font-size: 85%; font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #f4f8fa; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } .snicker-comments .comment-alert.alert-error{ color: #ffffff; background-color: #DC3545; } .snicker-comments .comment-alert.alert-success{ color: #ffffff; background-color: #28A745; } /* @end GENERAL */ /* @start COMMENT FORM */ form.comment-form{ width: 100%; margin: 0; padding: 0; display: block; } form.comment-form .comment-header, form.comment-form .comment-article, form.comment-form .comment-footer{ width: 100%; height: auto; margin: 0; padding: 10px; display: block; } form.comment-form .comment-header{ font-size: 16px; background-color: #f4f6f8; border-bottom: 1px solid #d0d4d8; border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; } form.comment-form .comment-header .inner{ padding: 7px 10px; } form.comment-form .comment-article{ padding: 15px 20px; } form.comment-form .comment-footer{ background-color: #f4f6f8; border-top: 1px solid #d0d4d8; border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; } form.comment-form .comment-captcha{ display: block; text-align: right; } form.comment-form .comment-captcha input, form.comment-form .comment-captcha input:hover, form.comment-form .comment-captcha input:focus{ width: 100px; height: 40px; padding: 5px 10px; display: inline-block; font-size: 16px; text-align: center; line-height: 22px; vertical-align: top; border: 0; background-color: #e0e4e8; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; } form.comment-form .comment-captcha input:hover{ background-color: #f0f4f8; } form.comment-form .comment-captcha input:focus{ background-color: #e0e4e8; } form.comment-form .comment-captcha a{ width: auto; height: 40px; display: inline-block; position: relative; } form.comment-form .comment-captcha a:before{ top: 0; left: 0; right: 0; bottom: 0; content: ""; z-index: 20; display: inline-block; position: absolute; background-color: rgba(0, 0, 0, 0.0); border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; transition: background 142ms linear; -moz-transition: background 142ms linear; -webkit-transition: background 142ms linear; } form.comment-form .comment-captcha a.reload:before{ background-color: rgba(0, 0, 0, 0.5); } form.comment-form .comment-captcha a:after{ top: 50%; left: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; padding: 2px; content: ""; z-index: 25; opacity: 0; display: inline-block; position: absolute; background-size: 20px; background-color: #000; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC\ 9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDEyIDE2Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJNM\ TAuMjQgNy40YTQuMTUgNC4xNSAwIDAgMS0xLjIgMy42IDQuMzQ2IDQuMzQ2IDAgMCAxLTUuNDEuNTRMNC44IDEwLjQuNSA5\ LjhsLjYgNC4yIDEuMzEtMS4yNmMyLjM2IDEuNzQgNS43IDEuNTcgNy44NC0uNTRhNS44NzYgNS44NzYgMCAwIDAgMS43NC0\ 0LjQ2bC0xLjc1LS4zNHpNMi45NiA1YTQuMzQ2IDQuMzQ2IDAgMCAxIDUuNDEtLjU0TDcuMiA1LjZsNC4zLjYtLjYtNC4yLT\ EuMzEgMS4yNmMtMi4zNi0xLjc0LTUuNy0xLjU3LTcuODUuNTRDLjUgNS4wMy0uMDYgNi42NS4wMSA4LjI2bDEuNzUuMzVBN\ C4xNyA0LjE3IDAgMCAxIDIuOTYgNXoiLz48L3N2Zz4="); background-repeat: no-repeat; background-position: center; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; transition: opacity 142ms linear; -moz-transition: opacity 142ms linear; -webkit-transition: opacity 142ms linear; } form.comment-form .comment-captcha a.reload:after{ opacity: 1; animation: spin 2s linear 0ms infinite; -moz-animation: spin 2s linear 0ms infinite; -webkit-animation: spin 2s linear 0ms infinite; } form.comment-form .comment-captcha img{ max-width: none; display: inline-block; vertical-align: top; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } form.comment-form .comment-reply{ margin: 20px 0 0 0; padding: 10px 15px; display: block; position: relative; font-size: 80%; background-color: #f4f8fa; border-width: 1px 1px 0 1px; border-style: solid; border-color: #c0c4c8; border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; -webkit-border-radius: 3px 3px 0 0; } form.comment-form .comment-reply + p textarea{ border-top-left-radius: 0; border-top-right-radius: 0; -moz-border-raidus-topleft: 0; -moz-border-raidus-topright: 0; -webkit-border-top-left-radius: 0; -webkit-border-top-right-radius: 0; } form.comment-form .comment-reply .reply-cancel{ top: 10px; right: 10px; width: 22px; height: 22px; margin: 0; padding: 0; opacity: 0.5; display: inline-block; position: absolute; background-size: 14px; background-color: #555; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC\ 9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDEyIDE2Ij48cGF0aCBmaWxsPSIjZmZmZmZmIiBkP\ SJNNy40OCA4bDMuNzUgMy43NS0xLjQ4IDEuNDhMNiA5LjQ4bC0zLjc1IDMuNzUtMS40OC0xLjQ4TDQuNTIgOCAuNzcgNC4y\ NWwxLjQ4LTEuNDhMNiA2LjUybDMuNzUtMy43NSAxLjQ4IDEuNDhMNy40OCA4eiIvPjwvc3ZnPg=="); background-repeat: no-repeat; background-position: center center; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; transition: all 142ms linear; -moz-transition: all 142ms linear; -webkit-transition: all 142ms linear; } form.comment-form .comment-reply .reply-cancel:hover{ opacity: 1; background-color: #DC3545; } form.comment-form .comment-reply .reply-title{ margin: 0 0 5px 0; display: block; font-weight: bold; font-weight: 600; } /* @end COMMENT FORM */ /* @start COMMENT LIST */ .snicker-comments-list .comment{ width: auto; margin: 15px 0; padding: 0; display: block; border: 1px solid #c0c4c8; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .snicker-comments-list .comment.new-comment{ border-color: #007bff; } .snicker-comments-list .comment .comment-avatar{ width: 110px; padding: 15px 10px; position: relative; } .snicker-comments-list .comment .comment-avatar img{ border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .snicker-comments-list .comment .comment-avatar .avatar-role{ top: 15px; right: 10px; color: #ffffff; width: auto; margin: 0; padding: 3px 5px; display: inline-block; position: absolute; font-size: 11px; font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 16px; font-weight: bold; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25); background-color: #007bff; border-radius: 0 4px 0 3px; -moz-border-radius: 0 4px 0 3px; -webkit-border-radius: 0 4px 0 3px; } .snicker-comments-list .comment .comment-content{ padding: 10px; } .snicker-comments-list .comment .comment-content .comment-title{ color: #707478; margin: 0; padding: 5px 5px 2px 5px; display: block; font-size: 16px; line-height: 24px; font-weight: bold; font-weight: 600; } .snicker-comments-list .comment .comment-content .comment-moderation{ color: #fff; margin-left: 10px; padding: 2px 6px; display: inline-block; font-size: 12px; line-height: 16px; font-weight: normal; font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; vertical-align: top; background-color: #dc3545; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } .snicker-comments-list .comment .comment-content .comment-meta{ color: #707478; margin: 0; padding: 1px 6px; display: inline-block; font-size: 12px; line-height: 1.25em; background-color: #e0e4e8; } .snicker-comments-list .comment .comment-content .comment-comment{ color: #303438; margin: 0; padding: 10px; display: block; } .snicker-comments-list .comment .comment-action{ margin: 0; padding: 0; display: block; background-color: #f4f6f8; border-top: 1px solid #d0d4d8; border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; -webkit-border-radius: 0 0 4px 4px; } .snicker-comments-list .comment .comment-action a{ color: #606468; margin: 2px 0; padding: 2px 7px; opacity: 0.65; display: inline-block; font-size: 12px; font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 18px; background-color: #ffffff; border: 1px solid #c0c4c8; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; transition: color 142ms linear, background 142ms linear, border 142ms linear; -moz-transition: color 142ms linear, background 142ms linear, border 142ms linear; -webkit-transition: color 142ms linear, background 142ms linear, border 142ms linear; } .snicker-comments-list .comment .comment-action a.action-like{ color: #28a745; border-color: #28a745; } .snicker-comments-list .comment .comment-action a.action-dislike{ color: #dc3545; border-color: #dc3545; } .snicker-comments-list .comment .comment-action a.action-reply{ color: #007bff; border-color: #007bff; } .snicker-comments-list .comment .comment-action a:hover, .snicker-comments-list .comment .comment-action a.active{ color: #ffffff; opacity: 0.9; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25); } .snicker-comments-list .comment .comment-action a.action-like:hover, .snicker-comments-list .comment .comment-action a.action-like.active{ background-color: #28a745; } .snicker-comments-list .comment .comment-action a.action-dislike:hover, .snicker-comments-list .comment .comment-action a.action-dislike.active{ background-color: #dc3545; } .snicker-comments-list .comment .comment-action a.action-reply:hover, .snicker-comments-list .comment .comment-action a.action-reply.active{ background-color: #007bff; } .snicker-comments-list .comment .comment-action a span{ margin: 0 3px 0 2px; display: inline-block; } /* Pagination */ .snicker-comments-list .pagination{ width: 100%; margin: 10px 0; padding: 0; display: block; } .snicker-comments-list .pagination .pagination-button{ color: #ffffff; width: auto; min-width: 30px; height: 32px; margin: 0 3px; padding: 5px 10px; display: inline-block; position: static; font-size: 14px; text-align: center; line-height: 22px; vertical-align: top; background-color: #007bff; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; transition: background 142ms linear; -moz-transition: background 142ms linear; -webkit-transition: background 142ms linear; } .snicker-comments-list .pagination .pagination-button:hover, .snicker-comments-list .pagination .pagination-button.hover{ background-color: #0062cc; } .snicker-comments-list .pagination .pagination-button:active, .snicker-comments-list .pagination .pagination-button.active{ background-color: #004999; } .snicker-comments-list .pagination .pagination-button:disabled, .snicker-comments-list .pagination .pagination-button.disabled{ color: rgba(255, 255, 255, 0.5); cursor: not-allowed; opacity: 0.5; background-color: #555; } .snicker-comments-list .pagination.pagination-top .pagination-button.button-next{ float: right; } .snicker-comments-list .pagination.pagination-bottom{ text-align: center; } .snicker-comments-list .pagination.pagination-bottom:after{ clear: both; content: ""; display: table; } .snicker-comments-list .pagination.pagination-bottom .pagination-inner{ margin: 0 auto; display: inline-block; } .snicker-comments-list .pagination.pagination-bottom .pagination-button{ float: left; margin: 0; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; } .snicker-comments-list .pagination.pagination-bottom .pagination-button.button-first, .snicker-comments-list .pagination.pagination-bottom .pagination-button.button-previous, .snicker-comments-list .pagination.pagination-bottom .pagination-button.button-next, .snicker-comments-list .pagination.pagination-bottom .pagination-button.button-last{ font-size: 20px; line-height: 18px; } .snicker-comments-list .pagination.pagination-bottom .pagination-button:first-child{ border-top-left-radius: 3px; border-bottom-left-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-top-left-radius: 3px; -webkit-border-bottom-left-radius: 3px; } .snicker-comments-list .pagination.pagination-bottom .pagination-button:last-child{ border-top-right-radius: 3px; border-bottom-right-radius: 3px; -moz-border-radius-right: 3px; -moz-border-radius-right: 3px; -webkit-border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 3px; } /* @end COMMENT LIST */