roll20-character-sheets/Everywhen/everywhen.css

.sheet-darkmode .ui-dialog .tab-content .charsheet {
    label {
        color: #333;
    }
}

.ui-dialog .tab-content .charsheet {
    padding: 0;
    margin-bottom: 1rem;

    * {
        box-sizing: border-box !important;
    }

    .container{
        min-width: 795px;
    }

    /* Remove Arrow froms numbers */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    input[type=number] {
        -moz-appearance: textfield;
        text-align:center;
    }
    
    select{
        margin:0;
    }
    
    input, textarea, select{
        border-radius: 0.75rem;
        background-color: white;
    }
    textarea{
        resize: none;
    }
    
    .bordered-input{
        border: 2px solid black;
    }
    
    .smaller{
        font-size: 0.90%;
    }
    
    
    /* Roll & buttons */
    .custom-roll,.damage-button{
        border: 2px solid black;
        background: #EEE;
        color: black;
        border-radius: 0.75rem;
        padding: 0.35rem;
    }
    .white-roll{
        background: white;
        border-radius: 0.75rem;
    }
    .white-roll::before{
        content:""
    }
    .tab-button{
        background: gray;
        color: black;
        border-top-left-radius: 0.75rem;
        border-top-right-radius: 0.75rem;
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
        padding-left: 0.70rem;
        padding-right: 0.70rem;
        border:none;
    }
    /* Labels */
    .left{
        text-align: left !important;
    }
    .centered{
        text-align: center !important;
    }
    
    .right{
        text-align: right !important;
    }
    
    .fit-content{
        width: fit-content !important;
    }
    
    .label{
        color: black;
        margin: 0;
        padding: .2rem;
    }
    
    .title{
        position: absolute;
        top : 0;
        left: 50%;
        transform: translate(-50%, 0);
        background-color: lightgray;
        padding: 0.25rem 0.5rem;
        width: fit-content;
        z-index: 20;
    }
    .title + input{
        padding-top: .75rem;
    }
    
    .config-frame{
        padding-top: 2.5rem !important;
    }
    .boons,.flaws,.tempflaws,.gears,.weapons,.armours,.languages{
        margin-top: 1.25rem;
    
        .editmode .itemcontrol{
            display : flex !important;
            gap: .25rem;
    
            .repcontrol_del,.repcontrol_move{
                position: relative;
                z-index: 50;
                float:none !important;
            }
            .repcontrol_del{
                order : 2;
            }
            .repcontrol_move{
                order : 1;
            }
        }
    }
    
    /* Lifeblood & Resolve checkbox */
    input[type=hidden].lifebox + span, label.box,label.large-box{
        display: inline-block;
        width: 1.5rem;
        height: 1.5rem;
        border: 1px solid black;
        border-radius: 0.25rem;
        background-color: white;
        position: relative;
        content: "";
    }
    input[type=hidden].lifebox + span,label.large-box{
        width: 2rem;
        height: 2rem;
        text-align: center;
    }
    label.box,label.large-box{
        margin: 0;
        padding: 0;
    }
    
    label.box > input[type=checkbox],label.large-box > input[type=checkbox]{
        opacity: 0;
        margin: 0;
        width: 1px;
        height: 1px;
    }
    
    input[type=hidden][value="1"].lifebox + span::before{
        content: "/";
        color: black;
        font-weight: bolder;
    }
    input[type=hidden][value="2"].lifebox + span::before{
        content: "X";
        color: black;
        font-weight: bolder;
    }
    input[type=hidden][value="3"].lifebox + span::before{
        content: "★";
        color: black;
        font-weight: bolder;
    }
    
    input[type=hidden][value="-1"].lifebox + span, label.box:has(input:checked), label.large-box:has(input:checked){
        background-color: black;
    }
    /* Row & Column*/
    .flex-row,
    .flex-column{
        display: flex;
        flex-wrap: nowrap;
        gap : 0.5rem;
    }
    
    .flex-row {
        flex-direction: row;
    }
    
    .flex-column {
        flex-direction: column;
    }
    
    .w-1 {
        width: calc(1 * 100% / 12);
    }
    
    .w-2 {
        width: calc(2 * 100% / 12);
    }
    
    .w-3 {
        width: calc(3 * 100% / 12);
    }
    
    .w-4 {
        width: calc(4 * 100% / 12);
    }
    
    .w-5 {
        width: calc(5 * 100% / 12);
    }
    
    .w-6 {
        width: calc(6 * 100% / 12);
    }
    
    .w-7 {
        width: calc(7 * 100% / 12);
    }
    
    .w-8 {
        width: calc(8 * 100% / 12);
    }
    
    .w-9 {
        width: calc(9 * 100% / 12);
    }
    
    .w-10 {
        width: calc(10 * 100% / 12);
    }
    
    .w-11 {
        width: calc(11 * 100% / 12);
    }
    
    .w-12 {
        width: calc(12 * 100% / 12);
    }
    /* Text Alignement */
    .text-center{
        text-align: center;
    }
    .text-left{
        text-align: left;
    }
    .text-right{
        text-align: right;
    }
    /* gap */
    .gap-1{
        gap: 0.2rem;
    }
    .gap-2{
        gap: 0.5rem;
    }
    .gap-3{
        gap: 1rem;
    }
    .gap-4{
        gap: 1.5rem;
    }
    
    /* Axis Alignement */
    .justify-start{
        justify-content: flex-start;
    }
    .justify-end{
        justify-content: flex-end;
    }
    .justify-center{
        justify-content: center;
    }
    .justify-sb{
        justify-content: space-between;
    }
    .justify-sa{
        justify-content: space-around;
    }
    .justify-se{
        justify-content: space-evenly;
    }
    /* Text-weight */
    .bold{
        font-weight:bold;
    }
    /* Cross Axis Alignment*/
    .align-start{
        align-items: flex-start;
    }
    .align-end{
        align-items: flex-end;
    }
    .align-center{
        align-items: center;
    }
    .align-stretch{
        align-items: stretch;
    }
    /* Self */
    .grow{
        flex-grow : 1;
    }
    
    .frame{
        position: relative;
        background-color: lightgray;
        padding: 0.5rem;
        border-radius : 0.5rem;
    }
    
    .bio{
        textarea{
            height: 20rem;
        }
    }

    /*HEADER */
    
    /* TABS */
    /* configure the tab buttons */
    .core,
    .bio,
    .config{
        display: none;
    }
    
    /* style the active button */
    
    input[name="attr_page"][value="config"] ~ button.config-btn,
    input[name="attr_page"][value="bio"] ~ button.bio-btn,
    input[name="attr_page"][value="core"] ~ button.core-btn{
        background-color: lightgray;
        color: black;
        font-weight: bold;
    }
    
    /* show the selected tab */
    
    input[name="attr_page"][value="core"] ~ .core,
    input[name="attr_page"][value="bio"] ~ .bio,
    input[name="attr_page"][value="config"] ~ .config {
        display: flex;
    }
    
    /* Options */
    
    /* OPTIONS FLAGS */
    .options-flag ~ .options-display {
        display: flex !important;
    }
    
    .options-flag ~ .options-options {
        background-color: #E0E0E0;
        border: 2px dotted darkgray;
        padding: .5rem;
        display: none !important;
    }
    
    .options-flag:checked ~ .options-options {
        display: flex !important;
    }
    
    .options-flag:checked ~ .options-display {
        display: none !important;
    }
    
    .options-flag,
    .options-flag + span {
        position: absolute;
        top: 0px;
        right: 0px;
        width: 18px !important;
        height: 18px !important;
    }
    
    .options-flag + span {
        white-space: nowrap;
        font-size: 20px;
        font-family: pictos;
        color: #A0A0A0;
        cursor: pointer;
        margin-top: 0px;
        display: none;
    }
    
    .options-flag {
        opacity: 0;
        z-index: 10;
    }
    
    .hoverable{
        position: relative;
    }
    .hoverable:hover > .options-flag,
    .hoverable:hover > .options-flag + span{
        display: block;
    }
    
    /* Weapons Conditional visibility */
    input[name="attr_type"] + .conditional-range{
        display: none;
    }
    input[name="attr_type"][value="ranged"] + .conditional-range{
        display: flex;
    }
    
    /* Optionals Rules */
    .conditional-faith, .conditional-arcana, .conditional-psionic, .conditional-credit, .conditional-resolve{
        display: none;
    }
    
    input[name="attr_has_faith"][value="on"] ~ .conditional-faith,
    input[name="attr_has_arcana"][value="on"] ~ .conditional-arcana,
    input[name="attr_has_psionics"][value="on"] ~ .conditional-psionic,
    input[name="attr_has_credit"][value="on"] ~ .conditional-credit,
    input[name="attr_has_resolve"][value="on"] ~ .conditional-resolve{
        display: flex;
    }

}

