Blurify playgroud by AsmanovLev

/* ==UserStyle==
@name         Blurify playgroud
@version      20240218.20.40
@namespace    userstyles.world/user/AsmanovLev
@description  Just makes game a little bit blurrier to get rid of the pixelation and adds a little of sepia to make game a little less colorful
@author       AsmanovLev
@license      GPL v3
==/UserStyle== */

@-moz-document url-prefix("https://pony.town/") {
:root {
    /*Настройки для поля с игроками*/
    --blur-strength: 2px; /*сила размазывания, больше px сильнее эффект*/
    --sepia-strength: 0.9; /*сила сепии, что-то вроде обесцвета только с эффектом устареания*/
    
    /*Настройки для панели*/
    --min-opacity: 25%; /*минимальная прозрачность для панели*/
    --max-opacity: 90%; /*максимальная прозрачность для панели*/
    --anim-duration: 0.5s; /*время анимации переходов для панели*/
}

#canvas {
    -webkit-filter: blur(var(--blur-strength));
    -moz-filter: blur(var(--blur-strength));
    -o-filter: blur(var(--blur-strength));
    -ms-filter: blur(var(--blur-strength));
    filter: url(#blur);
    filter: sepia(var(--sepia-strength)) blur(var(--blur-strength));
}
.action-bar {
    opacity: var(--min-opacity);

    animation-duration: var(--anim-duration);
    animation-name: fadeout;
    animation-iteration-count: inherit;
    animation-direction: inherit;
}
.action-bar:hover {
    opacity: var(--max-opacity);

    animation-duration: var(--anim-duration);
    animation-name: fadein;
    animation-iteration-count: inherit;
    animation-direction: inherit;
}

@keyframes fadein {
    from {
        opacity: var(--min-opacity);
    }
    to {
        opacity: var(--max-opacity);
    }
}

@keyframes fadeout {
    from {
        opacity: var(--max-opacity);
    }
    to {
        opacity: var(--min-opacity);
    }
}
}