The Credit-Module was made by C-take, physicslike, sinazugawa and Nanimono Demonai, and improved by Dr Devan and Boyu12, for the Japanese branch, and was adapted for INT by Dr_Grom.
Usage:
This code is used instead of the rating module.
[[include credit:start-standalone]]
**Original title:** SCP-XXX - TITLE
**Author:** [[*user AUTHOR]]
**Original:** LINK TO THE ORIGINAL
**Translator:** [[*user YOU (SUPPOSEDLY)]]
**Revision by:** [[*user revised_by]]
**Image:** Credits of the image(s) with license
[[include credit:otherwise-standalone]]
Further optional Credits shown in a new window. If they are not to be used, "[[include credit:otherwise-standalone]]" is to be left out.
[[include credit:end-standalone]]
Articles with rating module use the following instead of the above [[include..]]:
[[include credit:start]]
[[include credit:otherwise]]
[[include credit:end]]
Note: In the preview of the page the module is not shown correctly, until the page is saved with the module for the first time. This is normal.
Copy all pages in the above collapsible.
- credit:start…: Translate the string "++* Credits" on the bottom.
- credit:otherwise…: Translate the strings "More information" in the top and bottom.
- credit:end…: Adjust the link "http://scp-int-sandbox.wikidot.com/credit:style/code/2" to your wiki.
- credit:style: Translate the string "Back" in the bottom of the second code box.
- credit:_template: Translate the whole page. You can remove the port-info.
- Add the line @import url('http://scp-int.wikidot.com/credit:style/code/1'); to your theme on the top, by the other @imports. Change the URL to your wiki. Borked, don't right now, not necessary.
Credit button theme
/* Structure of the credit button: +++ Normal page +++ #page-content [div] (Container of everything you put in the edit window) .creditRate [div] (Container of the credit button) .rateBox [div] (Container of the credit button for normal pages) .rate-box-with-credit-button [div] (Container putting rate-box and credit button in the same visual element. Contains borders, backgroung etc.) .page-rate-widget-box [div] (The standard rate-box) .rate-points [span] (The numerical rating) .rateup btn btn-default [span] (+ button) .ratedown btn btn-default [span] (- button) .cancel btn btn-default [span] (x button) .creditButton [div] (the new i button) .fa fa-info [a] (style of the i button) [div] clear:both (Makes sure this and everything below is placed below floating elements further up) #u-credit-view [div] (Container of the credit window, hidden when Otherwise window is shown) .fader [div] (The faded grey area "behind" the credit window) [iframe] (Script "Start") .modalcontainer [div] (Container of the actual Credit window) .modalbox [div] (The Credit window) .modalbox-title [div] (Title of Credit window) .credit [div] (Credit information) .credit [div] (Button leading to the Otherwise window, only exists when credit:otherwise is in use) .modalbox-ratemodule [div] (Rating module in the Credit window) .page-rate-widget-box [div] (The standard rate-box) .rate-points [span] (The numerical rating) .rateup btn btn-default [span] (+ button) .ratedown btn btn-default [span] (- button) .cancel btn btn-default [span] (x button) ::after (Spacer in the Credit window) #u-credit-otherwise [div] (The Otherwise window, showing additional text; hidden when Credit window is shown (only exists when credit:otherwise is in use)) .fader [div] (The faded grey area "behind" the credit window) [iframe] (Script "Otherwise") .modalcontainer [div] (Container of the actual Otherwise window) .modalbox [div] (The Otherwise window) .modalbox-title [div] (Title of Otherwise window) .credit otherwise[div] (Additional credit information) .credit-back [div] (Back-button, returning to Credit window) +++ Heritage page +++ #page-content [div] (Container of everything you put in the edit window) .creditRate [div] (Container of the credit button) .rateBox (Container of the credit button for heritage pages) .heritage-rating-module [div] (Container putting heritage-emblem, rate-box and credit button in the same visual element.) .heritage-emblem [div] (Heritage icon) .page-rate-widget-box [div] (The standard rate-box) .rate-points [span] (The numerical rating) .rateup btn btn-default [span] (+ button) .ratedown btn btn-default [span] (- button) .cancel btn btn-default [span] (x button) .creditButton [div] (the new i button) .fa fa-info [a] (style of the i button) [div] clear:both (Makes sure this and everything below is placed below floating elements further up) #u-credit-view [div] (Container of the credit window, hidden when Otherwise window is shown) .fader [div] (The faded grey area "behind" the credit window) [iframe] (Script "Start") .modalcontainer [div] (Container of the actual Credit window) .modalbox heritage [div] (The Credit window, heritage version, extension of normal version!) .modalbox-title heritage [div] (Title of Credit window) ::before (Displays heritage icon) .credit [div] (Credit information) .credit [div] (Button leading to the Otherwise window, only exists when credit:otherwise is in use) .Dendo [div] (Heritage rate module and visual extras) .heritage-rating-module [div] (Container of heritage rate module.) .heritage-emblem [div] (Heritage icon) .page-rate-widget-box [div] (The standard rate-box) .rate-points [span] (The numerical rating) .rateup btn btn-default [span] (+ button) .ratedown btn btn-default [span] (- button) .cancel btn btn-default [span] (x button) ::after (Spacer in the Credit window) #u-credit-otherwise [div] (The Otherwise window, showing additional text; hidden when Credit window is shown (only exists when credit:otherwise is in use)) .fader [div] (The faded grey area "behind" the credit window) [iframe] (Script "Otherwise") .modalcontainer [div] (Container of the actual Otherwise window) .modalbox heritage [div] (The Otherwise window) .modalbox-title [div] (Title of Otherwise window) .credit otherwise[div] (Additional credit information) .credit-back [div] (Back-button, returning to Credit window) +++ Standalone Normal +++ #page-content [div] (Container of everything you put in the edit window) .creditRate [div] (Container of the credit button) .creditButtonStandalone [div] (Container of the Standalone credit button) .fa fa-info [a] (style of the i button) [div] clear:both (Makes sure this and everything below is placed below floating elements further up) #u-credit-view [div] (Container of the credit window, hidden when Otherwise window is shown) .fader [div] (The faded grey area "behind" the credit window) [iframe] (Script "Start") .modalcontainer [div] (Container of the actual Credit window) .modalbox-standalone (Container to edit the ::after-element) .modalbox [div] (The Credit window) .modalbox-title [div] (Title of Credit window) .credit [div] (Credit information) .credit [div] (Button leading to the Otherwise window, only exists when credit:otherwise is in use) .modalbox-ratemodule [div] (Rating module in the Credit window) .page-rate-widget-box [div] (The standard rate-box) .rate-points [span] (The numerical rating) .rateup btn btn-default [span] (+ button) .ratedown btn btn-default [span] (- button) .cancel btn btn-default [span] (x button) ::after (Spacer in the Credit window) #u-credit-otherwise [div] (The Otherwise window, showing additional text; hidden when Credit window is shown (only exists when credit:otherwise is in use)) .fader [div] (The faded grey area "behind" the credit window) [iframe] (Script "Otherwise") .modalcontainer [div] (Container of the actual Otherwise window) .modalbox-standalone (Container to edit the ::after-element) .modalbox [div] (The Otherwise window) .modalbox-title [div] (Title of Otherwise window) .credit otherwise[div] (Additional credit information) .credit-back [div] (Back-button, returning to Credit window) */ /* +++ Credit- and Otherwise window +++ */ /* --- Credit window containers, buttons etc. --- */ #u-credit-view, #u-credit-otherwise { width: 100%; height: 100%; top: 0px; bottom: 0; left: 0; right: 0; position: fixed; display: flex; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; z-index: 10; } #u-credit-view:not(:target), #u-credit-otherwise:not(:target) { opacity: 0; display: none; } #u-credit-view:target, #u-credit-otherwise:target { opacity: 1; display: block; animation-duration: 0.5s; animation-name: fade-in; -moz-animation-duration: 0.5s; -moz-animation-name: fade-in; -webkit-animation-duration: 0.5s; -webkit-animation-name: fade-in; } @-webkit-keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } #u-credit-otherwise .modalbox { background-color: #fff; } #u-credit-view .modalbox:after { content: ""; display: block; width: 100%; height: 30px; } #u-credit-view .modalbox-standalone .modalbox:after { display: none; } #u-credit-view .credit-back { display:none; } #u-credit-otherwise .creditBottomRate { display:none; } @media (max-width: 767px) { #u-credit-view { height: 100%; top: 0; } .modalcontainer{ min-width: 300px; } .modalbox{ min-width: 300px; } } #u-credit-view-button { display: block; text-align: right; } /* --- This is the grey area "behind" the Credit- and Otherwise window --- */ .fader{ position: absolute; background-color: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; top: 0; bottom: 0; left: 0; right: 0; } .fader iframe, .fader a { position: absolute; width: 100%; height: 100%; top: 0; bottom: 0; left: 0; right: 0; } /* --- Container of the Credit- and Otherwise window, displayed upon pressing the credit button --- */ .modalcontainer{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 450px; max-width: 95vw !important; height: 200px; margin: auto; pointer-events: auto !important; } /* --- The actual Credit- and Otherwise window and all contents --- */ .modalbox{ position: relative; /*min-width: 400px;*/ min-height: 200px; padding-bottom: 1em; background-color: #fff; border-radius: 5px; box-shadow: 0 2px 6px rgba(102, 0, 0, .5); max-height: 50vh; pointer-events: auto !important; } .modalbox .modalbox-title { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 50px; background: #ccc; margin-bottom: 14px; border-radius: 5px 5px 0 0; } .modalbox .modalbox-title.heritage h2 { display: flex; align-items: center; } .modalbox .modalbox-title.heritage h2:before { content: ""; background: url('http://scp-jp.wdfiles.com/local--files/heritage-collection-jp/heritage-emblem.png') no-repeat; background-size: 40px, 40px; display: inline-flex; width: 40px; height: 40px; margin-right: 0.3em; } .modalbox .credit { margin: 2em; word-wrap:break-word; overflow-wrap:break-word; } .modalbox .credit:not(:first-child) { margin-top: 0; margin-bottom: 0.5em; } .modalbox .credit:not(:last-child) { margin-bottom: 0; } .modalbox .credit + .credit { margin-bottom: 1em; } .modalbox .credit.otherwise { overflow-y: auto; height: 30vh; /*min-height: 150px;*/ /*max-height: 300px;*/ } .Dendo{ display: none; justify-content: center; } .Dendo .heritage-rating-module{ float:right; display: -webkit-inline-flex; display: inline-flex; -webkit-flex-direction: row; flex-direction: row; vertical-align: top; margin: 0; padding: 1px 0px 1px 5px; } .modalbox > .Dendo { padding-bottom: 0.5em; } .modalbox .modalbox-ratemodule { display: flex; justify-content: center; align-items: center; margin: 0.5em 0; } .creditBottomRate, .modalbox > .Dendo, .modalbox-ratemodule { position: absolute; width: 100%; left: 0; bottom: 1em; } .modalbox.heritage { background: linear-gradient(to bottom, #fff6f0, #fff); border: #633 solid 7px; box-shadow: 2px 2px 6px rgba(204, 192, 102, .8), -2px -2px 6px rgba(204, 192, 102, .8); } #u-credit-otherwise .modalbox.heritage { background: linear-gradient(to bottom, #fff6f0, #fff); box-shadow: 2px 2px 6px rgba(204, 192, 102, .8), -2px -2px 6px rgba(204, 192, 102, .8); } .modalbox.heritage .modalbox-title { background: linear-gradient(to bottom, #633, #966); color: #fff; border-radius: 0; } .credit-back .back a { display: none; } .credit-back .back a::before { content: "Back"; } /* +++ Credit button +++ */ /* --- Primary container with rating module and credit button --- */ .creditRate { display: -webkit-inline-flex; display: inline-flex; -webkit-flex-direction: row; flex-direction: row; align-items: center; float:right; margin-bottom:10px; margin-right:2em; } .creditRate .page-rate-widget-box { display: inline-flex; align-items: center; } .creditRate .heritage-rating-module { float: right; display: -webkit-inline-flex; display: inline-flex; -webkit-flex-direction: row; flex-direction: row; vertical-align: top; margin: 0; border-radius: 7px; box-shadow: 1px 1px 3px rgba(0, 0, 0, .5); padding: 0 1px 0 5px; align-items: center; } .creditRate .heritage-rating-module .page-rate-widget-box{ margin:0; } .creditRate .audio-img-block { top: 0; } .creditRate .rateBox{ display:inline-flex; } /* --- Container to provide a mutual background and border around the rating module and credit button --- */ .rate-box-with-credit-button { background-color: #633; border-radius: 5px; box-shadow: 1px 1px 3px rgba(0,0,0,.5); min-width: 150px; height: 18px; display: inline-flex; flex-direction: row; justify-content: space-between; align-items: center; } /* --- General settings for the Credit button --- */ .rate-box-with-credit-button .creditButton { display: inline-flex; justify-content: center; align-items: center; width: 24px; height: 16px; } .creditButton{ font-size: 0.8em; } .creditButton a{ width: 24px; margin-left: 0; color: #fff6f0; border-left: 1px solid #966; text-align: center; text-decoration: none; font-size: 11px; } .creditButton a:hover { color: #c99; } .creditButton .fa { height: 12px; } .creditButton .fa-info:before { position: relative; top: 1px; } /* --- Heritage rating module with Credit button --- */ .heritage-rating-module ~ .creditButton { display: flex; justify-content: center; align-items: center; background-color: #633; border: solid 1px #ccc066; border-radius: 5px; box-shadow: 1px 1px 3px rgba(0, 0, 0, .5); padding: 0 5px 0 0; margin-left: 5px; } .heritage-rating-module ~ .creditButton a{ margin-left: 0; margin-right: -5px; } .heritage-rating-module ~ .creditButton a:hover { color: #966; } .heritage-rating-module .heritage-emblem { width: 20px; height: 20px; top: 0; margin-right: 0; } .heritage-rating-module .heritage-emblem a { width: 20px; height: 20px; display: inline-flex; justify-content: center; align-items: center; } .heritage-rating-module .heritage-emblem img { width: 20px; height: 20px; } /* .heritage-rating-module .page-rate-widget-box span { box-sizing: content-box; } */ .heritage-rating-module .page-rate-widget-box .rateup, .heritage-rating-module .page-rate-widget-box .ratedown { border-top: solid 1px #fff6f0; border-bottom: solid 1px #fff6f0; } .heritage-rating-module .page-rate-widget-box .rate-points { padding-left: 8px; } .heritage-rating-module .page-rate-widget-box .cancel a { padding: 2px 5px; } /* --- Standalone Credit-Button --- */ .creditButtonStandalone a{ display: inline-flex; justify-content: center; align-items: center; width: 24px; height: 16px; background-color: #633; border: 1px solid #633; border-radius: 5px; box-shadow: 1px 1px 3px rgba(0,0,0,.5); color: #fff6f0; } .creditButtonStandalone a:hover { color: #c99; text-decoration: none; } /* --- The actual rating module --- */ .rate-box-with-credit-button .page-rate-widget-box { box-shadow: none; } .rate-box-with-credit-button .page-rate-widget-box .rate-points { background-color: transparent !important; border: none; position: relative; top: -1px; } .rate-box-with-credit-button .page-rate-widget-box .cancel { border-top: solid 1px #633; border-bottom: solid 1px #633; border-left: none; border-right: none; background-color: transparent; border-radius: 0; } .rate-box-with-credit-button .page-rate-widget-box span { align-items: center; } .rate-box-with-credit-button .page-rate-widget-box .cancel a { padding: 3px 5px; } .modalbox .page-rate-widget-box { margin-right: 0; display: inline-flex; justify-content: center; align-items: center; } .rate-box-with-credit-button .page-rate-widget-box { margin: 0; } .page-rate-widget-box span { display: inline-flex; justify-content: center; height: 18px; box-sizing: border-box; } .page-rate-widget-box .rate-points { font-family: verdana, 'Arial Rounded MT Bold', arial, helvetica, sans-serif; font-weight: bolder; font-size: 11px; padding-top: 1px !important; } .page-rate-widget-box .cancel { padding: 0 2px 0 3px; } .page-rate-widget-box .cancel a { font-family: 'FontAwesome'; font-weight: 400; font-size: 0; color: #fff6f0; padding: 1px 5px; height: 12px; } .page-rate-widget-box .cancel a:hover { color: #c99; text-decoration: none; } .page-rate-widget-box .cancel a:before { content: '\f00d'; font-size: 11px; } .page-rate-widget-box .rateup a, .page-rate-widget-box .ratedown a { display: inline-flex; justify-content: center; align-items: center; font-size: 0; font-family: 'FontAwesome'; font-weight: 400; padding: 2px 5px; height: 16px; box-sizing: border-box; } .page-rate-widget-box .rateup a:before { content: '\f067'; font-size: 10px; } .page-rate-widget-box .ratedown a:before { content: '\f068'; font-size: 10px; } #page-content div.creditRate, #page-content div.creditRate div { max-width: none; } .modalbox .heritage-rating-module .page-rate-widget-box .rateup, .modalbox .heritage-rating-module .page-rate-widget-box .ratedown { box-sizing: border-box; } @media (max-width: 479px) { .creditBottomRate .Dendo { position: absolute; top: 0; left: 2em; } } /* +++ Page options adjustments +++ */ #action-area .page-rate-widget-box .cancel a { padding: 2px 5px; } /* +++ Additions for EN +++ */ /* Give a little expandability to the box */ .credit.first { height: 20vh; overflow-y: auto; } /* Add a lil X to close the box */ .close-credits { position: absolute; top: 1.2em; right: 1.5em; width: 1em; }
Credit button script 2
This script had to be copied here to change the "<a class="back" style="cursor: pointer;">Back</span>" string. Translate it when you copy it, it is at the very end.
Original (second script)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"/> <meta http-equiv="Content-Style-Type" content="text/css"/> <meta http-equiv="content-language" content="ja,jp-ja"/> <meta charset="UTF-8"/> <link rel="stylesheet" href="/component:theme/code/1"> <style> body{ background:transparent; padding:0; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> /*! * jQuery JavaScript Library v3.2.1 * https://jquery.com/ * * Includes Sizzle.js * https://sizzlejs.com/ * * Copyright JS Foundation and other contributors * Released under the MIT license * https://jquery.org/license * * Date: 2017-03-20T18:59Z */ //--------------------------- //ProjectName: Credit Module //FunctionName: Back Module //CreatedBy C-take , sinazugawa //License MIT //--------------------------- $(function() { var ua = navigator.userAgent.toLowerCase(); var bReload= true; if ( ( ua.indexOf("applewebkit") >= 0 || ua.indexOf("firefox") >= 0 ) && ua.indexOf("edge") == -1 ) bReload= false; $('.back').click(closeCredit); function closeCredit() { if ( bReload ) { history.go(-1); parent.location.href = document.referrer.split('#')[0]; } else { history.go(-1); } return false; } }); </script> </head> <body> <div style="width: 100%; text-align: center;"> <a class="back" style="cursor: pointer;">Back</span> </div> </body> </html>
Close-Credit-Window-Button-Script
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" style="padding:0;margin:0;"> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"/> <meta http-equiv="Content-Style-Type" content="text/css"/> <meta http-equiv="content-language" content="ja,jp-ja"/> <meta charset="UTF-8"/> <link rel="stylesheet" href="/component:theme/code/1"> <style> body{ background:transparent; padding:0; } body div a { font-size: 14px; color: #901; } body div a:before { content: '\f00d'; font-family: 'FontAwesome'; font-weight: 400; } body div a:hover { color: #c34; text-decoration: none; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(function() { var ua = navigator.userAgent.toLowerCase(); var bReload= true; if ( ( ua.indexOf("applewebkit") >= 0 || ua.indexOf("firefox") >= 0 ) && ua.indexOf("edge") == -1 ) bReload= false; $('.back').click(closeCredit); function closeCredit() { if ( bReload ) { history.go(-1); parent.location.href = document.referrer.split('#')[0]; } else { history.go(-1); } return false; } }); </script> </head> <body style="padding:0;margin:0;"> <div style="width: 100%; text-align: center;"> <a class="back" style="cursor: pointer;"> </span> </div> </body> </html>