homoween III + other random shit

pull/211/head
Aevann 2023-09-29 02:58:09 +03:00
parent fe981e97d6
commit 9f7a761b73
191 changed files with 3725 additions and 458 deletions

View File

@ -5590,12 +5590,12 @@ span > img[src$="/i/talking.webp"]+img[src$="/i/hand.webp"]+img {
span > img[src$="/i/love-foreground.webp"]+img[src$="/i/love-background.webp"]+img {
position: absolute;
z-index: 50;
height: 60%;
width: 60%;
height: 60%;
width: 60%;
bottom: -2%;
left: 33%;
transform: scaleX(-1) rotate(-10deg);
-webkit-transform: scaleX(-1) rotate(-10deg);
left: 33%;
transform: scaleX(-1) rotate(-10deg);
-webkit-transform: scaleX(-1) rotate(-10deg);
}
span > img[src$="/i/love-foreground.webp"] {
@ -6758,13 +6758,13 @@ g {
.rainbow-text:not(a) {
background-image: repeating-linear-gradient(135deg, violet, rgb(178, 94, 238), lightblue, green, yellow, orange, #ff7f7f 50%) !important;
color: transparent !important;
font-weight: 700 !important;
background-clip: text !important;
-webkit-background-clip: text !important;
font-weight: 700 !important;
}
.queen:not(a) {
color: hotpink !important;
.queen:not(a):not(.ectoplasm) {
color: hotpink;
font-weight: 700 !important;
text-transform: lowercase !important;
}
@ -7085,7 +7085,7 @@ div.markdown {
}
.resizable.yt {
display: block;
width: min(100%, 500px);
width: min(100%, 500px);
}
.resizable > * {
height: 95% !important;
@ -7713,17 +7713,17 @@ body {
}
* {
word-break: break-word !important;
word-break: break-word !important;
overflow-wrap: break-word !important;
}
.table *, .playing-card_large {
word-break: keep-all !important;
word-break: keep-all !important;
}
.user-card-bio {
max-height: 50px;
overflow-y: auto;
overflow-y: auto;
}
.profile-pic, .profile-pic-20, .pp20, .profile-pic-25, .profile-pic-30, .profile-pic-35, .profile-pic-50, .profile-pic-65, .profile-pic-75, .profile-pic-100, img[src^="/pp/"], img[src^="/uid/"], img[src$="/pic"] {

View File

@ -181,7 +181,7 @@ blockquote a {
background-color: #d9d9d9 !important;
}
*:target {
background: rgba(var(--primary_rgb), 0.2) !important;
background: rgba(var(--primary_rgb), 0.2) !important;
}
/*userpage*/

View File

@ -14,5 +14,5 @@
}
.unread {
background-color: #3d3d3d !important;
background-color: #3d3d3d !important;
}

View File

@ -102,5 +102,5 @@ pre {
}
*:target {
background: rgba(var(--primary_rgb), 0.2) !important;
background: rgba(var(--primary_rgb), 0.2) !important;
}

View File

@ -80,7 +80,7 @@ blockquote {
background: #dddddd !important;
}
*:target {
background: rgba(var(--primary_rgb), 0.2) !important;
background: rgba(var(--primary_rgb), 0.2) !important;
}
.visited, h5.post-title a:visited, a[href^="https://"]:not([href^="https://rdrama.net" i], [href^="https://watchpeopledie.tv" i], .dropdown-item, .nav-link, .no-visited):visited {
@ -88,5 +88,5 @@ blockquote {
}
.award-name {
color: var(--black);
color: var(--black);
}

View File

@ -179,9 +179,9 @@ blockquote {
}
.award-name {
color: var(--black);
color: var(--black);
}
.modal-content {
background-color: var(--gray-500);
background-color: var(--gray-500);
}

View File

@ -1,6 +1,6 @@
const song = document.getElementById('DKD-song').value;
const song = document.getElementById('event-song').value;
const audio = new Audio(song);
audio.loop=true;
audio.loop = true;
audio.play();
document.addEventListener('click', () => {

View File

@ -9,14 +9,18 @@
background-clip: text;
color: transparent;
-webkit-background-clip: text;
animation: 45s linear 0s infinite candycorn-move;
animation: 45s linear 0s infinite candy-corn-move;
}
#post-title a {
color: transparent !important;
}
@keyframes candycorn-move {
#post-title:hover, #post-content p:hover {
animation-duration: 10s;
}
@keyframes candy-corn-move {
from {background-position: 0px;}
to {background-position: 1000px;}
}

View File

@ -51,7 +51,7 @@ body {
border-color: var(--primary) !important;
}
.btn {
.btn:not(.award-tab, .shop-tab) {
background: var(--primary) !important;
border-color: var(--primary) !important;
border-width: 2px;
@ -470,7 +470,6 @@ body {
}
/* asdf */
blockquote {
background-color: var(--gray-300);
}
@ -482,3 +481,10 @@ blockquote {
#profile--bio {
color: white !important;
}
/* Eyes */
.eye {
position: relative;
width: 26px;
height: 26px;
}

View File

Before

Width:  |  Height:  |  Size: 113 KiB

After

Width:  |  Height:  |  Size: 113 KiB

View File

@ -0,0 +1,26 @@
.poor {
position: fixed;
background-repeat: no-repeat;
width: 100%;
height: 100%;
pointer-events:none;
}
#fog-effect-poor {
background-image: url(/assets/events/homoween/images/poor/fog.webp);
background-size: cover;
z-index: 9998;
opacity:0.7;
}
#stab-effect-poor {
background-image: url(/assets/events/homoween/images/poor/blood.webp);
z-index: 9997;
}
#flashlight-effect-poor {
background-image: url(/assets/events/homoween/images/poor/flashlight.webp);
z-index: 9995;
background-size: cover;
background-position: center;
}

View File

@ -0,0 +1,231 @@
/* text */
#banner-homoween-title.life > tspan {
opacity: 1;
}
#banner-homoween-title {
text-shadow: 0 4px 10px #ff000060;
}
#banner-homoween-title.life > #banner-homoween-title {
animation: blinker 0.5s forwards;
}
@media (max-width: 767.98px) {
#banner-homoween-title {
transform: scale(1.4) translate(-90px, -120px);
animation:none !important;
}
#banner-homoween-presenting {
transform: scale(1.4) translate(-90px, -120px);
}
#banner-homoween-bats {
display:none;
}
}
@keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-6px);
}
100% {
transform: translateY(0px);
}
}
@keyframes blinker {
10% {
opacity: 0;
}
,
30% {
opacity: 0.4;
}
,
60% {
opacity: 0.2;
}
,
85% {
opacity: 0.5;
}
,
100% {
opacity: 0.9;
}
}
/*days*/
:root {
/*sky*/
--sky-gradient-day1: radial-gradient(at bottom, #d43a27 25%, #761ab3 100%);
--sky-gradient-day2: radial-gradient(at bottom, #bf055c 25%, #6b007d 70%);
--sky-gradient-day3: radial-gradient(at bottom, #bf0583 5%, #560272 60%);
--sky-gradient-day4: radial-gradient(at bottom, #930184 -15%, #490272 60%);
--sky-gradient-day5: radial-gradient(at bottom, #800073 -55%, #400179 60%);
--sky-gradient-day6: radial-gradient(at bottom, #69017a 25%, #390271 70%);
--sky-gradient-day7: radial-gradient(at bottom, #69017a 25%, #2d005b 70%);
--sky-gradient-day8: radial-gradient(at bottom, #af00a6 -20%, #270146 70%);
--sky-gradient-day9: radial-gradient(at bottom, #69047b -10%, #1e0037 70%);
--sky-gradient-day10: radial-gradient(at bottom, #59047b 10%, #150026 70%);
/*moon*/
--moon-fill-day1:gold;
--moon-fill-day2:gold;
--moon-fill-day3:goldenrod;
--moon-fill-day4:none;
--moon-fill-day5:none;
--moon-fill-day6:#e4e4e4;
--moon-fill-day7:#e4e4e4;
--moon-fill-day8:#e4e4e4;
--moon-fill-day9:#e4e4e4;
--moon-fill-day10:#e4e4e4;
--moon-shadow-day1:drop-shadow(0px 0px 20px yellow);
--moon-shadow-day2:drop-shadow(0px 0px 20px yellow);
--moon-shadow-day3:drop-shadow(0px 0px 20px gold);
--moon-shadow-day4:none;
--moon-shadow-day5:none;
--moon-shadow-day6:drop-shadow(0px 0px 5px #deddcf);
--moon-shadow-day7:drop-shadow(0px 0px 10px #deddcf);
--moon-shadow-day8:drop-shadow(0px 0px 10px #deddcf);
--moon-shadow-day9:drop-shadow(0px 0px 10px #deddcf);
--moon-shadow-day10:drop-shadow(0px 0px 10px #deddcf);
--moon-position-day1:303px;
--moon-position-day2:308px;
--moon-position-day3:320px;
--moon-position-day4:350px;
--moon-position-day5:350px;
--moon-position-day6:322px;
--moon-position-day7:312px;
--moon-position-day8:308px;
--moon-position-day9:303px;
--moon-position-day10:300px;
/*ground*/
--ground-shadow-day1:#5818bd;
--ground-shadow-day2:#5818bd;
--ground-shadow-day3:#5818bd;
--ground-shadow-day4:#5818bd;
--ground-shadow-day5:#5818bd;
--ground-shadow-day6:#5818bd;
--ground-shadow-day7:#4e16a6;
--ground-shadow-day8:#51009a;
--ground-shadow-day9:#4b028c;
--ground-shadow-day10:#41017b;
--house-shadow-day1:#5818bd;
--house-shadow-day2:#5818bd;
--house-shadow-day3:#5818bd;
--house-shadow-day4:#5818bd;
--house-shadow-day5:#5818bd;
--house-shadow-day6:#5818bd;
--house-shadow-day7:#5818bd;
--house-shadow-day8:#4a149f;
--house-shadow-day9:#431290;
--house-shadow-day10:#3a1476;
--object-fill-day1:#240441;
--object-fill-day2:#240441;
--object-fill-day3:#240441;
--object-fill-day4:#240441;
--object-fill-day5:#240441;
--object-fill-day6:#240441;
--object-fill-day7:#240441;
--object-fill-day8:#1e0538;
--object-fill-day9:#18042c;
--object-fill-day10:#18042c;
--star-opacity-day1: 0;
--star-opacity-day2: 0;
--star-opacity-day3: 0;
--star-opacity-day4: 0.2;
--star-opacity-day5: 0.3;
--star-opacity-day6: 0.4;
--star-opacity-day7: 0.5;
--star-opacity-day8: 0.5;
--star-opacity-day9: 0.6;
--star-opacity-day10: 0.7;
}
/* stars */
.star {
animation: linear infinite alternate twinkle;
}
.star1 {
animation-duration: 3s;
}
.star2 {
animation-duration: 4s;
}
.star3 {
animation-duration: 3.5s;
}
.star4 {
animation-duration: 2s;
}
.star5 {
animation-duration: 4s;
}
.star1 circle {
r: 0.5px;
}
.star2 circle {
r: 0.75px;
}
.star3 circle {
r: 1.0px;
}
.star4 circle {
r: 1.2px;
}
.star5 circle {
r: 1.5px;
}
@media (max-width: 767.98px) {
.star {
animation: none;
fill-opacity: 0.5;
}
.star1 circle {
r: 1px;
}
.star2 circle {
r: 1.5px;
}
.star3 circle {
r: 2px;
}
.star4 circle {
r: 2px;
}
.star5 circle {
r: 2.5px;
}
}
@keyframes twinkle {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#banner-homoween-title {
animation: float infinite 8s ease-in-out;
}
#banner-homoween-title > tspan {
opacity: 0;
}

View File

@ -0,0 +1,4 @@
#banner-homoween-title {
text-shadow: 0 0 40px #3AE63A;
fill: #90ee90;
}

View File

@ -0,0 +1,40 @@
#flashlight-effect {
--Xpos: 50vw;
--Ypos: 50vh;
position: fixed;
width:100%;
height:100%;
z-index:1061;
pointer-events:none;
opacity:0.8;
/*looks better but is too expensive to justify :(*/
backdrop-filter: brightness(1.5);
background-color: rgba(256,256,256,0.06);
}
#flashlight-effect:before {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
pointer-events: none;
background: radial-gradient(
circle 30vmax at var(--Xpos) var(--Ypos),
rgba(0,0,0,0) 0%,
rgba(0,0,0,.5) 70%,
rgba(0,0,0,.93) 100%
);
z-index: 1061;
}
@media (max-width: 767.98px) {
#flashlight-effect::before {
background: radial-gradient(
circle 20em at 50% var(--Ypos),
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) 80%,
rgba(0,0,0,.93) 100%
);
opacity:0.9;
pointer-events: none;
}
}

View File

@ -0,0 +1,21 @@
#haunted-effect {
position: fixed;
width:100%;
height:100%;
pointer-events:none;
}
#haunt-bg {
position: fixed;
background-repeat: no-repeat;
width: 100%;
height: 100%;
pointer-events:none;
background-color: var(--background);
z-index:0;
}
#banner-homoween-title {
opacity: 0;
}
#banner-homoween-text-evil {
opacity: 1 !important;
}

View File

@ -0,0 +1,3 @@
img {
filter: invert(1);
}

View File

@ -0,0 +1,879 @@
@charset "UTF-8";
/* Fonts */
@font-face {
font-family: 'Creepster';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/events/homoween/fonts/Creepster.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "DoubleFeature";
src: url("/assets/events/homoween/fonts/DoubleFeature.woff") format("woff");
}
@font-face {
font-family: "Jo_wrote_a_lovesong";
src: url("/assets/events/homoween/fonts/Jo_wrote_a_lovesong.woff") format("woff");
}
@font-face {
font-family: "XTypewriter-Regular";
src: url("/assets/events/homoween/fonts/XTypewriter-Regular.woff") format("woff");
}
@font-face {
font-family: "SpecialElite-Regular";
src: url("/assets/events/homoween/fonts/SpecialElite-Regular.woff") format("woff");
}
/* Homoween Theming */
:root {
--primary: #F66A3C;
--dark: #140224;
--secondary: #820263;
--white: #E1E1E1;
--black: #CFCFCF;
--light: #170535;
--muted: #E1E1E1;
--gray: #383838;
--gray-100: #E1E1E1;
--gray-200: #E1E1E1;
--gray-300: #291720;
--gray-400: #303030;
--gray-500: var(--dark);
--gray-600: var(--dark);
--gray-700: var(--dark);
--gray-800: var(--dark);
--gray-900: var(--dark);
--background: var(--dark);
}
body {
overflow-x: hidden;
}
#header--icon {
height: 33px;
width: 33px;
object-fit: contain;
}
* {
border-color: var(--primary);
}
a:hover.user-name {
cursor: url('/assets/events/homoween/images/machete.webp'), auto !important;
}
.border {
border-color: var(--primary) !important;
}
.form-control {
background: transparent;
border-color: var(--primary) !important;
}
.btn {
background: transparent;
border-color: var(--primary) !important;
border-width: 2px;
}
.form-control:disabled, .form-control[readonly] {
background: transparent;
border-color: var(--primary) !important;
}
.btn-success {
border-color: #38A169 !important;
}
.btn-danger {
border-color: #E53E3E !important;
}
#frontpage .pseudo-submit-form.card .card-body .form-control {
border-color: transparent !important;
}
.btn-lg {
border-color: transparent !important;
}
pre {
color: #CFCFCF;
}
.transparent {
background: None !important;
}
#frontpage .post-title a:visited {
color: #7a7a7a !important;
}
.post-title a, h1.post-title {
font-family: 'SpecialElite-Regular';
font-size: 1.25rem;
}
.arrow-up::before, .arrow-down::before {
content: '\f720';
width: 20px;
}
.arrow-down::before {
display: inline-block;
transform: rotate(180deg);
}
#thread .arrow-up::before, #thread .arrow-down::before {
content: '\f720';
width: 17px;
}
/* Cob Webs */
body::before {
content: '';
position: fixed;
background-image: url('/assets/events/homoween/images/cobweb-bl.webp');
background-size: contain;
background-repeat: no-repeat;
left: -1.5rem;
bottom: -1.5rem;
width: 170px;
height: 230px;
z-index: 10001;
pointer-events: none;
transform: rotate(180deg);
opacity: .5;
}
body::after {
content: '';
position: fixed;
background-image: url('/assets/events/homoween/images/cobweb-tr.webp');
background-size: contain;
background-repeat: no-repeat;
right: -1.5rem;
top: -1.5rem;
width: 160px;
height: 160px;
z-index: 10001;
pointer-events: none;
opacity: .45;
}
/* Blood Effect */
.blood::before {
content: '';
position: absolute;
background-image: url('/assets/events/homoween/images/blood-anim.webp');
width: 100%;
height: 55px;
background-repeat: repeat-x;
top: 0;
left: 0;
}
.blood {
position: relative;
}
.blood .comment-text {
color: #dc3545 !important;
font-family: 'DoubleFeature';
}
.sketch {
z-index: 10000;
position: fixed;
top: 0;
left: 0;
pointer-events: none;
}
/* Haunted Effect */
.haunt > div:not(.modal) {
animation: haunted 10s infinite;
}
@keyframes haunted {
0% {
backdrop-filter: brightness(20%);
}
1% {
backdrop-filter: brightness(20%);
}
2% {
backdrop-filter: sepia(0.8) contrast(1.5) brightness(200%);
}
3% {
backdrop-filter: sepia(0.8) contrast(1.5) brightness(20%);
}
4% {
backdrop-filter: brightness(300%);
}
7% {
backdrop-filter: brightness(1);
}
100% {
backdrop-filter: brightness(1);
}
}
@keyframes haunted-upsidedown {
0% {
backdrop-filter: brightness(20%) sepia(1) saturate(3) hue-rotate(180deg);
}
1% {
backdrop-filter: brightness(20%) sepia(1) saturate(3) hue-rotate(180deg);
}
2% {
backdrop-filter: sepia(1) contrast(1.5) brightness(200%) saturate(3) hue-rotate(180deg);
}
3% {
backdrop-filter: sepia(1) contrast(1.5) brightness(20%) saturate(3) hue-rotate(180deg);
}
4% {
backdrop-filter: brightness(300%) sepia(1) saturate(3) hue-rotate(180deg);
}
7% {
backdrop-filter: brightness(1) sepia(1) saturate(3) hue-rotate(180deg);
}
100% {
backdrop-filter: brightness(1) sepia(1) saturate(3) hue-rotate(180deg);
}
}
/* Spiders */
.spider:nth-child(odd) {
animation-name: swingFast;
}
.spider:nth-child(2) {
animation-delay: 250ms;
animation-duration: 2100ms;
left: 20%;
}
.spider:nth-child(3) {
animation-delay: 300ms;
animation-duration: 1600ms;
left: 30%;
}
.spider:nth-child(4) {
animation-delay: 400ms;
animation-duration: 1800ms;
left: 40%;
}
.spider:nth-child(5) {
animation-delay: 240ms;
animation-duration: 1900ms;
left: 50%;
}
.spider:nth-child(6) {
animation-delay: 250ms;
animation-duration: 2300ms;
left: 60%;
}
.spider:nth-child(7) {
animation-delay: 400ms;
animation-duration: 2100ms;
left: 70%;
}
.spider:nth-child(8) {
animation-delay: 4000ms;
animation-duration: 200ms;
left: 80%;
}
.spider {
z-index: 10;
position: fixed;
display: inline-block;
top: 0;
left: 10%;
animation: swing 2s infinite;
transform-origin: top;
transition: 0.8s ease-in-out;
pointer-events: none;
}
.spider:hover .body {
transform: rotate(20deg);
transition: 0.4s ease-in-out;
}
.spider:nth-child(odd):hover .body {
transform: rotate(-10deg);
transition: 0.2s ease-in-out;
}
.spider .spiderweb {
width: 2px;
height: 200px;
margin-left: 49px;
background: rgba(255, 255, 255, 0.7);
}
.spider .body {
width: 100px;
height: 80px;
background: #222;
position: relative;
border-radius: 50%;
}
.spider .body .eye {
width: 28px;
height: 28px;
position: absolute;
bottom: 24px;
background: #fff;
border-radius: 50%;
}
.spider .body .eye.left {
left: 20px;
}
.spider .body .eye.right {
right: 20px;
}
.spider .body .eye:after {
background: #222;
width: 7px;
height: 7px;
content: "";
display: block;
margin: 55%;
border-radius: 50%;
animation: look 4s infinite;
}
.spider:nth-child(8) .body .eye {
background-color: #FF0000;
background: radial-gradient(#FF9B9B, #FF0000);
}
.spider:nth-child(odd) .body .eye:after {
animation-delay: 1400ms;
animation-duration: 3600ms;
}
.spider .legs .leg {
width: 80px;
height: 40px;
margin-top: -20px;
border: 5px solid transparent;
border-top-color: #333;
border-radius: 40px 40px 0 0;
}
.spider .legs {
position: absolute;
bottom: -10%;
z-index: -1;
}
.spider .legs.left {
left: -70%;
}
.spider .legs.right {
right: -60%;
}
.legs.left .leg:nth-child(1) {
transform: rotate(10deg);
margin-left: 10px;
}
.legs.right .leg:nth-child(1) {
transform: rotate(-10deg);
margin-left: -10px;
}
.legs.left .leg:nth-child(2) {
transform: rotate(-20deg);
margin-left: 20px;
}
.legs.right .leg:nth-child(2) {
transform: rotate(20deg);
margin-left: -20px;
}
.legs.left .leg:nth-child(3) {
transform: rotate(-50deg);
margin-left: 30px;
}
.legs.right .leg:nth-child(3) {
transform: rotate(50deg);
margin-left: -30px;
}
@keyframes look {
0%,
40%,
100% {
transform: translateX(0);
}
45%,
95% {
transform: translateX(-100%);
}
}
@keyframes swing {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-24px);
}
}
@keyframes swingFast {
0%,
100% {
transform: translateY(0);
}
55% {
transform: translateY(-36px);
}
}
/* Fog effect */
.fog-effect {
opacity: 0.35;
}
#fog-effect {
pointer-events: none;
position:fixed;
bottom:0;
left: 0;
width:100%;
height: 100%;
z-index: 1031;
}
/* Eyes */
.eye {
position: relative;
width: 26px;
height: 26px;
}
/* Candy Corn */
.candy-corn {
--color3: #FBED21;
--color2: #F66A3C;
--color1: #FDFBDA;
font-family: "Open Sans", sans-serif !important;
background: repeating-linear-gradient(
45deg,
var(--color1),
var(--color1) 10px,
var(--color2) 20px,
var(--color2) 20px,
var(--color3) 60px,
var(--color3) 60px
);
background-clip: text;
color: transparent !important;
-webkit-background-clip: text;
animation: 32s linear 0s infinite candy-corn-move;
}
.candy-corn:not(a) > p {
color: transparent !important;
}
#post-title > a.candy-corn {
color: transparent;
}
.candy-corn:hover {
animation-duration: 10s;
}
@keyframes candy-corn-move {
from {
background-position: 0px;
}
to {
background-position: 1000px;
}
}
/* Ectoplasm */
.ectoplasm {
text-shadow: 0 0 20px #3AE63A;
}
.ectoplasm .comment-text > p, .ectoplasm .post-body, h1.ectoplasm {
font-family: 'Creepster';
color: #90ee90;
letter-spacing: 0.15em;
}
.ectoplasm .candy-corn {
--color3: rgb(140, 255, 0);
--color2: rgb(0, 111, 0);
--color1: rgb(131, 255, 131);
text-shadow: none;
}
.ectoplasm.blood .comment-text > p {
font-family: 'DoubleFeature';
letter-spacing: initial;
}
.ectoplasm .rainbow-text > p {
color: #90ee90 !important;
font-weight: initial;
}
.ectoplasm .comment-text, .ectoplasm .post-body, h1.ectoplasm {
overflow:visible !important;
}
/* Upsidedown */
#canvas {
position:absolute;
pointer-events:none;
}
/* Bones */
#animate{
margin-left:45%;
margin-top:-5%;
position: fixed;
z-index:999;
pointer-events: none;
opacity:0.9;
}
/* Pumpkin */
.fall-pumpkin {
color: #fff;
font-size: 1em;
font-family: Serif;
text-shadow: 0 0 1px #000;
pointer-events: none;
}
@-webkit-keyframes fall-pumpkins-fall {
0% {
top: -20%
}
100% {
top: 100%
}
}
@-webkit-keyframes fall-pumpkins-shake {
0% {
-webkit-transform: translateX(0px);
transform: translateX(0px)
}
50% {
-webkit-transform: translateX(80px);
transform: translateX(80px)
}
100% {
-webkit-transform: translateX(0px) rotate(360deg);
transform: translateX(0px) rotate(360deg);
}
}
@keyframes fall-pumpkins-fall {
0% {
top: -20%
}
100% {
top: 100%
}
}
@keyframes fall-pumpkins-shake {
0% {
transform: translateX(0px)
}
50% {
transform: translateX(80px)
}
100% {
transform: translateX(0px) rotate(360deg);
}
}
.fall-pumpkin {
position: fixed;
top: -20%;
z-index: 999;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
-webkit-animation-name: fall-pumpkins-fall, fall-pumpkins-shake;
-webkit-animation-duration: 10s, 4s;
-webkit-animation-timing-function: linear, ease-in-out;
-webkit-animation-iteration-count: infinite, infinite;
-webkit-animation-play-state: running, running;
animation-name: fall-pumpkins-fall, fall-pumpkins-shake;
animation-duration: 10s, 4s;
animation-timing-function: linear, ease-in-out;
animation-iteration-count: infinite, infinite;
animation-play-state: running, running
}
.fall-pumpkin:nth-of-type(0) {
left: 1%;
-webkit-animation-delay: 0s, 0s;
animation-delay: 0s, 0s
}
.fall-pumpkin:nth-of-type(1) {
left: 10%;
-webkit-animation-delay: 1s, 1s;
animation-delay: 1s, 1s
}
.fall-pumpkin:nth-of-type(2) {
left: 20%;
-webkit-animation-delay: 6s, .5s;
animation-delay: 6s, .5s
}
.fall-pumpkin:nth-of-type(3) {
left: 30%;
-webkit-animation-delay: 4s, 2s;
animation-delay: 4s, 2s
}
.fall-pumpkin:nth-of-type(4) {
left: 40%;
-webkit-animation-delay: 2s, 2s;
animation-delay: 2s, 2s
}
.fall-pumpkin:nth-of-type(5) {
left: 50%;
-webkit-animation-delay: 8s, 3s;
animation-delay: 8s, 3s
}
.fall-pumpkin:nth-of-type(6) {
left: 60%;
-webkit-animation-delay: 6s, 2s;
animation-delay: 6s, 2s
}
.fall-pumpkin:nth-of-type(7) {
left: 70%;
-webkit-animation-delay: 2.5s, 1s;
animation-delay: 2.5s, 1s
}
.fall-pumpkin:nth-of-type(8) {
left: 80%;
-webkit-animation-delay: 1s, 0s;
animation-delay: 1s, 0s
}
.fall-pumpkin:nth-of-type(9) {
left: 90%;
-webkit-animation-delay: 3s, 1.5s;
animation delay: 3s, 1.5s
}
.fall-pumpkin:nth-of-type(10) {
left: 100%;
-webkit-animation-delay: 3s, 2s;
animation-delay: 3s, 2s
}
.fall-pumpkin:nth-of-type(11) {
left: 5%;
-webkit-animation-delay: 1s, 4s;
animation-delay: 1s, 4s
}
.fall-pumpkin:nth-of-type(12) {
left: 15%;
-webkit-animation-delay: 1s, 1.5s;
animation-delay: 1s, 1.5s
}
.fall-pumpkin:nth-of-type(13) {
left: 25%;
-webkit-animation-delay: 6s, 2.5s;
animation-delay: 6s, 2.5s
}
.fall-pumpkin:nth-of-type(14) {
left: 35%;
-webkit-animation-delay: 4s, 1s;
animation-delay: 4s, 1s
}
.fall-pumpkin:nth-of-type(15) {
left: 45%;
-webkit-animation-delay: 2s, 4s;
animation-delay: 2s, 4s
}
.fall-pumpkin:nth-of-type(16) {
left: 55%;
-webkit-animation-delay: 8s, 3s;
animation-delay: 8s, 3s
}
.fall-pumpkin:nth-of-type(17) {
left: 65%;
-webkit-animation-delay: 6s, 3s;
animation-delay: 6s, 3s
}
.fall-pumpkin:nth-of-type(18) {
left: 75%;
-webkit-animation-delay: 2.5s, 4s;
animation-delay: 2.5s, 4s
}
.fall-pumpkin:nth-of-type(19) {
left: 85%;
-webkit-animation-delay: 2s, 0s;
animation-delay: 2s, 0s
}
.fall-pumpkin:nth-of-type(20) {
left: 95%;
-webkit-animation-delay: 3s, 1.5s;
animation delay: 3s, 1.5s
}
.animate-spin {
animation: spin 5600ms linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* Trick or Treat */
#trick-or-treat {
font-family: Jo_wrote_a_lovesong;
font-size: 2rem;
letter-spacing: 0.5rem;
border-color: var(--primary) !important;
}
#trick-or-treat::before {
content:"";
background-image:url('/e/marseyface.webp'); ;
background-size: cover;
height:28px;
width:32px;
display:inline-block;
}
#trick-or-treat::after {
content:"";
background-image:url('/e/marseytrickortreat.webp'); ;
background-size: cover;
height:28px;
width:32px;
display:inline-block;
}
#jump-scare-img {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: 9999;
object-fit: cover;
pointer-events: none;
}
/* progressbar */
.progress {
background-color: #1d9bf0;
background-image: linear-gradient(0deg, #1d9bf0 0%, #59b1ec 100%);
width: 270px;
height: 24px;
border-radius: 4px;
box-shadow: inset 0px 12px 2px #ffffff10;
backdrop-filter: blur(2px) brightness(101%);
margin-bottom: 40px;
}
.progress::before {
content: "\f48e";
font-family: "Font Awesome 6 Pro";
position: absolute;
left: 6px;
top: 2px;
font-size: 13px;
color: #fff;
}
.progress::after {
content: "\f780";
font-family: "Font Awesome 6 Pro";
position: absolute;
right: 6px;
top: 2px;
font-size: 13px;
color: #fff;
}
.progress > .legend {
display: flex;
justify-content: space-between;
margin-top: 6px;
padding: 0 6px;
color: #dc3545;
font-family: -apple-system,BlinkMacSystemFont,segoe ui,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol;
font-size: 12px;
font-weight: bold;
}
.progress > .legend span:nth-child(1) {
color: #d3bc00;
}
.bar-left {
display: inline-block;
width: var(--width);
height: 24px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
background-color: #d3bc00;
background-image: linear-gradient(180deg, #d3bc00 50%, #877800 100%);
box-shadow: inset 0px 12px 2px #ffffff20;
color: white;
text-align: center;
}
.bar-right {
display: inline-block;
width: var(--width);
height: 24px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
background-color: #dc3545;
background-image: linear-gradient(180deg, #dc3545 50%, #9e1b32 100%);
box-shadow: inset 2px 12px 0px #ffffff20;
color: white;
text-align: center;
position: absolute;
right: 0;
}

View File

@ -0,0 +1,3 @@
canvas.sketch {
opacity: calc(0.1*{{ stab }});
}

View File

@ -0,0 +1,56 @@
/* <body> tag 'background-color' is boilerplate here. We only care about the box-shadow and filter effects. We can add a woods background-image for added effect. */
body {
background-size: cover;
background-attachment: fixed;
background-color: #000;
filter: sepia(100%) hue-rotate(180deg) saturate(300%);
box-shadow: 0 0 900px rgba(0, 0, 0, 0.9) inset;
overflow-x: hidden;
}
canvas.particles {
pointer-events: none;
position: fixed;
left: 0;
top: 0;
z-index: 1;
filter: blur(1.5px);
animation: flicker 4s infinite;
}
@keyframes flicker {
0% {
filter: brightness(30%);
}
48% {
filter: brightness(30%);
}
50% {
filter: contrast(1.5) brightness(40%);
}
60% {
filter: contrast(1.5) brightness(40%);
}
62% {
filter: brightness(30%);
}
78% {