Hub Phòng Ban Vô thực

---

+ Show component code

@supports(display: grid) {
    :root {
        /* header measurements */
        --header-height-on-desktop: 10rem;
        --header-height-on-mobile: 10rem;
        --header-h1-font-size: clamp(2rem, 5vw, 2.8125rem);
        --header-h2-font-size: clamp(0.875rem, 3vw, 0.9375rem);
    }
 
    #header {
        --search-textbox-text-color: var(--swatch-secondary-color);
        background: none;
    }
 
    #header::before {
        content: " ";
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0.75rem;
        background-image: var(--logo-image);
        background-repeat: no-repeat;
        background-position: center 0;
        background-size: auto calc(var(--header-height-on-desktop) - 1.5rem);
        opacity: 0.8;
        pointer-events: none;
    }
 
    #header h1,
    #header h2 {
        margin: 0;
        padding: 0;
        width: 100%;
        height: var(--header-height-on-desktop);
        display: flex;
        align-items: center;
        justify-content: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }
 
    #header h1 a,
    #header h1 a::before,
    #header h2 span,
    #header h2 span::before {
        margin: 0;
        padding: 0;
        z-index: 0;
        display: block;
        text-align: center;
    }
 
    #header h1 {
        z-index: 1;
    }
 
    #header h1 a::before,
    #header h1 a::after {
        content: var(--header-title);
    }
 
    #header h1 a::before  {
        color: rgb(var(--swatch-text-tertiary-color));
        z-index: -1;
        -webkit-text-stroke: 0.325rem rgb(var(--swatch-text-dark));
    }
 
    #header h1 a::after {
        color: rgb(var(--swatch-headerh1-color));
        z-index: 1;
    }
 
    #header h2 {
        z-index: 0;
        text-transform: uppercase;
        pointer-events: none;
    }
 
    #header h2 span {
        margin-top: calc(var(--header-height-on-mobile)/2 + var(--header-h1-font-size)/2 - 2em);
    }
 
    #header h2 span::before,
    #header h2 span::after {
        --wght: 600;
        content: var(--header-subtitle);
        position: absolute;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        width: 100%;
        text-align: center;
    }
 
    #header h2 span::before {
        -webkit-text-stroke: 0.25rem rgb(var(--swatch-text-dark));
    }
 
    #header h2 span::after {
        color: rgb(var(--swatch-headerh2-color));
        z-index: 1;
    }
 
    #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
        color: rgba(0, 0, 0, 0);
    }
 
    @media (min-width: 36rem) {
 
        #login-status {
            flex-grow: 1;
            left: 3%;
            right: initial;
        }
 
         #login-status::before {
            --mask-image: none;
            background-color: transparent;
        }
 
        #login-status:not(:focus-within) {
            color: rgb(var(--login-line-divider-color));
            -webkit-user-select: initial;
            -moz-user-select: initial;
            -ms-user-select: initial;
            user-select: initial;
        }
 
        #login-status #account-topbutton,
        #login-status:not(:focus-within) #account-topbutton {
            --clip-path:
                    polygon( 0 0, 100% 0, 100% 100%, 0 100% );
            background-color: rgba(var(--login-arrow-color), 0);
 
        }
 
        #login-status #account-topbutton::before{
            --clip-path:
                    polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% );
            --mask-image: initial;
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(var(--login-arrow-color), 1);
            -webkit-clip-path: var(--clip-path);
            clip-path: var(--clip-path);
        }
 
        #login-status #account-topbutton::before,
        #login-status:not(:focus-within) #account-topbutton::before,
        #login-status:not(:focus-within) #account-topbutton:hover::before {
            --clip-path:
                    polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% );
            --mask-image: initial;
        }
 
        #login-status:not(:focus-within) #account-topbutton::after {
            display: none;
        }
 
        #login-status:not(:focus-within) *:not(#account-topbutton):not([href*="account/messages"]) {
            --clip-path:
                    polygon(
                        0 0,
                        100% 0,
                        100% 100%,
                        0 100%
                    );
            pointer-events: all;
            -webkit-clip-path: var(--clip-path);
            clip-path: var(--clip-path);
        }
 
        #login-status:not(:focus-within) *:not(#account-topbutton):not(#account-options):not([href*="account/messages"]) {
            opacity: 1;
        }
 
        #login-status #my-account {
            --wght: 300;
        }
 
        #account-options {
            background: var(--gradient-header);
        }
 
        #search-top-box {
            top: 1.5em;
            right: 3%;
            background: rgba(var(--search-focus-textbox-bg-color), 0.4);
            box-shadow: calc(var(--search-height) / 2 * -1) 0 calc(var(--search-height) / 2) rgba(var(--search-focus-textbox-bg-color), 0.4);
        }
 
         #search-top-box:focus-within ~ #login-status {
            opacity: 1;
        }
 
        #search-top-box::after {
            transition:
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
            transition:
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
            transition:
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1),
                -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
        }
 
        #search-top-box:not(:focus-within)::after {
            --clip-path:
                    polygon(
                        0 0,
                        100% 0,
                        100% 100%,
                        0% 100%
                    );
            background-color: rgba(var(--search-icon-bg-color, --dark-accent), 1);
            -webkit-clip-path: var(--clip-path);
            clip-path: var(--clip-path);
        }
 
        #search-top-box:not(:focus-within):hover::after {
            --clip-path:
                    polygon(
                        0 0,
                        100% 0,
                        100% 100%,
                        0 100%
                    );
            background-color: rgb(var(--search-icon-hover-bg-color));
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) {
            max-width: var(--search-width);
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
            max-width: var(--search-width);
            padding: 0 var(--search-height) 0 1em;
            outline-width: 0;
            background-color: rgb(var(--search-focus-textbox-bg-color), 0.35);
            color: rgba(var(--search-textbox-text-color), 0.4);
            cursor: pointer;
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="submit"],
        #search-top-box form[id="search-top-box-form"]:focus-within input[type="submit"] {
            pointer-events: all;
            border: none;
        }
 
    }
 
    #page-title::after,
    .meta-title::after,
    #page-title::before,
    .meta-title::before {
        content: "";
        flex-grow: 1;
        height: 0.0625rem;
        background: rgb(var(--swatch-primary));
    }
 
    #page-title::before,
    .meta-title::before {
        margin: auto 1.25rem auto auto;
    }
}

