BLANKSTYLE CSS

BLANKSTYLE CSS
Placeholder McD, HarryBlank
Đăng Tải vào tháng Ba 2021

Cảm ơn stormbreath, EstrellaYoshte, và Croquembouche vì đã tạo nên đa số các code sử dụng trong theme đây.

• 

  close

  Info

  ---

  X

  BLANKSTYLE CSS
  Bởi: Placeholder McD, HarryBlank

  Cảm ơn stormbreath, EstrellaYoshte, và Croquembouche vì đã tạo nên đa số các code sử dụng trong theme đây. Nhất là Estrella.

  ---

Gì Đây?

Đây là Blankstyle CSS: một dáng hiển thị bởi Placeholder McD và HarryBlank để sử dụng trong các bài viết sau này. Nó được tạo với mục đích giúp dễ dàng sử dụng và cập nhật cho mọi trường hợp. Có thể nói nó là dạng nền trắng của Penumbra Theme bởi EstrellaYoshte, thêm cả mấy cái hay ho riêng của Blank.

Gần như nó sẽ không hoạt động với các theme khác, nhất là các bản Black Highlighter. Đừng có dùng theme này trừ khi bạn biết bạn đang làm gì.

---

Hướng Dẫn Sử Dụng

Để sử dụng theme này, sao chép đoạn mã sau vào đầu bài viết của bạn:

[[include :scp-vn:theme:blankstyle]]

Lưu ý rằng theme đây có bao gồm các component sau:

• Toggle Sidebar
• Fade-In (mặc định speed=3)
• ACS Animation
• BetterFootnotes

Nếu sử dụng với hộp thông tin kèm đánh giá, bọc module đấy trong các [[div]] để đảm bảo rằng trang thông tin không bị trì hoãn do Fade In.

Theme này mượn code từ Image Block Peppo của PeppersGhost và EstrellaYoshte giúp làm cho thanh trên và hộp ảnh chuyển lùi về trung tâm, tạo nên hình sắc thẩm mỹ đối với màn hình nhỏ (hay: di động). Nó cũng mượn công nghệ hộp cạnh siêu đẳng từ Estrella trong Theme Penumbra, và đa số code được lấy chỉnh từ Paperstack Theme.

Để biết thêm những tính năng khác của BLANKSTYLE CSS, truy cập phần bình luận để đọc thông tin sửa lỗi.

---

BẢNG MÀU ACS

Những bảng dưới đây là bảng được tô màu bằng cách bọc bảng thường trong một div, từ "table1" đến "table5", theo thứ tự.Lưu ý rằng nếu bọc một hộp ảnh thì việc tô màu cũng diễn ra tương tự và được áp dụng với phụ đề ảnh. Thêm nữa, đây là BetterFootnote, việc sử dụng chi tiết có thể tìm thấy trong link trên.. Những màu này tuân theo 5 cấp độ căn bản của Thanh ACS Component. Div table6 sẽ cho màu tím.

Đây là một bảng bình thường;
thử nghiệm mấy cái này chán phèo

Đây là một bảng LỤC;
thử nghiệm vô cùng vui.

Đây là một bảng LAM;
thử nghiệm là siêu, siêu vui ấy.

Đây là một bảng VÀNG;
thử nghiệm là siêu, siêu vui ấy.

Đây là một bảng CAM;
thử nghiệm là siêu, siêu vui ấy.

Đây là một bảng ĐỎ;
thử nghiệm là siêu, siêu không vui ấy.

Đây là một bảng TÍM
nó là thử nghiệm

Lưu ý: Màu tím là dành cho vật thể Cấp Thaumiel, và tài liệu cho Cấp 6 (Tuyệt Mật) hay Cấp Phép 6/Provisional (Thaumiel-Proviso). Tất cả là do sở thích thẩm mỹ của Placeholder McD, và sự dễ dãi của Harry khi cho phép tôi thêm mấy thứ tôi thích trong hồ sơ của anh.

Div tableb cũng sẽ tách hộp và tiêu đề.

Đây là một bảng TÁCH;
thử nghiệm cũng khá vui đấy chứ!

_{Harry đã thiết kế mấy cái này lâu, lâu lắm rồi. Đúng là đồ mọt sách.}

---

Mã Nguồn

+ CODE

