roll20-character-sheets/DonjonsEtChatons/scss/files/header.scss

div.header {
    @include titre($black);
    @include options($black, $background);

    display:flex;
    width:100%;
    justify-content: space-between;
    flex-wrap: wrap;

    label {
        &.name {
            display:flex;
            align-content: center;
            align-items: center;
            width:100%;
            background:$white;
            border:2px solid $borderBrown;
            border-radius:25px;
            padding:5px;
            padding-right:10px;

            span {
                width:max-content;
                font-size: 16px;
                font-family: "patrick hand";
            }

            input {
                width:100%;
                border:0px;
                padding-left:5px;
                font-size:16px;
                font-family: "patrick hand";
            }
        }
    }

    div {
        &.line {
            display:flex;
            width:100%;
            justify-content: space-between;
        }

        &.col {
            position: relative;
            display:flex;
            flex-wrap: wrap;
            width:calc(50% - 10px);
            align-items: flex-start;
            align-content: flex-start;
        }

        &.identite {
            display:flex;
            width:100%;
            justify-content: space-between;
            flex-wrap: wrap;
            background:$white;
            padding:5px;
            padding-right:10px;
            border:2px solid $borderBrown;
            border-radius:25px;
            margin-top:5px;

            label {
                display:flex;
                align-content: center;
                align-items: center;
                width:100%;

                span {
                    width:max-content;
                    font-size: 16px;
                }

                input {
                    width:100%;
                    border:0px;
                    padding-left:5px;
                    font-size:16px;
                }
            }
        }

        &.don {
            display:flex;
            width:100%;
            justify-content: space-between;
            flex-wrap: wrap;
            background:$white;
            padding:10px;
            border:2px solid $borderBrown;
            border-radius:25px;
            font-family: "patrick hand";
            font-size:14px;

            >span {
                width:max-content;
                font-size: 16px;
                font-weight:bold;
                font-family: "patrick hand";
            }
        }

        &.experience {
            display:flex;
            width:100%;
            justify-content: space-between;
            background:$white;
            padding:5px;
            padding-right:10px;
            border:2px solid $borderBrown;
            border-radius:25px;
            margin-top:5px;
            margin-bottom:5px;
            align-items: center;
            align-content: center;

            >span {
                display:flex;
                width: 75px;
                font-size: 16px;
                font-weight: bold;
                font-family: "patrick hand";
                text-align: center;
            }

            div {
                &.double {
                    display:flex;
                    flex-wrap: wrap;
                    position:relative;
                    width:calc(100% - 75px);
                    align-items: center;
                    align-content: center;
                    position:relative;

                    input {
                        width:calc(50% - (15px / 2));
                        border:0px;
                        background:transparent;
                        text-align: center;
                        height: 49px;
                        font-size: 34px;
                        font-family: "Patrick Hand";

                        &:first-of-type {
                            text-align: right;
                        }

                        &:last-of-type {
                            text-align: left;
                        }
                    }

                    >span {
                        &.separateur {
                            display: block;
                            width: 15px;
                            text-align: center;
                            font-size: 33px;
                            font-weight: bold;
                            font-family: "patrick hand";
                            line-height: 30px;
                            color:$borderBrown;
                        }

                        &.absoluteL,
                        &.absoluteR {
                            width:50%;
                            position:absolute;
                            font-family: "patrick hand";
                            bottom:-3px;
                        }

                        &.absoluteL {
                            text-align: center;
                        }

                        &.absoluteR {
                            text-align: center;
                            right:0px;
                        }
                    }
                }
            }
        }

        &.qualites {
            @include buttonRoll;
            display:flex;
            width:390px;
            justify-content: space-between;
            align-items: flex-end;
            align-content: flex-end;
            flex-wrap: wrap;

            div {
                &.blockInput {
                    display:flex;
                    flex-wrap: wrap;
                    position:relative;
                    height:157px;
                    width:125px;

                    label {
                        display: flex;
                        width: 100%;
                        justify-content: center;
                        cursor:pointer;

                        span {
                            display: block;
                            width: max-content;
                            margin-left:2px;
                            text-align: center;
                            font-size: 18px;
                            font-weight: bold;
                            font-family: "patrick hand";
                            line-height: 30px;
                        }

                        button.rollDice {
                            margin:0px;
                            border:1px solid $black;
                        }
                    }
                }

                &.input {
                    display:flex;
                    position:relative;
                    height:127px;
                    width:100%;

                    input {
                        position:absolute;
                        border-radius:50%;
                        border:0px;
                        background:transparent;
                        text-align: center;
                        top: calc(50% - 30px);
                        height: 74px;
                        width: 74px;
                        left: calc(50% - 37px);
                        font-size: 34px;
                        font-family: "Patrick Hand";
                    }
                }
            }
        }

        &.valeurs {
            display:flex;
            width:343px;
            justify-content: space-between;
            align-items: end;
            flex-wrap: wrap;

            div {

                &.coeur {
                    display:flex;
                    flex-wrap: wrap;
                    position:relative;
                    height:175px;
                    width:164px;

                    div.blockInput {
                        position:absolute;
                        display:flex;
                        justify-content: center;
                        top:calc(50% - 45px);
                        width:100%;
                    }

                    >span {
                        display: block;
                        width: 100%;
                        text-align: center;
                        font-size: 18px;
                        font-weight: bold;
                        font-family: "patrick hand";
                        line-height: 30px;
                    }
                }

                &.amitie {
                    display:flex;
                    flex-wrap: wrap;
                    position:relative;
                    height:205px;
                    width:164px;

                    div.blockInput {
                        position:absolute;
                        display:flex;
                        justify-content: center;
                        top:calc(75% - 57px);
                        width:100%;
                    }

                    >span {
                        display: block;
                        width: 100%;
                        text-align: center;
                        font-size: 18px;
                        font-weight: bold;
                        font-family: "patrick hand";
                        line-height: 30px;
                    }
                }

                &.blockInput {
                    span {
                        height:49px;
                        width:15px;
                        font-size: 34px;
                        font-family: "Patrick Hand";
                    }
                }

                input {
                    border-radius:50%;
                    border:0px;
                    background:transparent;
                    text-align: center;
                    height: 49px;
                    width: 37px;
                    font-size: 34px;
                    font-family: "Patrick Hand";

                    &:first-of-type {
                        text-align: right;
                    }

                    &:last-of-type {
                        text-align: left;
                    }
                }
            }
        }
    }
}