+ Show component code

@supports(display: grid) {
    :root {
        --sidebar-width-on-desktop: calc((var(--base-font-size) * (14 / 15)) * 19);
        --body-width-on-desktop: 45.75rem;
    }
    @media only screen and (min-width: 769px) {
        #side-bar .close-menu {
            display: block;
            position: fixed;
            top: 0.25rem;
            left: 0.5rem;
            width: 3rem;
            opacity: 1;
            pointer-events: all;
            z-index: -1;
        }
 
        #side-bar .close-menu img {
            color: transparent;
        }
 
        #side-bar .close-menu::before,
        #side-bar .close-menu::after {
            content: "";
            box-sizing: border-box;
            position: fixed;
            display: block;
            top: 0.5rem;
            left: 0.5rem;
            width: 3rem;
            height: 3rem;
            padding: 0;
            margin: 0;
            text-align: center;
            pointer-events: all;
            cursor: pointer;
            transition:
                opacity var(--sidebar-transition-timing);
        }
 
        #side-bar .close-menu::before {
            --mask:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' id='Hamburger' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 32 32' xml:space='preserve'%3E%3Cpath d='M4 10h24c1.1 0 2-.9 2-2s-.9-2-2-2H4c-1.1 0-2 .9-2 2s.9 2 2 2zm24 4H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2zm0 8H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2z'/%3E%3C/svg%3E");
            z-index: -1;
            background-color: var(--toggle-icon-color, rgb(var(--sidebar-links-text))) !important;
            -webkit-mask: var(--mask);
            mask: var(--mask);
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: 50% 50%;
            mask-position: 50% 50%;
            -webkit-mask-size: 60%;
            mask-size: 60%;
        }
 
        #side-bar .close-menu::after {
            z-index: -2;
            background-color: var(--toggle-button-bg, rgb(var(--sidebar-bg-color))) !important;
            border-radius: var(--toggle-roundness, 50%);
            border: var(--toggle-border-color, rgb(var(--sidebar-links-text))) var(--toggle-border-width, 0.25rem) solid;
        }
 
        #side-bar:focus-within .close-menu::before,
        #side-bar:focus-within .close-menu::after {
            opacity: 0;
        }
 
        #side-bar {
            display: block;
            position: fixed;
            top: 0;
            left: calc(var(--sidebar-width-on-desktop)*-1);
            z-index: 10;
            transition:
                left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
            height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            margin-top: 0;
        }
 
        #side-bar:focus-within {
            left: 0;
        }
 
        #side-bar .side-block {
            margin-top: 1rem;
            background-color: rgb(0, 0, 0, 0);
            border-radius: 0;
            border-left-width: 0px;
            border-right-width: 0px;
        }
 
        #main-content::before {
            content: "";
            display: block;
            position: fixed;
            top: 0;
            right: 0;
            z-index: -1;
            opacity: 0;
            transition:
                opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
                width 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
            margin-left: var(--sidebar-width-on-desktop);
            background: rgba(var(--swatch-menubg-black-color), .3) 1px 1px repeat;
            padding-right: 0;
            width: 100%;
            height: 100vh;
            pointer-events: none;
            z-index: 99;
        }
 
        #side-bar:focus-within~#main-content::before {
            width: calc(100% - var(--sidebar-width-on-desktop));
            opacity: 1;
            pointer-events: all;
        }
 
        #content-wrap {
            display: flex;
            flex-direction: row;
            width: calc(100vw - (100vw - 100%));
            min-height: calc(100vh - calc(var(--final-header-height-on-desktop, 10.125rem)));
            flex-grow: 2;
            height: auto;
            position: relative;
            margin: 0 auto;
            max-width: inherit;
        }
 
        #main-content {
            width: 100%;
            position: initial;
            max-height: 100%;
            padding: 2rem 1rem;
            width: var(--body-width-on-desktop, 45.75rem);
            max-width: var(--body-width-on-desktop, 45.75rem);
            margin: 0 auto;
        }
 
        #page-content {
            max-width: min(90vw, var(--body-width-on-desktop, 45.75rem));
        }
 
        @media not all and (-webkit-min-device-pixel-ratio:0), not all and (min-resolution:.001dpcm) {
            @supports (-webkit-appearance:none) {
                #side-bar {
                    transition:
                        left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
                        padding-right 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
                        background-color 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
                    padding-right: 0;
                    background-color: rgb(0, 0, 0, 0);
                    pointer-events: all;
                    overflow-x: visible;
                    overflow-y: visible;
                    z-index: 999;
                }
 
                #side-bar::-webkit-scrollbar {
                    opacity: 0;
                    -webkit-transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
                    transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
                }
 
                #side-bar .close-menu::before {
                    z-index: 999;
                }
 
                #side-bar .close-menu::after {
                    z-index: 998;
                }
 
                #side-bar:hover .close-menu::before {
                    opacity: 0;
                }
 
                #side-bar:hover {
                    left: 0;
                    background-color: rgba(var(--swatch-menubg-color), 1);
                    padding-right: 0;
                }
 
                #side-bar:hover::-webkit-scrollbar {
                    opacity: 1;
                }
 
                #side-bar:hover~#main-content::before {
                    width: calc(100% - var(--sidebar-width-on-desktop));
                    opacity: 1;
                    pointer-events: all;
                }
            }
        }
    }
}

