@charset "UTF-8"; /* ==================================================
 * Snapic Plus for Comments Main Stylesheet by Lopwon.
 * www.Lopwon.com
 * 2023-10-18
 * ------------------------------------------------------------------- */

#comment { padding: 0 2em; width: calc(100% - 4em); } .snapic-comment { margin: 5em 0; } .comments-wrap { position: relative; margin: 1em auto; padding: 0; max-width: 960px; } .comments-wrap h3 { margin: 0; padding: 0; font-size: var(--font-size-xxl); font-weight: normal; color: var(--color-comments-tips); } .comments-wrap .counting { text-align: right; } .comment-list { margin: 0; padding-left: 0; } .comment-list>.comment-body { position: relative; list-style: none; margin-top: 3em; padding-left: 48px; } .comment-author { height: 32px; } .comment-author span { position: absolute; left: 0; width: 32px; height: 32px; opacity: .7; } .comment-author span:hover { opacity: 1; } .comment-children .comment-author .avatar { display: none; } .comment-author span img { border-radius: 50%; -webkit-transform: scale(.98); -moz-transform: scale(.98); -ms-transform: scale(.98); -o-transform: scale(.98); transform: scale(.98); } .comment-author .fn { font-size: var(--font-size-l); line-height: 32px; font-style: normal; color: var(--color-comments-author); } .comment-author .fn a { color: var(--color-comments-author); } .comment-author .fn a:hover { color: var(--color-comments-author-hover); line-height: 32px; } .comment-meta { margin-top: 0.5em; font-size: var(--font-size-s); } .comment-meta, .comment-meta a { color: var(--color-comments-meta); } .comment-meta a:hover { color: var(--color-comments-meta-hover); margin-top: 0.5em; } .comment-awaiting-moderation { margin-left: 1em; color: var(--color-comments-awaiting); } .comment-content { display: inline-block; margin-top: 1em; padding: 1em 2em; font-size: var(--font-size-xl); line-height: 1.4; color: var(--color-comments-content); text-align: justify; word-break: break-all; word-wrap: break-word; background-color: var(--color-comments-content-background); border-radius: 0.25em 2em 2em 2em; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .comment-content:hover { color: var(--color-comments-content-hover); line-height: 1.4; background-color: var(--color-comments-content-background-hover); } .comment-body .comment-children { margin: 0; padding: 0; } .comment-body .comment-children li { padding-left: 10px; border-left: 0.01em solid var(--color-comments-content-boder); } .comments-wrap .cancelreply, .comments-wrap .logout { margin: 1em auto; padding-left: 2em; } .comments-wrap .cancelreply a, .comments-wrap .logout a { font-size: var(--font-size-l); color: var(--color-comments-tips); } .comments-wrap .cancelreply a:hover, .comments-wrap .logout a:hover { margin: 1em auto; color: var(--color-comments-tips-hover); } .comment-body .comment-reply { margin: 0.5em 0; } .comment-body .comment-reply a { font-size: var(--font-size-m); color: var(--color-comments-tips); } .comment-body .comment-reply a:hover { color: var(--color-comments-tips-hover); } .comments-wrap .respond { margin-top: 3em; } .respond form { padding: 1em 0; } .comments-wrap .closing { margin: 5em auto 3em auto; text-align: center; } input[type="password"], input[type="submit"], input[type="email"], input[type="text"], input[type="url"], button[type="submit"], textarea { padding: 1em; width: calc(100% - 2em); height: 2em; font-family: sans-serif; font-size: var(--font-size-xl); line-height: 1.4; color: var(--color-comments-input); background-color: var(--color-comments-input-background); border-radius: 5px; border: 0; outline: none !important; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } input[type="password"]:focus, input[type="submit"]:focus, input[type="email"]:focus, input[type="text"]:focus, input[type="url"]:focus, button[type="submit"]:focus, textarea:focus { color: var(--color-comments-input-focus); border: none; background-color: var(--color-comments-input-background-focus); } .protected p { display: flex; justify-content: center; } input[type="password"] { margin: 0 5px; padding: 15px; height: 30px; width: calc(50% - 40px); } input[type="submit"] { margin: 0 5px; padding: 15px; height: 60px; width: calc(50% - 10px); font-size: 16px; } #response button { width: 100%; height: 4em; color: var(--color-comments-button); } #response button:hover, input[type="submit"]:hover { color: var(--color-comments-button-hover); background-color: var(--color-comments-button-background-hover); cursor: pointer; } #response textarea { height: 5em; } fieldset { border: 0; margin: 1em 0; padding: 0; } .grid-url, .grid-text { float: left; margin: 1em 0.5em 0 0.5em; width: calc(100% - 1em); } .grid-author, .grid-mail { float: left; margin: 1em 0.5em 0 0.5em; width: calc(50% - 1em); } .grid-submit { float: left; margin: 1em 0.5em 0 0.5em; width: calc(100% - 1em); } @media screen and (max-width: 1920px) { } @media screen and (max-width: 960px) { #comment { padding: 0 1.75em; width: calc(100% - 3.5em); } } @media screen and (max-width: 768px) { .snapic-comment { margin: 3em 0; } #comment { padding: 0 1.5em; width: calc(100% - 3em); } .comments-wrap h3 { font-size: var(--font-size-xl); } } @media screen and (max-width: 640px) { #comment { padding: 0 1.25em; width: calc(100% - 2.5em); } } @media screen and (max-width: 480px) { .protected p { display: flex; flex-direction: column; align-items: center; } input[type="password"] { width: calc(100% - 40px); } input[type="submit"] { margin-top: 10px; width: calc(100% - 10px); } .snapic-comment { margin: 2em 0; } #comment { padding: 0 1em; width: calc(100% - 2em); } .comments-wrap h3 { font-size: var(--font-size-l); } .comment-body .comment-children ol { padding-left: 8px; } .comment-body .comment-children li { padding-left: 8px; } .grid-author, .grid-mail { width: calc(100% - 1em); } } @media screen and (max-width: 400px) { #comment { padding: 0 0.75em; width: calc(100% - 1.5em); } .comment-body .comment-children ol { padding-left: 4px; } .comment-body .comment-children li { padding-left: 4px; } }