Примечание:
Эта страница содержит визуальную тему, используемую на данной вики.
Подключение темы к другим страницам осуществляется с помощью следующего кода (указывается в начале страницы) Нажмите на блок, чтобы скопировать код:
Страница, объединяющая все визуальные темы в единый список, расположена по ссылке: Хаб визуальных тем.
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;
}/* ---- SNOWFALL, adapted from https://github.com/elena-in-code/Css-Snow-Fall-Animation ---- */
#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));
height: 270px;
width: 99.4vw;
position: absolute;
left: calc((-100vw + 100%)/2);
z-index: 2;
pointer-events: none;
overflow: hidden;
background: none !important;
animation: none !important;
}
#header-extra-div-1::before,
#header-extra-div-2::before,
#header-extra-div-3::before {
content: "";
position: absolute;
top: -200%;
left: -50%;
width: 200%;
height: 400%;
background-repeat: repeat;
will-change: transform, opacity;
}
#header-extra-div-1::before {
background-image: url('https://scpfoundation.net/local--files/theme:xmas/sn2-blur1.3.webp');
background-size: 230px;
animation: snowOneOptimized 83s infinite linear;
}
#header-extra-div-2::before {
background-image: url('https://scpfoundation.net/local--files/theme:xmas/sn-blur0.4.webp');
background-size: 370px;
animation: snowTwoOptimized 39s infinite linear;
}
#header-extra-div-3::before {
background-image: url('https://scpfoundation.net/local--files/theme:xmas/sn-blur2.4.webp');
background-size: 720px;
animation: snowThreeOptimized 21s infinite linear;
}
@keyframes snowOneOptimized {
0% {
transform: translate3d(0px, 0px, 0);
opacity: 0;
}
10% {
opacity: 0.6;
}
90% {
opacity: 0.6;
}
100% {
transform: translate3d(100px, 750px, 0);
opacity: 0;
}
}
@keyframes snowTwoOptimized {
0% {
transform: translate3d(0px, -100px, 0);
opacity: 0;
}
8% {
opacity: 0.74;
}
90% {
opacity: 0.74;
}
100% {
transform: translate3d(-50px, 700px, 0);
opacity: 0;
}
}
@keyframes snowThreeOptimized {
0% {
transform: translate3d(0px, 100px, 0);
opacity: 0;
}
13% {
opacity: 0.9;
}
91% {
opacity: 0.9;
}
100% {
transform: translate3d(240px, 750px, 0);
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;
}
}