+ Show

:root {
/* S-CSS-P Integration */
        /* If you're making a new CSS theme, please include the following three variables at minimum. */
        --theme-base: "black-highlighter";
        /* must be either "black-highlighter" or "sigma9" */
        --theme-id: "minimalist-bhl";
        /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
        --theme-name: "Minimalist BHL";
        /* set this to your theme's full name */
 
    --header-title: "TỔ CHỨC SCP";
    --header-subtitle: "QUẢN THÚC - LƯU TRỮ - BẢO VỆ";
    --logo-image: url('http://scp-wiki.wikidot.com/local--files/theme:minimalist-bhl/Foundation%20Logo');
    --lgurl: var(--logo-image);
 
    --bright-accent: 245, 245, 245;
    --dark-accent: 36, 36, 36;
    --swatch-primary: var(--dark-accent);
    --light-gray-monochrome: 196, 196, 196;
    --dark-gray-monochrome: 200, 200, 200;
    --medium-accent: var(--dark-accent);
    --tab-border-color: var(--bright-accent);
    --hover-link-color: var(--dark-accent);
    --rating-module-button-color: var(--dark-accent);
    --rating-module-button-credit-color: var(--dark-accent);
    --swatch-background: var(--bright-accent);
    /* Background and Header Colors */
    --background-color: var(--bright-accent);
    /* Primary Text Colors */
    --swatch-text-light: var(--dark-accent);
    --swatch-text-general: var(--dark-accent);
    /* Primary Menu Colors */
    --swatch-menubg-color: var(--bright-accent);
    /* Colors for Secondary & Tertiary items like Blockquote and YUI Tabs */
    --swatch-secondary-color: var(--swatch-menubg-dark-color);
    --swatch-tertiary-color: var(--dark-accent);
    /* Primary Header Colors */
       --gradient-header: linear-gradient(90deg, rgba(245,245,245,1) 0%, rgba(245,245,245,1) 50%, rgba(245,245,245,1) 100%);
    --swatch-topmenu-border-color: var(--dark-accent);
    --swatch-topmenu-bg-color: var(--dark-accent);
    --background-gradient-distance: 0rem;
    --modal-bg: var(--bright-accent);
 
    --rating-module-text-color: var(--dark-accent);
    --rating-module-button-cancel-color: var(--gray-monochrome);
 
    --diagonal-stripes: none;
 
    --toggle-button-bg: rgb(var(--bright-accent));
    --toggle-border-color: rgb(var(--dark-accent));
    --toggle-icon-color: rgb(var(--dark-accent));
}
 
/* Header Stuff, changes the background logo, makes the top bar dark and spooky too! */
 
