roll20-character-sheets/Knight/scss/files/top.scss

div.topLeft
{
    @include buttonRoll();

    display:flex;
	background-image:url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Knight/knightLogo.png");
	background-repeat:no-repeat;
	background-size:auto;
	background-position-y:calc(50% - 20px);
	background-position-x:left;
	width:calc(50% - 5px);
	height:auto;
	min-height:115px;

    div.affichage
    {
        width:100%;
        margin-top:auto;
        justify-content:space-between;
        margin-bottom:2px;

        div.defense,
        div.reaction,
        div.initiative {
            display:flex;
            width:calc((100% / 3) - 20px);
            background-color:$sombre;
            border:1px solid $black;
            justify-content:space-between;
            flex-wrap:nowrap;

            div.base {
                display:flex;
                width: calc(100% - 25px);
                justify-content:center;
            }

            div.modificateurs {
                display:none;
            }

            h1 {
                width: max-content;
                justify-content: center;
                color: white;
                background: transparent;
                font-size: 14px;
                line-height: 28px;
            }

            span.score {
                display:flex;
                width: 26px;
                justify-content: center;
                background: $clair;
                font-size: 14px;
                line-height: 28px;
                font-weight: bold;
            }

            @include buttonOptions() {
                position:absolute;
                width: 325px;
                justify-content: space-between;
                background: $clair;
                border-top: 1px solid $sombre;
                border-left: 1px solid $sombre;
                border-right: 1px solid $sombre;
                position: absolute;
                margin-top: 28px;
                margin-left: -1px;
                z-index: 100;
                flex-wrap: wrap;

                div {
                    width:100%;
                    justify-content:space-between;
                    height:28px;
                    border-bottom:1px solid $sombre;
                    
                    span {
                        display:flex;
                        justify-content: center;
                        align-items: center;
                        background: $clair;
                        color:$black;
                        font-size: 14px;
                        line-height: 28px;
                        font-weight:bold;
        
                        &.dice {
                            width: 33px;
                        }
        
                        &.signe {
                            width: 11px;
                        }
        
                        &.titleSimple {
                            width: calc((70% / 3) - 11px);
                        }
        
                        &.titleDouble {
                            width: calc((70% / 3) - 11px);
                        }
                    }
        
                    input[type="number"]
                    {
                        width: calc((70% / 3) - 11px);
                        text-align: center;
                        padding: 0px;
                        height: 28px;
                        border:0px;
                    }
                }
            };
        }
    }
}

div.topRight {
    display:flex;
    width:calc(50% - 5px);
	flex-wrap:wrap;

    div.topLine {
        margin-left:auto;
        width:200px;

        @include ficheSelector($white, $sombre);

        div.settings {
            position:absolute;
            width:200px;
            min-width:200px;
            height:23px;
            flex-wrap: wrap;
    
            @include options($sombre, $clair);
        }
    }

    @include menu($white, $sombre);
}