自訂評分模版：評分佔比條版式

Sentiment Bar base

/* Sentiment Bar */
.neutralbar {
    display: inline-block;
    position: relative;
    text-align: center;
    height: 16px;
    margin: 0;
}
.downbar-base {
    display: inline-block;
    float:right;
    position: relative;
    height: 16px;
}
.downbar-text {
    display: inline-block;
    position: absolute;
    text-align: right;
    direction: rtl;
    height: 16px;
    padding: 0 2px;
    box-sizing: border-box;
}
.upbar {
    display: inline-block;
    position: relative;
    float: left;
    text-align: left;
    height: 16px;
    padding: 0 2px;
    box-sizing: border-box;
}
.allup .downbar-text {
    display:none;
}
.alldown .upbar {
    display:none;
}
 
/* Sentiment Bar Themes */
.greengrayred .neutralbar {
    background-color: #a0a0a0;
}
.greengrayred .downbar-base {
    background-color: #e83a3a;
}
.greengrayred .downbar-text {
    color: #ffffff;
}
.greengrayred .upbar {
    background-color: #3ae845;
    color: #000000;
}
.ytp-like .neutralbar,
.ytp-like .downbar-base {
    background-color: #ccc;
}
.ytp-like .downbar-text {
    color: #000000;
}
.ytp-like .upbar {
    background-color: #167ac6;
    color: #ffffff;
}
.purplegrayyellow .neutralbar {
    background-color: #ccc;
    color: #000;
}
.purplegrayyellow .downbar-base {
    background-color: #fcdc3f;
}
.purplegrayyellow .downbar-text {
    color: #000;
}
.purplegrayyellow .upbar {
    background-color: #8a5cbc;
    color: #fff;
}
.pinkgrayblue .neutralbar {
    background-color: #ccc;
    color: #000;
}
.pinkgrayblue .downbar-base {
    background-color: #369ae6;
}
.pinkgrayblue .downbar-text {
    color: #fff;
}
.pinkgrayblue .upbar {
    background-color: #ff86ec;
    color: #fff;
}
.redgrayblack .neutralbar {
    background-color: #ccc;
    color: #000;
}
.redgrayblack .downbar-base {
    background-color: #000;
}
.redgrayblack .downbar-text {
    color: #fff;
}
.redgrayblack .upbar {
    background-color: #ff0000;
    color: #fff;
}
.bluegrayred .neutralbar {
    background-color: #ccc;
    color: #000;
}
.bluegrayred .downbar-base {
    background-color: #ee1111;
}
.bluegrayred .downbar-text {
    color: #fff;
}
.bluegrayred .upbar {
    background-color: #369ae6;
    color: #fff;
}
.prusti .neutralbar {
    background-color: #ccc;
    color: #000;
}
.prusti .downbar-base {
    background-color: #dcdbd6;
}
.prusti .downbar-text {
    color: #000;
}
.prusti .upbar {
    background-color: #003153;
    color: #fff;
}
/* Theme for Black Highlighter only*/
.default .neutralbar {
    background-color: #a0a0a0;
}
.default .downbar-base {
    background-color: rgba(var(--rating-module-button-negative-color),.8);
}
.default .downbar-text {
    color: #ffffff;
}
.default .upbar {
    background-color: rgba(var(--rating-module-button-plus-color),.8);
    color: #000000;
}

For Sigma-9

.rate-box-with-sentiment-bar {
    display: block;
    height:16px;
    transition: all 1s;
    cursor: pointer;
    top: -4px;
}
.rate-box-with-sentiment-bar .page-rate-widget-box {
    box-shadow: none;
    position: relative;
    z-index:2;
}
.rate-box-with-sentiment-bar .page-rate-widget-box .rate-points {
    transition: all 1s;
}
.rate-box-with-sentiment-bar:hover .page-rate-widget-box .rate-points {
    border-radius: 0;
}
 
.right-align { text-align:right; }
 
.rate-box-with-sentiment-bar:hover {
    transition: all 1s;
}
 
