Số 01 - 2022
/* source: http://ah-sandbox.wikidot.com/component:collapsible-sidebar-x1 */
 
#top-bar .open-menu a {
        position: fixed;
        top: 0.5em;
        left: 0.5em;
        z-index: 5;
        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;
        background-color: #fff;
        border-radius: 3em;
        color: #888;
}
 
@media (min-width: 768px) {
 
    #top-bar .mobile-top-bar {
        display: block;
    }
 
    #top-bar .mobile-top-bar li {
        display: none;
    }
 
    #main-content {
        max-width: 708px;
        margin: 0 auto;
        padding: 0;
        transition: max-width 0.2s ease-in-out;
    }
 
    #side-bar {
        display: block;
        position: fixed;
        top: 0;
        left: -20em;
        width: 17.75em;
        height: 100%;
        margin: 0;
        overflow-y: auto;
        z-index: 10;
        padding: 1em 1em 0 1em;
        background-color: rgba(0,0,0,0.1);
        transition: left 0.4s ease-in-out;
 
        scrollbar-width: thin;
    }
 
    #side-bar:target {
        left: 0;
    }
    #side-bar:focus-within:not(:target) {
        left: 0;
    }
 
    #side-bar:target .close-menu {
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        margin-left: 19.75em;
        opacity: 0;
        z-index: -1;
        visibility: visible;
    }
    #side-bar:not(:target) .close-menu { display: none; }
 
    #top-bar .open-menu a:hover {
        text-decoration: none;
    }
 
    /* FIREFOX-SPECIFIC COMPATIBILITY METHOD */
    @supports (-moz-appearance:none) {
    #top-bar .open-menu a {
        pointer-events: none;
    }
    #side-bar:not(:target) .close-menu {
        display: block;
        pointer-events: none;
        user-select: none;
    }
 
    /* This pseudo-element is meant to overlay the regular sidebar button
    so the fixed positioning (top, left, right and/or bottom) has to match */
 
    #side-bar .close-menu::before {
        content: "";
        position: fixed;
        z-index: 5;
        display: block;
 
        top: 0.5em;
        left: 0.5em;
 
        border: 0.2em solid transparent;
        width: 30px;
        height: 30px;
        font-size: 30px;
        line-height: 0.9em;
 
        pointer-events: all;
        cursor: pointer;
    }
    #side-bar:focus-within {
        left: 0;
    }
    #side-bar:focus-within .close-menu::before {
        pointer-events: none;
    }
    }
}
rating: +21+x

What this is

A bunch of miscellaneous CSS 'improvements' that I, CroquemboucheCroquembouche, use on a bunch of pages because I think it makes them easier to deal with.

The changes this component makes are bunch of really trivial modifications to ease the writing experience and to make documenting components/themes a bit easier (which I do a lot). It doesn't change anything about the page visually for the reader — the changes are for the writer.

I wouldn't expect translations of articles that use this component to also use this component, unless the translator likes it and would want to use it anyway.

This component probably won't conflict with other components or themes, and even if it does, it probably won't matter too much.

Usage

On any wiki:

[[include :scp-wiki:component:croqstyle]]

This component is designed to be used on other components. When using on another component, be sure to add this inside the component's [[iftags]] block, so that users of your component are not forced into also using Croqstyle.

Related components

Other personal styling components (which change just a couple things):

Personal styling themes (which are visual overhauls):

CSS changes

Reasonably-sized footnotes

Stops footnotes from being a million miles wide, so that you can actually read them.

.hovertip { max-width: 400px; }

Monospace edit/code

Makes the edit textbox monospace, and also changes all monospace text to Fira Code, the obviously superior monospace font.

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');
 
:root { --mono-font: "Fira Code", Cousine, monospace; }
#edit-page-textarea, .code pre, .code p, .code, tt, .page-source { font-family: var(--mono-font); }
.code pre * { white-space: pre; }
.code *, .pre * { font-feature-settings: unset; }

Teletype backgrounds

Adds a light grey background to <tt> elements ({{text}}), so code snippets stand out more.

tt {
  background-color: var(--swatch-something-bhl-idk-will-fix-later, #f4f4f4);
  font-size: 85%;
  padding: 0.2em 0.4em;
  margin: 0;
  border-radius: 6px;
}

No more bigfaces

Stops big pictures from appearing when you hover over someone's avatar image, because they're stupid and really annoying and you can just click on them if you want to see the big version.

.avatar-hover { display: none !important; }

Breaky breaky

Any text inside a div with class nobreak has line-wrapping happen between every letter.

.nobreak { word-break: break-all; }

Code colours

Add my terminal's code colours as variables. Maybe I'll change this to a more common terminal theme like Monokai or something at some point, but for now it's just my personal theme, which is derived from Tomorrow Night Eighties.

Also, adding the .terminal class to a fake code block as [[div class="code terminal"]] gives it a sort of pseudo-terminal look with a dark background. Doesn't work with [[code]], because Wikidot inserts a bunch of syntax highlighting that you can't change yourself without a bunch of CSS. Use it for non-[[code]] code snippets only.

Quick tool to colourise a 'standard' Wikidot component usage example with the above vars: link

:root {
  --c-bg: #393939;
  --c-syntax: #e0e0e0;
  --c-comment: #999999;
  --c-error: #f2777a;
  --c-value: #f99157;
  --c-symbol: #ffcc66;
  --c-string: #99cc99;
  --c-operator: #66cccc;
  --c-builtin: #70a7df;
  --c-keyword: #cc99cc;
}
 
.terminal, .terminal > .code {
  color: var(--c-syntax);
  background: var(--c-bg);
  border: 0.4rem solid var(--c-comment);
  border-radius: 1rem;
}

Debug mode

Draw lines around anything inside .debug-mode. The colour of the lines is red but defers to CSS variable --debug-colour.

You can also add div.debug-info.over and div.debug-info.under inside an element to annotate the debug boxes — though you'll need to make sure to leave enough vertical space that the annotation doesn't overlap the thing above or below it.

…like this!

.debug-mode, .debug-mode *, .debug-mode *::before, .debug-mode *::after {
  outline: 1px solid var(--debug-colour, red);
  position: relative;
}
.debug-info {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Fira Code', monospace;
  font-size: 1rem;
  white-space: nowrap;
}
.debug-info.over { top: -2.5rem; }
.debug-info.under { bottom: -2.5rem; }
.debug-info p { margin: 0; }
/*
    Newspaper Theme Vietnam
    [2021 Wikidot Theme]
    By StupifPotato
    Based on:
       Newspaper Theme by MalyceGraves and EstrellaYoshte
*/
 
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@700&display=swap');
 
:root {
    --accentColor: #58895d;
    --lgurl: url("http://scp-wiki.wdfiles.com/local--files/theme%3Anewspaper/newslogo.png");
    --bgurl: url("http://scp-wiki.wdfiles.com/local--files/theme%3Anewspaper/newshead.png");
    --primaryBackgroundColor: #f3f3f3;
    --textColor: #090B0C;
    --headerColor: #161B33;
    --selectionColor: #FFE419;
 
    --header-font: 'Merriweather', serif;
    --link-timing: 0.125s ease-out;
}
 
#content-wrap {
    margin: 0.65em auto 0;
    box-sizing: border-box;
}
#page-content { font-size: 1rem; }
 
body {
    font-family: 'Montserrat', sans-serif;
    color: var(--textColor);
    background-color: #ebffe9s;
    background-image: none;
    background-repeat: no-repeat;
}
tt {
    background-color: var(--primaryBackgroundColor);
}
code {
    font-family: var(--mono-font);
}
#edit-page-textarea, .code pre, .code p, .code, tt, .page-source {
    font-size: 90%;
}
 
a:not(.rate-box-with-credit-button a, .page-rate-widget-box a, yui-nav a) {
    color: var(--accentColor);
}
 
#page-content div {
    clear: unset;
}
 
/* Selection */
::selection {
    background: var(--selectionColor);
    color: var(--textColor);
}
 
/* ---- HEADER ---- */
 
div#container-wrap {
     background-image: none;
}
div#header {
    background-image: none;
    height: 240px;
}
 
