diff --git a/sphinx_nervproject_theme/layout.html b/sphinx_nervproject_theme/layout.html index 2ab9ceb..576e11d 100644 --- a/sphinx_nervproject_theme/layout.html +++ b/sphinx_nervproject_theme/layout.html @@ -12,8 +12,8 @@ - + + {%- for css in css_files %} {%- if css|attr("rel") %} diff --git a/sphinx_nervproject_theme/static/isso.css b/sphinx_nervproject_theme/static/isso.css index d71ebb7..a61e0f5 100644 --- a/sphinx_nervproject_theme/static/isso.css +++ b/sphinx_nervproject_theme/static/isso.css @@ -1,39 +1,68 @@ #isso-thread * { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; box-sizing: border-box; } +#isso-thread .isso-comment-header a { + text-decoration: none; +} + +#isso-thread { + padding: 0; + margin: 0; +} +#isso-thread > h4 { + font-weight: bold; +} #isso-thread > .isso-feedlink { float: right; padding-left: 1em; } +#isso-thread > .isso-feedlink > a { + font-size: 0.8em; + vertical-align: bottom; +} +#isso-thread .textarea { + min-height: 6em; + outline: 0; +} #isso-root .isso-comment { + max-width: 68em; padding-top: 0.95em; margin: 0.95em auto; } +#isso-root .preview .isso-comment { + padding-top: 0; + margin: 0; +} #isso-root .isso-comment:not(:first-of-type), .isso-follow-up .isso-comment { - border-top: 0.1em solid; + border-top: 0.1em solid var(--InBClr); } .isso-comment > div.avatar { display: block; float: left; - width: 4em; - height: 4em; - margin: 0.3em 1em 0 0; + width: 7%; + margin: 0.3em 1.2em 0 0; } .isso-comment > div.avatar > svg { - border: 0.1em solid; + max-width: 5em; + max-height: 5em; + border: 0.1 solid var(--BClr); border-radius: 0.3em; } .isso-comment > div.text-wrapper { display: block; - word-break: break-word; - hyphens: auto; - -webkit-hyphens: auto; - -ms-hyphens: auto; } .isso-comment .isso-follow-up { - padding-left: calc(4em); + padding-left: calc(7% + 2em); +} +.isso-comment > div.text-wrapper > .isso-comment-header, .isso-comment > div.text-wrapper > .isso-comment-footer { + font-size: 0.95em; +} +.isso-comment > div.text-wrapper > .isso-comment-header { + font-size: 0.85em; } .isso-comment > div.text-wrapper > .isso-comment-header .spacer { padding: 0 0.5em; @@ -44,56 +73,117 @@ .isso-comment > div.text-wrapper > .isso-comment-header .author { font-weight: bold; } +.isso-comment > div.text-wrapper > .textarea-wrapper .textarea, +.isso-comment > div.text-wrapper > .textarea-wrapper .preview { + margin-top: 0.2em; +} +.isso-comment > div.text-wrapper > div.text p { + margin-top: 0.2em; +} +.isso-comment > div.text-wrapper > div.text p:last-child { + margin-bottom: 0.2em; +} +.isso-comment > div.text-wrapper > div.text h1, +.isso-comment > div.text-wrapper > div.text h2, +.isso-comment > div.text-wrapper > div.text h3, +.isso-comment > div.text-wrapper > div.text h4, +.isso-comment > div.text-wrapper > div.text h5, +.isso-comment > div.text-wrapper > div.text h6 { + font-size: 130%; + font-weight: bold; +} .isso-comment > div.text-wrapper > div.textarea-wrapper .textarea, .isso-comment > div.text-wrapper > div.textarea-wrapper .preview { width: 100%; - border: 0.1em solid var(--InBClr)!important; + border: 0.1em solid var(--BClr); border-radius: 0.2em; - word-break: break-word; - hyphens: auto; - -webkit-hyphens: auto; - -ms-hyphens: auto; } .isso-comment > div.text-wrapper > .isso-comment-footer { clear: left; } +.isso-comment > div.text-wrapper > .isso-comment-footer > a { + position: relative; + top: .2em; +} +.isso-comment > div.text-wrapper > .isso-comment-footer > a + a { + padding-left: 1em; +} +.isso-comment > div.text-wrapper > .isso-comment-footer .upvote svg, +.isso-comment > div.text-wrapper > .isso-comment-footer .downvote svg { + position: relative; + top: .2em; +} +.isso-comment .isso-postbox { + margin-top: 0.8em; +} .isso-comment.isso-no-votes span.votes { display: none; } .isso-postbox { + max-width: 68em; + margin: 0 auto 2em; clear: right; } +.isso-postbox > .form-wrapper { + display: block; + padding: 0; +} +.isso-postbox > .form-wrapper > .auth-section, +.isso-postbox > .form-wrapper > .auth-section .post-action { + display: block; +} .isso-postbox > .form-wrapper .textarea, .isso-postbox > .form-wrapper .preview { margin: 0 0 .3em; padding: .4em .8em; border-radius: 0.3em; - border: 0.1em solid; + background-color: var(--InBgClr); + color: var(--InTClr); + border: 0.1em solid var(--InBClr); } -.isso-postbox > .form-wrapper > .auth-section { - display: flex; - flex-flow: row wrap; +.isso-postbox > .form-wrapper input[type=checkbox] { + vertical-align: middle; + position: relative; + bottom: 0.1em; + margin-left: 0; +} +.isso-postbox > .form-wrapper .notification-section { + font-size: 0.90em; + padding-top: .3em; +} +#isso-thread .textarea:focus, +#isso-thread input:focus { + border-color: var(--BClr); +} +.isso-postbox > .form-wrapper > .auth-section .input-wrapper { + display: inline-block; + position: relative; + max-width: 25%; + margin: 0; } - .isso-postbox > .form-wrapper > .auth-section .input-wrapper input { - flex-basis: 100%; + padding: .3em 1em; + max-width: 100%; border-radius: 0.3em; - width: 100%; + background-color: var(--InBgClr); + color: var(--InTClr); + line-height: 1.4em; + border: 0.1em solid var(--InBClr); +} +.isso-postbox > .form-wrapper > .auth-section .post-action { + display: inline-block; + float: right; + margin: 0 0 0 0.5em; } .isso-postbox > .form-wrapper > .auth-section .post-action > input { + padding: .3em; border-radius: 0.2em; - border: none; - margin: 0.3em; - padding: 0 0.1em 0 0.1em; - background-color: var(--InBgClr) !important; - color: var(--InTClr) !important; + border: 0.1em solid var(--InBClr); + cursor: pointer; + outline: 0; + line-height: 1.4em; } -.isso-postbox > .form-wrapper > .auth-section .post-action:hover > input { - background-color: var(--InBgClr) !important; - color: var(--InTClr) !important; -} - .isso-postbox > .form-wrapper .preview, .isso-postbox > .form-wrapper input[name="edit"], .isso-postbox.preview-mode > .form-wrapper input[name="preview"], @@ -108,5 +198,15 @@ } .isso-postbox > .form-wrapper > .notification-section { display: none; - padding-bottom: 0.1em; + padding-bottom: 1em; +} +@media screen and (max-width:60ex) { + .isso-postbox > .form-wrapper > .auth-section .input-wrapper { + display: block; + max-width: 100%; + margin: 0 0 .3em; + } + .isso-postbox > .form-wrapper > .auth-section .input-wrapper input { + width: 100%; + } }