On any page:[[include :scp-wiki:theme:5k]]
Info
This is a theme for articles authored with/by Affray Interactive in relation to their indie tactical shooter, SCP: 5K (formerly SCP: Pandemic).
It is built on top of the Basalt theme framework.
Area-12 Variant
[[include :scp-wiki:theme:5k area-12=a]]
[[span class="quint"]]
[[div class="a12_memo"]]
[[div class="end_card"]]
Some text here
By Пользователь 'Liryn' не существует
The SCP: 5K and Area-12 logos were created by Trey Bishop and are licensed under CC BY-SA 3.0.
This is a theme originally created by Пользователь 'Dc_Yerko' не существует for the Spanish Translation Site and adapted by Пользователь 'stormbreath' не существует. Code for the snow flakes adapted by Пользователь 'EstrellaYoshte' не существует.
Use it on your own article with the following:
[[include theme:xmas
|xmas-header= --]
|xmas-snow= --]]]
If you only want to use the header, use the following:
[[include theme:xmas
|xmas-header= --]]]
If you only want to use the snow, use the following:
[[include theme:xmas
|xmas-snow= --]]]
Likewise, to use with Black Highlighter:
[[include theme:black-highlighter-theme]]
[[include theme:xmas
|xmas-header-bhl= --]
|xmas-snow-bhl= --]]]
[[include theme:black-highlighter-theme]]
[[include theme:xmas
|xmas-header-bhl= --]]]
[[include theme:black-highlighter-theme]]
[[include theme:xmas
|xmas-snow-bhl= --]]]
/*
Xmas Theme
[2020 Wikidot Theme]
Originally made by Dc_Yerko for the Spanish Branch
Ported to -EN by stormbreath
*/
div#container-wrap {
background-image: url('https://scpfoundation.net/local--files/theme:xmas/GIF-111.gif');
}
#header {
background-image: url('https://scpfoundation.net/local--files/theme:xmas/logo-xmas.png');
}
#top-bar div.open-menu a {
color: #990011;
border-color: #33552D;
}#header-extra-div-1, #header-extra-div-2, #header-extra-div-3 {
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0));
mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0));
background-repeat: repeat;
height: 270px;
width: 99.4vw;
position: absolute;
left: calc((-100vw + 100%)/2);
z-index: 2;
pointer-events: none;
}
/* ---- SNOWFALL, adapted from https://github.com/elena-in-code/Css-Snow-Fall-Animation ---- */
#header-extra-div-1 {
background-image: url('https://scpfoundation.net/local--files/theme:xmas/sn2.png');
background-size: 230px;
animation: snowOne 83s infinite linear;
filter: blur(1.3px);
}
#header-extra-div-2 {
background-image: url('https://scpfoundation.net/local--files/theme:xmas/sn.png');
background-size: 370px;
animation: snowTwo 39s infinite linear;
filter: blur(0.4px);
}
#header-extra-div-3 {
background: url('https://scpfoundation.net/local--files/theme:xmas/sn.png');
background-size: 720px;
animation: snowThree 21s infinite linear;
filter: blur(2.4px);
}
@keyframes snowOne{
0%
{
background-position: 0px 0px;
opacity: 0;
}
10%
{
opacity: 0.6;
}
90%
{
opacity: 0.5;
}
100%
{
background-position: 100px 750px;
opacity:0;
}
}
@keyframes snowTwo{
0%
{
background-position: 0px -100px;
opacity: 0;
}
8%
{
opacity: 0.74;
}
90%
{
opacity: 0.65;
}
100%
{
background-position: -50px 700px;
opacity: 0;
}
}
@keyframes snowThree{
0%
{
background-position: 0px 100px;
opacity: 0;
}
13%
{
opacity: 0.9;
}
91%
{
opacity: 0.8;
}
100%
{
background-position: 240px 750px;
opacity: 0;
}
}:root {
--logo-image: url("https://scpfoundation.net/local--files/theme:xmas/logo-xmas-bhl.png");
}
#extra-div-1,#extra-div-2 {
height: 2rem;
width: 100%;
position: absolute;
top: calc(var(--final-header-height-on-desktop) - 0.3125rem);
background-repeat: repeat-x;
background-size: 6.2rem;
pointer-events: none;
z-index: 9;
}
#extra-div-1 {
background-image: url('https://scpfoundation.net/local--files/theme:xmas/n1.png');
animation: lightOne 3s infinite steps(1, end);
}
#extra-div-2 {
background-image: url('https://scpfoundation.net/local--files/theme:xmas/n2.png');
animation: lightTwo 3s infinite steps(1, end);
}
@media (max-width: 767px) {
#extra-div-1, #extra-div-2 {
top: calc(var(--header-height-on-mobile) + var(--topbar-height-on-mobile) - 0.3125rem);
}
}
@keyframes lightOne {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes lightTwo {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}#extrac-div-1, #extrac-div-2, #extrac-div-3 {
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0));
mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0));
height: 24rem;
width: 100%;
position: absolute;
background-repeat: repeat;
z-index: 10;
pointer-events: none;
}
#extrac-div-1 {
background-image: url('https://scpfoundation.net/local--files/theme:xmas/sn2.png');
background-size: 230px;
animation: snowOne 83s infinite linear;
filter: blur(1.3px);
}
#extrac-div-2 {
background-image: url('https://scpfoundation.net/local--files/theme:xmas/sn.png');
background-size: 370px;
animation: snowTwo 39s infinite linear;
filter: blur(0.4px);
}
#extrac-div-3 {
background-image: url('https://scpfoundation.net/local--files/theme:xmas/sn.png');
background-size: 720px;
animation: snowThree 21s infinite linear;
filter: blur(2.4px);
}
@media (max-width: 767px) {
#extrac-div-1, #extrac-div-2, #extrac-div-3 {
height: 10.5rem;
}
}