div#header-extra-div-1 {
    height: 164px;
    width: 100%;
    top: 0;
    position: absolute;
    background: none;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    opacity: 1;
    z-index: -1;
}
div#extra-div-1 {
    height: 164px;
    width: 100%;
    top: 0;
    position: absolute;
    background: none;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center 0;
    z-index: -2;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 20%, rgba(0,0,0,0.3) 70%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 20%, rgba(0,0,0,0.3) 70%, rgba(0,0,0,0) 100%);
}
 
#header h1, #header h2 { margin-left: 0; float: none; text-align: center; }
#header h1 a {
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto;
 
}
#header h2 {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    font-style: italic;
}
/* Hide the existing text */
#header h1 span, #header h2 span { font-size: 0; display: none; }
/* Style the new text */
#header h1 a::before, #header h2::before {
  color: var(--headerColor);
  font-family: var(--header-font);
  text-shadow: none;
}
#header h2::before { color: var(--textColor); }
/* Set the new text's content from variable */
#header h1 a::before {
  content: var(--header-title, "Tin Báo Tổ Chức SCP");
  font-weight: 300;
  font-size: 1em;
}
#header h2::before {
  content: var(--header-subtitle, "Tuần Báo SCP-VN Chính Thức");
  font-weight: 600;
  font-size: 0.75em;
}
 
#login-status {
    color: var(--textColor);
    background-color: #FEFBF8;
    padding: 0.3rem 0.25rem 0.4rem 0.5rem;
    border-radius: 0 0 0.5rem 0.5rem;
    box-shadow: 0 0 3px 1px rgba(0,0,0,0.2);
    top: 0;
}
#login-status a {
    color: var(--accentColor);
}
#account-topbutton {
    border: none;
    margin-left: -0.1rem;
}
 
div#account-options {
    background-color: var(--primaryBackgroundColor);
    border: none;
    border-radius: 0.35rem;
    box-shadow: 0 0 4px 1px rgba(0,0,0,0.25);
    top: 1.85rem;
 
    display: block!important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}
#account-topbutton:focus + #account-options,
#account-topbutton:active + #account-options,
#account-options:focus-within {
    opacity: 1;
    pointer-events: all;
}
/* Without this, touchscreen doesn't work */
@media (pointer: coarse) {
    #account-topbutton:hover + #account-options,
    #account-options:hover {
        opacity: 1;
        pointer-events: all;
    }
}
#account-options li a,
#account-options li a:hover {
    color: var(--accentColor);
}
 
/* ---- SEARCH ---- */
div#search-top-box {
    top: 2.25rem;
    right: 0.5rem;
    width: 1.6rem;
}
 
div#search-top-box::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0; right: 0.05rem;
    background-color: var(--accentColor);
    pointer-events: none;
    z-index: 2;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M505%20442.7L405.3%20343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3%2044-79.7%2044-128C416%2093.1%20322.9%200%20208%200S0%2093.1%200%20208s93.1%20208%20208%20208c48.3%200%2092.7-16.4%20128-44v16.3c0%206.4%202.5%2012.5%207%2017l99.7%2099.7c9.4%209.4%2024.6%209.4%2033.9%200l28.3-28.3c9.4-9.4%209.4-24.6.1-34zM208%20336c-70.7%200-128-57.2-128-128%200-70.7%2057.2-128%20128-128%2070.7%200%20128%2057.2%20128%20128%200%2070.7-57.2%20128-128%20128z%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M505%20442.7L405.3%20343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3%2044-79.7%2044-128C416%2093.1%20322.9%200%20208%200S0%2093.1%200%20208s93.1%20208%20208%20208c48.3%200%2092.7-16.4%20128-44v16.3c0%206.4%202.5%2012.5%207%2017l99.7%2099.7c9.4%209.4%2024.6%209.4%2033.9%200l28.3-28.3c9.4-9.4%209.4-24.6.1-34zM208%20336c-70.7%200-128-57.2-128-128%200-70.7%2057.2-128%20128-128%2070.7%200%20128%2057.2%20128%20128%200%2070.7-57.2%20128-128%20128z%22%2F%3E%3C%2Fsvg%3E");
    -webkit-mask-size: 1rem;
            mask-size: 1rem;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    opacity: 1;
    transition: opacity 0.25s ease;
}
div#search-top-box:focus-within::before { opacity: 0; }
 
div#search-top-box form {
    display: flex;
    justify-content: flex-end;
}
 
div#search-top-box form input[type="text"]:not(:focus),
div#search-top-box form input[type="text"]:not(:focus):not(:hover) {
    position: relative;
    color: transparent;
    cursor: pointer;
    display: inline-block;
    font-family: var(--body-font);
    width: 1.6rem;
    height: 1.6rem;
    padding: 0.1em 0.5em;
    box-sizing: border-box;
    border-radius: 0.35rem;
    border: none;
    box-shadow: 0 0 2px 1.5px var(--shadow);
}
 
div#search-top-box form input[type="text"],
div#search-top-box form input[type="text"]:hover,
div#search-top-box form input[type="text"]:focus {
    background-color: var(--primaryBackgroundColor)!important;
    color: var(--textColor);
    display: inline-block;
    border: none;
    height: 1.6rem;
    width: 9rem;
    transition: width .25s;
    outline: none;
}
 
div#search-top-box form input[type="submit"] {
    display: none;
}
 
/* ---- TOP BAR ---- */
 
#top-bar {
     top: 8.5rem;
     display: flex;
     justify-content: center;
     right: 0;
}
@media (max-width: 768px) {
    .mobile-top-bar {
         display: flex;
         justify-content: center;
         max-width: 100%;
         width: 100%;
         left: 0;
    }
}
 
/* div[class*=top-bar] is to select both regular and mobile top bar that exist in #top-bar */
 
#top-bar div[class*=top-bar] > ul > li > a {
    color: var(--textColor);
}
 
#top-bar div[class*=top-bar] ul li ul li a {
    color: var(--accentColor);
}
 
#top-bar div[class*=top-bar] > ul > li > a:hover,
#top-bar div[class*=top-bar] > ul > li.sfhover > a {
    background-color: transparent;
    background: none;
}
 
#top-bar div[class*=top-bar] > ul > li,
#top-bar div[class*=top-bar] > ul > li.sfhover {
    background-color: transparent;
    background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
    background-size: 0 100%;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--link-timing);
}
#top-bar div[class*=top-bar] > ul > li:hover,
#top-bar div[class*=top-bar] > ul > li:focus-within {
    background-color: transparent;
    background-size: 100% 100%;
}
 
#top-bar div[class*=top-bar] ul li ul {
    background-color: var(--primaryBackgroundColor);
    border: none;
    box-shadow: 0 0 4px rgba(0,0,0,0.3);
    border-radius: 0.5rem;
}
#top-bar div[class*=top-bar] ul li ul li:first-of-type a {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}
#top-bar div[class*=top-bar] ul li ul li:last-of-type a {
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}
 
#top-bar div[class*=top-bar] ul li ul li,
#top-bar div[class*=top-bar] ul li ul li a {
    background: transparent;
    border: none;
}
#top-bar div[class*=top-bar] ul li ul li a:hover,
#top-bar div[class*=top-bar] ul li ul li a:focus {
    background-color: #FEFBF8;
}
 
/* keyboard navigation compatibility */
#top-bar div[class*=top-bar] ul > li > ul > li > a {
    height: auto;
    max-height: none;
    line-height: 1.5!important;
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
}
#top-bar div[class*=top-bar] > ul > li > ul {
    visibility: visible;
    opacity: 0;
    pointer-events: none;
}
#top-bar div[class*=top-bar] > ul > li:hover > ul,
#top-bar div[class*=top-bar] > ul > li > ul:hover,
#top-bar div[class*=top-bar] > ul > li:focus-within > ul,
#top-bar div[class*=top-bar] > ul > li > ul:focus-within {
    opacity: 1;
    pointer-events: all;
}
 
/* ---- SIDE BAR ---- */
 
div#side-bar{
    background: #FEFBF8;
    clear: both;
    padding: .8em;
    border: none;
    border-radius: 0;
    box-shadow: 0 0 4px rgba(0,0,0,0.3);
    overflow-x: hidden;
}
 