.rate-box-with-sentiment-bar .sentiment-bar {
    display:inline-block;
    position: relative;
    z-index: 1;
    opacity:0;
    width:0;
    margin-right: -4px;
    border-radius: 5px 0 0 5px;
    transition: all 2s;
    white-space: nowrap;
}
 
.rate-box-with-sentiment-bar .sentiment-bar .neutralbar {
    border-radius: 5px 0 0 5px;
    border: solid 1px #633;
    background-color: #633 !important;
    color: #fff !important;
    left: 0;
    top: 4px;
}
.rate-box-with-sentiment-bar .sentiment-bar .upbar {
    border-radius: 5px 0 0 5px;
}
.rate-box-with-sentiment-bar .sentiment-bar .downbar-base {
    border-radius: 0;
}
.rate-box-with-sentiment-bar .sentiment-bar .downbar-text {
    transition: all 0.3s !important;
}
 
.rate-box-with-sentiment-bar .sentiment-bar .alldown .upbar {
    border-radius: 0;
    padding: 0;
}
.rate-box-with-sentiment-bar .sentiment-bar .alldown .downbar-base {
    border-radius: 5px 0 0 5px !important;
}
 
.rate-box-with-sentiment-bar .sentiment-bar .zerovote .neutralbar {
    top: 1px !important;
}
.rate-box-with-sentiment-bar:hover .sentiment-bar {
    display:inline-block;
    opacity:1;
    width: 150px;
    transition: all 1s;
}
.rate-box-with-sentiment-bar:hover .sentiment-bar .neutralbar {
    opacity:1;
    width: 150px;
    transition: all 1s;
}

For Black Highlighter:

.rate-box-with-sentiment-bar {
    display: block;
    height: var(--rating-module-height);
    transition: all 1s;
    cursor: pointer;
    top: 0px;
}
.rate-box-with-sentiment-bar .page-rate-widget-box {
    box-shadow: none;
    position: relative;
    z-index:2;
}
.rate-box-with-sentiment-bar .page-rate-widget-box .rate-points {
    transition: all 1s;
}
.rate-box-with-sentiment-bar:hover .page-rate-widget-box .rate-points {
    border-radius: 0;
}
 
.right-align { text-align:right; }
 
.rate-box-with-sentiment-bar:hover {
    transition: all 1s;
}
 
.rate-box-with-sentiment-bar .sentiment-bar {
    display:inline-block;
    position: relative;
    z-index: 1;
    opacity:0;
    width:0;
    margin-right: -4px;
    border-radius: 0;
    transition: all 2s;
    white-space: nowrap;
    font-size: calc(var(--base-font-size)*0.93333*0.8);
    line-height: var(--rating-module-height);
}
 
.rate-box-with-sentiment-bar .sentiment-bar .neutralbar {
    border-radius: 0;
    border: .0625rem solid rgba(var(--swatch-menubg-black-color),.25);
    background-color: rgba(0,0,0,0);
    color: rgb(var(--rating-module-text-color)) !important;
    height: var(--rating-module-height);
    left: 0;
    top: 7px;
}
.rate-box-with-sentiment-bar .sentiment-bar .upbar,
.rate-box-with-sentiment-bar .sentiment-bar .downbar-base {
    height: var(--rating-module-height);
}
.rate-box-with-sentiment-bar .sentiment-bar .downbar-text {
    height: var(--rating-module-height);
    transition: all 0.3s !important;
}
 
.rate-box-with-sentiment-bar .sentiment-bar .alldown .upbar {
    padding: 0;
}
 
.rate-box-with-sentiment-bar .sentiment-bar .zerovote .neutralbar {
    top: 1px !important;
}
.rate-box-with-sentiment-bar:hover .sentiment-bar {
    display:inline-block;
    opacity:1;
    width: 150px;
    transition: all 1s;
}
.rate-box-with-sentiment-bar:hover .sentiment-bar .neutralbar {
    opacity:1;
    width: 150px;
    transition: all 1s;
}