[Shadowrun5thA] rework nav bar + settings
This commit is contained in:
Stexinator
+123
-99
@@ -23,90 +23,47 @@ input[type=number]::-webkit-inner-spin-button {
|
||||
-moz-appearance:textfield;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: stretch;
|
||||
|
||||
width: 100%;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
|
||||
input[type=radio].tabs{
|
||||
opacity:0;
|
||||
width:11% ;
|
||||
height:2em!important;
|
||||
position: sticky;
|
||||
top: 0px;
|
||||
background-color:#111111;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.wrapper h2{
|
||||
margin-top:1em;
|
||||
color: #aaaaee;
|
||||
}
|
||||
|
||||
.tablabel{
|
||||
.tabs .tab{
|
||||
margin-left:-11%;
|
||||
width:10%;
|
||||
text-align:center;
|
||||
vertical-align:top;
|
||||
color:#eeeeee;
|
||||
background-color:#550000;
|
||||
background-color: #550000;
|
||||
display:inline-block;
|
||||
border-radius:5px;
|
||||
margin-bottom:5em;
|
||||
border-color: #550000;
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
|
||||
.tabs:checked + div.tablabel {
|
||||
.tabstoggle[value="main"] ~ button.main,
|
||||
.tabstoggle[value="skills"] ~ button.skills,
|
||||
.tabstoggle[value="magic"] ~ button.magic,
|
||||
.tabstoggle[value="technomancy"] ~ button.technomancy,
|
||||
.tabstoggle[value="enhancements"] ~ button.enhancements,
|
||||
.tabstoggle[value="matrix"] ~ button.matrix,
|
||||
.tabstoggle[value="vehicles"] ~ button.vehicles,
|
||||
.tabstoggle[value="equipment"] ~ button.equipment,
|
||||
.tabstoggle[value="social"] ~ button.social,
|
||||
.tabstoggle[value="character"] ~ button.character
|
||||
{
|
||||
color:#aaaaee;
|
||||
font-weight:700;
|
||||
}
|
||||
|
||||
.tab1:checked + div.tablabel,
|
||||
.tab1:checked ~ div.gmroll,
|
||||
.contentMain{
|
||||
color:#aaaaee;
|
||||
}
|
||||
|
||||
.tab2:checked + div.tablabel,
|
||||
.tab2:checked ~ div.gmroll,
|
||||
.contentSkills{
|
||||
color:#aaaaee;
|
||||
}
|
||||
|
||||
.tab3:checked + div.tablabel,
|
||||
.tab3:checked ~ div.gmroll,
|
||||
.contentMagic{
|
||||
color:#aaaaee;
|
||||
}
|
||||
|
||||
.tab4:checked + div.tablabel,
|
||||
.tab4:checked ~ div.gmroll,
|
||||
.contentEnhancements{
|
||||
color:#aaaaee;
|
||||
}
|
||||
|
||||
.tab5:checked + div.tablabel,
|
||||
.tab5:checked ~ div.gmroll,
|
||||
.contentMatrix{
|
||||
color:#aaaaee;
|
||||
}
|
||||
|
||||
.tab6:checked + div.tablabel,
|
||||
.tab6:checked ~ div.gmroll,
|
||||
.contentVehiclesDrones{
|
||||
color:#aaaaee;
|
||||
}
|
||||
|
||||
.tab7:checked + div.tablabel,
|
||||
.tab7:checked ~ div.gmroll,
|
||||
.contentEquipment{
|
||||
color:#aaaaee;
|
||||
}
|
||||
|
||||
.tab8:checked + div.tablabel,
|
||||
.tab8:checked ~ div.gmroll,
|
||||
.contentSocial{
|
||||
color:#aaaaee;
|
||||
}
|
||||
|
||||
.tab9:checked + div.tablabel,
|
||||
.tab9:checked ~ div.gmroll,
|
||||
.contentCharacter{
|
||||
color:#aaaaee;
|
||||
}
|
||||
|
||||
.contentMain,
|
||||
.contentSkills,
|
||||
.contentMagic,
|
||||
@@ -115,24 +72,57 @@ input[type=radio].tabs{
|
||||
.contentVehiclesDrones,
|
||||
.contentEquipment,
|
||||
.contentSocial,
|
||||
.contentCharacter{
|
||||
.contentCharacter
|
||||
{
|
||||
display:none;
|
||||
}
|
||||
|
||||
input[type=radio].tab1:checked ~ div.contentMain,
|
||||
input[type=radio].tab2:checked ~ div.contentSkills,
|
||||
input[type=radio].tab3:checked ~ div.contentMagic,
|
||||
input[type=radio].tab4:checked ~ div.contentEnhancements,
|
||||
input[type=radio].tab5:checked ~ div.contentMatrix,
|
||||
input[type=radio].tab6:checked ~ div.contentVehiclesDrones,
|
||||
input[type=radio].tab7:checked ~ div.contentEquipment,
|
||||
input[type=radio].tab8:checked ~ div.contentSocial,
|
||||
input[type=radio].tab9:checked ~ div.contentCharacter
|
||||
/* show the selected tab */
|
||||
.tabstoggle[value="main"] ~ div.contentMain,
|
||||
.tabstoggle[value="skills"] ~ div.contentSkills,
|
||||
.tabstoggle[value="magic"] ~ div.contentMagic,
|
||||
.tabstoggle[value="technomancy"] ~ div.contentMagic,
|
||||
.tabstoggle[value="enhancements"] ~ div.contentEnhancements,
|
||||
.tabstoggle[value="matrix"] ~ div.contentMatrix,
|
||||
.tabstoggle[value="vehicles"] ~ div.contentVehiclesDrones,
|
||||
.tabstoggle[value="equipment"] ~ div.contentEquipment,
|
||||
.tabstoggle[value="social"] ~ div.contentSocial,
|
||||
.tabstoggle[value="character"] ~ div.contentCharacter
|
||||
{
|
||||
display:block;
|
||||
width:100%;
|
||||
margin-top: 120px;
|
||||
color:#aaaaee;
|
||||
}
|
||||
|
||||
.show-mage:not(:checked) ~ button.magic {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.show-mage:checked ~ button.magic {
|
||||
}
|
||||
|
||||
.show-technomancy:not(:checked) ~ button.technomancy {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.show-technomancy:checked ~ button.technomancy {
|
||||
}
|
||||
|
||||
.wrapper h2{
|
||||
margin-top:1em;
|
||||
color: #aaaaee;
|
||||
}
|
||||
|
||||
.wrapper h3{
|
||||
margin-top:1em;
|
||||
color: #aaaaee;
|
||||
}
|
||||
|
||||
/*
|
||||
GM Roll + Edge Button
|
||||
*/
|
||||
|
||||
.gmroll{
|
||||
position:absolute;
|
||||
left: calc(100% - 12em);
|
||||
@@ -166,10 +156,9 @@ input[type=radio].tab9:checked ~ div.contentCharacter
|
||||
display:none;
|
||||
}
|
||||
|
||||
|
||||
.gmrollcheckbox:checked +div,
|
||||
.edgerollcheckbox:checked +div{
|
||||
color:inherit;
|
||||
color:#aaaaee;
|
||||
}
|
||||
|
||||
|
||||
@@ -323,7 +312,6 @@ button.spellrollmage,
|
||||
border:none;
|
||||
border-radius:5px;
|
||||
text-shadow:none;
|
||||
padding:3px 3px 0px 3px !important;
|
||||
}
|
||||
|
||||
|
||||
@@ -384,8 +372,6 @@ input.technomancycheckbox:checked ~ div label.labeltechnomancer{
|
||||
.weaponmodewrapper select,
|
||||
.hiddenmelee:checked ~ div.weaponmodewrapper input,
|
||||
.hiddenmelee:checked ~ div.weaponmeleerollwrapper,
|
||||
.istechnounticked,
|
||||
.istechnocheckbox:checked ~ div.istechnoticked,
|
||||
.mskillsilentunticked,
|
||||
.mskillsilentcheckbox:checked ~ div.mskillsilentticked,
|
||||
.mskillhotsimunticked,
|
||||
@@ -472,8 +458,6 @@ input.technomancycheckbox:checked ~ div label.labeltechnomancer{
|
||||
.hide6:checked ~ div.hide6,
|
||||
.hide7:checked ~ div.hide7,
|
||||
.hide8:checked ~ div.hide8,
|
||||
.istechnoticked,
|
||||
.istechnocheckbox:checked ~ div.istechnounticked,
|
||||
.mskillsilentticked,
|
||||
.mskillsilentcheckbox:checked ~ div.mskillsilentunticked,
|
||||
.mskillhotsimticked,
|
||||
@@ -567,7 +551,6 @@ div.spiritstable .technomancycheckbox:not(:checked) ~ div.technobound
|
||||
display:none;
|
||||
}
|
||||
|
||||
.woundsmod,
|
||||
.contacts,
|
||||
.ware,
|
||||
.martial,
|
||||
@@ -582,11 +565,10 @@ div.spiritstable .technomancycheckbox:not(:checked) ~ div.technobound
|
||||
.cyberprograms{
|
||||
width:calc(46% - 2px);
|
||||
display:inline-block;
|
||||
margin:5em 0% 0% 2%;
|
||||
margin-left: 2%;
|
||||
vertical-align:top;
|
||||
}
|
||||
|
||||
|
||||
.initiation{
|
||||
padding-bottom:2em;
|
||||
}
|
||||
@@ -731,12 +713,6 @@ div.spiritstable .technomancycheckbox:not(:checked) ~ div.technobound
|
||||
margin:0px 8% 0.5em 0%;
|
||||
}
|
||||
|
||||
|
||||
.woundsmodrow div{
|
||||
width:19%;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.limitwrapper{
|
||||
display:inline-block;
|
||||
width:25%;
|
||||
@@ -891,7 +867,7 @@ div .limitlabels label{
|
||||
input.technomancycheckbox:checked ~ div.technomancer{
|
||||
display:block;
|
||||
width:90%;
|
||||
margin:5em 0% 0% 2%;
|
||||
margin-left: 2%;
|
||||
text-align:left;
|
||||
}
|
||||
|
||||
@@ -923,7 +899,6 @@ input.technomancycheckbox:checked ~ div.technomancer{
|
||||
.limits input,
|
||||
.limits select,
|
||||
.woundsrow input,
|
||||
.woundsmodrow input,
|
||||
.skills input[type=text],
|
||||
.skills input[type=number],
|
||||
.skills select,
|
||||
@@ -1536,7 +1511,6 @@ input[disabled="true"]{
|
||||
.limitfields,
|
||||
.limitlabels,
|
||||
.woundsrow,
|
||||
.woundsmodrow,
|
||||
.initiativerow,
|
||||
.programrow,
|
||||
.deckrow,
|
||||
@@ -1785,10 +1759,60 @@ div.collapsible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ==========
|
||||
Settings
|
||||
==========
|
||||
*/
|
||||
|
||||
.settings {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.settings label {
|
||||
color: #aaaaee;
|
||||
font-weight: normal;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.settings span {
|
||||
font-weight: normal;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
summary{
|
||||
display:list-item;
|
||||
}
|
||||
|
||||
summary.settings-caption {
|
||||
text-decoration-line: underline;
|
||||
color: #aaaaee;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
label.settings-checkbox {
|
||||
width: fit-content;
|
||||
cursor: pointer;
|
||||
color: #aaaaee;
|
||||
}
|
||||
|
||||
.woundsmodrow div{
|
||||
width:19%;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.woundsmodrow input{
|
||||
width:100% !important;
|
||||
vertical-align:top;
|
||||
background-color:#444444;
|
||||
color:inherit;
|
||||
border:none;
|
||||
box-shadow:none;
|
||||
height:100%;
|
||||
box-sizing:border-box;
|
||||
margin:0px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
|
||||
.sheet-rolltemplate-reactdodge table,
|
||||
|
||||
@@ -1,36 +1,25 @@
|
||||
<div class="wrapper">
|
||||
|
||||
<input type="radio" class="tabs tab1" name="attr_tabnumber" value="1" checked>
|
||||
<div class="tablabel">Main</div>
|
||||
<!-- Set up the Tabs -->
|
||||
<div class="tabs">
|
||||
<input type="hidden" class="tabstoggle" name="attr_sheetTab" value="main"/>
|
||||
<button type="action" name="act_main" class="tab main" >Main</button>
|
||||
<button type="action" name="act_skills" class="tab skills">Skills</button>
|
||||
|
||||
<input type="radio" class="tabs tab2" name="attr_tabnumber" value="2">
|
||||
<div class="tablabel">Skills</div>
|
||||
<input class="show-mage" name="attr_ismage" type="checkbox" checked hidden/>
|
||||
<button type="action" name="act_magic" class="tab magic">Magic</button>
|
||||
|
||||
<input type="radio" class="tabs tab3" name="attr_tabnumber" value="3">
|
||||
<div class="tablabel">
|
||||
<input class="technomancycheckbox" type="checkbox" name="attr_istechnomancer" value="1">
|
||||
<div class="labelmage">Magic</div>
|
||||
<div class="labeltechnomancer">Technomancy</div>
|
||||
<input class="show-technomancy" name="attr_istechnomancer" type="checkbox" checked hidden/>
|
||||
<button type="action" name="act_technomancy" class="tab technomancy">Technomancy</button>
|
||||
|
||||
<button type="action" name="act_enhancements" class="tab enhancements">Enhancements</button>
|
||||
<button type="action" name="act_matrix" class="tab matrix">Matrix</button>
|
||||
<button type="action" name="act_vehicles" class="tab vehicles">Vehicles</button>
|
||||
<button type="action" name="act_equipment" class="tab equipment">Equipment</button>
|
||||
<button type="action" name="act_social" class="tab social">Social</button>
|
||||
<button type="action" name="act_character" class="tab character">Character</button>
|
||||
</div>
|
||||
|
||||
<input type="radio" class="tabs tab4" name="attr_tabnumber" value="4">
|
||||
<div class="tablabel">Enhancements</div>
|
||||
|
||||
<input type="radio" class="tabs tab5" name="attr_tabnumber" value="5">
|
||||
<div class="tablabel">Matrix</div>
|
||||
|
||||
<input type="radio" class="tabs tab6" name="attr_tabnumber" value="6">
|
||||
<div class="tablabel">Vehicles</div>
|
||||
|
||||
<input type="radio" class="tabs tab7" name="attr_tabnumber" value="7">
|
||||
<div class="tablabel">Equipment</div>
|
||||
|
||||
<input type="radio" class="tabs tab8" name="attr_tabnumber" value="8">
|
||||
<div class="tablabel">Social</div>
|
||||
|
||||
<input type="radio" class="tabs tab9" name="attr_tabnumber" value="9">
|
||||
<div class="tablabel">Character</div>
|
||||
|
||||
<div class="gmroll">
|
||||
<input type="radio" class="gmrollcheckbox" name="attr_gmroll" value="" title="Switch to public Rolls" checked>
|
||||
<input type="radio" class="gmrollcheckbox" name="attr_gmroll" value="/w gm " title="Switch to GM only Rolls">
|
||||
@@ -40,7 +29,7 @@
|
||||
<div class="gmrolllabel edgerollunticked">Edge</div>
|
||||
</div>
|
||||
|
||||
|
||||
<input type="hidden" class="tabstoggle" name="attr_sheetTab" value="main"/>
|
||||
<div class="contentMain">
|
||||
<div class="statblock">
|
||||
<h2>Attributes</h2>
|
||||
@@ -13089,9 +13078,6 @@ Click again to switch to Manual and Remote">
|
||||
<div class="charstreetcredwrapper">
|
||||
<label>Street Cred</label>
|
||||
</div>
|
||||
<div class="charistechnomancerwrapper">
|
||||
<label>Technomancer</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="charinforow">
|
||||
<div class="charkarmawrapper">
|
||||
@@ -13109,11 +13095,6 @@ Click again to switch to Manual and Remote">
|
||||
<div class="charstreetcredwrapper">
|
||||
<input type="text" name="attr_streetcred" title="Street Cred of your Character">
|
||||
</div>
|
||||
<div class="charistechnomancerwrapper">
|
||||
<input class="istechnocheckbox hiddencheckbox" type="checkbox" name="attr_istechnomancer" value="1" title="Is your Character a Technomancer?">
|
||||
<div class="checkboxticker istechnounticked"></div>
|
||||
<div class="checkboxticker istechnoticked">X</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="charinforow">
|
||||
<div class="charbackgroundwrapper">
|
||||
@@ -13138,21 +13119,47 @@ Click again to switch to Manual and Remote">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="woundsmod">
|
||||
<h2>Wound Calculation Modifier</h2>
|
||||
<div class="woundsmodrow">
|
||||
<div><label>Single Box</label></div>
|
||||
<div><label>Multiplier</label></div>
|
||||
<div><label>Empty Overfl</label></div>
|
||||
<div><label>Empty Phys</label></div>
|
||||
<div><label>Empty Stun</label></div>
|
||||
</div>
|
||||
<div class="woundsmodrow">
|
||||
<div><input type="text" name="attr_woundadditive" value="0" title="Ignores that many Boxes of Damage on both Tracks before calculating the Woundpenalty like the High Pain Tolerance Quality"></div>
|
||||
<div><input type="text" name="attr_woundmultiplikative" value="3" title="Modifies the Multiplier of how many Boxes of Damage before incuring another Penalty like the Low Pain Tolerance Quality"></div>
|
||||
<div><input type="text" name="attr_overflowmod" value="0" title="Additional empty Overflow Boxes like the Will To Live Quality"></div>
|
||||
<div><input type="text" name="attr_physicaltrackmod" value="0" title="Additional empty Damage Boxes for the physical Track"></div>
|
||||
<div><input type="text" name="attr_stuntrackmod" value="0" title="Additional empty Damage Boxes for the stun Track"></div>
|
||||
<div class="settings">
|
||||
<h3>Settings</h3>
|
||||
<br>
|
||||
|
||||
<details>
|
||||
<summary class="settings-caption" >Character specific settings</summary>
|
||||
<label for="isTechnomancer" class="settings-checkbox" title='Is your Character a Technomancer?'>
|
||||
<input id="isTechnomancer" name="attr_istechnomancer" type="checkbox" />
|
||||
<span>Technomancer</span>
|
||||
</label>
|
||||
<label for="isMage" class="settings-checkbox" title='Is your Character a Mage?'>
|
||||
<input id="isMage" name="attr_ismage" type="checkbox" checked />
|
||||
<span>Mage</span>
|
||||
</label>
|
||||
<label for="isCritter" class="settings-checkbox" title='Is your Character a Critter?'>
|
||||
<input id="isCritter" name="attr_iscritter" type="checkbox" />
|
||||
<span>Critter</span>
|
||||
</label>
|
||||
</details>
|
||||
|
||||
<div>
|
||||
<details>
|
||||
<summary class="settings-caption" >Wound Calculation Modifier</summary>
|
||||
<div>
|
||||
<div class="woundsmodrow">
|
||||
<div><label>Single Box</label></div>
|
||||
<div><label>Multiplier</label></div>
|
||||
<div><label>Empty Overfl</label></div>
|
||||
<div><label>Empty Phys</label></div>
|
||||
<div><label>Empty Stun</label></div>
|
||||
</div>
|
||||
<div class="woundsmodrow">
|
||||
<div><input type="text" name="attr_woundadditive" value="0" title="Ignores that many Boxes of Damage on both Tracks before calculating the Woundpenalty like the High Pain Tolerance Quality"></div>
|
||||
<div><input type="text" name="attr_woundmultiplikative" value="3" title="Modifies the Multiplier of how many Boxes of Damage before incuring another Penalty like the Low Pain Tolerance Quality"></div>
|
||||
<div><input type="text" name="attr_overflowmod" value="0" title="Additional empty Overflow Boxes like the Will To Live Quality"></div>
|
||||
<div><input type="text" name="attr_physicaltrackmod" value="0" title="Additional empty Damage Boxes for the physical Track"></div>
|
||||
<div><input type="text" name="attr_stuntrackmod" value="0" title="Additional empty Damage Boxes for the stun Track"></div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="chummerimport">
|
||||
@@ -13392,6 +13399,15 @@ Click again to switch to Manual and Remote">
|
||||
|
||||
<script type="text/worker">
|
||||
|
||||
const buttonlist = ["main", "skills", "magic", "technomancy", "enhancements", "matrix", "vehicles", "equipment", "social", "character"];
|
||||
buttonlist.forEach(button => {
|
||||
on(`clicked:${button}`, function() {
|
||||
setAttrs({
|
||||
sheetTab: button
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
on("sheet:opened", function() {
|
||||
var names=[];
|
||||
for(var i=1; i<77; i++)
|
||||
@@ -13632,17 +13648,17 @@ async function importMainTabChummer(character) {
|
||||
attributes.log_base = attributesChummer.find(a => a.name_english === "LOG").base;
|
||||
attributes.wil_base = attributesChummer.find(a => a.name_english === "WIL").base;
|
||||
attributes.edg_total = attributesChummer.find(a => a.name_english === "EDG").base;
|
||||
|
||||
attributes.mag_base = 0;
|
||||
attributes.istechnomancer = 0;
|
||||
attributes.ismage = 0;
|
||||
if(attributesChummer.find(a => a.name_english === "RES") != null ){
|
||||
attributes.mag_base=attributesChummer.find(a => a.name_english === "RES").total;
|
||||
attributes.istechnomancer = 1;
|
||||
attributes.mag_base = attributesChummer.find(a => a.name_english === "RES").total;
|
||||
attributes.istechnomancer = 'on';
|
||||
}
|
||||
else if(attributesChummer.find(a => a.name_english === "MAG") != null ){
|
||||
attributes.mag_base = attributesChummer.find(a => a.name_english === "MAG").total;
|
||||
attributes.istechnomancer = 0;
|
||||
}
|
||||
else {
|
||||
attributes.mag_base = 0;
|
||||
attributes.istechnomancer = 0;
|
||||
attributes.ismage = 'on';
|
||||
}
|
||||
attributes.bod_aug = attributesChummer.find(a => a.name_english === "BOD").total-attributesChummer.find(a => a.name_english === "BOD").base;
|
||||
attributes.agi_aug = attributesChummer.find(a => a.name_english === "AGI").total-attributesChummer.find(a => a.name_english === "AGI").base;
|
||||
|
||||
Reference in New Issue
Block a user