roll20-character-sheets/Fabula Ultima/FabulaUltima.css

/**** General stuff ***/

input[type=text] {
    border: none;
    border-bottom: 1px solid #2d4c45;
    border-radius: 0;
    background-color: white;
    width: 100%;
    margin-left: 5px;
}

input[type=checkbox] {
    margin: 0 3px;
}

input[type=number].circle-container {
    width: 50px !important;
    height: 50px !important;
    padding: 5px;
    border: 2px solid #9caca4;
    border-radius: 50%;
    text-align: center;
}

.justify-element {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

select {
    margin: 5px;
}

.very-small-width {
    width: 45px !important;
}

.small-width {
    width: 65px !important;
}

.medium-width {
    width: 100px;
}

.full-width {
    width: 100%;
}

.largedialog textarea {
    box-sizing: border-box;
    height: 65px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ui-dialog .charsheet input[type=number] {
    margin: 2px;
}

.tab ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    list-style: "";
}

.tab li {
    padding-left: 16px;
}

.tab li::before {
    content: "✦";
    padding-right: 8px;
    color: #2d4c45;
}

label {
    color: #2d4c45;
    text-align: center;
}

.frame {
    border: 2px solid #9caca4;
    min-width: 635px;
    border-radius: 20px;
    padding: 15px;
    margin: 10px;
    height: fit-content;
}

.no-frame {
    padding: 15px;
    min-width: 635px;
}

.toggle-button {
    background-color: white;
    border: 2px solid #9caca4;
    border-radius: 5px;
}

.side-padding {
    margin: 10px;
    padding: 0 15px;
}

.half-width {
    width: 45%;
    min-width: 0;
}

.separation-line {
    width: 100%;
    margin: 10px;
    border-bottom: 2px solid #9caca4;
}

.inline-display {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    white-space: nowrap;
}

/**** tabs handler ***/
/*Configure the tab buttons*/
.charsheet .sheet-character,
.charsheet .sheet-stats,
.charsheet .sheet-magic,
.charsheet .sheet-class,
.charsheet .sheet-notes {
    display: none;
}

/* show the selected tab */
.charsheet .sheet-tabstoggle[value="character"]~div.sheet-character,
.charsheet .sheet-tabstoggle[value="stats"]~div.sheet-stats,
.charsheet .sheet-tabstoggle[value="magic"]~div.sheet-magic,
.charsheet .sheet-tabstoggle[value="class"]~div.sheet-class,
.charsheet .sheet-tabstoggle[value="notes"]~div.sheet-notes {
    display: block;
}

/**** Traits *****/
.charTraits {
    margin: 5px;
    display: grid;
    grid-template-columns: repeat(12);
}

.charTraits * {
    margin: 5px;
    padding: unset;
    display: inline-flex;
}

.charTraits .name {
    grid-row: row;
    grid-column-start: 1;
    grid-column-end: 3;
}

.charTraits .identity {
    grid-column-start: 3;
    grid-column-end: 12;
    grid-row: row;
}

.charTraits .theme {
    grid-column-start: 1;
    grid-column-end: 6;
    grid-row: row 2;
}

.charTraits .origin {
    grid-column-start: 6;
    grid-column-end: 12;
    grid-row: row 2;
}


/**** Bonds *****/
.charBonds .grid {
    margin: 5px;
    display: grid;
    grid-template-columns: repeat(2, 50%);
    gap: 1px #2d4c45;
}

.bond {
    display: grid;
    grid-template-columns: 50% 25% 25%;
    margin: 5px;
}

.bond .name {
    grid-row: 1 / 5;
    padding: 5px;
}


/**** FABULA POINT *****/
.charFabula .grid {
    margin: 5px;
    display: grid;
    grid-template-areas:
        'input label label'
        'input info-left info-right';
    grid-template-columns: 75px 1.2fr 1fr;
}

.charFabula label {
    grid-area: label
}

.charFabula input {
    grid-area: input
}

.charFabula .info-left {
    grid-area: info-left
}

.charFabula .info-right {
    grid-area: info-right
}

/**** EXPERIENCE POINT *****/
.charExperience .grid {
    margin: 5px;
    display: grid;
    grid-template-areas:
        'input label'
        'input infos';
    grid-template-columns: 75px 1fr;
}

.charExperience label {
    grid-area: label
}

.charExperience input {
    grid-area: input
}

.charExperience div {
    grid-area: infos
}


/**** ATTRIBUTE *****/

.charAttribute {
    margin: 5px;
}

.charAttribute .grid {
    display: grid;
    grid-template-areas:
        'gird-dex gird-rage'
        'gird-ins gird-rage'
        'grid-migth gird-pois'
        'gird-will gird-pois';
    grid-template-columns: 1fr 0.25fr;
}

.innerGrid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
}

