Link to article: SCP-8175.
.email {border: solid 2px #000000; width: 88%; padding: 1px 15px; margin: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.5)}
.tofrom {margin-left: 10px; margin-top: 5px; padding: 1px 15px; border-left: solid 3px maroon}
#page-content { position: relative; }
ul.modal-wrapper {
margin: 0;
padding: 0;
list-style: none;
height: 0;
display: contents;
}
@keyframes fademodal {
99% { visibility: hidden; }
100% { visibility: visible; }
}
ul.modal-wrapper > li {
list-style: none;
position: absolute;
top: -0.1rem;
left: 0;
width: 100%;
height: 100%;
z-index: 9;
transition: opacity 1s ease-out;
animation: 1s fademodal;
animation-fill-mode: forwards;
backdrop-filter: blur(5px);
}
ul.modal-wrapper > li.unfolded {
visibility: visible;
opacity: 1;
}
ul.modal-wrapper > li.folded {
visibility: hidden;
opacity: 0;
pointer-events: none;
user-select: none;
}
/* Hoverable text */
.edited {
font-style: normal;
position: relative;
}
.original {
display: block;
background-color: #281a08;
color: rgb(246, 196, 3);
border: thin solid rgb(246, 196, 3);
font-size: 14px;
padding: 10px;
text-align: center;
position: absolute;
left: 0;
right: 0;
margin-right: auto;
margin-left: auto;
bottom: 90%;
width: 300px;
visibility: hidden;
overflow: hidden;
animation: 0.5s fadeOut;
}
.edited:hover {
text-decoration: underline;
}
.edited:hover > .original {
visibility: visible;
overflow: visible;
animation: 0.5s fadeIn;
}
/* Popup styling */
.custom-popup {
width: 90%;
height: 7%;
margin-left: auto;
margin-right: auto;
overflow: auto;
box-sizing: border-box;
color: black;
padding: 25px;
text-shadow: none;
background-color: #281a08;
border: thin solid rgb(246, 196, 3);
}
/* Opening notice typewriter effect (aka the biggest pain in my ass) */
.typewriter{
overflow: hidden; /* Ensures the content is not revealed until the animation */
white-space: nowrap;
margin: 0; /* Gives that scrolling effect as the typing happens */
letter-spacing: .035em; /* Adjust as needed */
color: rgb(246, 196, 3);
animation:
typing 2s steps(40, end);
}
.typewriter2{
overflow: hidden; /* Ensures the content is not revealed until the animation */
color: rgb(246, 196, 3);
white-space: nowrap;
width: 0;
margin: 0; /* Gives that scrolling effect as the typing happens */
margin-top: -30px;
letter-spacing: .035em; /* Adjust as needed */
animation:
typing 2s steps(40, end);
animation-delay: 2s;
animation-fill-mode: forwards;
}
.typewriter3{
overflow: hidden; /* Ensures the content is not revealed until the animation */
color: rgb(246, 196, 3);
width: 0;
white-space: nowrap;
margin: 0; /* Gives that scrolling effect as the typing happens */
margin-top: -30px;
letter-spacing: .035em; /* Adjust as needed */
animation:
typing 2s steps(40, end);
animation-delay: 2s;
animation-fill-mode: forwards;
}
.inputline{
color: rgb(246, 196, 3);
overflow: hidden; /* Ensures the content is not revealed until the animation */
width: 0;
border-right: .15em solid rgb(246, 196, 3); /* The typwriter cursor */
white-space: nowrap;
margin: 0; /* Gives that scrolling effect as the typing happens */
letter-spacing: .15em; /* Adjust as needed */
animation:
typing 10s steps(41, end),
blink-caret 3s ease-out 60s;
animation-delay: 3s;
animation-fill-mode: forwards;
}
.afterinput{
overflow: hidden; /* Ensures the content is not revealed until the animation */
color: rgb(246, 196, 3);
width: 0;
white-space: nowrap;
margin: 0; /* Gives that scrolling effect as the typing happens */
letter-spacing: .035em; /* Adjust as needed */
animation:
typing 2s steps(40, end);
animation-delay: 5s;
animation-fill-mode: forwards;
}
.typewriterhiding{
overflow: hidden;
visibility: hidden;
animation: 1s fadeIn 2s;
animation-fill-mode: forwards;
}
.blink {
animation: blink 1s infinite;
}
@keyframes type {
from {
width: 0;
}
}
@keyframes blink {
to {
opacity: .0;
}
}
.blinkbar {
animation: blink 1.5s infinite;
letter-spacing: -0.13em;
}
/* The typing effect */
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
/* The typewriter cursor effect */
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: rgb(246, 196, 3); }
}
@media only screen and (max-width: 600px) {
.typewriter{
overflow: visible;
visibility: hidden; /* Ensures the content is not revealed until the animation */
white-space: normal;
animation: 1s fadeIn;
animation-fill-mode: forwards;
}
.typewriter2{
overflow: visible;
visibility: hidden; /* Ensures the content is not revealed until the animation */
white-space: normal;
animation: 1s fadeIn;
animation-delay: 2s;
animation-fill-mode: forwards;
width: 100%;
margin-top: 30px;
}
.typewriter3{
overflow: visible;
visibility: hidden; /* Ensures the content is not revealed until the animation */
white-space: normal;
animation: 1s fadeIn;
margin-top: 0px;
animation-delay: 2s;
animation-fill-mode: forwards;
width: 100%;
}
.inputline{
animation:
typing 5s steps(13, end),
blink-caret 3s ease-out 60s;
animation-delay:3s;
animation-fill-mode: forwards;
}
.afterinput{
overflow: visible;
visibility: hidden; /* Ensures the content is not revealed until the animation */
white-space: normal;
animation: 1s fadeIn;
animation-delay: 5s;
animation-fill-mode: forwards;
width: 100%;
}
}
/* Wait to appear */
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
visibility: visible;
opacity: 1;
}
}
@keyframes fadeOut {
0% {
opacity: 1;
visibility: visible;
}
100% {
opacity: 0;
}
text-align:right
text-align:center
text-align:right
:scp-wiki:component:preview
[info]
:scp-wiki:theme:black-highlighter-theme
[info]
:scp-wiki:theme:isolated-terminal
[info]
:scp-wiki:component:acs-animation
[info]
:scp-wiki:component:anomaly-class-bar-source
[info]
component:image-block
component:image-block
modal-wrapper
unfolded
custom-popup
typewriter
typewriter2
typewriter3
inputline
afterinput
foldable-list-container
choice
typewriterhiding
edited
original
edited
original
edited
original
blockquote
blockquote
edited
original
blockquote
blockquote
edited
original
email
tofrom
edited
original
blockquote
email
tofrom
edited
original
blockquote
blockquote
blockquote