enyllion.css

/* Font import */
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Eagle+Lake&family=Macondo&family=MedievalSharp&display=swap');

/*Tabs*/
    /*PJ (PC) sheet*/
    .charsheet .pc-principal,
    .charsheet .pc-equipment,
    .charsheet .pc-grimoire,
    .charsheet .pc-necromancy,
    .charsheet .pc-notes {
        display: none;
    }

    .charsheet .tabstoggle[value="PC_principal"] ~ div.pc-principal,
    .charsheet .tabstoggle[value="PC_equipment"] ~ div.pc-equipment,
    .charsheet .tabstoggle[value="PC_grimoire"] ~ div.pc-grimoire,
    .charsheet .tabstoggle[value="PC_necromancy"] ~ div.pc-necromancy,
    .charsheet .tabstoggle[value="PC_notes"] ~ div.pc-notes {
        display: block;
    }

    /* PNJ (NPC) sheet */
    .charsheet .npc-principal,
    .charsheet .npc-equipement,
    .charsheet .npc-grimoire {
        display: none;
    }

    .charsheet .tabstoggle[value="NPC_principal"] ~ div.npc-principal,
    .charsheet .tabstoggle[value="NPC_equipment"] ~ div.npc-equipement,
    .charsheet .tabstoggle[value="NPC_grimoire"] ~ div.npc-grimoire {
        display: block;
    }

    /* Ennemy sheet */
    .charsheet .creature,
    .charsheet .demon,
    .charsheet .dragon,
    .charsheet .ennemi {
        display: none;
    }

    .charsheet .tabstoggle[value="creature"] ~ div.creature,
    .charsheet .tabstoggle[value="demon"] ~ div.demon,
    .charsheet .tabstoggle[value="dragon"] ~ div.dragon,
    .charsheet .tabstoggle[value="ennemi"] ~ div.ennemi {
        display: block;
    }

    /* Sheet selection */
    div.sheet-tab-content {
        display: none;
    }

    input.sheet-tab1:checked ~ div.sheet-tab1,
    input.sheet-tab2:checked ~ div.sheet-tab2,
    input.sheet-tab3:checked ~ div.sheet-tab3 {
        display: block;
    }

    input.sheet-tab {
        width: 100px;
        height: 25px;
        left: 6px;
        margin: 35px 2px;
        cursor: pointer;
        z-index: 1;
        border: 2px solid #000;
        border-radius: 6px;
        font-family:"Cinzel Decorative", serif;
        font-size: 18px;
    }

    input.sheet-tab::before {
        content: attr(title);
        text-align: center;
        display: inline-block;
        background: #fff;
        color: #000;
        width: 100px;
        height: 25px;
        border: 2px solid #000;
        border-radius: 6px;
        font-family:"Cinzel Decorative", serif;
        font-size: 18px;
    }

    input.sheet-tab:checked::before {
        background: #926239;
        color: #fff;
        border: 2px solid #000;
        border-radius: 6px;
        font-family:"Cinzel Decorative", serif;
        font-size: 18px;
    }

    div.sheet-tab-content {
        width:827px;
        height: 850px;
        margin: 0 0 0 0;
        padding: 5px;
        background-color:#926239
    }
/* End of tabs */

/* Logo & title */
    div.logo {
        width: 105px;
        height: auto;
        position: absolute;
        left: 752px;
        top: 57px;
    }

    div.title-sheet {
        width: 320px;
        height: auto;
        position: absolute;
        left: 288px;
        top:70px;
    }

    span.title-sheet {
        font-family: "Eagle Lake", serif;
        font-size: 22px;
        text-align: center;
    }

/* Fields and buttons */
.part-of-sheet-buttons{
    width: 145px;
    height: auto;
    font-family: "Cinzel Decorative", serif;
    font-size: 12px;
    border-radius: 5px;
    color: #000;
}

.char-textbox {
    background:transparent;
    border-top:none;
    border-left:none;
    border-right:none;
    border-bottom:1px solid #000;
    box-shadow:none;
    color: #000;
    width: 165px;
}

.textbox-stat[type="number"] {
    text-align: center !important;
    background:transparent;
    border: 1px solid #000;
    box-shadow:none;
    color: #000;
    width:35px;
    margin-left:7px;
    text-align:center;
    font-size:20px;
}

/* Dices buttons */
button[type=roll].sheet-d100-dice,
button[type=roll].sheet-d10-dice,
button[type=roll].sheet-infos-dice {
    box-sizing: border-box;
    text-align: center !important;
    padding: 1px 1px 1px 1px !important;
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    background:transparent;
    box-shadow: none;
    text-shadow: none;
    -webkit-box-shadow: none;
}

.ui-dialog .tab-content .charsheet button[type=roll].sheet-d100-dice::before {
    font-family: 'dicefontd10';
    content: 't';
    font-size: 27px;
    color: #000;
}

.ui-dialog .tab-content .charsheet button[type=roll].sheet-d10-dice::before {
    font-family: 'dicefontd10';
    content: 'k';
    font-size: 27px;
    color: #000;
}

.ui-dialog .tab-content .charsheet button[type=roll].sheet-infos-dice::before {
    font-family: 'Pictos';
    content: 'i';
    font-size: 27px;
    color: #000;
}

.ui-dialog .tab-content .charsheet button[type=roll].sheet-d100-dice:hover:before {
    font-family: 'dicefontd10';
    content: 'T';
    font-size: 27px;
    color: #000;
}

.ui-dialog .tab-content .charsheet button[type=roll].sheet-d10-dice:hover:before {
    font-family: 'dicefontd10';
    content: 'K';
    font-size: 27px;
    color: #000;
}

/* Titles and writings */
.section-title {
    font-family: "MedievalSharp", serif;
    font-size: 22px;
    margin-left: 25px;
    color: #000;
}

.char-textbox-label {
    font-family: "Macondo", serif;
    font-size: 15px;
    color: #000;
}

.textbox-label {
    font-family: "Eagle Lake", serif;
    font-size: 18px;
    color: #000;
}

/*Chrome appearance for number field like a textfield*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/*Mozilla appearance for number field like a textfield*/
input[type="number"] {
    -moz-appearance: textfield;
}

/* Grid areas */
    .areas {
        border: 1px solid gray;
        height: auto;
        padding-bottom: 15px;
    }

    .buttons {
        border: none;
        width: auto;
        height: auto;
    }

    /*PC principal*/
    .perso {
        grid-area: perso;
        width: 99.75%;
    }

    .carac {
        grid-area: carac;
        width: 98.5%;
    }

    .health {
        grid-area: health;
        width: 98.5%;
    }
/*End of grid areas*/

/* Wrappers */
    /* Part of sheet selection */
    .part-of-sheet-buttons-wrapper {
        width: auto;
        justify-items: center;
    }

    /*PC wrappers*/
    .pc-principal {
        display: grid;
        gap: 1px;
        grid-template-columns: repeat(2, 50%);
        grid-auto-rows: minmax(50px, auto);
        grid-template-areas:
            "perso      perso"
            "carac      health"
            "bourse     honneur"
            "attributs  affDiv"
            "attributs  carRace"
            "resMag     resMag"
            "charge     charge"
            "competence competence";
    }
/* End of wrappers */