roll20-character-sheets/Knight/scss/files/tabs/art.scss

div.tabArt {
    @include col(100%, calc((100% / 2) - 5px));

    div.domaineArtistique {
        $titre:(
            "titre":(
                "hasButton":true,
                "hasBonusCarac":true
            ),
            "secondTitre":(
                "actif":true,
                "background":$clair,
                "color":$black
            )
        );

        @include block($sombre);
        @include titre($white, transparent, $titre);
        @include buttonRoll();

        justify-content: space-between;

        div.data {
            display:none;
        }

        div.titre {
            display:flex;

            input[type="text"] {
                position: absolute;
                width: 100%;
                background: transparent;
                border: 0px;
                color: $white;
                padding: 0px;
                text-align: center;
                font-weight: bold;
                line-height: 28px;
            }
        }

        h2.titreBis {
            display:flex;
            border-top:1px solid $sombre;
            border-bottom:1px solid $sombre;
        }

        select {
            border:0px;
            padding:0px;
            height:28px;
            text-align: center;
        }

        div.rollPJ {
            width: 100%;
            background: $clair;
            font-size: 14px;
            justify-content: space-between;

            select {
                width:50%;

                &:last-of-type {
                    border-left:1px solid $sombre;
                }
            }
        }

        div.bonusCarac {
            display:none;
            width: 100%;
            background: $clair;
            justify-content: space-between;
            border-top:1px solid $sombre;
            
            select {
                display:none;
                padding:0px;
                height:28px;
                text-align: center;
            }
        }

        label.rollBonus {
            display:flex;
            width: 100%;
            background: $clair;
            font-size: 14px;
            justify-content: space-between;
            border-top:1px solid $sombre;

            span {
                width: calc(50% - 2px);
                line-height: 28px;
                padding-left: 2px;
                font-size: 14px;
                font-weight:bold;
                color:$black;
            }

            input[type="number"] {
                width: 50%;
                height:28px;
                padding-top: 0px;
                padding-bottom: 0px;
                text-align: center;
                border-top: 0px;
                border-right: 0px;
                border-bottom: 0px;
                border-left:1px solid $sombre;
                color:$black;
            }
        }

        div.ligneTitre {
            display:flex;
            width:100%;
            justify-content: space-between;
            background:$clair;
            border-top:1px solid $sombre;

            span {
                display:flex;
                line-height: 28px;
                font-size: 14px;
                justify-content: center;
                color: $black;
                font-weight: bold;
                align-items: center;

                &.firstCol {
                    width:120px;
                }

                &.lastCol {
                    width:calc(100% - 120px - 1px);
                    border-left:1px solid $sombre;
                }
            }
        }

        label.ligne {
            display:flex;
            width:100%;
            justify-content: space-between;
            background:$clair;
            border-top:1px solid $sombre;

            div.autoex {
                font-size:14px;
            }

            div.firstCol {
                width:120px;

                span {
                    display:flex;
                    align-self: stretch;
                    align-items: center;
                    line-height: 28px;
                    color: $black;
                    font-weight: bold;
                    font-size: 14px;

                    &:first-of-type {
                        width:75px;
                    }

                    &:last-of-type {
                        width:45px;
                    }
                }
            }

            div.lastCol {
                width:calc(100% - 120px - 1px);
                border-left:1px solid $sombre;
            }
        }

        input[type="hidden"].bonusCarac {
            &[value="1"] {

                & ~ div.titre {
                    button[type="action"].bonusCaracL1 {
                        box-shadow: 0px 0px 7px 0px #000000 inset;
                    }
                }

                & ~ div.bonusCarac {
                    display:flex;

                    select:first-of-type {
                        display:inline-block;
                        width:100%;
                    }
                }
            }

            &[value="2"] {
                & ~ div.titre {
                    button[type="action"].bonusCaracL1,
                    button[type="action"].bonusCaracL2 {
                        box-shadow: 0px 0px 7px 0px #000000 inset;
                    }
                }

                & ~ div.bonusCarac {
                    display:flex;
                    
                    select:first-of-type {
                        display:inline-block;
                        width:50%;
                    }
                    
                    select:last-of-type {
                        display:inline-block;
                        width:50%;
                        border-left:1px solid $sombre;
                    }
                }
            }
        }
    }

    div.oeuvreArt {
        @include block($sombre);
        @include titre($white);
        @include buttonRoll();

        h1.titre {
            display:flex;
        }

        div.ligneTitre {
            display:flex;
            justify-content: space-between;
            width:100%;
            background:$clair;
        }

        span {
            display:flex;
            line-height: 28px;
            font-size: 14px;
            justify-content: center;
            color: $black;
            font-weight: bold;
            align-items: center;
        }

        .firstCol {
            width:120px;
        }

        .lastCol {
            width:calc(100% - 120px - 1px);
            border-left:1px solid $sombre;
        }

        .repcontainer {
            width:100%;
            flex-wrap: wrap;

            .repitem {
                width:100%;
                background:$clair;
                justify-content: space-between;
                border-top:1px solid $sombre;

                input[type="text"] {
                    width: 100%;
                    text-align: center;
                    padding: 0px;
                    height: 28px;
                    border: 0px;
                }
            }
        }
    }

    div.oeuvreArtCree {
        @include block($sombre);
        @include titre($white);

        h1.titre {
            display:flex;
        }

        .repcontainer {
            width:100%;
            flex-wrap: wrap;

            .repitem {
                width:100%;
                background:$clair;
                justify-content: space-between;
                flex-wrap: wrap;

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

                    span {
                        width:120px;
                        line-height: 28px;
                        font-size: 14px;
                        color: $black;
                        font-weight: bold;
                    }

                    input[type="text"] {
                        width: calc(100% - 120px - 1px);
                        text-align: center;
                        padding: 0px;
                        height: 28px;
                        border: 0px;
                        border-left:1px solid $sombre;
                    }
                }

                div.autoex {
                    border-top:1px solid $sombre;
                }

                &:not(:first-of-type) {
                    border-top:1px solid $sombre;
                }
            }
        }
    }

    div.col >* {
        margin-bottom:10px;
    }
}