.charsheet { font-family: "cursive", "serif"; background-color: white; } label input[type=checkbox] { margin-right: 0.5em; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; } input[type="text"] { text-align: center; } button[type="roll"]:before { float: left; } .sheet-inventory, .sheet-actions, .sheet-feats, .sheet-perks, .sheet-flaws { position: relative; } .repcontainer:not(:empty) { border: 2px solid gray; border-radius: 0.7em; } .repcontrol { position: absolute; top: 1em; } .sheet-actions .repcontrol { top: 2.5em; left: 30%; } .sheet-inventory .repcontrol { left: 30%; top: 2.5em; } .repcontrol .repcontrol_edit, .repcontrol .repcontrol_add { width: 1.5em; font-family: "pictos"; padding: 0; color: transparent; background: transparent; border: 0; box-shadow: none; float: none; text-shadow: none; overflow: hidden; } .repcontrol .repcontrol_edit:before { color: black; content: "("; font-size: 1.2em; } .repcontrol .repcontrol_add:before { color: green; content: "+"; font-size: 1.2em; } .editmode ~ .repcontrol .repcontrol_edit:before { color: red; content: ")"; } .repitem { padding: 3%; border-radius: 0.5em; } .repitem:nth-child(odd) { background-color: #EEE; } .sheet-advantage-disadvantage { background-color: #CCC; margin: 2em auto; } .sheet-advantage-disadvantage .sheet-labels { background-color: #AAA; font-size: 1.2em; font-weight: bold; line-height: 1em; border-top-right-radius: 1em; border: 2px solid black; border-bottom: 0; } .sheet-advantage-disadvantage .sheet-labels, .sheet-advantage-disadvantage .sheet-inputs { display: flex; justify-content: space-between; } .sheet-advantage-disadvantage .sheet-labels div { flex: 1 1; padding: 1em 0.7em; height: auto; } .sheet-labels div:first-child:before { font-family: "wingdings 3"; content: "i"; padding-right: 1em; } .sheet-labels div:last-child:after { font-family: "wingdings 3"; content: "i"; padding-left: 1em; } .sheet-advantage-disadvantage .sheet-labels div:last-child { text-align: right; } .sheet-advantage-disadvantage .sheet-inputs div { flex: 1 1; display: flex; flex-direction: column; position: relative; background-color: #DDD; } .sheet-advantage-disadvantage .sheet-inputs div:nth-child(1) { background-color: indianred; } .sheet-advantage-disadvantage .sheet-inputs div:nth-child(15) { background-color: mediumseagreen; } .sheet-advantage-disadvantage .sheet-inputs input, .sheet-advantage-disadvantage .sheet-inputs label { flex: 1 1; display: block; margin: 0 auto; text-align: center; font-size: 2em; padding: 0.5em 0; } .sheet-advantage-disadvantage .sheet-inputs input:checked ~ label { background-color: gold; } .sheet-advantage-disadvantage { position: absolute; font-size: 0.7em; top: 0.5em; padding-top: 1em; background: transparent; width: 100%; z-index: 1000; display: none; } .sheet-advantage-disadvantage .sheet-inputs { background: white; border-bottom-left-radius: 1.2em; border-bottom-right-radius: 1.2em; border: 2px solid black; border-top: 0; overflow: hidden; } .sheet-advantage-disadvantage .sheet-inputs input { width: auto; opacity: 0; position: absolute; left: 25%; height: 100%; } button:hover ~ .sheet-advantage-disadvantage, .sheet-advantage-disadvantage:hover { display: flex; flex-direction: column; } .sheet-character-header { min-width: 60em; } .sheet-character-header input { background: transparent; border: none; border-bottom: 2px solid black; border-radius: 0; box-shadow: none; color: darkgoldenrod; font-weight: bold; font-size: 1.1em; height: 1.5em; text-align: left; } .sheet-character-header input[type="number"] { text-align: center; } .sheet-field-row { display: flex; flex-direction: row; } .sheet-field { display: flex; flex-direction: row; flex: 1 1 30%; min-width: 0; padding-right: 2%; } .sheet-field label { flex: 0 1; } .sheet-field input { flex: 1 3; width: 3em; } .sheet-banner { display: flex; width: 100%; } .sheet-info { flex: 1 1 75%; max-width: 75%; } .sheet-logo { background: url(http://www.openlegendrpg.com/assets/img/open_legend_lg_logo.png) center right no-repeat; background-size: contain; flex: 1 0 25%; } .sheet-configuration { position: relative; } .sheet-configuration .sheet-option-toggle { opacity: 0; position: absolute; right: 0; width: 1.5em; z-index: 2; } .sheet-configuration .sheet-option-toggle-label { position: absolute; right: 0; font-family: "pictos"; font-size: 1.5em; } .sheet-configuration > div { height: 2em; margin: 0; text-align: right; width: 97%; } .sheet-byline { color: darkgray; } .sheet-options label { text-align: right; font-size: 1em; } .sheet-options label input { margin-top: -0.1em; } .sheet-configuration .sheet-options { display: none; } .sheet-configuration .sheet-option-toggle:checked ~ .sheet-byline { display: none; } .sheet-configuration .sheet-option-toggle:checked ~ .sheet-options { display: block; } .sheet-character-body { display: flex; width: 100%; } .sheet-character-body > div { display: flex; flex: 1 1 60%; flex-direction: column; min-width: 0; } .sheet-character-body .sheet-attributes-block { background-color: #EEE; flex: 1 1 40%; margin-right: 1em; padding: 1em; min-width: 25em; } .sheet-section-header .sheet-header-field { font-size: 0.7em; margin: 0 auto; text-align: center; width: 36%; } .sheet-header { font-size: 2em; margin: 0.5em 0; text-align: center; } .sheet-section-header label { display: inline-block; margin: 0; padding-right: 3%; text-align: right; white-space: nowrap; width: 60%; } .sheet-section-header input { display: inline-block; height: 1.5em; width: 3em !important; /* required due to overly specific Roll20 defaults */ } .sheet-attributes .repitem { margin: 0; padding: 0; } .sheet-attributes .sheet-header { background: #CCC; margin: 0 auto 0.5em; padding: 0.2em; } .sheet-attribute-group { display: flex; flex-direction: row; } .sheet-attribute-group button[type="roll"] { text-align: right; } .sheet-attribute-group-header { background: #CCC; display: block; font-size: 1.5em; margin-top: 5%; padding: 1% 5%; width: 90%; } .sheet-attribute-group-labels { display: flex; } .sheet-attribute-group { display: flex; flex-direction: column; } .sheet-attribute-group .sheet-attribute-row { display: flex; flex: 1 1; font-weight: bold; justify-content: flex-end; position: relative; text-align: center; } .sheet-attribute-group .sheet-attribute-row > div:first-child { min-width: 50%; text-align: left; } .sheet-attribute-group .sheet-attribute-row > div { flex: 1 1; margin-bottom: 1em; } .sheet-attribute-group .sheet-attribute-row > div:last-child { min-width: 20%; } .sheet-attribute-group .sheet-attribute-row > div:last-child input { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; height: 2.1em; margin-right: -5px; text-align: right; width: 2.5em; -webkit-appearance: none; } .sheet-attribute-group select, .sheet-attribute-group input { border: 1px solid gray; } .sheet-attribute-group select { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 0; height: 2.1em; vertical-align:top; line-height: 1em; margin: 0; width: 2.5em; -webkit-appearance: none; -moz-appearance: none; } .sheet-attribute-group input { text-align: center; } .sheet-attribute-group .sheet-dice input { width: 2.5em !important; } .sheet-inventory .repeating_inventory, .sheet-inventory .repitem { display: flex; } .sheet-inventory .repeating_inventory > div, .sheet-inventory .repitem > div { display: flex; flex: 1 1 20%; flex-direction: column; justify-content: center; } .sheet-inventory .repeating_inventory > .sheet-text-field, .sheet-inventory .repitem > .sheet-text-field { flex-basis: 80%; } .sheet-inventory .repeating_inventory label, .sheet-inventory .repitem label { flex: 1 1; margin: 0; } .sheet-inventory .repeating_inventory textarea, .sheet-inventory .repitem textarea { flex: 1 1; margin: 0em 0.5em; min-width: 0; height: auto; width: 90%; } .sheet-stats { flex: none; } .sheet-actions, .sheet-feats-perks-flaws, .sheet-inventory { border-top: 2px solid black; min-width: 32em; padding: 1.5em 0; } .sheet-stats { display: flex; } .sheet-stats > div { flex: 1 1; display: flex; min-width: 19em; flex-direction: column; justify-content: flex-start; width: 50%; } .sheet-defenses > div { flex: 1 1 50%; display: flex; padding: 0.5em 0; text-align: center; } .sheet-defenses > div > div { flex: 1 1; display: flex; justify-content: center; flex-direction: column; margin: 1em; } .sheet-defenses .sheet-score { margin-right: 0; border: 2px solid gray; min-height: 8.3em; min-width: 8em; } .sheet-defenses .sheet-components { margin: 1.7em; margin-left: -2px; min-height: 7em; border: 2px solid gray; border-left: 0; } .sheet-score label { text-align: center; } .sheet-score input { border: 0; border-radius: 0; box-shadow: none; font-size: 3em; margin: 0 auto; padding: 0; text-align: center; width: 2em !important; /* required due to overly specific Roll20 defaults */ } .sheet-components div { font-size: 0.7em; text-align: left; min-width: 13em; } .sheet-components label { display: inline-block; margin: 0; padding-right: 3%; text-align: right; white-space: nowrap; width: 45%; } .sheet-components input { border: 0; border-bottom: 2px solid black; border-radius: 0; box-shadow: none; display: inline-block; height: 1.5em; text-align: center; width: 3em !important; /* required due to overly specific Roll20 defaults */ } .sheet-other { display: flex flex-direction: column; } .sheet-other > div { flex: 1 0 20%; padding: 0 2em; align-items: center; } .sheet-other label { font-size: 1em; margin-bottom: 0.25em; margin-top: 0.3em; } .sheet-other .sheet-score input { font-size: 2.5em; } .sheet-other > .sheet-hitpoints { padding-top: 2em; border: 2px solid gray; margin: 1em; } .sheet-hitpoints > div { display: flex; justify-content: center; } .sheet-hitpoints .sheet-header { margin-top: 0; } .sheet-hitpoints .sheet-score:not(:last-child) input { border-right: 1px solid black; } .sheet-lethal input { color: red; } .sheet-lp-speed { display: flex; justify-content: center; text-align: center; } .sheet-lp-speed > div { flex: 1 1; border: 2px solid gray; margin: 0.2em; padding: 1em 0; } .sheet-wealth { text-align: center; width: 10em; margin: 0 auto; } .sheet-wealth > div { border: 2px solid gray; margin: 0.2em; padding: 1em 0; } .sheet-actions .repeating_actions, .sheet-actions .repitem { display: flex; flex-direction: column; } .sheet-actions .repeating_actions > div, .sheet-actions .repitem > div { flex: 1 1; display: flex; width: 101%; } .sheet-actions .repeating_actions > div > div, .sheet-actions .repitem > div > div { line-height: 2em; margin-right: 1%; } .sheet-actions .repeating_actions .sheet-is-bane, .sheet-actions .repitem .sheet-is-bane, .sheet-actions .repeating_actions .sheet-is-boon, .sheet-actions .repitem .sheet-is-boon { display: none; } .sheet-actions .repeating_actions .sheet-is-boon input, .sheet-actions .repitem .sheet-is-boon input { height: 2.2em; width: 3em; } .sheet-actions input[value="bane"] ~ .sheet-is-bane { display: flex; } .sheet-actions input[value="boon"] ~ .sheet-is-boon { display: flex; } .sheet-actions .repeating_actions input, .sheet-actions .repitem input { flex: 1 1; min-width: 0; width: 10.5em; } .sheet-actions .repeating_actions select, .sheet-actions .repitem select { flex: 1 1; min-width: 0; width: auto; } .sheet-actions .repeating_actions button[type="roll"], .sheet-actions .repitem button[type="roll"] { width: 1.35em; height: 1.5em; text-align: right; } .sheet-action-info .sheet-text-field { flex: 1 1; } .sheet-action-info .sheet-text-field input { width: 100%; } .sheet-action-details > div { display: flex; } .sheet-actions .repeating_actions .sheet-action-details, .sheet-actions .repitem .sheet-action-details { position: relative; } .sheet-actions .repeating_actions .sheet-action-details .sheet-text-field, .sheet-actions .repitem .sheet-action-details .sheet-text-field { flex: 1 1; } .sheet-actions .repeating_actions .sheet-text-field.sheet-dice, .sheet-actions .repitem .sheet-text-field.sheet-dice { flex: none; } .sheet-actions .repeating_actions .sheet-action-details input, .sheet-actions .repitem .sheet-action-details input { width: auto; } .sheet-actions .repeating_actions .sheet-dice input[type="number"], .sheet-actions .repitem .sheet-dice input[type="number"] { border: 1px solid gray; border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; flex: none; height: 2.1em; margin-right: -5px; text-align: right; width: 2.5em; -webkit-appearance: none; -moz-appearance: none; } .sheet-actions .repeating_actions .sheet-dice select, .sheet-actions .repitem .sheet-dice select { border: 1px solid gray; border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 0; flex: none; height: 2.1em; line-height: 1em; margin: 0; width: 2.5em; -webkit-appearance: none; } .sheet-actions input[type="text"] { text-align: left; } .sheet-feats-perks-flaws { display: flex; } .sheet-feats-perks-flaws fieldset, .sheet-feats-perks-flaws .repitem { display: flex; } .sheet-feats-perks-flaws fieldset .sheet-text-field, .sheet-feats-perks-flaws .repitem .sheet-text-field { flex: 1 1; } .sheet-feats-perks-flaws .sheet-text-field textarea { flex: 1 1; margin: 0em 0.5em; min-width: 0; height: auto; width: 90%; } .sheet-feats { flex: 2 1; margin-right: 3%; } .sheet-perks-flaws { flex: 1 0; display: flex; flex-direction: column; justify-content: flex-start; } .sheet-perks-flaws > div { flex: 1 1; } .sheet-feats .sheet-section-header { display: flex; } .sheet-feats .sheet-section-header > div { flex: 1 1; } .sheet-feats .sheet-section-header .sheet-header-field { margin: 0; text-align: left; width: 100%; } .sheet-perks-flaws input[type="text"] { text-align: left; } .sheet-feats input[type="number"] { text-align: center; height: 100%; } /* Roll Template Styles */ .sheet-rolltemplate-olmin-attr table { background-color: white; border: 2px solid black; border-top: 0; border-spacing: 0; width: 100%; } .sheet-rolltemplate-olmin-attr caption { background-color: #CCC; border: 2px solid black; border-bottom: 1px solid black; font-size: 1.5em; font-weight: bold; line-height: 1.5em; } .sheet-rolltemplate-olmin-attr td { text-align: center; } .sheet-rolltemplate-olmin-attr .sheet-roll { font-size: 5em; line-height: 1.1em; padding-bottom: 0.25em; } /* Override the default inline roll coloration */ .sheet-rolltemplate-olmin-attr .inlinerollresult { background-color: transparent !important; border: 0 !important; } .sheet-rolltemplate-olmin-attr .sheet-pl { background-color: darkgray; color: black; display: flex; justify-content: center; padding: 0.5em; } .sheet-rolltemplate-olmin-attr .sheet-pl span:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; } .sheet-rolltemplate-olmin-attr .sheet-pl span { background-color: transparent; color: gray; flex: 1 0; font-size: 1.25em; line-height: 1.5em; } .sheet-rolltemplate-olmin-attr .sheet-pl .sheet-pl-pass { background-color: limegreen; color: black; } .sheet-rolltemplate-olmin-attr .sheet-pl .sheet-pl-limit, .sheet-rolltemplate-olmin-attr .sheet-pl .sheet-pl-pass:last-child { background-color: gold; border-top-right-radius: 10px; border-bottom-right-radius: 10px; color: black; } .sheet-rolltemplate-olmin-attr .sheet-table { background-color: white; border: 2px solid black; border-top: 2px solid black; border-spacing: 2px; width: 100%; text-align: center; } .sheet-rolltemplate-olmin-attr .sheet-table .sheet-template-name { background-color: #CCC; border-bottom: 1px solid black; font-size: 1.5em; font-weight: bold; line-height: 1.5em; } textarea { resize: vertical; min-height: 1.35em; }