Анимация гирлянд по углам форума (Модификация)

[AirDeveloper]

И так приступим ))

Шаблоны - PAGE_CONTAINER и добавляем код в самом внизу:

<xf:page option="bodyAttributes" />

Далее сразу добавляем этот код после коды выше:

<div class="christmas-lights">
    <div class="lights-corner top-left"></div>
    <div class="lights-corner top-right"></div>
    <div class="lights-corner bottom-left"></div>
    <div class="lights-corner bottom-right"></div>
</div>

Далее переходим в шаблоны - Extra Less

.christmas-lights {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10000;
}

.lights-corner {
    position: absolute;
    width: 150px;
    height: 150px;
    
    &::before {
        content: '';
        position: absolute;
        width: 100px;
        height: 100px;
        border: 2px solid transparent;
        border-radius: 10px;
        background-image:
            radial-gradient(circle at 10px 10px, #ff4444 3px, transparent 3px),
            radial-gradient(circle at 30px 20px, #44ff44 3px, transparent 3px),
            radial-gradient(circle at 50px 15px, #4444ff 3px, transparent 3px),
            radial-gradient(circle at 70px 25px, #ffff44 3px, transparent 3px),
            radial-gradient(circle at 90px 10px, #ff44ff 3px, transparent 3px);
        background-size: 100px 100px;
        animation: lightsTwinkle 3s infinite alternate;
    }
}

.top-left {
    top: 0;
    left: 0;
    
    &::before {
        border-top: 2px solid #ff4444;
        border-left: 2px solid #ff4444;
        top: 10px;
        left: 10px;
    }
}

.top-right {
    top: 0;
    right: 0;
    
    &::before {
        border-top: 2px solid #44ff44;
        border-right: 2px solid #44ff44;
        top: 10px;
        right: 10px;
        transform: rotate(90deg);
    }
}

.bottom-left {
    bottom: 0;
    left: 0;
    
    &::before {
        border-bottom: 2px solid #4444ff;
        border-left: 2px solid #4444ff;
        bottom: 10px;
        left: 10px;
        transform: rotate(-90deg);
    }
}

.bottom-right {
    bottom: 0;
    right: 0;
    
    &::before {
        border-bottom: 2px solid #ffff44;
        border-right: 2px solid #ffff44;
        bottom: 10px;
        right: 10px;
        transform: rotate(180deg);
    }
}

@keyframes lightsTwinkle {
    0%, 100% {
        opacity: 0.7;
        filter: brightness(1);
    }
    50% {
        opacity: 1;
        filter: brightness(1.5);
    }
}