#header::before {
    background-image: var(--lgurl);
    opacity: 0.20;
}
 
#header div[class*=top-bar]>ul li:hover {
    background-color: rgba(var(--bright-accent));
}
 
#header div[class*=top-bar]>ul>li ul>li {
    box-shadow: inset 0 0 0 .0625rem rgb(var(--dark-accent));
    background-color: rgb(var(--dark-accent));
    color: rgb(var(--bright-accent));
}
 
#header div[class*=top-bar]>ul>li>a {
    color: rgb(var(--bright-accent));
}
 
#header div#top-bar {
    background-color: inherit;
}
 
#header div[class*=top-bar]>ul>li>a:after,
#header div[class*=top-bar]>ul>li>a:before {
    background-color: rgba(var(--dark-accent));
}
 
#header div[class*=top-bar]>ul>li:hover>a {
    background-color: rgb(var(--bright-accent));
    color: rgb(var(--dark-accent));
}
 
#header h1 a::before {
    -webkit-text-stroke: 0.325rem rgb(var(--bright-accent));
}
 
#header h2 span::before {
    -webkit-text-stroke: 0.25rem rgb(var(--bright-accent));
}
 
#header h2 span::after {
    color: rgb(var(--dark-accent));
}
 
#header {
    --login-myaccount-hover-color: var(--bright-accent)
    --login-line-divider-color: var(--dark-accent);
    --login-username-color: var(--dark-accent);
    --login-myaccount-color: var(--dark-accent);
    --login-myaccount-underline-color: var(--bright-accent);
    --login-myaccount-hover-bg-color: var(--dark-accent);
    --login-arrow-color: var(--dark-accent);
    --login-dropdown-text-color: var(--dark-accent);
}
 
/* This is purely just for the Top Bar, especially the hover elements and whatnot */
 
#top-bar div.mobile-top-bar>ul>li>ul>li:hover>a,
#top-bar div.top-bar>ul>li>ul>li:hover>a {
    text-decoration: none;
    color: rgb(var(--dark-accent));
}
 
#top-bar div.mobile-top-bar {
    background: rgb(var(--dark-accent));
}
 
#top-bar div.top-bar>ul>li:hover {
    background: rgb(var(--dark-accent));
}
 
#top-bar div.mobile-top-bar>ul>li.sfhover>ul,
#top-bar div.mobile-top-bar>ul>li:hover>ul,
#top-bar div.top-bar>ul>li.sfhover>ul,
#top-bar div.top-bar>ul>li:hover>ul {
    color: rgb(var(--bright-accent));
}
 
/* Everything below here is for the Sidebar, including the hover elements and the headings too */
 
#side-bar {
    --sideblock-heading-text-color: var(--bright-accent);
    --social-icon-hover-color: var(--bright-accent);
}
 
#side-bar .side-block {
    background-color: rgb(var(--bright-accent));
}
 
#side-bar .side-block.resources {
    background: rgb(var(--bright-accent)) !important;
}
 
#side-bar .side-block.media {
    background-color: rgba(var(--dark-accent)) !important;
}
 
#side-bar div.menu-item>a {
    color: rgb(var(--dark-accent));
    transition:
     color 300ms cubic-bezier(.4, 0, .2, 1),
     background-color 300ms cubic-bezier(.4, 0, .2, 1)
}
 
#side-bar div.menu-item>a:visited {
    color: rgb(var(--dark-accent));
}
 
#side-bar div.menu-item>a:hover,
#side-bar div.menu-item>a:active {
    color: rgb(var(--bright-accent));
}
 
#side-bar div.menu-item>a:focus-within {
    color: rgb(var(--bright-accent));
}
 
#side-bar div.menu-item a::before {
    background-color: rgb(var(--dark-accent));
    color: rgb(var(--bright-accent));
}
 
.side-block.media a {
    background: transparent
}
 
#side-bar .collapsible-block .collapsible-block-folded,
#side-bar .heading {
    background: rgb(var(--dark-accent));
}
 
/* Throwing this quick fix for the search bar up here as well, just so everything fits */
 
#search-top-box-input {
    background-color: rgb(var(--bright-accent));
    color: rgb(var(--dark-accent));
}
 
#search-top-box-form input[type="submit"] {
    background: rgb(var(--bright-accent));
    color: rgb(var(--dark-accent));
}
 
#search-top-box-form input[type="submit"]:hover {
    background: rgb(var(--bright-accent));
    color: rgb(var(--dark-accent));
}
 
#search-top-box-input {
    background-color: rgb(var(--bright-accent));
    color: rgb(var(--dark-accent));
}
 
#search-top-box input.empty {
    color: rgb(var(--dark-accent));
}
 
#search-top-box form[id=search-top-box-form]:not(:focus-within) input[type=text] {
    background-color: rgba(var(--dark-accent));
}
 