.roll-templates {
    display: none;
}

.sheet-rolltemplate-attack .sheet-cadre,
.sheet-rolltemplate-spell .sheet-cadre,
.sheet-rolltemplate-main .sheet-cadre {
    padding: 0.5rem;
    background-color: lightgray;
    border-radius : 0.5rem;
    min-height: 50px;
}

.sheet-rolltemplate-attack .sheet-h4,
.sheet-rolltemplate-spell .sheet-h4,
.sheet-rolltemplate-main .sheet-h4 {
    width: 100%;
    text-align: center;
}

.sheet-rolltemplate-attack .sheet-w6,
.sheet-rolltemplate-spell .sheet-w6,
.sheet-rolltemplate-main .sheet-w6 {
    width: 50%;
}

.sheet-rolltemplate-attack .sheet-w12,
.sheet-rolltemplate-spell .sheet-w12,
.sheet-rolltemplate-main .sheet-w12 {
    width: 100%;
}

.sheet-rolltemplate-attack .sheet-label,
.sheet-rolltemplate-spell .sheet-label,
.sheet-rolltemplate-main .sheet-label {

}

.sheet-rolltemplate-attack .sheet-text-center,
.sheet-rolltemplate-spell .sheet-text-center,
.sheet-rolltemplate-main .sheet-text-center {
    text-align: center;
}

