Html + css Rnk adjustement for flex content
This commit is contained in:
Mandar
File diff suppressed because one or more lines are too long
@@ -1,11 +1,40 @@
|
||||
// Dice in chat
|
||||
.chat-dice {
|
||||
&.rerolled > img {
|
||||
border-bottom: 3px solid orangered;
|
||||
display: inline;
|
||||
position: relative;
|
||||
padding: 0.25rem;
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border-radius: 0.15rem;
|
||||
padding: 0 0.1rem 0 0.15rem;
|
||||
font-size: 0.65rem;
|
||||
line-height: 1rem;
|
||||
width: 0.75rem;
|
||||
text-align: center;
|
||||
color: white;
|
||||
background: transparent;
|
||||
}
|
||||
&.rerolled {
|
||||
> img {
|
||||
border-bottom: 0 none;
|
||||
}
|
||||
&:after {
|
||||
content: "\f2f9";
|
||||
background: orangered;
|
||||
}
|
||||
}
|
||||
|
||||
&.swapped > img {
|
||||
border-bottom: 3px solid fuchsia;
|
||||
&.swapped {
|
||||
> img {
|
||||
border-bottom: 0 none;
|
||||
}
|
||||
&:after {
|
||||
content: "\f337";
|
||||
background: fuchsia;
|
||||
}
|
||||
}
|
||||
|
||||
> img {
|
||||
@@ -25,7 +54,7 @@
|
||||
}
|
||||
|
||||
&-stance {
|
||||
font-size: 2rem;
|
||||
font-size: 2.5rem;
|
||||
line-height: 2.5rem;
|
||||
margin: 0.25rem;
|
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
border-image: url("../assets/ui/macro-button.webp") 10 repeat;
|
||||
border-image-width: 0.5rem;
|
||||
border-image-outset: 0px;
|
||||
margin: 0;
|
||||
margin: 0.5rem 0 0;
|
||||
&:hover {
|
||||
background: linear-gradient(
|
||||
$l5r5e-linear-gradient-first-dark,
|
||||
@@ -96,7 +96,9 @@
|
||||
text-align: center;
|
||||
background: none;
|
||||
border: none;
|
||||
border: 0 none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
tbody {
|
||||
tr {
|
||||
td {
|
||||
@@ -182,24 +184,44 @@
|
||||
|
||||
.roll-n-keep-dialog {
|
||||
min-width: 600px;
|
||||
max-width: 800px;
|
||||
&.finalized {
|
||||
width: auto;
|
||||
min-width: 400px;
|
||||
}
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
border: 0 none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.rnk-ct {
|
||||
margin: 0.75rem 0 0;
|
||||
table {
|
||||
border: 0 none;
|
||||
tr {
|
||||
background: transparent;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
border: 1px solid rgba(186, 187, 177, 0.5);
|
||||
.rnk-center {
|
||||
flex: 350px;
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
table {
|
||||
display: table;
|
||||
min-height: 9rem;
|
||||
tbody {
|
||||
tr {
|
||||
background: transparent;
|
||||
td {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.button {
|
||||
columns: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.profil {
|
||||
@@ -207,11 +229,20 @@
|
||||
}
|
||||
|
||||
.dropbox {
|
||||
min-height: 100px;
|
||||
position: relative;
|
||||
min-height: 7rem;
|
||||
|
||||
legend {
|
||||
i:last-child {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.faces-change {
|
||||
min-height: 40px;
|
||||
margin: auto;
|
||||
margin: 0.5rem auto;
|
||||
}
|
||||
&.discards {
|
||||
border: 1px solid gray;
|
||||
@@ -220,33 +251,96 @@
|
||||
border: 1px solid orangered;
|
||||
}
|
||||
&.keeps {
|
||||
flex: 100%;
|
||||
border: 1px solid green;
|
||||
}
|
||||
&.swap {
|
||||
flex: 0 0 calc(100px + 1rem);
|
||||
border: 1px solid fuchsia;
|
||||
}
|
||||
&.discards,
|
||||
&.rerolls {
|
||||
flex: 0 0 calc(50% - 0.5rem);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
/* Dice Marker */
|
||||
.dice-ct {
|
||||
position: relative;
|
||||
padding: 0.25rem;
|
||||
&:after {
|
||||
content: "\f128";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border-radius: 0.15rem;
|
||||
padding: 0 0.1rem 0 0.15rem;
|
||||
font-size: 0.65rem;
|
||||
line-height: 1rem;
|
||||
width: 0.65rem;
|
||||
text-align: center;
|
||||
color: white;
|
||||
background: gray;
|
||||
}
|
||||
&.discard {
|
||||
filter: opacity(0.5);
|
||||
&:after {
|
||||
content: "\f00d";
|
||||
background: gray;
|
||||
}
|
||||
}
|
||||
&.reroll {
|
||||
filter: opacity(0.5);
|
||||
&:after {
|
||||
content: "\f2f9";
|
||||
background: orangered;
|
||||
}
|
||||
}
|
||||
&.keep {
|
||||
&:after {
|
||||
content: "\f00c";
|
||||
background: green;
|
||||
}
|
||||
}
|
||||
&.swap {
|
||||
&:after {
|
||||
content: "\f337";
|
||||
background: fuchsia;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dice {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.discard {
|
||||
filter: opacity(0.5);
|
||||
border: 3px solid gray;
|
||||
}
|
||||
.reroll {
|
||||
filter: opacity(0.5);
|
||||
border: 3px solid orangered;
|
||||
}
|
||||
.keep {
|
||||
border: 3px solid green;
|
||||
}
|
||||
.swap {
|
||||
border: 3px solid fuchsia;
|
||||
&.discard {
|
||||
filter: opacity(0.5);
|
||||
border: 0 none;
|
||||
}
|
||||
&.reroll {
|
||||
filter: opacity(0.5);
|
||||
border: 0 none;
|
||||
}
|
||||
&.keep {
|
||||
border: 0 none;
|
||||
}
|
||||
&.swap {
|
||||
border: 0 none;
|
||||
}
|
||||
}
|
||||
|
||||
#finalize {
|
||||
width: calc(100% - 1rem);
|
||||
margin: 0.5rem;
|
||||
width: 100%;
|
||||
margin: 0.5rem 0.25rem 0.25rem;
|
||||
}
|
||||
.section-header {
|
||||
i {
|
||||
font-size: 0.75rem;
|
||||
margin: 0 0.25rem;
|
||||
}
|
||||
}
|
||||
.fa-sign-in-alt {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -47,7 +47,7 @@
|
||||
{{#each l5r5e.dices}}
|
||||
{{#if this.diceTypeL5r}}
|
||||
{{#each this.rolls}}
|
||||
<span class="l5r5e chat-dice {{this.classes}}">{{{this.result}}}</span>
|
||||
<span class="l5r5e fas chat-dice {{this.classes}}">{{{this.result}}}</span>
|
||||
{{/each}}
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
|
||||
@@ -1,150 +1,137 @@
|
||||
<form class="{{cssClass}}" autocomplete="off">
|
||||
{{!-- Profil --}}
|
||||
<div class="l5r5e profil">
|
||||
<header class="part-header flexrow chat-profil">
|
||||
<span class="chat-profil-element">
|
||||
<img class="profile-img"
|
||||
src="{{#if l5r5e.actor.img}}{{l5r5e.actor.img}}{{else}}icons/svg/mystery-man.svg{{/if}}"
|
||||
data-edit="img"
|
||||
height="40"
|
||||
width="40"
|
||||
alt="{{#if l5r5e.actor.name}}{{l5r5e.actor.name}}{{else}}mystery-man{{/if}}"
|
||||
>
|
||||
</span>
|
||||
<header class="l5r5e profil part-header flexrow chat-profil">
|
||||
<span class="chat-profil-element">
|
||||
<img class="profile-img"
|
||||
src="{{#if l5r5e.actor.img}}{{l5r5e.actor.img}}{{else}}icons/svg/mystery-man.svg{{/if}}"
|
||||
data-edit="img"
|
||||
height="40"
|
||||
width="40"
|
||||
alt="{{#if l5r5e.actor.name}}{{l5r5e.actor.name}}{{else}}mystery-man{{/if}}"
|
||||
>
|
||||
</span>
|
||||
|
||||
<span class="chat-profil-element">
|
||||
<i class="chat-profil-stance {{l5r5e.stance}} i_{{l5r5e.stance}}" title="{{localizeRing l5r5e.stance}}"></i>
|
||||
</span>
|
||||
<span class="chat-profil-element">
|
||||
<i class="chat-profil-stance {{l5r5e.stance}} i_{{l5r5e.stance}}" title="{{localizeRing l5r5e.stance}}"></i>
|
||||
</span>
|
||||
|
||||
<span class="chat-profil-element-skill">
|
||||
{{#if l5r5e.skillId}}
|
||||
{{localizeSkillId l5r5e.skillId}}
|
||||
{{else}}
|
||||
{{#if l5r5e.skillCatId}}{{localizeSkill l5r5e.skillCatId 'title'}}{{/if}}
|
||||
{{/if}}
|
||||
</span>
|
||||
<span class="chat-profil-element-skill">
|
||||
{{#if l5r5e.skillId}}
|
||||
{{localizeSkillId l5r5e.skillId}}
|
||||
{{else}}
|
||||
{{#if l5r5e.skillCatId}}{{localizeSkill l5r5e.skillCatId 'title'}}{{/if}}
|
||||
{{/if}}
|
||||
</span>
|
||||
|
||||
<span class="chat-profil-element">
|
||||
{{#if l5r5e.difficultyHidden}}
|
||||
{{localize 'l5r5e.chatdices.difficulty_hidden'}}
|
||||
{{else}}
|
||||
{{localize 'l5r5e.chatdices.difficulty'}} {{l5r5e.difficulty}}
|
||||
{{/if}}
|
||||
<br>
|
||||
{{#if l5r5e.voidPointUsed}}
|
||||
<i class="i_void" title="{{localize 'l5r5e.chatdices.void_point_used'}}"></i>
|
||||
{{/if}}
|
||||
{{#if l5r5e.skillAssistance}}
|
||||
<i class="i_skill" title="{{l5r5e.skillAssistance}}x {{localize 'l5r5e.chatdices.assistance_used'}}"></i>
|
||||
{{/if}}
|
||||
</span>
|
||||
</header>
|
||||
</div>
|
||||
<table>
|
||||
<span class="chat-profil-element">
|
||||
{{#if l5r5e.difficultyHidden}}
|
||||
{{localize 'l5r5e.chatdices.difficulty_hidden'}}
|
||||
{{else}}
|
||||
{{localize 'l5r5e.chatdices.difficulty'}} {{l5r5e.difficulty}}
|
||||
{{/if}}
|
||||
<br>
|
||||
{{#if l5r5e.voidPointUsed}}
|
||||
<i class="i_void" title="{{localize 'l5r5e.chatdices.void_point_used'}}"></i>
|
||||
{{/if}}
|
||||
{{#if l5r5e.skillAssistance}}
|
||||
<i class="i_skill" title="{{l5r5e.skillAssistance}}x {{localize 'l5r5e.chatdices.assistance_used'}}"></i>
|
||||
{{/if}}
|
||||
</span>
|
||||
</header>
|
||||
<section class="rnk-ct">
|
||||
{{!-- Body --}}
|
||||
{{#if options.editable}}
|
||||
<tr>
|
||||
{{!-- Face Rings --}}
|
||||
<td>
|
||||
<legend class="section-header">
|
||||
<i class="fa fa-arrow-down" aria-hidden="true"></i> {{localize 'l5r5e.roll_n_keep.swap_drop_here'}}
|
||||
</legend>
|
||||
{{!-- Face Rings --}}
|
||||
<fieldset class="dropbox swap">
|
||||
<legend class="section-header">
|
||||
<i class="fa fa-sign-in-alt" aria-hidden="true"></i> {{localize 'l5r5e.roll_n_keep.swap_drop_here'}} <i class="fa fa-arrows-alt-h"></i>
|
||||
</legend>
|
||||
|
||||
{{#each data.swapDiceFaces.rings}}
|
||||
<div class="dice dropbox faces-change" data-type="swap" data-face="{{this}}" data-die="RingDie">
|
||||
<img src="{{getDiceFaceUrl 'RingDie' this}}" alt="{{this}}" />
|
||||
</div>
|
||||
{{/each}}
|
||||
</td>
|
||||
{{!-- Center --}}
|
||||
<td>
|
||||
{{!-- Discard & ReRoll --}}
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<fieldset class="dropbox discards" data-type="discard">
|
||||
<legend class="section-header">
|
||||
<i class="fa fa-arrow-down" aria-hidden="true"></i> {{localize 'l5r5e.roll_n_keep.discard_drop_here'}}
|
||||
</legend>
|
||||
</fieldset>
|
||||
</td>
|
||||
<td> </td>
|
||||
<td>
|
||||
<fieldset class="dropbox rerolls" data-type="reroll">
|
||||
<legend class="section-header">
|
||||
<i class="fa fa-arrow-down" aria-hidden="true"></i> {{localize 'l5r5e.roll_n_keep.reroll_drop_here'}}
|
||||
</legend>
|
||||
</fieldset>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
{{!-- DiceList history --}}
|
||||
<table>
|
||||
{{#each data.dicesList as |item idxStep|}}
|
||||
<tr>
|
||||
{{#each item as |dice idxDie|}}
|
||||
<td>
|
||||
{{#if dice.face}}
|
||||
{{#if dice.newFace}}
|
||||
<img class="dice {{dice.choice}}{{#ifCond ../../data.currentStep '==' idxStep}} draggable{{/ifCond}}" data-step="{{idxStep}}" data-die="{{idxDie}}" src="{{getDiceFaceUrl dice.type dice.newFace}}" alt="{{idxStep}}_{{idxDie}}" />
|
||||
{{else}}
|
||||
<img class="dice {{dice.choice}}{{#ifCond ../../data.currentStep '==' idxStep}} draggable{{/ifCond}}" data-step="{{idxStep}}" data-die="{{idxDie}}" src="{{getDiceFaceUrl dice.type dice.face}}" alt="{{idxStep}}_{{idxDie}}" />
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</td>
|
||||
{{/each}}
|
||||
</tr>
|
||||
{{/each}}
|
||||
</table>
|
||||
{{!-- Keep --}}
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<fieldset class="dropbox keeps" data-type="keep">
|
||||
<legend class="section-header">
|
||||
<i class="fa fa-arrow-down" aria-hidden="true"></i> {{localize 'l5r5e.roll_n_keep.keep_drop_here'}}
|
||||
</legend>
|
||||
</fieldset>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
{{!-- Face Skills --}}
|
||||
<td>
|
||||
{{#each data.swapDiceFaces.rings}}
|
||||
<div class="dice dropbox faces-change" data-type="swap" data-face="{{this}}" data-die="RingDie">
|
||||
<img src="{{getDiceFaceUrl 'RingDie' this}}" alt="{{this}}" />
|
||||
</div>
|
||||
{{/each}}
|
||||
</fieldset>
|
||||
{{!-- Center --}}
|
||||
<article class="rnk-center">
|
||||
{{!-- Discard & ReRoll --}}
|
||||
<fieldset class="dropbox discards" data-type="discard">
|
||||
<legend class="section-header">
|
||||
<i class="fa fa-arrow-down" aria-hidden="true"></i> {{localize 'l5r5e.roll_n_keep.swap_drop_here'}}
|
||||
<i class="fa fa-sign-in-alt" aria-hidden="true"></i> {{localize 'l5r5e.roll_n_keep.discard_drop_here'}} <i class="fa fa-times"></i>
|
||||
</legend>
|
||||
{{#each data.swapDiceFaces.skills}}
|
||||
<div class="dice dropbox faces-change" data-type="swap" data-face="{{this}}" data-die="AbilityDie">
|
||||
<img src="{{getDiceFaceUrl 'AbilityDie' this}}" alt="{{this}}" />
|
||||
</div>
|
||||
{{/each}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<button id="finalize" name="finalize" type="button" {{#if data.submitDisabled}}disabled{{/if}}>
|
||||
{{ localize 'l5r5e.roll_n_keep.bt_validate' }} <i class="fas fa-arrow-circle-right"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
{{else}}
|
||||
{{!-- Non editable DiceList history --}}
|
||||
{{#each data.dicesList as |item idxStep|}}
|
||||
<tr>
|
||||
{{#each item as |dice idxDie|}}
|
||||
<td>
|
||||
{{#if dice.face}}
|
||||
{{#if dice.newFace}}
|
||||
<img class="dice {{dice.choice}}" src="{{getDiceFaceUrl dice.type dice.newFace}}" alt="{{idxStep}}_{{idxDie}}" />
|
||||
{{else}}
|
||||
<img class="dice {{dice.choice}}" src="{{getDiceFaceUrl dice.type dice.face}}" alt="{{idxStep}}_{{idxDie}}" />
|
||||
</fieldset>
|
||||
<fieldset class="dropbox rerolls" data-type="reroll">
|
||||
<legend class="section-header">
|
||||
<i class="fa fa-sign-in-alt" aria-hidden="true"></i> {{localize 'l5r5e.roll_n_keep.reroll_drop_here'}} <i class="fa fa-redo-alt"></i>
|
||||
</legend>
|
||||
</fieldset>
|
||||
{{!-- DiceList history --}}
|
||||
<table>
|
||||
{{#each data.dicesList as |item idxStep|}}
|
||||
<tr>
|
||||
{{#each item as |dice idxDie|}}
|
||||
<td>
|
||||
{{#if dice.face}}
|
||||
{{#if dice.newFace}}
|
||||
<span class="fas dice-ct {{dice.choice}}">
|
||||
<img class="dice {{dice.choice}}{{#ifCond ../../data.currentStep '==' idxStep}} draggable{{/ifCond}}" data-step="{{idxStep}}" data-die="{{idxDie}}" src="{{getDiceFaceUrl dice.type dice.newFace}}" alt="{{idxStep}}_{{idxDie}}" />
|
||||
</span>
|
||||
{{else}}
|
||||
<span class="fas dice-ct {{dice.choice}}">
|
||||
<img class="dice {{dice.choice}}{{#ifCond ../../data.currentStep '==' idxStep}} draggable{{/ifCond}}" data-step="{{idxStep}}" data-die="{{idxDie}}" src="{{getDiceFaceUrl dice.type dice.face}}" alt="{{idxStep}}_{{idxDie}}" />
|
||||
</span>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</td>
|
||||
</td>
|
||||
{{/each}}
|
||||
</tr>
|
||||
{{/each}}
|
||||
</tr>
|
||||
{{/each}}
|
||||
</table>
|
||||
{{!-- Keep --}}
|
||||
<fieldset class="dropbox keeps" data-type="keep">
|
||||
<legend class="section-header">
|
||||
<i class="fa fa-sign-in-alt" aria-hidden="true"></i> {{localize 'l5r5e.roll_n_keep.keep_drop_here'}} <i class="fa fa-check"></i>
|
||||
</legend>
|
||||
</fieldset>
|
||||
</article>
|
||||
{{!-- Face Skills --}}
|
||||
<fieldset class="dropbox swap">
|
||||
<legend class="section-header">
|
||||
<i class="fa fa-sign-in-alt" aria-hidden="true"></i> {{localize 'l5r5e.roll_n_keep.swap_drop_here'}} <i class="fa fa-arrows-alt-h"></i>
|
||||
</legend>
|
||||
{{#each data.swapDiceFaces.skills}}
|
||||
<div class="dice dropbox faces-change" data-type="swap" data-face="{{this}}" data-die="AbilityDie">
|
||||
<img src="{{getDiceFaceUrl 'AbilityDie' this}}" alt="{{this}}" />
|
||||
</div>
|
||||
{{/each}}
|
||||
</fieldset>
|
||||
<button id="finalize" name="finalize" type="button" {{#if data.submitDisabled}}disabled{{/if}}>
|
||||
{{ localize 'l5r5e.roll_n_keep.bt_validate' }} <i class="fas fa-arrow-circle-right"></i>
|
||||
</button>
|
||||
{{else}}
|
||||
<table>
|
||||
{{!-- Non editable DiceList history --}}
|
||||
{{#each data.dicesList as |item idxStep|}}
|
||||
<tr>
|
||||
{{#each item as |dice idxDie|}}
|
||||
<td>
|
||||
{{#if dice.face}}
|
||||
{{#if dice.newFace}}
|
||||
<span class="fas dice-ct {{dice.choice}}">
|
||||
<img class="dice {{dice.choice}}" src="{{getDiceFaceUrl dice.type dice.newFace}}" alt="{{idxStep}}_{{idxDie}}" />
|
||||
</span>
|
||||
{{else}}
|
||||
<span class="fas dice-ct {{dice.choice}}">
|
||||
<img class="dice {{dice.choice}}" src="{{getDiceFaceUrl dice.type dice.face}}" alt="{{idxStep}}_{{idxDie}}" />
|
||||
</span>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</td>
|
||||
{{/each}}
|
||||
</tr>
|
||||
{{/each}}
|
||||
</table>
|
||||
{{/if}}
|
||||
</table>
|
||||
</section>
|
||||
</form>
|
||||
|
||||
Reference in New Issue
Block a user