@media only screen and (max-width: 56.25rem) {
#login-status:before {
    background-color: rgba(var(--dark-accent));
}
 
}
 
@media only screen and (min-width: 769px) {
    #search-top-box-form>input {
     box-shadow: none;
    }
}
 
@media only screen and (min-width: 769px) {
    #search-top-box-form input[type="submit"],
    #search-top-box-form input[type="submit"]:focus,
    #search-top-box-form input[type="submit"]:hover {
            border-left: none;
     border-top: 0.0125rem solid rgb(var(--dark-accent));
     border-right: 0.0125rem solid rgb(var(--dark-accent));
     border-bottom: 0.0125rem solid rgb(var(--dark-accent));
     box-shadow: none;
    }
}
 
:not(.page-rate-widget-box):not(#search-top-box-form)>.btn, :not(.page-rate-widget-box):not(#search-top-box-form)>.button, :not(.page-rate-widget-box):not(#search-top-box-form)>.owindow .button-bar a, :not(.page-rate-widget-box):not(#search-top-box-form)>button, :not(.page-rate-widget-box):not(#search-top-box-form)>div.buttons input, :not(.page-rate-widget-box):not(#search-top-box-form)>input.button {
    background-color: rgb(var(--dark-accent));
    color: rgb(var(--bright-accent));
}
 
/* Since we're also up here, here's the code to mess with the account options too (and one fix for the printusers) */
 
#login-status .printuser {
    background: transparent;
    color: rgb(var(--dark-accent));
}
 
#login-status #my-account {
    color: rgb(var(--dark-accent));
}
 
#account-options {
    width: auto;
    padding: 0.5em;
    border-color: rgba(var(--dark-accent));
    background: rgb(var(--bright-accent));
    color: rgb(var(--dark-accent));
}
 
.printuser a {
    margin-right: -1px;
    font-size: 14px;
    background-color: transparent;
    color: inherit;
}
 
login-status span.printuser {
    color: rgb(var(--dark-accent));
}
 
/* Okay, now for the links and the body */
 
body {
    color: rgb(var(--dark-accent));
}
 
#page-content a:not([href*="user"]):not([href*="javascript:;"]):not(.fa-info) {
    padding: 0.15em;
    margin: -0.15em;
    color: inherit;
    box-decoration-break: clone;
    box-shadow: inset 0 -0.125rem 0 0rem rgba(var(--dark-accent));
    transition: box-shadow 300ms cubic-bezier(0.4, 0.0, 0.2, 1), color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), padding 300ms cubic-bezier(0.4, 0.0, 0.2, 1), margin 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
 
#page-content a:not([href*="user"]):not([href*="javascript:;"]):not(.fa-info):hover {
    padding: 0.3em 0.25em 0.2em 0.25em;
    margin: -0.25em;
    box-shadow: inset 0 -1.5em 0 0 rgba(var(--dark-accent));
    text-decoration: none;
    color: rgb(var(--bright-accent))
}
 
::selection {
    background: rgb(148, 148, 148);
}
 
a {
    color: inherit;
}
 
a:hover {
    color: inherit;
}
 
a.close-menu {
    background-color: transparent;
}
 
a:visited {
    color: inherit;
}
 
.scp-image-block a {
     box-shadow:none;
}
 
hr {
    border-top: none;
    background-color: rgb(var(--dark-accent));
}
 
blockquote,
div.blockquote {
    border: 1px solid #242424;
    background-color: rgb(var(--bright-accent));
}
 
/* Fancy Collapsibles */
 
#page-content .collapsible-block-link {
    text-decoration: none;
    font-weight: 700;
}
 
#page-content .collapsible-block-folded,
#page-content .collapsible-block-unfolded-link {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
        margin-right: auto;
        margin-left: auto;
    padding-top: 0.25rem;
        padding-bottom: 0.25rem;
        padding-left: 1rem;
        padding-right: 1rem;
        width: min-content;
    white-space: nowrap;
    overflow: hidden;
}
 
#page-content .collapsible-block-folded a,
#page-content .collapsible-block-unfolded-link a {
    position: relative;
    top: 0;
    left: 0;
    width: min-content;
    height: 100%;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
     color 0.25s linear,
     background-color 0.25s linear;
}
 
#page-content .collapsible-block-folded a {
    background-color: rgb(var(--dark-accent));
    color: rgb(var(--bright-accent));
}
 
#page-content .collapsible-block-unfolded-link a {
    background-color: rgb(var(--bright-accent));
    color: rgb(var(--dark-accent));
}
 
#page-content .collapsible-block-folded a:hover,
#page-content .collapsible-block-unfolded-link a:hover {
    background-color: rgb(var(--bright-accent));
    color: rgb(var(--dark-accent));
}
 
