/* 2021 switch to Presta comments module */ /** * Product comments CSS */ .btn-comment, .btn-comment-inverse { height: auto; } .btn-comment .material-icons, .btn-comment-inverse .material-icons { font-size: 20px; margin-right: 7px; } .btn-comment:hover { background-color: #3c4d52; } .btn-comment-inverse { background-color: #ffffff; color: #363a41; border: 1px solid #979797; } .btn-comment-inverse:hover { background-color: #6b868f; border: 1px solid #6b868f; color: #ffffff; } .btn-comment-big { height: auto; } .btn-comment-huge { height: auto; } .link-comment { color: #232323; } .link-comment:hover, .link-comment:active { text-decoration: underline; color: #232323; } /** * Additional product infos */ .product-comments-additional-info { margin: 20px 0; font-weight: 300; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; font-size: 14px; } .product-comments-additional-info .link-comment.post-product-comment { border-left: 1px solid #979797; padding-left: 12px; margin-left: 12px; } .product-comments-additional-info .comments-note { margin-right: 8px; } /** * Post comment modal */ #product-comment-posted-modal-message { font-size: 16px; } .product-comment-modal .modal-header { border: none; padding: 30px 30px 15px; } .product-comment-modal .modal-body { padding: 15px 30px 30px; } .product-comment-modal .modal-header h2 { float: left; font-size: 20px; } .product-comment-modal .modal-dialog { width: calc(100% - 30px); max-width: 774px; } .product-comment-modal .modal-dialog h3 { font-size: 14px; } .product-comment-modal .modal-dialog .product-flag { display: none; } .product-comment-modal .modal-dialog .product-cover, .product-comment-modal .modal-dialog .product-cover img { width: 99px; height: 99px; } .product-comment-modal label.form-label { font-size: 16px; margin: 10px 0; } .product-comment-modal input { width: 100%; } .product-comment-modal textarea { width: 100%; min-height: 80px; margin-bottom: 10px; } .product-comment-modal .btn-comment, .product-comment-modal .btn-comment-inverse { } .product-comment-modal .required { font-size: 12px; margin-left: 5px; } .product-comment-modal .post-comment-buttons { display: flex; flex-direction: row; justify-content: flex-end; } .product-comment-modal .post-comment-buttons .btn-comment { margin-left: 15px; } #product-comment-posted-modal .post-comment-buttons, #product-comment-post-error .post-comment-buttons, #update-comment-usefulness-post-error .post-comment-buttons { margin-top: 30px; } .modal-header .material-icons { color: #40a85f; font-size: 30px; line-height: 25px; } .modal-header .material-icons.error { color: #a94442; } .modal-header .material-icons.feedback { color: #f39d72; } #post-product-comment-form label { display: block; font-size: 14px; text-align: left; } .col-content-inside .product-comments-additional-info .comments-note span { display: none; } /** * Star component */ .star-content div.star { -webkit-mask: url(../img/rt_star-off.svg) no-repeat 50% 50%; mask: url(../img/rt_star-off.svg) no-repeat 50% 50%; background-color: #cccccc; } .star-content div.star-on, .star-content div.star-hover { -webkit-mask: url(../img/rt_star-on.svg) no-repeat 50% 50%; mask: url(../img/rt_star-on.svg) no-repeat 50% 50%; background-color: #ffd800; } .star-content div.star-on.left-half { mask-size: cover; -webkit-mask-size: cover; mask-position: 0 50%; -webkit-mask-position: 0 50%; } .star-content div.star.right-half { mask-size: cover; -webkit-mask-size: cover; mask-position: 100% 50%; -webkit-mask-position: 100% 50%; } .star-content { margin: 0; display: flex; flex-direction: row; flex-wrap: nowrap; } .star-content div.star, .star-content div.star-on, .star-content div.star-hover { display: block; width: 20px; height: 20px; /* background: url(../img/stars.png) no-repeat 0 0 transparent; */ flex: auto; } .star-content div.star-on, .star-content div.star-hover { background-position: -24px 0; } .small-stars .star-content div.star, .small-stars .star-content div.star-on, .small-stars .star-content div.star-hover { /* background: url(../img/small_stars.png) no-repeat 0 0 transparent; */ width: 16px; height: 16px; } .small-stars .star-content div.star-on, .small-stars .star-content div.star-hover { background-position: -19px 0; } .star-content div.star-hover { cursor: pointer; } .grade-stars { position: relative; height: 20px; min-width: 100px; display: inline-block; } .grade-stars.small-stars { min-width: 80px; } .grade-stars .star-content { position: absolute; top: 3px; left: 0; } .criterion-rating .grade-stars .star-content { top: 0; } #post-product-comment-modal .star-content div.star a { display: block; position: absolute; text-indent: -5000px; } #post-product-comment-modal .criterion-rating { display: flex; flex-direction: row; justify-content: flex-end; } #post-product-comment-modal .criterion-rating label { color: #363a41; font-size: 14px; font-weight: bold; } #post-product-comment-form input.error, #post-product-comment-form textarea.error { background-color: #f2dede; border: solid 1px #ebcccc; } #post-product-comment-form input.valid, #post-product-comment-form textarea.valid { border: solid 1px #d0e9c6; } /** * Product comments list */ #product-comments-list-header { padding: 20px 15px; color: #232323; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; } .reviews-list-title { display: flex; justify-content: center; } .reviews-list-title h3 { font-size: 22px; font-weight: 500; letter-spacing: 0px; text-transform: none; line-height: 26px; text-align: center; position: relative; } .reviews-list-title h3:after { content: ""; position: absolute; left: 0; right: 0; bottom: 50%; margin: 0 auto -26px; transition: all .4s cubic-bezier(.36,.76,0,.88); width: 100%; height: 2px; background-color: #323232; } #product-comments-list-header .comments-nb { padding-left: 0; padding-top: 3px; display: flex; align-items: center; } #product-comments-list-header .comments-nb svg { margin-right:8px; } #product-comments-list .btn-comment { margin: 3rem auto 1.5rem; display: block; } .product-comment-list-item { margin-bottom: 32px; padding: 10px 0 36px; border-bottom: 2px dotted #f2f2f2; } #empty-product-comment { text-align: center; } .product-comment-list-item .grade-stars .star-content { margin: 0 0 10px; } .product-comment-list-item .comment-infos { font-size: 12px; letter-spacing: -0.28px; line-height: 19px; min-height: 100px; } .product-comment-list-item .comment-infos .grade-stars { margin-bottom: 16px; } .product-comment-list-item .comment-content h4 { padding-bottom: 10px; font-weight: 500; } .comment-author { font-weight: 600; font-size: 16px; margin-bottom: 8px; } .comment-date { opacity: .5; } .product-comment-list-item .comment-content .comment-buttons a { font-size: 14px; letter-spacing: -0.28px; line-height: 19px; margin-right: 8px; opacity: 0.15; } .product-comment-list-item .comment-content .comment-buttons a:hover { opacity: 1; } .product-comment-list-item .comment-content .comment-buttons a .material-icons { font-size: 18px; cursor: pointer; } /* ** Quickview style */ .product-quickview-review { display: flex; flex-direction: row; } .product-quickview-review .grade-stars .star-content { margin: 0 0 0 0; top: 0; } /* ** Product list override */ #products .thumbnail-container.has-reviews:hover .highlighted-informations, #products .thumbnail-container.has-reviews:focus .highlighted-informations, .featured-products .thumbnail-container.has-reviews:hover .highlighted-informations, .featured-products .thumbnail-container.has-reviews:focus .highlighted-informations, .product-accessories .thumbnail-container.has-reviews:hover .highlighted-informations, .featured-products .thumbnail-container.has-reviews:focus .highlighted-informations, .product-miniature .thumbnail-container.has-reviews:hover .highlighted-informations, .product-miniature .thumbnail-container.has-reviews:focus .highlighted-informations { height: 4.5rem; } #products .thumbnail-container.has-reviews:hover .highlighted-informations .variant-links, #products .thumbnail-container.has-reviews:focus .highlighted-informations .variant-links, .featured-products .thumbnail-container.has-reviews:hover .highlighted-informations .variant-links, .featured-products .thumbnail-container.has-reviews:focus .highlighted-informations .variant-links, .product-accessories .thumbnail-container.has-reviews:hover .highlighted-informations .variant-links, .featured-products .thumbnail-container.has-reviews:focus .highlighted-informations .variant-links, .product-miniature .thumbnail-container.has-reviews:hover .highlighted-informations .variant-links, .product-miniature .thumbnail-container.has-reviews:focus .highlighted-informations .variant-links { min-height: 3.7rem; } #products .thumbnail-container.has-reviews:hover .highlighted-informations.no-variants, #products .thumbnail-container.has-reviews:focus .highlighted-informations.no-variants, .featured-products .thumbnail-container.has-reviews:hover .highlighted-informations.no-variants, .featured-products .thumbnail-container.has-reviews:focus .highlighted-informations.no-variants, .product-accessories .thumbnail-container.has-reviews:hover .highlighted-informations.no-variants, .featured-products .thumbnail-container.has-reviews:focus .highlighted-informations.no-variants, .product-miniature .thumbnail-container.has-reviews:hover .highlighted-informations.no-variants, .product-miniature .thumbnail-container.has-reviews:focus .highlighted-informations.no-variants { height: 4.125rem; } #products .product-miniature .thumbnail-container.has-reviews .discount-amount.online-only, #products .product-miniature .thumbnail-container.has-reviews .discount-percentage.online-only, #products .product-miniature .thumbnail-container.has-reviews .on-sale.online-only, #products .product-miniature .thumbnail-container.has-reviews .online-only.online-only, #products .product-miniature .thumbnail-container.has-reviews .pack.online-only, #products .product-miniature .thumbnail-container.has-reviews .product-flags .new.online-only, .featured-products .product-miniature .thumbnail-container.has-reviews .discount-amount.online-only, .featured-products .product-miniature .thumbnail-container.has-reviews .discount-percentage.online-only, .featured-products .product-miniature .thumbnail-container.has-reviews .on-sale.online-only, .featured-products .product-miniature .thumbnail-container.has-reviews .online-only.online-only, .featured-products .product-miniature .thumbnail-container.has-reviews .pack.online-only, .featured-products .product-miniature .thumbnail-container.has-reviews .product-flags .new.online-only, .product-accessories .product-miniature .thumbnail-container.has-reviews .discount-amount.online-only, .product-accessories .product-miniature .thumbnail-container.has-reviews .discount-percentage.online-only, .product-accessories .product-miniature .thumbnail-container.has-reviews .on-sale.online-only, .product-accessories .product-miniature .thumbnail-container.has-reviews .online-only.online-only, .product-accessories .product-miniature .thumbnail-container.has-reviews .pack.online-only, .product-accessories .product-miniature .thumbnail-container.has-reviews .product-flags .new.online-only { top: 11.5rem; } .product-list-reviews { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; width: 100%; padding: 4px 0; } .mini .product-list-reviews { padding-top: 0; justify-content: flex-start; margin-left: -2px; margin-top: -3px; } .product-list-reviews .grade-stars .star-content { top: 1px; } .product-list-reviews .comments-nb { margin-left: 5px; font-size: 13px; display: none; } @media (min-width: 768px) { #product-comments-list-footer { position: relative; min-height: 45px; } #product-comments-list-footer .post-product-comment { margin: 0 auto; display: block; } #product-comments-list-pagination { position: absolute; right: 0; top: 5px; } } @media (max-width: 768px) { #product-comments-list-footer { display: flex; flex-direction: row-reverse; flex-wrap: nowrap; justify-content: space-between; } } @media (max-width: 576px) { #product-comments-list-footer { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; } #product-comments-list-pagination { margin-bottom: 10px; } } #product-comments-list-pagination { height: 32px; } #product-comments-list-pagination ul { display: flex; flex-direction: row; flex-wrap: nowrap; } #product-comments-list-pagination ul li span { height: 32px; width: 24px; margin: 0 5px; cursor: pointer; display: block; text-align: center; font-size: 20px; line-height: 32px; color: #6b868f; } #product-comments-list-pagination ul li.active span, #product-comments-list-pagination ul li span.next i, #product-comments-list-pagination ul li span.prev i { font-weight: bold; } #product-comments-list-pagination ul li.disabled span { opacity: 0.3; cursor: not-allowed; } #product-comments-list-pagination ul li.active span { cursor: not-allowed; } .comments_note { margin: 12px 0 0; } /* pop-in add grade/advice ********************************************************************* */ #fancybox-wrap { width: 585px } #fancybox-content { width: 585px; border-width: 0 } #new_comment_form { width: 585px; padding:10px 22px; color: #333; text-align: left; background-color: #ffffff; } #new_comment_form .title { padding: 22px 10px; font-size: 22px; text-transform: uppercase; text-align: center; } #new_comment_form ul.grade_content { list-style-type: none } #new_comment_form .grade_content li { width: 50% } #new_comment_form .product { padding: 15px } #new_comment_form .product img { float: left; border: 1px solid #ccc; } #new_comment_form .product .product_desc { float: left; margin-left: 0; line-height: 18px; color: #666 } #new_comment_form .product .product_desc p { font-size:14px; line-height: 20px; } #new_comment_form .product .product_desc .product_name { padding-bottom: 10px; font-size: 20px; } #new_comment_form .grade_content { margin: 0 0 20px 0 } #new_comment_form .grade_content span, #new_comment_form .grade_content span { display: inline-block; padding: 0 10px; width: 150px; /* 160 */ font-weight: bold } #new_comment_form .grade_content .cancel { margin-right: 5px } .new_comment_form_content { padding: 15px; background: none; } .new_comment_form_content .intro_form { padding-bottom: 10px; font-size: 12px } #new_comment_form label { display: block; margin: 12px 0 4px 0; font-size: 14px; text-align: left; } #new_comment_form .required { font-size:12px; } #new_comment_form input { width: 100%; } #new_comment_form textarea { height: 80px; width: 100%; } #new_comment_form .submit { margin-top: 20px; padding: 0; font-size: 13px; text-align: right } #new_comment_form #criterions_list { list-style-type: none; margin-bottom: 40px; } #new_comment_form #criterions_list li { margin-bottom: 10px; display: flex; align-items: center; } #new_comment_form #criterions_list label { display: inline; float: left; margin: 0 10px 0 0; font-size:15px; font-weight: 500; } .col-content-inside .comments_note { width:auto; margin:1rem 0 2rem; } .col-content-inside .comments_note .star_content { display: flex; align-items: center; } .col-content-inside .comments_note .star_content div.star { width: 20px; height: 20px; } .col-content-inside .comments_note .star_content .nb-comments { margin-left:14px; margin-top: 2px; font-size: 13px; line-height: 13px; } .comments_note div.star, #productCommentsBlock div.star { display: inline-block; float: left; width: 16px; height: 16px; } .star_content div.star, .comments_note div.star, #productCommentsBlock div.star, #new_comment_form div.star { -webkit-mask: url(img/rt_star-off.svg) no-repeat 50% 50%; mask: url(img/rt_star-off.svg) no-repeat 50% 50%; } .star_content div.star.star_on, .star_content div.star_hover, .comments_note div.star.star_on, #productCommentsBlock div.star_hover, #productCommentsBlock div.star.star_on, #new_comment_form div.star_hover, #new_comment_form div.star_on { -webkit-mask: url(img/rt_star-on.svg) no-repeat 50% 50%; mask: url(img/rt_star-on.svg) no-repeat 50% 50%; } #new_comment_form div.star { display: inline-block; float: left; width: 20px; height: 20px; cursor: pointer; } #new_comment_form_footer { margin-top: 20px; font-size: 12px; } #new_comment_form div.star a, #productCommentsBlock .star a { display: none; } /* TAB COMMENTS ******************************************************************************** */ #product_comments_block_tab { margin: 40px 0 20px 0 } #product_comments_block_tab div.comment { margin: 0 0 32px 0; padding: 10px 0 32px; border-bottom: 2px dotted; } #product_comments_block_tab div.comment div.comment_author { float: left; padding-right: 30px; width: 200px; line-height: 18px } #product_comments_block_tab .comment_author span { margin-top: 6px; } #product_comments_block_tab div.comment div.comment_author span { font-weight: bold; } #product_comments_block_tab div.comment div.comment_author span, #product_comments_block_tab div.comment .star_content { float: left; } #product_comments_block_tab div.comment .star_content { margin: 0; } #product_comments_block_tab .comment_author_infos { clear: both; padding-top: 20px; } #product_comments_block_tab .comment_author_infos em { font-style: normal; margin-top:10px; display: inline-block; font-size: 13px; opacity: 0.5; } #product_comments_block_tab div.comment div.comment_details { float: left; overflow: hidden; width:calc(100% - 200px); padding-top:2px; } #product_comments_block_tab div.comment_details .title_block, #product_comments_block_tab div.comment_details h4 { padding-bottom: 10px; font-weight: 500; } #product_comments_block_tab div.comment_details p { padding-bottom: 10px } #product_comments_block_tab div.comment_details ul { list-style-type: none; margin: 0; opacity: 0.2; display: flex; float:right; align-items: center; -webkit-transition: all .22s cubic-bezier(.07,.74,.56,.89); transition: all .22s cubic-bezier(.07,.74,.56,.89); } #product_comments_block_tab div.comment:hover div.comment_details ul { opacity: 1; } #product_comments_block_tab div.comment_details li { padding: 2px 0 2px 12px; } #product_comments_block_tab a { text-decoration: none; } #product_comments_block_tab a:hover { text-decoration: underline } #product_comments_block_tab button.usefulness_btn { cursor: pointer; margin: 0; display: inline-block; padding: 4px 12px; border: 2px solid #f2f2f2; border-radius: 3px; font-weight: 500; background: none; } #product_comments_block_tab button.usefulness_btn:first-of-type { margin-left:12px; } #product_comments_block_tab .comment_details ul li:nth-of-type(2){ display: none; } #product_comments_block_tab button.usefulness_btn:hover { background-position: left -50px } #product_comments_block_tab button.usefulness_btn:active { background-position: left -100px } #product_comments_block_tab span.report_btn { cursor: pointer; display: none; } #product_comments_block_tab span.report_btn:hover { text-decoration: underline } .fl { float: left; } .fr { float: right; } .fr > a { margin-left: 10px; } #productCommentsBlock .newcom { text-align: center; } #productCommentsBlock .open-comment-form.btn { margin:0 auto 20px; padding-left: 70px; padding-right: 70px; } #newCommentForm { display: none; background: #FFF; } #product_comments_block_tab .comment_details ul li { font-size: 12px; float:right; } #new_comment_form #content { width: 100% !important; max-width: 100% !important; } #new_comment_form_ok { overflow: hidden; clear: both; } @media (max-width:991px) { #product_comments_block_tab div.comment_details ul { display: none; } #new_comment_form { width:auto; } } @media (max-width:479px) { #product_comments_block_tab div.comment div.comment_details { width:100%; display:block; } }