roll20-character-sheets/Awaken/scss/files/vertus.scss

div.vertus {
    display:flex;
    width:100%;
    justify-content: space-between;
    align-items:flex-start;
    margin-top:20px;

    div.chance,
    div.courage,
    div.volonte {
        display:flex;
        justify-content: center;
        width:calc(100% / 3);
        flex-wrap:wrap;
        position:relative;

        div.line {
            margin-top: 1px;
            width: 100%;
            text-align: center;
            height: 22px;
            padding-top: 3px;
        }

        h1 {
            font-size:15px;
            text-transform:uppercase;
            width:calc(100% - 25px);
            white-space:nowrap;
            text-align: center;
            line-height:25px;
        }

        input[type="number"] {
            font-size:25px;
            width:60px;
            height:60px;
            padding:0px;
            margin:0px;
            text-align: center;
            border-radius:30px;
            text-decoration: underline;
            border:1px solid black;
            z-index:999;
            color:black;
        }

        span.space {
            position:absolute;
            width:100%;
            border-bottom:3px solid black;
            left:50%;
            top:55px;
        }

        @include button(18px) {
            align-items:center;
            margin-left:auto;
            margin-right:auto;
        };

        div.marginTop {
            margin-top:10px;
        }

        button[type="action"] {
            width: 21px;
            height: 21px;
            border: 2px solid black;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 15px;
            padding:0px;
            background:transparent;
            margin-left:auto;
            margin-right:auto;

            &:hover {
                background:lightgray;
            }
        }

        div.val1,
        div.val2,
        div.val3,
        div.val4,
        div.val5 {
            display:none;
        }

        input[type="hidden"].max {

            &[value="1"] ~ div.val1,
            &[value="2"] ~ div.val1,
            &[value="2"] ~ div.val2,
            &[value="3"] ~ div.val1,
            &[value="3"] ~ div.val2,
            &[value="3"] ~ div.val3,
            &[value="4"] ~ div.val1,
            &[value="4"] ~ div.val2,
            &[value="4"] ~ div.val3,
            &[value="4"] ~ div.val4,
            &[value="5"] ~ div.val1,
            &[value="5"] ~ div.val2,
            &[value="5"] ~ div.val3,
            &[value="5"] ~ div.val4,
            &[value="5"] ~ div.val5 {
                display:block;
            }
        }

        input[type="hidden"].act {

            &[value="0"] ~ div.val5,
            &[value="0"] ~ div.val4,
            &[value="0"] ~ div.val3,
            &[value="0"] ~ div.val2,
            &[value="0"] ~ div.val1,
            &[value="1"] ~ div.val5,
            &[value="1"] ~ div.val4,
            &[value="1"] ~ div.val3,
            &[value="1"] ~ div.val2,
            &[value="2"] ~ div.val5,
            &[value="2"] ~ div.val4,
            &[value="2"] ~ div.val3,
            &[value="3"] ~ div.val5,
            &[value="3"] ~ div.val4,
            &[value="4"] ~ div.val5 {
                button[type="action"] {
                    background:black;
                    color:white;
                    font-weight:bold;
                }
            }
        }
    }
}