#side-bar .heading{
    color: var(--headerColor);
    font-family: var(--header-font);
    font-size: 0.94rem;
    border-bottom: solid 1px var(--headerColor);
    border-top: solid 1px var(--headerColor);
    margin-top: 1.35rem;
    padding-left: 0;
    text-align: center;
}
#side-bar .side-block {
    border: transparent;
    border-radius: 0;
    box-shadow: none;
    background-color: #FEFBF8;
}
#side-bar .side-block.media {
    background-color:#FEFBF8;
}
#side-bar .side-block.media > * {
    display: flex;
    justify-content: space-evenly;
}
#side-bar .side-block.resources {
    background-color:#FEFBF8;
}
.side-block .menu-item > .image {
    display: none;
}
 
#side-bar div.menu-item a {
    color: var(--accentColor);
}
 
#top-bar div.open-menu a {
    border-radius: 0.35rem;
    box-shadow: 0 0 4px rgba(0,0,0,0.3);
    color: var(--accentColor);
    background-color: #FEFBF8;
    border: none;
    padding: 0.15rem;
    user-select: none;
}
 
/* ---- MAIN CONTENT ---- */
#main-content {
    background-color: #FEFBF8;
    padding: 0.5em 2em 0.75em;
    box-shadow: 0 0 4px rgba(0,0,0,0.3);
    width: 100%;
    max-width: 880px;
    margin: -0.4rem auto 0;
    border-radius: 0;
    box-sizing: border-box;
}
 
/* ---- PAGE TITLE ---- */
#page-title, .meta-title {
    color: var(--headerColor);
    font-family: var(--header-font);
    font-size: 3em;
    text-align: center;
    display: flex;
    align-items: center;
    text-align: center;
    border-bottom: none;
    margin: 0.25rem 0;
    padding-bottom: 0;
}
#page-title::before,
#page-title::after,
.meta-title::before,
.meta-title::after {
    content: "";
    flex-grow: 1;
    height: 0.25rem;
    margin: auto auto auto 0.65rem;
    background-color: transparent;
    border-top: solid 0.125rem var(--headerColor);
    border-bottom: solid 0.125rem var(--headerColor);
}
#page-title::before,
.meta-title::before {
    margin: auto 0.65rem auto auto;
}
 
/* ---- BREADCRUMBS ---- */
 
#breadcrumbs, #page-content .pseudocrumbs {
    font-size: 0.85rem;
    font-family: var(--header-font);
    margin-top: -1.05em;
}
#page-content .pseudocrumbs * { text-decoration-color: var(--accentColor)!important; }
 
/* ---- TABS ---- */
 
/* ---- YUI TAB BASE ---- */
.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}
 
/* ---- YUI TAB CUSTOMIZATION ----*/
 
 .yui-navset .yui-nav,
 .yui-navset .yui-navset-top .yui-nav{
     display: flex;
     flex-wrap: wrap;
     width: calc(100% - .125rem);
     margin: 0 auto;
     border-width: 0;
     box-shadow: none;
}
 .yui-navset .yui-nav a, /* ---- Link Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav a{
     color: var(--textColor);
     font-weight: bold;
    /* ---- Tab Background Colour | [UNSELECTED] ---- */
     background-color: transparent;
     border: unset;
     box-shadow: none;
 
     background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
     background-size: 0 100% ;
     background-position: 0 100%;
     background-repeat: no-repeat;
     transition: background-size var(--link-timing);
}
 .yui-navset .yui-nav a:hover,
 .yui-navset .yui-nav a:focus{
    /* ---- Tab Background Colour | [HOVER] ---- */
     background-color: transparent;
     background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
     background-size: 100% 100% ;
     background-position: 0 100%;
     background-repeat: no-repeat;
     transition: background-size var(--link-timing);
}
 .yui-navset .yui-nav li, /* ---- Listitem Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav li{
     position: relative;
     display: flex;
     flex-grow: 2;
     max-width: 100%;
     margin: 0.25rem;
     padding: 0;
     color: #d6d6d6;
     background-color: var(--primaryBackgroundColor);
     border-color: transparent;
     border-radius: 0.35rem;
     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%;
     border-radius: 0.35rem;
}
 .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, /* ---- Selection Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav .selected{
     flex-grow: 2;
     margin: 0;
     padding: 0;
     border-radius: 0.35rem;
    /* ---- Tab Background Colour | [SELECTED] ---- */
     background-color: var(--accentColor);
     color: var(--primaryBackgroundColor);
}
 .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;
     font-weight: bold;
}
 .yui-navset .yui-nav .selected a:focus,
 .yui-navset .yui-nav .selected a:active{
     color: #ffffff;
     background-color: var(--accentColor);
}
 .yui-navset .yui-content {
    border: none;
    background-color: transparent;
    box-shadow: none;
    margin-top: 0.25rem;
    box-sizing: border-box;
    border-radius: 1rem;
    padding: 0.35rem 0;
    border-top: solid 0.2rem var(--accentColor);
    border-bottom: solid 0.2rem var(--accentColor);
}
 
/* ---- INFO PANE ---- */
 
:root {
    --linkColor: var(--selectionColor);
    --radius-adjust: 0.325rem;
    --shadow: rgba(0,0,0,0.2);
}
 
#page-content .creditRate{
    margin: unset;
    margin-bottom: 1rem;
}
#page-content .rate-box-with-credit-button {
    background-color: var(--primaryBackgroundColor);
    border: none;
    box-shadow: 0 0 3px 1px var(--shadow);
    border-radius: var(--radius-adjust);
    padding: 0.275rem;
}
#page-content .rate-box-with-credit-button .page-rate-widget-box { border: none; }
 
#page-content a.fa {
    transform: none;
}
#page-content .rate-box-with-credit-button .fa-info {
    border: none;
    color: var(--textColor);
 
    padding-top: 0.25rem;
    padding-bottom: 0.0725rem;
    width: 0.9rem;
    margin-left: -0.1rem;
    margin-right: 0.1rem;
 
    background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
    background-size: 0 100% ;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--link-timing);
}
 
#page-content .rate-box-with-credit-button .fa-info:hover,
#page-content .rate-box-with-credit-button .fa-info:focus {
    background-size: 100% 100%;
}
 
.rate-box-with-credit-button .cancel {
    border: solid 1px var(--primaryBackgroundColor);
}
 
#page-content .creditButtonStandalone {
    margin: 0.125rem 0;
}
#page-content .creditButtonStandalone p a {
    border-radius: 1rem;
    color: var(--textColor);
    text-align: center;
    background: initial;
    box-shadow: 0 0 2px 1px var(--shadow);
    padding: 0.24rem;
 
    background: none;
    background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 100%;
    transition: background-size var(--link-timing);
}
#page-content .creditButtonStandalone p a:hover,
#page-content .creditButtonStandalone p a:focus {
    text-decoration: none;
    background: none;
    background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
 
/* ---- PAGE RATING ---- */
 
.page-rate-widget-box {
    box-shadow: none;
    margin: unset;
    margin-bottom: 1rem;
    background-color: var(--primaryBackgroundColor);
    border-radius: var(--radius-adjust);
    box-shadow: 0 0 3px 1px var(--shadow);
    padding: 0.275rem;
}
 
.page-rate-widget-box .rateup a:hover, .page-rate-widget-box .rateup a:focus,
.page-rate-widget-box .ratedown a:hover, .page-rate-widget-box .ratedown a:focus,
.page-rate-widget-box .cancel a:hover, .page-rate-widget-box .cancel a:focus {
    color: var(--textColor);
    background: unset;
    background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
    background-size: 100% 100%;
    background-position: 0 100%;
    background-repeat: no-repeat;
    border-radius: 0;
}
 
.page-rate-widget-box .rate-points {
    background-color: var(--primaryBackgroundColor) !important;
    color: var(--textColor) !important;
    border: solid 1px var(--primaryBackgroundColor);
    border-radius: 0;
}
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {
    background-color: var(--primaryBackgroundColor);
    border-top: solid 1px var(--primaryBackgroundColor);
    border-bottom: solid 1px var(--primaryBackgroundColor);
}
 
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a {
    color: var(--textColor);
    background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
    background-size: 0 100%;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--link-timing);
}
 
.page-rate-widget-box .cancel {
    background-color: var(--primaryBackgroundColor);
    border: solid 1px var(--primaryBackgroundColor);
    border-radius: 0;
}
 
.page-rate-widget-box .cancel a {
    color: var(--textColor);
    background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
    background-size: 0 100%;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--link-timing);
}
 