.sheet-rolltemplate-attack .sheet-line,
.sheet-rolltemplate-spell .sheet-line,
.sheet-rolltemplate-main .sheet-line {
    display: flex;
    flex-direction: row;
}

.sheet-rolltemplate-attack .sheet-white-line,
.sheet-rolltemplate-spell .sheet-white-line,
.sheet-rolltemplate-main .sheet-white-line {
    display: flex;
    flex-direction: row;
    margin: 0.1rem;
    background-color: white;
    padding: 0.5rem;
    border-radius: 0.75rem;
}

.sheet-rolltemplate-attack .sheet-border-bottom,
.sheet-rolltemplate-spell .sheet-border-bottom,
.sheet-rolltemplate-main .sheet-border-bottom {
    height: 1rem;
}

.sheet-rolltemplate-attack .sheet-border-bottom,
.sheet-rolltemplate-spell .sheet-border-bottom,
.sheet-rolltemplate-main .sheet-border-bottom {
    border-bottom: 0.1rem solid black;
}

.sheet-rolltemplate-attack .sheet-align-center,
.sheet-rolltemplate-spell .sheet-align-center,
.sheet-rolltemplate-main .sheet-align-center {
    align-items: center;
}

.sheet-rolltemplate-attack .sheet-bold,
.sheet-rolltemplate-spell .sheet-bold,
.sheet-rolltemplate-main .sheet-bold {
    font-weight: bold;
}

.sheet-rolltemplate-attack .sheet-w4,
.sheet-rolltemplate-spell .sheet-w4,
.sheet-rolltemplate-main .sheet-w4 {
    width: calc(4 * 100% / 12);
}

