Added a commento css override

2 files changed, 1116 insertions, 1 deletions

diff --git a/static/commento-new.css b/static/commento-new.css
new file mode 100644
index 0000000..b2b50cd
--- /dev/null
+++ b/static/commento-new.css
@@ -0,0 +1,1111 @@
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-display:swap;font-weight: 300;
+    src: local("Source Sans Pro Light"),local("SourceSansPro-Light"),url(https://commento.rogs.me/fonts/source-sans-300-cyrillic-ext.woff2) format("woff2");
+    unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F
+}
+
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-display:swap;font-weight: 300;
+    src: local("Source Sans Pro Light"),local("SourceSansPro-Light"),url(https://commento.rogs.me/fonts/source-sans-300-cyrillic.woff2) format("woff2");
+    unicode-range: U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116
+}
+
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-display:swap;font-weight: 300;
+    src: local("Source Sans Pro Light"),local("SourceSansPro-Light"),url(https://commento.rogs.me/fonts/source-sans-300-greek-ext.woff2) format("woff2");
+    unicode-range: U+1F00-1FFF
+}
+
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-display:swap;font-weight: 300;
+    src: local("Source Sans Pro Light"),local("SourceSansPro-Light"),url(https://commento.rogs.me/fonts/source-sans-300-greek.woff2) format("woff2");
+    unicode-range: U+0370-03FF
+}
+
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-display:swap;font-weight: 300;
+    src: local("Source Sans Pro Light"),local("SourceSansPro-Light"),url(https://commento.rogs.me/fonts/source-sans-300-vietnamese.woff2) format("woff2");
+    unicode-range: U+0102-0103,U+0110-0111,U+1EA0-1EF9,U+20AB
+}
+
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-display:swap;font-weight: 300;
+    src: local("Source Sans Pro Light"),local("SourceSansPro-Light"),url(https://commento.rogs.me/fonts/source-sans-300-latin-ext.woff2) format("woff2");
+    unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF
+}
+
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-display:swap;font-weight: 300;
+    src: local("Source Sans Pro Light"),local("SourceSansPro-Light"),url(https://commento.rogs.me/fonts/source-sans-300-latin.woff2) format("woff2");
+    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
+}
+
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-display:swap;font-weight: 400;
+    src: local("Source Sans Pro Regular"),local("SourceSansPro-Regular"),url(https://commento.rogs.me/fonts/source-sans-400-cyrillic-ext.woff2) format("woff2");
+    unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F
+}
+
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-display:swap;font-weight: 400;
+    src: local("Source Sans Pro Regular"),local("SourceSansPro-Regular"),url(https://commento.rogs.me/fonts/source-sans-400-cyrillic.woff2) format("woff2");
+    unicode-range: U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116
+}
+
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-display:swap;font-weight: 400;
+    src: local("Source Sans Pro Regular"),local("SourceSansPro-Regular"),url(https://commento.rogs.me/fonts/source-sans-400-greek-ext.woff2) format("woff2");
+    unicode-range: U+1F00-1FFF
+}
+
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-display:swap;font-weight: 400;
+    src: local("Source Sans Pro Regular"),local("SourceSansPro-Regular"),url(https://commento.rogs.me/fonts/source-sans-400-greek.woff2) format("woff2");
+    unicode-range: U+0370-03FF
+}
+
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-display:swap;font-weight: 400;
+    src: local("Source Sans Pro Regular"),local("SourceSansPro-Regular"),url(https://commento.rogs.me/fonts/source-sans-400-vietnamese.woff2) format("woff2");
+    unicode-range: U+0102-0103,U+0110-0111,U+1EA0-1EF9,U+20AB
+}
+
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-display:swap;font-weight: 400;
+    src: local("Source Sans Pro Regular"),local("SourceSansPro-Regular"),url(https://commento.rogs.me/fonts/source-sans-400-latin-ext.woff2) format("woff2");
+    unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF
+}
+
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-display:swap;font-weight: 400;
+    src: local("Source Sans Pro Regular"),local("SourceSansPro-Regular"),url(https://commento.rogs.me/fonts/source-sans-400-latin.woff2) format("woff2");
+    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
+}
+
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-display:swap;font-weight: 700;
+    src: local("Source Sans Pro Bold"),local("SourceSansPro-Bold"),url(https://commento.rogs.me/fonts/source-sans-700-cyrillic-ext.woff2) format("woff2");
+    unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F
+}
+
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-display:swap;font-weight: 700;
+    src: local("Source Sans Pro Bold"),local("SourceSansPro-Bold"),url(https://commento.rogs.me/fonts/source-sans-700-cyrillic.woff2) format("woff2");
+    unicode-range: U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116
+}
+
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-display:swap;font-weight: 700;
+    src: local("Source Sans Pro Bold"),local("SourceSansPro-Bold"),url(https://commento.rogs.me/fonts/source-sans-700-greek-ext.woff2) format("woff2");
+    unicode-range: U+1F00-1FFF
+}
+
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-display:swap;font-weight: 700;
+    src: local("Source Sans Pro Bold"),local("SourceSansPro-Bold"),url(https://commento.rogs.me/fonts/source-sans-700-greek.woff2) format("woff2");
+    unicode-range: U+0370-03FF
+}
+
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-display:swap;font-weight: 700;
+    src: local("Source Sans Pro Bold"),local("SourceSansPro-Bold"),url(https://commento.rogs.me/fonts/source-sans-700-vietnamese.woff2) format("woff2");
+    unicode-range: U+0102-0103,U+0110-0111,U+1EA0-1EF9,U+20AB
+}
+
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-display:swap;font-weight: 700;
+    src: local("Source Sans Pro Bold"),local("SourceSansPro-Bold"),url(https://commento.rogs.me/fonts/source-sans-700-latin-ext.woff2) format("woff2");
+    unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF
+}
+
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-display:swap;font-weight: 700;
+    src: local("Source Sans Pro Bold"),local("SourceSansPro-Bold"),url(https://commento.rogs.me/fonts/source-sans-700-latin.woff2) format("woff2");
+    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
+}
+
+.commento-root-min-height {
+    min-height: 430px
+}
+
+.commento-root {
+    overflow-x: hidden;
+    padding: 0;
+    width: 100%;
+    font-family: inherit
+}
+
+.commento-root * {
+    font-family: inherit;
+    font-size: 15px;
+    color: white;
+    line-height: 1.5;
+    text-rendering: optimizeLegibility
+}
+
+.commento-root code {
+    font-family: monospace;
+    font-size: 13px;
+    white-space: pre
+}
+
+.commento-root a {
+    color: #228be6;
+    outline: 0;
+    text-decoration: none
+}
+
+.commento-root blockquote {
+    margin: 0 0 0 8px;
+    padding: 0 0 0 5px;
+    border-left: 2px solid #adb5bd;
+    color: #868e96
+}
+
+.commento-root .commento-button {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    cursor: pointer;
+    font-weight: 700;
+    line-height: 24px;
+    font-size: 14px;
+    padding: 6px 8px;
+    box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08);
+    border: 1px solid transparent;
+    border-radius: 3px;
+    color: #fff;
+    margin-left: 5px;
+    margin-right: 5px
+}
+
+.commento-root .commento-login {
+    width: 100%
+}
+
+.commento-root .commento-login .commento-login-text {
+    text-align: right;
+    margin-right: 16px;
+    height: 38px;
+    color: #868e96;
+    font-weight: 700;
+    cursor: pointer;
+    display: block
+}
+
+.commento-root .commento-logged-container {
+    width: 100%;
+    text-align: left;
+    margin-bottom: 16px;
+    position: relative;
+    height: 38px
+}
+
+.commento-root .commento-logged-container .commento-profile-button {
+    float: right;
+    cursor: pointer;
+    color: #868e96;
+    margin: 6px 12px;
+    font-size: 13px
+}
+
+.commento-root .commento-logged-container .commento-logged-in-as {
+    position: relative
+}
+
+.commento-root .commento-logged-container .commento-logged-in-as .commento-name {
+    color: #343a40;
+    border: none;
+    font-weight: 700;
+    position: absolute;
+    top: 6px;
+    left: 48px;
+    cursor: pointer
+}
+
+.commento-root .commento-mod-tools {
+    margin-bottom: 16px
+}
+
+.commento-root .commento-mod-tools button {
+    text-transform: uppercase;
+    color: #495057;
+    font-size: 12px;
+    font-weight: 700;
+    cursor: pointer;
+    margin-left: 12px;
+    background: 0 0;
+    border: none;
+    display: inline
+}
+
+.commento-root .commento-mod-tools::before {
+    content: "Moderator Tools";
+    text-transform: uppercase;
+    color: #3b5bdb;
+    font-size: 12px;
+    font-weight: 700
+}
+
+.commento-root .commento-round-check input[type=checkbox],.commento-root .commento-round-check input[type=radio] {
+    display: none
+}
+
+.commento-root .commento-round-check input[type=checkbox]+label,.commento-root .commento-round-check input[type=radio]+label {
+    display: block;
+    position: relative;
+    padding-left: 35px;
+    margin-bottom: 5px;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none
+}
+
+.commento-root .commento-round-check input[type=checkbox]+label:last-child,.commento-root .commento-round-check input[type=radio]+label:last-child {
+    margin-bottom: 0
+}
+
+.commento-root .commento-round-check input[type=checkbox]+label:before,.commento-root .commento-round-check input[type=radio]+label:before {
+    content: '';
+    display: block;
+    width: 13px;
+    height: 13px;
+    margin-top: 2px;
+    background: #f8f9fa;
+    border: 1px solid #dee2e6;
+    border-radius: 3px;
+    position: absolute;
+    left: 0;
+    top: 0;
+    transition: all .15s
+}
+
+.commento-root .commento-round-check input[type=checkbox]:disabled+label:before,.commento-root .commento-round-check input[type=radio]:disabled+label:before {
+    background: #f8f9fa;
+    border: 1px solid #ced4da;
+    opacity: .4
+}
+
+.commento-root .commento-round-check input[type=checkbox]:checked+label:before,.commento-root .commento-round-check input[type=radio]:checked+label:before {
+    background: #228be6;
+    border: 1px solid #228be6
+}
+
+.commento-root .commento-round-check input[type=checkbox]+label:after,.commento-root .commento-round-check input[type=radio]+label:after {
+    position: absolute;
+    left: -7px;
+    top: 4px;
+    content: '';
+    display: inline-block;
+    width: 3px;
+    height: 7px;
+    transform: rotate(45deg);
+    margin-left: 12px;
+    margin-right: 12px;
+    border: solid transparent;
+    border-width: 0 2px 2px 0
+}
+
+.commento-root .commento-round-check input[type=checkbox]:disabled+label:after,.commento-root .commento-round-check input[type=radio]:disabled+label:after {
+    border: solid transparent;
+    border-width: 0 2px 2px 0
+}
+
+.commento-root .commento-round-check input[type=checkbox]:checked+label:after,.commento-root .commento-round-check input[type=radio]:checked+label:after {
+    border: solid #f8f9fa;
+    border-width: 0 2px 2px 0
+}
+
+.commento-root .commento-round-check .pitch {
+    font-size: 14px;
+    color: #a5a5a5;
+    line-height: 20px!important
+}
+
+.commento-root input[type=text],.commento-root textarea {
+    background: #fff;
+    border: 1px solid rgba(50,50,93,.1);
+    border-radius: 3px;
+    color: #525f7f
+}
+
+.commento-root input[type=text]::placeholder {
+    color: #cacaca
+}
+
+.commento-root textarea::placeholder {
+    color: #868e96;
+    font-size: 20px;
+    display: flex;
+    line-height: 110px;
+    justify-content: center;
+    align-items: center;
+    text-align: center
+}
+
+.commento-root textarea {
+    display: inline-block;
+    white-space: pre-wrap;
+    padding: 8px;
+    outline: 0;
+    overflow: auto;
+    min-height: 130px;
+    width: 100%
+}
+
+.commento-root .commento-red-border {
+    border: 1px solid #f03e3e
+}
+
+.commento-root .commento-textarea-container {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center
+}
+
+.commento-root .commento-textarea-container .commento-submit-button {
+    transform: none
+}
+
+.commento-root .commento-blurred-textarea {
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    justify-content: space-between;
+    will-change: transform
+}
+
+.commento-root .commento-submit-button {
+    float: right;
+    background: #57cc8a;
+    text-transform: uppercase;
+    font-size: 12px;
+    margin-top: 10px
+}
+
+.commento-root .commento-button-margin {
+    padding-top: 4px
+}
+
+.commento-root .commento-anonymous-checkbox-container {
+    float: right;
+    margin: 20px 16px
+}
+
+.commento-root .commento-anonymous-checkbox-container input[type=checkbox]+label {
+    padding-left: 24px;
+    font-size: 12px;
+    text-transform: uppercase;
+    font-weight: 700;
+    color: #fff
+}
+
+.commento-root .commento-anonymous-checkbox-container input[type=checkbox]+label:before {
+    margin-top: 1px
+}
+
+.commento-root .commento-anonymous-checkbox-container input[type=checkbox]+label:after {
+    margin-top: -1px
+}
+
+.commento-root .commento-markdown-button {
+    color: #868e96;
+    margin: 0 16px;
+    font-size: 12px;
+    text-transform: uppercase;
+    border: none;
+    line-height: 58px;
+    font-weight: 400;
+    cursor: pointer
+}
+
+.commento-root .commento-markdown-button b {
+    font-size: 12px
+}
+
+.commento-root .commento-markdown-help {
+    border: 1px solid #dee2e6;
+    padding: 8px
+}
+
+.commento-root .commento-markdown-help tr td {
+    padding: 0 6px
+}
+
+.commento-root .commento-markdown-help tr td pre {
+    display: inline;
+    font-family: monospace;
+    font-size: 13px
+}
+
+.commento-root .commento-card {
+    padding: 12px 0 0 12px;
+    margin-top: 16px;
+    border-top: 1px solid #f0f0f0
+}
+
+.commento-root .commento-card .commento-option-button {
+    border: none;
+    cursor: pointer;
+    outline: 0;
+    padding: 0;
+    position: absolute;
+    top: 0;
+    z-index: 3;
+    background: #ced4da
+}
+
+.commento-root .commento-card .commento-option-reply {
+    height: 20px;
+    width: 20px;
+    -webkit-mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg version="1.1" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns"><g transform="matrix(1.7358 0 0 1.7335 4.2642 15.217)"><path d="m10 2.5 1e-6 -4.4421-9 7.4421 9 6.5759-1e-6 -4.6759c6.4194-1.4839 11.739 2.1762 11.739 2.1762s-2.0774-6.5475-11.739-7.0762z" fill="%23abbac4"/></g></svg>');
+    mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg version="1.1" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns"><g transform="matrix(1.7358 0 0 1.7335 4.2642 15.217)"><path d="m10 2.5 1e-6 -4.4421-9 7.4421 9 6.5759-1e-6 -4.6759c6.4194-1.4839 11.739 2.1762 11.739 2.1762s-2.0774-6.5475-11.739-7.0762z" fill="%23abbac4"/></g></svg>');
+    margin: 9px 3px
+}
+
+.commento-root .commento-card .commento-option-cancel {
+    height: 13px;
+    width: 13px;
+    -webkit-mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg enable-background="new 0 0 129 129" version="1.1" viewBox="0 0 129 129" xmlns="http://www.w3.org/2000/svg"><path d="m7.6 121.4c0.8 0.8 1.8 1.2 2.9 1.2s2.1-0.4 2.9-1.2l51.1-51.1 51.1 51.1c0.8 0.8 1.8 1.2 2.9 1.2 1 0 2.1-0.4 2.9-1.2 1.6-1.6 1.6-4.2 0-5.8l-51.1-51.1 51.1-51.1c1.6-1.6 1.6-4.2 0-5.8s-4.2-1.6-5.8 0l-51.1 51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8 0s-1.6 4.2 0 5.8l51.1 51.1-51.1 51.1c-1.6 1.6-1.6 4.2 0 5.8z" fill="%23abbac4"/></svg>');
+    mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg enable-background="new 0 0 129 129" version="1.1" viewBox="0 0 129 129" xmlns="http://www.w3.org/2000/svg"><path d="m7.6 121.4c0.8 0.8 1.8 1.2 2.9 1.2s2.1-0.4 2.9-1.2l51.1-51.1 51.1 51.1c0.8 0.8 1.8 1.2 2.9 1.2 1 0 2.1-0.4 2.9-1.2 1.6-1.6 1.6-4.2 0-5.8l-51.1-51.1 51.1-51.1c1.6-1.6 1.6-4.2 0-5.8s-4.2-1.6-5.8 0l-51.1 51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8 0s-1.6 4.2 0 5.8l51.1 51.1-51.1 51.1c-1.6 1.6-1.6 4.2 0 5.8z" fill="%23abbac4"/></svg>');
+    margin: 12px 6px;
+    background: #adb5bd
+}
+
+.commento-root .commento-card .commento-option-collapse {
+    height: 14px;
+    width: 14px;
+    -webkit-mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg enable-background="new 0 0 42 42" version="1.1" viewBox="0 0 42 42" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><polygon points="42 20 0 20 0 22 20 22 22 22 42 22" fill="%231e2127"/></svg>');
+    mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg enable-background="new 0 0 42 42" version="1.1" viewBox="0 0 42 42" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><polygon points="42 20 0 20 0 22 20 22 22 22 42 22" fill="%231e2127"/></svg>');
+    margin: 12px 6px;
+    background: #495057
+}
+
+.commento-root .commento-card .commento-option-uncollapse {
+    height: 14px;
+    width: 14px;
+    -webkit-mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg enable-background="new 0 0 42 42" version="1.1" viewBox="0 0 42 42" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><polygon points="42 20 22 20 22 0 20 0 20 20 0 20 0 22 20 22 20 42 22 42 22 22 42 22" fill="%231e2127"/></svg>');
+    mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg enable-background="new 0 0 42 42" version="1.1" viewBox="0 0 42 42" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><polygon points="42 20 22 20 22 0 20 0 20 20 0 20 0 22 20 22 20 42 22 42 22 22 42 22" fill="%231e2127"/></svg>');
+    margin: 12px 6px;
+    background: #495057
+}
+
+.commento-root .commento-card .commento-option-downvote,.commento-root .commento-card .commento-option-upvote {
+    height: 14px;
+    width: 14px;
+    -webkit-mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg enable-background="new 0 0 284.929 284.929" version="1.1" viewBox="0 0 284.93 284.93" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">	<path d="m282.08 195.28-133.05-133.04c-1.901-1.903-4.088-2.856-6.562-2.856s-4.665 0.953-6.567 2.856l-133.04 133.04c-1.906 1.906-2.856 4.093-2.856 6.568 0 2.474 0.953 4.664 2.856 6.566l14.272 14.271c1.903 1.903 4.093 2.854 6.567 2.854s4.664-0.951 6.567-2.854l112.2-112.2 112.21 112.21c1.902 1.903 4.093 2.848 6.563 2.848 2.478 0 4.668-0.951 6.57-2.848l14.274-14.277c1.902-1.902 2.847-4.093 2.847-6.566 1e-3 -2.476-0.944-4.666-2.846-6.569z" fill="%23abbac4"/></svg>');
+    mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg enable-background="new 0 0 284.929 284.929" version="1.1" viewBox="0 0 284.93 284.93" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">	<path d="m282.08 195.28-133.05-133.04c-1.901-1.903-4.088-2.856-6.562-2.856s-4.665 0.953-6.567 2.856l-133.04 133.04c-1.906 1.906-2.856 4.093-2.856 6.568 0 2.474 0.953 4.664 2.856 6.566l14.272 14.271c1.903 1.903 4.093 2.854 6.567 2.854s4.664-0.951 6.567-2.854l112.2-112.2 112.21 112.21c1.902 1.903 4.093 2.848 6.563 2.848 2.478 0 4.668-0.951 6.57-2.848l14.274-14.277c1.902-1.902 2.847-4.093 2.847-6.566 1e-3 -2.476-0.944-4.666-2.846-6.569z" fill="%23abbac4"/></svg>');
+    margin: 12px 6px
+}
+
+.commento-root .commento-card .commento-option-downvote {
+    transform: rotate(180deg)
+}
+
+.commento-root .commento-card .commento-upvoted {
+    background: #f76707
+}
+
+.commento-root .commento-card .commento-downvoted {
+    background: #4c6ef5
+}
+
+.commento-root .commento-card .commento-option-edit {
+    height: 14px;
+    width: 14px;
+    -webkit-mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg enable-background="new 0 0 528.899 528.899" version="1.1" viewBox="0 0 528.899 528.899" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="m328.88 89.125l107.59 107.59-272.34 272.34-107.53-107.59 272.28-272.34zm189.23-25.948l-47.981-47.981c-18.543-18.543-48.653-18.543-67.259 0l-45.961 45.961 107.59 107.59 53.611-53.611c14.382-14.383 14.382-37.577 0-51.959zm-517.81 449.51c-1.958 8.812 5.998 16.708 14.811 14.565l119.89-29.069-107.53-107.59-27.173 122.09z"/></svg>');
+    mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg enable-background="new 0 0 528.899 528.899" version="1.1" viewBox="0 0 528.899 528.899" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="m328.88 89.125l107.59 107.59-272.34 272.34-107.53-107.59 272.28-272.34zm189.23-25.948l-47.981-47.981c-18.543-18.543-48.653-18.543-67.259 0l-45.961 45.961 107.59 107.59 53.611-53.611c14.382-14.383 14.382-37.577 0-51.959zm-517.81 449.51c-1.958 8.812 5.998 16.708 14.811 14.565l119.89-29.069-107.53-107.59-27.173 122.09z"/></svg>');
+    margin: 12px 6px;
+    background: #adb5bd
+}
+
+.commento-root .commento-card .commento-option-remove {
+    height: 14px;
+    width: 14px;
+    -webkit-mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg enable-background="new 0 0 59 59" version="1.1" viewBox="0 0 59 59" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><g fill="%231e2127"><path d="m29.5 51c0.552 0 1-0.447 1-1v-33c0-0.553-0.448-1-1-1s-1 0.447-1 1v33c0 0.553 0.448 1 1 1z"/><path d="m19.5 51c0.552 0 1-0.447 1-1v-33c0-0.553-0.448-1-1-1s-1 0.447-1 1v33c0 0.553 0.448 1 1 1z"/><path d="m39.5 51c0.552 0 1-0.447 1-1v-33c0-0.553-0.448-1-1-1s-1 0.447-1 1v33c0 0.553 0.448 1 1 1z"/><path d="M52.5,6H38.456c-0.11-1.25-0.495-3.358-1.813-4.711C35.809,0.434,34.751,0,33.499,0H23.5c-1.252,0-2.31,0.434-3.144,1.289 C19.038,2.642,18.653,4.75,18.543,6H6.5c-0.552,0-1,0.447-1,1s0.448,1,1,1h2.041l1.915,46.021C10.493,55.743,11.565,59,15.364,59 h28.272c3.799,0,4.871-3.257,4.907-4.958L50.459,8H52.5c0.552,0,1-0.447,1-1S53.052,6,52.5,6z M21.792,2.681 C22.24,2.223,22.799,2,23.5,2h9.999c0.701,0,1.26,0.223,1.708,0.681c0.805,0.823,1.128,2.271,1.24,3.319H20.553 C20.665,4.952,20.988,3.504,21.792,2.681z M46.544,53.979C46.538,54.288,46.4,57,43.636,57H15.364 c-2.734,0-2.898-2.717-2.909-3.042L10.542,8h37.915L46.544,53.979z"/></g></svg>');
+    mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg enable-background="new 0 0 59 59" version="1.1" viewBox="0 0 59 59" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><g fill="%231e2127"><path d="m29.5 51c0.552 0 1-0.447 1-1v-33c0-0.553-0.448-1-1-1s-1 0.447-1 1v33c0 0.553 0.448 1 1 1z"/><path d="m19.5 51c0.552 0 1-0.447 1-1v-33c0-0.553-0.448-1-1-1s-1 0.447-1 1v33c0 0.553 0.448 1 1 1z"/><path d="m39.5 51c0.552 0 1-0.447 1-1v-33c0-0.553-0.448-1-1-1s-1 0.447-1 1v33c0 0.553 0.448 1 1 1z"/><path d="M52.5,6H38.456c-0.11-1.25-0.495-3.358-1.813-4.711C35.809,0.434,34.751,0,33.499,0H23.5c-1.252,0-2.31,0.434-3.144,1.289 C19.038,2.642,18.653,4.75,18.543,6H6.5c-0.552,0-1,0.447-1,1s0.448,1,1,1h2.041l1.915,46.021C10.493,55.743,11.565,59,15.364,59 h28.272c3.799,0,4.871-3.257,4.907-4.958L50.459,8H52.5c0.552,0,1-0.447,1-1S53.052,6,52.5,6z M21.792,2.681 C22.24,2.223,22.799,2,23.5,2h9.999c0.701,0,1.26,0.223,1.708,0.681c0.805,0.823,1.128,2.271,1.24,3.319H20.553 C20.665,4.952,20.988,3.504,21.792,2.681z M46.544,53.979C46.538,54.288,46.4,57,43.636,57H15.364 c-2.734,0-2.898-2.717-2.909-3.042L10.542,8h37.915L46.544,53.979z"/></g></svg>');
+    margin: 12px 6px;
+    background: #e03131
+}
+
+.commento-root .commento-card .commento-option-approve {
+    height: 14px;
+    width: 14px;
+    -webkit-mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg enable-background="new 0 0 26 26" version="1.1" viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg"><path d="m0.3 14c-0.2-0.2-0.3-0.5-0.3-0.7s0.1-0.5 0.3-0.7l1.4-1.4c0.4-0.4 1-0.4 1.4 0l0.1 0.1 5.5 5.9c0.2 0.2 0.5 0.2 0.7 0l13.4-13.9h0.1v-8.8818e-16c0.4-0.4 1-0.4 1.4 0l1.4 1.4c0.4 0.4 0.4 1 0 1.4l-16 16.6c-0.2 0.2-0.4 0.3-0.7 0.3s-0.5-0.1-0.7-0.3l-7.8-8.4-0.2-0.3z" fill="%231e2127"/></svg>');
+    mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg enable-background="new 0 0 26 26" version="1.1" viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg"><path d="m0.3 14c-0.2-0.2-0.3-0.5-0.3-0.7s0.1-0.5 0.3-0.7l1.4-1.4c0.4-0.4 1-0.4 1.4 0l0.1 0.1 5.5 5.9c0.2 0.2 0.5 0.2 0.7 0l13.4-13.9h0.1v-8.8818e-16c0.4-0.4 1-0.4 1.4 0l1.4 1.4c0.4 0.4 0.4 1 0 1.4l-16 16.6c-0.2 0.2-0.4 0.3-0.7 0.3s-0.5-0.1-0.7-0.3l-7.8-8.4-0.2-0.3z" fill="%231e2127"/></svg>');
+    margin: 12px 6px;
+    background: #37b24d
+}
+
+.commento-root .commento-card .commento-option-sticky,.commento-root .commento-card .commento-option-unsticky {
+    height: 14px;
+    width: 14px;
+    -webkit-mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg enable-background="new 0 0 487.222 487.222" version="1.1" viewBox="0 0 487.22 487.22" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="m486.55 186.81c-1.6-4.9-5.8-8.4-10.9-9.2l-152-21.6-68.4-137.5c-2.3-4.6-7-7.5-12.1-7.5s-9.8 2.9-12.1 7.6l-67.5 137.9-152 22.6c-5.1 0.8-9.3 4.3-10.9 9.2s-0.2 10.3 3.5 13.8l110.3 106.9-25.5 151.4c-0.9 5.1 1.2 10.2 5.4 13.2 2.3 1.7 5.1 2.6 7.9 2.6 2.2 0 4.3-0.5 6.3-1.6l135.7-71.9 136.1 71.1c2 1 4.1 1.5 6.2 1.5 7.4 0 13.5-6.1 13.5-13.5 0-1.1-0.1-2.1-0.4-3.1l-26.3-150.5 109.6-107.5c3.9-3.6 5.2-9 3.6-13.9zm-137 107.1c-3.2 3.1-4.6 7.6-3.8 12l22.9 131.3-118.2-61.7c-3.9-2.1-8.6-2-12.6 0l-117.8 62.4 22.1-131.5c0.7-4.4-0.7-8.8-3.9-11.9l-95.6-92.8 131.9-19.6c4.4-0.7 8.2-3.4 10.1-7.4l58.6-119.7 59.4 119.4c2 4 5.8 6.7 10.2 7.4l132 18.8-95.3 93.3z" fill="%231e2127"/></svg>');
+    mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg enable-background="new 0 0 487.222 487.222" version="1.1" viewBox="0 0 487.22 487.22" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="m486.55 186.81c-1.6-4.9-5.8-8.4-10.9-9.2l-152-21.6-68.4-137.5c-2.3-4.6-7-7.5-12.1-7.5s-9.8 2.9-12.1 7.6l-67.5 137.9-152 22.6c-5.1 0.8-9.3 4.3-10.9 9.2s-0.2 10.3 3.5 13.8l110.3 106.9-25.5 151.4c-0.9 5.1 1.2 10.2 5.4 13.2 2.3 1.7 5.1 2.6 7.9 2.6 2.2 0 4.3-0.5 6.3-1.6l135.7-71.9 136.1 71.1c2 1 4.1 1.5 6.2 1.5 7.4 0 13.5-6.1 13.5-13.5 0-1.1-0.1-2.1-0.4-3.1l-26.3-150.5 109.6-107.5c3.9-3.6 5.2-9 3.6-13.9zm-137 107.1c-3.2 3.1-4.6 7.6-3.8 12l22.9 131.3-118.2-61.7c-3.9-2.1-8.6-2-12.6 0l-117.8 62.4 22.1-131.5c0.7-4.4-0.7-8.8-3.9-11.9l-95.6-92.8 131.9-19.6c4.4-0.7 8.2-3.4 10.1-7.4l58.6-119.7 59.4 119.4c2 4 5.8 6.7 10.2 7.4l132 18.8-95.3 93.3z" fill="%231e2127"/></svg>');
+    margin: 12px 6px;
+    background: #adb5bd
+}
+
+.commento-root .commento-card .commento-option-unsticky {
+    -webkit-mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg viewBox="0 0 487.22 487.22" xmlns="http://www.w3.org/2000/svg"><g><title>background</title><rect x="-1" y="-1" fill="none"/></g><g><title>Layer 1</title><path d="m486.55 186.81c-1.6-4.9-5.8-8.4-10.9-9.2l-152-21.6-68.4-137.5c-2.3-4.6-7-7.5-12.1-7.5s-9.8 2.9-12.1 7.6l-67.5 137.9-152 22.6c-5.1 0.8-9.3 4.3-10.9 9.2s-0.2 10.3 3.5 13.8l110.3 106.9-25.5 151.4c-0.9 5.1 1.2 10.2 5.4 13.2 2.3 1.7 5.1 2.6 7.9 2.6 2.2 0 4.3-0.5 6.3-1.6l135.7-71.9 136.1 71.1c2 1 4.1 1.5 6.2 1.5 7.4 0 13.5-6.1 13.5-13.5 0-1.1-0.1-2.1-0.4-3.1l-26.3-150.5 109.6-107.5c3.9-3.6 5.2-9 3.6-13.9z" fill="%231e2127"/></g></svg>');
+    mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg viewBox="0 0 487.22 487.22" xmlns="http://www.w3.org/2000/svg"><g><title>background</title><rect x="-1" y="-1" fill="none"/></g><g><title>Layer 1</title><path d="m486.55 186.81c-1.6-4.9-5.8-8.4-10.9-9.2l-152-21.6-68.4-137.5c-2.3-4.6-7-7.5-12.1-7.5s-9.8 2.9-12.1 7.6l-67.5 137.9-152 22.6c-5.1 0.8-9.3 4.3-10.9 9.2s-0.2 10.3 3.5 13.8l110.3 106.9-25.5 151.4c-0.9 5.1 1.2 10.2 5.4 13.2 2.3 1.7 5.1 2.6 7.9 2.6 2.2 0 4.3-0.5 6.3-1.6l135.7-71.9 136.1 71.1c2 1 4.1 1.5 6.2 1.5 7.4 0 13.5-6.1 13.5-13.5 0-1.1-0.1-2.1-0.4-3.1l-26.3-150.5 109.6-107.5c3.9-3.6 5.2-9 3.6-13.9z" fill="%231e2127"/></g></svg>');
+    background: #f59f00
+}
+
+.commento-root .commento-card .commento-option-button:focus {
+    outline: 0
+}
+
+.commento-root .commento-card .commento-header {
+    padding-bottom: 4px
+}
+
+.commento-root .commento-card .commento-avatar::after {
+    content: "";
+    display: block
+}
+
+.commento-root .commento-card .commento-name {
+    font-weight: 700;
+    font-size: 14px;
+    color: #fff;
+    border: none;
+    display: table;
+    z-index: 1;
+    margin-left: 48px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: fit-content;
+    cursor: pointer
+}
+
+.commento-root .commento-card .commento-flagged::after {
+    content: "Flagged";
+    text-transform: uppercase;
+    font-size: 10px;
+    background: #f03e3e;
+    color: #fff;
+    margin-left: 8px;
+    padding: 2px 6px;
+    border-radius: 100px;
+    line-height: 17px
+}
+
+.commento-root .commento-card .commento-moderator::after {
+    content: "Moderator";
+    text-transform: uppercase;
+    font-size: 10px;
+    background: #37b24d;
+    color: #fff;
+    margin-left: 8px;
+    padding: 2px 6px;
+    border-radius: 100px;
+    line-height: 17px
+}
+
+.commento-root .commento-card .commento-subtitle {
+    display: block;
+    color: #999;
+    font-size: 12px;
+    margin-left: 48px
+}
+
+.commento-root .commento-card .commento-timeago {
+    display: inline;
+    color: #888;
+    font-size: 12px
+}
+
+.commento-root .commento-card .commento-score {
+    display: inline;
+    color: #888;
+    font-size: 12px;
+    font-weight: 700
+}
+
+.commento-root .commento-card .commento-timeago::before {
+    content: "\00a0 \00a0 \00b7 \00a0 \00a0"
+}
+
+.commento-root .commento-card .commento-body p {
+    margin-top: 6px;
+    margin-bottom: 6px
+}
+
+.commento-root .commento-card .commento-options {
+    float: right;
+    position: relative;
+    height: 38px;
+    z-index: 2
+}
+
+.commento-root .commento-card .commento-options-mobile {
+    margin-right: 12px
+}
+
+.commento-root .commento-card .commento-options-clearfix {
+    height: 38px;
+    width: 1px;
+    display: block
+}
+
+.commento-root .commento-card .commento-moderation {
+    height: 48px
+}
+
+.commento-root .commento-dark-card {
+    background: #fff5f5
+}
+
+.commento-root .commento-highlighted-card {
+    background: #fff9db
+}
+
+.commento-root .commento-avatar {
+    width: 38px;
+    height: 38px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #fff;
+    font-size: 22px;
+    float: left;
+    margin-right: 10px;
+    border: 0 transparent
+}
+
+.commento-root .commento-avatar-img {
+    width: 38px;
+    height: 38px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    float: left;
+    margin-right: 10px
+}
+
+.commento-root .commento-login-box-container {
+    display: flex;
+    justify-content: center;
+    position: relative;
+    width: 100%;
+    height: 0;
+    overflow: visible
+}
+
+.commento-root .commento-login-box-container .commento-login-box {
+    width: 90%;
+    max-width: 500px;
+    min-height: 100px;
+    background: #f1f3f5;
+    z-index: 100;
+    position: absolute;
+    top: 8px;
+    padding: 16px;
+    opacity: 1;
+    transition: opacity .2s
+}
+
+.commento-root .commento-login-box-container .commento-login-box .commento-oauth-buttons-container {
+    display: flex;
+    justify-content: center
+}
+
+.commento-root .commento-login-box-container .commento-login-box .commento-oauth-buttons-container .commento-oauth-buttons {
+    align-items: center;
+    position: absolute;
+    z-index: 1;
+    display: contents
+}
+
+.commento-root .commento-login-box-container .commento-login-box .commento-oauth-buttons-container .commento-oauth-buttons .commento-google-button {
+    background: #dd4b39;
+    text-transform: uppercase;
+    font-size: 13px;
+    width: 70px
+}
+
+.commento-root .commento-login-box-container .commento-login-box .commento-oauth-buttons-container .commento-oauth-buttons .commento-github-button {
+    background: #000;
+    text-transform: uppercase;
+    font-size: 13px;
+    width: 70px
+}
+
+.commento-root .commento-login-box-container .commento-login-box .commento-oauth-buttons-container .commento-oauth-buttons .commento-twitter-button {
+    background: #00aced;
+    text-transform: uppercase;
+    font-size: 13px;
+    width: 70px
+}
+
+.commento-root .commento-login-box-container .commento-login-box .commento-oauth-buttons-container .commento-oauth-buttons .commento-gitlab-button {
+    background: #fc6d26;
+    text-transform: uppercase;
+    font-size: 13px;
+    width: 70px
+}
+
+.commento-root .commento-login-box-container .commento-login-box .commento-oauth-buttons-container .commento-oauth-buttons .commento-sso-button {
+    background: #000;
+    text-transform: uppercase;
+    font-size: 13px;
+    width: 200px
+}
+
+.commento-root .commento-login-box-container .commento-login-box hr {
+    border: none;
+    background: #e9ecef;
+    height: 1px;
+    margin: 24px 0
+}
+
+.commento-root .commento-login-box-container .commento-login-box .commento-login-box-subtitle {
+    color: #868e96;
+    text-align: center;
+    margin: 12px 0;
+    font-size: 15px
+}
+
+@font-face {
+    font-style: normal;
+    font-display:swap;font-weight: 300;
+    src: local("Source Sans Pro Light"),local("SourceSansPro-Light"),url(https://commento.rogs.me/fonts/source-sans-300-cyrillic-ext.woff2) format("woff2");
+    unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F
+}
+
+.commento-root .commento-login-box-container .commento-login-box button,.commento-root .commento-login-box-container .commento-login-box input,.commento-root .commento-login-box-container .commento-login-box textarea {
+    font-family: 'Source Sans Pro',sans-serif
+}
+
+.commento-root .commento-login-box-container .commento-login-box html {
+    font-size: 14px;
+    color: #fff;
+    background: #f8f9fa
+}
+
+.commento-root .commento-login-box-container .commento-login-box body {
+    margin: 0
+}
+
+.commento-root .commento-login-box-container .commento-login-box a {
+    text-decoration: none
+}
+
+.commento-root .commento-login-box-container .commento-login-box a:hover {
+    cursor: pointer
+}
+
+.commento-root .commento-login-box-container .commento-login-box .commento-email-container .commento-email,.commento-root .commento-login-box-container .commento-login-box .shadow {
+    box-shadow: 0 1px 3px rgba(50,50,93,.15),0 1px 0 rgba(0,0,0,.02)
+}
+
+.commento-root .commento-login-box-container .commento-login-box .footer {
+    position: relative;
+    bottom: 0;
+    width: 100%;
+    margin-top: 72px
+}
+
+.commento-root .commento-login-box-container .commento-login-box .footer .copyright {
+    align-items: none;
+    color: #dee2e6;
+    background: #fff;
+    text-align: center;
+    padding: 12px
+}
+
+.commento-root .commento-login-box-container .commento-login-box .footer .footer-inner {
+    width: 100%;
+    background: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center
+}
+
+.commento-root .commento-login-box-container .commento-login-box .footer .footer-inner .links {
+    display: flex;
+    justify-content: center;
+    width: 600px
+}
+
+.commento-root .commento-login-box-container .commento-login-box .footer .footer-inner .link-group {
+    margin: 40px
+}
+
+.commento-root .commento-login-box-container .commento-login-box .footer .footer-inner .link-group .header {
+    text-transform: uppercase;
+    font-weight: 700;
+    font-size: 12px;
+    color: #adb5bd
+}
+
+.commento-root .commento-login-box-container .commento-login-box .footer .footer-inner .link {
+    margin-top: 12px;
+    margin-bottom: 12px;
+    display: block;
+    color: #adb5bd;
+    transition: all .2s
+}
+
+.commento-root .commento-login-box-container .commento-login-box .footer .footer-inner .link:hover {
+    color: #495057
+}
+
+@media only screen and (max-width: 1000px) {
+    .commento-root .commento-login-box-container .commento-login-box .footer .footer-inner .link-group {
+        display:block
+    }
+
+    .commento-root .commento-login-box-container .commento-login-box .footer .footer-inner .links {
+        display: block;
+        width: 90%
+    }
+}
+
+.commento-root .commento-login-box-container .commento-login-box .commento-email-container {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    margin: 8px 0
+}
+
+.commento-root .commento-login-box-container .commento-login-box .commento-email-container .commento-email {
+    border-radius: 4px;
+    background: #fff;
+    width: 100%;
+    max-width: 400px
+}
+
+.commento-root .commento-login-box-container .commento-login-box .commento-email-container .commento-email .commento-input {
+    display: inline;
+    height: 40px;
+    background: #fff;
+    border: none;
+    outline: 0;
+    padding: 5px 5px 5px 10px;
+    width: calc(100% - 150px)
+}
+
+.commento-root .commento-login-box-container .commento-login-box .commento-email-container .commento-email .commento-input::placeholder {
+    color: #adb5bd
+}
+
+.commento-root .commento-login-box-container .commento-login-box .commento-email-container .commento-email .commento-email-button {
+    height: 40px;
+    min-width: 110px;
+    float: right;
+    background: #fff;
+    border: none;
+    outline: 0;
+    padding: 0 10px;
+    border-left: 1px solid #f1f3f5;
+    font-size: 12px;
+    text-transform: uppercase;
+    text-align: center;
+    font-weight: 700;
+    color: #1c7ed6;
+    cursor: pointer;
+    transition: all .2s;
+    width: unset
+}
+
+.commento-root .commento-login-box-container .commento-login-box .commento-email-container .commento-email .commento-email-button:hover {
+    color: #228be6
+}
+
+.commento-root .commento-login-box-container .commento-login-box .commento-email-container .commento-email .commento-email-button:disabled {
+    cursor: default;
+    color: #868e96
+}
+
+.commento-root .commento-login-box-container .commento-login-box .commento-forgot-link-container,.commento-root .commento-login-box-container .commento-login-box .commento-login-link-container {
+    margin: 16px;
+    width: calc(100% - 32px);
+    text-align: center
+}
+
+.commento-root .commento-login-box-container .commento-login-box .commento-forgot-link,.commento-root .commento-login-box-container .commento-login-box .commento-login-link {
+    font-size: 14px;
+    font-weight: 700;
+    border-bottom: none
+}
+
+.commento-root .commento-login-box-container .commento-login-box .commento-forgot-link {
+    font-size: 13px;
+    color: #868e96;
+    font-weight: 400
+}
+
+.commento-root .commento-login-box-container .commento-login-box .commento-login-box-close {
+    position: absolute;
+    right: 16px;
+    top: 16px;
+    width: 16px;
+    height: 16px;
+    opacity: .3
+}
+
+.commento-root .commento-login-box-container .commento-login-box .commento-login-box-close:hover {
+    opacity: 1;
+    cursor: pointer
+}
+
+.commento-root .commento-login-box-container .commento-login-box .commento-login-box-close:after,.commento-root .commento-login-box-container .commento-login-box .commento-login-box-close:before {
+    position: absolute;
+    left: 7px;
+    content: ' ';
+    height: 17px;
+    width: 2px;
+    background-color: #495057
+}
+
+.commento-root .commento-login-box-container .commento-login-box .commento-login-box-close:before {
+    transform: rotate(45deg)
+}
+
+.commento-root .commento-login-box-container .commento-login-box .commento-login-box-close:after {
+    transform: rotate(-45deg)
+}
+
+.commento-root .commento-footer {
+    margin: 36px 0 12px;
+    padding-right: 12px
+}
+
+.commento-root .commento-footer .commento-logo-container {
+    float: right
+}
+
+.commento-root .commento-footer .commento-logo-container .commento-logo {
+    border: none;
+    width: auto;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    padding: 5px;
+    border-radius: 3px
+}
+
+.commento-root .commento-footer .commento-logo-container .commento-logo-text::before {
+    content: "Powered by ";
+    font-weight: 400
+}
+
+.commento-root .commento-footer .commento-logo-container .commento-logo-text {
+    font-size: 13px;
+    color: #fff;
+    display: inline;
+    line-height: 24px;
+    position: relative;
+    font-weight: 700
+}
+
+.commento-root .commento-hidden {
+    display: none
+}
+
+.commento-root .commento-blurred {
+    opacity: .4
+}
+
+.commento-root .commento-main-area {
+    transition: filter .2s
+}
+
+.commento-root .commento-error-box {
+    width: 100%;
+    border-radius: 4px;
+    height: 32px;
+    text-align: center;
+    color: #f03e3e;
+    font-weight: 700
+}
+
+.commento-root .commento-moderation-notice {
+    width: 100%;
+    border-radius: 4px;
+    height: 32px;
+    text-align: center;
+    color: #f76707;
+    font-weight: 700;
+    margin-top: 16px
+}
+
+.commento-root .commento-sort-policy-buttons-container {
+    padding: 12px 0;
+    font-weight: 400
+}
+
+.commento-root .commento-sort-policy-buttons-container .commento-sort-policy-buttons {
+    float: right
+}
+
+.commento-root .commento-sort-policy-buttons-container .commento-sort-policy-buttons .commento-sort-policy-button {
+    color: #868e96;
+    font-size: 13px;
+    padding: 0 7px
+}
+
+.commento-root .commento-sort-policy-buttons-container .commento-sort-policy-buttons .commento-sort-policy-button:hover {
+    cursor: pointer
+}
+
+.commento-root .commento-sort-policy-buttons-container .commento-sort-policy-buttons .commento-sort-policy-button-selected {
+    color: #57cc8a;
+    font-weight: 700
+}
+
+.commento-root-font * {
+    font-family: 'Source Sans Pro',sans-serif
+}
diff --git a/themes/m10c/layouts/_default/single.html b/themes/m10c/layouts/_default/single.html
index 53cc794..2584aaf 100644
--- a/themes/m10c/layouts/_default/single.html
+++ b/themes/m10c/layouts/_default/single.html
@@ -27,7 +27,11 @@
       {{ .Content }}
     </div>
     <div class="post-footer">
-      <script defer src="https://commento.rogs.me/js/commento.js"></script>
+      <script defer
+              src="https://commento.rogs.me/js/commento.js"
+              data-css-override="/commento-new.css"
+              data-auto-init="true">
+      </script>
       <div id="commento"></div>
     </div>
   </article>