.charAttribute input[type="text"] {
    width: 65px;
}

.charAttribute.char-dex {
    grid-area: gird-dex
}

.charAttribute.char-ins {
    grid-area: gird-ins
}

.charAttribute.char-migth {
    grid-area: grid-migth
}

.charAttribute.char-will {
    grid-area: gird-will
}

.charAttribute.char-rage {
    grid-area: gird-rage;
    display: flex;
    align-items: center;
}

.charAttribute.char-pois {
    grid-area: gird-pois;
    display: flex;
    align-items: center;
}

select[name="attr_dexterity"],
select[name="attr_insight"],
select[name="attr_might"],
select[name="attr_willpower"] {
    width: 65px;
}


/**** GAUGE *****/

.magic,
.inventory {
    max-width: 70%;
}


.charGauges .grid {
    display: grid;
    align-items: center;
    grid-template-areas:
        'gird-hp gird-add-hp grid-crisis grid-current-hp'
        'grid-mp gird-add-mp empty gird-currrent-mp'
        'gird-ip gird-add-ip empty gird-currrent-ip';
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.gird-hp {
    grid-area: gird-hp;
}

.gird-add-hp {
    grid-area: gird-add-hp;
}

.grid-crisis {
    grid-area: grid-crisis;
}

.grid-current-hp {
    grid-area: grid-current-hp;
}

.grid-mp {
    grid-area: grid-mp;
}

.gird-add-mp {
    grid-area: gird-add-mp;
}

.gird-currrent-mp {
    grid-area: gird-currrent-mp;
}

.gird-ip {
    grid-area: gird-ip;
}

.gird-add-ip {
    grid-area: gird-add-ip;
}

.gird-currrent-ip {
    grid-area: gird-currrent-ip;
}

/*** DEFENSES ***/

.charDefenses .inline-display div {
    min-width: 15%;
}

.charDefenses .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

/*** ARMOR ***/

.charArmor input[type="text"] {
    width: 210px;
}

/**** WEAPON ***/

.repeating_weapons.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.weapon .repcontainer .repitem {
    width: 50%;
    display: -webkit-inline-box;
    padding: 15px;
}

/*** RITUAL ***/

.rituals .repcontainer .repitem {
    width: 25%;
    display: -webkit-inline-box;
    padding: 7px;
}


.sheet-rolltemplate-Magic .sheet-frame {
    border: 2px solid #9caca4;
    border-radius: 20px;
    padding: 10px;
    background-color: white;
}

.sheet-rolltemplate-Attack .sheet-frame {
    border: 2px solid #9caca4;
    border-radius: 20px;
    padding: 10px;
    background-color: white;

}

.sheet-rolltemplate-Skills .sheet-frame {
    border: 2px solid #9caca4;
    border-radius: 20px;
    padding: 10px;
    background-color: white;

}

.sheet-rolltemplate-Magic h3 {
    color: #2d4c45;
}

.sheet-rolltemplate-Skills h3 {
    color: #2d4c45;
}

.sheet-rolltemplate-Attack h3 {
    color: #2d4c45;
}

.sheet-rolltemplate-Magic h4 {
    color: #9caca4;
}

.sheet-rolltemplate-Skills h4 {
    color: #9caca4;
}

.sheet-rolltemplate-Attack h4 {
    color: #9caca4;
}

.sheet-rolltemplate-Attack h5 {
    color: black;
}

.sheet-rolltemplate-Attack .inlinerollresult {
    background-color: white !important;
}

.sheet-rolltemplate-Skills .inlinerollresult {
    background-color: white !important;
}