.reviews-page { background: url(../img/reviews-background.svg) center top no-repeat; } .reviews-page h1 { font-size: 3rem; margin-bottom: .5rem; font-weight: 500; line-height: 1.2; color: inherit; } .reviews-head { padding-top: 3rem; padding-bottom: 3rem; text-align: center; } .reviews-head p { color: #656565; margin-bottom: 1.5rem; font-size: 1.125rem; font-weight: inherit; line-height: 1.2; } .comment-item { position: relative; margin-bottom: 1rem; padding-bottom: 1.2rem; border-bottom: 1px solid #efefef; } .comment-title { font-size: 1.3rem; font-weight: 500; color: #333; margin-bottom: 0; } .comment-message { padding: 20px 0; width: 88%; } .comment-star { display: flex; } .comment-data { color: #ababab; font-size: 14px; } .comment-star .rating { width: auto; margin-top: -6px; } .panel { margin-bottom: 20px; background-color: #f5f5f5; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05); box-shadow: 0 1px 1px rgba(0, 0, 0, .05); } .panel-body { padding: 30px; } .panel-body h2 { margin-bottom: 30px; text-align: center; padding-top: 15px; } .form-horizontal .control-label { padding-top: 7px; margin-bottom: 0; text-align: right; } .reviews { padding: 10px 0px 80px 0px; } .reviews h1 { font-size: 28px; margin-top: 0px; } .reviews-head { padding: 20px 0px 40px 0px; border-bottom: 1px dotted #cecece; } .reviews-content { padding: 40px 0px; } .reviews-head .rating-warp { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-top: 14px; } .reviews-head .rating-num { margin-left: 24px; margin-top: 4px; font-size: 1.125rem; line-height: 1.2; } .comment-user { float: left; width: 13%; padding: 10px 0px; text-align: center; } .comment-name { font-weight: bold; } .comment-data { line-height: 20px; font-size: 12px; color: #b4bbc5; } .comment-content { position: relative; float: left; width: 67%; margin-left: 20px; padding: 1em 1.4em; font-size: 15px; color: #444444; line-height: 24px; z-index: 999; background-color: #f6f8f3; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3); -moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3); } .comment-content:before, .comment-content:after { content: ''; width: 0; height: 0; position: absolute; display: block; } .comment-content:before { top: 22px; bottom: auto; left: -16px; border-style: solid; border-width: 8px 16px 14px 0; border-color: transparent #f6f8f3; } .comment-content:after { top: 22px; bottom: auto; left: -16px; border-style: solid; border-width: 8px 16px 0px 0; border-color: transparent #f6f8f3; } .comment-form .control-label { font-weight: normal; } .rating ul { float: left; width: 120px; list-style: none; padding: 10px 0 0; margin: 0; } .rating ul li { float: left; width: 16px; height: 16px; margin-right: 2px; cursor: pointer; } .rating ul li.on, .rating ul li.hover { background: url("../img/icon-star-small.png") 0px 0px no-repeat; } .rating ul li, .rating ul li.nohover { background: url("../img/icon-star-small-gary.png") 0px 0px no-repeat; } .rating .tips { float: left; padding-top: 8px; font-size: 15px; } .reviews-head .review-show { border: solid 1px #e5e5e5; padding: 7px 15px; border-radius: 5px; float: left; margin-right: 10px; } .review-show .stars, .review-show .stars-half, .review-show .stars-gary { display: inline-block; width: 25px; height: 25px; vertical-align: middle; text-indent: -9999px; } .btn-reviews { padding: 8px 24px; font-size: 1rem; border-radius: 3px; } .reviews-head .btn-add-review { padding-top: 7px; padding-bottom: 7px; font-size: 18px; border-radius: 35px; } .like { position: absolute; right: 5px; top: 14px; width: 36px; height: 66px; text-align: center; font-size: 16px; font-weight: 700; background-position: center 28px; background-repeat: no-repeat; cursor: pointer; } .like::after { content: ''; display: block; width: 100%; height: 36px; background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MiA0MiIgd2lkdGg9IjQyIiBoZWlnaHQ9IjQyIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5zdDB7ZmlsbDojQ0NDQ0NDfS5zdDF7ZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7ZmlsbDojRkZGRkZGfTwvc3R5bGU+PGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iMjEiIGN5PSIyMSIgcj0iMjEiLz48cGF0aCBjbGFzcz0ic3QxIiBkPSJNMzAuMiAyNGMxLjEuMSAxLjMtMSAxLjItMi0uMS0xLjItLjctMS44LTEuNy0xLjUuNi0uNSAxLjQtMS4yLjYtMi43LS43LTEuMy0zLjItLjctNC0uNmgtMi40cy0uMS0uNi4yLTEuNGMuMy0uOC43LTEuOC44LTMuMy4zLTMtMS41LTMuOC0yLjMtMy45LS43LS4yLTEuMi43LTEuMiAxdjEuOXMtMS41IDMuOS0yLjYgNC45Yy0xLjUgMS40LTEuNSAyLjYtMi4yIDRsLS42LjktNS42LjZjLjEgMi4yLjYgNC40IDEuNiA2LjQuOSAyIDMuNSA0LjIgMy42IDQuMi4xIDAgLjQtLjEgMS41LS40LjktLjIgMS0uMiAxLjgtLjMgMCAwIDAtLjEtLjEtLjFIMjBjMS45LjEgNy41IDEgOS41LTEgMS43LTEuNyAxLTIuOCAwLTMgLjQgMCAxLjYtLjEgMS44LTEuNS4yLTEuNC0uMy0yLjItMS4xLTIuMnoiLz48L3N2Zz4=) no-repeat; background-size: 36px; } .like.disabled { pointer-events: none; } .form-horizontal .row .tips-b { color: #e83b45; font-size: 12px; display: inline-block; padding-right: 5px; } .form-horizontal .row { margin-bottom: 15px; } .rating-sml { margin-top: 10px; } #msg, .error { color: red; } @media (max-width: 769px) { .reviews-head { padding-top: 80px; } .reviews-page h1 { font-size: 2rem; } .panel-body h2 { font-size: 1.8rem; } .form-horizontal .control-label { text-align: left; } .number-of-post ul { padding-left: 0; } .reviews-head .rating-num { font-size: 1rem; } .comment-star .rating-sml .rating-stars i { width: 16px; background-size: 12px auto; } .number-of-post li a { margin-right: 0; } }