/*
    BLANKSTYLE CSS
    [2021 Wikidot Theme]
    Bởi Placeholder McD và HarryBlank
    Dựa trên:
       Theme Paperstack bởi EstrellaYoshte
       Theme Penumbra bởi EstrellaYoshte
*/
 
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,800;1,800&display=swap');
 
#page-content { font-size: 0.8rem; }
 
#main-content {
    top: -1.6rem;
    padding: 0.2em;
}
 
div#container-wrap {
     background-image: none;
}
 
div#header {
    background-image: none;
}
 
#header h1, #header h2 { margin-left: 0; float: none; text-align: center; }
#header h2 { margin-top: 0.5rem; }
#header h1 span, #header h2 span { font-size: 0; display: none;}
#header h1 a::before, #header h2::before {
    color: #000;
    letter-spacing: 1px;
    font-family: 'Montserrat', sans-serif !important;
    text-shadow: none;
}
 
#header h1 a::before {
  content: var(--header-title, "ĐIỂM-43 NC\0026 QT");
  font-weight: 400;
  font-size: 1.3em;
}
 
#header h2::before {
  content: var(--header-subtitle, "LẬT ĐỔ THƯỜNG LỆ");
  font-weight: 700;
  font-size: 1.3em;
}
 
@media (max-width: 707px) {
    #header h1 a::before {
        font-size: 1.6em;
    }
}
 
#login-status,
#login-status a {
    color: #333333;
}
 
#page-title {
    display: none;
}
 
#footer, #footer a {
    background: transparent;
    color: #333333;
}
 
#search-top-box-input,
#search-top-box-input:hover,
#search-top-box-input:focus,
#search-top-box-form input[type=submit],
#search-top-box-form input[type=submit]:hover,
#search-top-box-form input[type=submit]:focus {
    border: none;
    background: #333333;
    box-shadow: none;
    border-radius: 0px;
    color: #efefef;
}
 
#search-top-box input.empty {
    color: #999999;
}
 
#search-top-box {
    top: 2.3rem!important;
    right: 8px;
}
 
#top-bar {
   display: flex;
   justify-content: center;
   right: 0;
   top: 7.9rem;
}
 
#top-bar, #top-bar a {
    color: #333333;
}
 
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Montserrat', sans-serif;
    color: #000;
    letter-spacing: 1px;
}
 
h1 {
    font-size: 2em;
}
 
h2 {
    font-size: 1.45em;
}
 
div#extra-div-1 {
    height: 160px;
    width: 100%;
    top: 0;
    position: absolute;
    background: url('https://scp-wiki.wdfiles.com/local--files/theme%3Ablankstyle/43Head.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    z-index: -1;
}
 
@media (max-width: 707px) {
    div#extra-div-1 {
        top: 15px;
    }
}
 
body {
    background-image: linear-gradient(
        to bottom,
        #e0e0e0, #e0e0e0 90px,
        #e0e0e0 90px, #ffffff 200px,
        #ffffff 200px, #ffffff 100%);
    background-repeat: no-repeat;
}
 
:root {
  --timeScale: 1.5;
  --timeDelay: 1.5s;
  --posX: calc(50% - 358px - 13rem);
}
 
#page-content hr {
    background-color: #000;
}
 
#page-content tr th {
    padding: 6px;
    border: #000 1px solid;
}
 
#page-content tr td {
    padding: 12px;
    border: #000 1px solid;
    line-height: 1.4;
}
 
#page-content .sidebox tr td,
#page-content .sidebox tr th {
    padding: 0.35em;
}
 
#side-bar {
    border-right: 1px solid #333;
    background: #DDD;
}
 
#side-bar .side-block {
    border: 1px solid #333;
    border-radius: 0;
    box-shadow: none;
}
 
#top-bar div.open-menu a {
    border: 1px solid #333;
    border-radius: 0;
    box-shadow: none;
}
 
@media (max-width: 767px) {
    #side-bar:target {
        border: 1px black;
        box-shadow: none;
    }
}
 
#side-bar .side-block {
    border: 1px solid #333;
    border-radius: 0;
    box-shadow: none;
    background-color: #FDF6D7;
}
#side-bar .side-block.media {
    background-color:#D7EFE7;
}
#side-bar .side-block.resources {
    background-color:#F5D8E0;
}
 
#page-content .creditRate{
    margin: unset;
    margin-bottom: 4px;
}
#page-content .rate-box-with-credit-button {
    background-color: #ffffff;
    border: solid 1px #000;
    box-shadow: none;
    border-radius: 0;
}
 
