Skip to content

Instantly share code, notes, and snippets.

@krmaxwell
Forked from Lexaire/into_the_odd.css
Created February 24, 2019 20:30
Show Gist options
  • Save krmaxwell/7784d53d997273e8df39e74ea015f5ec to your computer and use it in GitHub Desktop.
Save krmaxwell/7784d53d997273e8df39e74ea015f5ec to your computer and use it in GitHub Desktop.
Roll20 Character Sheet for Into the Odd
.repitem {
display: flex;
align-items: center;
margin-bottom: 3px;
justify-content: space-between;
}
.sheet-ability-value, .sheet-ability-button {
display: inline-block !important;
}
.sheet-flex-between {
display: flex;
justify-content: space-between;
}
.sheet-flex {
display: flex;
align-items: start;
}
.sheet-noborder, .sheet-thick-border {
padding: 15px;
}
.sheet-thick-border {
box-sizing: border-box;
border: 4px solid;
overflow: auto;
margin-bottom: 10px;
}
.sheet-col-left {
width: 48%;
}
.sheet-col-right {
width: 51%;
}
input {
border-radius: 0;
border: 1px solid;
}
input[type=number] {
-moz-appearance: textfield;
}
input[type=number]::-webkit-outer-spin-button,.charsheet input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.sheet-info-name {
display: flex;
align-items: center;
margin-bottom: 5px;
}
.sheet-info-name input {
flex: 1 1 0;
margin: 0 1%;
}
.sheet-info-row {
display: flex;
text-align: center;
flex-wrap: wrap;
justify-content: space-evenly;
}
.sheet-info-row input {
text-align: center;
}
.sheet-info1 {
width: 11%;
}
.sheet-info2 {
width: 20%;
}
.sheet-info3 {
width: 32%;
}
.sheet-bottom-line {
border: none;
border-bottom: 1px solid;
}
.sheet-ability {
width: 33%;
text-align: center;
}
input[type=number].sheet-ability-modifier {
width: 40px;
height: 40px;
border-radius: 20px;
font-size: 20px;
text-align: center;
padding: 0;
}
.sheet-subtext {
width: 138px;
}
input[type=number].sheet-ability-value {
width: 40px;
height: 40px;
font-size: 20px;
text-align: center;
display: block;
margin: 6px auto;
}
button[type=roll].sheet-ability-button {
width: 40px;
height: 40px;
font-size: 26px;
background-color: white;
background-image: none;
color: black;
text-shadow: none;
margin: auto;
display: block;
}
.sheet-equipment-name {
width: 88%;
padding-left: 4px;
}
.sheet-equipment {
display: flex;
flex-wrap: wrap;
align-content: start;
}
.sheet-equipment .repcontainer {
width: 100%;
order: 2;
}
.sheet-equipment h3 {
order: 1;
}
.sheet-equipment .repcontrol {
order: 4;
width: 100%;
}
input[type=number].sheet-encumbrance,select.sheet-skillvalue {
width: 45px;
text-align: center;
}
.sheet-encumbrance-total .sheet-encumbrance {
font-weight: bold;
}
.sheet-encumbrance-total {
font-weight: bold;
align-items: center;
margin: 5px 0;
padding-top: 3px;
order: 3;
width: 100%;
}
.sheet-top-line {
border-top: 2px solid black;
}
.sheet-rep-title {
text-align: center;
padding: 2px 0;
font-weight: bold;
align-items: center;
margin-bottom: 3px;
}
.sheet-weapon-name {
width: 65%;
}
.sheet-damage {
width: 55px;
vertical-align: top;
}
button[type=roll].sheet-attack-button {
width: 30px;
height: 28px;
font-size: 20px;
background-color: white;
background-image: none;
color: black;
margin-right: 0;
text-Shadow: none;
}
.sheet-dummy-attack-button {
width: 30px;
margin-left: 3px;
}
/* Roll Templates */
.sheet-rolltemplate-ito-save table {
width: 100%;
background: #FFFFFF;
}
.sheet-rolltemplate-ito-save caption {
text-align: center;
background: black;
color: white;
font-weight: bold;
line-height: 1em;
}
.sheet-rolltemplate-ito-save td {
border-bottom: 1px solid black;
padding: 0 4px !important;
}
.sheet-rolltemplate-ito-save td.sheet-template_label {
font-weight: bold;
}
.sheet-rolltemplate-ito-save td.sheet-template_value {
text-align: center;
}
.sheet-rolltemplate-ito-save .inlinerollresult {
display: inline-block;
min-width: 1.5em;
text-align: center;
border: 2px solid black;
background: #BEBEBE;
}
/* Erase the default highlighting of crits/fails */
.sheet-rolltemplate-ito-save .inlinerollresult.fullcrit,
.sheet-rolltemplate-ito-save .inlinerollresult.fullfail,
.sheet-rolltemplate-ito-save .inlinerollresult.importantroll {
border: 2px solid black;
background: #BEBEBE;
}
<div class="sheet-flex-between">
<div class="sheet-col-left sheet-noborder">
<div class="sheet-flex">
<div style="margin-right: 20px;">
<span>Hit Points</span>
<input type="number" class="sheet-ability-value" name="attr_hp" value="6"> /
<input type="number" class="sheet-ability-value" name="attr_hp_max" value="6">
</div>
<div>
<span>Armour</span>
<input type="number" class="sheet-ability-value" name="attr_armour" value="1">
</div>
</div>
</div>
<div class="sheet-col-right sheet-noborder">
<div class="sheet-info-name sheet-info-margin">
<span>Name: </span>
<input type="text" class="sheet-bottom-line" name="attr_name">
</div>
<div class="sheet-info-row">
<input type="text" class="sheet-info3" name="attr_class">
<input type="text" class="sheet-info3" name="attr_level">
<input type="text" class="sheet-info2" name="attr_age">
<input type="text" class="sheet-info1" name="attr_sex">
<span class="sheet-info3">Job</span>
<span class="sheet-info3">Level</span>
<span class="sheet-info2">Age</span>
<span class="sheet-info1">Sex</span>
</div>
<div class="sheet-info-row">
<select name="attr_wtype" class="dtype">
<option value="">Never Whisper Rolls</option>
<option value="/w gm ">Always Whisper Rolls</option>
</select>
</div>
</div>
</div>
<div class="sheet-thick-border">
<h3>Ability Scores</h3>
<div class="sheet-flex">
<div class="sheet-ability">
<span>Strength</span>
<input type="number" class="sheet-ability-value" name="attr_str" value="10"> /
<input type="number" class="sheet-ability-value" name="attr_str_max" value="10">
<button class="sheet-ability-button btn ui-draggable" type="roll" value="@{wtype}&{template:ito-save} {{name=Strength Save}} {{success=[[@{str}]]}} {{roll1=[[1d20]]}}" name="roll_StrCheck"/>
</div>
<div class="sheet-ability">
<span>Dexterity</span>
<input type="number" class="sheet-ability-value" name="attr_dex" value="10"> /
<input type="number" class="sheet-ability-value" name="attr_dex_max" value="10">
<button class="sheet-ability-button btn ui-draggable" type="roll" value="@{wtype}&{template:ito-save} {{name=Dexterity Save}} {{success=[[@{dex}]]}} {{roll1=[[1d20]]}}" name="roll_DexCheck"/>
</div>
<div class="sheet-ability">
<span>Willpower</span>
<input type="number" class="sheet-ability-value" name="attr_wil" value="10"> /
<input type="number" class="sheet-ability-value" name="attr_wil_max" value="10">
<button class="sheet-ability-button btn ui-draggable" type="roll" value="@{wtype}&{template:ito-save} {{name=Willpower Save}} {{success=[[@{wil}]]}} {{roll1=[[1d20]]}}" name="roll_WilCheck"/>
</div>
</div>
</div>
<div class="sheet-flex-between">
<div class="sheet-col-left sheet-thick-border">
<h3>Weapons</h3>
<div class="sheet-rep-title sheet-flex-between">
<span class="sheet-weapon-name">Name</span>
<span class="sheet-damage">Damage</span>
<span class="sheet-dummy-attack-button"></span>
</div>
<fieldset class="repeating_weapons">
<input type="text" name="attr_weaponname" class="sheet-bottom-line sheet-weapon-name">
<select name="attr_weapondamage" class="dtype sheet-damage">
<option value="d4">d4</option>
<option value="d6">d6</option>
<option value="d8">d8</option>
<option value="d10">d10</option>
<option value="d12">d12</option>
</select>
<button class="sheet-attack-button btn ui-draggable" type="roll" value="@{wtype}&{template:default} {{name=@{name}'s @{weaponname}}} {{damage=[[@{weapondamage}]]}}" name="roll_Attack"></button>
</fieldset>
</div>
<div class="sheet-col-right sheet-thick-border sheet-equipment">
<h3>Equipment</h3>
<fieldset class="repeating_equipment">
<input type="text" name="attr_itemname" class="sheet-bottom-line sheet-equipment-name">
<input type="number" name="attr_encumbrance" class="sheet-encumbrance sheet-bottom-line" value="0" step="0.1">
</fieldset>
<div class="sheet-top-line sheet-flex-between sheet-encumbrance-total">
<span class="sheet-equipment-name">Total</span>
<input type="number" name="attr_encumbrance_total" class="sheet-encumbrance" value="0" readonly="">
</div>
</div>
</div>
<div class="sheet-flex-between">
<div class="sheet-col-left sheet-thick-border">
<h3>Notes</h4>
<div class="sheet-flex">
<textarea name="attr_notes" style="width:97%;height:180px"></textarea>
</div>
</div>
<div class="sheet-col-right sheet-thick-border">
<h3>Notes 2</h4>
<div class="sheet-flex">
<textarea name="attr_notes2" style="width:97%;height:180px"></textarea>
</div>
</div>
</div>
<!-- Sheet workers -->
<script type="text/worker">
// Equipment counter
on('change:repeating_equipment remove:repeating_equipment', () => {
"use strict";
getSectionIDs('repeating_equipment', idArray => {
getAttrs(idArray.map(id => `repeating_equipment_${id}_encumbrance`), v => {
const total = Object.values(v).reduce((m, w) => (m + (parseFloat(w) || 0)), 0);
setAttrs({
encumbrance_total: total
});
});
});
});
</script>
<!--
&{template:ito-save} {{name=Test}} {{success=[[50]]}} {{roll1=[[1d100]]}}
-->
<rolltemplate class="sheet-rolltemplate-ito-save">
<table>
<caption>{{name}}</caption>
<tr>
<td class="template_label">Target:</td>
<td class="template_value">{{success}}</td>
</tr>
<tr>
<td class="template_label">Rolled:</td>
<td class="template_value">{{roll1}}</td>
</tr>
<tr style="background:#DFF0D8;">
{{#rollBetween() roll1 1 success}}
<td class="template_value" colspan="2">Success</td>
{{/rollBetween() roll1 1 success}}
</tr>
<tr style="background:#F2DEDE;">
{{#rollGreater() roll1 success}}
<td class="template_value" colspan="2">Failure</td>
{{/rollGreater() roll1 success}}
</tr>
</table>
</rolltemplate>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment