/*-------------------------------------------------------------- Comments --------------------------------------------------------------*/ /* Comment Entries / Comment Lists */ .commententries { float: left; margin: 0; padding: 0; width: 100%; } .commentlist { padding-left: 0; } .commentlist, .commentlist ul.children { display: inline-block; list-style: none; width: 100%; } .commentlist ul.children { margin: 0; padding-left: 80px; } .commentlist ul.children li > .children { padding-top: 0; padding-left: 60px; } .commentlist li.comment, .commentlist li.pingback, .commentlist li.trackback { padding-bottom: 0; } .commentlist li.comment .comment-respond p #email-notes, .comment-form > p #email-notes, .comment-form .comment-notes { display: inline-block; font-size: var(--wdtFontSize_Base); margin-bottom: 0; width: 100%; } .comment-form .comment-notes { margin-bottom: 15px; } .commentlist li.comment .comment-respond p #email-notes, .comment-form > p #email-notes { width: auto; } #comments { clear: both; } #comments > h3 { font-size: 1.75rem; margin-bottom: 1.25em; } .comments-title { font-size: 1.25rem; margin-bottom: 1.5em; } .comment-list, .comment-list .children { list-style: none; margin: 0; padding: 0; } .comment-list li:before { display: none; } .comment-body { border-bottom: 1px solid; display:inline-block; float:none; margin: 35px 0 0; padding-bottom: 35px; padding-left: 80px; position: relative; width: 100%; } .comment-body + #respond.comment-respond { margin-top: 30px; } .commentlist > li:first-child > .comment-body { margin-top: 0; } ul.children li .comment-body { padding-left: 60px; } .comment-body .comment-meta { display: inline-block; margin-bottom: 15px; position: relative; width: 100%; } .comment-body p:last-child { margin-bottom: 0; } .comment-author { display: inline-block; line-height: normal; margin-bottom: 0; position: relative; width: 100%; } .comment-author b { font-size: calc(var(--wdtFontSize_H6) - 2px); text-transform: none; } .comment-author .avatar { height: 60px; left: -80px; position: absolute; width: 60px; top: 0; } .rounded .comment-author .avatar { border-radius: 50%; -webkit-border-radius: 50%; } .square .comment-author .avatar { border-radius: 0; -webkit-border-radius: 0; } .children .comment-author .avatar { height: 40px; left: -60px; width: 40px; top: 0; } .bypostauthor > .comment-body > .comment-meta > .comment-author .avatar { border: 1px solid; padding: 2px; } .comment-author .says { display: none; } .comment-author a:not(:focus), .comment-metadata a:not(:focus) { text-decoration: none; } .comment-metadata { display: inline-block; font-size: calc(var(--wdtFontSize_Base) - 3px); font-weight: normal; letter-spacing: 0; line-height: normal; padding: 0; position: relative; } .comment-metadata a.comment-edit-link { margin-left: 1em; } .comment-metadata, .comment-metadata a, .comment-metadata a.comment-edit-link { color: inherit; } .comment-metadata a:hover, .comment-metadata a.comment-edit-link:hover { opacity: 1; } .comment-details .reply { display: table; } .commentlist li.comment .reply { display: inline-block; right: 0; top: 0; position: absolute; margin: 0; padding: 0; } .page-with-sidebar .commentlist li.comment.depth-5 .reply { margin-top: 15px; position: relative; } .comment-reply-link { border: 2px solid; display: inline-block; font-size: calc(var(--wdtFontSize_Base) - 2px); font-weight: 400; line-height: normal; margin-top: 0; padding: 8px 15px; position: relative; text-transform: capitalize; -webkit-border-radius: var(--wdtRadius_2X); border-radius: var(--wdtRadius_2X); } .comment-reply-link:not(:focus) { text-decoration: none; } .comment-reply-link .icon { left: -2em; height: 1em; position: absolute; top: 0; width: 1em; } .commententries ul.commentlist li .reply a.comment-reply-login { background-color: rgba(0, 0, 0, 0); } .no-comments, .comment-awaiting-moderation { font-size: 14px; font-size: 0.875rem; font-style: italic; } .comments-pagination { margin: 2em 0 3em; } .form-submit { text-align: left; display: inline-block; width: 100%; } li.comment .comment-form p.form-submit { margin-bottom: 15px; } .commententries .comments-area:empty { display: none; } .commententries .comments-area > h3 { padding-bottom: 0; } .commententries .comments-area > h3, .commententries .comments-area > #comments > h3, #reviews h3, #respond h3#reply-title { font-size: 24px; } .commententries .comments-area > #comments > h3 { margin-bottom: 20px; } #respond h3#reply-title { position: relative; display: inline-block; width: 100%; font-size: 1.75rem; } #respond h3#reply-title small { display: block; font-size: calc(var(--wdtFontSize_Base) - 3px); font-weight: normal; } #respond h3#reply-title small a { color: inherit; display: table; margin-top: 10px; font-size: var(--wdtFontSize_Ext); color: var(--wdtLinkColor); font-family: var(--wdtFontTypo_Base); letter-spacing: normal; text-transform: capitalize; position: relative; padding-bottom: 2px; } #respond h3#reply-title small a:hover {color: var(--wdtLinkHoverColor); } #respond h3#reply-title small a:before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background-color: currentColor; -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transition: transform var(--wdt-Ad-Transition); transition: transform var(--wdt-Ad-Transition); -webkit-transform-origin: bottom right; transform-origin: bottom right; } #respond h3#reply-title small a:focus:before, #respond h3#reply-title small a:hover:before { -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: bottom left; transform-origin: bottom left; } .commentlist li.comment #respond { display: block; } .commentlist li.comment .comment-body ~ #respond { border-top: 1px solid; border-bottom: 1px solid; display: inline-block; margin-top: -1px; margin-bottom: 0; padding: 10px 0 35px; position: relative; z-index: 1; } .commentlist li.comment .comment-body ~ #respond .comment-form { margin-bottom: 0; } .commentlist li.comment .comment-body ~ #respond h3#reply-title { margin-top: 0; } .pingback .comment-body, .trackback .comment-body { padding-left: 0; } .pingback .comment-body { margin-left: 0; padding-left: 0; } .commentlist li.comment, .commentlist li.pingback { padding-bottom: 0; } .commentlist li.pingback .comment-body .comment-content > p { margin-bottom: 0; } .commententries nav.navigation { float: left; margin-bottom: 40px; width: 100%; } .commententries .nocomments { border-top-width: 0; padding: 0; } .commententries nav.navigation > div .nav-previous { float: left; } .commententries nav.navigation > div .nav-next { float: right; } .commententries .nav-links > div a { border-bottom: 1px solid; padding-bottom: 5px; font-size: var(--wdtFontSize_Base); } .commententries .nav-previous > a:before, .commententries .nav-next > a:after { font-size: 16px; font-family: "AaKum Icons"; transition: none; -webkit-transition: none; -ms-transition: none; -moz-transition: none; } .commententries .nav-previous > a:before { content: "\f104"; margin-right: 10px; } .commententries .nav-next > a:after { content: "\f105"; margin-left: 10px; } .commentlist li.pingback .comment-author b, .commentlist li.trackback .comment-author b { font-size: calc(var(--wdtFontSize_H6) - 2px); } #primary > .commententries:last-child > .comments-area > .comment-respond > .comment-form:last-child, #primary > .blog-single-entry > .commententries:last-child > .comments-area > .comment-respond > .comment-form:last-child { margin-bottom: 0; } .page-template-default.page:not(.woocommerce) #primary .commententries .comments-area { margin-top: 30px; } .page-template-default section > .commententries .comment-form p.comment-form-wdt-privatepolicy #comment-form-wdt-privatepolicy { margin-right: 12px; } .post-default .commententries { margin-top:20px; } .page figure.wp-caption ~ p:last-child img.alignright, .page figure.wp-caption ~ p:nth-last-child(2) img.alignright, .single-post .entry-body figure.wp-caption ~ p:last-child img.alignright.size-thumbnail, .single-post .entry-body figure.wp-caption ~ p:nth-last-child(2) img.alignright.size-thumbnail, .logged-in .single-post .entry-body figure.wp-caption ~ p:last-child img.alignright.size-thumbnail, .logged-in .single-post .entry-body figure.wp-caption ~ p:nth-last-child(2) img.alignright.size-thumbnail { clear: both; } .comment-form { display: inline-block; margin-bottom: 20px; width: 100%; } .comment-form > p { margin-bottom: 15px; width: 100%; float: left; text-align: left; position: relative; } .comment-form > p [type="checkbox"], .comment-form > p [type="radio"] { opacity: 0; } .comment-form p label { display: inline-block; } .comment-form p:not(.comment-form-cookies-consent) label { font-weight: 500; } .comment-form .comment-form-cookies-consent label { font-size: var(--wdtFontSize_Base); padding-left: 12px; } .comment-form .comment-form-cookies-consent #wp-comment-cookies-consent { position: relative; } .comment-form .comment-form-cookies-consent #wp-comment-cookies-consent ~ label { margin: 0 !important; flex: 1 1 calc(100% - 1em); } .comment-form > p:last-child,.wpcf7-form .contact-form:last-child,.commentlist li.comment .comment-respond p:last-child { margin-bottom: 0; } .comment-form > p.comment-form-comment.textarea-field span.fa { float: left; height: 200px; } .comment-form > p input[type="checkbox"] ~ label:before, .comment-form > p input[type="radio"] ~ label:before { display: none; border-style: solid; border-width: 1px; content: ""; height: 15px; left: 0; margin-top: 0; position: absolute; top: 8px; -webkit-transition: .2s; transition: .2s; width: 15px; z-index: 0; } .comment-form > p input[type="checkbox"]:checked ~ label:before, .comment-form > p input[type="radio"]:checked ~ label:before { display: none; backface-visibility: hidden; border-bottom: 2px solid var(--wdtPrimaryColor); border-left: 1px solid transparent; border-right: 2px solid var(--wdtPrimaryColor); border-top: 1px solid transparent; height: 20px; left: -5px; top: 3px; transform: rotate(40deg); -webkit-transform: rotate(40deg); transform-origin: 100% 100%; -webkit-transform-origin: 100% 100%; width: 10px; -webkit-backface-visibility: hidden; background: none; } label span.required, .comment-form > .comment-notes span.required { color: #ff0000; } .no-comments, .comment-awaiting-moderation { color: var(--wdtBodyTxtColor); } .comment-reply-link:hover, .commentlist li.comment .reply a:hover { color: var(--wdtAccentTxtColor); } .comment-body, .commentlist li.comment .comment-body ~ #respond, .commententries nav.navigation, ul.commentlist li.bypostauthor .author-name, .bypostauthor > .comment-body > .comment-meta > .comment-author .avatar { border-color: var(--wdtBorderColor); } .commentlist li.comment .comment-body ~ #respond { border-top-color: var(--wdtBodyBGColor); } /* Checkbox Style */ .comment-form > p.comment-form-cookies-consent { display: inline-flex; align-items: baseline; margin-bottom: clamp(1.25rem, 0.9615rem + 1.2821vw, 2.5rem); } .comment-form > p input[type="checkbox"], .comment-form > p input[type="radio"] { opacity: 1; -webkit-appearance: none; appearance: none; width: 1em; height: 1em; border: 1px solid var(--wdtBorderColor) !important; transform: translateY(-0.075em); display: grid; place-content: center; flex: 1 1 1em; background: var(--wdtInputBgColor); } .comment-form > p input[type="checkbox"]:before, .comment-form > p input[type="radio"]:before { content: ""; width: 0.65em; height: 0.65em; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); transform: scale(0); transform-origin: bottom left; transition: 120ms transform ease-in-out; box-shadow: inset 1em 1em var(--wdtBorderColor); } .comment-form > p input[type="checkbox"]:checked:before { transform: scale(1); } /* Comment form two column */ @media (min-width: 1025px) { #primary:not(.page-with-sidebar) div#respond { width: 100%; } #primary:not(.page-with-sidebar) .comment-form { display: grid; margin-bottom: 20px; width: 100%; grid-template-columns: repeat(2,1fr); gap: 20px;} #primary:not(.page-with-sidebar) .comment-form > p { margin-bottom: 0; width: 100%; float: left; text-align: left; position: relative; } #primary:not(.page-with-sidebar) .comment-form > p [type="checkbox"], #primary:not(.page-with-sidebar) .comment-form > p [type="radio"] { opacity: 1; } #primary:not(.page-with-sidebar) .comment-form > p.form-submit > input[type="submit"] { margin: 0;} #primary:not(.page-with-sidebar) .comment-form > p.form-submit, #primary:not(.page-with-sidebar) .comment-form > p.comment-form-cookies-consent, #primary:not(.page-with-sidebar) .comment-form > p.comment-notes { grid-column: 1/3; margin-bottom: 0; } #primary:not(.page-with-sidebar) .comment-form > p.comment-form-cookies-consent { margin-bottom: 18px; } #primary:not(.page-with-sidebar) .comment-form > p.comment-form-url, #primary:not(.page-with-sidebar) .comment-form > p.comment-form-email, #primary:not(.page-with-sidebar) .comment-form > p.comment-form-author { grid-column: 1/2; } #primary:not(.page-with-sidebar) .comment-form > p.comment-form-comment { grid-column: 2/3; grid-row: 2/5; } #primary:not(.page-with-sidebar) .comment-form > p.comment-form-comment > textarea { resize: none; } #primary:not(.page-with-sidebar) .comment-form > p.logged-in-as ~ .comment-form-comment { grid-column: 1/3; } #primary:not(.page-with-sidebar) .comment-form > p.comment-form-comment textarea { min-height: 100%; } #primary:not(.page-with-sidebar) .comment-form > p.form-submit { width: auto; } #primary:not(.page-with-sidebar) .comment-form > p.logged-in-as { margin-bottom: 0; grid-column: 1/3; } } /*-------------------------------------------------------------- Accents --------------------------------------------------------------*/ /* Primary */ .commentlist li.comment .reply a { color: var(--wdtPrimaryColor); } ul.commentlist li .reply a:hover { background-color: var(--wdtPrimaryColor); } .commentlist li.comment .reply a { border-color: var(--wdtPrimaryColor); } .comment-author b { color: var(--wdtHeadAltColor); } .comment-reply-link .icon, .commententries .nav-links > div a:hover, body .blog-single-entry ul li .comment-body .comment-author a:hover, body .blog-single-entry ul li .comment-body .comment-content a:hover { color: var(--wdtPrimaryColor); } /* Secondary */ .commententries ul.commentlist li .reply a.comment-reply-login:hover { color: var(--wdtSecondaryColor); } /*-------------------------------------------------------------- Responsive --------------------------------------------------------------*/ @media only screen and (min-width:1541px) and (max-width:1724px) { .children .comment-author .avatar { left: -60px; } } /*----*****---- << Laptop/Notebook >> ----*****----*/ @media only screen and (min-width:1281px) and (max-width:1540px) { .comment-body {padding-left: 85px; } .comment-author .avatar {left: -85px; } ul.children li .comment-body {padding-left: 60px; } .children .comment-author .avatar {left: -60px; } } /*----*****---- << Tablet (Landscape) >> ----*****----*/ /* Note: Design for a width of 960px */ @media only screen and (min-width:1025px) and (max-width:1280px) { .comment-body {padding-left: 75px; } .comment-author .avatar {height: 60px; left: -75px; width: 60px; } .commentlist ul.children li > .children { padding-left: 6%; } ul.children li .comment-body {padding-left: 60px; } .children .comment-author .avatar {left: -60px; } } /*----*****---- << Tablet (Portrait) >> ----*****----*/ /* Note: Design for a width of 768px */ @media only screen and (min-width:768px) and (max-width:1024px) { .comment-body { padding-left: 80px; } .comment-author .avatar { height: 60px; left: -80px; width: 60px; } .comment-metadata { position: relative; top: 0; } ul.commentlist li .comment-author img { max-height: 60px; max-width: 60px; } .commentlist li.comment #respond { padding-left: 80px; } .commentlist ul.children li > .children { padding-left: 6%; } .commentlist .children li.comment #respond { padding-left: 60px; } ul.children li .comment-body { padding-left: 60px; } .children .comment-author .avatar { left: -60px; } } /*----*****---- << Mobile (Landscape) >> ----*****----*/ /* Common Styles for the devices below 767px width */ @media only screen and (max-width: 767px) { .entry-body .gallery .gallery-item { max-width: 100% !important; } /* Comment */ ul.commentlist { font-size: 15px; } .comment-body .comment-meta { font-size: 13px; } .comment-author b, ul.commentlist li .author-name > a { font-size: 20px; } ul.commentlist li.comment .comment-author img { max-width: 40px; max-height: 40px; } .comment-body { padding-left: 60px; } .comment-author .avatar { height: 40px; left: -60px; width: 40px; } ul.children li .comment-body { padding-left: 50px; } .children .comment-author .avatar { left:-50px } .commentlist li.comment .comment-body .comment-meta { margin-bottom: 10px; } .commentlist li.comment #respond { padding-left: 0; } .comment-reply-link { font-size: 13px; padding: 6px 12px; } .commentlist ul.children { padding-left:15px; } .commentlist ul.children li > .children { padding-left: 6%; } ul.commentlist li.comment ul.children .comment-author img { max-width: 30px; max-height: 30px; } ul.commentlist li .comment-details { margin:0 0 10px; } ul.commentlist, ul.commentlist li .comment-details { width: 100%; } ul.commentlist li.depth-1, ul.commentlist li.depth-2, ul.commentlist li.depth-3, ul.commentlist li.depth-4, ul.commentlist li.depth-5 { margin-bottom:0; } .page-with-sidebar .commentlist li.comment.depth-5 .reply { margin-top: 15px; position: relative; } .commententries #respond, .commentlist li.comment #respond, .commentlist .children li.comment #respond { padding-left: 0; } li.comment .comment-form p.form-submit input[type="submit"] { margin-top: 0; font-weight: normal; } .post-password-form label input { width:100%; } } /*----*****---- << Mobile - Portrait >> ----*****----*/ /* Common Styles for the devices below 479px width */ @media only screen and (max-width: 479px) { .comment-body { padding-left: 0; } .comment-author .avatar { height: 50px; left: 0; width: 50px; top: 0; position: relative; display: block; margin-bottom: 20px; } .children .comment-author .avatar { left:0; top:0; } .commentlist li.comment #respond { padding-left: 0; } .commentlist { padding-left: 0; } .commentlist li.comment .reply { position: relative; margin-top: 20px; } ul.children li .comment-body { padding-left: 0; } ul.commentlist li.comment .comment-author img { max-width: 50px; max-height: 50px; } li.comment .comment-form p.form-submit input[type="submit"] { margin-top: 0; font-weight: normal; } .commententries .nav-previous, .commententries .nav-next { width:100%; text-align:center; } }