您正在查詢的標題為:關注組織
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:機動特遣隊
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:基金會設施
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:人物檔案
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:世界線中心頁
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:系列檔案室
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:競賽資料庫
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:異常物品紀錄
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:超常事件紀錄
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:未解明地點列表
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:基金會故事
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
24
0
前言1:重要提示
此文章的內容希望鼓勵讀者無須被傳統的評分模塊限制,並為自訂評分模版提供如何實現的流程指導。
但是,很多時候花里胡哨的評分模版實際上既並無必要,亦不能為一篇寫得差的文章加分。
而更重要的是,永不要讓你的精力消耗在自訂評分模版而非你的文章上,永不要讓你的自訂評分模版喧賓奪主。
聲明:使用以下內容需要你自己承擔所帶來的風險。如果你因為使用自訂評分模版而被down、被罵,本人概不負責。
前言2:評分模塊?那是什麼?
評分模塊,相信我們每個人都會熟悉。就是以下這個玩意。
[[module rate]]
評分模塊是wikidot自帶、用於已開放評分的網站的模塊。在不同的wikidot網站,視乎站主的設定,評分可以有以下三種模式:
- +,–以及X,也就是SCP基金會使用的模式。
- +以及X
- 五星,也就是RPC管理局使用的模式。
在此篇文章中,我們只談論第一種模式。
不覺得一直都只看著這個排版太過沉悶了嗎?即使有著各版式主題,那也只是更改模塊的顏色而已。是不是很想改一下這個評分模組,讓你的頁面更有活力呢?
第一步:了解評分模塊的結構
想要自訂評分模塊,我們得先來了解一下評分模塊在html內的表達:
我們可以看見,上面評分模塊的構成是這樣的:
- div, class 為「page-rate-widget-box」
- span, class 為 "rate-points", 內容為「评分: 」1
- span, class 為「number」和「prw54353」, 內容為該頁面分數
- span, class 為「rateup」,「btn」 和「btn-default」
- a, 內容為「+」,游標掃過時會顯示「我喜歡」。實際連結到頁面內的JavaScript JQuery,當被點擊時會進行「+1」的動作
- span, class 為「ratedown」,「btn」和「btn-default」
- a, 內容為「–」2,游標掃過時會顯示「我不喜歡」。實際連結到頁面內的JavaScript JQuery,當被點擊時會進行「-1」的動作
- span, class 為「cancel」,「btn」 和「btn-default」
- a, 內容為「X」,游標掃過時會顯示「取消我的投票」。實際連結到頁面內的JavaScript JQuery,當被點擊時會進行取消評分的動作
- span, class 為 "rate-points", 內容為「评分: 」1
另外,從JQuery代碼裡得知,當頁面自動刷新評分時,class 為「prw54353」的內容會自動更換為 class「prw54354」的內容。
知道了每個div,span 和 a 的 class,對於我們撰寫 CSS 代碼將是非常重要的幫助。
第二步:構思自訂評分模塊的排版,以及預備材料
那麼,了解了評分模塊的結構後,我們就需要開始構思我們所想要自訂評分模塊的排版了。
例1:

這個評分模版好像很好看!3
以下,我們將以例一的內容進行評分模塊的更改,僅作參考之用。如果你想要達到的效果與此不同,請根據實際情況調整。
評分模版分析(從左到右,上到下):
- up按鈕:灰色的向上大拇指圖案
- up人數
- down按鈕:灰色的向下大拇指圖案
- down人數
- 底部邊框:評分佔率:深灰色up條,淺灰色down條
但是,你所選擇的排版,未必會完全符合SCP基金會的文章評分模塊要求。因此,我們要作出少許修改:
- up按鈕:灰色的向上大拇指圖案
- up人數
- down按鈕:灰色的向下大拇指圖案
- down人數
- 取消按鈕
- 底部邊框:評分佔率:藍色up條,淺灰色down條
嗯,這樣好多了。
預備材料
接下來,我們需要準備材料。視乎你想要如何實現該評分模版,你可能會需要準備一張或多張圖片。不過我的建議是,儘量使用越少圖片越好,能用文字代替就不要用圖片。這是因為加載圖片需要時間,加載大量圖片也就需要大量時間,這會影響讀者的觀感。
例1a,1b: 寬30px 高30px

