Changes

Using flexbox for checkbox row alignment
Line 1: Line 1:  
<div id="prime-text" style="width: 100%; clear: both;">
 
<div id="prime-text" style="width: 100%; clear: both;">
<div class="{{#var:Style|default}}" style="overflow: hidden;">
+
<div class="{{#var:Style|default}}" style="overflow: hidden; padding-bottom: 5px;">
 
<div class="headline" style="font-variant:small-caps;">{{{1|Distinction}}} [[File: {{#var:Dice|BL}}_{{uc:{{{2|D6}}}}}.png|20px]]</div>
 
<div class="headline" style="font-variant:small-caps;">{{{1|Distinction}}} [[File: {{#var:Dice|BL}}_{{uc:{{{2|D6}}}}}.png|20px]]</div>
<div>''{{{Description|Description}}}''</div>
+
<div style="margin-bottom: 5px;">''{{{Description|Description}}}''</div>
{{#if: {{{Trigger1Checked|}}}|<div class="checkbox">&#9745;</div><div class="trigger">{{{Trigger1Checked}}}</div>|}}
+
{{#if: {{{Trigger1Checked|}}}|<div style="display: flex; align-items: flex-start; margin-bottom: 2px;"><div class="checkbox" style="flex: 0 0 25px;">&#9745;</div><div class="trigger" style="flex: 1;">{{{Trigger1Checked}}}</div></div>|}}
{{#if: {{{Trigger1Unchecked|}}}|<div class="checkbox">&#9744;</div><div class="trigger">{{{Trigger1Unchecked}}}</div>|}}
+
{{#if: {{{Trigger1Unchecked|}}}|<div style="display: flex; align-items: flex-start; margin-bottom: 2px;"><div class="checkbox" style="flex: 0 0 25px;">&#9744;</div><div class="trigger" style="flex: 1;">{{{Trigger1Unchecked}}}</div></div>|}}
{{#if: {{{Trigger2Checked|}}}|<div class="checkbox">&#9745;</div><div class="trigger">{{{Trigger2Checked}}}</div>|}}
+
{{#if: {{{Trigger2Checked|}}}|<div style="display: flex; align-items: flex-start; margin-bottom: 2px;"><div class="checkbox" style="flex: 0 0 25px;">&#9745;</div><div class="trigger" style="flex: 1;">{{{Trigger2Checked}}}</div></div>|}}
{{#if: {{{Trigger2Unchecked|}}}|<div class="checkbox">&#9744;</div><div class="trigger">{{{Trigger2Unchecked}}}</div>|}}
+
{{#if: {{{Trigger2Unchecked|}}}|<div style="display: flex; align-items: flex-start; margin-bottom: 2px;"><div class="checkbox" style="flex: 0 0 25px;">&#9744;</div><div class="trigger" style="flex: 1;">{{{Trigger2Unchecked}}}</div></div>|}}
{{#if: {{{Trigger3Checked|}}}|<div class="checkbox">&#9745;</div><div class="trigger">{{{Trigger3Checked}}}</div>|}}
+
{{#if: {{{Trigger3Checked|}}}|<div style="display: flex; align-items: flex-start; margin-bottom: 2px;"><div class="checkbox" style="flex: 0 0 25px;">&#9745;</div><div class="trigger" style="flex: 1;">{{{Trigger3Checked}}}</div></div>|}}
{{#if: {{{Trigger3Unchecked|}}}|<div class="checkbox">&#9744;</div><div class="trigger">{{{Trigger3Unchecked}}}</div>|}}
+
{{#if: {{{Trigger3Unchecked|}}}|<div style="display: flex; align-items: flex-start; margin-bottom: 2px;"><div class="checkbox" style="flex: 0 0 25px;">&#9744;</div><div class="trigger" style="flex: 1;">{{{Trigger3Unchecked}}}</div></div>|}}
{{#if: {{{HS|}}}|<div class="checkbox">&nbsp;</div><div class="trigger" style="font-variant: small-caps;">Highlighted Skills: '''{{{HS}}}'''</div>|}}
+
{{#if: {{{HS|}}}|<div style="display: flex; align-items: center; margin-top: 5px;"><div class="checkbox" style="flex: 0 0 25px;">&nbsp;</div><div class="trigger" style="flex: 1; font-variant: small-caps;">Highlighted Skills: '''{{{HS}}}'''</div></div>|}}
 
<div style="clear: both;"></div>
 
<div style="clear: both;"></div>
 
</div></div>
 
</div></div>