#page-content .collapsible-block-unfolded-link {
    box-shadow: none;
}
 
/* Code for changing button colors */
 
div#page-options-bottom-2>a,
div#page-options-bottom>a {
    color: rgb(var(--dark-accent));
    border-color: rgb(var(--dark-accent));
    background-color: rgb(var(--bright-accent));
}
 
.owindow .button-bar a,
a.button,
button,
div.buttons input,
file,
input.button {
    border: 0.125rem solid rgba(var(--dark-accent));
    color: rgb(var(--dark-accent));
    background-color: rgb(var(--bright-accent));
}
 
.owindow .button-bar a:hover,
a.button:hover,
button:hover,
div.buttons input:hover,
file:hover,
input.button:hover {
    border: .125rem solid rgba(var(--bright-accent));
    background-color: rgba(var(--dark-accent));
    color: rgb(var(--bright-accent));
}
 
div#page-options-bottom-2>a:hover,
div#page-options-bottom>a:hover {
    color: rgb(var(--bright-accent));
    border-color: rgb(var(--dark-accent));
    background-color: rgb(var(--dark-accent));
}
 
/* All Rating Module Code is below this line! */
 
.modalbox {
    box-shadow: none !important;
    border-color: transparent !important;
    border-radius: 0px !important;
    padding: 4px;
    pointer-events: auto !important;
}
 
.creditButton p a {
    background-color: rgb(var(--black-accent));
}
 
#page-content .rate-box-with-credit-button {
    display: inline-flex;
    margin-bottom: .75rem;
    border: .0625rem solid rgba(12, 12, 12, .25);
    border: .0625rem solid rgba(var(--gray-monochrome));
    border-radius: 0;
    background: rgb(var(--bright-accent));
    background-color: #fcfcfc;
    background-color: rgb(var(--bright-accent));
    padding: 0 .125rem;
    height: var(--rating-module-height);
    overflow: hidden;
}
 
.page-rate-widget-box {
    background: rgb(var(--bright-accent));
    border: 0.0625rem solid rgba(var(--dark-accent));
}
 
/* Tabs */
 
.yui-navset .yui-nav li,
.yui-navset .yui-navset-top .yui-nav li {
    box-shadow: none;
}
 
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
    box-shadow: none;
    border-color: rgb(var(--bright-accent));
}
 
.yui-navset .yui-nav a:focus,
.yui-navset .yui-nav a:hover {
    background-color: rgb(var(--bright-accent));
    color: rgb(var(--bright-accent));
}
 
.yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a em {
    color: rgb(var(--bright-accent));
}
 
.yui-navset .yui-content,
.yui-navset .yui-navset-top .yui-content {
    color: rgb(var(--dark-accent));
    background: rgb(var(--bright-accent));
    border: 1px solid rgb(var(--dark-accent));
}
 
.yui-navset .yui-nav li,
.yui-navset .yui-navset-top .yui-nav li {
    background: rgb(var(--bright-accent));
}
 
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
    border-color: rgb(var(--dark-accent));
    background-color: rgb(var(--dark-accent));
    color: rgb(var(--bright-accent));
}
 
.yui-navset-bottom .yui-nav li a, .yui-navset-top .yui-nav li a, .yui-navset .yui-nav li a {
    color: rgb(var(--dark-accent));
    background: rgb(var(--bright-accent));
}
 
/* Simple Tables */
 
table.wiki-content-table td {
    border: 1px solid #888;
    padding: 0.3em 0.7em;
    color: rgb(var(--dark-accent));
}
 
table.wiki-content-table th {
    background: rgb(var(--dark-accent));
    border: 1px solid rgb(var(--dark-accent));
    color: rgb(var(--bright-accent));
}
 
table.wiki-content-table tr {
    border: 1px solid #e3e3e3;
    color: #e3e3e3;
}
 
/* Image Blocks */
 
.scp-image-block {
    box-shadow: none;
}
 
.scp-image-block a {
    background-color: transparent;
}
 
.scp-image-block .scp-image-caption {
    background-color: rgb(var(--dark-accent));
    color: rgb(var(--bright-accent));
}
 
/* Footer and Hovertips */
 
.footnote {
    color: rgb(var(--dark-accent));
    background-color: rgb(var(--bright-accent));
    border: 1px solid #242424;
    padding: .625em;
}
 
.footnotes-footer {
    background-color: rgba(var(--bright-accent));
    color: rgb(var(--dark-accent));
    border-top: 1px solid #242424;
    border-bottom: 1px solid #242424;
    border-right: 1px solid #242424;
}
 
.footnotes-footer a[href*=javascript]:before {
    color: rgb(var(--dark-accent));
    background-color: transparent;
}
 
