File: assets/css/rating.css

@charset "UTF-8";
/*
 You may not change or alter any portion of this comment or credits
 of supporting developers from this source code or any supporting source code
 which is considered copyrighted (c) material of the original comment or credit authors.

 This program is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
*/

/**
 * blog module for xoops
 *
 * @copyright      module for xoops
 * @license        GPL 2.0 or later
 * @package        blog
 * @since          1.0
 * @min_xoops      2.5.9
 * @author         Wedega - Email:<webmaster@wedega.com> - Website:<https://wedega.com>
 * @version        $Id: 1.0 style.css 1 Mon 2018-03-19 10:04:56Z XOOPS Project (www.xoops.org) $
 */

.blog_ratingblock {
    margin:20px 0;
}

/* star rating */
.blog_unit-rating {
    width: 125px;
	list-style: none;
    height: 25px;
    position: relative;
    background: url(../images/starrating.png) top left repeat-x;
    margin: 0;
    padding: 0;
}
.blog_unit-rating-10 {
    width: 250px;
	list-style: none;
    height: 25px;
    position: relative;
    background: url(../images/starrating.png) top left repeat-x;
    margin: 0;
    padding: 0;
}
.blog_unit-rating div, .blog_unit-rating-10 div {
    text-indent: -90000px;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.blog_unit-rating div a, .blog_unit-rating-10 div a {
    outline: none;
    display: block;
    width: 25px;
    height: 25px;
    text-decoration: none;
    text-indent: -9000px;
    overflow: hidden;
    z-index: 20;
    position: absolute;
    padding: 0;
}
.blog_unit-rating div a:hover, .blog_unit-rating-10 div a:hover {
    background: url(../images/starrating.png) left bottom;
    z-index: 2;
    left: 0;
}
.blog_unit-rating div.blog_current-rating, .blog_unit-rating-10 div.blog_current-rating {
    background: url(../images/starrating.png) left center;
    position: absolute;
    height: 25px;
    display: block;
    text-indent: -9000px;
    z-index: 1;
    overflow: hidden;
}
.blog_unit-rating a.blog_r1-unit {left: 0;}
.blog_unit-rating a.blog_r1-unit:hover {width: 25px;}
.blog_unit-rating a.blog_r2-unit {left: 25px;}
.blog_unit-rating a.blog_r2-unit:hover {width: 50px;}
.blog_unit-rating a.blog_r3-unit {left: 50px;}
.blog_unit-rating a.blog_r3-unit:hover {width: 75px;}
.blog_unit-rating a.blog_r4-unit {left: 75px;}
.blog_unit-rating a.blog_r4-unit:hover {width: 100px;}
.blog_unit-rating a.blog_r5-unit {left: 100px;}
.blog_unit-rating a.blog_r5-unit:hover {width: 125px;}

.blog_unit-rating-10 a.blog_r1-unit {left: 0;}
.blog_unit-rating-10 a.blog_r1-unit:hover {width: 25px;}
.blog_unit-rating-10 a.blog_r2-unit {left: 25px;}
.blog_unit-rating-10 a.blog_r2-unit:hover {width: 50px;}
.blog_unit-rating-10 a.blog_r3-unit {left: 50px;}
.blog_unit-rating-10 a.blog_r3-unit:hover {width: 75px;}
.blog_unit-rating-10 a.blog_r4-unit {left: 75px;}
.blog_unit-rating-10 a.blog_r4-unit:hover {width: 100px;}
.blog_unit-rating-10 a.blog_r5-unit {left: 100px;}
.blog_unit-rating-10 a.blog_r5-unit:hover {width: 125px;}
.blog_unit-rating-10 a.blog_r6-unit {left: 125px;}
.blog_unit-rating-10 a.blog_r6-unit:hover {width: 150px;}
.blog_unit-rating-10 a.blog_r7-unit {left: 150px;}
.blog_unit-rating-10 a.blog_r7-unit:hover {width: 175px;}
.blog_unit-rating-10 a.blog_r8-unit {left: 175px;}
.blog_unit-rating-10 a.blog_r8-unit:hover {width: 200px;}
.blog_unit-rating-10 a.blog_r9-unit {left: 200px;}
.blog_unit-rating-10 a.blog_r9-unit:hover {width: 225px;}
.blog_unit-rating-10 a.blog_r10-unit {left: 225px;}
.blog_unit-rating-10 a.blog_r10-unit:hover {width: 250px;}

/* rating with likes */
.blog-rate-dislike {
    padding-left:20px;
}

/* rating with reaction */
.blog-rate-reaction {
    padding-left:20px;
    line-height:30px;
    width: 25px;
    height: 25px;
}

/* numeric rfating */
.blog_unit-rating-10numeric {
    margin:10px 0;
    line-height:30px;
}
.blog-rater-numeric {
    border:1px solid #ccc;
    border-radius:5px;
    padding:5px 7px;
    margin:0px;
    background-color:#ffffff;
}
.blog-rater-numeric:hover {
    background-color:#337ab7;
    color:#ffffff;
}
.blog-rater-numeric-active {
    border:1px solid #d43f3a;
     background-color:#eea236;
}