/* ---- PAGE ELEMENTS ---- */
 
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--headerColor);
    font-family: var(--header-font);
    font-weight: normal;
    margin: 0.45em 0;
}
h1 { font-size: 2em; }
h2 { font-size: 1.7em; }
h3 { font-size: 1.45em; }
h4 { font-size: 1.25em; }
h5 { font-size: 1.1em; }
h6 { font-size: 1em; }
 
hr {
    height: 0.25rem;
    margin: 1.75rem 0;
    background-color: transparent;
    border-top: solid 0.125rem var(--headerColor);
    border-bottom: solid 0.125rem var(--headerColor);
    clear: both;
}
 
blockquote,
div.blockquote {
    background-color: var(--primaryBackgroundColor);
    border: none;
    border-left: solid 0.2rem var(--headerColor);
    padding: 0.1rem 1rem;
    box-shadow: 0 0 3px rgba(0,0,0,0.25);
    position: relative;
}
blockquote::before, blockquote::after,
div.blockquote::before, div.blockquote::after {
    content: "";
    display: block;
    height: 0.5rem; width: 0.5rem;
    position: absolute;
    left: 0;
    background-color: var(--headerColor);
}
blockquote::before, div.blockquote::before {
    top: 0;
    transform: translate(calc(-50% - 0.1rem),-50%) rotate(45deg);
}
blockquote::after, div.blockquote::after {
    bottom: 0;
    transform: translate(calc(-50% - 0.1rem),50%) rotate(45deg);
}
 
#toc {
    display: block;
    background-color: #FEFBF8;
    border: none;
    padding: 0.1rem 1rem;
    box-shadow: 0 0 4px rgba(0,0,0,0.3);
    border-right: solid 0.2rem var(--headerColor);
    padding: 0.75em;
    position: relative;
}
#toc::before, #toc::after {
    content: "";
    display: block;
    height: 0.5rem; width: 0.5rem;
    position: absolute;
    right: 0;
    background-color: var(--headerColor);
}
#toc::before {
    top: 0;
    transform: translate(calc(0.1rem + 50%),-50%) rotate(45deg);
}
#toc::after {
    bottom: 0;
    transform: translate(calc(0.1rem + 50%),50%) rotate(45deg);
}
#toc-list {
    font-family: var(--header-font);
}
#toc-list > div[style*="margin-left: 1em;"] { margin-left: 0.5em!important; }
#toc-list > div:not([style*="margin-left: 1em;"]) { display: none; }
 
.scp-image-block {
    border: solid 8px var(--primaryBackgroundColor);
    box-shadow: 0px 0px 4px rgba(0,0,0,0.3);
    box-sizing: border-box;
    position: relative;
    z-index: 0;
}
.scp-image-block::before, .scp-image-block::after {
    content:'';
    position: absolute;
    pointer-events: none;
    border: solid 0.25rem var(--headerColor);
    transform: rotate(25deg);
}
.scp-image-block::before {
    right: -0.135rem;
    height: 36px;
    width: 9px;
    top: -14.25px;
    border-radius: 0 0 2rem 2rem;
    border-top: none;
}
.scp-image-block::after {
    top: -25px;
    right: -0.94rem;
    height: 16px;
    width: 14px;
    border-radius: 2rem 2rem 0 0;
    border-bottom: solid 0.55rem transparent;
    z-index: -1;
}
 
.scp-image-block .scp-image-caption {
    background-color: var(--primaryBackgroundColor);
    border-top: solid 4px var(--primaryBackgroundColor);
    color: var(--textColor);
}
.scp-image-block.block-left,
.scp-image-block.block-right {
    margin: 0.25rem 2rem 0.625rem;
}
.scp-image-block.block-left { margin-left: 0.5rem; }
.scp-image-block.block-right { margin-right: 0.5rem; }
@media (max-width: 640px) {
  .scp-image-block.block-left, .scp-image-block.block-right {
    float: none; clear: both; margin-left: auto; margin-right: auto;
  }
}
 
#page-content .wiki-content-table tr th {
    border: solid 1px var(--headerColor);
    color: var(--headerColor);
    background-color: var(--primaryBackgroundColor);
    /* set border for table title */
}
#page-content .wiki-content-table tr td {
    border: solid 1px var(--headerColor);
    /* set border for table content */
}
 
/* fancy collapsible */
#page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link {
    background-color: var(--primaryBackgroundColor);
    border-radius: 0.35rem;
    width: min-content;
    white-space: nowrap;
    overflow: hidden;
    margin: auto;
}
 
#page-content .collapsible-block-folded {
    background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
    background-size: 0 100% ;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--link-timing);
}
#page-content .collapsible-block-folded:hover,
#page-content .collapsible-block-folded:focus-within {
    background-size: 100% 100% ;
    transition: background-size var(--link-timing);
}
#page-content .collapsible-block-unfolded-link {
    background-color: var(--accentColor);
    box-shadow: 0 0 0 0.2rem var(--accentColor);
}
#page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link {
    margin-top: 10px;
    margin-bottom: 10px;
}
#page-content .collapsible-block-link {
    display: inline-flex;
    padding: 0.5rem 1rem;
    text-decoration: none;
    color: var(--textColor);
    font-weight: bold;
}
#page-content .collapsible-block-unfolded-link .collapsible-block-link {
    color: var(--primaryBackgroundColor);
}
 
/* Footnotes */
a.footnoteref {
    padding: 0 0.25em 1px;
    margin-left: -0.15em;
}
 
.hovertip {
    font-size: 1.25em;
    background-color: #FEFBF8 !important;
    border: none !important;
    border-left: solid 0.2rem var(--accentColor)!important;
    color: var(--textColor) !important;
    border-radius: 0 1rem;
    box-shadow: 0 0 4px rgba(0,0,0,0.3);
    padding: 0.35rem;
    box-sizing: border-box;
    width: min(24rem, 60vw)!important;
 
    top: initial!important;
    left: initial!important;
    position: fixed! important;
 
    display: block!important;
    bottom: 2rem;
    right: -25rem;
 
    transition: right 0.45s cubic-bezier(.6,.18,.27,.88);
    transition-delay: 0.455s;
    z-index: 29;
}
.hovertip::before {
    content: "";
    display: block;
    height: 0.5rem;
    width: 0.5rem;
    position: absolute;
    left: 0;
    top: 0;
    background-color: var(--accentColor);
    transform: translate(calc(-50% - 0.1rem),-50%) rotate(45deg);
}
div[id$="button-hovertip"] { transition-delay: 0s; }
 
.hovertip[style*="display: block"],
.hovertip:hover {
    z-index: 30;
    right: 1rem;
    transition-delay: 0s;
}
 
.footnote .f-heading {
    font-family: var(--header-font);
}
.footnote .f-footer, .equation .e-footer, .reference .r-footer {
    display: none;
}
 
.footnotes-footer {
    border: none;
    border-left: solid 0.2rem var(--accentColor);
    padding: 0.1rem 1rem 1rem 1.25rem;
    position: relative;
    border-radius: 0 1.25rem;
}
.footnotes-footer::before {
    content: "";
    display: block;
    height: 0.5rem; width: 0.5rem;
    position: absolute;
    left: 0; top: 0;
    background-color: var(--accentColor);
    transform: translate(calc(-50% - 0.1rem),-50%) rotate(45deg);
}
 
.footnotes-footer .title {
    color: var(--textColor);
    font-family: var(--header-font);
    margin: 0 0 0.625rem 0;
}
 
/*-- tags --*/
 
#main-content .page-tags a {
    height: 0.8125rem;
    font-size: 0.6875rem;
    background-color: var(--primaryBackgroundColor);
    color: var(--textColor);
    border-radius: 0.35rem;
    margin: .25rem .2rem;
    padding: 0.21rem 0.35rem 0.22rem 0.3rem;
    box-shadow: 0 0 3px rgba(0,0,0,0.25);
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
 
    background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
    background-size: 0 100%;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--link-timing);
}
 
#main-content .page-tags a:hover,
#main-content .page-tags a:focus {
    background-size: 100% 100%;
    text-decoration: none;
}
#main-content .page-tags a:before {
    content: "⬤";
    font-size: 4px;
    padding-right: 0.2rem;
    display: inline-block;
}
 
.page-tags span {
    border-top: solid 0.125rem var(--primaryBackgroundColor);
}
 
/* Pop-Up Windows */
.owindow {
    background-color: var(--primaryBackgroundColor);
    border: none;
}
 
