評分佔比條模塊

97.3%2.6%

評分佔比條模塊：由Jochoi 製作。

非常感謝Boyu12 於Discord上的幫助！
非常感謝W Asriel 關於將佔比條整合到評分模塊的提議！
另外也非常感謝於QQ群的各位關於顏色配搭的提議！

備註：佔比條模塊需手動重載入網頁以更新評分比率！

使用方法與選項解釋：

獨立佔比條：

在[[include…]]之內，你可以根據你自己的需要刪除或者添加選項。

[[include :scp-wiki-cn:ratemod:sentimentbar-arguments uper=0.55 | nper=0 | dper=0.45 | width=300px | theme=ytp-like]]

範例：

[[iftags _code]]

.rate-box-with-sentiment-bar:hover .sentiment-bar, 
.rate-box-with-sentiment-bar:hover .sentiment-bar .neutralbar
.credit-rate-with-sentiment-bar:hover .sentiment-bar,
.credit-rate-with-sentiment-bar:hover .sentiment-bar .neutralbar, {
    width: 150px;
}
.neutralbar {
    display: none;
}
.neutralbar.cn, .neutralbar.cn .neutext, .hasvotes.neutralbar {
    display: inline-block;
}

[[/iftags]]

55%45%

uper：選填。好評佔率，接受少於1的點數或分數（以1為整體）。預設為該頁面的好評數除以總投票數。

dper：選填。差評佔率，接受少於1的點數或分數（以1為整體）。預設為該頁面的差評數除以總投票數。

nper：選填。中立佔率，接受少於1的點數或分數（以1為整體）。預設為0。

width：選填。佔比條寬度。預設為150px。

theme：選填。佔比條顏色配搭主題。預設為"greengrayred"。預定義主題如下：

+ 打開列表

主題使用名	顯示效果 (+0.45/X0.1/-0.45)	好評條 (+) 顏色	中立條 (X) 顏色	差評條 (–) 顏色
greengrayred	[[iftags _code]] .rate-box-with-sentiment-bar:hover .sentiment-bar, .rate-box-with-sentiment-bar:hover .sentiment-bar .neutralbar .credit-rate-with-sentiment-bar:hover .sentiment-bar, .credit-rate-with-sentiment-bar:hover .sentiment-bar .neutralbar, { width: 150px; } .neutralbar { display: none; } .neutralbar.cn, .neutralbar.cn .neutext, .hasvotes.neutralbar { display: inline-block; } [[/iftags]] 45%45%	#3ae845	#a0a0a0	#e83a3a
ytp-like	[[iftags _code]] .rate-box-with-sentiment-bar:hover .sentiment-bar, .rate-box-with-sentiment-bar:hover .sentiment-bar .neutralbar .credit-rate-with-sentiment-bar:hover .sentiment-bar, .credit-rate-with-sentiment-bar:hover .sentiment-bar .neutralbar, { width: 150px; } .neutralbar { display: none; } .neutralbar.cn, .neutralbar.cn .neutext, .hasvotes.neutralbar { display: inline-block; } [[/iftags]] 45%45%	#167ac6	#ccc	#ccc
purplegrayyellow	[[iftags _code]] .rate-box-with-sentiment-bar:hover .sentiment-bar, .rate-box-with-sentiment-bar:hover .sentiment-bar .neutralbar .credit-rate-with-sentiment-bar:hover .sentiment-bar, .credit-rate-with-sentiment-bar:hover .sentiment-bar .neutralbar, { width: 150px; } .neutralbar { display: none; } .neutralbar.cn, .neutralbar.cn .neutext, .hasvotes.neutralbar { display: inline-block; } [[/iftags]] 45%45%	#8a5cbc	#ccc	#fcdc3f
pinkgrayblue	[[iftags _code]] .rate-box-with-sentiment-bar:hover .sentiment-bar, .rate-box-with-sentiment-bar:hover .sentiment-bar .neutralbar .credit-rate-with-sentiment-bar:hover .sentiment-bar, .credit-rate-with-sentiment-bar:hover .sentiment-bar .neutralbar, { width: 150px; } .neutralbar { display: none; } .neutralbar.cn, .neutralbar.cn .neutext, .hasvotes.neutralbar { display: inline-block; } [[/iftags]] 45%45%	#ff86ec	#ccc	#369ae6
redgrayblack	[[iftags _code]] .rate-box-with-sentiment-bar:hover .sentiment-bar, .rate-box-with-sentiment-bar:hover .sentiment-bar .neutralbar .credit-rate-with-sentiment-bar:hover .sentiment-bar, .credit-rate-with-sentiment-bar:hover .sentiment-bar .neutralbar, { width: 150px; } .neutralbar { display: none; } .neutralbar.cn, .neutralbar.cn .neutext, .hasvotes.neutralbar { display: inline-block; } [[/iftags]] 45%45%	#ff0000	#ccc	#000
bluegrayred	[[iftags _code]] .rate-box-with-sentiment-bar:hover .sentiment-bar, .rate-box-with-sentiment-bar:hover .sentiment-bar .neutralbar .credit-rate-with-sentiment-bar:hover .sentiment-bar, .credit-rate-with-sentiment-bar:hover .sentiment-bar .neutralbar, { width: 150px; } .neutralbar { display: none; } .neutralbar.cn, .neutralbar.cn .neutext, .hasvotes.neutralbar { display: inline-block; } [[/iftags]] 45%45%	#369ae6	#ccc	#ee1111
prusti	[[iftags _code]] .rate-box-with-sentiment-bar:hover .sentiment-bar, .rate-box-with-sentiment-bar:hover .sentiment-bar .neutralbar .credit-rate-with-sentiment-bar:hover .sentiment-bar, .credit-rate-with-sentiment-bar:hover .sentiment-bar .neutralbar, { width: 150px; } .neutralbar { display: none; } .neutralbar.cn, .neutralbar.cn .neutext, .hasvotes.neutralbar { display: inline-block; } [[/iftags]] 45%45%	#003153	#ccc	#dcdbd6

