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

div.armes {
    display:flex;
    width:calc(50% - (260px / 2) - 10px);
    justify-content: center;
    align-items:flex-start;
    flex-wrap: wrap;
    border:1px solid $black;
    padding: 12px;
    border-bottom-right-radius: 30px;
    border-top-left-radius: 30px;    

    .repcontainer {
        width:100%;

        .repitem {
            width:100%;
            details {
                &[open] {
                    summary {
                        &::before {
                            content:"";
                            width:25px;
                            height:25px;
                            background:$retract;
                            background-size:contain;
                            background-repeat: no-repeat;
                            background-position:center;
                        }
                    }
                }

                summary {
                    display:flex;
                    flex-wrap: wrap;
                    width:100%;
                    justify-content: space-between;
                    align-content: center;
                    align-items: center;
                    cursor:pointer;

                    label:first-of-type {
                        position:relative;
                        width:25px;
                        height:25px;

                        input[type="checkbox"] {
                            position:absolute;
                            width:25px;
                            height:25px;
                            opacity: 0;

                            &:checked ~ span {
                                background:$selection;
                                background-size: contain;
                                background-repeat: no-repeat;
                                background-position: center;
                            }
                        }

                        span {
                            display:inline-blocK;
                            width:100%;

                            &::before {
                                display:inline-blocK;
                                content:"";
                                width:100%;
                                height:25px;
                                border:1px solid $black;
                                border-radius:30px;
                                font-size: 25px;
                                text-align: center;
                                line-height: 25px;
                                color:$black;
                            }
                        }
                    }

                    input[type="text"] {
                        width:calc(100% - 30px - 30px);
                        height:25px;
                        padding:0px;
                        border:0px;
                        border-bottom:1px dotted $black;
                        color:$black;
                        min-width:0px;
                    }

                    select {
                        width:calc(50% - 5px);
                        height:25px;
                        padding:0px;
                        border:0px;
                        border-bottom:1px dotted $black;
                        color:$black;
                        text-align: center;
                        min-width:0px;

                        &.full {
                            width:100%;
                        }
                    }

                    label.degats {
                        display:flex;
                        justify-content: space-between;
                        width:calc(50% - 5px);
                        align-items: flex-end;

                        span {
                            font-variant: small-caps;
                            color:$black;
                            width:max-content;
                            white-space: nowrap;
                            margin-right:10px;
                            font-size: 13px;
                        }

                        input[type="number"] {
                            width:100%;
                            text-align: center;
                            color:$black;
                            border-top:0px;
                            border-right:0px;
                            border-left:0px;
                            border-bottom:1px dotted $black;
                            padding-bottom: 0px;
                            height: 25px;
                            min-width:0px;
                        }
                    }

                    &::before {
                        content:"";
                        width:25px;
                        height:25px;
                        background:$extend;
                        background-size:contain;
                        background-repeat: no-repeat;
                        background-position:center;
                    }
                }

                div.autoex {
                    width: calc(100% - 2px);
                    border:1px solid $black;
                }
            }

            &:not(:first-of-type) {
                margin-top:5px;
                padding-top:5px;
                border-top:5px double $black;
            }
        }
    }
}