diff --git a/assets/css/isso.css b/assets/css/isso.css index 9362854..bdd1f44 100644 --- a/assets/css/isso.css +++ b/assets/css/isso.css @@ -1,51 +1,51 @@ .isso-postbox > .form-wrapper > .auth-section .post-action > input:hover { - background-color: #ddd; + background-color: #ddd; } .isso-postbox > .form-wrapper > .auth-section .input-wrapper input { - padding: 0.5rem; - max-width: 100%; - border-radius: 3px; - background-color: #fff; - line-height: 1.4em; - border: 1px solid rgba(0, 0, 0, 0.2); - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); - margin-right: 0.5rem; - color: #222; + padding: 0.5rem; + max-width: 100%; + border-radius: 3px; + background-color: #fff; + line-height: 1.4em; + border: 1px solid rgba(0, 0, 0, 0.2); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); + margin-right: 0.5rem; + color: #222; } .isso-postbox .textarea { - color: #222; + color: #222; } .isso-postbox .preview { - color: #000; + color: #000; } .isso-comment > div.text-wrapper > .isso-comment-header .author { - font-weight: bold; - color: #222; + font-weight: bold; + color: #222; } .isso-postbox > .form-wrapper > .auth-section .post-action > input { - padding: 0.5rem 1rem !important; - border-radius: 2px; - border: 1px solid #ccc; - background-color: #ddd; - cursor: pointer; - outline: 0; - line-height: 1.4em; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); - color: #222; + padding: 0.5rem 1rem !important; + border-radius: 2px; + border: 1px solid #ccc; + background-color: #ddd; + cursor: pointer; + outline: 0; + line-height: 1.4em; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); + color: #222; } #isso-thread > h4 { - color: var(--midgrey2) !important; - font-weight: bold; + color: var(--midgrey2) !important; + font-weight: bold; } #isso-thread img { - border-radius: 50%; + border-radius: 50%; } #isso-root .spacer, @@ -56,47 +56,65 @@ .isso-comment .isso-comment-header .note, .isso-comment .isso-comment-header a.parent, .isso-comment > div.text-wrapper > .isso-comment-header .spacer { - color: var(--midgrey2) !important; + color: var(--midgrey2) !important; } .isso-comment.isso-no-votes .votes, .isso-comment-footer .votes { - display: inline-block; - font-weight: bold; + display: inline-block; + font-weight: bold; } .isso-comment.isso-no-votes span.votes { - display: inline-block !important; + display: inline-block !important; } .isso-postbox .input-wrapper:nth-child(3) { - display: none !important; + display: none !important; } @media (prefers-color-scheme: dark) { - *:target { - color: #000 !important; - } + *:target { + color: #000 !important; + } - a:target:hover { - color: #15171a !important; - } + a:target:hover { + color: #15171a !important; + } - #isso-root .spacer, - .isso-comment .isso-comment-header .spacer, - .isso-comment .isso-comment-header a.permalink, - .isso-comment .isso-comment-header .note, - .isso-comment .isso-comment-header a.parent, - .isso-comment > div.text-wrapper > .isso-comment-header .spacer, - .isso-comment-header *, - .isso-comment-footer *, - #isso-thread > h4 { - color: var(--whitegrey) !important; - } + #isso-root .spacer, + .isso-comment .isso-comment-header .spacer, + .isso-comment .isso-comment-header a.permalink, + .isso-comment .isso-comment-header .note, + .isso-comment .isso-comment-header a.parent, + .isso-comment > div.text-wrapper > .isso-comment-header .spacer, + .isso-comment-header *, + .isso-comment-footer *, + #isso-thread > h4 { + color: var(--whitegrey) !important; + } - .isso-feedlink:hover, - .isso-comment > div.text-wrapper > .isso-comment-footer a:hover, - #isso-root a:hover { - text-decoration: underline; - } + .isso-feedlink:hover, + .isso-comment > div.text-wrapper > .isso-comment-footer a:hover, + #isso-root a:hover { + text-decoration: underline; + } + + #isso-root a { + color: var(--whitegrey); + } + + .isso-feedlink:hover, + .isso-comment > div.text-wrapper > .isso-comment-footer a:hover, + #isso-root a:hover { + color: #fff; + text-decoration: underline; + } +} + +.comment-checkbox__label { + width: 100%; + display: grid; + grid-template-columns: 20px 1fr; + grid-column-gap: 10px; } diff --git a/post.hbs b/post.hbs index 9b89d39..392c3eb 100644 --- a/post.hbs +++ b/post.hbs @@ -141,6 +141,7 @@ into the {body} of the default.hbs template --}} original_submit.style.setProperty("display", "none") const faux_submit = document.createElement("input") faux_submit.value = "Wyślij" + faux_submit.type = "submit" const comment_checkbox_id = "comment-checkbox" const checkbox = document.createElement("input") checkbox.type = "checkbox" @@ -149,10 +150,11 @@ into the {body} of the default.hbs template --}} const label = document.createElement("label") label.for = comment_checkbox_id; label.appendChild(checkbox) + label.id = comment_checkbox_id + "__label" const label_text = document.createElement("span") label_text.innerHTML = `akceptuję postanowienia regulaminu komentarzy` label.appendChild(label_text) - document.querySelector("#isso-thread .auth-section").appendChild(label) + document.querySelector("#isso-thread .auth-section").insertBefore(label, document.querySelector(".auth-section .post-action")) faux_submit.addEventListener("click", ()=>{ if(!checkbox.checked){ checkbox.reportValidity()