ds4/src/scss/components/_character_values.scss

header.sheet-header {
    .character-values {
        flex: 0 0 100%;
        .attributes-traits {
            margin-top: $margin-sm;
            .attribute {
                .attribute-label {
                    font-family: $font-heading;
                    font-size: 2em;
                    text-align: center;
                }
                .attribute-value {
                    border: 2px groove $c-border-groove;
                    line-height: 26px;
                    font-size: 1.5em;
                    text-align: center;
                    padding-left: 2px;
                    padding-right: 2px;
                    gap: 0;
                    input,
                    .attribute-value-total {
                        grid-column: span 2;
                    }
                }
            }
            .trait {
                .trait-label {
                    color: transparent;
                    font-family: $font-heading;
                    font-size: 2em;
                    text-align: center;
                    //text-shadow: -1px 1px 0 $c-black, 1px 1px 0 $c-black, 1px -1px 0 $c-black, -1px -1px 0 $c-black;
                    -webkit-text-stroke: 1px $c-black;
                }
                .trait-value {
                    border: 2px groove $c-border-groove;
                    font-size: 1.5em;
                    line-height: 26px;
                    text-align: center;
                    padding-left: 2px;
                    padding-right: 2px;
                    gap: 0;
                    input,
                    .trait-value-total {
                        grid-column: span 2;
                    }
                }
            }
        }
        .combat-values {
            margin-top: $margin-sm;
            .combat-value-with-formula {
                display: grid;
                place-items: center;
                $size: 60px;
                row-gap: $margin-sm;
                .combat-value {
                    display: grid;
                    place-items: center;
                    height: $size;
                    width: $size;
                    flex: 0 0 auto;
                    background-size: contain;
                    font-size: 1.5em;
                }
                .combat-value-formula {
                    width: $size;
                    input {
                        text-align: center;
                    }
                }
            }
            .combat-value.hitPoints {
                background-image: url("assets/DS4-HP.png");
            }
            .combat-value.defense {
                background-image: url("assets/DS4-DEF.png");
            }
            .combat-value.initiative {
                background-image: url("assets/DS4-INI.png");
            }
            .combat-value.movement {
                background-image: url("assets/DS4-MR.png");
            }
            .combat-value.meleeAttack {
                background-image: url("assets/DS4-MAT.png");
            }
            .combat-value.rangedAttack {
                background-image: url("assets/DS4-RAT.png");
            }
            .combat-value.spellcasting {
                background-image: url("assets/DS4-SPC.png");
            }
            .combat-value.targetedSpellcasting {
                background-image: url("assets/DS4-TSC.png");
            }
        }
    }
}