#page-content .rate-box-with-credit-button .fa-info {
    border: none;
    color: #333333;
}
 
#page-content .rate-box-with-credit-button .fa-info:hover {
    background: #333333;
    color: #ffffff;
}
 
.rate-box-with-credit-button .cancel {
    border: solid 1px #ffffff;
}
 
/* ---- ĐÁNH GIÁ TRANG ---- */
 
.page-rate-widget-box {
    box-shadow: none;
    border: solid 1px #000;
    margin: unset;
    margin-bottom: 4px;
    border-radius: 0;
}
 
.page-rate-widget-box .rate-points {
    background-color: #ffffff !important;
    color: #333333 !important;
    border: none;
    border-radius: 0;
}
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {
    background-color: #ffffff;
    border-top: none;
    border-bottom: none;
}
 
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a {
    background: transparent;
    color: #333333;
}
 
.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover {
    background: #333333;
    color: #ffffff;
}
 
.page-rate-widget-box .cancel {
    background: transparent;
    background-color: #ffffff;
    border: none;
    border-radius: 0;
}
 
.page-rate-widget-box .cancel a {
    color: #333333;
}
.page-rate-widget-box .cancel a:hover {
    background: #333333;
    color: #ffffff;
    border-radius: 0;
}
#page-content .rate-box-with-credit-button .page-rate-widget-box { border: none; }
 
.anchor {
    position: sticky;
    height:0;
    top: 0;
}
.sidebox {
    padding: .14rem;
    margin-top: 0;
    margin-bottom: 8px;
    width: calc((100vw - 870px)/2);
    max-height: calc(100vh - 18rem);
    position: absolute;
    top: 0;
    left: 103.5%;
    z-index: 5;
    overflow: auto;
    box-sizing: border-box;
}
@media (max-width: 1290px) {
    .sidebox {
        display: none;
        visibility:hidden;
    }
}
 
.scp-image-block {
    box-shadow: none;
}
 
/* ---- NỀN TAB YUI ---- */
.yui-navset .yui-nav a,.yui-navset .yui-navset-top .yui-nav a{background-color:inherit;background-image:inherit}.yui-navset .yui-nav a:hover,.yui-navset .yui-nav a:focus{background:inherit;text-decoration:inherit}.yui-navset .yui-nav .selected a,.yui-navset .yui-nav .selected a:focus,.yui-navset .yui-nav .selected a:hover{color:inherit;background:inherit}.yui-navset .yui-nav,.yui-navset .yui-navset-top .yui-nav{border-color:inherit}.yui-navset li{line-height:inherit}
 
/* ---- TINH CHỈNH TAB YUI ----*/
 
 .yui-navset .yui-nav,
 .yui-navset .yui-navset-top .yui-nav{
     display: flex;
     flex-wrap: wrap;
     width: calc(100% - .125rem);
     margin: 0 auto;
     border-color: #333333;
     box-shadow: none;
}
 .yui-navset .yui-nav a, /* ---- Hệ thống sửa Link ---- */
 .yui-navset .yui-navset-top .yui-nav a{
     color: #333333;
    /* ---- Màu nền Tab | [CHƯA ĐƯỢC CHỌN] ---- */
     background-color: #efefef;
     border: unset;
     box-shadow: none;
     box-shadow: none;
}
 .yui-navset .yui-nav a:hover,
 .yui-navset .yui-nav a:focus{
     color: #ffffff;
    /* ---- Màu nền Tab | [DI QUA] ---- */
     background-color: #333333;
}
 .yui-navset .yui-nav li, /* ---- Hệ thống Listitems ---- */
 .yui-navset .yui-navset-top .yui-nav li{
     position: relative;
     display: flex;
     flex-grow: 2;
     max-width: 100%;
     margin: 0;
     padding: 0;
     color: #ffffff;
     background-color: #ffffff;
     border-color: transparent;
     box-shadow: none;
}
 .yui-navset .yui-nav li a,
 .yui-navset-top .yui-nav li a,
 .yui-navset-bottom .yui-nav li a{
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
}
 .yui-navset .yui-nav li em{
     border: unset;
}
 .yui-navset .yui-nav a em,
 .yui-navset .yui-navset-top .yui-nav a em{
     padding: .35em .75em;
 
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
}
 .yui-navset .yui-nav .selected, /* ---- Hệ thống Lựa chọn ---- */
 .yui-navset .yui-navset-top .yui-nav .selected{
     flex-grow: 2;
     margin: 0;
     padding: 0;
    /* ---- Màu nền Tab | [ĐƯỢC CHỌN] ---- */
     background-color: #333333;
}
 .yui-navset .yui-nav .selected a,
 .yui-navset .yui-nav .selected a em{
     border: none;
}
 .yui-navset .yui-nav .selected a{
     width: 100%;
     color: #ffffff;
}
 .yui-navset .yui-nav .selected a:focus,
 .yui-navset .yui-nav .selected a:active{
     color: #ffffff;
     background-color: #333333;
}
 .yui-navset .yui-content {
    background-color: #ffffff;
    box-shadow: none;
}
 .yui-navset .yui-content,
 .yui-navset .yui-navset-top .yui-content{
    padding: .5em;
    border: 1px solid #333;
    box-sizing: border-box;
}
 
