abilities and coins show background with edit mode

This commit is contained in:
Mark
2016-02-26 14:56:35 +01:00
parent 2eff72e3d1
commit d2f9a73e2d
6 changed files with 71 additions and 68 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+12 -19
View File
@@ -473,24 +473,28 @@ $pad-mar: (
}
}
.sheet-ability-score-wrapper {
.sheet-ability-wrapper {
height: 68px;
margin-bottom: 12px;
position: relative;
& .sheet-ability-score {
& .sheet-ability-score-wrapper {
background-color: white;
border: 1px solid black;
border-radius: 50%;
bottom: -8px;
font-size: 11px;
left: 0;
margin-right: auto;
margin-left: auto;
padding: 5px;
padding: 2px;
position: absolute;
right: 0;
width: 40px !important;
input {
font-size: 11px;
background: transparent;
border-radius: 50%;
}
}
}
@@ -849,22 +853,11 @@ select.sheet-skills-ability-selector {
}
.sheet-coin {
background-color: white;
margin-left: -8px;
margin-right: 6px;
padding: 1px;
input {
border: 1px solid black;
border-radius: $border-radius;
height: 20px;
position: absolute;
top: -3px;
}
input[readonly] {
background-color: white;
}
}
.sheet-coin-value-wrap {
position: relative;
left: -2px;
}
.sheet-proficiency-bonus input[type=number],
@@ -1,6 +1,6 @@
<input type="hidden" name="attr_finesse_mod">
<div class="ability-score-wrapper wrap-box center">
<div class="ability-wrapper wrap-box center">
<input type="hidden" name="attr_strength_check_mod">
<button type="roll" name="roll_strength_check" value="@{output_option} &{template:5e-shaped} {{ability=1}} {{character_name=@{character_name}}} @{show_character_name} {{title=Strength}} {{subheader=Ability Check}} {{roll_toggle=1}} {{roll1=[[d20@{d20_mod} + @{strength_check_mod}]]}} @{roll_setting}@{d20_mod} + @{strength_check_mod}]]}} @{attacher_strength_check}" tabindex="-1">
@@ -10,10 +10,11 @@
<span name="attr_strength_mod_with_sign" class="ability-modifier block center"></span>
</div>
</button>
<input type="number" name="attr_strength" class="ability-score no-spin" min="1" step="1">
<div class="ability-score-wrapper">
<input type="number" name="attr_strength" class="no-spin no-border" min="1" step="1">
</div>
</div>
<div class="ability-score-wrapper wrap-box center">
<div class="ability-wrapper wrap-box center">
<input type="hidden" name="attr_dexterity_check_mod">
<button type="roll" name="roll_dexterity_check" value="@{output_option} &{template:5e-shaped} {{ability=1}} {{character_name=@{character_name}}} @{show_character_name} {{title=Dexterity}} {{subheader=Ability check}} {{roll_toggle=1}} {{roll1=[[d20@{d20_mod} + @{dexterity_check_mod}]]}} @{roll_setting}@{d20_mod} + @{dexterity_check_mod}]]}} @{attacher_dexterity_check}" tabindex="-1">
@@ -24,9 +25,11 @@
</div>
</button>
<input type="number" name="attr_dexterity" class="ability-score no-spin" min="1" step="1">
<div class="ability-score-wrapper">
<input type="number" name="attr_dexterity" class="no-spin no-border" min="1" step="1">
</div>
</div>
<div class="ability-score-wrapper wrap-box center">
<div class="ability-wrapper wrap-box center">
<input type="hidden" name="attr_constitution_check_mod">
<button type="roll" name="roll_constitution_check" value="@{output_option} &{template:5e-shaped} {{ability=1}} {{character_name=@{character_name}}} @{show_character_name} {{title=Constitution}} {{subheader=Ability check}} {{roll_toggle=1}} {{roll1=[[d20@{d20_mod} + @{constitution_check_mod}]]}} @{roll_setting}@{d20_mod} + @{constitution_check_mod}]]}} @{attacher_constitution_check}" tabindex="-1">
@@ -37,9 +40,11 @@
</div>
</button>
<input type="number" name="attr_constitution" class="ability-score no-spin" min="1" step="1">
<div class="ability-score-wrapper">
<input type="number" name="attr_constitution" class="no-spin no-border" min="1" step="1">
</div>
</div>
<div class="ability-score-wrapper wrap-box center">
<div class="ability-wrapper wrap-box center">
<input type="hidden" name="attr_intelligence_check_mod">
<button type="roll" name="roll_intelligence_check" value="@{output_option} &{template:5e-shaped} {{ability=1}} {{character_name=@{character_name}}} @{show_character_name} {{title=Intelligence}} {{subheader=Ability check}} {{roll_toggle=1}} {{roll1=[[d20@{d20_mod} + @{intelligence_check_mod}]]}} @{roll_setting}@{d20_mod} + @{intelligence_check_mod}]]}} @{attacher_intelligence_check}" tabindex="-1">
@@ -50,9 +55,11 @@
</div>
</button>
<input type="number" name="attr_intelligence" class="ability-score no-spin" min="1" step="1">
<div class="ability-score-wrapper">
<input type="number" name="attr_intelligence" class="no-spin no-border" min="1" step="1">
</div>
</div>
<div class="ability-score-wrapper wrap-box center">
<div class="ability-wrapper wrap-box center">
<input type="hidden" name="attr_wisdom_check_mod">
<button type="roll" name="roll_wisdom_check" value="@{output_option} &{template:5e-shaped} {{ability=1}} {{character_name=@{character_name}}} @{show_character_name} {{title=Wisdom}} {{subheader=Ability check}} {{roll_toggle=1}} {{roll1=[[d20@{d20_mod} + @{wisdom_check_mod}]]}} @{roll_setting}@{d20_mod} + @{wisdom_check_mod}]]}} @{attacher_wisdom_check}" tabindex="-1">
@@ -63,9 +70,11 @@
</div>
</button>
<input type="number" name="attr_wisdom" class="ability-score no-spin" min="1" step="1">
<div class="ability-score-wrapper">
<input type="number" name="attr_wisdom" class="no-spin no-border" min="1" step="1">
</div>
</div>
<div class="ability-score-wrapper wrap-box center">
<div class="ability-wrapper wrap-box center">
<input type="hidden" name="attr_charisma_check_mod">
<button type="roll" name="roll_charisma_check" value="@{output_option} &{template:5e-shaped} {{ability=1}} {{character_name=@{character_name}}} @{show_character_name} {{title=Charisma}} {{subheader=Ability check}} {{roll_toggle=1}} {{roll1=[[d20@{d20_mod} + @{charisma_check_mod}]]}} @{roll_setting}@{d20_mod} + @{charisma_check_mod}]]}} @{attacher_charisma_check}" tabindex="-1">
@@ -76,5 +85,7 @@
</div>
</button>
<input type="number" name="attr_charisma" class="ability-score no-spin" min="1" step="1">
<div class="ability-score-wrapper">
<input type="number" name="attr_charisma" class="no-spin no-border" min="1" step="1">
</div>
</div>
@@ -1,9 +1,9 @@
<div class="wrap-box">
<div class="shaped-row">
<div class="col-20 pad-r-lg">
<div class="col-22">
//= include ../equipment/coins.html
</div>
<div class="col-80 core-equipment pad-l-lg">
<div class="col-78 core-equipment pad-l-sm">
<div>
<div class="shaped-row">
<div class="col-10"></div>
@@ -1,62 +1,61 @@
<div class="wrap-box coin shaped-row relative mar-t-md">
<div class="col-35">
<div class="coin shaped-row no-wrap vert-center mar-t-md">
<div class="wrap-box">
<button type="roll" name="roll_coinage_cp" class="wrapper-button" value="@{output_option} &{template:5e-shaped} {{character_name=@{character_name}}} @{show_character_name} {{title=Copper Pieces}} {{text_big=[[@{cp}]]}}" tabindex="-1">
<div class="light-label">{{'COINS_CP' | translate}}</div>
<div class="light-label pad-r-sm">{{'COINS_CP' | translate}}</div>
</button>
</div>
<div class="col-65">
<input type="number" name="attr_cp" class="no-spin" value="0" min="0" step="1">
<div class="wrap-box coin-value-wrap">
<input type="number" name="attr_cp" class="no-spin no-border" value="0" min="0" step="1">
</div>
</div>
<div class="wrap-box coin shaped-row relative mar-t-lg">
<div class="col-35">
<div class="coin shaped-row no-wrap vert-center mar-t-lg">
<div class="wrap-box">
<button type="roll" name="roll_coinage_sp" class="wrapper-button" value="@{output_option} &{template:5e-shaped} {{character_name=@{character_name}}} @{show_character_name} {{title=Silver Pieces}} {{text_big=[[@{sp}]]}}" tabindex="-1">
<div class="light-label">{{'COINS_SP' | translate}}</div>
<div class="light-label pad-r-sm">{{'COINS_SP' | translate}}</div>
</button>
</div>
<div class="col-65">
<input type="number" name="attr_sp" class="no-spin" value="0" min="0" step="1">
<div class="wrap-box coin-value-wrap">
<input type="number" name="attr_sp" class="no-spin no-border" value="0" min="0" step="1">
</div>
</div>
<div class="wrap-box coin shaped-row relative mar-t-lg">
<div class="col-35">
<div class="coin shaped-row no-wrap vert-center mar-t-lg">
<div class="wrap-box">
<button type="roll" name="roll_coinage_ep" class="wrapper-button" value="@{output_option} &{template:5e-shaped} {{character_name=@{character_name}}} @{show_character_name} {{title=Electrum Pieces}} {{text_big=[[@{ep}]]}}" tabindex="-1">
<div class="light-label">
{{'COINS_EP' | translate}}
</div>
<div class="light-label pad-r-sm">{{'COINS_EP' | translate}}</div>
</button>
</div>
<div class="col-65">
<input type="number" name="attr_ep" class="no-spin" value="0" min="0" step="1">
<div class="wrap-box coin-value-wrap">
<input type="number" name="attr_ep" class="no-spin no-border" value="0" min="0" step="1">
</div>
</div>
<div class="wrap-box coin shaped-row relative mar-t-lg">
<div class="col-35 label">
<div class="coin shaped-row no-wrap vert-center mar-t-lg">
<div class="wrap-box">
<button type="roll" name="roll_coinage_gp" class="wrapper-button" value="@{output_option} &{template:5e-shaped} {{character_name=@{character_name}}} @{show_character_name} {{title=Gold Pieces}} {{text_big=[[@{gp}]]}}" tabindex="-1">
<div class="light-label">{{'COINS_GP' | translate}}</div>
<div class="light-label pad-r-sm">{{'COINS_GP' | translate}}</div>
</button>
</div>
<div class="col-65">
<input type="number" name="attr_gp" class="no-spin" value="0" min="0" step="1">
<div class="wrap-box coin-value-wrap">
<input type="number" name="attr_gp" class="no-spin no-border" value="0" min="0" step="1">
</div>
</div>
<div class="wrap-box coin shaped-row relative mar-t-lg">
<div class="col-35">
<div class="coin shaped-row no-wrap vert-center mar-t-lg">
<div class="wrap-box">
<button type="roll" name="roll_coinage_pp" class="wrapper-button" value="@{output_option} &{template:5e-shaped} {{character_name=@{character_name}}} @{show_character_name} {{title=Platinum Pieces}} {{text_big=[[@{pp}]]}}" tabindex="-1">
<div class="light-label">{{'COINS_PP' | translate}}</div>
<div class="light-label pad-r-sm">{{'COINS_PP' | translate}}</div>
</button>
</div>
<div class="col-65">
<input type="number" name="attr_pp" class="no-spin" value="0" min="0" step="1">
<div class="wrap-box coin-value-wrap">
<input type="number" name="attr_pp" class="no-spin no-border" value="0" min="0" step="1">
</div>
</div>
<div class="wrap-box coin shaped-row relative mar-t-lg">
<div class="col-35">
<div class="coin shaped-row no-wrap vert-center mar-t-lg">
<div class="wrap-box">
<button type="roll" name="roll_coinage_total_gp" class="wrapper-button" value="@{output_option} &{template:5e-shaped} {{character_name=@{character_name}}} @{show_character_name} {{title=Total Gold Value}} {{text_big=[[@{total_gp}]]}}" tabindex="-1">
<div class="light-label bold">{{'COINS_GP' | translate}}</div>
<div class="light-label bold pad-r-sm">{{'COINS_GP' | translate}}</div>
</button>
</div>
<div class="col-65">
<input type="number" name="attr_total_gp" class="bold" value="0" readonly>
<div class="wrap-box coin-value-wrap">
<input type="number" name="attr_total_gp" class="bold no-border" value="0" readonly>
</div>
</div>