.owindow .modal-header {
    background-color: transparent;
}
 
.owindow .modal-body img {
    background-color: transparent !important;
}
 
.owindow .title {
    background-color: transparent;
    color: var(--headerColor);
    border-bottom: 1px solid var(--headerColor);
}
 
.owindow .button-bar a {
    background-color: var(--primaryBackgroundColor);
    border-color: var(--accentColor);
    color: var(--accentColor);
}
.owindow .button-bar a:hover {
    background-color: var(--accentColor);
    color: var(--primaryBackgroundColor);
}
 
#page-content .modalbox {
    background: #FEFBF8;
    border: none;
    border-radius: 0;
    box-shadow: 0 0 10px rgba(0,0,0,0.35);
}
#page-content .modalbox hr { margin: 0.75rem 1rem; }
 
/* Edit Buttons */
.buttons .btn {
    background-color: var(--primaryBackgroundColor);
    border-color: var(--accentColor);
    color: var(--accentColor);
    padding: 3px 5px;
}
.buttons .btn:hover {
    background-color: var(--accentColor);
    color: var(--primaryBackgroundColor);
}
 
/* Close Button for Page Source, Rating, Etc */
a.action-area-close:hover {
    background-color: var(--accentColor);
    color: var(--primaryBackgroundColor);
}
 
/* Page-History Current */
.pager .current {
    background-color: var(--accentColor);
    border-color: var(--primaryBackgroundColor);
}
 
/* ---- CUSTOM SYNTAX ----*/
 
#page-content .section-header {
    display: flex;
    align-items: center;
    text-align: center;
    margin-top: 3.5rem;
    margin-bottom: 0.75rem;
    clear: both;
}
#page-content .breaker + .section-header {
    margin-top: 1.5rem;
}
.section-header::before, .section-header::after {
    content: "";
    flex-grow: 1;
    height: 0.175rem;
    margin: auto -0.625rem auto auto;
    background-color: var(--primaryBackgroundColor);
}
.section-header::after {
    margin: auto auto auto -0.625rem;
}
 
.section-header h1 {
    width: max-content;
    margin: 0 auto;
    text-align: center;
    padding: 0.05rem 1.5rem;
    border-radius: 0rem 0.875rem;
    border-bottom: solid 0.2rem var(--accentColor);
    border-top: solid 0.2rem var(--accentColor);
    position: relative;
}
.section-header h1::before {
    content: "";
    background-color: var(--accentColor);
    display: block;
    width: 0.6rem; height: 0.6rem;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-0.3rem, -0.4rem) rotate(45deg);
}
.section-header h1::after {
    content: "";
    background-color: var(--accentColor);
    display: block;
    width: 0.6rem; height: 0.6rem;
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(0.3rem, 0.4rem) rotate(45deg) ;
}
.section-header h1 span {
    width: max-content;
    margin: auto;
}
 
/*-----------------*/
 
.s-title {
    font-size: 110%;
    font-weight: bold;
    display: inline;
    padding: 0 0.15em;
    padding-bottom: 0.1em;
    border-bottom: solid 0.1rem currentColor;
    border-top: solid 0.1rem currentColor;
}
 
.gallery-frame {
    box-sizing: border-box;
    background-color: #FFF4E9;
    padding: 0.75rem;
    border: inset 0.325rem var(--headerColor);
    box-shadow: inset 0 0 5px rgba(0,0,0,0.4);
    margin: auto;
}
.gallery-frame > img { box-shadow: 0 0 3px 1px rgba(0,0,0,0.3); }
 
.hover:hover {
    text-decoration: none;
}
.hover span { display: none; }
.hover:hover span {
    position: absolute;
    display: inline;
    height: auto;
    max-width: 25%;
    background-color: var(--headerColor);
    color: #FEFBF8;
    font-weight: bold;
    padding: 0.5em 1.5em;
    border-bottom-right-radius: 1rem;
}
 
.f-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.f-flex > div {
    flex-basis: 18rem;
    flex-grow: 1;
}
.f-flex.three > div {
    flex-basis: 13rem;
    flex-grow: 1;
}
.f-flex.data > div {
    padding: 0.65rem 0.375rem;
}
.f-flex.data > div:hover {
    z-index: 9;
}
 
.f-con {
    border: none;
    padding: 0.15rem 0.75rem;
    margin: 0.85rem;
    position: relative;
    border-radius: 0 1.25rem;
    background-color: #FFF4E9;
    box-shadow: 0 0 4px rgba(0,0,0,0.3);
}
#page-content .f-flex .f-con { max-width: 25rem; }
.f-con h4 {
    background-color: #ffeddb;
    color: #242424;
    padding: 0.1rem 0;
    border-radius: 0 0.625rem;
}
 
.placard {
    display: inline-block;
    position: relative;
    padding: 0.45rem 0.65rem;
    margin: -1.05rem -0.5rem -1.3rem;
    border: solid 1em transparent;
    background: var(--primaryBackgroundColor) padding-box;
    clip-path: polygon(0 3em, 3em 0, 100%  0, 100% calc(100% - 3em), calc(100% - 3em) 100%, 0 100%);
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}
.placard::before, .placard::after {
    position: absolute;
    width: 3em;
    height: .35em;
    background: radial-gradient(at 50% 0, rgba(0,0,0,0.17), rgba(0,0,0,0) 65%);
    content: "";
}
.placard::before {
    top: 0.45em;
    left: -0.95em;
    transform: rotate(-45deg);
}
.placard::after {
    bottom: 0.45em;
    right: -0.95em;
    transform: rotate(135deg);
}
 
/*---- Side ToC setup ----*/
 
.anchor {
    position: sticky;
    height:0;
    top: 0.5rem;
    z-index: 4;
}
.tocbox {
    margin-top: 0;
    position: absolute;
    top: 0;
    right: max(-18.75rem, -17vw);
    z-index: 4;
    box-sizing: border-box;
    width: max-content;
    pointer-events: none;
}
 
#page-content .tocbox .toc-u {
    padding: 0.5rem;
    background-color: #FEFBF8;
    box-shadow: 0 0 4px rgba(0,0,0,0.3);
    border-right: solid 0.2rem var(--headerColor);
    position: relative;
    width: 15rem;
    max-height: calc(98vh - 2rem);
    max-width: calc((30vw - 50% - 6rem)/1.2);
    margin-right: 0; margin-left: auto;
    pointer-events: all;
}
.toc-u #toc::before, .toc-u #toc::after { display: none; }
.toc-u::before, .toc-u::after {
    content: "";
    display: block;
    height: 0.5rem; width: 0.5rem;
    position: absolute;
    right: 0;
    background-color: var(--headerColor);
}
.toc-u::before {
    top: 0;
    transform: translate(calc(0.1rem + 50%),-50%) rotate(45deg);
}
.toc-u::after {
    bottom: 0;
    transform: translate(calc(0.1rem + 50%),50%) rotate(45deg);
}
 
#page-content .tocbox .toc-u #toc-list {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 84vh;
    padding: 0 0.5em 1em;
    scrollbar-width: thin;
}
#page-content .tocbox .toc-u #toc-list::-webkit-scrollbar {
    width: 6px;
}
 
.tocbox table,
.tocbox tbody,
.tocbox tr,
.tocbox td,
.tocbox #toc {
    display: contents;
}
 
#toc-list > div { position: relative; }
#toc-list > div[style*="1em"]::before {
    content: "•";
    display: inline-block;
    position: absolute;
    left: -0.75em;
    color: var(--accentColor);
}
 
@media (max-width: 1340px) {
    .anchor {
        filter: none;
        transition: filter 0.2s ease-out;
     }
    .tocbox {
        right: -1rem;
        width: unset;
    }
    .tocbox::before {
        content: "";
        display: block;
        position: absolute;
        background-color: transparent;
        width: 1.5rem; height: 100%;
        top: 0; right: -0.25rem;
        pointer-events: all;
}
    .tocbox::after {
        content: "";
        display: block;
        position: absolute;
        background-color: transparent;
 
        width: 0; height: 0;
        border: solid 1rem transparent;
        border-left-width: 0.5rem;
        border-right-color: var(--headerColor);
 
        top: calc(50% - 1rem); right: 0;
        pointer-events: all;
        transition: border-right-width 0.15s ease-out;
    }
    #page-content .tocbox .toc-u {
        width: -moz-fit-content;
        width: fit-content;
        max-width: 60vw;
        box-shadow: none;
        clip-path: inset(-0.5rem -0.5rem -0.5rem calc(100% - 0.65rem));
        transition: clip-path 0.2s ease-out;
        pointer-events: none;
    }
 
    .anchor:hover { filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.2)); }
    .tocbox:hover {
        pointer-events: all;
    }
    .tocbox:hover::after {
        border-right-width: 0;
    }
    #page-content .tocbox:hover .toc-u {
        pointer-events: all;
        clip-path: inset(-0.5rem -0.5rem -0.5rem -0.35rem);
    }
}
 
