roll20-character-sheets-tester/Horror Movie World/hmwCSS.css

/*--hide tab until button is pressed*/

.sheet-character,
.sheet-basicmoves {
    display: none;
}


/* show the selected tab based on button click */

.sheet-tabstoggle[value="character"]~div.sheet-character,
.sheet-tabstoggle[value="basicmoves"]~div.sheet-basicmoves {
    display: grid;
}


/*--format toggle buttons--*/

.sheet-toggle-buttons {
    margin-bottom: 3em;
}


/*--hide radio buttons--*/

input.sheet-playbook-check[type="radio"] {
    display: none;
    order: 0;
}


/*--positioning for the character sheet grid--*/

.sheet-character {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(10px, auto);
    grid-gap: 10px;
}

.sheet-charname {
    grid-column-start: 1;
    grid-column-end: span 2;
    order: 1;
}

.sheet-charname {
    grid-column-start: 1;
    grid-column-end: span 2;
    order: 1;
}

.sheet-playbook-selector {
    grid-column-start: 3;
    grid-column-end: span 1;
    order: 2;
}

.sheet-looks {
    grid-column-start: 1;
    grid-column-end: span 1;
    order: 3;
}

.sheet-null {
    grid-column-start: 1;
    grid-column-end: span 3;
    text-align: center;
    order: 4;
    display: none;
}


/*-- positioning for the playbook grids --*/

div.sheet-virgin,
div.sheet-nerd,
div.sheet-chick,
div.sheet-jock,
div.sheet-scarred,
div.sheet-exorcist,
div.sheet-sheriff,
div.sheet-kid,
div.sheet-outcast,
div.sheet-professor {
    grid-column-start: 1;
    grid-column-end: span 3;
    order: 5;
    display: none;
    /*-- note this is set to none here. we turn it on with display grid using the auto show/hide block below--*/
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(20px, auto);
    grid-row-gap: 30px;
    grid-column-gap: 40px;
}


/*--auto show/hide playbooks--*/

input.sheet-playbook-check[type="radio"][value="0"]:checked~div.sheet-null,
input.sheet-playbook-check[type="radio"][value="1"]:checked~div.sheet-virgin,
input.sheet-playbook-check[type="radio"][value="2"]:checked~div.sheet-nerd,
input.sheet-playbook-check[type="radio"][value="3"]:checked~div.sheet-chick,
input.sheet-playbook-check[type="radio"][value="4"]:checked~div.sheet-jock,
input.sheet-playbook-check[type="radio"][value="5"]:checked~div.sheet-scarred,
input.sheet-playbook-check[type="radio"][value="6"]:checked~div.sheet-exorcist,
input.sheet-playbook-check[type="radio"][value="7"]:checked~div.sheet-sheriff,
input.sheet-playbook-check[type="radio"][value="8"]:checked~div.sheet-kid,
input.sheet-playbook-check[type="radio"][value="9"]:checked~div.sheet-outcast,
input.sheet-playbook-check[type="radio"][value="10"]:checked~div.sheet-professor {
    display: grid;
}

.sheet-playbook-header {
    grid-column-start: 1;
    grid-column-end: span 3;
}

.sheet-playbook-stats {
    grid-column-start: 1;
    grid-column-end: span 2;
}

.sheet-playbook-moves {
    grid-column-start: 1;
    grid-column-end: span 2;
}

.sheet-playbook-extras {
    grid-column-start: 1;
    grid-column-end: span 2;
}

.sheet-playbook-sidepanel {
    grid-column-start: 3;
    grid-column-end: span 1;
    grid-row-end: span 3;
    background-color: #efefef;
    border-style: solid;
    border-width: 0em 1em 1em 1em;
    border-color: #efefef;
}


/*--positioning for the basic move sheet grid--*/

.sheet-basicmoves {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(10px, auto);
    grid-row-gap: 30px;
    grid-column-gap: 40px;
}

.sheet-basicmoves-title {
    grid-column: span 2;
}

.sheet-basic-move-description {
    grid-column: span 1fr;
    grid-row: span 1fr;
}


/*--other formatting--*/

.sheet-looks textarea {
    height: 1.5em;
    width: 18em;
    vertical-align: middle;
}

.sheet-playbook-feartrack {
    vertical-align: middle;
}

label {
    display: inline;
    font-size: inherit;
    font-weight: normal;
    padding: inherit;
}

.sheet-playbook-relationships input[type="text"] {
    width: 10em;
    height: 1.5em;
}

.sheet-playbook-relationships li {
    margin-bottom: 2em;
}

hr {
    margin-top: 0.25em;
    margin-bottom: 1em;
}

.sheet-character h1 {
    margin-top: 1.5em;
}

button[type=roll].sheet-d6-dice::before {
	font-family: 'dicefontd6';
	content: 'F ';
}