/* RATING - Form */ .rating-form { margin-top: 40px; } /* RATING - Form - Group */ .rating-form .form-group { position: relative; border: 0; } /* RATING - Form - Legend */ .rating-form .form-legend { display: none; margin: 0; padding: 0; font-size: 20px; font-size: 2rem; /*background: green;*/ } /* RATING - Form - Item */ .rating-form .form-item { position: relative; margin: auto; width: 100%; text-align: center; direction: rtl; /*background: green;*/ } .rating-form .form-legend + .form-item { padding-top: 10px; } .rating-form input[type='radio'] { position: absolute; left: -9999px; } /* RATING - Form - Label */ .rating-form label { display: inline-block; cursor: pointer; } .rating-form .rating-star { display: inline-block; position: relative; } .rating-form input[type='radio'] + label:before { content: attr(data-value); position: absolute; right: 30px; top: 83px; font-size: 30px; font-size: 3rem; opacity: 0; direction: ltr; -webkit-transition: all 0s ease 0s; -moz-transition: all 0s ease 0s; -o-transition: all 0s ease 0s; transition: all 0s ease 0s; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; display: none; } .rating-form input[type='radio']:checked + label:before { right: 25px; opacity: 1; } .rating-form input[type='radio'] + label:after { content: "/ 5"; position: absolute; right: 5px; top: 96px; font-size: 16px; font-size: 1.6rem; opacity: 0; direction: ltr; -webkit-transition: all 0s ease 0s; -moz-transition: all 0s ease 0s; -o-transition: all 0s ease 0s; transition: all 0s ease 0s; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; display: none; } .rating-form input[type='radio']:checked + label:after { /*right: 5px;*/ opacity: 1; } .rating-form label .fa { font-size: 2.3rem; line-height: 60px; -webkit-transition: all 0s ease 0s; -moz-transition: all 0s ease 0s; -o-transition: all 0s ease 0s; transition: all 0s ease 0s; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .rating-form label:hover .fa-star-o, .rating-form label:focus .fa-star-o, .rating-form label:hover ~ label .fa-star-o, .rating-form label:focus ~ label .fa-star-o, .rating-form input[type='radio']:checked ~ label .fa-star-o { opacity: 0; } .rating-form label .fa-star { position: absolute; left: 0; top: 0; opacity: 0; } .rating-form label:hover .fa-star, .rating-form label:focus .fa-star, .rating-form label:hover ~ label .fa-star, .rating-form label:focus ~ label .fa-star, .rating-form input[type='radio']:checked ~ label .fa-star { opacity: 1; } .rating-form input[type='radio']:checked ~ label .fa-star { color: gold; } .rating-form .ir { position: absolute; left: -9999px; } /* RATING - Form - Action */ .rating-form .form-action { opacity: 0; position: absolute; left: 5px; bottom: -40px; -webkit-transition: all 0s ease 0s; -moz-transition: all 0s ease 0s; -o-transition: all 0s ease 0s; transition: all 0s ease 0s; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .rating-form input[type='radio']:checked ~ .form-action { cursor: pointer; opacity: 1; } .rating-form .btn-reset { display: inline-block; margin: 0; padding: 4px 10px; border: 0; font-size: 10px; font-size: 1rem; background: #fff; color: #333; cursor: auto; border-radius: 5px; outline: 0; -webkit-transition: all 0s ease 0s; -moz-transition: all 0s ease 0s; -o-transition: all 0s ease 0s; transition: all 0s ease 0s; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .rating-form .btn-reset:hover, .rating-form .btn-reset:focus { background: gold; } .rating-form input[type='radio']:checked ~ .form-action .btn-reset { cursor: pointer; } /* RATING - Form - Output */ .rating-form .form-output { display: none; position: absolute; right: 15px; bottom: -45px; font-size: 30px; font-size: 3rem; opacity: 0; -webkit-transition: all 0s ease 0s; -moz-transition: all 0s ease 0s; -o-transition: all 0s ease 0s; transition: all 0s ease 0s; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .no-js .rating-form .form-output { right: 5px; opacity: 1; } .rating-form input[type='radio']:checked ~ .form-output { right: 5px; opacity: 1; } body { color: #030100; } .t_yellow-3 { color: gold; } .pagination li { background-color: rgba(0,0,0,.3); padding: 3px 10px; border-radius: 4px; box-shadow: 0 3px 3px 1px #363535; margin-bottom: 30px; } .pagination li:hover { background-color: rgba(0,0,0,.4); padding: 3px 10px; border-radius: 4px; box-shadow: 0 4px 2px 1px #363535; } .pagination li a { color: #fff; }