[TheWitcher] fix some css issues and rework background tab

This commit is contained in:
Stexinator
2022-08-19 11:42:01 +02:00
parent 7887e76daa
commit ca66f548f7
2 changed files with 129 additions and 155 deletions
+30 -67
View File
@@ -1675,6 +1675,7 @@ input[type="checkbox"].brawling-dropdown {
outline: none;
border: none;
box-shadow: none;
background-color: transparent;
}
input[type="checkbox"].spell_casting-dropdown::after,
@@ -2197,7 +2198,7 @@ textarea.notes-text {
/* QUICK WEAPON BUTTONS */
input.quickweap-title {
width: 175px;
width: 165px;
font-weight: bold;
text-align: right;
font-size: 11px;
@@ -5436,42 +5437,6 @@ textarea.repeating_hex_lift {
/* BACKGROUND */
input[type="checkbox"].life-events-toggle,
input[type="checkbox"].friends-toggle {
opacity: 0;
width: 16px;
height: 16px;
left: 15px;
margin-left: -50px;
position: relative;
cursor: pointer;
z-index: 1;
}
input[type="checkbox"].life-events-toggle + span::before,
input[type="checkbox"].friends-toggle + span::before {
line-height: 14px;
text-align: center;
display: inline-block;
vertical-align: middle;
content: "▼";
width: 14px;
height: 14px;
font-size: 20px;
color: #FFF;
}
input[type="checkbox"].life-events-toggle:checked + span::before,
input[type="checkbox"].friends-toggle:checked + span::before {
content: "►";
color: #FFF;
}
input.life-events-toggle:checked ~ div.events-container,
input.friends-toggle:checked ~ div.friends-container {
display: none;
}
/* ---- */
.witcher-standard,
@@ -5528,6 +5493,10 @@ input[type="checkbox"].witcher-switch:checked + span::before {
/* Background sections */
summary{
display:list-item;
}
span.background-span {
display: inline-block;
width: 480px;
@@ -5539,13 +5508,13 @@ span.background-span {
border-radius: 20px;
}
span.background2-span {
span.background-span-summary {
display: inline-block;
width: 405px;
width: 480px;
margin-bottom: 5px;
padding-right: 100px;
padding-right: 26px;
background: #444444;
height: 26px;
height: 22px;
color: #FFF;
border-radius: 20px;
}
@@ -5644,32 +5613,26 @@ textarea.style2-text {
box-shadow: inset 0px 0px 5px 1px #232323;
}
label.style-element {
display: inline-block;
width: 400px;
margin-bottom: 8px;
padding-left: 12px;
padding-right: 4px;
padding-top: 4px;
padding-bottom: 4px;
font-weight: 1;
font-size: 12px;
color: #FFF;
margin-bottom: 2px;
}
label.style2-element {
display: inline-block;
width: 300px;
margin-bottom: 8px;
padding-left: 12px;
padding-right: 4px;
padding-top: 4px;
padding-bottom: 4px;
font-weight: 1;
font-size: 12px;
color: #FFF;
margin-bottom: 2px;
textarea.standalone-text {
width: 480px;
height: 60px;
resize: vertical;
padding-right: 10px;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
font-size: 11px;
margin-left: 5px;
margin-top: 8px;
margin-bottom: 5px;
text-align: left;
border: 1px solid #000;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
background-color: #eaeaea;
box-shadow: inset 0px 0px 5px 1px #232323;
}
.summary-header {
+99 -88
View File
@@ -128,7 +128,7 @@
</fieldset>
</div><br />
<hr style='border: 0.5px; margin: 0px;'><!--- STOPS REPEATING SECTIONS BREAKING WHILST BEING EDITED --->
<label class='stattitle' data-i18n="luck-u" style='padding: 0px 5px 0px 5px;' >LUCK</label>
<label class='stattitle' data-i18n="luck-u" style='padding: 0px 3px 0px 5px;' >LUCK</label>
<input name='attr_total_luck' title='@{total_luck}' class='smallbox2' type='number' value='1'>
<input name='attr_luck' title='@{luck}' class='smallbox2' type='number' value='0'><br />
<label class='stattotal' data-i18n="stat-tota-u" >STAT TOTAL</label><input name='attr_max_stat_total' class='smallbox' type='text' value='[[0+@{total_int}+@{total_ref}+@{total_dex}+@{total_body}+@{total_spd}+@{total_emp}+@{total_cra}+@{total_will}+@{total_luck}]]' disabled='true'>
@@ -2119,7 +2119,7 @@
<option value='@{bonus_mod}' data-i18n="yes-u" >YES</option>
<option value='+0' data-i18n="no-u">NO</option>
</select>
<label class='weapon-damage' data-i18n="damage-u" >DAMAGE</label><input name='attr_secondary_weapon_damage' placeholder='weapon-damage-element' type='text' value='0'><br />
<label class='weapon-damage' data-i18n="damage-u" >DAMAGE</label><input name='attr_secondary_weapon_damage' class='weapon-damage-element' type='text' value='0'><br />
<label class='weapon-type' data-i18n="type-u" >TYPE</label><select name='attr_secondary_weapon_hold' class='weapon-hold-element'>
<option value='One-handed' data-i18n="one-handed-u" >ONE-HANDED</option>
<option value='Two-handed' data-i18n="two-handed-u" >TWO-HANDED</option></select>
@@ -3188,75 +3188,84 @@
<img class='top-title-image' src="https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/TheWitcher/images/background.png" style='margin-bottom: 1px;'><br />
<details>
<summary>
<span class='background-span summary-header' data-i18n="campaign-info-u">CAMPAIGN INFO</span>
<span class='background-span-summary summary-header' data-i18n="campaign-info-u">CAMPAIGN INFO</span>
</summary>
<textarea class='style2-text' name="attr_campaign_info" placeholder="Infos"></textarea>
<textarea class='standalone-text' name="attr_campaign_info" placeholder="Infos"></textarea>
</details>
<span class='background-span'><label class='style-element' data-i18n="style-appearance-outloo-u" >STYLE, APPEARANCE & OUTLOOK</label></span>
<div class='middle2-grid' style='margin-top: -1px;'>
<div class='grid-column'>
<label class='style-title' data-i18n="clothin-u" >CLOTHING</label>
<textarea class='style-text' name='attr_clothing'></textarea>
<label class='style-title' data-i18n="hair-styl-u" >HAIR STYLE</label>
<textarea class='style-text' name='attr_style'></textarea>
<label class='style-title' data-i18n="valued-perso-u" >VALUED PERSON</label>
<textarea class='style-text' name='attr_valued_person'></textarea>
</div>
<div class='grid-column' style='margin-left: -20px;'>
<label class='style-title' data-i18n="personalit-u" >PERSONALITY</label>
<textarea class='style-text' name='attr_personality'></textarea>
<label class='style-title' data-i18n="affectation-u" >AFFECTATIONS</label>
<textarea class='style-text' name='attr_affectations'></textarea>
<label class='style-title' data-i18n="value-u" >VALUE</label>
<textarea class='style-text' name='attr_value'></textarea>
</div>
</div>
<label class='style2-title' data-i18n="feelings-on-peopl-u" >FEELINGS ON PEOPLE</label>
<textarea class='style2-text' name='attr_feelings'></textarea>
<span class='background2-span'><label class='style2-element' data-i18n="early-lif-u" >EARLY LIFE</label></span>
<label class='toggle-witcher' data-i18n="witcher-training-u" >WITCHER TRAINING?</label><input type="checkbox" name='attr_witcher_toggle' class="witcher-switch"><span></span>
<div class="witcher-standard">
<div class='middle2-grid' style='margin-top: -1px;'>
<div class='grid-column'>
<label class='style-title' data-i18n="homelan-u" >HOMELAND</label>
<textarea class='style-text' name='attr_el1'></textarea>
<label class='style-title' data-i18n="parent-u" >PARENTS</label>
<textarea class='style-text' name='attr_el2'></textarea>
</div>
<div class='grid-column' style='margin-left: -20px;'>
<label class='style-title' data-i18n="famil-u" >FAMILY</label>
<textarea class='style-text' name='attr_el3'></textarea>
<label class='style-title' data-i18n="statu-u" >STATUS</label>
<textarea class='style-text' name='attr_el4'></textarea>
</div>
</div>
<label class='style2-title' data-i18n="influential-frien-u" >INFLUENTIAL FRIEND</label>
<textarea class='style2-text' name='attr_el5' style='margin-bottom: 5px;'></textarea>
</div>
<div class="witcher-witch">
<div class='middle2-grid' style='margin-top: -1px;'>
<div class='grid-column'>
<label class='style-title' data-i18n="school-starting-age-u" >SCHOOL & STARTING AGE</label>
<textarea class='style-text' name='attr_el1'></textarea>
<label class='style-title' data-i18n="early-trainin-u" >EARLY TRAINING</label>
<textarea class='style-text' name='attr_el2'></textarea>
</div>
<div class='grid-column' style='margin-left: -20px;'>
<label class='style-title' data-i18n="trial-u" >TRIALS</label>
<textarea class='style-text' name='attr_el3'></textarea>
<label class='style-title' data-i18n="current-statu-u" >CURRENT STATUS</label>
<textarea class='style-text' name='attr_el4'></textarea>
</div>
</div>
<label class='style2-title' data-i18n="most-important-even-u" >MOST IMPORTANT EVENT</label>
<textarea class='style2-text' name='attr_el5' style='margin-bottom: 5px;'></textarea>
</div>
<span class='background-span'><label class='style-element' data-i18n="siblings-rivals-friends-u" >SIBLINGS, RIVALS & FRIENDS</label></span>
<input type="checkbox" checked name='attr_friends_toggle' class="friends-toggle"><span></span>
<div class='friends-container' style='margin-right: 40px;'>
<fieldset class="repeating_friends" style='margin-bottom: 5px; margin-top: 3px;'>
<details>
<summary>
<span class='background-span-summary summary-header' data-i18n="style-appearance-outloo-u">STYLE, APPEARANCE & OUTLOOK</span>
</summary>
<div class='middle2-grid' style='margin-top: -1px;'>
<div class='grid-column'>
<label class='style-title' data-i18n="clothin-u" >CLOTHING</label>
<textarea class='style-text' name='attr_clothing'></textarea>
<label class='style-title' data-i18n="hair-styl-u" >HAIR STYLE</label>
<textarea class='style-text' name='attr_style'></textarea>
<label class='style-title' data-i18n="valued-perso-u" >VALUED PERSON</label>
<textarea class='style-text' name='attr_valued_person'></textarea>
</div>
<div class='grid-column' style='margin-left: -20px;'>
<label class='style-title' data-i18n="personalit-u" >PERSONALITY</label>
<textarea class='style-text' name='attr_personality'></textarea>
<label class='style-title' data-i18n="affectation-u" >AFFECTATIONS</label>
<textarea class='style-text' name='attr_affectations'></textarea>
<label class='style-title' data-i18n="value-u" >VALUE</label>
<textarea class='style-text' name='attr_value'></textarea>
</div>
</div>
<label class='style2-title' data-i18n="feelings-on-peopl-u" >FEELINGS ON PEOPLE</label>
<textarea class='style2-text' name='attr_feelings'></textarea>
</details>
<details>
<summary>
<span class='background-span-summary summary-header' data-i18n="early-lif-u">EARLY LIFE</span>
<label class='toggle-witcher' data-i18n="witcher-training-u" >WITCHER TRAINING?</label><input type="checkbox" name='attr_witcher_toggle' class="witcher-switch"><span></span>
</summary>
<input type="checkbox" name='attr_witcher_toggle' class="witcher-switch" hidden>
<div class="witcher-standard">
<div class='middle2-grid' style='margin-top: -1px;'>
<div class='grid-column'>
<label class='style-title' data-i18n="homelan-u" >HOMELAND</label>
<textarea class='style-text' name='attr_el1'></textarea>
<label class='style-title' data-i18n="parent-u" >PARENTS</label>
<textarea class='style-text' name='attr_el2'></textarea>
</div>
<div class='grid-column' style='margin-left: -20px;'>
<label class='style-title' data-i18n="famil-u" >FAMILY</label>
<textarea class='style-text' name='attr_el3'></textarea>
<label class='style-title' data-i18n="statu-u" >STATUS</label>
<textarea class='style-text' name='attr_el4'></textarea>
</div>
</div>
<label class='style2-title' data-i18n="influential-frien-u" >INFLUENTIAL FRIEND</label>
<textarea class='style2-text' name='attr_el5' style='margin-bottom: 5px;'></textarea>
</div>
<div class="witcher-witch">
<div class='middle2-grid' style='margin-top: -1px;'>
<div class='grid-column'>
<label class='style-title' data-i18n="school-starting-age-u" >SCHOOL & STARTING AGE</label>
<textarea class='style-text' name='attr_el1'></textarea>
<label class='style-title' data-i18n="early-trainin-u" >EARLY TRAINING</label>
<textarea class='style-text' name='attr_el2'></textarea>
</div>
<div class='grid-column' style='margin-left: -20px;'>
<label class='style-title' data-i18n="trial-u" >TRIALS</label>
<textarea class='style-text' name='attr_el3'></textarea>
<label class='style-title' data-i18n="current-statu-u" >CURRENT STATUS</label>
<textarea class='style-text' name='attr_el4'></textarea>
</div>
</div>
<label class='style2-title' data-i18n="most-important-even-u" >MOST IMPORTANT EVENT</label>
<textarea class='style2-text' name='attr_el5' style='margin-bottom: 5px;'></textarea>
</div>
</details>
<details>
<summary>
<span class='background-span-summary summary-header' data-i18n="siblings-rivals-friends-u">SIBLINGS, RIVALS & FRIENDS</span>
</summary>
<div class='friends-container' style='margin-right: 40px;'>
<fieldset class="repeating_friends" style='margin-bottom: 5px; margin-top: 3px;'>
<span class='repeating_relationship_span'>
<select class='repeating_relationship_type' name="attr_relationship_type">
<option value='sibling' data-i18n="sibling-u" >SIBLING</option>
@@ -3265,19 +3274,23 @@
</select>
<input type="text" class='repeating_relationship_desc' name="attr_relationship_desc" value='Description goes here...'>
</span>
</fieldset>
</div>
</fieldset>
</div>
</details>
<span class='background-span' style='margin-bottom: -0px;'><label class='style-element' data-i18n="life-event-u" >LIFE EVENTS</label></span>
<input type="checkbox" checked name='attr_life_events_toggle' class="life-events-toggle"><span></span>
<div class='events-container' style='margin-right: 40px;'>
<fieldset class="repeating_events">
<details>
<summary>
<span class='background-span-summary summary-header' data-i18n="life-event-u">LIFE EVENTS</span>
</summary>
<div class='events-container' style='margin-right: 40px;'>
<fieldset class="repeating_events">
<span class='repeating_decade_span'>
<input class='repeating_decade' type='text' name="attr_decade" value='Year...'>
<textarea class='repeating_event_desc' name="attr_event_desc" data-i18n="description-here-make-sure" >Description goes here. Make sure to include the decade in the left-hand 'year' box...</textarea>
</span>
</fieldset>
</div>
</fieldset>
</div>
</details>
</div>
<div class='grid-column' style='margin-left: -20px; margin-right: 20px; margin-top: 10px;'>
<div class='reputation-container'>
@@ -4284,14 +4297,17 @@ on('clicked:roll', async (event) => {
);
});
on('clicked:roll_spellcasting_detailed', async (event) => {
on('clicked:repeating_finearts:roll clicked:repeating_performance:roll clicked:repeating_npcskill:roll', async (event) => {
let rollBase = "@{whisper}&{template:singleroll} {{title=SPELL CASTING}} {{name=@{character_name}}} {{roll=[[1d10!+@{will}[STAT]+@{spell_casting_total}[SKILL]?{EXTRA ACTION|No,+0|Yes,-3}[EXTRA ACTION]?{TARGET LOCATION |None/Random,+0|Head,-6|Torso,-1|Arm/Limb,-3|Leg/Tail/Wing,-2}[LOCATION]+?{ADDITIONAL MODS? (Bright Light, No Vision, Terrain etc)|0}[MOD]]]}}{{fumble=[[1d10!]]}}{{fumble2=[[1d10!]]}}{{rolllocation=[[0]]}}";
// prefix gets an empty string for normal attributes, and repeating_section_ID_ for repeating attributes
var trigger = event.triggerName.slice(8); // this always starts with 'clicked:'
var prefix = trigger.split('_').slice(0,3).join('_') + '_'
let rollBase = event.htmlAttributes.value.replaceAll('prefix-', `${prefix}`) + "{{fumble=[[1d10!]]}}{{fumble2=[[1d10!]]}}";
let rollResult = await startRoll(rollBase);
let computedValues = await resolveChecks(
checkFumble(rollResult),
checkLocation(rollResult)
checkFumble(rollResult)
);
finishRoll(
@@ -4300,14 +4316,9 @@ on('clicked:roll_spellcasting_detailed', async (event) => {
);
});
on('clicked:roll_spellcasting_detailed', async (event) => {
on('clicked:repeating_finearts:roll clicked:repeating_performance:roll clicked:repeating_npcskill:roll', async (event) => {
// prefix gets an empty string for normal attributes, and repeating_section_ID_ for repeating attributes
var trigger = event.triggerName.slice(8); // this always starts with 'clicked:'
var prefix = trigger.split('_').slice(0,3).join('_') + '_'
let rollBase = event.htmlAttributes.value.replaceAll('prefix-', `${prefix}`) + "{{fumble=[[1d10!]]}}{{fumble2=[[1d10!]]}}";
let rollBase = "@{whisper}&{template:singleroll} {{title=SPELL CASTING}} {{name=@{character_name}}} {{roll=[[1d10!+@{will}[STAT]+@{spell_casting_total}[SKILL]?{EXTRA ACTION|No,+0|Yes,-3}[EXTRA ACTION]?{TARGET LOCATION |None/Random,+0|Head,-6|Torso,-1|Arm/Limb,-3|Leg/Tail/Wing,-2}[LOCATION]+?{ADDITIONAL MODS? (Bright Light, No Vision, Terrain etc)|0}[MOD]]]}}{{fumble=[[1d10!]]}}{{fumble2=[[1d10!]]}}{{rolllocation=[[0]]}}";
let rollResult = await startRoll(rollBase);
let computedValues = await resolveChecks(