YT評分模版與排版樣板

[[module css]] .mobile-top-bar {   display: block; } .mobile-top-bar ul {   display: none !important; } .open-menu a {     position: fixed;     top: 0.5em;     left: 0.5em;     z-index: 25;     font-family: 'Nanum Gothic', san-serif;     font-size: 30px;     font-weight: 700;     width: 30px;     height: 30px;     line-height: 0.9em;     text-align: center;     border: 0.2em solid #888 !important;     background-color: #fff !important;     border-radius: 3em;     color: #888 !important; } .open-menu a:hover {     text-decoration: none !important;     -webkit-box-shadow: 0px 0px 20px 3px rgba(153,153,153,1);     -moz-box-shadow: 0px 0px 20px 3px rgba(153,153,153,1);     -ms-box-shadow: 0px 0px 20px 3px rgba(153,153,153,1);     -o-box-shadow: 0px 0px 20px 3px rgba(153,153,153,1);     box-shadow: 0px 0px 20px 3px rgba(153,153,153,1); } #side-bar {     display: block;     position: fixed;     top: 0;     left: -25em;     width: 17em;     height: 100%;     background-color: rgb(184, 134, 134);     overflow-y: auto;     z-index: 20;     padding: 1em 1em 0 1em;     -webkit-transition: left 0.5s ease-in-out 0.1s;     -moz-transition: left 0.5s ease-in-out 0.1s;     -ms-transition: left 0.5s ease-in-out 0.1s;     -o-transition: left 0.5s ease-in-out 0.1s;     transition: left 0.5s ease-in-out 0.1s; } #side-bar:after {     content: "";     position: absolute;     top: 0;     width: 0;     height: 100%;     background-color: rgba(0, 0, 0, 0.2); } #side-bar:target {     display: block;     left: 0;     width: 17em;     margin: 0;     border: 1px solid #dedede;     z-index: 20; } #side-bar:target + #main-content {     left: 0; } .close-menu { display:none; } #side-bar:target + #main-content .close-menu {     display: block;     position: fixed;     width: 100%;     height: 100%;     top: 0;     left: 0;     background: rgba(0,0,0,0.3) 1px 1px repeat;     z-index: 17; } #main-content {margin: 0 0 0 2em;} [[/module]] [[module css]] #header h1 a {     content: "SCP基金会"; }   #header h1 a::before {     content: "視頻網站";     margin-left: 5px; } #header h1 {     padding: 0;     float: left;     max-height: 95px; }   #header h1 a span{     display: block;     content: "";     visibility: hidden; }   #header h2 {     margin-left: 13%;     padding: 0;     clear: left;     float: left;     font-size: 0%;     max-height: 38px; } #header h2 span {     display: block;     margin: 0;     padding: 19px 0;     line-height: 0px;     max-height: 0px;     font-weight: bold;     color: transparent;     text-shadow: none; } #header h2 span::before {     content: " 網站副標題 ";     display: block;     margin: 0 0 0 0;     padding: 5px 0;     line-height: 0px;     max-height: 0px;     font-weight: bold;     color: #f0f0c0;     text-shadow: 1px 1px 1px #000;     text-shadow: 1px 1px 1px rgba(0,0,0,.8);     font-size: 15px; } #page-title {     display: none; } table.suggestedsec, table.suggestedsec td.tbpic a, table.suggestedsec td.tbpic a image {     width:100%; } table.suggestedsec td.tbpic {     width:35%; } table.commentsec tr, table.commentsec td {     padding: 0.5em; } table.commentsec td.usercomment {     padding: 0 0.5em; } table.commentsec td.usercomment p {     display: inline-block;     margin-block-start: 0;     margin-block-end: 0; } table td.useravatar {     vertical-align: text-top; } table td.useravatar img.image {     position: relative;     width: 40px;     border-radius: 50%; } .media-content, .comments {     padding: 0 2em 0 0; } @media (min-width: 979px) { .media-content {     float: left;     width: 63%;     padding: 0 !important; } .suggested {     float: right;     width: 33%;     font-size: 11px; } .comments {     float: left;     width: 63%;     padding: 0 !important; } } .upbtn, .downbtn, .cancelbtn, .ytp-rate, .ytp-rate .list-pages-box, .ytp-rate .list-pages-box p {     display:inline-block !important;     vertical-align: middle; } .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; } .upbtn *, .downbtn *, .cancelbtn * {     display: none; } .upbtn .rateup, .downbtn .ratedown, .cancelbtn .cancel {     display: inline-block !important; } .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;     background: url(http://scpsandboxcn.wikidot.com/local--files/jochoi-draft5/up-gray.png) no-repeat !important; } .downbtn .ratedown a {     font-size: 0;     background: url(http://scpsandboxcn.wikidot.com/local--files/jochoi-draft5/down-gray.png) no-repeat !important; } .cancelbtn .cancel a {     font-weight: bold;     font-size: 25px;     color: #aaa !important; } .upbtn .rateup a:hover, .downbtn .ratedown a:hover, .cancelbtn .cancel a:hover {     border-radius: 5px;     width: 30px;     height: 30px;     background-color: transparent !important; } .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); } .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); } .ytp-like-border {     display:block;     height: 2px !important; } .ytp-like-border .neutralbar {     height: 2px !important;     background-color: #ccc;     font-size: 0; } .ytp-like-border .downbar-base {     height: 2px !important;     background-color: #ccc; } .ytp-like-border .downbar-text {     height: 2px !important;     font-size:0;     padding: 0 !important; } .ytp-like-border .upbar {     height: 2px !important;     background-color: #167ac6;     font-size: 0;     padding: 0 !important; } .ytp-rate > .cancelbtn + .list-pages-box, .ytp-rate > .list-pages-box + .list-pages-box {     width: 100%; } [[/module]] [[div class="mobile-top-bar"]] [[div class="open-menu"]] [[a target="_self" href="#side-bar"]]≡[[/a]] [[/div]] [[/div]] [[a class="close-menu" target="_self" href="###"]][[image http://scp-wiki.wikidot.com/local--files/nav:side/black.png style="z-index=-1; opacity: 0.3;" alt="black.png" class="image"]][[/a]] [[div class="media-content"]] [[include :scp-wiki-cn:component:audio-player-woed-source |unique-name= MidnightShelter |audio-file= http://fjdx.sc.chinaz.com/Files/DownLoad/sound1/201807/10389.wav |background-color=rgb(252, 252, 252) |border-color=rgb(215, 215, 215) |border-radius=0.313rem |dropshadow-color=rgba(12, 12, 12, 0.15) |text-color=rgb(80, 0, 2) |icons-color=rgb(171, 0, 5) |player-color=rgb(215, 215, 215) |progress-color=rgb(80, 0, 2) ]] ++ 影片標題 [[div style="float: left; width: 65%; text-align: left;"]] [[span style="color:#777;"]]觀看次數：XXXX次[[/span]] [[/div]] [[div style="float: right; width: 50%; text-align: right;"]] [[div class="ytp-rate"]] [[div class="upbtn"]] [[module rate]] [[/div]] [[module ListPages separate="no" range="."]] [[#expr (%%rating_votes%%+%%rating%%)/2]] [[/module]] [[div class="downbtn"]] [[module rate]] [[/div]] [[module ListPages separate="no" range="."]] [[#expr (%%rating_votes%%-%%rating%%)/2]] [[/module]] [[div class="cancelbtn"]] [[module rate]] [[/div]] [[include :scp-wiki-cn:ratemod:sentimentbar-arguments width=100% | theme=ytp-like-border]] [[/div]] [[/div]] [[div style="clear:both; opacity: 0.7;"]] ------ [[/div]] [[table class="media-info" style="width: 100%;"]] [[row]] [[cell class="useravatar" rowspan="2" style="display: table-cell; width: 10%;"]] [[image http://scp.avn.sh/local--files/hidden:jochoi:fragment:ytpsample/avatar-sample.png]] [[/cell]] [[cell style="display: table-cell; font-size: 1.15em; width:50%"]] [[size 110%]]//上傳者//[[/size]] 發佈日期：XXXX年 XX月 XX日 [[/cell]] [[cell style="display: table-cell; width: 25%; text-align: right;"]] [[div style="display: block; background-color: #ff0000; color: #fff; padding: 0.2em 0.2em; font-size: 1.2em; text-align: center"]] 訂閱（XX萬） [[/div]] [[/cell]] [[/row]] [[row]] [[cell colspan="2"]] 影片描述 影片描述 影片描述 [[collapsible show="顯示完整資訊" hide="只顯示部份資訊" hideLocation="bottom"]] 影片描述 影片描述 影片描述 [[/collapsible]] [[/cell]] [[/row]] [[/table]] [[div style="clear:both; opacity: 0.7;"]] ------ [[/div]] [[/div]] [[div class="suggested"]] [[table class="suggestedsec"]] [[row]] [[cell class="tbpic" style="text-align:left;"]] 下一影片 [[/cell]] [[cell style="text-align:right;"]] [[span style="color:#777;"]]自動播放[[/span]][[image http://scpsandboxcn.wikidot.com/local--files/jochoi-draft5/AutoplayOff.png style="width: 50px;"]] [[/cell]] [[/row]] [[row]] [[cell class="tbpic"]] [[a href="影片連結"]] [[image http://smlt.wikidot.com/local--files/hidden:jochoi:fragment:ytpsample/thumbnail-sample.png]] [[/a]] [[/cell]] [[cell]] [[a href="影片連結" style="font-weight:bold;"]]//影片標題//[[/a]] //上傳者// [[span style="color:#777;"]]X 次觀看[[/span]] [[/cell]] [[/row]] [[row]] [[cell colspan="2"]] ------ [[/cell]] [[/row]] [[row]] [[cell class="tbpic"]] [[a href="影片連結"]] [[image http://smlt.wikidot.com/local--files/hidden:jochoi:fragment:ytpsample/thumbnail-sample.png]] [[/a]] [[/cell]] [[cell]] [[a href="影片連結" style="font-weight:bold;"]]//影片標題//[[/a]] //上傳者// [[span style="color:#777;"]]X 次觀看[[/span]] [[/cell]] [[/row]] [[row]] [[cell class="tbpic"]] [[a href="影片連結"]] [[image http://smlt.wikidot.com/local--files/hidden:jochoi:fragment:ytpsample/thumbnail-sample.png]] [[/a]] [[/cell]] [[cell]] [[a href="影片連結" style="font-weight:bold;"]]//影片標題//[[/a]] //上傳者// [[span style="color:#777;"]]X 次觀看[[/span]] [[/cell]] [[/row]] [[row]] [[cell class="tbpic"]] [[a href="影片連結"]] [[image http://smlt.wikidot.com/local--files/hidden:jochoi:fragment:ytpsample/thumbnail-sample.png]] [[/a]] [[/cell]] [[cell]] [[a href="影片連結" style="font-weight:bold;"]]//影片標題//[[/a]] //上傳者// [[span style="color:#777;"]]X 次觀看[[/span]] [[/cell]] [[/row]] [[/table]] [[/div]] [[div class="comments"]] [[size 140%]] X則評論 [[/size]] @@ @@ [[size 130%]] 排序依據：熱門留言 [[/size]] [[table class="commentsec"]] [[row]] [[cell class="useravatar" rowspan="6"]] [[image http://scp.avn.sh/local--files/hidden:jochoi:fragment:ytpsample/avatar-sample.png]] [[/cell]] [[cell colspan="2"]] ##a00000|評論者1## [[size 85%]]##gray|X小時前##[[/size]] [[/cell]] [[/row]] [[row]] [[cell class="usercomment" colspan="2"]] 評論1 評論1 [[/cell]] [[/row]] [[row]] [[cell class="useravatar" rowspan="2"]] [[image http://scp.avn.sh/local--files/hidden:jochoi:fragment:ytpsample/avatar-sample.png]] [[/cell]] [[cell]] ##a00000|評論者2## [[size 85%]]##gray|X小時前##[[/size]] [[/cell]] [[/row]] [[row]] [[cell class="usercomment"]] 回覆1 回覆1 回覆1 [[/cell]] [[/row]] [[row]] [[cell class="useravatar" rowspan="2"]] [[image http://scp.avn.sh/local--files/hidden:jochoi:fragment:ytpsample/avatar-sample.png]] [[/cell]] [[cell]] ##a00000|評論者3## [[size 85%]]##gray|X小時前##[[/size]] [[/cell]] [[/row]] [[row]] [[cell class="usercomment"]] 回覆2 回覆2 回覆2 [[collapsible show="顯示完整內容" hide="顯示部份內容" hideLocation="bottom"]] 回覆2 回覆2 回覆2 [[/collapsible]] [[/cell]] [[/row]] [[row]] [[cell class="useravatar" rowspan="6"]] [[image http://scp.avn.sh/local--files/hidden:jochoi:fragment:ytpsample/avatar-sample.png]] [[/cell]] [[cell colspan="2"]] ##a00000|評論者4## [[size 85%]]##gray|X小時前##[[/size]] [[/cell]] [[/row]] [[row]] [[cell class="usercomment" colspan="2"]] 評論3 評論3 [[/cell]] [[/row]] [[row]] [[cell class="useravatar" rowspan="2"]] [[image http://scp.avn.sh/local--files/hidden:jochoi:fragment:ytpsample/avatar-sample.png]] [[/cell]] [[cell]] ##a00000|評論者5## [[size 85%]]##gray|X小時前##[[/size]] [[/cell]] [[/row]] [[row]] [[cell class="usercomment"]] 回覆3 回覆3 回覆3 [[/cell]] [[/row]] [[row]] [[cell class="useravatar" rowspan="2"]] [[image http://scp.avn.sh/local--files/hidden:jochoi:fragment:ytpsample/avatar-sample.png]] [[/cell]] [[cell]] ##a00000|評論者6## [[size 85%]]##gray|X小時前##[[/size]] [[/cell]] [[/row]] [[row]] [[cell class="usercomment"]] 回覆4 回覆4 回覆4 [[collapsible show="顯示完整內容" hide="顯示部份內容" hideLocation="bottom"]] 回覆4 回覆4 回覆4 [[/collapsible]] [[/cell]] [[/row]] [[/table]] [[/div]]