RPG-RougeLiteBattler/Assets/UI/CombatEventPopup.uxml

<engine:UXML xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:engine="UnityEngine.UIElements" xmlns:editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
    <engine:VisualElement name="combat-event-popup" class="combat-popup-container" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; justify-content: center; align-items: center; display: none;">
        <engine:VisualElement name="background-overlay" class="combat-popup-overlay" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.7);" />
        <engine:VisualElement name="popup-panel" class="combat-popup-panel" style="background-color: rgba(38, 38, 51, 0.95); border-left-color: rgb(204, 51, 51); border-right-color: rgb(204, 51, 51); border-top-color: rgb(204, 51, 51); border-bottom-color: rgb(204, 51, 51); border-left-width: 3px; border-right-width: 3px; border-top-width: 3px; border-bottom-width: 3px; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; min-width: 400px; max-width: 600px; padding-top: 20px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px;">
            <engine:Label name="event-title" text="*** COMBAT ENCOUNTER! ***" class="combat-title" style="font-size: 24px; color: rgb(255, 77, 77); -unity-font-style: bold; -unity-text-align: middle-center; margin-bottom: 15px;" />
            <engine:Label name="event-description" text="Your party encounters hostile enemies!" class="combat-description" style="font-size: 16px; color: rgb(255, 255, 255); -unity-text-align: middle-center; white-space: normal; margin-bottom: 20px;" />
            <engine:VisualElement name="enemy-section" class="enemy-section" style="margin-bottom: 25px;">
                <engine:Label name="enemy-header" text="[ENEMIES]" class="enemy-header" style="font-size: 18px; color: rgb(255, 204, 51); -unity-font-style: bold; -unity-text-align: middle-center; margin-bottom: 10px;" />
                <engine:VisualElement name="enemy-list" class="enemy-list" style="background-color: rgba(26, 26, 38, 0.8); border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; padding-top: 10px; padding-bottom: 10px; padding-left: 15px; padding-right: 15px;">
                    <engine:VisualElement name="enemy-item-template" class="enemy-item" style="flex-direction: row; justify-content: space-between; align-items: center; margin-bottom: 8px; padding-top: 8px; padding-bottom: 8px; padding-left: 10px; padding-right: 10px; background-color: rgba(51, 51, 64, 0.6); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; display: none;">
                        <engine:VisualElement name="enemy-info" class="enemy-info" style="flex-direction: column; flex-grow: 1;">
                            <engine:Label name="enemy-name" text="1x Skeleton Warrior" class="enemy-name" style="font-size: 16px; color: rgb(255, 230, 179); -unity-font-style: bold;" />
                            <engine:Label name="enemy-stats" text="HP: 25 | AC: 14 | Threat: 3" class="enemy-stats" style="font-size: 12px; color: rgb(204, 204, 204);" />
                            <engine:Label name="enemy-weapon" text="[WEAPON] Iron Sword" class="enemy-weapon" style="font-size: 11px; color: rgb(179, 179, 255);" />
                        </engine:VisualElement>
                        <engine:VisualElement name="threat-indicator" class="threat-indicator" style="width: 60px; height: 20px; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; justify-content: center; align-items: center; background-color: rgb(77, 204, 77);">
                            <engine:Label name="threat-label" text="T3" class="threat-label" style="font-size: 11px; color: rgb(255, 255, 255); -unity-font-style: bold;" />
                        </engine:VisualElement>
                    </engine:VisualElement>
                </engine:VisualElement>
            </engine:VisualElement>
            <engine:VisualElement name="button-container" class="button-container" style="flex-direction: row; justify-content: space-around; margin-top: 20px;">
                <engine:Button name="run-away-button" text="[FLEE] RUN AWAY" class="run-button" style="font-size: 16px; background-color: rgb(153, 153, 26); color: rgb(255, 255, 255); border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; padding-top: 12px; padding-bottom: 12px; padding-left: 20px; padding-right: 20px; min-width: 120px;" />
                <engine:Button name="attack-button" text="[FIGHT] ATTACK!" class="attack-button" style="font-size: 16px; background-color: rgb(204, 51, 51); color: rgb(255, 255, 255); border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; padding-top: 12px; padding-bottom: 12px; padding-left: 20px; padding-right: 20px; min-width: 120px;" />
            </engine:VisualElement>
        </engine:VisualElement>
    </engine:VisualElement>
</engine:UXML>