info:style

Module Ghi Công được tạo bởi C-takeC-take, physicslikephysicslike, sinazugawasinazugawa7happy77happy7 cho wiki Nhật ngữ, điều chỉnh bởi Dr_GromDr_Grom cho wiki Đức, và điều chỉnh bởi CroquemboucheCroquemboucheRimpleRimple cho wiki Anh ngữ (dưới dạng module thông tin).

Module thông tin là dạng thế của hộp đánh giá cho phép bạn ghi bất cứ thứ gì ngoài vũ trụ vào trong đó. Nó sẽ hiện dưới một bảng khi người đọc bấm vào biểu tượng thông tin ngay sát hộp đánh giá.

Nó thường được dùng để thêm thông tin như tiêu đề SCP, bình luận, thông tin giấy phép hoặc ghi công, những thứ vô cùng kì quặc trong một văn bản viễn tưởng.

Sử dụng

Ở đầu trang, bạn thêm code sau thay vì Module Đánh Giá và mấy cái [[>]]. Xóa tất cả các dòng không cần thiết, và ở giữa [[include …]], tự do thêm những cái mình muốn vào.

[[include :scp-vn:info:start]]
**SCP-XXXX:** TIÊU ĐỀ
**TÊN CỦA TRUYỆN/TÀI LIỆU GOI**
**Tác giả:** [[*user TÁC GIẢ]]
**Gốc:** DẪN NGUỒN VỀ TRANG GỐC
**Dịch giả:** [[*user DỊCH GIẢ]]
**Ảnh:** Đặt bất cứ thông tin giấy phép cho ảnh tại đây
Thêm bất cứ thứ gì mà bạn muốn người đọc đọc
[[include :scp-vn:info:more]]
Thông tin thêm, tùy chọn hiển thị ở cửa sổ mới. Xóa "[[include :scp-vn:info:more]]" nếu bạn không muốn cái này
[[include :scp-vn:info:end]]

Nếu tài liệu của bạn không có hộp đánh giá, hãy sử dụng lệnh [[include]] sau thay cho cái ở trên.

[[include :scp-vn:info:start-standalone]]
[[include :scp-vn:info:more-standalone]]
[[include :scp-vn:info:end-standalone]]

Cảnh báo: Khi xem trước trang bằng nút "Preview", module ghi công sẽ không hiển thị chính xác cho tới khi bấm nút Save. Điều này hoàn toàn bình thường.

Lưu ý: Module ListPages Đa trang không được hỗ trợ. Sử dụng perPage="250" để tối đa hóa số trang hiển thị.


Module thông tin thiết kế CSS (gốc)

@import url('https://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;
}
 
.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;
}

Module thông tin "start" iframe (Gốc)

<!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"/>
    <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;
 
          $('.fader').on("click",closeCredit);
          function closeCredit() {
              if ( bReload ) {
                  history.go(-1);
                  parent.location.href = document.referrer.split('#')[0];
              } else {
                  history.go(-1);
              }
 
              $('.fader').off("click");
           setTimeout(function(){
               $('.fader').on("click",closeCredit);
           },1200);
          }
      });
    </script>
    <style>
      .fader {
        width: 100%;
        height: 100%;
        position: fixed;
      }
    </style>
  </head>
  <body>
    <div class='fader'></div>
  </body>
</html>

Module thông tin "end" iframe (Gốc)

<!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>

Module thông tin "otherwise" iframe (Gốc)

<!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"/>
    <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;
 
          $('.fader').click(closeCredit);
          function closeCredit() {
              if ( bReload ) {
                  history.go(-2);
                  parent.location.href = document.referrer.split('#')[0];
              } else {
                  history.go(-2);
              }
          }
      });
    </script>
    <style>
      .fader {
        width: 100%;
        height: 100%;
        position: fixed;
      }
    </style>
  </head>
  <body>
    <div class='fader'></div>
  </body>
</html>

Module thông tin 'X' nút đóng iframe

<!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>
Nếu không có ngoại lệ được nêu, nội dung của trang này được xuất bản dưới giấy phép Creative Commons Attribution-ShareAlike 3.0 License