Update position to use view width and view height instead of pixels

[schmas]

On my screen the boxes overlapped, so I adjusted the CSS top, left and right attributes to use view width and view height so can be used with different resolutions.

Ref: https://discordapp.com/channels/184691218184273920/748595338813898773/748658666898718772

[Jericho1060]

thx for the remark, a rework of the design is planned to make it easilly customisable for everyone, i'll include everything from that at that point.

[Jericho1060]

based on your update, here how i did to keep the exact ratio from what i did on my screen :

hud_main_css = [[
<style>
    .hud_container {
        border: 2px solid orange;
        border-radius:10px;
        background-color: rgba(0,0,0,.75);
        padding:10px;
    }
    .hud_help_commands {
        position: absolute;
        top: ]] .. tostring((10/1080)*100) .. [[vh;
        left: ]] .. tostring((50/1920)*100) .. [[vw;
        text-transform: uppercase;
        font-weight: bold;
    }
    .hud_list_container {
        position: absolute;
        top: ]] .. tostring((100/1080)*100) .. [[vh;
        left: ]] .. tostring((50/1920)*100) .. [[vw;
        text-transform: uppercase;
        font-weight: bold;
    }
    .hud_machine_detail {
        position: absolute;
        top: ]] .. tostring((100/1080)*100) .. [[vh;
        right: ]] .. tostring((450/1920)*100) .. [[vw;
        text-transform: uppercase;
        font-weight: bold;
    }
    .hud_machines_container {
        position: absolute;
        top: ]] .. tostring((100/1080)*100) .. [[vh;
        left: ]] .. tostring((300/1920)*100) .. [[vw;
    }
    .elementType {
        margin-top:10px;
        border-radius:5px;
    }
    .elementType.selected {
        border: 2px solid green;
        background-color: rgba(0,200,0,.45);
    }
    tr.selected td, tr.selected th{
        border: 2px solid green;
        background-color: rgba(0,200,0,.1);
    }
    td, th {
        border-bottom:1px solid white;
        padding:5px;
        text-align: center;
    }
    th {
        font-weight: bold;
    }
    .text-success{color: #28a745;}
    .text-danger{color:#dc3545;}
    .text-warning{color:#ffc107;}
    .text-info{color:#17a2b8;}
    .text-primary{color:#007bff;}
</style>
]]

[schmas]

That's great. Tested here. Works great. Thx