FT(HUD CW&FW, Visual improvements) by stalker666

/* ==UserStyle==
@name           FT(HUD CW&FW, Visual improvements)
@namespace      https://userstyles.world/style/13968/fthud-cwfw-visual-improvements
@version        1.0.0
@description    Визуальные улучшания интерфейса для CW и FW
@author         stalker666
@preprocessor stylus

Делает цвета рамок героинь в Army Setup более различимыми(зеленая рамка - свободная героиня для выбора, синяя рамка - героиня выбрана, красная рамка - героиня недостуна). Работает в CW и FW.
@var checkbox   colorHighlighting 'Better color highlighting in Army Setup' 1

Рамка вокруг ячейки и более явное цветовыделение выбранной ячейки на карте в CW и FW
@var select   selecterBetterMap 'Improved map' {
 "None": "betterMap = 0; cellsAnimations = 0",
 "Better map with static cell border": "betterMap = 1; cellsAnimations = 0",
 "Better map with animated cell border*": "betterMap = 1; cellsAnimations = 1"
}

Свечение под иконкой собственной атаки/защиты для большего контраста.
@var select   selecterGlowingIcon 'Glowing attack/defend icon' {
 "None": "glowingIcons = 0; animatedIcons = 0",
 "Static icons": "glowingIcons = 1; animatedIcons = 0",
 "Animated icons*": "glowingIcons = 1; animatedIcons = 1"
}


Слегка улучшенные кнопки открытия CW чата и кнопки обновления карты
@var checkbox   improvedButtons 'Improvers for Chat button and Map Refresh button' 1

==/UserStyle== */
@-moz-document domain("faptitans.com") {
/*MAIN*/
    @keyframes change-size-icon {
        50% {
            transform: scale(125%)
            filter: drop-shadow(0 0 20px #ffff64e6);
        }
    }
    
    @keyframes glowing-icon {
        50% {
            filter: drop-shadow(0 0 20px #ffff64e6);
        }
    }
    
    .fw-warpop-box-all {
        right: 50px !important;
    }

    .fw-warpop-box-all.left {
        left: 50px !important;
    }

    .fw-icon-sword.your {
        width: 120px !important;
        height: 120px !important;
        left: 50% !important;
        top: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transform: translate(-50%, -50%) !important;
    }
}

@-moz-document domain("faptitans.com") {
/*Делает цвета рамок героинь в Army Setup более различимыми(зеленая рамка - свободная героиня для выбора, синяя рамка - героиня выбрана, красная рамка - героиня недостуна). Работает в CW и FW.*/
    if colorHighlighting==1 {
        .fw-as-girl-box-scroll .hero-avatar-box {
            color: #044f00 !important;
            background: linear-gradient(180deg, #0d6206 0% 5%, #208413 20%, #a0b71d 50%, #71b31b 70%, #318016 90% 100%) !important;
        }

        .fw-as-girl-box-scroll .hero-avatar-box .fw-as-num {
            color: #fff894 !important;
            text-shadow: 1px 1px 1px #000, -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000 !important;
            background: linear-gradient(180deg, #00ad06cc 50%, #008005cc 60%, #007504cc 75%) !important;
        }

        .fw-as-girl-box-scroll .hero-avatar-box.locked {
            color: #690000 !important;
            background: linear-gradient(180deg, #a00, #ff4800 50%, #e84d00 70%, #c80000 85%, #b7001e) !important;
        }

        .fw-as-girl-box-scroll .hero-avatar-box.locked .fw-as-num {
            color: #fff !important;
            background: #b7001e !important;
        }

        .fw-as-girl-box-scroll .hero-avatar-box.select {
            color: #00658b;
            background: linear-gradient(180deg, #00f7ff 10%, #16cdff 40%, #13b4ff 60%, #00eaff 85%, #0fffd7) !important;
            box-shadow: 0 0 0px 1px #0fffd7, 0 0 4px 1px #00f7ff, 0 0 4px 2px #16cdff, 0 0 4px 3px #13b4ff !important;
        }

        .fw-as-girl-box-scroll .hero-avatar-box.select .hero-avatar {
            filter: opacity(60%);
        }

        .fw-as-girl-box-scroll .hero-avatar-box.select .fw-as-num {
            color: #000 !important;
            text-shadow: 1px 1px 1px #fff, -1px -1px 1px #fff, 1px -1px 1px #fff, -1px 1px 1px #fff !important;
            background: linear-gradient(180deg, #00afafcc 50%, #00cfcf99 60%, #0fd9 75%) !important;
        }
    }
}

@-moz-document domain("faptitans.com") {
/*Рамка вокруг ячейки и более явное цветовыделение выбранной ячейки на карте в CW и FW.*/
    if betterMap==1 {
        .fw-map-claim-box::after {
            content: "" !important;
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
            box-shadow: 0px 0px 100px 1px #3efffc, 0px 0px 10px 10px #3efffc, inset 0px 0px 2px 1px #00fffb, inset 0px 0px 15px 10px #3efffc, inset 0px 0px 20px 1px #3efffc !important;
            opacity: 0 !important;
            pointer-events: none !important;
            z-index: 1 !important;
        }

        .fw-map-claim-box:hover::after {
            opacity: 1 !important;
        }

        .fw-map-claim-box.selected {
            box-shadow: 0 0 2px 1px #00fffb, inset 0px 0px 2px 1px #00fffb, 0 0 4px 2px #37e6c6, inset 0px 0px 4px 4px #37e6c6, 0 0 8px 4px #00382f, inset 0px 0px 10px 4px #00382f !important;
            z-index: 2 !important;
        }
    }
}

@-moz-document domain("faptitans.com") {
/*Анимированная рамка выделенной клетки на карте*/
    if cellsAnimations==1 {
        .fw-map-claim-box::after {
            transition: opacity 0.3s ease-in-out !important;
        }

        .fw-map-claim-box.selected {
            transition: 1s !important;
        }
    }
}

@-moz-document domain("faptitans.com") {
/*Статичная рамка выделенной клетки на карте*/
    if cellsAnimations==0 {
        .fw-map-claim-box::after {
            transition: 0s !important;
        }

        .fw-map-claim-box.selected {
            transition: 0s !important;
        }
    }
}

@-moz-document domain("faptitans.com") {
/*Cвечение под иконкой собственной атаки/защиты для большего контраста.*/
    if glowingIcons==1 {
        body .main .fw-map-claim-box-all .fw-map-claim-box .fw-icon-ws {
            background: radial-gradient(rgba(0, 255, 21, .9)15%, rgba(0, 255, 16, .8), rgba(0, 255, 28, .75), rgba(78, 255, 119, .5)60%, rgba(0, 255, 53, 0)75%);
        }

        body .main .fw-map-claim-box-all .fw-map-claim-box .fw-icon-sword {
            background: radial-gradient(rgba(255, 0, 0, .95)15%, rgba(255, 0, 0, .9), rgba(255, 25, 25, .75), rgba(255, 41, 41, .25)60%, rgba(255, 0, 0, 0)70%);
        }

        .fw-icon-fr.cw {
            opacity: 80%
        }
        
        body .main .fw-map-claim-box-all .fw-map-claim-box .fw-icon-sword.your {
            background: radial-gradient(rgba(255, 255, 100, .8)15%, rgba(255, 255, 175, .75), rgba(255, 255, 200, .6), rgba(255, 255, 225, .4)50%, rgba(255, 255, 255, .0)70%);
            filter: none;
        }
    }
}

@-moz-document domain("faptitans.com") {
/*Анимированное свечение иконки своей атаки/защиты*/
    if animatedIcons==1 {
        body .main .fw-map-claim-box-all .fw-map-claim-box .fw-icon-sword.your {
            animation-name: glowing-icon;
            animation-duration: 1.0s;
            animation-timing-function: ease-in-out;
            animation-iteration-count: infinite;
            animation-delay: 0.5s;
        }
    }
    
    if animatedIcons==0 {
        body .main .fw-map-claim-box-all .fw-map-claim-box .fw-icon-sword.your {
            filter: drop-shadow(0 0 20px #ffff64e6);
        }
    }
}

@-moz-document domain("faptitans.com") {
/*Статичное свечение иконки своей атаки/защиты*/
    if cellsAnimations==0 {
    }
}

@-moz-document domain("faptitans.com") {
/*Слегка улучшенные кнопки открытия CW чата и кнопки обновления карты*/
    if improvedButtons==1 {
        .popup-layer .m-popup.guildboss1 .cw-guildboss-box-left .color-btn.update {
            top: auto !important;
            height: 35px !important;
        }

        .main .color-btn.green.update {
            top: 110px !important;
            height: 518px !important;
        }

        .color-btn.green.chat {
            top: 60px !important;
        }
    }

    body .main .fw-map-claim-box-all .fw-map-claim-box .fw-icon-sword.your img {
        transform: scale(100%)
        animation-name: change-size-icon;
        animation-duration: 1.0s;
        animation-timing-function: ease-in-out;
        animation-delay: 0.5s;
    }
    
    .popup-layer .m-popup.army-setup .fw-as-filter-box-all .fw-as-filter-select-all .color-btn {
        width: 170px;
        height: 32px;
        border-radius: 10px;
    }

    .popup-layer .m-popup.army-setup .attack.cw,
    .popup-layer .m-popup.army-setup .defend.cw {
        height: 90px;
    }
}