/*---- THANH CUỘN ----*/
 
::-webkit-scrollbar {
    width: 10px;
}
 
::-webkit-scrollbar-track {
    background: #FFF;
    border-left: 1px solid #333;
}
 
::-webkit-scrollbar-thumb {
     background: #CCC;
     border: #333 1px solid;
}
 
::-webkit-scrollbar-thumb:hover {
     background: #EEE;
}
 
/*---- CHỈNH ẢNH GIỮA cảm ơn EstrellaYoshte và PeppersGhost ----*/
 
.imagediv {
    float: right;
    margin: 15px
}
 
@media (max-width: 540px) {
  .imagediv {
    float: none;
    text-align:center;
    margin: auto;
  }
}
 
@media only screen and (max-width: 600px) {
    .scp-image-block.block-right{
        float: none;
        margin: 10px auto;
    }
}
 
/*---- CÁC DIV BẢNG MÀU ACS ----*/
 
#page-content .table1 tr th,
#page-content .table1 .scp-image-block .scp-image-caption {
    background-color: #D7EFE7;
}
 
#page-content .table2 tr th,
#page-content .table2 .scp-image-block .scp-image-caption {
    background-color: #D8ECF4;
}
 
#page-content .table3 tr th,
#page-content .table3 .scp-image-block .scp-image-caption {
    background-color: #FDF6D7;
}
 
#page-content .table4 tr th,
#page-content .table4 .scp-image-block .scp-image-caption {
    background-color: #FFDABF;
}
 
#page-content .table5 tr th,
#page-content .table5 .scp-image-block .scp-image-caption {
    background-color: #F5D8E0;
}
 
#page-content .table6 tr th,
#page-content .table6 .scp-image-block .scp-image-caption {
    background-color: rgba(146, 0, 255, 0.2);
}
 
.tableb .wiki-content-table {
    border-collapse: separate;
    border-spacing: 2px;
}
 
.tableb .scp-image-block {
    border: none;
}
 
.tableb .scp-image-block img {
    border: #000 1px solid;
    box-sizing: border-box;
}
 
.tableb .scp-image-block .scp-image-caption {
    margin-top: 2px;
    border: #000 1px solid;
    box-sizing: border-box;
}
 
.top-left-box > .item {
  display: none;
}
 
/* ---- TỪ NGỮ NAY KHÔNG CÒN VỠ VỤN, BÁNH KẾP PHÁP ĐÃ CẤT TIẾNG NÓI ---- */
span, a { word-break: normal !important }
 
.avatar-hover { display: none !important; }
 
#breadcrumbs, .pseudocrumbs {
    text-align: center;
    padding-top: 10px;
}
 
#main-content .page-tags span {
    max-width: 100%;
}
 
/* -- MẤY THỨ SANG CHẢNH từ Theme Dustjacket của Woedenaz -- */
 
.fancyhr hr {
    border-top: 2vw solid transparent;
    background-color: rgba(var(--bright-accent), 0);
    height: 0;
    box-sizing: border-box;
    border-image-source: url('https://wanderers-library.wikidot.com/local--files/component:dustjacket-theme/wl_hr.png');
    border-image-repeat: round round;
    background: none;
    border-image-slice: 80 500 80 500 fill;
    border-image-width: 10em 80em 10em 80em;
}
 
.fancyborder {
    box-sizing: border-box;
    border: 2vw solid rgba(0,0,0,0.5);
    border-image: url('https://wanderers-library.wikidot.com/local--files/component:dustjacket-theme/wl_border.png') 600 round;
    border-image-width: 6;
    padding: 2vw;
}