要實現例1的效果,其實只需要預備其中一個方向的大拇指的圖片(另一張圖使用該圖片的180度旋轉),但是要使用該辦法會需要更繁複的代碼,故此我預備了兩張圖片。
第三步:使用代碼來實現該模版
碼代碼前需知
首先,Wikidot本身並不支持直接更改評分模塊內容。然後,如果想要使用Wikidot代碼重製評分模塊,Wikidot會將 a 內的JQuery代碼過濾,使得該代碼並不能起效。因此,我們只能夠透過將評分模塊以 div 包含並標上 class 來實現更改獨立評分模塊。
例1c:
[[div class="sample-one-c"]]
[[module rate]]
[[/div]]
備註:這個class不應與任何已存在的class名字重複。
真正碼代碼
將各按鈕分割成獨立部份
因為在我們想要達到的效果中,up按鈕和down按鈕之間、down按鈕和取消按鈕之間都有字,所以我們必須將三個按鈕獨立分開,並定義各自的class。
例1d:
[[div class="upbtn"]] [!-- 此處我們想要只顯示up按鈕 --]
[[module rate]]
[[/div]]
[[div class="downbtn"]] [!-- 此處我們想要只顯示down按鈕 --]
[[module rate]]
[[/div]]
[[div class="cancelbtn"]] [!-- 此處我們想要只顯示取消按鈕 --]
[[module rate]]
[[/div]]
各評分模塊移除所有一般效果及設為行內元素
例1f:
[[module css]]
/* 選擇所有帶「upbtn」、「downbtn」或「cancelbtn」class 的元素,並設為行內元素 */
.upbtn,
.downbtn,
.cancelbtn {
display: inline-block;
}
/* 選擇所有帶「upbtn」、「downbtn」或「cancelbtn」class 的元素內的 "page-rate-widget-box" */
.upbtn .page-rate-widget-box,
.downbtn .page-rate-widget-box,
.cancelbtn .page-rate-widget-box {
display: inline-block;
/* 將多個評分模塊設為行內元素 */
border: 0 !important;
box-shadow: none !important;
margin: 0 !important;
/* 將評分模塊的所有邊框、陰影、邊界分隔移除,並強制使用該屬性 */
}
[[/module]]
定義各按鈕的CSS
定義按鈕的顯示
例1g-1:
[[module css]]
/* 前略 */
.upbtn *,
.downbtn *,
.cancelbtn * {
display: none;
}
.upbtn .rateup,
.downbtn .ratedown,
.cancelbtn .cancel {
display: inline-block !important;
}
[[/module]]
首先,我們想要將upbtn內的評分模塊除up按鈕外清除;downbtn內的評分模塊除down按鈕外清除;cancelbtn內的評分模塊除取消按鈕外清除。其中一個做法為將所有元素設為不顯示,然後另外將rateup,ratedown,cancel設為顯示。
採用此方法而非單獨選擇不想顯示的元素來設定不顯示的原因是,後面我們自訂各按鈕的時候亦會需要選擇各按鈕的元素來進行定義,所以此方法能夠更省略代碼量。若你不想這樣做,以下是單獨選擇元素來設定不顯示的代碼:
定義按鈕的顯示內容
接下來我們需要定義我們按鈕的顯示內容。之前我們準備了例1a,1b的圖片,網址為
http://scp-wiki-cn.wikidot.com/local--files/ratemod:ytp-like-style/up-gray.png
http://scp-wiki-cn.wikidot.com/local--files/ratemod:ytp-like-style/down-gray.png
例1h:
[[module css]]
/* 前略 */
/* 需要定義上一步最後所選擇的三個元素的更多屬性 */
.upbtn .rateup,
.downbtn .ratedown,
.cancelbtn .cancel {
display: inline-block;
border: 0;
background: transparent !important;
/* 將邊框、背景屬性去掉 */
border-radius: 5px;
width: 30px;
height: 30px;
text-align: center;
/* 設定圓角邊框半徑、寬和高、文字左右排列 */
}
/* 定義評分連接的屬性 */
.upbtn .rateup a,
.downbtn .ratedown a,
.cancelbtn .cancel a {
display: inline-block;
padding: 0;
margin: 0;
/* 把邊界本身、內部文字與邊界的距離去掉 */
border-radius: 5px;
width: 30px;
height: 30px;
vertical-align: text-top;
/* 設定圓角邊框半徑、寬和高、文字上下排列 */
}
.upbtn .rateup a {
font-size: 0;
/* 將 "+" 字設為0大小。*/
background: url(http://scp-wiki-cn.wikidot.com/local--files/ratemod:ytp-like-style/up-gray.png) no-repeat !important;
/* 設定背景圖為向上的大拇指 */
}
.downbtn .ratedown a {
font-size: 0;
/* 將 "–" 字設為0大小。*/
background: url(http://scp-wiki-cn.wikidot.com/local--files/ratemod:ytp-like-style/down-gray.png) no-repeat !important;
/* 設定背景圖為向下的大拇指 */
}
.cancelbtn .cancel a {
font-weight: bold;
font-size: 25px;
color: #aaa !important;
/* 設定 "X" 字為粗體,25px以及灰色 */
}
/* 定義游標於按鈕上懸浮時的屬性 */
.upbtn .rateup a:hover,
.downbtn .ratedown a:hover,
.cancelbtn .cancel a:hover {
border-radius: 5px;
width: 30px;
height: 30px;
background-color: transparent !important;
/* 設定游標於按鈕上懸浮時的圓角邊框半徑、寬和高、背景透明 */
}
[[/module]]
定義游標於按鈕上懸浮的效果
沒有動畫的按鈕怎麼能算是完整呢?所以,我們需要設置游標於按鈕上懸浮的效果。
本例使用濾鏡來改變按鈕顏色,可以參考此處。
例1i:
[[module css]]
/* 前略 */
.upbtn .rateup.btn a:hover,
.downbtn .ratedown.btn a:hover {
-webkit-filter: grayscale(100%) brightness(50%) sepia(100%) hue-rotate(-180deg) saturate(700%) contrast(0.8);
filter: grayscale(100%) brightness(50%) sepia(100%) hue-rotate(-180deg) saturate(700%) contrast(0.8);
/* 設定游標於up,down按鈕上懸浮時變成藍色 */
}
.cancelbtn .cancel.btn a:hover {
-webkit-filter: invert(40%) grayscale(100%) brightness(60%) sepia(100%) hue-rotate(-50deg) saturate(400%) contrast(2);
filter: grayscale(100%) brightness(60%) sepia(100%) hue-rotate(-50deg) saturate(600%) contrast(0.8);
/* 設定游標於取消按鈕上懸浮時變成紅色 */
}
[[/module]]
設置up、down人數以及底部評分佔比條
此時,各評分按鈕已經完成,但我們想要在按鈕旁顯示up、down人數,以及在整個模版的底部上顯示評分佔比。在這個階段,由於需要實時更新佔比條,單純的CSS不能滿足我們的需求。此處可以參考我所做的評分佔比條模式,但是要作出一些改動,將佔比條上的文字去掉和調整高度模仿邊框。
計算up、down的公式如下(以ListPages模塊實現):
Up 人數:[[#expr (%%rating_votes%%+%%rating%%)/2]] = 24
Down 人數:[[#expr (%%rating_votes%%-%%rating%%)/2]] = 0
對排版作出調整後,我們得到如下代碼:
例1j:
[[div class="ytp-rate"]] [!-- 此div用作佔比條的載體 --]
[[div class="upbtn"]]
[[module rate]]
[[/div]]
[[module ListPages separate="no" range="."]]
[[size 13px]][[#expr (%%rating_votes%%+%%rating%%)/2]][[/size]]
[[/module]]
[[div class="downbtn"]]
[[module rate]]
[[/div]]
[[module ListPages separate="no" range="."]]
[[size 13px]][[#expr (%%rating_votes%%-%%rating%%)/2]][[/size]]
[[/module]]
[[div class="cancelbtn"]]
[[module rate]]
[[/div]]
[[include :scp-wiki-cn:ratemod:sentimentbar-arguments width=100% | theme=ytp-like-border]]
[[/div]]
另外,由於ListPages模塊的某些特性,我們需要將其設為行內元素。同時,ytp-rate這個div本身也需要設為行內元素。再者,我們需要將ytp-rate內部的元素上下置中。我們可以將這幾個定義與先前的行內元素定義放在一起:
例1k:
[[module css]]
.upbtn,
.downbtn,
.cancelbtn,
.ytp-rate,
.ytp-rate .list-pages-box,
.ytp-rate .list-pages-box p {
display:inline-block !important;
vertical-align: middle;
}
/* 後略 */
[[/module]]
然後是佔比條本身的CSS:
例1l:
[[module css]]
.ytp-like-border {
display:block;
/* 確保佔比條於自己單獨一行上 */
height: 2px !important;
/* 高度設為2像素,模仿邊框 */
}
.ytp-like-border .neutralbar {
height: 2px !important;
background-color: #ccc;
/* 中立條顏色 */
font-size: 0;
/* 中立條文字調0大小 */
}
.ytp-like-border .downbar-base {
height: 2px !important;
background-color: #ccc;
/* 差評條顏色 */
}
.ytp-like-border .downbar-text {
height: 2px !important;
font-size:0;
/* 差評條文字調0大小 */
padding: 0 !important;
/* 去掉文字內襯厚度 */
}
.ytp-like-border .upbar {
height: 2px !important;
background-color: #167ac6;
/* 好評條顏色 */
font-size: 0;
/* 好評條文字調0大小 */
padding: 0 !important;
/* 去掉文字內襯厚度 */
}
.ytp-rate > .cancelbtn + .list-pages-box,
.ytp-rate > .list-pages-box + .list-pages-box {
width: 100%;
/* 因為ListPages模塊的結構問題,我們需要手動將最後佔比條的兩個list-pages-box寬度設為上層元素的100% */
}
[[/module]]
將所有代碼整合
這麼多的代碼,我們需要將其整合,方便自己使用。
例1m:
實際效果
碼了這麼多代碼,我們是時候看看實際效果了。
24
0
評分後是不能即時看到更新的,請重新載入頁面!
第四步:將該評分模版用於你的文章內
恭喜,你已經完成了你自製自訂評分模版的過程了!現在,你需要將其用於你的文章內。
如需使用,此為該自訂評分模版引用代碼
[[include :scp-zh-tr:ratemod:ytp-like]]
Encore:更多代碼,實現更強大的效果
-
- _
-
- _
實際效果中,評分旋鈕應於頁面右上角。
部份靈感與代碼來自
Sekai_s 為CN分部 LinkAge中心頁所做的頁面菜單旋鈕。
-
-
Included page "sentimentbar:quartercircle" does not exist (create it now)
-
-
-
-
-
-
- _
[[div class="rateWrap"]]
[[ul]]
[[li]]
[[div_ class="fa fa-angle-double-left"]]
[[/div]]
[[ul]]
[[li]]
[[div class="ratedit sentiment"]]
[[include :scp-wiki-cn:sentimentbar:quartercircle uper=(%%rating_votes%%+%%rating%%)/(2*%%rating_votes%%) | dper=(%%rating_votes%%-%%rating%%)/(2*%%rating_votes%%) | theme=spinout-sentiment]]
[[/div]]
[[/li]]
[[li]]
[[div class="ratedit spinout-pts"]]
[[module rate]]
[[/div]]
[[/li]]
[[li]]
[[div class="ratedit spinout-up"]]
[[module rate]]
[[/div]]
[[/li]]
[[li]]
[[div class="ratedit spinout-down"]]
[[module rate]]
[[/div]]
[[/li]]
[[li]]
[[div class="ratedit spinout-cancel"]]
[[module rate]]
[[/div]]
[[/li]]
[[/ul]]
[[/li]]
[[/ul]]
[[/div]]
-
- _
[[module css]] /* Spin Out Rate */ .rateWrap { position: fixed; right: 0; top: 0; width: 6em; height: 6em; border-radius: 0 0 0 100%; overflow: hidden; z-index: 9; -webkit-transition-delay: .8s; -moz-transition-delay: .8s; -ms-transition-delay: .8s; -o-transition-delay: .8s; transition-delay: .8s; -webkit-transition-property: width, height; -moz-transition-property: width, height; -ms-transition-property: width, height; -o-transition-property: width, height; transition-property: width, height; } @media (min-width: 1041px) { .rateWrap { right: calc(50vw - 520px); } } .rateWrap:hover { width: 24em; height: 24em; -webkit-transition-delay: 0; -moz-transition-delay: 0; -ms-transition-delay: 0; -o-transition-delay: 0; transition-delay: 0; } .rateWrap ul { margin: 0; padding: 0; list-style: none; position: absolute; right: 0; top: 0; width: 0; height: 0; } .rateWrap ul li { position: absolute; right: 0; top: 0; border-radius: 0 0 0 100%; } .rateWrap ul li ul li { position: absolute; right: 0; top: 0; border-radius: 100% 0 0 0; } .rateWrap ul li .ratedit { display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; } .rateWrap > ul > li { width: 6em; height: 6em; background-color: #404040; color: #fff; cursor: pointer; -webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; -ms-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; transition: .3s ease-in-out; -webkit-transition-delay: .5s; -moz-transition-delay: .5s; -ms-transition-delay: .5s; -o-transition-delay: .5s; transition-delay: .5s; } .rateWrap:hover > ul > li { width: 11em; height: 11em; -webkit-transition-delay: 0; -moz-transition-delay: 0; -ms-transition-delay: 0; -o-transition-delay: 0; transition-delay: 0; } .rateWrap > ul > li > div.fa { position: absolute; right: 0; top: 0; width: 1.2em; height: 1.2em; font-size: 3em; -webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; -ms-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; transition: .3s ease-in-out; -webkit-transition-delay: .5s; -moz-transition-delay: .5s; -ms-transition-delay: .5s; -o-transition-delay: .5s; transition-delay: .5s; } .rateWrap:hover > ul > li > div.fa { font-size: 5.5em; -webkit-transition-delay: 0; -moz-transition-delay: 0; -ms-transition-delay: 0; -o-transition-delay: 0; transition-delay: 0; } .rateWrap > ul ul { z-index: -1; } .rateWrap > ul ul li { -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -ms-transform: rotate(5deg); -o-transform: rotate(5deg); transform: rotate(5deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -ms-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; } .rateWrap:hover > ul ul li { -webkit-transition-delay: .3s; -moz-transition-delay: .3s; -ms-transition-delay: .3s; -o-transition-delay: .3s; transition-delay: .3s; } .rateWrap > ul > li > ul > li:nth-of-type(1) { width: 24em; height: 24em; top: -24em; background-color: #a3a3a7; z-index: 8; } .rateWrap > ul > li > ul > li:nth-of-type(1) > a { border-color: #a3a3a7; } .rateWrap:hover > ul > li > ul > li:nth-of-type(1) { -webkit-transform: rotate(-18deg); -moz-transform: rotate(-18deg); -ms-transform: rotate(-18deg); -o-transform: rotate(-18deg); transform: rotate(-18deg); } .rateWrap > ul > li > ul > li:nth-of-type(2) { width: 21.5em; height: 21.5em; top: -21.5em; background-color: #b4b4b8; z-index: 7; } .rateWrap > ul > li > ul > li:nth-of-type(2) > a { border-color: #b4b4b8; } .rateWrap:hover > ul > li > ul > li:nth-of-type(2) { -webkit-transform: rotate(-36deg); -moz-transform: rotate(-36deg); -ms-transform: rotate(-36deg); -o-transform: rotate(-36deg); transform: rotate(-36deg); } .rateWrap > ul > li > ul > li:nth-of-type(3) { width: 19.5em; height: 19.5em; top: -19.5em; background-color: #c5c5c9; z-index: 6; } .rateWrap > ul > li > ul > li:nth-of-type(3) > a { border-color: #c5c5c9; } .rateWrap:hover > ul > li > ul > li:nth-of-type(3) { -webkit-transform: rotate(-54deg); -moz-transform: rotate(-54deg); -ms-transform: rotate(-54deg); -o-transform: rotate(-54deg); transform: rotate(-54deg); } .rateWrap > ul > li > ul > li:nth-of-type(4) { width: 18em; height: 18em; top: -18em; background-color: #d6d6da; z-index: 5; } .rateWrap:hover > ul > li > ul > li:nth-of-type(4) { -webkit-transform: rotate(-72deg); -moz-transform: rotate(-72deg); -ms-transform: rotate(-72deg); -o-transform: rotate(-72deg); transform: rotate(-72deg); } .rateWrap > ul > li > ul > li:nth-of-type(4) > a { border-color: #d6d6da; } .rateWrap > ul > li > ul > li:nth-of-type(5) { width: 17em; height: 17em; top: -17em; background-color: #e7e7eb; z-index: 4; } .rateWrap > ul > li > ul > li:nth-of-type(5) a { border-color: #e7e7eb; } .rateWrap:hover > ul > li > ul > li:nth-of-type(5) { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } .rateWrap > ul ul a:hover { border-color: var(--dark-color) !important; } .rateWrap ul li .ratedit .page-rate-widget-box { display: block; position: absolute; border: 0 !important; box-shadow: none !important; margin: 0 !important; width: 100%; height: 100%; font-size: 1.4em; } .rateWrap .ratedit .page-rate-widget-box * { display: none; } .rateWrap .ratedit.list-pages-box { height: 100%; } .rateWrap:hover ul li .ratedit.sentiment { -webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; -ms-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; transition: .3s ease-in-out; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } .rateWrap .ratedit.spinout-pts .rate-points { display: inline-block !important; position: absolute; border: 0; left: 0.5em; bottom: 1em; background: transparent !important; } .rateWrap .ratedit.spinout-pts .rate-points .number { display: inline-block;} .rateWrap .ratedit.spinout-up .rateup, .rateWrap .ratedit.spinout-down .ratedown, .rateWrap .ratedit.spinout-cancel .cancel { display: inline-block !important; position: absolute; border: 0; font-weight: bold; width: 90%; height: 90%; background: transparent !important; } .rateWrap .ratedit.spinout-up .rateup, .rateWrap .ratedit.spinout-down .ratedown { left: 0.7em; bottom: 0.2em; } .rateWrap .ratedit.spinout-cancel .cancel { left: 0; bottom: 0; } .rateWrap .ratedit.spinout-up .rateup a, .rateWrap .ratedit.spinout-down .ratedown a, .rateWrap .ratedit.spinout-cancel .cancel a { display: inline-block !important; position: absolute; border: 0; width: 100%; height: 20%; left: 0; bottom: 0; color: #FFF !important; font-size: 30px; text-align: left; background: transparent !important; padding-left: .8em; border-radius: 100% 0 0 0; text-decoration: none; -webkit-transition: .1s ease-in-out; -moz-transition: .1s ease-in-out; -ms-transition: .1s ease-in-out; -o-transition: .1s ease-in-out; transition: .1s ease-in-out; } .rateWrap .ratedit.spinout-up .rateup a:hover, .rateWrap .ratedit.spinout-down .ratedown a:hover { -webkit-filter: grayscale(100%) brightness(50%) sepia(100%) hue-rotate(-180deg) saturate(700%) contrast(0.8); filter: grayscale(100%) brightness(50%) sepia(100%) hue-rotate(-180deg) saturate(700%) contrast(0.8); } .rateWrap .ratedit.spinout-cancel .cancel a:hover { -webkit-filter: invert(40%) grayscale(100%) brightness(60%) sepia(100%) hue-rotate(-50deg) saturate(400%) contrast(2); filter: grayscale(100%) brightness(60%) sepia(100%) hue-rotate(-50deg) saturate(600%) contrast(0.8); } .rateWrap .ratedit .list-pages-box { display: inline-block !important; position: relative; border: 0; background: transparent !important; text-align: center; } [[/module]]
如需使用,此為評分旋鈕引用代碼
[[include :scp-zh-tr:ratemod:spinout]]
-
- _
-
-
Included page "ratemod:sbar-quartcircle" does not exist (create it now)
-
-
-
-
-
-
更多資訊
更多資料
如需使用,此為著作資訊評分旋鈕引用代碼
[[include :scp-zh-tr:ratemod:spinout-info:start]]
資料
[[include :scp-zh-tr:info:more]]
更多資料
[[include :scp-zh-tr:info:end]]