.sheet-rolltemplate-attack .sheet-text-right,
.sheet-rolltemplate-spell .sheet-text-right,
.sheet-rolltemplate-main .sheet-text-right {
    text-align: right;
}

.sheet-rolltemplate-attack .sheet-w8,
.sheet-rolltemplate-spell .sheet-w8,
.sheet-rolltemplate-main .sheet-w8 {
    width: calc(8 * 100% / 12)
}

.sheet-rolltemplate-attack .sheet-colu,
.sheet-rolltemplate-spell .sheet-colu,
.sheet-rolltemplate-main .sheet-colu {
    display: flex;
    flex-direction: column;
}

.sheet-rolltemplate-attack .sheet-white-colu,
.sheet-rolltemplate-spell .sheet-white-colu,
.sheet-rolltemplate-main .sheet-white-colu {
    display: flex;
    flex-direction: column;
    margin: 0.1rem;
    background-color: white;
    padding: 0.5rem;
    border-radius: 0.75rem;
}

.sheet-rolltemplate-attack .sheet-justify-center,
.sheet-rolltemplate-spell .sheet-justify-center,
.sheet-rolltemplate-main .sheet-justify-center {
    justify-content: center;
}

.sheet-rolltemplate-main .sheet-roll ,
.sheet-rolltemplate-attack .sheet-roll,
.sheet-rolltemplate-spell .sheet-roll {
    display:block;
}

.sheet-rolltemplate-attack .inlinerollresult,
.sheet-rolltemplate-spell .inlinerollresult,
.sheet-rolltemplate-main .inlinerollresult{
    padding: 0;
    margin: 0;
    background-color: transparent;
    color: #333;
    font-weight: bold;
    border:none;
}
.sheet-rolltemplate-attack .sheet-result > .inlinerollresult,
.sheet-rolltemplate-spell .sheet-result > .inlinerollresult,
.sheet-rolltemplate-main .sheet-result > .inlinerollresult{
    display: block;
    padding: 0.5rem 0.2rem 0;
    background-color: transparent;
    color: #333;
    margin-top: 0.2rem;
    font-size: 2.5rem;
    font-weight: bold;
}

.sheet-rolltemplate-attack .inlinerollresult.fullcrit,
.sheet-rolltemplate-spell .inlinerollresult.fullcrit,
.sheet-rolltemplate-main .inlinerollresult.fullcrit{
    color:#3fb315;
    border:none;
}
.sheet-rolltemplate-attack .sheet-result > .inlinerollresult.fullcrit,
.sheet-rolltemplate-spell .sheet-result > .inlinerollresult.fullcrit,
.sheet-rolltemplate-main .sheet-result > .inlinerollresult.fullcrit{
    font-weight: bolder;
}

.sheet-rolltemplate-attack .inlinerollresult.fullfail,
.sheet-rolltemplate-spell .inlinerollresult.fullfail,
.sheet-rolltemplate-main .inlinerollresult.fullfail{
    color:#b31515;
    border:none;
}

.sheet-rolltemplate-attack .sheet-result > .inlinerollresult.fullfail,
.sheet-rolltemplate-spell .sheet-result > .inlinerollresult.fullfail,
.sheet-rolltemplate-main .sheet-result > .inlinerollresult.fullfail{
    font-weight: bolder;
}

.sheet-rolltemplate-attack .inlinerollresult.importantroll,
.sheet-rolltemplate-spell .inlinerollresult.importantroll,
.sheet-rolltemplate-main .inlinerollresult.importantroll{
    color:#4a57ed;
    border:none;
}

.sheet-rolltemplate-attack .sheet-result > .inlinerollresult.importantroll,
.sheet-rolltemplate-spell .sheet-result > .inlinerollresult.importantroll,
.sheet-rolltemplate-main .sheet-result > .inlinerollresult.importantroll{
    font-weight: bolder;
}