.hovertip {
    background-color: rgb(var(--bright-accent));
    border: .0625rem solid rgb(var(--dark-gray-monochrome));
    color: rgb(var(--dark-accent));
}
 
.hovertip .content {
   background-color: rgb(var(--bright-accent));
}
 
#footer {
    background: rgb(var(--dark-accent));
    color: rgb(var(--bright-accent));
}
 
/* Michellaneous */
 
textarea, #lock-info {
    color: rgb(var(--dark-accent));
}
 
.owindow .modal-body img {
    background-color: transparent !important;
}
 
.scpnet-interwiki-wrapper {
    filter: initial;
    margin-top: 1em;
}
 
.scpnet-interwiki-frame {
    filter: invert(0.92) grayscale(1) contrast(1);
}
 
.licensebox .collapsible-block-link {
    background: none;
}
 
.printuser img.small {
    vertical-align: -0.4em;
    width: 20px;
    height: 20px;
}
 
#who-rated-page-area .printuser a {
    font-size: 100%;
}
 
#license-area {
    color: rgb(var(--dark-accent));
    background-color: rgb(var(--bright-accent));
}
 
.printuser a {
    margin-right: -1px;
    font-size: 14px;
    background-color: transparent;
    color: inherit;
}
 
.printuser img.small {
    vertical-align: -0.4em;
    width: 19px;
    height: 18.5px;
}
 
.printuser:hover {
    background-color: transparent;
}
 
.page-tags a {
    background-color: transparent;
    color: rgb(var(--dark-accent));
}
 
.page-tags a:hover {
    color: rgb(var(--bright-accent));
}
 
form#edit-page-form {
    background-color: rgba(var(--dark-accent));
    color: rgb(var(--bright-accent));
 
}
 
input#edit-page-title {
    color: rgb(var(--dark-accent));
}
 
form#edit-page-form .edit-help-34>a {
    color: rgb(var(--dark-accent));
}
 
.danger-diamond a, .danger-diamond a:hover {
    color: rgba(0, 0, 0, 0);
    box-shadow: initial;
}
 
.acs-hybrid-text-bar>a {
    background-color: transparent;
    color: transparent;
}
 
@media only screen and (min-width: 769px) {
 
    #search-top-box-form>input,
    #search-top-box-form>input:hover,
    #search-top-box-form>input:focus {
     background: rgb(var(--light-accent));
    }
}
 
@media (min-width: 0px) {
    #page-content .rate-box-with-credit-button>.creditButton>p>a:before {
     left: 4px;
    }
}
 
@media only screen and (max-width: 768px) {
#header h2,
#header h2 a,
#header h2 a::before {
      top: 0.45rem;
}
}

Thông Tin

---

Hub Phòng Ban Vô Thực
Tác Giả: Fishish
Trang Tác Giả Fishish's Author Page

---

Kính gửi [Tên],

Tôi rất hân hạnh được chào mừng bạn đến với [Tên Phòng Ban.] Bạn đã được chọn trong số các đồng nghiệp của mình vì [Có kinh nghiệm làm việc liên quan.] và [Những phẩm chất tốt đẹp.]

Phòng ban này xử lý cụ thể một nhóm các ảnh hưởng của các dị tượng [Thông tin liên quan về Phòng ban.]

[Văn bản bổ sung đề cập chi tiết nhiệm vụ liên quan thuộc phạm vi của Phòng ban.]

Trân trọng,

John Doe
Phòng Ban Vô Thực
Giám Đốc

[NHẤP VÀO ĐỂ CHỈNH SỬA TIÊU ĐỀ]

Những viên gạch tạo nên sự sụp đổ.
(Xếp Theo Thứ Tự Thời Gian.)

Buổi chiều (Định Hướng Phòng ban Vô Thực)) – bởi Fishish.

Tôi cầm một chiếc bánh mì vòng và đi vào Điểm-19..

Người Bạn tưởng Tượng Của Bạn – bởi Fishish và Deadly Bread.

Một cách chậm rãi, tôi thử chơi xếp hình mà không có một mảnh ghép nào là thực cả.

Thứ Gì Đó Đang Phát Sáng – Bởi Deadly Bread.

tất cả các chức năng phụ trợ sẽ được di dời nhằm ngăn chặn thiệt hại chủ quan về thực tại trong quá trình này.

Bị Bỏ Rơi Từ Hư Không – bởi Fishish.

Trong thời gian tôi công tác tại điểm Điểm-19, tôi đã làm từ một đến hai điều có thể được coi là công việc thực thụ.//

Nó Không Có Thật, Nó Chưa Bao Giờ Tồn Tại, Đồ Ngu Ngốc – bởi Fishish.

Yêu Cầu Vật Liệu: Không Gì Cả. (Đã thuộc sở hữu của tôi)

SCP-6208 – Tên cô ấy là Quên Lãng – bởi Elunerazim và Fishish.

