DJK

NOTICE:

This is a component page used internally by the SCP Wiki. It is intended to be used and included on other pages.

This is a component that animates the ACS header upon loading.

How to use:

Put this in anywhere in the article:

[[include :scp-wiki:component:acs-animation]]

And you're done!

Example: SCP-5935


Note:

- Two variables, --timeScale and --timeDelay, control the timings of the animation. For example:

[[module CSS]]
:root {
--timeScale: 2;
--timeDelay: 0.5s;
}
[[/module]]

--timeScale slows down the entire animation by a factor of 2, and --timeDelay delays the starting point of the animation by half a second. Default values are 1 and 0s, respectively.

To change the default values, put the above after the [[include]]. --timeDelay is recommended if the ACS isn't the first content element, or you're using it in conjunction with other animation modules (a la Fade In.)

- Likely incompatible with other types of ACS headers*.

*To use with PeppersGhostPeppersGhost's ACS Lite, add the following patch after the [[include]]:

[[module CSS]]
/*-- ACS Lite Animation Compatibility Patch --*/
.anom-bar > .bottom-box::before { display: none; }
.anom-bar > .bottom-box { box-shadow: none!important; }
div.diamond-part { clip-path: none; animation: none; box-shadow: none!important; }
@media (max-width: 480px) {
div.top-right-box { clip-path: polygon(0% -30%, 100% -30%, 100% 130%, 0% 130%); }
}
[[/module]]

- Inspired by the works of AnAnomalousWriterAnAnomalousWriter.


Source Code:

:root {
    --timeScale: 1;
    --timeDelay: 0s;
}
 
/* Converting middle divider from box-shadow to ::before pseudo-element */
.anom-bar > div.bottom-box { box-shadow: none; position: relative; }
.anom-bar > div.bottom-box::before {
    position: absolute;
    content: " ";
    width: 100%;
    height: 0.5rem;
    bottom: 100%; left: 0;
    background-color: rgb(var(--swatch-menubg-black-color, 12, 12, 12));
}
 
/* DIVIDER */
.anom-bar > .bottom-box::before {
    animation-name: divider;
    animation-duration: calc(0.74s * var(--timeScale));
    animation-delay: calc(0.1s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.32,.38,.39,.94);
    animation-fill-mode: backwards;
}
 
/* CLASSIFIED LEVEL BARS */
div.top-center-box  > * {
    animation-name: bar;
    animation-duration: calc(0.45s * var(--timeScale));
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-fill-mode: backwards;
}
div.top-center-box > :nth-child(1) { animation-delay: calc(0.2s * var(--timeScale) + var(--timeDelay)); }
div.top-center-box > :nth-child(2) { animation-delay: calc(0.32s * var(--timeScale) + var(--timeDelay)); }
div.top-center-box > :nth-child(3) { animation-delay: calc(0.45s * var(--timeScale) + var(--timeDelay)); }
div.top-center-box > :nth-child(4) { animation-delay: calc(0.61s * var(--timeScale) + var(--timeDelay)); }
div.top-center-box > :nth-child(5) { animation-delay: calc(0.75s * var(--timeScale) + var(--timeDelay)); }
div.top-center-box > :nth-child(6) { animation-delay: calc(0.95s * var(--timeScale) + var(--timeDelay)); }
 
/* TOP TEXT */
div.top-left-box, div.top-right-box {
    clip-path: polygon( 0% -50%, 150% -50%, 150% 100%, 0% 100%);
}
 
div.top-left-box > *, div.top-right-box > * {
    position: relative;
    animation-name: bottomup;
    animation-duration: calc(0.65s * var(--timeScale));
    animation-delay: calc(0.5s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-fill-mode: backwards;
}
 
/*-----------------------------------*/
/*-----------------------------------*/
 
/* CONTAINMENT, DISRUPTION, RISK CLASSES */
div.text-part > * {
    clip-path: polygon( 0% 0%, 100% 0%, 100% 100%, 0% 100%);
    animation-name: expand2;
    animation-duration: calc(0.5s * var(--timeScale));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.12,.41,.27,.99);
    animation-fill-mode: backwards;
}
div.text-part > :nth-child(1) {
    animation-name: expand1;
}
div.text-part > :nth-child(1) { animation-delay: calc(0.6s * var(--timeScale) + var(--timeDelay)); }
div.text-part > :nth-child(2) { animation-delay: calc(0.75s * var(--timeScale) + var(--timeDelay)); }
div.text-part > :nth-child(3) { animation-delay: calc(0.86s * var(--timeScale) + var(--timeDelay)); }
 
div.main-class::before, div.main-class::after {
    animation-name: iconslide;
    animation-duration: calc(0.45s * var(--timeScale));
    animation-delay: calc(0.8s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.12,.41,.27,.99);
    animation-fill-mode: backwards;
}
 /* BOTTOM TEXT */
div.main-class > *,  div.disrupt-class > *, div.risk-class > * {
    white-space: nowrap;
    animation-name: flowIn;
    animation-duration: calc(0.42s * var(--timeScale));
    animation-delay: calc(0.75s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-fill-mode: backwards;
}
 
/*-----------------------------------*/
/*-----------------------------------*/
 
/* DIAMOND */
div.arrows {
    animation-name: arrowspin;
    animation-duration: calc(0.65s * var(--timeScale));
    animation-delay: calc(0.55s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.12,.41,.27,.99);
    animation-fill-mode: backwards;
}
 
div.quadrants > * {
    animation-name: fade;
    animation-duration: calc(0.3s * var(--timeScale));
    animation-delay: calc(1.4s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.12,.41,.27,.99);
    animation-fill-mode: backwards;
}
 
div.top-icon, div.right-icon, div.left-icon, div.bottom-icon {
    animation-name: nodegrow;
    animation-duration: calc(0.4s * var(--timeScale));
    animation-delay: calc(1.4s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.12,.41,.27,.99);
    animation-fill-mode: backwards;
}
.bottom-box > div.diamond-part {
    box-shadow: none;
}
.bottom-box > div.diamond-part::before {
    content: "";
    position: absolute;
    width: 0.5rem; height: 100%;
    top: 0; right: 100%;
    background-color: rgb(var(--swatch-menubg-black-color, 12, 12, 12));
    animation-name: diamondBorder;
    animation-duration: calc(0.475s * var(--timeScale));
    animation-delay: calc(0.775s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.28,.72,.55,.91);
    animation-fill-mode: backwards;
}
 
/* MOBILE QUERY */
@media (max-width: 480px ) {
    .anom-bar > div.bottom-box { position: initial; }
    .anom-bar > div.bottom-box::before { bottom: initial; top: 40vw; }
    div.top-center-box  > * {
        animation-name: bar-mobile;
        animation-duration: calc(0.9s * var(--timeScale));
    }
    div.top-center-box > :nth-child(1) { animation-delay: calc(0.1s * var(--timeScale) + var(--timeDelay)); }
    div.top-center-box > :nth-child(2) { animation-delay: calc(0.2s * var(--timeScale) + var(--timeDelay)); }
    div.top-center-box > :nth-child(3) { animation-delay: calc(0.3s * var(--timeScale) + var(--timeDelay)); }
    div.top-center-box > :nth-child(4) { animation-delay: calc(0.4s * var(--timeScale) + var(--timeDelay)); }
    div.top-center-box > :nth-child(5) { animation-delay: calc(0.5s * var(--timeScale) + var(--timeDelay)); }
    div.top-center-box > :nth-child(6) { animation-delay: calc(0.6s * var(--timeScale) + var(--timeDelay)); }
 
}
 
/*--- Motion Accessibility ---*/
@media screen and (prefers-reduced-motion: reduce) {
    div.anom-bar-container { --timeScale: 0!important; }
}
 
/*-------------------------*/
 
@keyframes divider {
    from { max-width: 0%;  }
    to { max-width: 100%; }
}
 
@keyframes bar {
    from { max-width: 0%; }
    to { max-width: 100%; }
}
@keyframes bar-mobile {
    from { max-height: 0%; }
    to { max-height: 100%; }
}
 
@keyframes bottomup {
    from { top: 100px; }
    to { top: 0; }
}
 
@keyframes expand1 {
    from { opacity: 0; clip-path: inset(0 calc(100% - 0.75rem) 0 0); }
    to { opacity: 1; clip-path: inset(0); }
}
@keyframes iconslide {
    from { opacity: 0; transform: translateX(-5rem); }
    to { opacity: 1; transform: translateX(0); }
}
 
@keyframes expand2 {
    from { opacity: 0; width: 1%; }
    to { opacity: 1; width: calc(100% - 0.25rem); }
}
@keyframes fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
 
@keyframes flowIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
 
@keyframes arrowspin {
    from { clip-path: circle(0%); transform: rotate(135deg); }
    to { clip-path: circle(75%); transform: rotate(0deg); }
}
@keyframes nodegrow {
    from { transform: scale(0);}
    to {  transform: scale(1);}
}
@keyframes diamondBorder {
    from { height: 0; }
    to { height: 100%; }
}

rating: +42+x

What this does

Makes the sidebar hidden by default and toggled via a corner button, similar to the mobile version of the site.


How to use

1. Copy code below.

2. Paste in article after Black Highlighter and any other Theme include.

[[include :scp-wiki:component:toggle-sidebar-bhl]]

3. (Optional) Style toggle button if using a theme.

There are also 5 CSS Vars available to style the button if needed.
For the colors, it is heavily suggested that you use the available BHL Color Vars which can be found here.

:root {
--toggle-button-bg: hex/rgb/hsl color;
--toggle-border-color: hex/rgb/hsl color;
--toggle-border-width: px/rem/em;
--toggle-icon-color: hex/rgb/hsl color;
--toggle-roundness: percentage;
}


rating: +42+x

What this does

Rearranges the header so that the titles and logos are centered


How to use

1. Copy code below.

2. Paste in article after Black Highlighter and any other Theme include.

[[include :scp-wiki:component:centered-header-bhl]]



rating: +42+x

On any wiki:

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

Hello everyone, I'm djkaktus. This is a personal component I am using to alleviate the suffering of one Elenee FishTruckElenee FishTruck who has, until this day, worked tirelessly to update all 140+ of my pages every time I update my standard formatting to something I really like. This way, I can just edit them all from a single place.

Some things this does:

1) Adds Black Highlighter to the page (Hallowed be our Woed)
2) Modifies Black Highlighter using the BHL Penumbra Theme (shoutout to Estrella)
3) Modifies BHL Penumbra with a bunch of color changes into this sort of retro variant I'm really into
4) Adds an ACS customization to fit the Penumbra changes
5) Adds the Fade In, Collapsible Sidebar, and ACS Animation components
6) Allows me to change any of this on a whim

I'm constantly striving to find the most representative theming possible for the majority of my articles. This effectively allows me to inch closer towards that ideal without having to update a hundred pages every time I change something.

sup {
    vertical-align: top;
    position: relative;
    top: -0.5em;
}
 
:root {
    --header-title: "THE FOUNDATION";
    --header-subtitle: "DEPARTMENT OF CONTAINMENT";
    --lgurl: url(https://scp-wiki.wdfiles.com/local--files/component%3Adjk/scpnewlogo.png);
    --white-monochrome: 15, 15, 15;
    --pale-gray-monochrome: 35, 35, 35;
    --light-pale-gray-monochrome: 35, 35, 35;
    --very-light-gray-monochrome: 60, 60, 60;
    --light-gray-monochrome: 160, 160, 160;
    --gray-monochrome: 200, 200, 200;
    --dark-gray-monochrome: 220, 220, 220;
    --black-monochrome: 245, 245, 245;
    --accentColor: 83, 49, 49;
    --background-gradient-color: var(--light-gray-monochrome);
    --five-color: var(--accentColor);
    --four-color: var(--accentColor);
    --three-color: var(--accentColor);
    --two-color: var(--accentColor);
    --one-color: var(--accentColor);
    --swatch-menubg-dark-color: var(--very-light-gray-monochrome);
    --swatch-text-tertiary-color: var(--accentColor);
    --ui-button-hover-txt: var(--black-monochrome);
    /*-- modal --*/
    --modal-header-txt: var(--black-monochrome);
    --modal-header-bg: var(--white-monochrome);
    /*-- footnote --*/
    --hoverblock-header-txt: var(--black-monochrome);
    --hoverblock-bg: var(--black-monochrome);
}
 
#header {
    --login-myaccount-hover-color: var(--black-monochrome);
    --login-dropdown-text-hover-color: var(--black-monochrome);
}
#header h1 a::before,
#header h2 span::before {
    content: none;
}
 
#top-bar {
    --dropdown-bg-color: var(--dark-gray-monochrome), 0.9;
}
 
#side-bar, #interwiki {
    --sidebar-links-hover-text-color: var(--black-monochrome);
    --sidebar-collapsible-fld-link-hover-color: var(--black-monochrome);
    --sidebar-collapsible-fld-arrow-hover-color: var(--sidebar-collapsible-fld-link-hover-color);
}
 
#main-content {
    --tables-header-txt: var(--black-monochrome);
    --footnotes-footer-title-text-color: var(--black-monochrome);
}
 
#page-content div.warning-top-box>h1 {
    color: rgb(var(--black-monochrome));
}
 
.top-right-box>.level {
    line-height: 0;
}
 
.scp-image-block {
    border: solid 0.5rem rgb(var(--pale-gray-monochrome));
    border-bottom: solid 0rem rgb(var(--pale-gray-monochrome));
    box-shadow: 0rem 0.26rem 0rem 0rem rgb(var(--accentColor));
    box-sizing: border-box;
}
 
.scp-image-block .scp-image-caption {
    background-color: rgb(var(--pale-gray-monochrome));
    border: solid 0.25rem rgb(var(--pale-gray-monochrome));
    color: rgb(var(--black-monochrome));
    font-size: 0.84rem;
}
 
#page-content .collapsible-block-folded,
#page-content .collapsible-block-unfolded-link {
    margin: 0;
    background: transparent;
}
 
.page-tags {
    --pagetags-title-text: var(--black-monochrome);
}
 
div[id*=page-options-bottom]>a {
    --ui-icon-color: var(--black-monochrome);
    --ui-icon-hover-color: var(--black-monochrome);
}
 
#action-area {
    --swatch-text-secondary-color: var(--black-monochrome);
}
 
#revision-list span {
    --pager-selected-link: var(--swatch-text-secondary-color);
    --pager-link-hover: var(--pager-selected-link);
}
 
#footer,
#license-area {
    --hover-link-color: var(--link-color);
    --swatch-text-secondary-color: var(--black-monochrome);
    --white-monochrome: var(--black-monochrome);
}
 
.code pre, .code p, .code {
    background-color: rgb(var(--pale-gray-monochrome));
    color: rgb(var(--black-monochrome));
}
 
/*---- AYERS INFO BAR MOD ----*/
#page-content .info-container .translation_block {
    display: none;
}
#page-content .info-container .collapsible-block-link,
#page-content .info-container:hover .collapsible-block-link {
    line-height: 1.6em;
}
#page-content .info-container .collapsible-block-folded,
#page-content .info-container .collapsible-block-unfolded-link {
    display: grid;
    background: #533131;
}
#page-content .info-container .collapsible-block-folded .collapsible-block-link,
#page-content .info-container .collapsible-block-link {
    -webkit-mask: unset;
    mask: unset;
    background: transparent;
    grid-column: 1;
    grid-row: 1;
    opacity: 0;
}
#page-content .info-container .collapsible-block-folded::before,
#page-content .info-container .collapsible-block-unfolded-link::before {
    --wght: 800;
    content: "DJK";
    color: #fff;
    font-family: Inter, Arimo, Verdana, Geneva, "Helvetica Neue", "Helvetica", Arial, sans-serif;
    display: block;
    pointer-events: none;
    grid-column: 1;
    grid-row: 1;
}
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License