/* ---- FOOTER & LICENSE AREA ---- */
 
#footer, #license-area {
    background-color: #FFF4E9;
    color: var(--textColor);
}
#footer a { color: var(--accentColor); }
 
#footer {
    padding-top: 1rem;
}
#license-area {
    padding-top: 0;
}
 
/* ---- INTERWIKI ---- */
 
.scpnet-interwiki-frame{
    filter: invert(100%) grayscale(100%) contrast(75%);
}
 
/* ---- MOBiLE QUERY ---- */
@media (max-width: 767px) {
 
    div#header, div#top-bar {
        width: 100%;
        max-width: 100%;
    }
 
    #login-status {
        padding-top: 0rem;
        padding-left: 0.3rem;
    }
    #login-status span.printuser  {
        font-size: 0;
    }
    #login-status span.printuser img {
        font-size: 0;
        transform: translate(6px, 5px);
    }
    #login-status a#my-account {
        display: none;
    }
 
    #main-content {
        padding: 0.5em 1.75em 0.75em;
    }
    #side-bar .close-menu {
        opacity: 0;
        margin-left: 18.75em;
    }
    #side-bar:target .close-menu:hover {
        background: unset;
    }
 
    :root {
        --header-title: "Tin SCP-VN";
    }
 
    #page-title, .meta-title { font-size: 2.4em; }
    h1 { font-size: 1.8em; }
    h2 { font-size: 1.5em; }
    h3 { font-size: 1.25em; }
    h4 { font-size: 1.05em; }
    h5 { font-size: 0.9em; }
    h6 { font-size: 0.8em; }
}
rating: +21+x

LƯU Ý: Đây là bài tin báo thuộc Chi Nhánh Việt Nam của SCP Wiki. Các tin báo khác nhau của Nhóm Tin Báo đều có quan điểm riêng từ người soạn báo kì ấy, không đại diện cho cả Nhóm Nhân Viên trực thuộc hay các Nhân Viên của Wiki. Nếu bạn cảm thấy nội dung có vấn đề, vui lòng liên hệ trưởng nhóm để họ xem xét và đưa ra quyết định chỉnh sửa. Chúng tôi luôn cố gắng cung cấp cho bạn những nội dung thú vị, và chúng tôi hiểu rằng đôi khi các ý kiến cá nhân sẽ xuất hiện. Cảm ơn bạn vì đã ủng hộ và thấu hiểu cho chúng tôi!

Mục lục
Mag003.png

Tuần Báo SCP-VN

Tuần báo SCP-VN là một dự án mới được triển khai trên Wiki SCP-VN bởi Nhóm Phụ Tin Báo. Dự án này hướng tới mục đích tăng mức độ nhận diện cho các bài viết/bản dịch mới được đăng tải trên Wiki trong cộng đồng thành viên, cũng như thúc đẩy việc sáng tác hội họa về vũ trụ SCP và các hoạt động bên lề khác mà độc giả quan tâm.

Thông Báo


Banner%20fin.png


Hàng năm, chúng tôi sẽ thực hiện khảo sát người dùng nhằm thu thập ý kiến phát triển Wiki. Chúng tôi mong rằng thành viên sẽ đóng góp vào đợt khảo sát năm 2021 này.

Thành viên tham gia khảo sát yêu cầu phải có Tài Khoản Google và Email. Chúng tôi hoàn toàn đảm bảo thông tin cá nhân của thành viên tham gia và không thu thập sử dụng ngoài mục đích khảo sát và phát triển Wiki.



Tác Phẩm Nổi Bật

Dưới đây là danh sách tổng hợp các tác phẩm mới nhất được đăng tải trên wiki trong hai tuần vừa qua (từ ngày 13/12/2021 tới ngày 26/12/2021).

Các Ngoại Truyện Mới

Khúc Đồng Dao Phán Sự

TÁC GIẢ: King PigeonKing Pigeon, BaDangBaDang
Luân hồi kiếp nguyện thành than
Không cam để lại nỗi oan ngàn đời
Trong tâm một khắc rối bời
Lửa lên ba thước, máu người thành sông.

Hưng Hoá, Một Chén Trà

TÁC GIẢ: KH NamKH Nam
Nếu thiên hạ trong màn sương mù mịt dưới kia đã muốn từ bỏ ta, ta đành từ bỏ thiên hạ trước vậy. Lần đầu tiên trong đời này, ta có thể hằng ngày thảnh thơi nhìn tảng đá dưới suối, xem có thật như cổ nhân nói, nước có thể làm mòn cả đá.

Tác Giả Triển Vọng


Tác Giả: Irina Bougainvillea


Là một cây bút không còn xa lạ trong cộng đồng SCP-VN, các tác phẩm của Irina luôn đem lại cảm giác mới mẻ cho độc giả cũng như khơi gợi nhiều cảm xúc. Ngoài ra, cô không chỉ có tác phẩm ở wiki SCP-VN, mà còn từng đăng tải tác phẩm của mình trên wiki SCP tiếng Anh. Cô chia sẻ rằng bản thân từng không muốn viết SCP-VN do chất lượng wiki trước kia rất tệ, tuy nhiên sau khi thấy được nỗ lực của các quản trị viên, cô đã thay đổi suy nghĩ và đóng góp như một cách để tri ân cũng như phát triển cho cộng đồng. Một thông tin thú vị là cô hay được gọi là “chị đại” trong dàn tác giả cũng như dịch giả SCP-VN, và chính vì thế cô hay được mọi người xin ý kiến. Chia sẻ về việc này, cô cho rằng mình chỉ đưa ra những lỗ hổng hay giúp họ có thêm một số kiến thức để bài viết của họ tốt nhất có thể, và chính bản thân cô cũng không đủ năng lực để định hướng họ theo mong muốn của mình. Chia sẻ với phóng viên, cô nói rằng bản thân sẽ tập trung mạnh vào khía cạnh tâm lý xã hội cho những SCP-VN tiếp theo của mình. Liệu cô sẽ đem tới cho chúng ta những tác phẩm gì đây?.

Bạn có thể tìm đọc những bài viết của Irina Bougainvillea tại đây.

Bản Dịch Nổi Bật

Dưới đây là danh sách tổng hợp các bản dịch mới nhất được đăng tải trên wiki trong hai tuần vừa qua (từ ngày 27/12/2021 tới ngày 09/01/2022).

Các SCP Mới

SCP-6222 - NHÀ TÙ CÁ

TÁC GIẢ: Aftokrator
DỊCH GIẢ: Irina Bougainvillea, KirQ
Loài: Không rõ
Phạm tội: Phong thần

SCP-4255 - Santa Claus, Nhà Du Hành Thời Gian

TÁC GIẢ: Lamentte
DỊCH GIẢ: Hieutran2004

SCP-4255: Tổ Chức SZP? Họ bảo là hôm nay tôi sẽ đụng phải mấy người, mấy người là những kẻ đứng sau mấy cái máy bay đúng không? Chúng ồn ào vãi lìn.

SCP-2005 - Dự Đoán Quá Khứ

TÁC GIẢ: Silberescher
DỊCH GIẢ: K0mOd0

Các dự đoán của bạn cực kỳ mâu thuẫn với được dữ liệu ghi lại của các sự kiện.

SCP-791 - Quả Cầu Nước

TÁC GIẢ: Dr Gears
DỊCH GIẢ: KirQ

Các vật phẩm đôi khi sẽ thoát ra khỏi SCP-791. Hiện chưa rõ những món đồ này có nguồn gốc từ đâu, mặc dù hầu hết chúng đều có nguồn gốc từ “đại dương”. Các vật phẩm giống như rong biển, cá, ████████, ██████, sinh vật phù du, [DỮ LIỆU BỊ XÓA] lưu ý khả năng nhận biết.

