Sandbox
+ Show component code
+ Show component code
:root {
    --timeScale: 1;
    --timeDelay: 0s;
}
 
/* Converting middle divider from box-shadow to ::before pseudo-element */
.anom-bar > .bottom-box { box-shadow: none!important; }
.anom-bar > .bottom-box::before {
    position: absolute;
    content: " ";
    width: 100%;
    height: 0.5rem;
    background-color: rgb(var(--black-monochrome, 12, 12, 12));
    transform: translateY(-0.74rem);
}
 
/* 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 > * {
    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.7s * var(--timeScale));
    animation-delay: calc(0.6s * 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;
}
div.diamond-part {
    clip-path: polygon( -10% 0.37%, 120% 0.37%, 120% 100%, -10% 100%);
    animation-name: diamondBorder;
    animation-duration: calc(0.8s * var(--timeScale));
    animation-delay: calc(0.5s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.32,.38,.39,.94);
    animation-fill-mode: backwards;
    will-change: box-shadow;
}
 
/* MOBILE QUERY */
@media (max-width: 480px ) {
    .anom-bar > .bottom-box::before {
        display:none;
    }
    .anom-bar > .bottom-box {
        box-shadow: 0 -0.5rem 0 0 rgb(var(--black-monochrome, 12, 12, 12))!important;
    }
    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 (prefers-reduced-motion) {
    div.anom-bar-container { --timeScale: 0; }
}
 
/*-------------------------*/
 
@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; max-width: 1%;}
    to { opacity: 1; max-width: 100%;}
}
@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 { box-shadow: -0.5rem -20rem 0 0 rgb(var(--black-monochrome, 12, 12, 12)); }
    to { box-shadow: -0.5rem 0 0 0 rgb(var(--black-monochrome, 12, 12, 12)); }
}
rating: 0+x
blank.png



Info
run-time error: division by zero%
(+0)		 run-time error: division by zero%
(-0)
-%
(+0)		 -%
(-0)

Item#: abcd
Level2
Containment Class:
euclid
Secondary Class:
{$secondary-class}
Disruption Class:
vlam
Risk Class:
notice
link to memo

[time]|religonforaeons: yea classes suck rn. finals are in two weeks :(
[time]|disruptivewave: God you guys are taking me back. cant believe its been two years sence i graduated to the real world
[time]|unbrokenchain: what do you even do after uni?
[time]|religonforaeons: work to pay of your loans :))))))
[time]|disruptivewave: Uhg. don't remind me. idk why i chose ryerson for my comp sci degree. could have learned most of that stuff by my self
[time]|religonforaeons: ¯\_(ツ)_/¯

Server: beboop connected to #general
Server: this is the first time beboop has joined this channel. welcome to our humble cave. We have snacks in the back, and Careful the the liquid gay thats to your left.

[time]|religonforaeons: !!!
[time]|disruptivewave: Yo, didn't know we were getting a new person
[time]|beboop: hi
[time]|unbrokenchain: hey, [thaumonbeat], wats going on?
[time]|thaumonbeat: got a new member recommended to us by a person in the states. friend said a friend of vir's wanted help on understanding a book he found. turned out it was a book on !golemancy

> Server: Message sent to Shield_of_Loew

[time]|beboop: yes
[time]|beboop:: boring to read but looks like fun to do
[time]|religonforaeons: well welcome to our little cubby hole tucked away from the man hehe
[time]|disruptivewave: I'm assuming you've been debriefed on the basics?
[time]|beboop: things out there want to keep magic from people
[time]|beboop:: pretty cool that im living in a spy novel now!
[time]|unbrokenchain: yea, it is pretty cool, save for when we need to dodge some jailors and/or goc goons
[time]|beboop:: lol yea

Server: Shield_of_Loew connected to #general

[time]|Shield_of_Loew: I'm awake, I'm awake.
[time]|Shield_of_Loew: Oh nice, another person interested in golemancy. Told you all it would catch on in here.
[time]|religonforaeons: its just one person tho >:(
[time]|disruptivewave: Don't get all high and might on us miss "water based thaumaturgy sucks"
[time]|Shield_of_Loew: It does though.
[time]|beboop:: whats thaumoturgy
[time]|religonforaeons: ✨whatever you want it to be✨
[time]|disruptivewave: Don't diss it till you try it aeons, bending only gets you so far.
[time]|[time]|unbrokenchain: hey, cant help that im objectively better at everything
[time]|Shield_of_Loew: Phf
[time]|beboop: uh what
[time]|religonforaeons: [beboop] oh god you really dont know whats going on
[time]|beboop: uhhhh

test

>beboop connected to #genmag

[time]|beboop: yo, check out what i did
monster.mp4
[time]|beboop: idk who took vid but its sick
[time]|unbrokenchain: Woah, thats a nice render boop, no need to pretend its real, its sick
[time]|disruptivewave: Hell yea!
[time]|disruptivewave: wonder if the janies would fall for this lol
[time]|unbrokenchain: Maybe one of their bots would
[time]|beboop: no, its real
[time]|disruptivewave: nice one dude
[time]|beboop: its real
[time]|Shield_of_Loew: It looks pretty accurate. It's pretty crude, doesn't sit right with me to be honest.
[time]|Shield_of_Loew: No golem would do that or be made of sewage, and if it did, god help the poor soul who animated it.
[time]|unbrokenchain: Its a golem?
[time]|Shield_of_Loew: Yea, has the structure of one at least
[time]|beboop: no. guys i did that! look at the clock on the video, was only 15 min ago
[time]|beboop: got it from here http://twitter.com/RyersonU/status/245862082404672460
[time]|disruptivewave: no way
[time]|unbrokenchain: dude wtf
[time]|Shield_of_Loew: Fucking hell there is an actual golem in public destroying buildings.
[time]|Shield_of_Loew: What the fuck did you do. WHAT THE FUCK DID YOU DO.
[time]|beboop: dude relax, no one got hurt yet. no harm no foul
[time]|Shield_of_Loew: YET.
[time]|Shield_of_Loew: WHAT THE FUCK.
[time]|Shield_of_Loew: Im leaving, cant believe that this is really happening. I need to fix this
[time]|Shield_of_Loew: [CADMIN] Take care of this fuckhead and alert the head admins. Were in deep shit.
>Shield_of_Loew has disconnected

old

+ Archive of now deleted SCP-P1555H17-J  by Starchmaster Kevin
Footnotes