Примечание:
Эта страница содержит визуальную тему, используемую на данной вики.
Подключение темы к другим страницам осуществляется с помощью следующего кода (указывается в начале страницы) Нажмите на блок, чтобы скопировать код:
Страница, объединяющая все визуальные темы в единый список, расположена по ссылке: Хаб визуальных тем.
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;
}
}