SCP-1007-RU - Virus Nietzsche

TÁC GIẢ: Ged_Malburg
DỊCH GIẢ: DamonGallagher

scp-logo-ru-400.png

<Đối tượng>: Tôi thấy ổn áp đấy. Nó không hoạt động à, lũ khốn? Tôi ngồi đây được hai tiếng rồi và tôi vẫn chẳng hề gì-aaaaaaaa..!

SCP-140 - Một Trang Sử Dở Dang

TÁC GIẢ: AssertiveRoland
DỊCH GIẢ: King of Chronicle

Tôi cần phải biết. Tôi xin lỗi.

SCP-2750 - Navajo Skinwalkers

TÁC GIẢ: weizhong
DỊCH GIẢ: Trung67

Trong cuộc gặp mặt, những người dân bản địa đã mô tả một cách chi tiết loại quái thú đã gây nhiều tai họa cho họ. Họ gọi nó là "yee naaldloshi”.

SCP-1765 - Chị Chị Em Em

TÁC GIẢ: Dmatix
DỊCH GIẢ: Suzu-Hitsuji
Xin chào những thành viên đáng kính của Tổ Chức. Chúng tôi đã xuất hiện tại đây để báo cho các bạn một tin tốt lành…

SCP-2986 - Bên Ngoài Chiếc Hộp

TÁC GIẢ: Doctor Cimmerian
DỊCH GIẢ: King of Chronicle
Cái gì đây? Đây đâu phải một dị thể thật. Bằng chứng đâu? Nhật ký thí nghiệm đâu? Và ông cũng vừa sai chĩnh tả từ "sửa lỗi" đấy thăng hề! — W. Wettle

SCP-001 - Đề xuất của Jim North

TÁC GIẢ: Jim North
DỊCH GIẢ: PieceOfNyan

Ông bước vào căn chòi, và tìm thấy xưởng làm việc của tổ tiên mình. Với một nụ cười nho nhỏ, đầy thỏa mãn, ông đã đọc những cuốn nhật ký, những tờ giấy ghi chú cùng những bản thiết kế. Và với ánh mắt lấp lánh đầy dịu dàng, ông cầm lấy những món đồ nghề của mình. Cuối cùng, với một tiếng thở dài đầy mãn nguyện, ông-

SCP-6898 - Hawaii Xanh

TÁC GIẢ: Its a Bad Idea
DỊCH GIẢ: KirQ

Dọc theo các cạnh của mỗi bức tranh, một đoạn mô tả ngắn về nội dung của bức tranh và lời bình của nó được viết bằng một dạng chữ Nôm cổ. Mặc dù bị phong hóa theo thời gian, hầu hết các mô tả đều đã được dịch đầy đủ. Ví dụ bao gồm các cụm từ như “Vũ điệu dài”, “Câu cá trên sông” và “Dạy học”. Chữ viết trên bức tranh cuối cùng chỉ được dịch một phần thành “Chúc may mắn”, vì phần lớn chúng không khớp với từ vựng chữ Nôm tiêu chuẩn.

SCP-4213 - Tôi Kem

TÁC GIẢ: Yossipossi, Doctor Cimmerian
DỊCH GIẢ: KirQ

Vào ngày 15 tháng 1 năm 2019, SCP-4213 đã thành công tiến vào nhà ăn của Điểm 88 trong "Ngày ăn kem miễn phí"

SCP-2988 - Sự Điên Cuồng Của Kẻ Ăn Quả

TÁC GIẢ: OZ Ouroboros
DỊCH GIẢ: Suzu-Hitsuji

Các nhân sự được lệnh loại bỏ toàn bộ các chi đã được “trồng” từ SCP-2988 trong vòng 24 tiếng sau khi được “trồng”.

SCP-4595 - Toà Tháp Của Nhà Tiên Tri

TÁC GIẢ: HotCocoaNerd
DỊCH GIẢ: Suzu-Hitsuji
Ta đã phạm phải một sai lầm. Ta đã đi ngược dòng với lịch sử. Ngay cả với một kẻ có tầm nhìn xa trông rộng như ta cũng sẽ không tin được hậu quả sẽ như thế nào. Nếu có thể quay lại và chọn phe để đấu tranh, không nghi ngờ gì khi tất cả sẽ đều cố gắng hỗ trợ Fredrick và Agatha. Nhưng đã quá muộn rồi, giờ có nhiều thứ mà đến cả ta cũng chẳng thể sửa nổi nữa.

SCP-2558 - Nhà Thờ Đệ Nhất Báp-têm Tại Bãi Biển Houseshose (Đã Được Di Dời)

TÁC GIẢ: Kate McTiriss
DỊCH GIẢ: King of Chronicle

DỰ BÁO CÓ CÁC CƠN MƯA DÔNG RẢI RÁC VÀ DÔNG MẠNH TỪ THỨ SÁU
ĐẾN HẾT ĐẦU TUẦN SAU. MẬT ĐỘ LỚN NHẤT CỦA CÁC CƠN BÃO SẼ QUÉT QUA
KHU VỰC NỘI ĐỊA VÀO THỨ SÁU. MỘT SỐ CƠN BÃO MẠNH, CÓ THỂ GÂY RA
MƯA LỚN CỤC BỘ KÈM THEO GIÓ GIẬT MẠNH VÀ SẤM SÉT XẢY RA THƯỜNG XUYÊN.

SCP-2746 - ████ Chết Rồi

TÁC GIẢ: Fantem
DỊCH GIẢ: Suzu-Hitsuji

Các tài liệu sau đây là tờ rơi, thư và các bài phát biểu được thu hồi khi khám phá bên trong SCP-2746-1. Ngoại trừ Tài Liệu-2746-9, phần lớn các tài liệu này được viết bằng phương ngữ A-12 ("Cổ Ngữ Thiên Sứ").

SCP-3997 - Cái Kết Là Khởi Đầu Mới Của Tôi

TÁC GIẢ: Tufto
DỊCH GIẢ: PieceOfNyan

Các cá thể SCP-3997-1 phải ngay lập tức chịu sự quản thúc của Tổ Chức vĩnh viễn nhằm mục đích tìm kiếm, và tra hỏi để lấy thông tin liên quan đến SCP-3997. Một đội đặc nhiệm đặc biệt, ĐĐNCĐ Mu-45 "Vết Cào", đã được thành lập.

SCP-PL-204 - Cách Để Biến Mất Hoàn Toàn Và Không Bao Giờ Bị Phát Hiện

scp-logo-pl-400.png

TÁC GIẢ: Nats482
DỊCH GIẢ: KirQ

SCP-PL-204 phải bị khóa.

SCP-2272 - Ellis Canastota, P, Pensacola Blue Wahoos

TÁC GIẢ: Kate McTiriss
DỊCH GIẢ: King of Chronicle
Hiệu ứng trên cũng ảnh hưởng lên các bản ghi hình, ảnh chụp hoặc bản ghi âm các trận đấu Blue Wahoos.

SCP-1600 - Pho Mát của Nhà Triết Học

TÁC GIẢ: anqxyr
DỊCH GIẢ: KirQ
Đối tượng mô tả mẫu vật khô và "giòn".

SCP-5135- Cuộc Chiến Chưa Bao Giờ Xảy Ra

TÁC GIẢ: CityToast
DỊCH GIẢ: Ronin (TIme Samurai)

Chữ khắc trên vỏ bom
Những gia đình đã ra đi
Kau'ai, Hawaii - 24/12/2012
[không đọc được], Bắc Carolina - 12/03/2016
Cái này dành cho các ngươi

Các Dịch Phẩm Mới

Có thể chúa sẽ tha thứ cho em nếu hai ta cùng cầu xin

TÁC GIẢ: SoullessSingularity
DỊCH GIẢ: King Pigeon

Abel là một đứa trẻ sơ sinh quấy khóc; và thứ duy nhất có thể xoa dịu cậu là những câu hát ru của mẹ. Vì vậy Cain đã hát ru cho Abel ngủ. Anh cất lên những giai điệu êm dịu nhưng đầy ám ảnh về những ngày tháng sẽ tươi sáng hơn.

Tôi Thấy Bóng Tối

TÁC GIẢ: Decibelles
DỊCH GIẢ: Tzuoaen
Hình thái mới của tôi là lúc mà tôi trẻ nhất, bào thai đang phát triển của một người phụ nữ đang vật lộn giữa việc làm một người giám hộ và việc làm một người mẹ. Thế giới bắt đầu một cách tối tăm và khiêm nhượng; nó thường như vậy. Tôi càng chờ đợi, Nó đến càng nhanh. Tôi vùng vẫy về phía ánh sáng, gần như không thể cảm nhận được không khí xung quanh, và ngay lập tức bùng cháy. Bối cảnh tan vỡ, và tro cốt của tôi bay đi.

Lâu Đài 2

TÁC GIẢ: Decibelles
DỊCH GIẢ: Tzuoaen

Chà, con người ta thường nhớ về những điều tiêu cực tốt hơn rất nhiều so với những điều tích cực. Đó chỉ là cách bộ não ta thích nghi để sinh tồn thôi. Anh có thể là bạn thân với Ts. Yamada, nhưng anh sẽ dễ dàng nhớ rõ hai lần mà anh dành thời gian cho tôi. Chúng ta không nói về những điều hạnh phúc nhất, nhỉ?

Bản ghi Thông tin Bổ sung SCP-6222-1

TÁC GIẢ: Aftokrator (mở đầu)
DỊCH GIẢ: Irina Bougainvillea (mở đầu)

Cá thể người dường như đã chết và bị ăn thịt một phần; khả năng cao phần cơ thể này bị tiêu thụ bởi các cá thể piranha. Bên cạnh bảng tên của buồng là một tờ giấy nhớ có ghi dòng chữ "Bây giờ anh ta thực sự đang ngủ cùng cá rồi đấy".

Ra Ngoài Để Ăn Trưa

TÁC GIẢ: Decibelles
DỊCH GIẢ: KirQ

"'Thế… thế này nghĩa là gì, Ngài Thù Hận? Anh… anh vừa làm cái gì vậy? Tôi phải ăn cái này ư? Cái này có ăn được không? Tôi không biết anh cho tôi là kiểu nhà phê bình nào, nhưng tôi chắc chắn không phải là kiểu người thích mấy trò đùa rẻ tiền với bữa ăn của mình!'

Định Mệnh Của Chúng Ta

TÁC GIẢ: KirQ, Kairento154
DỊCH GIẢ: Irina Bougainvillea

Tôi vẫn thường thắc mắc rằng con vật ấy có góc nhìn với thế giới này như thế nào, và nó nhận thức những chuyện xảy đến với mình khi đó ra sao. Bị kéo lên khỏi làn nước và trơ mắt nhìn về phía chúng tôi, những kẻ từ trên cao nhìn xuống nó. Ngày ấy tôi đã hiểu. Tôi không biết phải diễn tả điều đó bằng từ ngữ như thế nào, nhưng tôi hiểu.

Tâm Trí Vỡ Nát

TÁC GIẢ: HammerMaiden
DỊCH GIẢ: Cyclops-7

Sau đó hãy nói với Thiên sứ của Đấng sáng thế: “Đừng sợ; ta có một cách. Mang đến cho chúng ta một người ghi chép có kỹ năng và sự học hỏi tuyệt diệu, để chúng ta có thể truyền dạy cho anh ta về Chân lý của Khát vọng."

̶M̶̶ư̶̶ờ̶̶i̶ ̶B̶̶ố̶̶n̶ Mười Ba

TÁC GIẢ: Fantem
DỊCH GIẢ: Suzu-Hitsuji

"“Im lặng,” nhà vua lạnh lùng nói. “Nghệ Nhân số mười bốn, đây là quyết định của ta và cũng là phán quyết Nghệ Nhân từ hai đến mười ba, lẫn người dân toàn cõi Địa Đàng, ngươi sẽ bị tước đi mọi đặc quyền, bị xóa bỏ khỏi mọi ghi chép và trục xuất xuống trái đất mãi mãi. Ngươi đã cho con người thành quả từ cây tri thức và phá hủy toàn bộ. Giờ ai biết được điều gì sẽ xảy ra đây hả.”

Đưa Cho Kẻ Xấu Những Ý Tưởng Tốt

TÁC GIẢ: rumetzen
DỊCH GIẢ: KEQUIOS

Từng phút trôi qua, im lặng nhưng tiếng lách cách của đồng hồ và tiếng lộc xộc của những trang giấy. Ông lão lập đến trang báo cuối và lật lại từ trang đầu với vẻ mặt cau có. “Ta mong mình không bao giờ gặp ngươi một lần nào nữa.”

Chỉ Có Chúa Mới Có Thể Phán Xét Tôi

TÁC GIẢ: Decibelles
DỊCH GIẢ: Tzuoaen

"Không, ta chỉ là một người trung gian. Ta chỉ mang đến những gì đã có. Hừm… chỉ là không có đau đớn về mặt thể xác ở đây để mang theo." Móng vuốt của cái hàm giờ đã đến được đầu của tôi. "Cũng giống như một nhà văn là người tạo ra các nhân vật có mặt trong câu chuyện, ta cũng chỉ là nỗi hận thù của ngươi đối với chính bản thân. Nó đơn giản…" Cái hàm cắn đứt phần trước của đầu tôi. "…đơn giản chỉ là một người đưa tin thôi"

Cười

TÁC GIẢ: Communism will win
DỊCH GIẢ: Ezhno

"Sẽ có lúc, khi sự hỗn loạn của đám đông đạt tới đỉnh điểm, tôi sẽ có cơ hội bộc lộ cảm xúc của bản thân. Tiếc là không phải bằng lời nói. Nhưng bất cứ cảm xúc nào mà tôi có đều sẽ được bộc lộ, nếu tôi để nó."

Mặt Trăng Là Một Thế Giới Chết

TÁC GIẢ: Decibelles
DỊCH GIẢ: Tzuoaen

"Tôi thấy một cô gái với ông của cô, đang sống trong hạnh phúc khi ông ấy thách thức cả Thiên Đường."

Hoàn Toàn Không Phải Phim Con Heo

TÁC GIẢ: Marcelles_Raynes
DỊCH GIẢ: WPthai

""Mẹ mày," Paul vừa nói vừa chỉnh lại quần, "Cái công việc chết tiệt đó là gì vậy, Mark?"."

SCPhổ Thơ

TÁC GIẢ: A Fat Ghost (mở đầu)
DỊCH GIẢ: BaDang, King Pigeon, Irina Bougainvillea

"Con thằn lằn giận dữ
Cục cằn nhưng cũng vui đấy chứ
Đến khi gã xực bạn."

Bảy Đứa Trẻ

TÁC GIẢ: Oboebandgeek99
DỊCH GIẢ: King Pigeon

Ngắm nhìn từ băng ghế trong màn đêm tối tăm và hiu quạnh
Chỉ còn lại một đứa trẻ mang theo ánh sáng, bảo vệ niềm kiêu hãnh

Dịch Giả Triển Vọng


Dịch Giả: Suzu-HitsujiSuzu-Hitsuji


"Dịch Giả Tài Năng một nửa, đam mê những thứ ngọt lịm. Cô đã thăng hạng trong cộng đồng dịch giả với những bản dịch ngoại truyện hay và nổi trội về phần hội thoại của mình. Theo cô chia sẻ, trước đó cô đã từng có kinh nghiệm với những bản dịch từ fandom khác như game, nhạc và truyện tranh trước khi bắt đầu tham gia SCP-VN. Với niềm đam mê dịch thuật, cô đã chính thức bước vào đội ngũ dịch giả SCP-VN vào ngày 16/4/2021. Chia sẻ về hướng đi trong tương lai, cô nói rằng bản thân sẽ dịch những gì mình có thể dịch với châm ngôn "Gió chiều nào, vung kiếm chiều đó/Từng chữ mà tôi đã viết ra, sẽ mài sắc lưỡi kiếm này".

Bạn có thể tìm đọc những bản dịch của Suzu-Hitsuji trong trang giới thiệu của thành viên này.

Phỏng Vấn Tuần Này



Khách Mời: SamScriptSamScript, vomitervomiter, Dr V ValentineDr V Valentine
Phỏng Vấn Viên: KirQ, StupifPotato
Biên Soạn: KirQ, StupifPotato, Irina Bougainvillea

Phỏng Vấn


Cảm ơn bạn vì đã đón đọc Tin Báo SCP-VN!


Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License