Nighthawk/roll20-character-sheets
1
0
Fork 0
mirror of https://github.com/Nighthawk42/roll20-character-sheets.git synced 2026-08-30 03:40:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

basic layout solid

Browse Source
This commit is contained in:
David Garrett
2023-09-09 21:31:59 -04:00
parent 33c899b157
commit e3e371f016
3 changed files with 192 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Cairn/cairn.css
+85 -30
View File
@@ -13,7 +13,7 @@ label {
.flex-container {
display: flex;
column-gap: 12px;
gap: 12px;
justify-content: left;
align-items: center;
}
@@ -22,33 +22,30 @@ label {
flex: 1 1 auto;
}
.flex-container.inputs {
flex-basis: auto;
column-gap: 0;
}
.flex-container.top {
align-items: top;
align-items: start;
}
.flex-container-inputs {
display: flex;
flex-basis: auto;
column-gap: 0;
justify-content: left;
align-items: center;
}
.flex-container-stats {
display: flex;
flex-basis: auto;
column-gap: 0;
justify-content: left;
align-items: center;
}
.flex-container-list {
display: flex;
.flex-container.column {
flex-direction: column;
align-items: start;
}
.flex-container.column.bottom {
align-self: flex-end;
}
.flex-container.list {
flex-direction: column;
align-items: start;
justify-content: start;
flex-basis: auto;
gap: 6px;
justify-content: left;
align-items: center;
}
.flex-container.content-row {
@@ -58,6 +55,16 @@ label {
.flex-container.top.content-row {
align-items: start;
margin-top: 12px;
margin-bottom: 12px;
}
.flex-container-stats {
display: flex;
flex-basis: auto;
column-gap: 0;
justify-content: left;
align-items: center;
}
.horizontal-separator {
@@ -70,20 +77,56 @@ label {
min-height: 5px;
}
/* Title of the sheet */
/* Grid layout styles */
.title {
.grid-offense {
display: grid;
grid-template-columns: repeat(3, auto);
grid-template-rows: repeat(3, auto);
column-gap: 12px;
row-gap: 6px;
}
.grid-inventory {
display: grid;
grid-template-columns: repeat(3, auto);
grid-template-rows: repeat(11, auto);
column-gap: 12px;
row-gap: 6px;
}
/* Character styles */
h1 {
color: black;
font-family: "Pirata One";
font-size: 30px;
}
.characterviewer label {
font-size: 1em;
h2 {
color: black;
font-family: "Pirata One";
font-weight: 400;
font-size: 18px;
margin-top: 24px;
}
.charsheet label {
font-size: 14px;
margin-bottom: 0;
line-height: normal;
}
.charsheet input[type="checkbox"] {
height: 14px;
}
select {
width: auto;
height: auto;
margin-bottom: 0;
}
/* Stats column containing hit points and abilities */
.stat-input {
@@ -99,7 +142,7 @@ label {
rgba(0, 0, 0, 0) calc(50% + 0.8px),
rgba(0, 0, 0, 0) 100%
);
width: 10px;
min-width: 10px;
}
/* Templates */
@@ -111,7 +154,6 @@ label {
.sheet-rolltemplate-test-under .sheet-template-header {
background-color: black;
color: white;
font-family: 'Open Sans', sans-serif;
padding: 5px;
}
@@ -131,14 +173,12 @@ label {
.sheet-rolltemplate-test-under .sheet-template-outcome-success {
background-color: black;
color: #01ff70;
font-family: 'Open Sans', sans-serif;
padding: 5px;
}
.sheet-rolltemplate-test-under .sheet-template-outcome-failure {
background-color: black;
color: #ff4136;
font-family: 'Open Sans', sans-serif;
padding: 5px;
}
@@ -149,3 +189,18 @@ label {
.sheet-rolltemplate-test-under .inlinerollresult.fullcrit {
border: 2px solid #ff4136;
}
.sheet-rolltemplate-attack {
border: 1px solid black;
}
.sheet-rolltemplate-attack .sheet-template-header {
background-color: black;
color: white;
padding: 5px;
}
.sheet-rolltemplate-attack .sheet-template-result {
background-color: white;
padding: 5px;
}
Cairn/cairn.html
+98 -74
View File
@@ -1,10 +1,10 @@
<span class="title">Cairn</span>
<h1 data-i18n="title"></h1>
<!-- Personal information -->
<div class="flex-container content-row">
<div class="flex-container">
<label data-i18n="name" for="attr_name" ></label>
<input type="text" name="attr_name" id="attr_name" />
<label data-i18n="character-name" for="attr_character_name" ></label>
<input type="text" name="attr_character_name" id="attr_character_name" />
</div>
<div class="flex-container">
<label data-i18n="pronouns" for="attr_pronouns" ></label>
@@ -23,13 +23,15 @@
</div>
</div>
<!-- Primary attributes -->
<h2 data-i18n="saves"></h2>
<!-- Saves -->
<div class="flex-container content-row">
<div class="flex-container-stats">
<label data-i18n="strength" ></label>
<div class="flex-container-inputs">
<div class="flex-container inputs">
<input class="stat-input" type="number" name="attr_ability_strength" id="attr_ability_strength" min="0" max="18" value="10"/>
<div class="stat-input-separator"></div>
<div class="stat-input-separator">&nbsp;</div>
<input class="stat-input" type="number" name="attr_ability_strength_max" id="attr_ability_strength_max" min="0" max="18" value="10"/>
</div>
<button class="custom-roll-button" type="roll"
@@ -38,9 +40,9 @@
</div>
<div class="flex-container-stats">
<label data-i18n="dexterity" ></label>
<div class="flex-container-inputs">
<div class="flex-container inputs">
<input class="stat-input" type="number" name="attr_ability_dexterity" id="attr_ability_dexterity" min="0" max="18" value="10"/>
<div class="stat-input-separator"></div>
<div class="stat-input-separator">&nbsp;</div>
<input class="stat-input" type="number" name="attr_ability_dexterity_max" id="attr_ability_dexterity_max" min="0" max="18" value="10"/>
</div>
<button class="custom-roll-button" type="roll"
@@ -49,9 +51,9 @@
</div>
<div class="flex-container-stats">
<label data-i18n="willpower" ></label>
<div class="flex-container-inputs">
<div class="flex-container inputs">
<input class="stat-input" type="number" name="attr_ability_willpower" id="attr_ability_willpower" min="0" max="18" value="10"/>
<div class="stat-input-separator"></div>
<div class="stat-input-separator">&nbsp;</div>
<input class="stat-input" type="number" name="attr_ability_willpower_max" id="attr_ability_willpower_max" min="0" max="18" value="10"/>
</div>
<button class="custom-roll-button" type="roll"
@@ -60,110 +62,123 @@
</div>
</div>
<!-- Secondary attributes -->
<div class="flex-container content-row">
<div class="flex-container">
<label data-i18n="armor" ></label>
<input class="stat-input" type="number" name="attr_armor" id="attr_armor" min="0" max="3" value="0"/>
</div>
<div class="flex-container-stats">
<label data-i18n="hit-protection" ></label>
<div class="flex-container-inputs">
<input class="stat-input" type="number" name="attr_hit_protection" id="attr_hit_protection" min="0" value="0"/>
<div class="stat-input-separator"></div>
<input class="stat-input" type="number" name="attr_hit_protection_max" id="attr_hit_protection_max" min="0" value="0"/>
</div>
</div>
<div class="flex-container">
<label data-i18n="deprived" ></label>
<input class="stat-input" type="checkbox" name="attr_deprived" id="attr_deprived"/>
</div>
</div>
<!-- Combat and recovery -->
<div class="flex-container top content-row">
<!-- Weapons -->
<div class="flex-container-list">
<!-- Combat and recovery -->
<div class="flex-container column">
<h2 data-i18n="defense"></h2>
<div class="flex-container">
<label data-i18n="weapon" ></label>
<label data-i18n="damage" ></label>
<div class="flex-container">
<label data-i18n="armor"></label>
<input class="stat-input" type="number" name="attr_armor" id="attr_armor" min="0" max="3" value="0"/>
</div>
<div class="flex-container-stats">
<label data-i18n="hit-protection"></label>
<div class="flex-container inputs">
<input class="stat-input" type="number" name="attr_hit_protection" id="attr_hit_protection" min="0" value="0"/>
<div class="stat-input-separator">&nbsp;</div>
<input class="stat-input" type="number" name="attr_hit_protection_max" id="attr_hit_protection_max" min="0" value="0"/>
</div>
</div>
</div>
<div class="flex-container">
<h2 data-i18n="offense"></h2>
<div class="grid-offense">
<label data-i18n="weapon"></label>
<label data-i18n="damage"></label>
<span></span>
<input type="text" name="attr_weapon_1" />
<input type="number" name="attr_weapon_dmg_1" />
</div>
<div class="flex-container">
<select name="attr_weapon_1_dmg" id="attr_weapon_1_dmg">
<option value="4" selected>d4</option>
<option value="6">d6</option>
<option value="8">d8</option>
<option value="10">d10</option>
<option value="12">d12</option>
</select>
<button class="custom-roll-button" type="roll"
value="&{template:attack} {{rollname=@{weapon_1}}} {{result=[[1d@{weapon_1_dmg}]]}}"
name="roll_weapon_1"></button>
<input type="text" name="attr_weapon_2" />
<input type="number" name="attr_weapon_dmg_2" />
<select name="attr_weapon_2_dmg" id="attr_weapon_2_dmg">
<option value="4" selected>d4</option>
<option value="6">d6</option>
<option value="8">d8</option>
<option value="10">d10</option>
<option value="12">d12</option>
</select>
<button class="custom-roll-button" type="roll"
value="&{template:attack} {{rollname=@{weapon_2}}} {{result=[[1d@{weapon_2_dmg}]]}}"
name="roll_weapon_2"></button>
</div>
<h2 data-i18n="conditions"></h2>
<div class="flex-container">
<label data-i18n="deprived"></label>
<input class="stat-input" type="checkbox" name="attr_deprived" id="attr_deprived"/>
</div>
</div>
<!-- Items -->
<div class="flex-container-list">
<div class="flex-container list">
<div class="flex-container">
<label data-i18n="item" ></label>
<label data-i18n="quantity" ></label>
<label data-i18n="fatigue" ></label>
<h2 data-i18n="inventory"></h2>
</div>
<div class="flex-container">
<div class="grid-inventory">
<label data-i18n="item"></label>
<label data-i18n="quantity"></label>
<label data-i18n="fatigue"></label>
<input type="text" name="attr_item_1" />
<input type="number" name="attr_item_qty_1" />
<input type="number" name="attr_item_qty_1" min="0" value="0"/>
<input type="checkbox" name="attr_fatigue_1" />
</div>
<div class="flex-container">
<input type="text" name="attr_item_2" />
<input type="number" name="attr_item_qty_2" />
<input type="number" name="attr_item_qty_2" min="0" value="0" />
<input type="checkbox" name="attr_fatigue_2" />
</div>
<div class="flex-container">
<input type="text" name="attr_item_3" />
<input type="number" name="attr_item_qty_3" />
<input type="number" name="attr_item_qty_3" min="0" value="0"/>
<input type="checkbox" name="attr_fatigue_3" />
</div>
<div class="flex-container">
<input type="text" name="attr_item_4" />
<input type="number" name="attr_item_qty_4" />
<input type="number" name="attr_item_qty_4" min="0" value="0" />
<input type="checkbox" name="attr_fatigue_4" />
</div>
<div class="flex-container">
<input type="text" name="attr_item_5" />
<input type="number" name="attr_item_qty_5" />
<input type="number" name="attr_item_qty_5" min="0" value="0" />
<input type="checkbox" name="attr_fatigue_5" />
</div>
<div class="flex-container">
<input type="text" name="attr_item_6" />
<input type="number" name="attr_item_qty_6" />
<input type="number" name="attr_item_qty_6" min="0" value="0" />
<input type="checkbox" name="attr_fatigue_6" />
</div>
<div class="flex-container">
<input type="text" name="attr_item_7" />
<input type="number" name="attr_item_qty_7" />
<input type="number" name="attr_item_qty_7" min="0" value="0" />
<input type="checkbox" name="attr_fatigue_7" />
</div>
<div class="flex-container">
<input type="text" name="attr_item_8" />
<input type="number" name="attr_item_qty_8" />
<input type="number" name="attr_item_qty_8" min="0" value="0" />
<input type="checkbox" name="attr_fatigue_8" />
</div>
<div class="flex-container">
<input type="text" name="attr_item_9" />
<input type="number" name="attr_item_qty_9" />
<input type="number" name="attr_item_qty_9" min="0" value="0" />
<input type="checkbox" name="attr_fatigue_9" />
</div>
<div class="flex-container">
<input type="text" name="attr_item_10" />
<input type="number" name="attr_item_qty_10" />
<input type="number" name="attr_item_qty_10" min="0" value="0" />
<input type="checkbox" name="attr_fatigue_10" />
</div>
</div>
</div>
<!-- Notes -->
<div class="content-row">
<h2 data-i18n="everything-else"></h2>
<div class="flex-container column">
<label data-i18n="traits" for="attr_traits" ></label>
<textarea name="attr_traits" id="attr_traits" rows="4"></textarea>
</div>
<div class="content-row">
<div class="flex-container column">
<label data-i18n="notes" ></label>
<textarea name="attr_notes" id="attr_notes" rows="4"></textarea>
</div>
@@ -182,4 +197,13 @@
{{#rollGreater() result target}}<div class="sheet-template-outcome-failure">Failure</div>
{{/rollGreater() result target}}
</div>
</rolltemplate>
<rolltemplate class="sheet-rolltemplate-attack">
<div class="sheet-template-container">
<div class="sheet-template-header">{{rollname}}</div>
<div class="sheet-template-result">
<span>{{result}}</span>
</div>
</div>
</rolltemplate>
Cairn/translation.json
+9 -2
View File
@@ -1,4 +1,5 @@
{
"title": "Cairn",
"hit-protection": "HP",
"dexterity": "Dexterity",
"strength": "Strength",
@@ -12,8 +13,14 @@
"gp": "Gold",
"deprived": "Deprived",
"fatigue": "Fatigue",
"name": "Name",
"character-name": "Name",
"pronouns": "Pronouns",
"background": "Background",
"traits": "Description and Traits"
"traits": "Description and Traits",
"saves": "Saves",
"defense": "Defense",
"offense": "Offense",
"conditions": "Conditions",
"everything-else": "Everything Else",
"inventory": "Inventory"
}