.sheet-main { display: grid; width: 800px; height: 900px; grid-gap: 4px; grid-template-columns: 1fr 1fr; grid-template-rows: 130px 1fr 1fr 1fr; grid-template-areas:"header header" "attributes saves" "lactions ractions" "equipment loot" "spells spells"; } .sheet-npc { display: grid; grid-gap: 4px; grid-template-columns: 1fr 1fr; } .sheet-section { padding: 5px; border-style: solid; } .sheet-inner-section { padding: 5px; } /** SECTION LISTING **/ .sheet-header { grid-area: header; /*background-color: olive;*/ } .sheet-attributes { grid-area: attributes; /*background-color: orange;*/ } .sheet-saves { grid-area: saves; /*background-color: brown;*/ } .sheet-lactions { grid-area: lactions; /*background-color: coral;*/ } .sheet-ractions { grid-area: ractions; /*background-color: green;*/ } .sheet-spells { grid-area: spells; /*grid-column: 1 / span 2;*/ } /** INNER GRIDS **/ div.sheet-grid-container-2col { display: grid; grid-template-columns: 1fr 1fr; } div.sheet-header-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 30px 1fr; row-gap: 5px; column-gap: 5px; } div.sheet-header-field-grid { padding: 5px 15px; display: grid; grid-template-columns: 80px 1fr; } div.sheet-stat-grid { display: grid; grid-template-columns: 50px 50px 50px 50px; row-gap: 5px; } div.sheet-stat2-grid { display: grid; grid-template-columns: 1fr 1fr; row-gap: 5px; column-gap: 5px; } div.sheet-movement-grid { display: grid; grid-template-columns: 1fr 1fr; row-gap: 5px; } div.sheet-saves-grid { display: grid; grid-template-columns: 100px auto auto auto; row-gap: 5px; column-gap: 10px; } div.sheet-attacks-grid { display: grid; grid-template-columns: 1fr 50px 50px 50px; row-gap: 5px; column-gap: 10px; margin-bottom: 5px; } div.sheet-hitdie-grid { display: grid; grid-template-columns: 1fr 50px 80px 50px; row-gap: 5px; column-gap: 10px; margin-bottom: 5px; } div.sheet-proficiencies-grid { display: grid; grid-template-columns: 1fr 50px 50px; row-gap: 5px; column-gap: 10px; margin-bottom: 5px; } div.sheet-equipment-grid { display: grid; grid-template-columns: 1fr 75px; row-gap: 5px; column-gap: 10px; margin-bottom: 5px; } div.sheet-currency-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; row-gap: 5px; column-gap: 10px; } div.sheet-spells-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; row-gap: 5px; column-gap: 10px; margin-bottom: 5px; } /** GENERAL ELEMENT STYLE **/ input.sheet-line-input { width: 214px!important; border: 0; outline: 0; border-bottom: 1px solid black; background: rgba(0, 0, 0, 0.0); border-radius: 0px; } input.sheet-name-input { width: 100%; } div.sheet-spells-grid span { text-align: center; } div.sheet-spells.grid input { padding-left: 50px; margin-left: 50px; } .sheet-stat-input { width: 100%; text-align: center; background: rgba(255, 255, 255, 0.25); } .sheet-stat-span { text-align: center; text-transform: uppercase; font-weight: bold; font-size: 16px; font-family: "Candal"; } .sheet-initiative-span { font-weight: bold; font-size: 18px; grid-column: 1 / span 2; } input.sheet-currency-input { font-size: 11px; width: 60px!important; } input.sheet-spells-input { width: 60px!important; margin-left: 22px; } .sheet-text-center { text-align: center; } .sheet-title-line { font-weight: bold; font-size: 18px; } .sheet-textarea { outline: 0; border-radius: 0; box-sizing: content-box; background-color: rgba(255, 255, 255, 0.3); overflow-y: hidden; padding: 10px; max-width: 90%; resize: none; } .sheet-roll-button { font-size: 1.6em; border-radius: 0.25em; } .sheet-header-field-grid select { margin: 5px 0px; } .sheet-header-field-grid span { margin: 5px 0px; } .sheet-hidden { display: none; } .sheet-margin-top { margin-top: 35px; } .sheet-grid-span-1-2 { grid-column: 1 / span 2; } .sheet-grid-span-4-2 { grid-column: 4 / span 3; } input.sheet-input-big { width: 55px!important; } /** INDIVIDUAL ELEMENT STYLES **/ .sheet-system-title { margin-bottom: 10px; } .sheet-stat-title { text-align: center; grid-column: 1 / span 4; } .sheet-movement-title { text-align: center; grid-column: 1 / span 2; } .sheet-saves-title { text-align: center; grid-column: 1 / span 4; } .sheet-attack-title { text-align: center; grid-column: 1 / span 4; margin-top: 10px; } .sheet-proficiency-title { text-align: center; grid-column: 1 / span 3; margin-top: 25px; } .sheet-equipment-title { text-align: center; grid-column: 1 / span 2; } .sheet-currency-title { text-align: center; grid-column: 1 / span 5; margin-top: 25px; } .sheet-spells-title { text-align: center; grid-column: 1 / span 9; } .sheet-exp-title { text-align: center; grid-column: 1 / span 5; } .sheet-hp-span { font-size: 28px; text-align: center; text-transform: uppercase; font-weight: bold; vertical-align: bottom; grid-column: 1 / span 2; } .sheet-hp-input { width: 75%; float: right; } .sheet-ac-wrapper { grid-column: 1 / span 2; text-align: center; } .sheet-hp-mod-input { width: 75%; float: left; } .sheet-ac-input { width: 50%; } .sheet-exp-current { grid-column: 1 / span 2; } .sheet-exp-needed { grid-column: 3 / span 2; } .sheet-exp-current > input, .sheet-exp-needed > input { width: 150px; } .sheet-lootbox { grid-column: 1 / span 5; } div.sheet-npc-rsection, div.sheet-npc-lsection { padding: 5px; border: 4px solid black; border-radius: 4px; margin-left: 10px; } .sheet-spells-grid-daily > input { text-align: center; } .sheet-total-encumb-display { text-align: center; grid-column: 1 / span 2; margin-bottom: 15px; } /** Roll Templates **/ .sheet-rolltemplate-acks {} .sheet-rolltemplate-acks div.sheet-acks-container { border: 2px solid #333; border-radius: 3px; margin-right: 5px; box-shadow: 5px 5px 5px 0px #9B9DA3; } .sheet-rolltemplate-acks div.sheet-acks-header { background-color: rgb(123, 62, 136); border-bottom: 1px solid #333; padding: 4px; line-height: 1.4em; font-size: 1.2em; font-weight: bold; color: #F2EBEB; text-align: center; } .sheet-rolltemplate-acks div.sheet-acks-charname { background-color: rgb(123, 62, 136); padding-top: 5px; line-height: 1.0em; font-size: 0.85em; color: #F2EBEB; text-align: center; } .sheet-rolltemplate-acks div.sheet-acks-subheader { font-weight: bold; text-align: center; color: rgb(112, 32, 130); font-size: 1.1em; } .sheet-rolltemplate-acks div.sheet-acks-row { padding: 10px; line-height: 1.0em; font-size: 0.8em; } .sheet-rolltemplate-acks div.sheet-acks-row:not(.sheet-acks-desc) .inlinerollresult { float: right; } .sheet-rolltemplate-acks div.sheet-acks-row .sheet-acks-target-value { float: right; border: none; background-color: transparent; color: green; } .sheet-rolltemplate-acks div.sheet-acks-row:nth-child(odd) { background-color: rgba(217, 217, 214, 1); } .sheet-rolltemplate-acks div.sheet-acks-row:nth-child(even) { background-color: rgba(233, 233, 233, 1); } .sheet-rolltemplate-acks div.sheet-acks-desc { font-size: 0.8em; line-height: 1.5em; color: rgb(115, 115, 115); } div.sheet-main { display: grid; } div.sheet-npc { display: none; } /*input.sheet-block-switch { display: none; };*/ input.sheet-block-switch:checked ~ div.sheet-main { display: none; } input.sheet-block-switch:checked ~ div.sheet-npc { display: grid; } textarea.sheet-txtarea { height: 24px; margin: 0; padding: 0; text-align: left; } input.sheet-hd-checkbox { -webkit-appearance: none; -moz-appearance: none; border: 1px solid #888; width: 10px; height: 10px; overflow: hidden; } input.sheet-hd-checkbox:checked { background-color: #aaa; }