自定義主題可使用以下代碼定義：

+ 顯示代碼

[[module css]]
.(自定義主題用名，需為英文) .neutralbar {
    background-color: #XXXXXX;
    /* 中立條顏色 */
    color: #XXXXXX;
    /* 中立條文字顏色 */
}
.(自定義主題用名，需為英文) .downbar-base {
    background-color: #XXXXXX;
    /* 差評條顏色 */
}
.(自定義主題用名，需為英文) .downbar-text {
    color: #XXXXXX;
    /* 差評條文字顏色 */
}
.(自定義主題用名，需為英文) .upbar {
    background-color: #XXXXXX;
    /* 好評條顏色 */
    color: #XXXXXX;
    /* 好評條文字顏色 */
}
[[/module]]

根據需要更改上述代碼細節並放在頁面任何一處，然後於[[include…]]裡把"theme"設為自定義主題用名以使用。

附佔比條的評分模塊：

在頁面的開首插入如下的代碼以代替評分模塊與[[>]]。在[[include…]]之內，你可以根據你自己的需要刪除或者添加選項。
游標懸浮於右面的評分模塊之上時會拉出佔比條，在移動端上表現為點擊評分模塊任何一處。

Sigma-9:

[[include :scp-wiki-cn:ratemod:sentimentbar theme=ytp-like]]

黑色標記筆:

[[include :scp-wiki-cn:ratemod:sentimentbar | start=bhl | end=--] | theme=ytp-like]]

範例：

[[iftags _code]]

.rate-box-with-sentiment-bar:hover .sentiment-bar, 
.rate-box-with-sentiment-bar:hover .sentiment-bar .neutralbar
.credit-rate-with-sentiment-bar:hover .sentiment-bar,
.credit-rate-with-sentiment-bar:hover .sentiment-bar .neutralbar, {
    width: 150px;
}
.neutralbar {
    display: none;
}
.neutralbar.cn, .neutralbar.cn .neutext, .hasvotes.neutralbar {
    display: inline-block;
}

[[/iftags]]

97.3%2.6%

theme：與上述相同。

附佔比條的著作信息模塊：

與著作信息模塊的使用方法相同，分別在於"[[include credit:start]]"改為"[[include ratemod:sentimentbar-credit:start]]"。獨立著作信息模塊不受評分佔比條模塊支援。

在頁面的開首插入如下的代碼以代替評分模塊與[[>]]。在[[include…]]之內，你可以根據你自己的需要刪除或者添加選項。
游標懸浮於右面的評分模塊之上時會拉出佔比條，在移動端上表現為點擊評分模塊任何一處。

Sigma-9:

[[include :scp-wiki-cn:ratemod:sentimentbar-credit:start theme=ytp-like]]
資料
[[include :scp-wiki-cn:credit:more]]
更多資料
[[include :scp-wiki-cn:credit:end]]

黑色標記筆:

[[include :scp-wiki-cn:ratemod:sentimentbar-credit:start start=bhl | end=--] | theme=ytp-like]]
資料
[[include :scp-wiki-cn:credit:more]]
更多資料
[[include :scp-wiki-cn:credit:end]]

theme：與上述相同。