@import url('https://fonts.googleapis.com/css?family=IM+Fell+English|Inknut+Antiqua&display=swap'); /* announcements */ .charsheet .announcements-show { background-color: #ffffea; border: 2px solid black; border-radius: 5px; float: right; font-size: 0.85em; margin: -3.25em 0 0 -5em; padding: 0 4px 0 4px; position: relative; } /* dark mode */ .sheet-darkmode .tab-content .tab-pane { background-color: #1f1f1f; } .sheet-darkmode .tab-content .charsheet .wrapper .character, .sheet-darkmode .tab-content .charsheet .wrapper .stronghold, .sheet-darkmode .tab-content .charsheet .wrapper .settings { background-color: #333; } .sheet-darkmode .tab-content .charsheet .wrapper * { background-color: transparent; color: #e1e1e1; font-weight: normal; } .sheet-darkmode .tab-content .charsheet .wrapper input[type="checkbox"].input { background-color: #999; outline: 1px solid #fff; } .sheet-darkmode .tab-content .charsheet .wrapper input[type="checkbox"].input::after { color: #fff; font-size: 1.4em; top: -9px; } .sheet-darkmode .tab-content .charsheet .wrapper .header, .sheet-darkmode .tab-content .charsheet .wrapper .header ~ .column-header, .sheet-darkmode .tab-content .charsheet .wrapper .header ~ .column-header span { background-color: #0d0d0d; color: #d9d9d9; } .sheet-darkmode .tab-content .charsheet .wrapper .header h1, .sheet-darkmode .tab-content .charsheet .wrapper .heading-grid, .sheet-darkmode .tab-content .charsheet .wrapper .stronghold-details-box1, .sheet-darkmode .tab-content .charsheet .wrapper .stronghold-details-grid, .sheet-darkmode .tab-content .charsheet .wrapper .conditions-box1 img, .sheet-darkmode .tab-content .charsheet .wrapper .heading-box7 img { background-color: transparent; } .sheet-darkmode .tab-content .charsheet .wrapper .repcontrol_add:hover, .sheet-darkmode .tab-content .charsheet .wrapper .repcontrol_edit:hover, .sheet-darkmode .tab-content .charsheet .wrapper .repcontrol_del:hover { background-color: revert; } .sheet-darkmode .tab-content .charsheet .wrapper button { color: inherit; } .sheet-darkmode .tab-content .charsheet .wrapper .font-color-initial, .sheet-darkmode .tab-content .charsheet .wrapper .font-color-initial * { color: initial; } .sheet-darkmode .tab-content .charsheet .wrapper input.dice-selection:hover + span + .font-color-initial { color: #fff; } .sheet-darkmode .tab-content .charsheet .wrapper button.rollme-relative span, .sheet-darkmode .tab-content .charsheet .wrapper button.rollme-relative, .sheet-darkmode .tab-content .charsheet .wrapper button.rollme-relative::before, .sheet-darkmode .tab-content .charsheet .wrapper button.rollme span, .sheet-darkmode .tab-content .charsheet .wrapper button.rollme, .sheet-darkmode .tab-content .charsheet .wrapper button.rollme::before, .sheet-darkmode .tab-content .charsheet .wrapper .skills-row button[type="roll"].rollme span, .sheet-darkmode .tab-content .charsheet .wrapper .skills-row button[type="roll"].rollme, .sheet-darkmode .tab-content .charsheet .wrapper .skills-row button[type="roll"].rollme::before { color: #fff; background-color: #a60100; background-image: none; opacity: 1; } .sheet-mode .tab-content .charsheet .wrapper button.roll-button-textonly:hover span { color: #fff; } .sheet-darkmode .tab-content .charsheet .wrapper .dice-base *, .sheet-darkmode .tab-content .charsheet .wrapper .dice-base { background-color: #888; } .sheet-darkmode .tab-content .charsheet .wrapper .dice-skill *, .sheet-darkmode .tab-content .charsheet .wrapper .dice-skill { background-color: #4b0c0c; } .charsheet span.announcements-show::before { content: "v"; } .charsheet span.announcements-show::after { content: "l"; font-family: pictos; padding-left: 4px; } .charsheet input.announcements-show { height: 1.75em; margin: -3.25em 0 0 -5em; opacity: 0; width: 4.75em; z-index: 1; } .announcements-exit { float: right; font-family: pictos; font-size: 1em; margin: 0.5em 0 0 0; position: relative; } .charsheet input.announcements-show:hover + span, .charsheet input.monster_only:checked ~ div.character input[type="checkbox"].extra-damage-show:hover { color: #a60100; opacity: 1; } .charsheet input[type="checkbox"].announcements-older-show, .charsheet input[type="checkbox"].armor-show-more { float: right; height: 1em; margin: -1.1em 0 0 0; opacity: 0; position: relative; width: 1.5em; z-index: 1; } .charsheet input.announcements-older-show:hover + span, .charsheet input.armor-show-more:hover + span { border-left-color: #a60100; } .charsheet .wrapper input[type="checkbox"].announcements-older-show + span, .charsheet .wrapper input[type="checkbox"].armor-show-more + span { -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; border: 0.4em solid transparent; border-left-color: #c0a748; border-width: 0.4em 0.6em; content: ""; float: right; height: 0; margin: -1em 0 0 0; position: relative; text-align: center; transform-origin: 25% 50%; transition: all 0.3s ease; width: 0; background-color: transparent; } .charsheet input.announcements-older-show:checked + span, .charsheet input.armor-show-more:checked + span { transform: rotate(90deg); } .charsheet .announcements-show:not(:checked) + span + div.announcements, .charsheet .announcements-older-show:not(:checked) ~ .announcements-older-show, .charsheet input.armor-show-more:not(:checked) ~ .armor-show-more { display: none; } .charsheet .announcements-older-show:checked + span ~ .announcements-older-show, .charsheet input.armor-show-more:checked + span ~ .armor-show-more { border: 1px solid #000; border-radius: 5px; box-sizing: border-box; color: #333; display: block; margin: 2em; padding: 1em; } /* Hide actual checkbox */ .charsheet input.monster_only:checked ~ div.character input[type="checkbox"].extra-damage-show { cursor: pointer; margin: 1em 0 0 -18em; opacity: 0.25; position: absolute; z-index: 1; } .charsheet input.monster_only:checked ~ div.character input[type="checkbox"].extra-damage-show:checked { display: flex; margin: -1.5em 0 0 -18em; padding: 2px 0 0 0; } .charsheet input.monster_only:checked ~ div.character input[type="checkbox"].extra-damage-show:not(:checked) ~ .attributes-box4 > .extra-damage-show, .charsheet input.monster_only:checked ~ div.character input[type="checkbox"].extra-damage-show:not(:checked) ~ .attributes-box4 > .extra-damage-show + span, .charsheet input.monster_only:checked ~ div.character input[type="checkbox"].extra-damage-show:not(:checked) ~ .attributes-box4 > .extra-damage-show + span::before { display: none; } .charsheet .announcements, .charsheet .settings-options { background-color: #ffffea; border: 2px solid #000; border-radius: 5px; margin: 0 0.5em 4em 0.5em; padding: 1em 0.5em 2em 0.5em; } /* Text */ .charsheet body { font-family: "IM Fell English", "Times New Roman", Times, serif; } .charsheet h1 { color: #fff; cursor: default; font-family: "IM Fell English", "Times New Roman", Times, serif; font-size: 1.1em; font-weight: normal; letter-spacing: 0.0625em; margin: -16px 0 0 0; z-index: 0; } .charsheet .header-h1 { color: #000; cursor: default; font-family: "IM Fell English", "Times New Roman", Times, serif; font-size: 1.2em; font-weight: bold; letter-spacing: 0.0625em; z-index: 0; } .charsheet hr.horizontal-rule { border-color: #000; border-radius: 5px; border-style: solid; border-width: 1px 0 0 0; height: 10px; margin-bottom: 0; margin-top: 10px; overflow: visible; width: 90%; } .charsheet hr.horizontal-rule::before { border-color: #000; border-radius: 5px; border-style: solid; border-width: 0 0 1px 0; content: ""; display: block; height: 10px; margin-top: -11px; } .charsheet .header { align-items: center; background-color: #000; color: #fff; display: flex; font-weight: bold; justify-content: center; margin: 0 -6px 0 -6px; min-height: 2.85em; } .charsheet .column-header { align-items: center; background-color: #000; color: lightgrey; display: flex; font-size: 0.95em; font-variant-caps: small-caps; justify-content: center; justify-self: center; line-height: 0.9em; padding: 0; text-align: center; } .charsheet .header ~ .column-header span { cursor: default; padding: 1.5em 0 0 0; } .charsheet .footer { display: block; font-size: 0.95em; margin: -15px 0 0 -10px; text-align: right; } .charsheet .label { color: #333; font-size: 1em; font-weight: bold; } .charsheet .header .label { color: white; font-weight: normal; } .charsheet .small-caps { font-variant-caps: small-caps; } .charsheet .equal { margin: 4px 1px 0 1px; text-align: center; } .charsheet .left, .charsheet .grid-item.left { text-align: left; } .charsheet .right, .charsheet .grid-item.right { justify-self: right; text-align: right; } .charsheet .center, .charsheet .grid-item.center { align-self: center; text-align: center; } .charsheet span.readonly, .charsheet input.monster_only:checked ~ div.character .monster + span.monster.readonly { color: #555; cursor: help; display: flex; font-size: 24px; justify-content: center; justify-self: center; line-height: .85em; padding: 2px 0 0 0; width: 1em; } /* Hide actual radio */ .charsheet input.skull[type="radio"] { border-radius: 0; flex: auto; height: 15px; left: 4.75%; margin: 0 0 0 -10px; position: relative; top: -1px; width: 15px; z-index: 1; } .charsheet input.skull + span { border-radius: 0; flex: auto; height: 15px; margin: 0 0 0 -10px; position: relative; top: -3px; width: 15px; z-index: 0; } /* Fake radio using skull */ .charsheet input.skull[type="radio"] + span::before { background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/skull_empty.png); content: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/skull_checked.png); display: inline-block; font-size: 24px; height: 15px; line-height: 14px; margin: 0 3px 0 3px; text-align: center; vertical-align: middle; width: 15px; } /* Removes skull from all radios _after_ selected one */ .charsheet input[type="radio"]:checked ~ input.skull[type="radio"] + span::before, .charsheet input.skull[type="radio"]:checked ~ input.skull[type="radio"] + span::before { content: ""; } .charsheet input[type="radio"]:checked ~ input.skull[type="radio"]:hover + span::before, .charsheet input.skull[type="radio"]:checked ~ input.skull[type="radio"]:hover + span::before { content: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/skull_checked.png'); opacity: 0.50; } /* Only show skulls up to the attributes max value */ .charsheet input[name="attr_strength"][value="1"] ~ input.skull:nth-of-type(1n+4) + span::before, .charsheet input[name="attr_strength"][value="0"] ~ input.skull:nth-of-type(1n+3) + span::before, .charsheet input[name="attr_strength"][value="2"] ~ input.skull:nth-of-type(1n+5) + span::before, .charsheet input[name="attr_strength"][value="3"] ~ input.skull:nth-of-type(1n+6) + span::before, .charsheet input[name="attr_strength"][value="4"] ~ input.skull:nth-of-type(1n+7) + span::before, .charsheet input[name="attr_strength"][value="5"] ~ input.skull:nth-of-type(1n+8) + span::before, .charsheet input[name="attr_strength"][value="6"] ~ input.skull:nth-of-type(1n+9) + span::before, .charsheet input[name="attr_strength"][value="7"] ~ input.skull:nth-of-type(1n+10) + span::before, .charsheet input[name="attr_strength"][value="8"] ~ input.skull:nth-of-type(1n+11) + span::before, .charsheet input[name="attr_strength"][value="9"] ~ input.skull:nth-of-type(1n+12) + span::before, .charsheet input[name="attr_strength"][value="10"] ~ input.skull:nth-of-type(1n+13) + span::before, .charsheet input[name="attr_strength"][value="11"] ~ input.skull:nth-of-type(1n+14) + span::before, .charsheet input[name="attr_strength"][value="12"] ~ input.skull:nth-of-type(1n+15) + span::before, .charsheet input[name="attr_strength"][value="13"] ~ input.skull:nth-of-type(1n+16) + span::before, .charsheet input[name="attr_strength"][value="14"] ~ input.skull:nth-of-type(1n+17) + span::before, .charsheet input[name="attr_strength"][value="15"] ~ input.skull:nth-of-type(1n+18) + span::before, .charsheet input[name="attr_strength"][value="16"] ~ input.skull:nth-of-type(1n+19) + span::before, .charsheet input[name="attr_strength"][value="17"] ~ input.skull:nth-of-type(1n+20) + span::before, .charsheet input[name="attr_strength"][value="18"] ~ input.skull:nth-of-type(1n+21) + span::before, .charsheet input[name="attr_strength"][value="19"] ~ input.skull:nth-of-type(1n+22) + span::before, .charsheet input[name="attr_strength"][value="20"] ~ input.skull:nth-of-type(1n+23) + span::before, .charsheet input[name="attr_strength"][value="21"] ~ input.skull:nth-of-type(1n+24) + span::before, .charsheet input[name="attr_strength"][value="22"] ~ input.skull:nth-of-type(1n+25) + span::before, .charsheet input[name="attr_strength"][value="23"] ~ input.skull:nth-of-type(1n+26) + span::before, .charsheet input[name="attr_strength"][value="24"] ~ input.skull:nth-of-type(1n+27) + span::before, .charsheet input[name="attr_strength"][value="25"] ~ input.skull:nth-of-type(1n+28) + span::before, .charsheet input[name="attr_strength"][value="26"] ~ input.skull:nth-of-type(1n+29) + span::before, .charsheet input[name="attr_strength"][value="27"] ~ input.skull:nth-of-type(1n+30) + span::before, .charsheet input[name="attr_strength"][value="28"] ~ input.skull:nth-of-type(1n+31) + span::before, .charsheet input[name="attr_strength"][value="29"] ~ input.skull:nth-of-type(1n+32) + span::before, .charsheet input[name="attr_strength"][value="30"] ~ input.skull:nth-of-type(1n+33) + span::before, .charsheet input[name="attr_strength"][value="31"] ~ input.skull:nth-of-type(1n+34) + span::before, .charsheet input[name="attr_strength"][value="32"] ~ input.skull:nth-of-type(1n+35) + span::before, .charsheet input[name="attr_strength"][value="33"] ~ input.skull:nth-of-type(1n+36) + span::before, .charsheet input[name="attr_strength"][value="34"] ~ input.skull:nth-of-type(1n+37) + span::before, .charsheet input[name="attr_strength"][value="35"] ~ input.skull:nth-of-type(1n+38) + span::before, .charsheet input[name="attr_strength"][value="36"] ~ input.skull:nth-of-type(1n+39) + span::before, .charsheet input[name="attr_strength"][value="37"] ~ input.skull:nth-of-type(1n+40) + span::before, .charsheet input[name="attr_strength"][value="38"] ~ input.skull:nth-of-type(1n+41) + span::before, .charsheet input[name="attr_strength"][value="39"] ~ input.skull:nth-of-type(1n+42) + span::before, .charsheet input[name="attr_strength"][value="40"] ~ input.skull:nth-of-type(1n+43) + span::before, .charsheet input[name="attr_strength"][value="41"] ~ input.skull:nth-of-type(1n+44) + span::before, .charsheet input[name="attr_strength"][value="42"] ~ input.skull:nth-of-type(1n+45) + span::before, .charsheet input[name="attr_strength"][value="43"] ~ input.skull:nth-of-type(1n+46) + span::before, .charsheet input[name="attr_strength"][value="44"] ~ input.skull:nth-of-type(1n+47) + span::before, .charsheet input[name="attr_strength"][value="45"] ~ input.skull:nth-of-type(1n+48) + span::before, .charsheet input[name="attr_strength"][value="46"] ~ input.skull:nth-of-type(1n+49) + span::before, .charsheet input[name="attr_strength"][value="47"] ~ input.skull:nth-of-type(1n+50) + span::before, .charsheet input[name="attr_strength"][value="48"] ~ input.skull:nth-of-type(1n+51) + span::before { opacity: 0; } .charsheet input[name="attr_agility"][value="0"] ~ input.skull:nth-of-type(1n+3) + span::before, .charsheet input[name="attr_agility"][value="1"] ~ input.skull:nth-of-type(1n+4) + span::before, .charsheet input[name="attr_agility"][value="2"] ~ input.skull:nth-of-type(1n+5) + span::before, .charsheet input[name="attr_agility"][value="3"] ~ input.skull:nth-of-type(1n+6) + span::before, .charsheet input[name="attr_agility"][value="4"] ~ input.skull:nth-of-type(1n+7) + span::before, .charsheet input[name="attr_agility"][value="5"] ~ input.skull:nth-of-type(1n+8) + span::before, .charsheet input[name="attr_agility"][value="6"] ~ input.skull:nth-of-type(1n+9) + span::before { opacity: 0; } .charsheet input[name="attr_wits"][value="0"] ~ input.skull:nth-of-type(1n+3) + span::before, .charsheet input[name="attr_wits"][value="1"] ~ input.skull:nth-of-type(1n+4) + span::before, .charsheet input[name="attr_wits"][value="2"] ~ input.skull:nth-of-type(1n+5) + span::before, .charsheet input[name="attr_wits"][value="3"] ~ input.skull:nth-of-type(1n+6) + span::before, .charsheet input[name="attr_wits"][value="4"] ~ input.skull:nth-of-type(1n+7) + span::before, .charsheet input[name="attr_wits"][value="5"] ~ input.skull:nth-of-type(1n+8) + span::before, .charsheet input[name="attr_wits"][value="6"] ~ input.skull:nth-of-type(1n+9) + span::before { opacity: 0; } .charsheet input[name="attr_empathy"][value="0"] ~ input.skull:nth-of-type(1n+3) + span::before, .charsheet input[name="attr_empathy"][value="1"] ~ input.skull:nth-of-type(1n+4) + span::before, .charsheet input[name="attr_empathy"][value="2"] ~ input.skull:nth-of-type(1n+5) + span::before, .charsheet input[name="attr_empathy"][value="3"] ~ input.skull:nth-of-type(1n+6) + span::before, .charsheet input[name="attr_empathy"][value="4"] ~ input.skull:nth-of-type(1n+7) + span::before, .charsheet input[name="attr_empathy"][value="5"] ~ input.skull:nth-of-type(1n+8) + span::before, .charsheet input[name="attr_empathy"][value="6"] ~ input.skull:nth-of-type(1n+9) + span::before { opacity: 0; } /* Hide hover style on hidden elements */ .charsheet input[name="attr_strength"][value="0"] ~ input.skull:hover:nth-of-type(1n+3) + span::before, .charsheet input[name="attr_strength"][value="1"] ~ input.skull:hover:nth-of-type(1n+4) + span::before, .charsheet input[name="attr_strength"][value="2"] ~ input.skull:hover:nth-of-type(1n+5) + span::before, .charsheet input[name="attr_strength"][value="3"] ~ input.skull:hover:nth-of-type(1n+6) + span::before, .charsheet input[name="attr_strength"][value="4"] ~ input.skull:hover:nth-of-type(1n+7) + span::before, .charsheet input[name="attr_strength"][value="5"] ~ input.skull:hover:nth-of-type(1n+8) + span::before, .charsheet input[name="attr_strength"][value="6"] ~ input.skull:hover:nth-of-type(1n+9) + span::before, .charsheet input[name="attr_strength"][value="7"] ~ input.skull:hover:nth-of-type(1n+10) + span::before, .charsheet input[name="attr_strength"][value="8"] ~ input.skull:hover:nth-of-type(1n+11) + span::before, .charsheet input[name="attr_strength"][value="9"] ~ input.skull:hover:nth-of-type(1n+12) + span::before, .charsheet input[name="attr_strength"][value="10"] ~ input.skull:hover:nth-of-type(1n+13) + span::before, .charsheet input[name="attr_strength"][value="11"] ~ input.skull:hover:nth-of-type(1n+14) + span::before, .charsheet input[name="attr_strength"][value="12"] ~ input.skull:hover:nth-of-type(1n+15) + span::before, .charsheet input[name="attr_strength"][value="13"] ~ input.skull:hover:nth-of-type(1n+16) + span::before, .charsheet input[name="attr_strength"][value="14"] ~ input.skull:hover:nth-of-type(1n+17) + span::before, .charsheet input[name="attr_strength"][value="15"] ~ input.skull:hover:nth-of-type(1n+18) + span::before, .charsheet input[name="attr_strength"][value="16"] ~ input.skull:hover:nth-of-type(1n+19) + span::before, .charsheet input[name="attr_strength"][value="17"] ~ input.skull:hover:nth-of-type(1n+20) + span::before, .charsheet input[name="attr_strength"][value="18"] ~ input.skull:hover:nth-of-type(1n+21) + span::before, .charsheet input[name="attr_strength"][value="19"] ~ input.skull:hover:nth-of-type(1n+22) + span::before, .charsheet input[name="attr_strength"][value="20"] ~ input.skull:hover:nth-of-type(1n+23) + span::before, .charsheet input[name="attr_strength"][value="21"] ~ input.skull:hover:nth-of-type(1n+24) + span::before, .charsheet input[name="attr_strength"][value="22"] ~ input.skull:hover:nth-of-type(1n+25) + span::before, .charsheet input[name="attr_strength"][value="23"] ~ input.skull:hover:nth-of-type(1n+26) + span::before, .charsheet input[name="attr_strength"][value="24"] ~ input.skull:hover:nth-of-type(1n+27) + span::before, .charsheet input[name="attr_strength"][value="25"] ~ input.skull:hover:nth-of-type(1n+28) + span::before, .charsheet input[name="attr_strength"][value="26"] ~ input.skull:hover:nth-of-type(1n+29) + span::before, .charsheet input[name="attr_strength"][value="27"] ~ input.skull:hover:nth-of-type(1n+30) + span::before, .charsheet input[name="attr_strength"][value="28"] ~ input.skull:hover:nth-of-type(1n+31) + span::before, .charsheet input[name="attr_strength"][value="29"] ~ input.skull:hover:nth-of-type(1n+32) + span::before, .charsheet input[name="attr_strength"][value="30"] ~ input.skull:hover:nth-of-type(1n+33) + span::before, .charsheet input[name="attr_strength"][value="31"] ~ input.skull:hover:nth-of-type(1n+34) + span::before, .charsheet input[name="attr_strength"][value="32"] ~ input.skull:hover:nth-of-type(1n+35) + span::before, .charsheet input[name="attr_strength"][value="33"] ~ input.skull:hover:nth-of-type(1n+36) + span::before, .charsheet input[name="attr_strength"][value="34"] ~ input.skull:hover:nth-of-type(1n+37) + span::before, .charsheet input[name="attr_strength"][value="35"] ~ input.skull:hover:nth-of-type(1n+38) + span::before, .charsheet input[name="attr_strength"][value="36"] ~ input.skull:hover:nth-of-type(1n+39) + span::before, .charsheet input[name="attr_strength"][value="37"] ~ input.skull:hover:nth-of-type(1n+40) + span::before, .charsheet input[name="attr_strength"][value="38"] ~ input.skull:hover:nth-of-type(1n+41) + span::before, .charsheet input[name="attr_strength"][value="39"] ~ input.skull:hover:nth-of-type(1n+42) + span::before, .charsheet input[name="attr_strength"][value="40"] ~ input.skull:hover:nth-of-type(1n+43) + span::before, .charsheet input[name="attr_strength"][value="41"] ~ input.skull:hover:nth-of-type(1n+44) + span::before, .charsheet input[name="attr_strength"][value="42"] ~ input.skull:hover:nth-of-type(1n+45) + span::before, .charsheet input[name="attr_strength"][value="43"] ~ input.skull:hover:nth-of-type(1n+46) + span::before, .charsheet input[name="attr_strength"][value="44"] ~ input.skull:hover:nth-of-type(1n+47) + span::before, .charsheet input[name="attr_strength"][value="45"] ~ input.skull:hover:nth-of-type(1n+48) + span::before, .charsheet input[name="attr_strength"][value="46"] ~ input.skull:hover:nth-of-type(1n+49) + span::before, .charsheet input[name="attr_strength"][value="47"] ~ input.skull:hover:nth-of-type(1n+50) + span::before, .charsheet input[name="attr_strength"][value="48"] ~ input.skull:hover:nth-of-type(1n+51) + span::before, .charsheet input[name="attr_agility"][value="0"] ~ input.skull:hover:nth-of-type(1n+3) + span::before, .charsheet input[name="attr_agility"][value="1"] ~ input.skull:hover:nth-of-type(1n+4) + span::before, .charsheet input[name="attr_agility"][value="2"] ~ input.skull:hover:nth-of-type(1n+5) + span::before, .charsheet input[name="attr_agility"][value="3"] ~ input.skull:hover:nth-of-type(1n+6) + span::before, .charsheet input[name="attr_agility"][value="4"] ~ input.skull:hover:nth-of-type(1n+7) + span::before, .charsheet input[name="attr_agility"][value="5"] ~ input.skull:hover:nth-of-type(1n+8) + span::before, .charsheet input[name="attr_agility"][value="6"] ~ input.skull:hover:nth-of-type(1n+9) + span::before, .charsheet input[name="attr_wits"][value="0"] ~ input.skull:hover:nth-of-type(1n+3) + span::before, .charsheet input[name="attr_wits"][value="1"] ~ input.skull:hover:nth-of-type(1n+4) + span::before, .charsheet input[name="attr_wits"][value="2"] ~ input.skull:hover:nth-of-type(1n+5) + span::before, .charsheet input[name="attr_wits"][value="3"] ~ input.skull:hover:nth-of-type(1n+6) + span::before, .charsheet input[name="attr_wits"][value="4"] ~ input.skull:hover:nth-of-type(1n+7) + span::before, .charsheet input[name="attr_wits"][value="5"] ~ input.skull:hover:nth-of-type(1n+8) + span::before, .charsheet input[name="attr_wits"][value="6"] ~ input.skull:hover:nth-of-type(1n+9) + span::before, .charsheet input[name="attr_empathy"][value="0"] ~ input.skull:hover:nth-of-type(1n+3) + span::before, .charsheet input[name="attr_empathy"][value="1"] ~ input.skull:hover:nth-of-type(1n+4) + span::before, .charsheet input[name="attr_empathy"][value="2"] ~ input.skull:hover:nth-of-type(1n+5) + span::before, .charsheet input[name="attr_empathy"][value="3"] ~ input.skull:hover:nth-of-type(1n+6) + span::before, .charsheet input[name="attr_empathy"][value="4"] ~ input.skull:hover:nth-of-type(1n+7) + span::before, .charsheet input[name="attr_empathy"][value="5"] ~ input.skull:hover:nth-of-type(1n+8) + span::before, .charsheet input[name="attr_empathy"][value="6"] ~ input.skull:hover:nth-of-type(1n+9) + span::before { background-image: none; content: ""; } /* Hide pointer events on hover*/ .charsheet input[name="attr_strength"][value="0"] ~ input.skull:nth-of-type(1n+3), .charsheet input[name="attr_strength"][value="1"] ~ input.skull:nth-of-type(1n+4), .charsheet input[name="attr_strength"][value="2"] ~ input.skull:nth-of-type(1n+5), .charsheet input[name="attr_strength"][value="3"] ~ input.skull:nth-of-type(1n+6), .charsheet input[name="attr_strength"][value="4"] ~ input.skull:nth-of-type(1n+7), .charsheet input[name="attr_strength"][value="5"] ~ input.skull:nth-of-type(1n+8), .charsheet input[name="attr_strength"][value="6"] ~ input.skull:nth-of-type(1n+9), .charsheet input[name="attr_strength"][value="7"] ~ input.skull:nth-of-type(1n+10), .charsheet input[name="attr_strength"][value="8"] ~ input.skull:nth-of-type(1n+11), .charsheet input[name="attr_strength"][value="9"] ~ input.skull:nth-of-type(1n+12), .charsheet input[name="attr_strength"][value="10"] ~ input.skull:nth-of-type(1n+13), .charsheet input[name="attr_strength"][value="11"] ~ input.skull:nth-of-type(1n+14), .charsheet input[name="attr_strength"][value="12"] ~ input.skull:nth-of-type(1n+15), .charsheet input[name="attr_strength"][value="13"] ~ input.skull:nth-of-type(1n+16), .charsheet input[name="attr_strength"][value="14"] ~ input.skull:nth-of-type(1n+17), .charsheet input[name="attr_strength"][value="15"] ~ input.skull:nth-of-type(1n+18), .charsheet input[name="attr_strength"][value="16"] ~ input.skull:nth-of-type(1n+19), .charsheet input[name="attr_strength"][value="17"] ~ input.skull:nth-of-type(1n+20), .charsheet input[name="attr_strength"][value="18"] ~ input.skull:nth-of-type(1n+21), .charsheet input[name="attr_strength"][value="19"] ~ input.skull:nth-of-type(1n+22), .charsheet input[name="attr_strength"][value="20"] ~ input.skull:nth-of-type(1n+23), .charsheet input[name="attr_strength"][value="21"] ~ input.skull:nth-of-type(1n+24), .charsheet input[name="attr_strength"][value="22"] ~ input.skull:nth-of-type(1n+25), .charsheet input[name="attr_strength"][value="23"] ~ input.skull:nth-of-type(1n+26), .charsheet input[name="attr_strength"][value="24"] ~ input.skull:nth-of-type(1n+27), .charsheet input[name="attr_strength"][value="25"] ~ input.skull:nth-of-type(1n+28), .charsheet input[name="attr_strength"][value="26"] ~ input.skull:nth-of-type(1n+29), .charsheet input[name="attr_strength"][value="27"] ~ input.skull:nth-of-type(1n+30), .charsheet input[name="attr_strength"][value="28"] ~ input.skull:nth-of-type(1n+31), .charsheet input[name="attr_strength"][value="29"] ~ input.skull:nth-of-type(1n+32), .charsheet input[name="attr_strength"][value="30"] ~ input.skull:nth-of-type(1n+33), .charsheet input[name="attr_strength"][value="31"] ~ input.skull:nth-of-type(1n+34), .charsheet input[name="attr_strength"][value="32"] ~ input.skull:nth-of-type(1n+35), .charsheet input[name="attr_strength"][value="33"] ~ input.skull:nth-of-type(1n+36), .charsheet input[name="attr_strength"][value="34"] ~ input.skull:nth-of-type(1n+37), .charsheet input[name="attr_strength"][value="35"] ~ input.skull:nth-of-type(1n+38), .charsheet input[name="attr_strength"][value="36"] ~ input.skull:nth-of-type(1n+39), .charsheet input[name="attr_strength"][value="37"] ~ input.skull:nth-of-type(1n+40), .charsheet input[name="attr_strength"][value="38"] ~ input.skull:nth-of-type(1n+41), .charsheet input[name="attr_strength"][value="39"] ~ input.skull:nth-of-type(1n+42), .charsheet input[name="attr_strength"][value="40"] ~ input.skull:nth-of-type(1n+43), .charsheet input[name="attr_strength"][value="41"] ~ input.skull:nth-of-type(1n+44), .charsheet input[name="attr_strength"][value="42"] ~ input.skull:nth-of-type(1n+45), .charsheet input[name="attr_strength"][value="43"] ~ input.skull:nth-of-type(1n+46), .charsheet input[name="attr_strength"][value="44"] ~ input.skull:nth-of-type(1n+47), .charsheet input[name="attr_strength"][value="45"] ~ input.skull:nth-of-type(1n+48), .charsheet input[name="attr_strength"][value="46"] ~ input.skull:nth-of-type(1n+49), .charsheet input[name="attr_strength"][value="47"] ~ input.skull:nth-of-type(1n+50), .charsheet input[name="attr_strength"][value="48"] ~ input.skull:nth-of-type(1n+51), .charsheet input[name="attr_agility"][value="0"] ~ input.skull:nth-of-type(1n+3), .charsheet input[name="attr_agility"][value="1"] ~ input.skull:nth-of-type(1n+4), .charsheet input[name="attr_agility"][value="2"] ~ input.skull:nth-of-type(1n+5), .charsheet input[name="attr_agility"][value="3"] ~ input.skull:nth-of-type(1n+6), .charsheet input[name="attr_agility"][value="4"] ~ input.skull:nth-of-type(1n+7), .charsheet input[name="attr_agility"][value="5"] ~ input.skull:nth-of-type(1n+8), .charsheet input[name="attr_agility"][value="6"] ~ input.skull:nth-of-type(1n+9), .charsheet input[name="attr_wits"][value="0"] ~ input.skull:nth-of-type(1n+3), .charsheet input[name="attr_wits"][value="1"] ~ input.skull:nth-of-type(1n+4), .charsheet input[name="attr_wits"][value="2"] ~ input.skull:nth-of-type(1n+5), .charsheet input[name="attr_wits"][value="3"] ~ input.skull:nth-of-type(1n+6), .charsheet input[name="attr_wits"][value="4"] ~ input.skull:nth-of-type(1n+7), .charsheet input[name="attr_wits"][value="5"] ~ input.skull:nth-of-type(1n+8), .charsheet input[name="attr_wits"][value="6"] ~ input.skull:nth-of-type(1n+9), .charsheet input[name="attr_empathy"][value="0"] ~ input.skull:nth-of-type(1n+3), .charsheet input[name="attr_empathy"][value="1"] ~ input.skull:nth-of-type(1n+4), .charsheet input[name="attr_empathy"][value="2"] ~ input.skull:nth-of-type(1n+5), .charsheet input[name="attr_empathy"][value="3"] ~ input.skull:nth-of-type(1n+6), .charsheet input[name="attr_empathy"][value="4"] ~ input.skull:nth-of-type(1n+7), .charsheet input[name="attr_empathy"][value="5"] ~ input.skull:nth-of-type(1n+8), .charsheet input[name="attr_empathy"][value="6"] ~ input.skull:nth-of-type(1n+9) { cursor: default; pointer-events: none; } /* Broken Indicators */ .charsheet input.broken-str[value="0"] ~ div .broken-str, .charsheet input.broken-agi[value="0"] ~ div .broken-agi, .charsheet input.broken-wit[value="0"] ~ div .broken-wit, .charsheet input.broken-emp[value="0"] ~ div .broken-emp { color: #a60100; font-weight: bold; } .charsheet input.broken-str[value="0"] ~ div .broken-str.input-span, .charsheet input.broken-agi[value="0"] ~ div .broken-agi.input-span, .charsheet input.broken-wit[value="0"] ~ div .broken-wit.input-span, .charsheet input.broken-emp[value="0"] ~ div .broken-emp.input-span { box-sizing: border-box; } /* Fake radio using xbox for Experience/Willpower */ .charsheet input[type="radio"].xbox + span::before { background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/xbox_empty.png); content: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/xbox_checked.png); display: inline-block; font-size: 24px; height: 15px; line-height: 14px; margin: 0 0 0 -20px; text-align: center; vertical-align: middle; width: 15px; } .charsheet input.xbox { margin-top: 3px; opacity: 0; width: 16px; z-index: 1; } /* Removes xbox from all radios _after_ selected one */ .charsheet input[type="radio"]:checked ~ input[type="radio"].xbox + span::before, .charsheet input[type="radio"].xbox:checked ~ input[type="radio"].xbox + span::before { content: ""; } /* Fake radio using xbox for Conditions */ .charsheet input[type="checkbox"].xbox + span::before { background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/xbox_empty.png); content: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/xbox_checked.png); display: inline-block; font-size: 24px; height: 15px; line-height: 14px; margin: 0 0 0 -20px; text-align: center; vertical-align: middle; width: 15px; } .charsheet .conditions-grid > div input.xbox { height: 20px; margin: 1px 0 0 0; opacity: 0; transform-origin: left; transform: scaleX(4.5); width: 20px; z-index: 1; } /* Removes xbox from all radios _after_ selected one */ .charsheet input[type="checkbox"].xbox:not(:checked) + span::before { content: ""; } /* Fake Action Button */ .charsheet .wrapper button[type="action"].roll-button, .charsheet .wrapper button[type="roll"].roll-button { background-image: -webkit-linear-gradient(top, #fff, #e6e6e6); border: 1px solid #ccc; border-bottom-color: #bbb; border-image: initial; border-style: outset; border-width: 2px; box-sizing: border-box; content: "t"; cursor: pointer; display: flex; font-family: "dicefontd20"; font-size: 1.25em; height: 1.25em; justify-content: center; justify-self: center; line-height: 1em; margin: 5px 2px 5px 2px; padding: 0 0 0 0; width: 1.25em; color: initial; } .charsheet button[type="roll"].roll-button-textonly::before { content: ""; } .charsheet .wrapper button.roll-button-textonly { align-items: center; background-image: -webkit-linear-gradient(top, #fff, #e6e6e6); border: 1px solid #ccc; border-bottom-color: #bbb; border-image: initial; border-style: outset; border-width: 2px; color: initial; cursor: pointer; display: inline-flex; font-size: 1.3em; font-weight: normal; justify-content: center; } .charsheet .wrapper button.roll-button-textonly span, .charsheet .wrapper button.roll-button-textonly.header-h1 span { font-size: 0.75em; cursor: pointer; margin: 0 4px 0 4px; background-color: transparent !important; color: initial; } .charsheet .wrapper button.roll-button-textonly:hover span, .charsheet .wrapper button.roll-button-textonly.header-h1:hover span { color: #fff !important; } /* Update the Dice Pool indicator */ .charsheet .box-indicator button, .charsheet .box-api-indicator button { background: #a60100; border: 1px solid #000; box-shadow: 0 2px 4px 2px #000; color: #fff; z-index: 1; } .charsheet .box-indicator button:hover, .charsheet .box-api-indicator button:hover { border: 1px solid #a60100; box-shadow: 0 1px 4px 2px #808080; } .charsheet .box-indicator, .charsheet .box-api-indicator { border-radius: 4px; box-shadow: 0 2px 15px transparent; display: flex; position: relative; transition: opacity 0.5s; } .charsheet .box-indicator::after { background-color: transparent; border: 10px solid #a60100; border-radius: 4px; box-shadow: 0 2px 10px 5px #a60100; content: ""; margin: 0 0 -2px -5.25em; opacity: 0; transition: opacity 0.5s; width: 3.75em; z-index: 0; } .charsheet .box-api-indicator::after { background-color: transparent; border: 10px solid #a60100; border-radius: 4px; box-shadow: 0 2px 10px 5px #a60100; content: ""; margin: -2px 0 -4px -9em; opacity: 0; transition: opacity 0.5s; width: 7.5em; z-index: 0; } .charsheet .roll-indicator:checked ~ .box-indicator::after, .charsheet .roll-indicator:checked ~ .box-api-indicator::after { opacity: 1; } /* api dice toggle */ .charsheet button.api-button { border: 1px solid lightblue; box-shadow: 2px 2px 3px darkgrey; line-height: 0.85em; } .charsheet input[type="checkbox"].hidden, .charsheet .hidden { display: none; } .charsheet input.hidden.api-toggle-show:checked ~ .template-roll { display: none; } .charsheet div.grid-item.api-roll { display: none; } .charsheet input.hidden.api-toggle-show:checked ~ div.grid-item.api-roll { display: block; } .charsheet input.hidden.api-toggle-show:checked ~ div.grid-item.api-roll button::after { content: "w/API"; margin-right: 2px; } /* repcontrol */ /* this sets the formatting for all repcontrol buttons */ .charsheet .itemcontrol { z-index: 1; } .charsheet .repcontrol { display: flex; justify-content: flex-end; } .charsheet .wrapper div.repcontrol button.repcontrol_add, .charsheet .wrapper div.repcontrol button.repcontrol_edit, .charsheet .wrapper div.repcontrol button.repcontrol_del { box-shadow: none; color: transparent; height: 1.2em; margin: 1px; padding: 0 1px 3px 1px; width: 2em; } .charsheet .repcontrol_move { cursor: move; float: right; margin-right: 5px; width: 2em; } .charsheet button.btn.repcontrol_edit::after { color: black; content: '('; font-family: Pictos; margin: 0 0 0 -38px; padding: 0 6px 0 6px; } .charsheet .repcontainer.ui-sortable.editmode ~ .repcontrol button.btn.repcontrol_edit::after { margin: 0 0 0 -28px; } .charsheet button.btn.repcontrol_add::after { color: black; content: '&'; font-family: Pictos; margin: 0 0 0 -31px; padding: 0 6px 0 12px; } .charsheet button.btn:hover.repcontrol_edit::after, .charsheet button.btn:hover.repcontrol_add::after, .charsheet button.btn:hover.repcontrol_del::after { color: #a60100; } .charsheet a.btn.repcontrol_move:hover { color: #a60100; } .charsheet button.btn.btn-danger.pictos.repcontrol_del:hover { color: #fff; } /* Sheet Tabs */ .charsheet div.tab-content { display: none; } .charsheet input.character:checked ~ div.character, .charsheet input.stronghold:checked ~ div.stronghold, .charsheet input.monster_only:checked ~ div.character, .charsheet input.settings:checked ~ div.settings { background-color: transparent; display: inline-block; overflow: hidden; } .charsheet input.monster_only:checked ~ div.character .toggle-monster-only { display: none; } /* Total Columns formatting*/ .charsheet span.weapons-box31.readonly, .charsheet span.weapons-box36.readonly, .charsheet span.weapons-box45.readonly, .charsheet span.armor-box5.readonly, .charsheet span.shield-box9.readonly, .charsheet .skills-row span.readonly, .charsheet .monster-stats-box18 span.input-span { align-self: center; background-color: #d5d5d5; color: black; margin: -2px 0 -2px 0; min-width: auto; width: 100%; } .charsheet span.weapons-box31.readonly::before, .charsheet span.weapons-box36.readonly::before, .charsheet span.weapons-box45.readonly::before, .charsheet span.armor-box5.readonly::before, .charsheet span.shield-box9.readonly::before, .charsheet .skills-row span.readonly::before, .charsheet .monster-stats-box18 span.input-span::before { align-self: center; color: #777; content: '='; font-size: 16px; margin: 0 5px 7px -5px; } /* Monster View */ .charsheet .monster, .charsheet .monster + span { display: none; } .charsheet input.monster_only:checked ~ div.character .monster, .charsheet input.monster_only:checked ~ div.character input.monster, .charsheet input.monster_only:checked ~ div.character .monster + span { display: block; } .charsheet input[type="radio"].tab { -moz-appearance: none; -webkit-appearance: none; border: none; cursor: pointer; float: left; font-family: "Times New Roman", Times, serif; font-size: 1.1em; height: 20px; margin: 34px 1px 0 1px; outline: none; position: relative; width: 90px; z-index: 1; } .charsheet input[type="radio"].tab.settings { font-family: "pictos"; margin-left: -2px; width: 20px; z-index: 1; } .charsheet input.tab::before { background: #ddd; border: 2px solid #ccc; border-bottom: 2px solid transparent; border-radius: 4px 4px 0 0; color: #444; content: attr(title); display: block; height: 16px; line-height: 18px; padding-bottom: 1px; text-align: center; width: 90px; } .charsheet input.tab.settings::before { content: "y"; margin: 0 0 0 2px; width: 20px; } .charsheet input.tab.character:checked, .charsheet input.tab.stronghold:checked, .charsheet input.tab.monster_only:checked, .charsheet input.tab.settings:checked { opacity: 1; z-index: 2; } .charsheet input.tab.character:hover, .charsheet input.tab.stronghold:hover, .charsheet input.tab.monster_only:hover, .charsheet input.tab.settings:hover { opacity: 1; z-index: 3; } .charsheet input.tab.character:hover::before, .charsheet input.tab.stronghold:hover::before, .charsheet input.tab.monster_only:hover::before { background: #f5f5f5; border-bottom-color: transparent; border-color: #aaa; height: 22px; margin: -3px 0 0 0; width: 92px; z-index: 3; } .charsheet input.tab.settings:hover::before { background: #f5f5f5; border-bottom-color: transparent; border-color: #aaa; width: 22px; z-index: 3; } .charsheet input.tab:active, .charsheet input.tab:focus { outline: none; } .charsheet input.tab:hover::before { background: #e3e3e3; } .charsheet input.tab:hover::before { background: #e3e3e3; font-weight: bold; height: 20px; margin: -3px 0 0 -2px; } .charsheet input.tab:checked::before, .charsheet input.tab:checked:hover::before { background: #000; border: 2px solid #444; border-bottom: 2px solid transparent; color: #fff; font-weight: bold; height: 20px; margin: -3px 0 0 -2px; width: 92px; } .charsheet input.tab.settings:checked::before, .charsheet input.tab.settings:checked:hover::before { width: 20px; } /* hides radio selector */ .charsheet input.tab.character:checked::after, .charsheet input.tab.stronghold:checked::after, .charsheet input.tab.monster_only:checked::after, .charsheet input.tab.settings:checked::after { opacity: 0; } .charsheet .wrapper { background-color: inherit; border: 1px solid #000; border-image-outset: 36 5 0 5; border-image-repeat: stretch; border-image-slice: 64 0 70 0; border-image-source: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_wrapper_border.png); border-image-width: 70px 0 60px 0; box-sizing: border-box; color: #000; font-family: "IM Fell English", "Times New Roman", Times, serif; padding: 5.5em 0 4em 0; position: absolute; left: 1em; top: 10em; width: 100vh; min-width: 97%; } .sheet-darkmode .tab-content .charsheet .wrapper { border-image-source: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_wrapper_border_inverted.png); } .charsheet .logo { margin-bottom: -2px; max-height: 56px; min-width: 820px; text-align: right; position: absolute; right: 3em; top: 5.5em; } .charsheet span.logo-image { background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_logo.png); background-repeat: no-repeat; background-size: contain; display: inline-block; height: 70px; margin: -15px 0 0 0; width: 220px; } /* language-specific styling appears to be broken on roll20 .charsheet span.logo-image.lang-sv { background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_logo_sv.png) } */ .charsheet input { color: #000; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .charsheet .wrapper .input:focus, .charsheet .wrapper .input:focus option, .charsheet .wrapper input[type="text"].input:focus, .charsheet .wrapper input[type="number"].input:focus, .charsheet .wrapper input[type="text"].input:focus, .charsheet .wrapper input[type="number"].input:focus, .charsheet .wrapper input[type="text"].input-number:focus, .charsheet .wrapper input[type="number"].input-number:focus, .charsheet .wrapper .input-textarea:focus, .charsheet .wrapper textarea:focus { outline: none; color: initial; background-color: #d9d9d9; } .charsheet .input, .charsheet input[type="text"].input, .charsheet input[type="number"].input { color: #000; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; height: 2.25em; width: 100%; } .charsheet input[type="text"].input-number, .charsheet input[type="number"].input-number { color: #000; max-height: 2.25em; text-align: center; width: 100%; } .charsheet select.input { -moz-appearance: none; -webkit-appearance: none; color: #000; margin: 0; min-width: 3em; text-align-last: center; text-align: center; width: 100%; } .charsheet select.input:hover { -moz-appearance: menulist; -webkit-appearance: menulist; padding: 4px; } .charsheet input.input.input-number-center { display: flex; justify-self: center; text-align: center; width: 3em; } /* change checkbox appearance */ .charsheet input[type="checkbox"] { -moz-appearance: none; -o-appearance: none; -webkit-appearance: none; appearance: none; background-color: #fff; border: 1px solid #000; border-radius: 4px; cursor: pointer; height: 1em; outline: none; vertical-align: text-bottom; width: 1em; } .charsheet input[type="checkbox"]:checked { background-color: #fff; border: 1px solid #000; vertical-align: text-bottom; } .charsheet input[type="checkbox"]:checked::after { color: #000; content: "3"; font-family: pictos; position: relative; top: -7px; } .charsheet input[type="checkbox"]:active { border: 2px solid #34495e; } /* end checkbox appearance */ /* change radio appearance */ .charsheet input[type="radio"] { -moz-appearance: none; -o-appearance: none; -webkit-appearance: none; appearance: none; border: 1px solid transparent; border-radius: 50%; cursor: pointer; height: 1em; opacity: 0.5; outline: none; vertical-align: text-bottom; width: 1em; } .charsheet input[type="radio"].xbox { opacity: 0; } .charsheet input[type="radio"]:checked { border: 1px solid transparent; border-radius: 50%; vertical-align: text-bottom; } .charsheet input[type="radio"].tab:checked::after, .charsheet input[type="radio"].tab:not(:checked)::after, .charsheet input[type="radio"].skull:checked::after, .charsheet input[type="radio"].skull:not(:checked)::after { display: none; } .charsheet input[type="radio"]:checked::after, .charsheet input[type="radio"]:not(:checked)::after { color: #000; content: "1"; font-family: pictos; font-size: 1.35em; position: relative; top: -5px; } .charsheet input[type="radio"]:hover:checked::after, .charsheet input[type="radio"]:hover:not(:checked)::after { color: #a60002; font-weight: bold; opacity: 1; } /* end radio appearance */ .charsheet input[type="checkbox"].input { align-self: center; height: 11px; justify-self: center; width: 11px; } .charsheet .input-textarea { color: #000; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; height: 1.9em; line-height: 1em; margin: 0; min-height: 1.9em; overflow: hidden; padding: 0 2px 0 2px; resize: vertical; width: 100%; } .charsheet .details-grid div .input-textarea, .charsheet .appearance-grid div .input-textarea { height: 3em; min-height: 3em; } .charsheet input[disabled].input-number, .charsheet input[readonly].input, .charsheet textarea[disabled].input, .charsheet textarea[readonly].input, .charsheet input[readonly].input-number { background-color: #eee; border-color: #6e6e6e; color: #6e6e6e; cursor: help; font-style: italic; justify-self: center; text-align: center; } .charsheet button > input.input { max-height: 1.75em; } .charsheet button[type="action"] { border-radius: 5px; } /* hide spinner in FF number inputs */ .charsheet input[type="number"]:not(:hover)::-webkit-inner-spin-button, .charsheet input[type="number"]:not(:hover)::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .charsheet input[type="number"]:not(:hover) { -moz-appearance: textfield; } /* highlight rows on hover */ .charsheet .wrapper .itemcontrol + div:hover, .charsheet .wrapper .skills-grid span.skills-row:hover { background-color: #bfbfbf80; color: initial; } .sheet-darkmode .tab-content .charsheet .wrapper .itemcontrol + div:hover .input, .sheet-darkmode .tab-content .charsheet .wrapper .skills-grid span.skills-row:hover * { color: initial; } /* show/hide areas */ .charsheet .expand { left: -8px; opacity: 0; position: absolute; top: -4px; width: 18px; z-index: 6; } .charsheet input.expand + span::before { color: #c3996b; content: "y"; cursor: pointer; font-family: pictos; font-size: 14px; height: 16px; left: -6px; opacity: 0.001; position: absolute; top: -5px; width: 13px; z-index: 3; } .sheet-darkmode .tab-content .charsheet .wrapper input.expand + span::before { opacity: .5; color: #c8932e; } .charsheet .mount-grid input.expand + span::before { margin-top: 2.75em; } .charsheet input.expand + span::before, .charsheet input.expand:checked + span::before { opacity: 0.25; } .charsheet .repitem .weapons-grid:hover input.expand + span::before, .charsheet .repitem .monster-attacks-grid:hover input.expand + span::before, .charsheet .repitem .talents-grid:hover input.expand + span::before, .charsheet .armor-box10:hover input.expand + span::before, .charsheet .armor-box10-2:hover input.expand + span::before, .charsheet .armor-box10-3:hover input.expand + span::before, .charsheet .armor-box10-4:hover input.expand + span::before, .charsheet .armor-box10-5:hover input.expand + span::before, .charsheet .shield-box12:hover input.expand + span::before, .charsheet .repitem .gear-grid:hover input.expand + span::before, .charsheet .mount-grid:hover input.expand + span::before, .charsheet .repitem .mount_gear-grid:hover input.expand + span::before, .charsheet .repitem .spells-grid:hover input.expand + span::before, .charsheet .skills-row:hover input.expand + span::before { opacity: 0.85; } .charsheet input.expand ~ .input-textarea, .charsheet .repitem input.expand ~ .input-textarea, .charsheet input.expand ~ .weapons-subgrid, .charsheet input.expand ~ .armor-row2, .charsheet input.expand ~ .shield-row2, .charsheet input.expand ~ .animal-handling-row2, .charsheet input.expand ~ .crafting-row2, .charsheet input.expand ~ .endurance-row2, .charsheet input.expand ~ .healing-row2, .charsheet input.expand ~ .insight-row2, .charsheet input.expand ~ .lore-row2, .charsheet input.expand ~ .manipulation-row2, .charsheet input.expand ~ .marksmanship-row2, .charsheet input.expand ~ .melee-row2, .charsheet input.expand ~ .might-row2, .charsheet input.expand ~ .move-row2, .charsheet input.expand ~ .performance-row2, .charsheet input.expand ~ .scouting-row2, .charsheet input.expand ~ .sleight-of-hand-row2, .charsheet input.expand ~ .stealth-row2, .charsheet input.expand ~ .survival-row2 { display: none; } .charsheet input.expand:checked ~ .weapons-subgrid, .charsheet input.expand:checked ~ .armor-row2, .charsheet input.expand:checked ~ .shield-row2, .charsheet input.expand:checked ~ .animal-handling-row2, .charsheet input.expand:checked ~ .crafting-row2, .charsheet input.expand:checked ~ .endurance-row2, .charsheet input.expand:checked ~ .healing-row2, .charsheet input.expand:checked ~ .insight-row2, .charsheet input.expand:checked ~ .lore-row2, .charsheet input.expand:checked ~ .manipulation-row2, .charsheet input.expand:checked ~ .marksmanship-row2, .charsheet input.expand:checked ~ .melee-row2, .charsheet input.expand:checked ~ .might-row2, .charsheet input.expand:checked ~ .move-row2, .charsheet input.expand:checked ~ .performance-row2, .charsheet input.expand:checked ~ .scouting-row2, .charsheet input.expand:checked ~ .sleight-of-hand-row2, .charsheet input.expand:checked ~ .stealth-row2, .charsheet input.expand:checked ~ .survival-row2 { border: 2px dotted #c3996b; box-sizing: border-box; display: grid; margin: 0; width: 100%; } .charsheet input.expand:checked ~ .input-textarea { border: 2px dotted #c3996b; box-sizing: border-box; display: block; height: 4.5em; line-height: 1.2em; margin: 0; min-height: 2em; overflow-y: auto; overflow: hidden; } /* warning border*/ .charsheet input[type="checkbox"].warning:checked ~ div .over-encumbered { border: 2px dotted #a60100; color: #2f2f2f; font-weight: bold; } /* character grid layout */ .charsheet .character-grid { display: grid; grid-column-gap: 2px; grid-row-gap: 4px; grid-template-columns: 34% auto auto; margin: -2.5em 0 0 0; } .charsheet .box { border: 1px solid #000; border-radius: 4px; padding: 0 5px 0 5px; text-align: left; } .charsheet .character-heading { background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_top_banner.png); background-position-x: center; background-position-y: top; background-repeat: no-repeat; background-size: 100% 110px; border: none; display: flex; grid-column: 1/4; grid-row-start: 1; height: 86px; justify-content: space-evenly; justify-self: stretch; margin: -10px 0 0 0; padding: 10px; } .sheet-darkmode .tab-content .charsheet .wrapper .character-heading { background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_top_banner_inverted.png); background-color: transparent; } .charsheet .character-attributes { grid-column-start: 1; } /* monster version of attributes */ .charsheet input.monster_only:checked ~ div.character .character-attributes { background-color: inherit; background-image: none; border: 7px solid #000; border-image-repeat: repeat; border-image-slice: 0 20 20 20; border-image-source: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_wide_column_border.png); border-image-width: 0 10px 10px 10px; border-top-width: 0; height: 100%; margin: -2px 0 0 0; padding: 0; } .sheet-darkmode .tab-content .charsheet input.monster_only:checked ~ div.character .character-attributes { border-image-source: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_wide_column_border_inverted.png); } .charsheet .character-details { background-color: inherit; border: 10px solid #000; border-bottom-width: 18px; border-image-repeat: round; border-image-slice: 25 25 35 25; border-image-source: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_column_box_border.png); border-image-width: 15px 15px 15px 15px; border-top-width: 18px; grid-column-start: 2; margin: 0; padding: 5px; } .sheet-darkmode .tab-content .charsheet .wrapper .character-details { border-image-source: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_column_box_border_inverted.png); } .charsheet .character-appearance { grid-column-start: 3; } .charsheet .character-conditions { border: none; grid-column: 1/4; padding: 10px 0 5px 0; } /* add fbl applique border/backgrounds */ .charsheet .character-attributes, .charsheet .character-appearance { background-color: inherit; border: 10px solid #000; border-bottom-width: 18px; border-image-repeat: repeat; border-image-slice: 0 25 40 25; border-image-source: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_small_column_border.png); border-image-width: 0 15px 30px 15px; border-top-width: 0; height: 85%; margin: 0; padding: 0 2px 0 2px; } .sheet-darkmode .tab-content .charsheet .wrapper .character-attributes, .sheet-darkmode .tab-content .charsheet .wrapper .character-appearance { border-image-source: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_small_column_border_inverted.png); } .charsheet .character-injuries, .charsheet .character-weapons, .charsheet .character-beasts, .charsheet .character-notes, .charsheet .character-armor, .charsheet .character-relationships, .charsheet .character-spells, .charsheet .stronghold-functions, .charsheet .stronghold-hirelings, .charsheet .stronghold-stockpile, .charsheet .stronghold-notes { background-color: inherit; border: 7px solid #000; border-image-repeat: repeat; border-image-slice: 0 20 20 20; border-image-source: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_large_box_border.png); border-image-width: 0 10px 10px 10px; border-top-width: 0; margin: 0 0 5px 0; padding: 0; } .sheet-darkmode .tab-content .charsheet .wrapper .character-injuries, .sheet-darkmode .tab-content .charsheet .wrapper .character-weapons, .sheet-darkmode .tab-content .charsheet .wrapper .character-beasts, .sheet-darkmode .tab-content .charsheet .wrapper .character-notes, .sheet-darkmode .tab-content .charsheet .wrapper .character-armor, .sheet-darkmode .tab-content .charsheet .wrapper .character-relationships, .sheet-darkmode .tab-content .charsheet .wrapper .character-spells, .sheet-darkmode .tab-content .charsheet .wrapper .stronghold-functions, .sheet-darkmode .tab-content .charsheet .wrapper .stronghold-hirelings, .sheet-darkmode .tab-content .charsheet .wrapper .stronghold-stockpile, .sheet-darkmode .tab-content .charsheet .wrapper .stronghold-notes { border-image-source: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_large_box_border_inverted.png); } .charsheet .character-injuries, .charsheet .character-weapons, .charsheet .character-beasts, .charsheet .character-notes { grid-column: 1/4; } .charsheet .character-armor, .charsheet .character-relationships, .charsheet .character-spells { grid-column: 1/3; height: fit-content; padding: 0 0 8px 0; } .charsheet .character-skills, .charsheet .character-dice_pool { background-color: inherit; border: 7px solid #000; border-image-repeat: repeat; border-image-slice: 0 20 20 20; border-image-source: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_wide_column_border.png); border-image-width: 0 10px 10px 10px; border-top-width: 0; margin: -2px 0 0 0; padding: 0 0 0 0; } .sheet-darkmode .tab-content .charsheet .wrapper .character-skills, .sheet-darkmode .tab-content .charsheet .wrapper .character-dice_pool { border-image-source: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_wide_column_border_inverted.png); } .charsheet .character-skill-dice-box { border: none; display: flex; grid-column: 1/3; grid-row-start: 6; justify-content: space-evenly; padding: 0; width: 100%; } .charsheet .character-skills { min-width: 20em; width: 50%; } .charsheet .character-dice_pool { background-color: #ffffea; min-width: 20em; width: 40%; } .charsheet input.dice_only:checked ~ div.character .character-dice_pool { width: 100%; } .charsheet input.dice_only:checked ~ div.character .box.character-skill-dice-box { display: flex; grid-column: 1/4; justify-self: center; margin-top: -1.5em; min-width: 20em; } .charsheet .character-column3 { border: none; grid-column-start: 3; grid-row-end: span 6; height: fit-content; } .charsheet .character-talents { height: fit-content; } .charsheet .character-gear { height: fit-content; } .charsheet .character-mount { height: fit-content; } /* Consumables Images */ .charsheet button[title*="food"].roll-button-textonly.header-h1::before { background: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/food_blk.png); } .charsheet button[title*="water"].roll-button-textonly.header-h1::after { background: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/water_blk.png); } .charsheet button[title*="arrows"].roll-button-textonly.header-h1::before { background: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/arrows_blk.png); } .charsheet button[title*="torches}"].roll-button-textonly.header-h1::after { background: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/torches_blk.png); } /*show white image on hover*/ .charsheet button[title*="food"].roll-button-textonly.header-h1:hover::before { background: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/food_wht.png); } .charsheet button[title*="water"].roll-button-textonly.header-h1:hover::after { background: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/water_wht.png); } .charsheet button[title*="arrows"].roll-button-textonly.header-h1:hover::before { background: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/arrows_wht.png); } button[title*="torches}"].roll-button-textonly.header-h1:hover::after { background: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/torches_wht.png); } .charsheet button[title*="food"].roll-button-textonly.header-h1::before, .charsheet button[title*="water"].roll-button-textonly.header-h1::after, .charsheet button[title*="arrows"].roll-button-textonly.header-h1::before, .charsheet button[title*="torches"].roll-button-textonly.header-h1::after { background-repeat: no-repeat; background-size: cover; content: ''; height: 32px; margin: -3px 6px 0 0; width: 32px; } .charsheet .gear-grid button.roll-button-textonly.header-h1 { margin: 0; padding: 2px 0 2px 0; width: -moz-available; } .charsheet .character-coins, .charsheet .character-consumables { background-color: inherit; border: 7px solid #000; border-bottom-width: 18px; border-image-repeat: repeat; border-image-slice: 0 25 40 25; border-image-source: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_column_border.png); border-image-width: 0 15px 15px 15px; border-top-width: 0; padding: 0 2px 0 2px; } .sheet-darkmode .tab-content .charsheet .wrapper .character-coins, .sheet-darkmode .tab-content .charsheet .wrapper .character-consumables { border-image-source: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_column_border_inverted.png); } .charsheet .character-experience { align-self: center; background: #000; grid-column-start: 1; grid-row-start: 8; height: 2.25em; margin-top: 3em; z-index: 1; } .charsheet .character-willpower { background-color: inherit; border: 7px solid #000; border-bottom-width: 5px; border-image-repeat: repeat; border-image-slice: 0 25 40 25; border-image-source: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_small_column_border.png); border-image-width: 0 15px 15px 15px; border-top-width: 0; grid-column-start: 1; grid-row-start: 8; padding: 0 2px 0 2px; } .sheet-darkmode .tab-content .charsheet .wrapper .character-willpower { border-image-source: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_small_column_border_inverted.png); } .charsheet .willpower-grid .willpower-box2, .charsheet .willpower-grid .willpower-box3 { padding: 0 0 10px 0; } .charsheet .character-spells { grid-row-start: 11; } .charsheet .character-relationships { grid-row-start: 10; } /* ---------------------------------- Heading */ .charsheet .heading-grid { align-items: center; display: grid; grid-template-columns: auto auto auto; grid-template-rows: 1em 3em auto; justify-content: space-around; width: 90%; } .charsheet .heading-grid div:nth-child(even), .charsheet .heading-grid div:nth-child(even) input { text-align: center; width: 11.5em; } .charsheet .heading-box1 { display: flex; flex-direction: row-reverse; } .charsheet .heading-box2 { align-self: flex-end; display: flex; justify-self: center; margin: 0 0 -60px 0; z-index: 1; } .charsheet .heading-box5 { align-self: flex-end; display: flex; justify-self: center; margin: 0 0 -40px 0; } /* raven image*/ .charsheet .heading-box7 { grid-column: 3; grid-row: 3; } .charsheet .heading-box7 .raven-image { background-color: transparent !important; background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_raven1.png"); background-repeat: no-repeat; height: 7.7em; margin: -2.2em 0 0 -6em; pointer-events: none; position: relative; transform: rotate(5deg); z-index: 1; } /* .sheet-darkmode .tab-content .charsheet .wrapper .heading-box7 .raven-image { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_raven1_inverted.png"); } */ /* ---------------------------------- Attributes */ .charsheet .attributes-grid { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0 0 5px 0; } .charsheet .attributes-grid > div:first-child { margin-bottom: 0.5em; } .charsheet .attributes-grid > div:not(:first-child) { align-items: center; display: flex; flex-wrap: wrap; margin: 0 -5px 5px -3px; } .charsheet .attributes-grid > .attributes-box2, .charsheet .attributes-grid > .attributes-box6, .charsheet .attributes-grid > .attributes-box10, .charsheet .attributes-grid > .attributes-box14 { font-size: 1.2em; justify-content: space-around; min-width: 4.5em; width: 30%; } .charsheet .attributes-grid > .attributes-box3, .charsheet .attributes-grid > .attributes-box5, .charsheet .attributes-grid > .attributes-box7, .charsheet .attributes-grid > .attributes-box9, .charsheet .attributes-grid > .attributes-box11, .charsheet .attributes-grid > .attributes-box13, .charsheet .attributes-grid > .attributes-box15, .charsheet .attributes-grid > .attributes-box17 { justify-content: left; width: 2.5em; } .charsheet .attributes-grid > .attributes-box4, .charsheet .attributes-grid > .attributes-box8, .charsheet .attributes-grid > .attributes-box12, .charsheet .attributes-grid > .attributes-box16 { justify-content: space-between; min-width: 9.25em; width: 45%; } .charsheet .attributes-box1 { margin: -2px -5px 0 -5px; width: 104%; } .charsheet .input-span { align-items: center; box-sizing: border-box; color: #555; cursor: help; display: flex; font-size: 24px; height: 34px; justify-content: center; margin: 0 0 0 -3px; padding: 0 0 5px 0; width: 34px; z-index: 1; } /*ability buttons*/ .charsheet .attributes-grid button[type="action"] { height: 2em; padding: 0; width: 100%; } .charsheet .attributes-grid button[type="action"] > span { font-size: 1.2em; font-weight: normal; } /*skills buttons*/ .charsheet .skills-grid button[type="action"] > span { font-size: .95em; } /* -----------------------------------Monster Tab layout */ .charsheet input.monster_only:checked ~ div.character .character-grid { grid-template-columns: auto auto 22em; margin: -2.5em 0 0 0; padding: 0; } .charsheet input.monster_only:checked ~ div.character .character-attributes { grid-column: 1/3; grid-row-start: 1; height: fit-content; } .charsheet input.monster_only:checked ~ div.character .monster-attacks { border: none; grid-column: 1/3; grid-row-start: 2; } .charsheet input.monster_only:checked ~ div.character .box.character-skill-dice-box { border: none; display: grid; grid-column-start: 3; grid-row-end: span 4; grid-row-start: 1; margin: 0 0 0 0; padding: 0; } .charsheet input.monster_only:checked ~ div.character .character-skills { grid-column-start: 3; grid-row-start: 3; margin-top: 2px; } .charsheet input.monster_only:checked ~ div.character .character-dice_pool { grid-column-start: 3; grid-row-start: 1; grid-row: span 2; } .charsheet input.monster_only:checked ~ div.character .character-notes { grid-column: 1/3; grid-row-start: 3; height: fit-content; } /* ---------------------------------- Monster Stats */ .charsheet .monster-stat1 > *[class^="monster-stats-box"] { align-items: center; display: flex; justify-self: center; } .charsheet .monster-stat1 > .column-header { margin-top: 1.5em; } .charsheet input.monster_only:checked ~ div.character .attributes-grid { float: right; margin: 0; padding: 0 1em 0 1em; width: 37em; } .charsheet input.monster_only:checked ~ div.character .attributes-grid > div:not(:first-child) { align-items: center; display: flex; flex-wrap: wrap; margin-bottom: 3px; } .charsheet input.monster_only:checked ~ div.character .attributes-box8 input.skull, .charsheet input.monster_only:checked ~ div.character .attributes-box12 input.skull, .charsheet input.monster_only:checked ~ div.character .attributes-box16 input.skull { margin: -10px -16px -10px -10px; } .charsheet input.monster_only:checked ~ div.character .monster-stat1 { display: grid; grid-row-gap: 2px; grid-template-columns: 4em 7em auto 3em 3em 8em 4em 4em auto; margin: 0 -6px 0 -6px; padding: 0 2px 0 2px; } .charsheet .monster-stat1 input[type="text"].header-h1 { background-color: white; color: #333; font-size: 1.65em; height: 1.35em; margin: -15px 0 0 0; padding: 0; width: 38%; } .charsheet .monster-stats-box1 { grid-column: 1/10; grid-row-start: 1; height: 4em; margin: 0; } .charsheet .monster-stats-box2 { grid-column-start: 1; grid-row-start: 1; } .charsheet .monster-stats-box3 { grid-column-start: 2; grid-row-start: 1; } .charsheet .monster-stats-box4 { grid-column-start: 3; grid-row-start: 1; } .charsheet .monster-stats-box5 { grid-column-start: 4; grid-row-start: 1; justify-self: right; } .charsheet .monster-stats-box6 { grid-column-start: 5; grid-row-start: 1; justify-self: left; } .charsheet .monster-stats-box6 span::before { content: "/"; padding: 0 2px 0 0; } .charsheet .monster-stats-box7 { grid-column-start: 6; grid-row-start: 1; } .charsheet .monster-stats-box8 { grid-column-start: 7; grid-row-start: 1; } .charsheet .monster-stats-box9 { grid-column-start: 8; grid-row-start: 1; } .charsheet .monster-stats-box10 { grid-column-start: 9; grid-row-start: 1; } .charsheet .monster-stats-box11 { grid-column-start: 1; grid-row-start: 2; width: 3em; } .charsheet .monster-stats-box12 { grid-column-start: 2; grid-row-start: 2; } .charsheet .monster-stats-box13 { grid-column-start: 3; grid-row-start: 2; } .charsheet .monster-stats-box14 { grid-column-start: 4; grid-row-start: 2; width: 3em; } .charsheet .monster-stats-box15 { grid-column-start: 5; grid-row-start: 2; } .charsheet .monster-stats-box16 { grid-column-start: 6; grid-row-start: 2; } .charsheet .monster-stats-box17 { grid-column-start: 7; grid-row-start: 2; } .charsheet .monster-stats-box18 { grid-column-start: 8; grid-row-start: 2; width: 3em; } .charsheet .monster-stats-box19 { grid-column-start: 9; grid-row-start: 2; } /* ---------------------------------- Monster Attacks */ /*rep-items counter*/ .charsheet .repeating-fields { counter-reset: rep-items 0; } .charsheet input[type="checkbox"].counted:checked + span::before { color: #000; content: counter(rep-items) " "; counter-increment: rep-items; font-size: 2em; font-weight: bold; left: 0; position: absolute; top: -3px; } .charsheet input.monster_only:checked ~ div.character .monster-attacks-grid { display: grid; grid-column-gap: 1px; grid-row-gap: 2px; grid-template-columns: 1em 2em auto 2.5em 2.5em 7em 6em; } .charsheet .monster-attacks-box { grid-column: 1/8; grid-row-start: 1; } .charsheet .monster-attacks-box1 { grid-column-start: 1; grid-row-start: 1; } .charsheet .monster-attacks-box2 { grid-column-start: 2; grid-row-start: 1; } .charsheet .monster-attacks-box3 { grid-column-start: 3; grid-row-start: 1; } .charsheet .monster-attacks-box4 { grid-column-start: 4; grid-row-start: 1; } .charsheet .monster-attacks-box5 { grid-column-start: 5; grid-row-start: 1; } .charsheet .monster-attacks-box6 { grid-column-start: 6; grid-row-start: 1; } .charsheet .monster-attacks-box7 { grid-column-start: 7; grid-row-start: 1; } .charsheet .monster-attacks-box8 { grid-column: 1/8; grid-row-start: 2; } .charsheet .monster-attacks-box8 { background-color: inherit; border: 10px solid #000; border-image-repeat: repeat; border-image-slice: 0 20 20 20; border-image-source: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_wide_column_border.png); border-image-width: 0 10px 10px 10px; border-top-width: 0; margin: -2px -7px 0 -7px; padding: 0; } .sheet-darkmode .tab-content .charsheet .wrapper .monster-attacks-box8 { border-image-source: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_wide_column_border_inverted.png); } /* ---------------------------------- Details */ .charsheet .details-grid { display: grid; grid-column-gap: 6px; grid-row-gap: 1em; grid-template-columns: auto 3em 2em auto 3em; padding: 2em 1em 2em 0; } .charsheet .details-grid > div { align-items: center; display: flex; justify-content: space-evenly; } .charsheet .details-grid > div textarea { height: 100%; } .charsheet .details-box1 { grid-column-start: 1; grid-row-start: 1; } .charsheet .details-box2 { grid-column: 2/6; grid-row-start: 1; } .charsheet .details-box3 { grid-column-start: 1; grid-row-start: 2; } .charsheet .details-box4 { grid-column: 2/6; grid-row-start: 2; } .charsheet .details-box5 { grid-column-start: 1; grid-row-start: 3; } .charsheet .details-box6 { grid-column: 2/4; grid-row-start: 3; } .charsheet .details-box7 { flex-wrap: wrap; grid-column-start: 4; grid-row-start: 3; justify-self: center; margin: 0 0 0 -5px; width: min-content; } .charsheet .details-box8 { grid-column-start: 5; grid-row-start: 3; margin: 0 0 0 -5px; } /* ---------------------------------- Appearance */ .charsheet .appearance-grid { display: grid; grid-column-gap: 2px; grid-row-gap: 10px; grid-template-columns: 5em auto; grid-template-rows: 3em auto auto auto; padding: 0; } .charsheet .appearance-grid > div:first-child { margin: 0 -10px 0 -10px; } .charsheet .appearance-grid > div { align-items: center; display: flex; justify-content: space-evenly; } .charsheet .appearance-grid > div textarea { height: 100%; } .charsheet .appearance-box1 { grid-column: 1/3; grid-row-start: 1; } .charsheet .appearance-box2 { grid-row-start: 2; } .charsheet .appearance-box3 { grid-row-start: 2; } .charsheet .appearance-box4 { grid-row-start: 3; } .charsheet .appearance-box5 { grid-row-start: 3; } .charsheet .appearance-box6 { grid-row-start: 4; } .charsheet .appearance-box7 { grid-row-start: 4; } /* ---------------------------------- Conditions */ .charsheet .conditions-grid { display: grid; grid-template-columns: 1fr 2em 1fr 2em 1fr 2em 1fr 2em 1fr 1fr; } .charsheet .conditions-grid > div { align-items: center; display: flex; justify-content: space-between; } .charsheet .conditions-box1 { grid-column-start: 1; grid-row-start: 2; } /*skull image */ .charsheet .conditions-box1 .skull-image { background-color: transparent !important; background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_skull.png"); background-repeat: no-repeat; height: 65px; margin: -2.1em 0 -1.5em 0; pointer-events: none; position: absolute; transform: rotate(-26deg); width: 100px; } .sheet-darkmode .tab-content .charsheet .wrapper .conditions-box1 .skull-image { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_skull_inverted.png"); } .charsheet .conditions-box2 { grid-column-start: 2; grid-row-start: 2; } .charsheet .conditions-box3 { grid-column-start: 3; grid-row-start: 2; } .charsheet .conditions-box4 { grid-column-start: 4; grid-row-start: 2; } .charsheet .conditions-box5 { grid-column-start: 5; grid-row-start: 2; } .charsheet .conditions-box6 { grid-column-start: 6; grid-row-start: 2; } .charsheet .conditions-box7 { grid-column-start: 7; grid-row-start: 2; } .charsheet .conditions-box8 { grid-column-start: 8; grid-row-start: 2; } .charsheet .conditions-box9 { grid-column-start: 9; grid-row-start: 2; } .charsheet input.conditions-hungry:checked ~ div > span.conditions-hungry, .charsheet input.conditions-sleepy:checked ~ div > span.conditions-sleepy, .charsheet input.conditions-thirsty:checked ~ div > span.conditions-thirsty, .charsheet input.conditions-cold:checked ~ div > span.conditions-cold { color: #a60100; font-weight: bold; } /* ---------------------------------- Critical Injuries */ .charsheet .injuries-grid { display: grid; grid-column-gap: 2px; grid-row-gap: 2px; grid-template-columns: 1fr 6em 6em 2fr 8em; padding: 0 0 2px 0; } .charsheet .injuries-box1 { grid-column: 1/6; grid-row-start: 1; } .charsheet .injuries-box2 { grid-column-start: 1; grid-row-start: 1; } .charsheet .injuries-box3 { grid-column-start: 2; grid-row-start: 1; } .charsheet .injuries-box4 { grid-column-start: 3; grid-row-start: 1; } .charsheet .injuries-box5 { grid-column-start: 4; grid-row-start: 1; } .charsheet .injuries-box6 { grid-column-start: 5; grid-row-start: 1; } .charsheet .injuries-box7 { grid-column: 1/6; grid-row-start: 2; } .charsheet .injuries-box8 { grid-column-start: 1; } /* ---------------------------------- Weapons */ .charsheet .weapons-grid { display: grid; grid-column-gap: 2px; grid-row-gap: 2px; grid-template-columns: 3em 3em auto 5em 3em 3em 3em 3em 0 3em 3em 3em 3em 0 1.5em 1.5em 1.5em 1.5em 0 3em 3em 3em; padding: 0 0 2px 0; } .charsheet .weapons-box { grid-column: 1/23; grid-row-start: 1; } .charsheet .weapons-box1 { grid-column-start: 1; grid-row-start: 1; } .charsheet .weapons-box2 { grid-column-start: 2; grid-row-start: 1; } .charsheet .weapons-box3 { grid-column-start: 3; grid-row-start: 1; } .charsheet .weapons-box4 { grid-column-start: 4; grid-row-start: 1; } .charsheet .weapons-box5 { grid-column-start: 5; grid-row-start: 1; } .charsheet .weapons-box6 { grid-column-start: 6; grid-row-start: 1; } .charsheet .weapons-box7 { grid-column-start: 7; grid-row-start: 1; padding-bottom: 3px; } .charsheet .weapons-box8 { grid-column-start: 8; grid-row-start: 1; } .charsheet .weapons-box9 { grid-column-start: 9; grid-row-start: 1; } .charsheet .weapons-box10 { grid-column-start: 10; grid-row-start: 1; justify-self: right; } .charsheet .weapons-box11 { grid-column-start: 11; grid-row-start: 1; justify-self: left; } .charsheet .weapons-box11 span::before { content: "/"; padding: 0 2px 0 0; } .charsheet .weapons-box12 { grid-column-start: 12; grid-row-start: 1; padding-bottom: 3px; } .charsheet .weapons-box13 { grid-column-start: 13; grid-row-start: 1; } .charsheet .weapons-box14 { grid-column-start: 14; grid-row-start: 1; } .charsheet .weapons-box15 { grid-column-start: 15; grid-row-start: 1; } .charsheet .weapons-box16 { grid-column-start: 16; grid-row-start: 1; } .charsheet .weapons-box17 { grid-column-start: 17; grid-row-start: 1; } .charsheet .weapons-box18 { grid-column-start: 18; grid-row-start: 1; } .charsheet .weapons-box19 { grid-column-start: 19; grid-row-start: 1; } .charsheet .weapons-box20 { grid-column-start: 20; grid-row-start: 1; } .charsheet .weapons-box21 { grid-column-start: 21; grid-row-start: 1; } .charsheet .weapons-box22 { grid-column-start: 22; grid-row-start: 1; } .charsheet .weapons-box23 { grid-column: 1/23; grid-row-start: 2; } .charsheet .weapons-box24 { grid-column-start: 1; } .charsheet .weapons-subgrid { align-items: baseline; display: grid; grid-column-gap: 2px; grid-column: 1/23; grid-row-start: 3; grid-template-columns: 4em 3em 4em 5em 3em 4em 2em 3em 6em auto; justify-items: center; padding: 0 0 2px 0; } .charsheet .weapons-box46 { grid-column-start: 1; grid-row-start: 1; } /* ---------------------------------- Dice Pool */ .charsheet .dice-header { grid-area: dice-header; } .charsheet .dice_pool-grid { display: grid; grid-template-areas: "dice-header dice-header dice-header""dice-base dice-skill dice-gear""dice-artifact dice-artifact dice-artifact""dice-rolls dice-rolls dice-rolls""dice-preset dice-preset dice-preset""dice-footer dice-footer dice-footer"; grid-template-columns: 1fr 1fr 1fr; } .charsheet .dice-base { background-color: white; border: 1px solid #000; display: grid; grid-area: dice-base; grid-template-areas: "dice-base-header dice-base-header""dice-base-col1 dice-base-col2""dice-base-col1 dice-base-col2""dice-base-col1 dice-base-col2""dice-base-col1 dice-base-col2""dice-base-col1 dice-base-col2""dice-base-col1 dice-base-col2""dice-base-col1 dice-base-col2"; grid-template-columns: 1fr 1fr; grid-template-rows: 2.5em 1fr 1fr 1fr 1fr 1fr 1fr 1fr; justify-items: center; margin: 2px 0 0 0; padding: 2px 2px 0 2px; text-align: center; } .charsheet .dice-base-header { grid-area: dice-base-header; } .charsheet .dice-base-col2 { display: flex; flex-direction: column; grid-area: dice-base-col2; } .charsheet .dice-base-col1 { display: flex; flex-direction: column; grid-area: dice-base-col1; } .charsheet .dice-skill { background-color: #db5f5f; border: 1px solid #000; color: #fff; display: grid; grid-area: dice-skill; grid-template-areas: "dice-skill-header dice-skill-header""dice-skill-col1 dice-skill-col2""dice-skill-col1 dice-skill-col2""dice-skill-col1 dice-skill-col2""dice-skill-col1 dice-skill-col2""dice-skill-col1 dice-skill-col2""dice-skill-col1 dice-skill-col2""dice-skill-col1 dice-skill-col2"; grid-template-columns: 1fr 1fr; grid-template-rows: 2.5em 1fr 1fr 1fr 1fr 1fr 1fr 1fr; justify-items: center; margin: 2px 0 0 0; padding: 2px 2px 0 2px; text-align: center; } .charsheet .dice-skill-header { grid-area: dice-skill-header; } .charsheet .dice-skill-col2 { display: flex; flex-direction: column; grid-area: dice-skill-col2; } .charsheet .dice-skill-col1 { display: flex; flex-direction: column; grid-area: dice-skill-col1; } .charsheet .dice-gear { background-color: #404040; border: 1px solid #000; color: #fff; display: grid; grid-area: dice-gear; grid-template-areas: "dice-gear-header dice-gear-header""dice-gear-col1 dice-gear-col2""dice-gear-col1 dice-gear-col2""dice-gear-col1 dice-gear-col2""dice-gear-col1 dice-gear-col2""dice-gear-col1 dice-gear-col2""dice-gear-col1 dice-gear-col2""dice-gear-col1 dice-gear-col2"; grid-template-columns: 1fr 1fr; grid-template-rows: 2.5em 1fr 1fr 1fr 1fr 1fr 1fr 1fr; justify-items: center; margin: 2px 0 0 0; padding: 2px 2px 0 2px; text-align: center; } .charsheet .dice-gear-header { grid-area: dice-gear-header; } .charsheet .dice-gear-col2 { display: flex; flex-direction: column; grid-area: dice-gear-col2; } .charsheet .dice-gear-col1 { display: flex; flex-direction: column; grid-area: dice-gear-col1; } .charsheet .dice-artifact { display: grid; grid-area: dice-artifact; grid-template-areas: "dice-artifact-header dice-artifact-header dice-artifact-header dice-artifact-header""dice-artifact-rolls dice-artifact-rolls dice-artifact-rolls dice-artifact-rolls"; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 2.5em 2em; } .charsheet .dice-artifact-header { grid-area: dice-artifact-header; margin: 5px 0 0 0; text-align: center; } .charsheet .dice-artifact-rolls { background-color: black; display: flex; flex-flow: row; grid-area: dice-artifact-rolls; height: 0.5em; justify-content: space-evenly; margin: -5px 0 0 0; width: 100%; } .charsheet .dice-rolls { display: flex; flex-flow: row; grid-area: dice-rolls; grid-template-areas: "dice-rolls-roll dice-rolls-push dice-rolls-d66"; grid-template-columns: 1fr 1fr 1fr; justify-content: space-evenly; margin-top: 10px; } .charsheet .dice-rolls-roll { grid-area: dice-rolls-roll; } .charsheet .dice-rolls-push { grid-area: dice-rolls-push; } .charsheet .dice-rolls-d66 { grid-area: dice-rolls-d66; } .charsheet .dice-preset { display: grid; grid-area: dice-preset; grid-template-areas: "dice-preset-header""dice-preset-preset"; justify-items: center; margin-top: 10px; } .charsheet .dice-preset-header { grid-area: dice-preset-header; } .charsheet .dice-preset-preset { cursor: help; grid-area: dice-preset-preset; text-align: center; } .charsheet .dice-preset-preset::before, .charsheet .dice-preset-preset::after { content: "‟"; margin-right: 2px; } .charsheet .dice-preset-preset::after { content: "”"; margin-left: 2px; } .charsheet .dice-footer { display: grid; grid-area: dice-footer; grid-template-areas: "dice-footer-clear . dice-footer-api"; grid-template-columns: auto; grid-template-rows: 2.25em; justify-items: center; margin: 10px 0 10px 0; } .charsheet .dice-footer-clear { grid-area: dice-footer-clear; } .charsheet .dice-footer-api { grid-area: dice-footer-api; margin: 0 0 2px 0; } /* ---------------------------------- Talents */ .charsheet .talents-grid { display: grid; grid-column-gap: 2px; grid-row-gap: 2px; grid-template-columns: auto 4em 3em; } .charsheet .talents-box { grid-column: 1/4; grid-row-start: 1; } .charsheet .talents-box1 { grid-column-start: 1; grid-row-start: 1; } .charsheet .talents-box2 { grid-column-start: 2; grid-row-start: 1; } .charsheet .talents-box3 { grid-column-start: 3; grid-row-start: 1; } .charsheet .talents-box4 { grid-column: 1/4; grid-row-start: 2; } /* ---------------------------------- Skills */ .charsheet .skills-row select.input, .charsheet .skills-row input.input-number { min-width: 2.5em; } /* list ordering of skills by attribute group */ .charsheet .skills-grid { display: flex; flex-direction: column; } /* animal */ .charsheet .skill-order-group:checked ~ .skills-grid span.skill-animal { order: 17; } /* crafting */ .charsheet .skill-order-group:checked ~ .skills-grid span.skill-crafting { order: 5; } /* endurance */ .charsheet .skill-order-group:checked ~ .skills-grid span.skill-endurance { order: 3; } /* healing */ .charsheet .skill-order-group:checked ~ .skills-grid span.skill-healing { order: 16; } /* insight */ .charsheet .skill-order-group:checked ~ .skills-grid span.skill-insight { order: 13; } /* lore */ .charsheet .skill-order-group:checked ~ .skills-grid span.skill-lore { order: 11; } /* manipulation */ .charsheet .skill-order-group:checked ~ .skills-grid span.skill-manipulation { order: 14; } /* marksmanship */ .charsheet .skill-order-group:checked ~ .skills-grid span.skill-marksmanship { order: 9; } /* melee */ .charsheet .skill-order-group:checked ~ .skills-grid span.skill-melee { order: 4; } /* might */ .charsheet .skill-order-group:checked ~ .skills-grid span.skill-might { order: 2; } /* move */ .charsheet .skill-order-group:checked ~ .skills-grid span.skill-move { order: 8; } /* performance */ .charsheet .skill-order-group:checked ~ .skills-grid span.skill-performance { order: 15; } /* scouting */ .charsheet .skill-order-group:checked ~ .skills-grid span.skill-scouting { order: 10; } /* sleight */ .charsheet .skill-order-group:checked ~ .skills-grid span.skill-sleight { order: 7; } /* stealth */ .charsheet .skill-order-group:checked ~ .skills-grid span.skill-stealth { order: 6; } /* survival */ .charsheet .skill-order-group:checked ~ .skills-grid span.skill-survival { order: 12; } /* end list order */ .charsheet .skills-grid > span { display: grid; grid-column-gap: 2px; grid-row-gap: 0; grid-template-columns: auto 2.5em 2.5em 2.5em 2.5em; padding: 1px 0 1px 0; position: relative; } .charsheet .skills-grid > span > div { align-items: center; display: flex; height: auto; justify-content: space-evenly; padding: 0; width: 103%; } .charsheet .skills-grid button { padding-left: 1.5em; text-align: left; } .charsheet input.monster_only:checked ~ div.character .skills-grid button { padding-left: 2px; } .charsheet .skills-box1 { background-color: #000; grid-column: 1/6; grid-row-start: 1; grid-template-columns: auto 2em 2em 2em 2em 2em; } .charsheet .skills-box2 { grid-column: 2/3; grid-row-start: 1; } .charsheet .skills-box3 { grid-column-start: 3; grid-row-start: 1; } .charsheet .skills-box4 { grid-column-start: 4; grid-row-start: 1; } .charsheet .skills-box5 { grid-column-start: 5; grid-row-start: 1; } .charsheet .skills-row .skills-row2 { grid-column: 1/6; grid-row-start: 2; grid-template-columns: 100%; } .charsheet .skills-row2-header { background-color: #000; display: grid; grid-template-columns: auto 2em 2em 2em 2em; height: 1.1em; } .charsheet .skills-row2-body { display: grid; grid-row-start: 2; grid-template-columns: auto 2em 2em 2em 2em; } .charsheet .skills-box6 { grid-column-start: 1; grid-row-start: 1; margin: -15px 0 0 0; padding: 0 0 4px 0; } .charsheet .skills-box7 { grid-column-start: 2; grid-row-start: 1; } .charsheet .skills-box8 { grid-column-start: 3; grid-row-start: 1; } .charsheet .skills-box9 { grid-column-start: 4; grid-row-start: 1; } .charsheet .skills-box10 { grid-column-start: 5; grid-row-start: 1; } .charsheet .skills-grid button { padding-left: 1.5em; text-align: left; } .charsheet .skills-grid button { padding-left: 1.5em; text-align: left; } /* ---------------------------------- Armor/Helmet */ .charsheet .armor-container { display: grid; grid-template-columns: auto; padding-bottom: 2px; } .charsheet .armor-grid { display: grid; grid-column-gap: 2px; grid-row-gap: 2px; grid-template-columns: auto 3em 3em 3em 3em 1.5em 1.5em 1.5em 1.5em; } .charsheet .armor-row2 { align-items: baseline; display: grid; grid-column-gap: 2px; grid-row-gap: 2px; grid-template-columns: 3em 3em 3em 3em 2em 2em 5em auto; justify-items: center; padding-bottom: 2px; } .charsheet .armor-subgrid { align-items: center; display: grid; grid-column-gap: 2px; grid-template-columns: auto auto auto auto auto 1.5em 1.5em 1.5em 1.5em; height: 3em; } .charsheet .armor-subgrid > span { display: flex; } .charsheet .armor-box { grid-column: 1/10; grid-row-start: 1; } .charsheet .armor-box1 { grid-column-start: 1; grid-row-start: 1; } .charsheet .armor-box2 { grid-column-start: 2; grid-row-start: 1; justify-self: right; } .charsheet .armor-box3 { grid-column-start: 3; grid-row-start: 1; justify-self: left; } .charsheet .armor-box3 span::before { content: "/"; padding: 0 2px 0 0; } .charsheet span.armor-box3.header { justify-self: normal; } .charsheet .armor-box4 { grid-column-start: 4; grid-row-start: 1; padding-bottom: 3px; } .charsheet .armor-subgrid .armor-box4 { border: 2px solid black; border-bottom-right-radius: 5px; border-top-right-radius: 5px; height: 1.45em; padding-bottom: 6px; width: 2em; } .charsheet .armor-box5 { flex-wrap: wrap; grid-column-start: 5; grid-row-start: 1; justify-self: center; width: min-content; } .charsheet .armor-box6 { grid-column-start: 6; grid-row-start: 1; } .charsheet .armor-box7 { grid-column-start: 7; grid-row-start: 1; } .charsheet .armor-box8 { grid-column-start: 8; grid-row-start: 1; } .charsheet .armor-box9 { grid-column-start: 9; grid-row-start: 1; } .charsheet .armor-box10 { grid-column: 1/10; grid-row-start: 2; position: relative; } .charsheet .armor-box10-2 { grid-column: 1/10; grid-row-start: 3; position: relative; } .charsheet .armor-box10-3 { grid-column: 1/10; grid-row-start: 4; margin: 8px 0 -4px 10px; position: relative; } .charsheet .armor-box10-4 { grid-column: 1/10; grid-row-start: 5; position: relative; } .charsheet .armor-box10-5 { grid-column: 1/10; grid-row-start: 6; position: relative; } .charsheet .armor-row2 { grid-column: 1/10; } .charsheet .armor-ar { grid-column: 1/10; } /* ---------------------------------- Shield */ .charsheet .shield-grid { display: grid; grid-column-gap: 2px; grid-row-gap: 2px; grid-row-start: 2; grid-template-columns: 3em 3em auto 3em 3em 3em 3em 3em 3em 1.5em 1.5em 1.5em 1.5em; } .charsheet .shield-row2 { align-items: baseline; grid-column-gap: 2px; grid-column: 1/14; grid-row-gap: 2px; grid-row-start: 2; grid-template-columns: 3em 3em 3em 3em 2em 2em 5em auto; justify-items: center; padding-bottom: 2px; } .charsheet .shield-box { grid-column: 1/14; grid-row-start: 1; } .charsheet .shield-box1 { grid-column-start: 1; grid-row-start: 1; } .charsheet .shield-box2 { grid-column-start: 2; grid-row-start: 1; } .charsheet .shield-box3 { grid-column-start: 3; grid-row-start: 1; } .charsheet .shield-box4 { grid-column-start: 4; grid-row-start: 1; } .charsheet .shield-box5 { grid-column-start: 5; grid-row-start: 1; } .charsheet .shield-box6 { grid-column-start: 6; grid-row-start: 1; justify-self: right; } .charsheet .shield-box7 { grid-column-start: 7; grid-row-start: 1; justify-self: left; } .charsheet .shield-box7 span::before { content: "/"; padding: 0 2px 0 0; } .charsheet .shield-box8 { grid-column-start: 8; grid-row-start: 1; padding-bottom: 3px; } .charsheet .shield-box9 { grid-column-start: 9; grid-row-start: 1; } .charsheet .shield-box10 { grid-column-start: 10; grid-row-start: 1; } .charsheet .shield-box11 { grid-column-start: 11; grid-row-start: 1; } .charsheet .shield-box12 { grid-column-start: 12; grid-row-start: 1; } .charsheet .shield-box13 { grid-column-start: 13; grid-row-start: 1; } .charsheet .shield-box14 { grid-column: 1/14; grid-row-start: 2; position: relative; } /* ---------------------------------- Gear */ .charsheet .gear-grid { align-items: center; display: grid; grid-row-gap: 2px; grid-template-columns: auto 3em 2em 3em; grid-template-rows: auto; } .charsheet .gear-subgrid { display: grid; grid-column-gap: 2px; grid-template-columns: 4em 3em 9em 3em; } .charsheet .gear-subgrid > div { align-items: center; display: flex; justify-content: space-around; } .charsheet .gear-box1 { grid-column: 1/5; grid-row-start: 1; } .charsheet .gear-box2 { grid-column-start: 2; grid-row-start: 1; } .charsheet .gear-box3 { grid-column-start: 3; grid-row-start: 1; } .charsheet .gear-box4 { grid-column-start: 4; grid-row-start: 1; } .charsheet .gear-box5 { grid-column: 1/5; grid-row-start: 2; } .charsheet .gear-weight { display: grid; grid-column-gap: 5px; grid-column: 1/5; grid-row-start: 3; grid-template-columns: auto 3em; justify-content: end; justify-items: end; } .charsheet .gear-weight > div { align-items: center; display: flex; height: 1.5em; justify-content: space-around; } .charsheet .gear-weight > div input { height: 1.5em; } .charsheet .gear-box6 { display: grid; grid-column-gap: 0.25em; grid-column: 1/5; grid-row-start: 4; grid-template-columns: auto 3em auto 3em; justify-content: end; padding-right: 5px; } .charsheet .gear-box7 { grid-column: 1/2; grid-row-start: 1; } .charsheet .gear-box8 { grid-column-start: 2; grid-row-start: 1; } .charsheet .gear-box9 { grid-column-start: 3; grid-row-start: 1; } .charsheet .gear-box10 { grid-column-start: 4; grid-row-start: 1; } .charsheet .gear-box11 { grid-column: 1/5; grid-row-start: 5; } .charsheet .gear-subgrid2 { display: grid; grid-column-gap: 2px; grid-template-columns: auto 8em; margin-top: 2px; } .charsheet .gear-box12 { margin-top: 7px; } /* ---------------------------------- Mount */ .charsheet .mount-grid, .charsheet .mount_gear-box5, .charsheet .talents-grid .talents-box4, .charsheet .gear-box5 { background-color: inherit; border: 10px solid #000; border-image-repeat: repeat; border-image-slice: 0 20 20 20; border-image-source: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_wide_column_border.png); border-image-width: 0 13px 10px 10px; border-top-width: 0; margin: -2px -7px 0 -7px; padding: 0; } .sheet-darkmode .tab-content .charsheet .wrapper .mount-grid, .sheet-darkmode .tab-content .charsheet .wrapper .mount_gear-box5, .sheet-darkmode .tab-content .charsheet .wrapper .talents-grid .talents-box4, .sheet-darkmode .tab-content .charsheet .wrapper .gear-box5 { border-image-source: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_wide_column_border_inverted.png); } .charsheet .mount-grid { display: grid; grid-row-gap: 2px; grid-template-columns: auto repeat(4, 2.5em); grid-template-rows: auto; position: relative; } .charsheet .mount-grid .header { margin: 0 -7px 0 -7px; } .charsheet .mount-grid > div { align-items: center; display: flex; justify-content: space-around; } .charsheet .mount-box1 { grid-column: 1/6; grid-row-start: 1; } .charsheet .mount-box2 { grid-column: 1/6; grid-row-start: 2; } .charsheet .mount-box3 { grid-column-start: 2; grid-row-start: 3; } .charsheet .mount-box4 { grid-column-start: 3; grid-row-start: 3; } .mount-box5 { grid-column-start: 4; grid-row-start: 3; } .charsheet .mount-box6 { grid-column-start: 5; grid-row-start: 3; } .charsheet .mount-box7 { grid-column: 1/6; grid-row-start: 4; } /* ---------------------------------- Mount_gear */ .charsheet .mount_gear-grid { display: grid; grid-row-gap: 2px; grid-template-columns: auto 3em 2em 3em; grid-template-rows: auto; } .charsheet .mount_gear-subgrid { display: grid; grid-column-gap: 2px; grid-row-gap: 2px; grid-template-columns: 4em 3em 9em 3em; } .charsheet .mount_gear-subgrid2 { display: grid; grid-template-columns: 2em auto; height: 2em; margin-top: 5px; } .charsheet .mount_gear-subgrid > .mount_gear-box11 { display: block; white-space: nowrap; } .charsheet .mount_gear-subgrid > div { align-items: center; display: flex; justify-content: space-around; } .charsheet .mount_gear-box1 { grid-column: 1/5; grid-row-start: 1; } .charsheet .mount_gear-box2 { grid-column-start: 2; grid-row-start: 1; } .charsheet .mount_gear-box3 { grid-column-start: 3; grid-row-start: 1; } .charsheet .mount_gear-box4 { grid-column-start: 4; grid-row-start: 1; } .charsheet .mount_gear-box5 { grid-column: 1/5; grid-row-start: 2; } .charsheet .mount_gear-coin { grid-column: 1/5; grid-row-start: 3; } .charsheet .mount_gear-box6 { display: grid; grid-column-gap: 0.25em; grid-column: 1/5; grid-row-start: 4; grid-template-columns: auto 3em auto 3em; height: 4em; justify-content: end; padding-right: 5px; } .charsheet .mount_gear-box7 { grid-column: 1/2; grid-row-start: 1; } .charsheet .mount_gear-box8 { grid-column-start: 2; grid-row-start: 1; } .charsheet .mount_gear-box9 { grid-column-start: 3; grid-row-start: 1; } .charsheet .mount_gear-box10 { grid-column-start: 4; grid-row-start: 1; } .charsheet .mount_gear-box11 { grid-column: 1/5; grid-row-start: 2; justify-content: left; } /* ---------------------------------- beasts */ .charsheet .beasts-grid { display: grid; grid-row-gap: 2px; grid-template-columns: 1fr 3em 3em 6em 3.5em 7em 3fr; grid-template-rows: auto; padding-bottom: 1px; } .charsheet .beasts-box { grid-column: 1/8; grid-row-start: 1; } .charsheet .beasts-box1 { grid-column-start: 1; grid-row-start: 1; } .charsheet .beasts-box2 { grid-column-start: 2; grid-row-start: 1; } .charsheet .beasts-box3 { grid-column-start: 3; grid-row-start: 1; } .charsheet .beasts-box4 { grid-column-start: 4; grid-row-start: 1; } .charsheet .beasts-box5 { grid-column-start: 5; grid-row-start: 1; } .charsheet .beasts-box6 { grid-column-start: 6; grid-row-start: 1; } .charsheet .beasts-box7 { grid-column-start: 7; grid-row-start: 1; width: 99%; } .charsheet .beasts-box8 { grid-column: 1/8; grid-row-start: 2; } /* ---------------------------------- Experience */ .charsheet .experience-grid { display: grid; grid-template-columns: 4.25fr 2.2em 1fr; margin-right: -1px; } .charsheet .experience-box1 { grid-column-start: 1; grid-row-start: 1; } .charsheet .experience-box2 { grid-column-start: 2; grid-row-start: 1; z-index: 1; } .charsheet .experience-box3 { grid-column-start: 3; grid-row-start: 1; } .charsheet .experience-grid .header > .input { z-index: 1; } .charsheet .experience-grid .header > h1 { margin: 0; } /* ---------------------------------- Willpower */ .charsheet .willpower-grid { display: grid; grid-template-columns: auto 3em 0; } .charsheet .willpower-box1 { grid-column: 1/3; grid-row-start: 1; } .charsheet .willpower-box2 { align-items: center; display: flex; grid-column: 1/2; grid-row-start: 2; height: 3em; justify-content: space-evenly; } .charsheet .willpower-box3 { align-items: center; display: flex; grid-column-start: 2; grid-row-start: 2; height: 3em; justify-content: center; } .charsheet .willpower-box3 span { margin: 0 3px 0 3px; } /* ---------------------------------- Relationships */ .charsheet .relationships-grid { display: grid; grid-column-gap: 2px; grid-row-gap: 1px; grid-template-columns: 1fr 3fr; } .charsheet .relationships-grid > .relationships-box3, .charsheet .relationships-grid > .relationships-box4 { align-items: center; box-sizing: border-box; display: flex; justify-content: space-around; } .charsheet .relationships-box1 { grid-column: 1/3; grid-row-start: 1; } .charsheet .relationships-box2 { grid-column: 1/3; grid-row-start: 2; } .charsheet .relationships-box3 { grid-column-start: 1; grid-row-start: 3; } .charsheet .relationships-box4 { grid-column: 2/3; grid-row-start: 3; } /* ---------------------------------- Notes */ .charsheet .notes-grid { display: grid; grid-column-gap: 2px; grid-row-gap: 1px; grid-template-columns: 2em 1fr 3fr; } .charsheet .notes-grid > .notes-box3, .charsheet .notes-grid > .notes-box4 { align-items: center; box-sizing: border-box; display: flex; justify-content: space-around; } .charsheet .notes-box1 { grid-column: 1/4; grid-row-start: 1; } .charsheet .notes-box2 { grid-column: 1/4; grid-row-start: 2; } .charsheet .notes-box3 { grid-column-start: 1; grid-row-start: 2; } .charsheet .notes-box4 { grid-column-start: 2; grid-row-start: 2; } .charsheet .notes-box5 { grid-column-start: 3; grid-row-start: 2; margin-top: 5px; min-height: 2em; padding-right: 6px; } /* ---------------------------------- Coins */ .charsheet .coins-grid { display: grid; grid-row-gap: 4px; grid-template-columns: 7em repeat(3, 1fr); grid-template-rows: auto; margin: 0 0 0 3px; } .charsheet .coins-grid div[class$="-header"] { margin: 0 -7px 0 -9px; } .charsheet .coins-grid > div { align-items: center; display: flex; justify-content: space-around; } .charsheet .coins-box { grid-column: 1/5; grid-row-start: 1; } .charsheet .coins-box1 { grid-column-start: 1; grid-row-start: 1; } .charsheet .coins-box2 { grid-column-start: 2; grid-row-start: 1; } .charsheet .coins-box3 { grid-column-start: 3; grid-row-start: 1; } .charsheet .coins-box4 { grid-column-start: 4; grid-row-start: 1; } .charsheet .coins-box5 { grid-column-start: 1; grid-row-start: 2; } .charsheet .coins-box17 { height: 3em; } /* ---------------------------------- Spells */ .charsheet .spells-grid { display: grid; grid-column-gap: 2px; grid-row-gap: 2px; grid-template-columns: 2.5em auto 3em 3em 5.5em 6em 11.5em; } .charsheet .spells-box6 > div > .input { align-items: center; display: flex; justify-content: space-around; } .charsheet .spells-box { grid-column: 1/8; grid-row-start: 1; } .charsheet .spells-box0 { grid-column-start: 1; grid-row-start: 1; } .charsheet .spells-box1 { grid-column-start: 2; grid-row-start: 1; } .charsheet .spells-box2 { grid-column-start: 3; grid-row-start: 1; } .charsheet .spells-box3 { grid-column-start: 4; grid-row-start: 1; } .charsheet .spells-box4 { grid-column-start: 5; grid-row-start: 1; } .charsheet .spells-box5 { grid-column-start: 6; grid-row-start: 1; } .charsheet .spells-box6 { grid-column-start: 7; grid-row-start: 1; } .charsheet .spells-box7 { grid-column: 1/8; grid-row-start: 2; } /* stronghold grid layout */ .charsheet .stronghold-grid { display: grid; grid-column-gap: 4px; grid-row-gap: 4px; grid-template-columns: 1fr 1fr auto; grid-template-rows: repeat(4, auto); margin: -3.25em 0 0 0; } .charsheet .stronghold-details { background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_top_banner.png); background-position-x: center; background-position-y: top; background-repeat: no-repeat; background-size: 100% 110px; border: none; display: flex; grid-column: 1/3; grid-row-start: 1; justify-content: space-evenly; justify-self: stretch; } .sheet-darkmode .tab-content .charsheet .wrapper .stronghold-details { background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_top_banner_inverted.png); background-position-x: center; } .charsheet .stronghold-functions { grid-column-start: 1; } .charsheet .stronghold-hirelings { grid-column-start: 2; } .charsheet .stronghold-stockpile { grid-column: 1/2; grid-row-start: 3; } .charsheet .stronghold-notes { grid-column-start: 2; grid-row-start: 3; } /* ---------------------------------- Stronghold Details */ .charsheet .stronghold-details-grid { display: grid; grid-row-gap: 2px; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 2.75em 0.5em 2.75em 2em auto; justify-content: space-around; width: 87%; } .charsheet .stronghold-details-grid > div { align-items: center; display: flex; justify-content: space-around; } .charsheet .stronghold-details-box1 { background-color: inherit; grid-column: 1/4; grid-row: 1; } .charsheet .stronghold-details-box1 h1 { color: #000; } .charsheet .stronghold-details-box2 { grid-column-start: 1; grid-row-start: 1; } .charsheet .stronghold-details-grid .stronghold-details-box2 { justify-content: flex-end; margin-right: 18%; } .charsheet .stronghold-details-box3 { grid-column-start: 1; grid-row-start: 2; } .charsheet .stronghold-details-box4 { grid-column-start: 2; grid-row-start: 3; margin: 3.5em 0 0 0; } .charsheet .stronghold-details-box5 { grid-column-start: 2; grid-row-start: 2; margin: 2.5em 0 0 0; } .charsheet .stronghold-details-box6 { grid-column-start: 3; grid-row-start: 1; } .charsheet .stronghold-details-grid .stronghold-details-box6 { justify-content: flex-start; margin-left: 15%; } .charsheet .stronghold-details-box7 { grid-column-start: 3; grid-row-start: 2; } .charsheet .stronghold-details-box8 { background-color: inherit; border: 10px solid #000; border-bottom-width: 18px; border-image-repeat: round; border-image-slice: 25 25 35 25; border-image-source: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_column_box_border.png); border-image-width: 15px 15px 15px 15px; border-top-width: 18px; grid-column: 1/4; grid-row-start: 5; margin: 0; padding: 10px; } .sheet-darkmode .tab-content .charsheet .wrapper .stronghold-details-box8 { border-image-source: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_column_box_border_inverted.png); } /* ---------------------------------- Stronghold Functions */ .charsheet .stronghold-functions-grid { display: grid; grid-column-gap: 2px; grid-row-gap: 2px; grid-template-columns: 2fr 3em 3fr; grid-template-rows: auto; } .charsheet .stronghold-functions-grid > div, .charsheet .stronghold-functions-grid > input, .charsheet .stronghold-functions-grid > textarea { box-sizing: border-box; } .charsheet .stronghold-functions-grid > .input-textarea { height: 2.25em; } .charsheet .stronghold-functions-box { grid-column: 1/4; grid-row-start: 1; } .charsheet .stronghold-functions-box1 { grid-column-start: 1; grid-row-start: 1; } .charsheet .stronghold-functions-box2 { grid-column-start: 2; grid-row-start: 1; } .charsheet .stronghold-functions-box3 { grid-column-start: 3; grid-row-start: 1; } .charsheet .stronghold-functions-box4 { grid-column: 1/4; grid-row-start: 2; } /* ---------------------------------- Stronghold Hirelings */ .charsheet .stronghold-hirelings-grid { display: grid; grid-column-gap: 2px; grid-row-gap: 2px; grid-template-columns: auto 3em 5em; grid-template-rows: auto; margin-bottom: 2px; } .charsheet .stronghold-hirelings-box { grid-column: 1/4; grid-row-start: 1; } .charsheet .stronghold-hirelings-box1 { grid-column-start: 1; grid-row-start: 1; } .charsheet .stronghold-hirelings-box2 { grid-column-start: 2; grid-row-start: 1; } .charsheet .stronghold-hirelings-box3 { grid-column-start: 3; grid-row-start: 1; } .charsheet .stronghold-hirelings-box3 span { background: transparent; grid-column-start: 3; grid-row-start: 1; height: 2em; line-height: 1em; margin-top: -9px; text-align: center; word-break: break-word; } .charsheet input.stronghold-hirelings-box3 { display: flex; justify-self: center; max-width: 3.5em; } .charsheet .stronghold-hirelings-box4 { grid-column: 1/4; grid-row-start: 2; } .charsheet .stronghold-hirelings-box5 { grid-column: 1/4; grid-row-start: 3; } /* ---------------------------------- Stronghold Stockpile */ /* list ordering of stockpile by attribute group */ .charsheet .stronghold-stockpile-grid { display: flex; flex-direction: column; } .charsheet .stockpile-order-group:checked ~ .stronghold-stockpile-grid span.stockpile-row:nth-of-type(1) { order: 12; } /* iron ore */ .charsheet .stockpile-order-group:checked ~ .stronghold-stockpile-grid span.stockpile-row:nth-of-type(2) { order: 6; } /* fur */ .charsheet .stockpile-order-group:checked ~ .stronghold-stockpile-grid span.stockpile-row:nth-of-type(3) { order: 4; } /* flour */ .charsheet .stockpile-order-group:checked ~ .stronghold-stockpile-grid span.stockpile-row:nth-of-type(4) { order: 11; } /* iron */ .charsheet .stockpile-order-group:checked ~ .stronghold-stockpile-grid span.stockpile-row:nth-of-type(5) { order: 13; } /* leather */ .charsheet .stockpile-order-group:checked ~ .stronghold-stockpile-grid span.stockpile-row:nth-of-type(6) { order: 9; } /* grain */ .charsheet .stockpile-order-group:checked ~ .stronghold-stockpile-grid span.stockpile-row:nth-of-type(7) { order: 15; } /* silver */ .charsheet .stockpile-order-group:checked ~ .stronghold-stockpile-grid span.stockpile-row:nth-of-type(8) { order: 2; } /* cloth */ .charsheet .stockpile-order-group:checked ~ .stronghold-stockpile-grid span.stockpile-row:nth-of-type(9) { order: 14; } /* meat */ .charsheet .stockpile-order-group:checked ~ .stronghold-stockpile-grid span.stockpile-row:nth-of-type(10) { order: 8; } /* gold */ .charsheet .stockpile-order-group:checked ~ .stronghold-stockpile-grid span.stockpile-row:nth-of-type(11) { order: 21; } /* wool */ .charsheet .stockpile-order-group:checked ~ .stronghold-stockpile-grid span.stockpile-row:nth-of-type(12) { order: 3; } /* fish */ .charsheet .stockpile-order-group:checked ~ .stronghold-stockpile-grid span.stockpile-row:nth-of-type(13) { order: 16; } /* stone */ .charsheet .stockpile-order-group:checked ~ .stronghold-stockpile-grid span.stockpile-row:nth-of-type(14) { order: 5; } /* food */ .charsheet .stockpile-order-group:checked ~ .stronghold-stockpile-grid span.stockpile-row:nth-of-type(15) { order: 18; } /* vegetables */ .charsheet .stockpile-order-group:checked ~ .stronghold-stockpile-grid span.stockpile-row:nth-of-type(16) { order: 7; } /* glass */ .charsheet .stockpile-order-group:checked ~ .stronghold-stockpile-grid span.stockpile-row:nth-of-type(17) { order: 1; } /* bread */ .charsheet .stockpile-order-group:checked ~ .stronghold-stockpile-grid span.stockpile-row:nth-of-type(18) { order: 17; } /* tallow */ .charsheet .stockpile-order-group:checked ~ .stronghold-stockpile-grid span.stockpile-row:nth-of-type(19) { order: 20; } /* wood */ .charsheet .stockpile-order-group:checked ~ .stronghold-stockpile-grid span.stockpile-row:nth-of-type(20) { order: 19; } /* water */ .charsheet .stockpile-order-group:checked ~ .stronghold-stockpile-grid span.stockpile-row:nth-of-type(21) { order: 10; } /* herbs */ /* end list order */ .charsheet .stronghold-stockpile-grid { display: grid; grid-row-gap: 2px; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto; } .charsheet .stronghold-stockpile-grid > div, .charsheet .stronghold-stockpile-grid > span { align-items: center; display: flex; justify-content: space-around; } .charsheet .stronghold-stockpile-grid > .column-header > span { width: 100%; } .charsheet .stronghold-stockpile-grid > span > input { max-width: 3em; } .charsheet .stronghold-stockpile-grid > span > span.label { text-align: center; width: 100%; } .charsheet .stronghold-stockpile-box1 { grid-column: 1/4; grid-row-start: 1; } .charsheet .stronghold-stockpile-box2 { grid-column-start: 1; grid-row-start: 1; text-align: right; width: 100%; } .charsheet .stronghold-stockpile-box3 { grid-column-start: 2; grid-row-start: 1; text-align: right; width: 100%; } .charsheet .stronghold-stockpile-box4 { grid-column-start: 3; grid-row-start: 1; text-align: right; width: 100%; } /* ---------------------------------- Stronghold Notes */ .charsheet .stronghold-notes-grid { display: grid; grid-column-gap: 2px; grid-row-gap: 2px; grid-template-columns: auto; grid-template-rows: auto; } .charsheet .stronghold-notes-grid > div, .charsheet .stronghold-notes-grid > input, .charsheet .stronghold-notes-grid > textarea { box-sizing: border-box; } .charsheet .stronghold-notes-box1 { grid-column: 1/2; grid-row-start: 1; } .charsheet .stronghold-notes-box2 { grid-column-start: 1; grid-row-start: 2; } /* GRID STYLING */ .charsheet .grid-item { text-align: center; } .charsheet .dice_pool-grid .grid-item { width: 103%; } .charsheet .sub-grid-item { margin: 2px; text-align: center; } .charsheet .span-two { grid-column: 1/3; } .charsheet .span-three { grid-column: 1/4; } .charsheet .span-right { grid-column: 2/4; } /**** DICE ROLLER STYLING ****/ .charsheet .wrapper button[type="action"]:hover, .charsheet .wrapper button[type="action"]:hover > span, .charsheet .wrapper button[type="roll"]:hover, .charsheet .wrapper button[type="action"].rollme:hover, .charsheet .wrapper button[type="action"].rollme:hover > span, .charsheet .wrapper button[type="roll"].rollme:hover, .charsheet .wrapper button[type="action"].rollme-relative:hover, .charsheet .wrapper button[type="action"].rollme-relative:hover > span, .charsheet .wrapper button[type="roll"].rollme-relative:hover { background: #a60100; color: #fff; font-weight: normal; } .charsheet button[type="action"] > span { color: #333; font-size: 1em; } .charsheet input.dice-selection { cursor: pointer; height: 25px; margin: -10px 0 2px 3px; opacity: 0; position: relative; width: 25px; z-index: 1; } .charsheet input.mighty, .charsheet input.epic, .charsheet input.legendary { margin: 0 -25% 0 0; width: 15%; } .charsheet input.dice-selection + span::before { background-color: #fff; border: solid 1px #000; border-radius: 5px; box-shadow: 2px 2px 2px #000; color: #000; content: attr(title); display: inline-block; height: 22px; margin: -44px 2px 5px 0; padding: 5px 0 0 0; text-align: center; vertical-align: middle; width: 28px; } .charsheet .dice-artifact-rolls input.dice-selection + span::before { margin: 0; width: 40px; } .charsheet span.artifact-die { margin: 2% 3% 0 -20%; position: relative; } .charsheet input.dice-selection:hover + span::before { background: #a9a9a9; color: #fff; } .charsheet input.attribute:checked + span::before { background: #fff; color: #000; } .charsheet input.skill:checked + span::before { background: #a60100; color: #fff; } .charsheet input.gear:checked + span::before { background: #000; color: #fff; } .charsheet input.negative:checked + span::before { background: #800080; color: #fff; } .charsheet input.mighty:checked + span::before, .charsheet input.mighty:checked + span + span { background: #235402; color: #fff; } .charsheet input.epic:checked + span::before, .charsheet input.epic:checked + span + span { background: #0088af; color: #fff; } .charsheet input.legendary:checked + span::before { background: #ff8c00; color: #000; } /* Included to help color blind users */ .charsheet button[type="action"]:focus { background: #a60100; border: 2px dotted white; color: white; } /* localized roll button */ .charsheet button[type="action"] ~ .rollme, .charsheet button[type="action"] ~ .rollme-relative { display: none; } .charsheet button[type="action"]:focus ~ .rollme { box-shadow: 2px 2px 5px black; display: inline-block; font-size: 1em; left: 2%; margin: 0; opacity: 0.85; padding: 1px; position: absolute; top: -1.25rem; z-index: 1; } .charsheet button[type="action"]:focus ~ .rollme-relative { box-shadow: 2px 2px 5px black; display: inline-block; font-size: 1em; margin: -4.4rem 0 2rem 2rem; opacity: 0.85; padding: 1px; position: relative; z-index: 1; } .charsheet button[type="action"]:focus ~ .rollme:hover, .charsheet button[type="action"]:focus ~ .rollme-relative:hover { border: 1px solid; box-shadow: 3px 3px 4px black; opacity: 1; } .charsheet button[type="action"]:focus span { color: white; } .charsheet .dice_pool-grid button[type="action"]:focus { border-image: initial; border-style: outset; border-width: 2px; } .charsheet input[type="radio"].dice-selection.attribute:checked + span::before { border: 2px dotted black; font-size: 2rem; font-weight: bold; padding: 0 2px 8px 2px; } .charsheet input[type="radio"].dice-selection.skill:checked + span::before, .charsheet input[type="radio"].dice-selection.gear:checked + span::before, .charsheet input[type="radio"].dice-selection.negative:checked + span::before, .charsheet input[type="checkbox"].mighty:checked + span::before, .charsheet input[type="checkbox"].epic:checked + span::before, .charsheet input[type="checkbox"].legendary:checked + span::before { border: 2px dotted white; font-size: 2rem; font-weight: bold; padding: 0 2px 8px 2px; } /* ROLL TEMPLATE STYLING */ /* dark mode */ .sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands .sheet-template-wrap .sheet-template-grid { background-color: #000; color: #d9d9d9; } .sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands .sheet-template-wrap { background-color: #000; } .sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands .sheet-template-grid-item.sheet-template-span-six.sheet-template-header { background-color: #0d0d0d; box-shadow: none; } .sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands .sheet-template-grid > .sheet-template-header { background-color: #0d0d0d; filter: drop-shadow(0 1px 5px #555); } .sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands .sheet-template-wrap .sheet-template-white-dice, .sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands .sheet-template-wrap .sheet-template-maroon-dice, .sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands .sheet-template-wrap .sheet-template-black-dice, .sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands .sheet-template-wrap .sheet-template-green-dice, .sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands .sheet-template-wrap .sheet-template-blue-dice, .sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands .sheet-template-wrap .sheet-template-orange-dice, .sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands .sheet-template-wrap .sheet-template-purple-dice { box-shadow: -3px 2px 3px #555; } .sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands .sheet-template-white-dice > .inlinerollresult { color: initial; } .sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands .sheet-template-white-dice ~ .sheet-template-span-left, .sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands .sheet-template-white-dice ~ .sheet-template-span-center, .sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands .sheet-template-white-dice ~ .sheet-template-span-right, .sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands .sheet-template-red-dice ~ .sheet-template-span-left, .sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands .sheet-template-red-dice ~ .sheet-template-span-center, .sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands .sheet-template-red-dice ~ .sheet-template-span-right, .sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands .sheet-template-black-dice ~ .sheet-template-span-left, .sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands .sheet-template-black-dice ~ .sheet-template-span-center, .sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands .sheet-template-black-dice ~ .sheet-template-span-right { background-color: #222; color: #d9d9d9; } .sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands .sheet-template-grid .sheet-scroll-text { background-color: #222; color: #d9d9d9; } .sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands div.sheet-template-subtitle { font-weight: normal; } .sheet-rolltemplate-forbiddenlands .sheet-small-caps { font-variant-caps: small-caps; } .sheet-rolltemplate-forbiddenlands { padding: 12px 0 12px 0; } .sheet-rolltemplate-forbiddenlands span.sheet-label { font-family: "IM Fell English", "Times New Roman", Times, serif; font-weight: bold; } .sheet-rolltemplate-forbiddenlands .sheet-template-wrap { background-color: #f1f1f1; border: 5px solid #000; border-image-outset: 6 4 4 4; border-image-repeat: stretch repeat; border-image-slice: 74; border-image-source: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/border_small_fixed.png); border-image-width: 50px 80px 50px 80px; border-radius: 5px; color: initial; box-sizing: border-box; margin: 5px 0 5px -20px; padding: 5px 0 5px 0; width: 240px; } .sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands.sheet-rolltemplate-forbiddenlands .sheet-template-wrap { border-image-source: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/border_small_fixed_inverted.png); } .sheet-rolltemplate-forbiddenlands div.sheet-template-header { background-color: #000; border-bottom-left-radius: 9px; border-bottom-right-radius: 9px; border-top-left-radius: 0; border-top-right-radius: 0; color: #fff; display: flex; font-family: "IM Fell English", "Times New Roman", Times, serif; font-size: 1em; justify-content: space-evenly; justify-self: center; margin: 2px -9px 2px -9px; padding: 0 5px 0 5px; width: 105%; word-break: break-word; } .sheet-rolltemplate-forbiddenlands .sheet-template-header a { color: #fff; } .sheet-rolltemplate-forbiddenlands .sheet-template-span-left.sheet-template-header { justify-content: center; width: 43%; } .sheet-rolltemplate-forbiddenlands .sheet-template-span-center.sheet-template-header { z-index: 1; } .sheet-rolltemplate-forbiddenlands .sheet-template-span-right.sheet-template-header { justify-content: center; width: 43%; } .sheet-rolltemplate-forbiddenlands .sheet-template-grid-item.sheet-right { justify-self: right; } .sheet-rolltemplate-forbiddenlands .sheet-template-grid-item.sheet-left { justify-self: left; } .sheet-rolltemplate-forbiddenlands .sheet-template-grid-item.sheet-condensed { font-size: 0.95em; line-height: 1.2em; } .sheet-rolltemplate-forbiddenlands .sheet-template-grid-item.sheet-template-span-six.sheet-template-header:empty { display: none; } .sheet-rolltemplate-forbiddenlands div.sheet-template-subtitle { align-items: center; display: flex; font-family: "IM Fell English", "Times New Roman", Times, serif; font-size: 1em; font-weight: bold; justify-content: center; margin: 0 -5px 0 -5px; padding: 0 2px 0 2px; } .sheet-rolltemplate-forbiddenlands .sheet-template-white-dice ~ .sheet-template-span-left, .sheet-rolltemplate-forbiddenlands .sheet-template-white-dice ~ .sheet-template-span-center, .sheet-rolltemplate-forbiddenlands .sheet-template-white-dice ~ .sheet-template-span-right, .sheet-rolltemplate-forbiddenlands .sheet-template-red-dice ~ .sheet-template-span-left, .sheet-rolltemplate-forbiddenlands .sheet-template-red-dice ~ .sheet-template-span-center, .sheet-rolltemplate-forbiddenlands .sheet-template-red-dice ~ .sheet-template-span-right, .sheet-rolltemplate-forbiddenlands .sheet-template-black-dice ~ .sheet-template-span-left, .sheet-rolltemplate-forbiddenlands .sheet-template-black-dice ~ .sheet-template-span-center, .sheet-rolltemplate-forbiddenlands .sheet-template-black-dice ~ .sheet-template-span-right { background-color: #ddd; border-radius: 0; margin: 5px 1px 0 1px; } .sheet-rolltemplate-forbiddenlands div.sheet-template-footer { font-family: "IM Fell English", "Times New Roman", Times, serif; font-size: 0.75em; margin: 5px; padding: 2px; text-align: justify; } .sheet-rolltemplate-forbiddenlands div.sheet-free-text { font-size: 1em; line-height: inherit; margin: -10px 5px 2px 5px; padding: 0; text-align: left; } .sheet-rolltemplate-forbiddenlands .sheet-template-grid .sheet-scroll-text { font-size: 1em; line-height: inherit; margin: 0; max-height: 6em; min-height: 1.25em; overflow-y: auto; text-align: left; } .sheet-rolltemplate-forbiddenlands .sheet-template-grid { background-color: transparent; display: grid; font-family: "IM Fell English", "Times New Roman", Times, serif; grid-gap: 1px; grid-template-columns: repeat(6, 1fr); margin: 3px 2px 2px 2px; padding: 0; } .sheet-rolltemplate-forbiddenlands .sheet-template-grid-item { background-color: transparent; border: none; border-radius: 5px; padding: 0 3px 0 3px; text-align: center; } .sheet-template-grid-item.sheet-template-span-six:last-child { max-height: 6em; overflow-y: auto; text-align: left; } .sheet-rolltemplate-forbiddenlands .sheet-template-span-six { grid-column: 1 / 7; } .sheet-rolltemplate-forbiddenlands .sheet-template-span-half { grid-column: 1 / 4; line-height: 1em; } .sheet-rolltemplate-forbiddenlands .sheet-template-span-2nd-half { grid-column: 4 / 7; line-height: 1em; } .sheet-rolltemplate-forbiddenlands .sheet-template-span-left { grid-column: 1 / 3; } .sheet-rolltemplate-forbiddenlands .sheet-template-span-center { grid-column: 3 / 5; } .sheet-rolltemplate-forbiddenlands .sheet-template-span-right { grid-column: 5 / 7; } /* used for consumables single dice roll */ .sheet-rolltemplate-forbiddenlands .sheet-template-span-center-die { grid-column: 3 / 5; margin-left: 24%; width: 38%; } .sheet-rolltemplate-forbiddenlands .sheet-template-span-one { grid-column: 1 / 2; } .sheet-rolltemplate-forbiddenlands .sheet-template-span-two { grid-column: 2 / 3; } .sheet-rolltemplate-forbiddenlands .sheet-template-span-three { grid-column: 3 / 4; } .sheet-rolltemplate-forbiddenlands .sheet-template-span-four { grid-column: 4 / 5; } .sheet-rolltemplate-forbiddenlands .sheet-template-span-five { grid-column: 5 / 6; } .sheet-rolltemplate-forbiddenlands .sheet-template-span-shix { grid-column: 6 / 7; } .sheet-rolltemplate-forbiddenlands .sheet-template-artifact-1 { background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/dice_legendary_success_1.png); background-repeat: no-repeat; background-size: contain; } .sheet-rolltemplate-forbiddenlands .sheet-template-artifact-2 { background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/dice_legendary_success_2.png); background-repeat: no-repeat; background-size: contain; } .sheet-rolltemplate-forbiddenlands .sheet-template-artifact-3 { background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/dice_legendary_success_3.png); background-repeat: no-repeat; background-size: contain; } .sheet-rolltemplate-forbiddenlands .sheet-template-artifact-4 { background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/dice_legendary_success_4.png); background-repeat: no-repeat; background-size: contain; } .sheet-rolltemplate-forbiddenlands .sheet-template-success { height: auto; max-width: 100%; } .sheet-rolltemplate-forbiddenlands .sheet-template-bane { height: auto; max-width: 100%; } .sheet-rolltemplate-forbiddenlands .sheet-template-bold { font-weight: bold; } .sheet-rolltemplate-forbiddenlands .sheet-template-inline { background-color: transparent; border: none; display: inline-block; font-family: "IM Fell English", "Times New Roman", Times, serif; font-size: 2em; line-height: 0; margin: 8px 0 18px 0; } .sheet-rolltemplate-forbiddenlands .sheet-template-smaller { font-size: 0.85em; } /* add drop shadow to dice */ .sheet-rolltemplate-forbiddenlands .sheet-template-white-dice, .sheet-rolltemplate-forbiddenlands .sheet-template-maroon-dice, .sheet-rolltemplate-forbiddenlands .sheet-template-black-dice, .sheet-rolltemplate-forbiddenlands .sheet-template-green-dice, .sheet-rolltemplate-forbiddenlands .sheet-template-blue-dice, .sheet-rolltemplate-forbiddenlands .sheet-template-orange-dice, .sheet-rolltemplate-forbiddenlands .sheet-template-purple-dice { box-shadow: -3px 2px 3px #000; margin: 1px; } .sheet-rolltemplate-forbiddenlands .sheet-template-grid-item.sheet-template-span-six.sheet-template-header { box-shadow: 0 2px 7px #000; margin-bottom: 5px; } .sheet-rolltemplate-forbiddenlands .sheet-template-white-dice { background-color: #fff; border: 1px solid #000; border-radius: 5px; line-height: 0; padding: 3px; text-align: center; } .sheet-rolltemplate-forbiddenlands .sheet-template-maroon-dice { background-color: #a60100; border: 1px solid #000; border-radius: 5px; color: #fff; line-height: 0; padding: 3px; text-align: center; } .sheet-rolltemplate-forbiddenlands .sheet-template-black-dice { background-color: #000; border: 1px solid transparent; border-radius: 5px; color: #fff; line-height: 0; padding: 3px; text-align: center; } .sheet-rolltemplate-forbiddenlands .sheet-template-green-dice { background-color: #235402; border: 1px solid #000; border-radius: 5px; color: #fff; line-height: 0; padding: 3px; text-align: center; } .sheet-rolltemplate-forbiddenlands .sheet-template-blue-dice { background-color: #0088af; border: 1px solid #000; border-radius: 5px; color: #fff; line-height: 0; padding: 3px; text-align: center; } .sheet-rolltemplate-forbiddenlands .sheet-template-orange-dice { background-color: #ff8c00; border: 1px solid #000; border-radius: 5px; color: #fff; line-height: 0; padding: 3px; text-align: center; } .sheet-rolltemplate-forbiddenlands .sheet-template-purple-dice { background-color: #800080; border: 1px solid #000; border-radius: 5px; color: #fff; line-height: 0; padding: 3px; text-align: center; } .sheet-rolltemplate-forbiddenlands .sheet-template-grid-item span.inlinerollresult { background-color: transparent; border: none; } .sheet-rolltemplate-forbiddenlands .sheet-template-white-dice > .inlinerollresult, .sheet-rolltemplate-forbiddenlands .sheet-template-maroon-dice > .inlinerollresult, .sheet-rolltemplate-forbiddenlands .sheet-template-black-dice > .inlinerollresult, .sheet-rolltemplate-forbiddenlands .sheet-template-green-dice > .inlinerollresult, .sheet-rolltemplate-forbiddenlands .sheet-template-blue-dice > .inlinerollresult, .sheet-rolltemplate-forbiddenlands .sheet-template-orange-dice > .inlinerollresult, .sheet-rolltemplate-forbiddenlands .sheet-template-purple-dice > .inlinerollresult { background-color: transparent; border: none; display: inline-block; font-family: "IM Fell English", "Times New Roman", Times, serif; font-size: 2em; font-weight: normal; line-height: 1em; margin: -4px 0 0 0; padding: 0; } .sheet-rolltemplate-forbiddenlands .sheet-template-green-dice > div > .sheet-template-inline, .sheet-rolltemplate-forbiddenlands .sheet-template-blue-dice > div > .sheet-template-inline, .sheet-rolltemplate-forbiddenlands .sheet-template-orange-dice > div > .sheet-template-inline { font-size: 2.25em; font-variant: diagonal-fractions; text-shadow: 1px 1px 1px black; } .sheet-rolltemplate-forbiddenlands .inlinerollresult.fullcrit { border: none; color: inherit; } .sheet-rolltemplate-forbiddenlands .inlinerollresult.fullfail { border: none; color: inherit; } .sheet-rolltemplate-forbiddenlands .inlinerollresult.importantroll { border: none; color: inherit; }