info:style

The Credit Module was created by C-takeC-take, physicslikephysicslike, sinazugawasinazugawa and Nanimono DemonaiNanimono Demonai for the Japanese wiki, adapted by Dr_GromDr_Grom for the German wiki, and adapted by CroquemboucheCroquembouche and RimpleRimple for the English wiki (as the Info module).

Usage

At the top of your page, insert the following code instead of the Rating Module and the [[>]] things. Remove any lines that aren't needed, and between each [[include …]], feel free to add your own.

[[include info:start]]
**SCP-XXXX:** TITLE
**NAME OF TALE/GOI-FORMAT**
**Author:** [[*user AUTHOR]]
**Original:** LINK TO ORIGINAL
**Translator:** [[*user TRANSLATOR]]
**Image:** Put any licensing information for images here
Add anything else you'd like the reader to know
[[include info:more]]
More, optional info that appears in a new window. Omit the "[[include info:more]]" if you don't want this
[[include info:end]]

If your article does not have a rating module, then use the following [[include]]'s instead of the ones above.

[[include info:start-standalone]]
[[include info:more-standalone]]
[[include info:credit:end-standalone]]

Warning: When previewing the page using the "Preview" button, the credits module will not be displayed correctly until the page has been Saved. This is normal.

Note: Multipage ListPages modules are not supported. Use perPage="250" to maximise the number of articles you can list per page.

Note: If you want to use this module on another wiki (for example, on the sandbox), prefix the page name with ":scp-wiki:". For example, [[include :scp-wiki:info:start]].


@import url('http://cdnjs.cloudflare.com/ajax/libs/cc-icons/1.2.1/css/cc-icons.min.css');
 
#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;
    animation-duration: 0.3s;
    animation-name: fade-in;
    -moz-animation-duration: 0.5s;
    -moz-animation-name: fade-in;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-name: fade-in;
}
 
@keyframes fade-in {
    0% {
        display: none;
        opacity: 0;
    }
    1% {
        display: block;
        opacity: 0;
    }
    100% {
        display: block;
        opacity: 1;
    }
}
@-moz-keyframes fade-in {
    0% {
        display: none;
        opacity: 0;
    }
    1% {
        display: block;
        opacity: 0;
    }
    100% {
        display: block;
        opacity: 1;
    }
}
@-webkit-keyframes fade-in {
    0% {
        display: none;
        opacity: 0;
    }
    1% {
        display: block;
        opacity: 0;
    }
      100% {
        display: block;
        opacity: 1;
    }
}
 
.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;
}
 
.modalcontainer{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 600px;
    max-width: 95vw !important;
    height: 350px;
    margin: auto;
    pointer-events: auto !important;
}
.modalbox{
    /*min-width: 400px;*/
    background: #fefefe;
    background:linear-gradient(#eee 51px,#fefefe 51px,#fefefe);
    border: #333 solid 1px;
    border-radius: 5px;
    box-shadow: 0 2px 6px rgba(102, 0, 0, .5);
    padding:4px;
    max-height: 50vh;
    pointer-events: auto !important;
}
#u-credit-otherwise .modalbox {
    background:linear-gradient(#eee 51px,#fefefe 51px,#fefefe);
}
.modalbox .credit {
    margin: 2em;
}
.modalbox .credit p {
    /*margin: 0;*/
}
.modalbox .credit:not(:first-child) {
    margin-top: 0;
}
.modalbox .credit:not(:last-child) {
    margin-bottom: 0;
}
.modalbox .credit.otherwise {
    overflow-y: auto;
    height: 30vh;
}
 
#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;
}
 
.Dendo{
    display:none;
    text-align:right;
}
.Dendo .heritage-rating-module{
    float:right;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    vertical-align: top;
}
 
.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 p{
    display:inline;
    padding: 0;
    margin:0;
    line-height: 0;
}
 
.creditRate .page-rate-widget-box {
    margin:0;
    padding:0;
}
.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;
}
.creditRate .heritage-rating-module .page-rate-widget-box{
    margin:0;
}
.creditRate .audio-img-block {
    top: 0;
}
.rate-box-with-credit-button{
    background-color: #633;
    border: solid 1px #633;
    border-radius: 5px;
    box-shadow: 1px 1px 3px rgba(0,0,0,.5);
}
.rate-box-with-credit-button .page-rate-widget-box .cancel {
    border-right: 0;
}
.rate-box-with-credit-button .page-rate-widget-box{
    box-shadow: none;
}
.rate-box-with-credit-button .creditButton {
    display: inline-block;
}
.creditRate .rateBox{
    display:inline-block;
}
.creditRate .rateBox p{
    display:inline;
    margin:0;
    padding:0;
}
 
.creditButton p{
    font-size: 0.8em;
}
.creditButton p a{
    width: 17px;
    margin-left: -5px;
    padding-top: 0.5px;
    color: #ffffff;
    border-left: solid 1px #966;
    text-align: center;
    text-decoration: none;
    font-size: 12px;
}
.creditButton p a:hover {
    color: #3498db;
}
 
.heritage-rating-module .creditButton p a{
    margin-left: 1px;
    margin-right: -5px;
    padding-left: 1px;
    padding-top: 1.5px;
    color: #ffffff;
    font-size: 13px;
}
.heritage-rating-module .creditButton p a:hover {
    color: #ccc066;
}
 
.modalbox .page-rate-widget-box {
    margin-right: 0;
}
 
.credit-back .back a {
    display: none;
}
.credit-back .back a::before {
    content: "Zurück";
}
 
.creditButtonStandalone p a{
    display: block;
    width: 17px;
    height: 17px;
    line-height: 17px;
    border-radius: 50%;
    color: #ffffff;
    text-align: center;
    background: #744;
    box-shadow: 0 0 3px gray;
    font-size: 12px;
}
.creditButtonStandalone p a:hover {
    background: #3498db;
}
 
/* Give a little expandability to the box */
.credit.first {
    height: 30vh;
    overflow-y: auto;
}
 
/* Add a lil X to close the box */
.close-credits {
    position: absolute;
    top: 1.5em;
    right: 1.5em;
    width: 1em;
}



This script had to be copied here to change a string.
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>



For the lil "X" button
<!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;
        }
        </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;">X</span>
        </div>
    </body>
</html>
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License