Các Nhân Sự Của Tổ Chức Nhận Thức Được Sự Tồn Tại Của Phòng Ban Vô Thực Tổ Chức SCP.

SCP-6938 – Alex Thorley Nhận Một Con Ngựa Quà – bởi Uncle Nicolini và Fishish.

"Có ai phản đối không?"

Ám Tôi, Ám Tôi Nè, Ám Tôi Đi – bởi Fishish.

Bị nắng sớm ghét bỏ, toàn thân thì đau nhức.

SCP-001-SỐ KHÔNG - Đề Xuất Của Finish – bởi Fishish.

Ta sẽ gặp lại nhau. Như trước kia.

---

Căng Tin Điểm-19

O.R. #: 000000 Số Khách: 7
Thu Ngân: N/A 18:24:30 PM
13/02/2021

---

1 Bánh Mì Tròn Thường 1.75

1 Chai Nước D 0.99

---

Tổng Tiền Trước Thuế 2.74
12% VAT 0.32

Tổng Giá: 3.06

Cạn Dần

Những Tác Phẩm Truyện Độc Lập Liên Quan Đến Phòng Ban Vô Thực. (thiểu số).

Alex Thorley ăn chiếc Burger – bởi syuzhet.

Mùi hương của thịt chín, đọng lại trên đầu lưỡi của bạn, mỡ len lỏi qua mọi ngóc ngách của từng chiếc răng.

Thật tốt nếu một lần được ăn đồ ăn thật.

Thèm Một Chiếc Bánh Mì Vòng – bởi JakdragonX.

À mà nói về cảm giác thì: tôi vẫn thấy đói.

alex thorley mơ ước về sushi. – bởi LORDXVNV.

Bạn sẽ nghĩ rằng một đại dương rộng lớn như thế này sẽ có sóng thật sự, nhưng thực ra chúng chỉ là những gợn sóng. Chúng chỉ ở đó và sẽ không bao giờ vỗ bờ. Chúng sẽ không bao giờ có cao trào.

Tờ Giấy Trắng – bởi Cassandra_Prime.

Bạn nhìn chằm chằm vào trang giấy trắng, kinh hãi.

---

[TRUY CẬP BỊ TỪ CHỐI]

Những Tác Phẩm SCP Độc Lập Liên Quan Đến Phòng Ban Vô Thực. (đa số).

SCP-5863 – Bình Thường Hóa Thần Thoại – bởi SynthPanda_.

Tổ Chức chưa thể làm rõ bản chất của SCP-5863. Những đề xuất sau đây đang được xem xét.

SCP-983 – Ngày Hôm Nay Là Bữa Tiệc – bởi FLOORBOARDS.

Tôi không thể cứ tiếp tục giả vờ đây không phải quà của chính bản thân mình.

SCP-6478 – Không Phải Sa Sút Trí Tuệ - Nó Là Một Thứ Khác – bởi Quicksilvers.

Không thể kết luận được kết quả và tác dụng phụ sau khi ăn SCP-6478-1.

SCP-6558 – Phân Tách Từ – bởi Tstaffor.

Quy Trình Quản Thúc Đặc Biệt: Containment.

SCP-7591 – Alex Thorley Đã giết Một Gã – bởi PlaguePJP.

Lague: Bạn đã bao giờ có những suy nghĩ bạo lực chưa?

SCP-7195 – Alex Thorley Có Một Con Mèo – bởi Cassandra_Prime.

Thorley kêu meo.

SCP-7195 kêu meo meo.

Đây là gì?

Có cố gắng đấy Nhân sự.

Phòng Ban Vô thực là một Phòng Ban của Tổ Chức¹ xử lý các hiện tượng dị thường. Bạn phải tận mắt thấy thì mới tin được.

[NHẤP VÀO ĐỂ CHỈNH SỬA TIÊU ĐỀ] bao gồm những tác phẩm được viết bởi The Wiggles Hate Each Other in Real Life cho DEPARTMENTCON 2022, cũng như được tiếp nối bởi Fishish.

Mặc dù phòng ban có thể được diễn giải theo bất cứ cách nào bạn muốn, nhưng chỉ những tác phẩm có nội dung nhất quán với những tác phẩm đã có trong hub mới đủ điều kiện để có thể được thêm vào. Xin hãy liên hệ Fishish qua Wikidot PMs hoặc Discord nếu có bất cứ câu hỏi nào.

Hướng Dẫn Viết

+ Hướng Dẫn Viết

Nó phải hay.
Một trong những quy tắc, một món quà: Alex Thorley là nhân sự duy nhất tồn tại của phòng ban.

Chú thích

1. Bất chấp phản đối của RAISA, Ủy ban Đạo đức, Liên lạc viên của phòng ban và tác giả.