Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /* ---------------------------------- */
- /* Message Vendor
- ------------------------------------- */
- .message-vendor .fa-envelope-o {
- font-size: 20px;
- line-height: 0;
- top: -1px;
- position: relative;
- }
- .message-vendor textarea,
- .message-vendor textarea:focus,
- .message-vendor input:focus,
- .message-vendor select,
- .message-vendor select:focus,
- .message-vendor input {
- border: none;
- border-radius: 5px;
- box-shadow: 0 1px 6px 0px rgba(0, 0, 0, 0.1);
- font-size: 15px;
- font-weight: 600;
- height: auto;
- padding: 10px 16px;
- line-height: 30px;
- margin: 0 0 15px 0 !important;
- position: relative;
- background-color: #fff;
- text-align: left;
- color: #888;
- transition: color 0.3s !important;
- }
- .message-vendor select,
- .message-vendor select:focus {
- height: 48px;
- }
- /* Prefered Contat Method */
- .preferred-contact-method {
- display: block;
- margin: 12px 0;
- }
- .preferred-contact-method h5 {
- font-size: 14px;
- color: #777;
- font-weight: 600;
- text-align: center;
- display: block;
- margin: 0;
- padding: 0;
- margin-bottom: 5px;
- }
- .preferred-contact-radios {
- display: block;
- text-align: center;
- align-items: center;
- }
- .preferred-contact-radios .radio {
- display: inline-block;
- }
- .preferred-contact-radios .radio label {
- display: inline-block;
- padding-left: 24px;
- line-height: 23px;
- margin-right: 15px;
- }
- .preferred-contact-radios .radio:last-child label {
- margin-right: 0;
- }
- #add-review input:focus,
- #add-review textarea:focus,
- #add-review select:focus,
- #add-review input,
- #add-review textarea,
- #add-review select {
- border: none;
- box-shadow: 0 1px 4px rgba(0,0,0,0.12);
- }
- /* Captcha Holder */
- .captcha-holder {
- max-height: 0;
- height: 0;
- opacity: 0;
- visibility: hidden;
- transition: 0.5s;
- display: block;
- }
- .captcha-holder.visible {
- max-height: 200px;
- height: auto;
- opacity: 1;
- visibility: visible;
- }
- .captcha-holder .g-recaptcha {
- margin: 5px 0 15px 0;
- }
- @media (min-width: 1366px) {
- .captcha-holder .g-recaptcha {
- text-align: center;
- }
- .captcha-holder .g-recaptcha div {
- width: auto !important;
- }
- }
- @media (min-width: 1240px) and (max-width: 1366px) {
- .g-recaptcha {
- transform: scale(0.89);
- transform-origin: 0 0;
- }
- }
- @media (min-width: 992px) and (max-width: 1240px) {
- .g-recaptcha {
- transform: scale(0.76);
- transform-origin: 0 0;
- }
- }
- /* Radio Button
- ------------------------------------- */
- .radio {
- display: inline-block;
- vertical-align: top;
- }
- .radio label {
- margin: 3px 0;
- cursor: pointer;
- position: relative;
- padding-left: 29px;
- line-height: 25px;
- }
- .radio input[type="radio"] {
- position: absolute;
- opacity: 0;
- }
- .radio input[type="radio"] + label .radio-label {
- content: '';
- background: #fff;
- border-radius: 100%;
- border: 2px solid #b4b4b4;
- display: inline-block;
- width: 18px;
- height: 18px;
- position: relative;
- margin-right: 5px;
- vertical-align: top;
- cursor: pointer;
- text-align: center;
- transition: all 250ms ease;
- background-color: #fff;
- box-shadow: inset 0 0 0 8px #fff;
- z-index: 100;
- position: absolute;
- top: 2px;
- left: 0;
- }
- .radio input[type="radio"] + label .radio-label:after {
- background-color: #f91942;
- content: "";
- top: 3px;
- left: 0;
- right: 0;
- margin: 0 auto;
- position: absolute;
- opacity: 1;
- transition: 0.3s;
- border-radius: 50%;
- transform: scale(0);
- position: absolute;
- top: 0;
- left: 0;
- box-sizing: border-box;
- width: 100%;
- height: 100%;
- z-index: 99;
- }
- .radio input[type="radio"]:checked + label .radio-label {
- background-color: #f91942;
- border-color: #f91942;
- box-shadow: inset 0 0 0 3px #fff;
- }
- .radio-label:before {
- content: "";
- position: absolute;
- top: 0;
- left: 0;
- height: 100%;
- width: 100%;
- border-radius: 50%;
- background-color: transparent;
- display: block
- }
- .interactive-effect label .radio-label:before {
- animation: radius-shadow 0.4s;
- }
- @keyframes radius-shadow {
- 0% { box-shadow: 0 0 0 0 rgba(102,103,107,0.4); }
- 100% { box-shadow: 0 0 0 10px rgba(0,0,0,0); }
- }
- .small-label {
- border-radius: 4px;
- display: inline-block;
- background: #e0f5d7;
- color: #449626;
- padding: 0 8px;
- line-height: 27px;
- height: 26px;
- margin-left: 5px;
- position: relative;
- top: -1px;
- }
- /* ---------------------------------- */
- /* Reviews Overview
- ------------------------------------- */
- .rating-bars-rating {
- display: inline-block;
- vertical-align: baseline;
- background: #efefef;
- width: 100%;
- height: 6px;
- margin-right: 10px;
- border-radius: 3px;
- overflow: hidden;
- background-color: #eee;
- align-self: center;
- }
- .rating-bars-rating-inner {
- height: 6px;
- display: block;
- background-color: #eee;
- position: relative;
- width: 0;
- transition: width 0.5s;
- }
- .rating-bars-rating.low .rating-bars-rating-inner { background-color: #ee3535; }
- .rating-bars-rating.mid .rating-bars-rating-inner { background-color: #c0c52a; }
- .rating-bars-rating.high .rating-bars-rating-inner { background-color: #64bc36; }
- .rating-bars-item {
- margin: 10px 15px;
- width: calc(50% - 30px);
- justify-content: flex-end;
- align-items: flex-start;
- display: flex;
- flex-direction: column;
- }
- .rating-bars-name {
- font-weight: 600;
- color: #333;
- display: block;
- font-size: 14px;
- line-height: 22px;
- }
- .rating-bars-item strong {
- color: #777;
- font-size: 12px;
- font-weight: 600;
- align-self: center;
- background: #f4f4f4;
- border-radius: 50px;
- width: 46px;
- height: 22px;
- text-align: center;
- line-height: 21px;
- font-family: "Open Sans";
- }
- .rating-overview {
- display: flex;
- margin: 35px 0 25px 0;
- background: #fff;
- border-radius: 4px;
- padding: 30px;
- padding-right: 20px;
- border: 1px solid #e8e8e8;
- }
- .rating-overview-box {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- flex-shrink: 0;
- border: navajowhite;
- width: 135px;
- margin-right: 20px;
- text-align: center;
- border-radius: 0;
- border-right: 1px solid #e8e8e8;
- padding-right: 27px;
- }
- .rating-overview-box-total {
- font-size: 44px;
- font-weight: 400;
- line-height: 1em;
- display: block;
- color: #333;
- }
- .rating-overview-box-percent {
- font-size: 15px;
- margin-bottom: 0;
- color: #888;
- display: block;
- }
- .rating-overview-box .star-rating{
- font-size: 16px;
- margin: 0;
- display: block;
- letter-spacing: -0.5px;
- }
- .rating-bars {
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- flex-basis: 100%;
- margin: 0;
- padding: 0;
- margin-top: 0;
- align-items: center;
- }
- .rating-bars-inner {
- display: flex;
- width: 100%;
- }
- /* Media Queries */
- @media (max-width: 1366px) {
- .rating-bars-item {
- width: calc(50% - 30px);
- }
- }
- @media (max-width: 768px) {
- .rating-bars-item {
- width: 100%;
- margin: 5px 0;
- }
- .rating-overview {
- width: 100%;
- display: block;
- padding: 20px 25px;
- }
- .rating-overview-box {
- border-right: none;
- border-bottom: 1px solid #e8e8e8;
- width: 100%;
- margin-bottom: 20px;
- padding-bottom: 25px;
- padding-right: 0;
- margin-right: 0;
- }
- }
- /* Add Sub Ratings
- ------------------------------------- */
- .sub-ratings-container {
- margin: 25px 0 30px 0;
- display: block;
- border: 1px solid #e6e6e6;
- background-color: transparent;
- padding: 18px 30px;
- border-radius: 4px;
- display: flex;
- flex-wrap: wrap;
- border-left: 0;
- border-right: 0;
- border-radius: 0;
- padding: 20px 0;
- border-radius: 0;
- }
- .add-sub-rating {
- display: inline-block;
- margin: 7px 0;
- width: 50%;
- }
- @media (min-width: 1367px) {
- .add-sub-rating { width: 25%; }
- }
- @media (max-width: 768px) {
- .add-sub-rating { width: 100%; }
- }
- .sub-rating-title {
- font-weight: 600;
- font-size: 14px;
- color: #444;
- display: block;
- margin: 0 0 4px 0;
- }
- /* Sub Ratings Stars */
- .sub-ratings-container .leave-rating label {
- position: relative;
- font-size: 21px;
- letter-spacing: 3.5px;
- }
- .sub-ratings-container .leave-rating label:before {
- content: "\f006";
- color: #ffc600;
- }
- .sub-ratings-container .leave-rating input[type="radio"]:hover ~ label:before,
- .sub-ratings-container .leave-rating input[type="radio"]:checked ~ label:before {
- content: "\f006";
- }
- .sub-ratings-container .leave-rating input[type="radio"] ~ label:after {
- content: "\f005";
- position: absolute;
- left: 0;
- color: #ffc600;
- opacity: 0;
- transition: 0.2s;
- }
- .sub-ratings-container .leave-rating input[type="radio"]:hover ~ label:after,
- .sub-ratings-container .leave-rating input[type="radio"]:checked ~ label:after {
- opacity: 1;
- }
- .rating-bars i.tip,
- .sub-ratings-container i.tip {
- background: #eaeaea;
- color: #888;
- height: 17px;
- width: 17px;
- display: inline-block;
- font-size: 11px;
- }
- .rating-bars i .tip-content,
- .sub-ratings-container i .tip-content {
- min-width: 220px;
- max-width: 220px;
- }
- .rating-bars i.tip:after,
- .sub-ratings-container i.tip:after {
- line-height: 18px;
- }
- /* Verified Review Badge */
- .comment-by .tip {
- background: #19b453;
- position: relative;
- cursor: help;
- }
- .comment-by .tip:after {
- color: #fff;
- content: "\f00c";
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement