uberwald/l5rx-chiaroscuro
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Html + css Rnk adjustement for flex content

Browse Source
This commit is contained in:
Mandar
2021-02-14 23:19:06 +01:00
parent 3eb623120a
commit babbafffef
5 changed files with 281 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
system/styles/l5r5e.css
View File

File diff suppressed because one or more lines are too long

39
system/styles/scss/dices-chat.scss
View File

@@ -1,11 +1,40 @@
// Dice in chat // Dice in chat
.chat-dice { .chat-dice {
&.rerolled > img { display: inline;
border-bottom: 3px solid orangered; 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 { &.swapped {
border-bottom: 3px solid fuchsia; > img {
border-bottom: 0 none;
}
&:after {
content: "\f337";
background: fuchsia;
}
} }
> img { > img {
@@ -25,7 +54,7 @@
} }
&-stance { &-stance {
font-size: 2rem; font-size: 2.5rem;
line-height: 2.5rem; line-height: 2.5rem;
margin: 0.25rem; margin: 0.25rem;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);

150
system/styles/scss/dices.scss
View File

@@ -28,7 +28,7 @@
border-image: url("../assets/ui/macro-button.webp") 10 repeat; border-image: url("../assets/ui/macro-button.webp") 10 repeat;
border-image-width: 0.5rem; border-image-width: 0.5rem;
border-image-outset: 0px; border-image-outset: 0px;
margin: 0; margin: 0.5rem 0 0;
&:hover { &:hover {
background: linear-gradient( background: linear-gradient(
$l5r5e-linear-gradient-first-dark, $l5r5e-linear-gradient-first-dark,
@@ -96,7 +96,9 @@
text-align: center; text-align: center;
background: none; background: none;
border: none; border: none;
border: 0 none;
margin: 0; margin: 0;
padding: 0;
tbody { tbody {
tr { tr {
td { td {
@@ -182,24 +184,44 @@
.roll-n-keep-dialog { .roll-n-keep-dialog {
min-width: 600px; min-width: 600px;
max-width: 800px;
&.finalized { &.finalized {
width: auto;
min-width: 400px; min-width: 400px;
} }
img { img {
border: 0; border: 0;
} }
table { table {
border: 0 none;
margin: 0;
padding: 0;
}
.rnk-ct {
margin: 0.75rem 0 0; margin: 0.75rem 0 0;
table { display: flex;
border: 0 none; flex-wrap: wrap;
tr { background: rgba(0, 0, 0, 0.05);
background: transparent; 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 { .profil {
@@ -207,11 +229,20 @@
} }
.dropbox { .dropbox {
min-height: 100px; position: relative;
min-height: 7rem;
legend {
i:last-child {
position: absolute;
top: 1rem;
right: 0;
}
}
&.faces-change { &.faces-change {
min-height: 40px; min-height: 40px;
margin: auto; margin: 0.5rem auto;
} }
&.discards { &.discards {
border: 1px solid gray; border: 1px solid gray;
@@ -220,33 +251,96 @@
border: 1px solid orangered; border: 1px solid orangered;
} }
&.keeps { &.keeps {
flex: 100%;
border: 1px solid green; 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 { .dice {
height: 40px; height: 40px;
width: 40px; width: 40px;
} &.discard {
filter: opacity(0.5);
.discard { border: 0 none;
filter: opacity(0.5); }
border: 3px solid gray; &.reroll {
} filter: opacity(0.5);
.reroll { border: 0 none;
filter: opacity(0.5); }
border: 3px solid orangered; &.keep {
} border: 0 none;
.keep { }
border: 3px solid green; &.swap {
} border: 0 none;
.swap { }
border: 3px solid fuchsia;
} }
#finalize { #finalize {
width: calc(100% - 1rem); width: 100%;
margin: 0.5rem; 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);
} }
} }

2
system/templates/dice/chat-roll.html
View File

@@ -47,7 +47,7 @@
{{#each l5r5e.dices}} {{#each l5r5e.dices}}
{{#if this.diceTypeL5r}} {{#if this.diceTypeL5r}}
{{#each this.rolls}} {{#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}} {{/each}}
{{/if}} {{/if}}
{{/each}} {{/each}}

259
system/templates/dice/roll-n-keep-dialog.html
View File

@@ -1,150 +1,137 @@
<form class="{{cssClass}}" autocomplete="off"> <form class="{{cssClass}}" autocomplete="off">
{{!-- Profil --}} {{!-- Profil --}}
<div class="l5r5e profil"> <header class="l5r5e profil part-header flexrow chat-profil">
<header class="part-header flexrow chat-profil"> <span class="chat-profil-element">
<span class="chat-profil-element"> <img class="profile-img"
<img class="profile-img" src="{{#if l5r5e.actor.img}}{{l5r5e.actor.img}}{{else}}icons/svg/mystery-man.svg{{/if}}"
src="{{#if l5r5e.actor.img}}{{l5r5e.actor.img}}{{else}}icons/svg/mystery-man.svg{{/if}}" data-edit="img"
data-edit="img" height="40"
height="40" width="40"
width="40" alt="{{#if l5r5e.actor.name}}{{l5r5e.actor.name}}{{else}}mystery-man{{/if}}"
alt="{{#if l5r5e.actor.name}}{{l5r5e.actor.name}}{{else}}mystery-man{{/if}}" >
> </span>
</span>
<span class="chat-profil-element"> <span class="chat-profil-element">
<i class="chat-profil-stance {{l5r5e.stance}} i_{{l5r5e.stance}}" title="{{localizeRing l5r5e.stance}}"></i> <i class="chat-profil-stance {{l5r5e.stance}} i_{{l5r5e.stance}}" title="{{localizeRing l5r5e.stance}}"></i>
</span> </span>
<span class="chat-profil-element-skill"> <span class="chat-profil-element-skill">
{{#if l5r5e.skillId}} {{#if l5r5e.skillId}}
{{localizeSkillId l5r5e.skillId}} {{localizeSkillId l5r5e.skillId}}
{{else}} {{else}}
{{#if l5r5e.skillCatId}}{{localizeSkill l5r5e.skillCatId 'title'}}{{/if}} {{#if l5r5e.skillCatId}}{{localizeSkill l5r5e.skillCatId 'title'}}{{/if}}
{{/if}} {{/if}}
</span> </span>
<span class="chat-profil-element"> <span class="chat-profil-element">
{{#if l5r5e.difficultyHidden}} {{#if l5r5e.difficultyHidden}}
{{localize 'l5r5e.chatdices.difficulty_hidden'}} {{localize 'l5r5e.chatdices.difficulty_hidden'}}
{{else}} {{else}}
{{localize 'l5r5e.chatdices.difficulty'}} {{l5r5e.difficulty}} {{localize 'l5r5e.chatdices.difficulty'}} {{l5r5e.difficulty}}
{{/if}} {{/if}}
<br> <br>
{{#if l5r5e.voidPointUsed}} {{#if l5r5e.voidPointUsed}}
<i class="i_void" title="{{localize 'l5r5e.chatdices.void_point_used'}}"></i> <i class="i_void" title="{{localize 'l5r5e.chatdices.void_point_used'}}"></i>
{{/if}} {{/if}}
{{#if l5r5e.skillAssistance}} {{#if l5r5e.skillAssistance}}
<i class="i_skill" title="{{l5r5e.skillAssistance}}x {{localize 'l5r5e.chatdices.assistance_used'}}"></i> <i class="i_skill" title="{{l5r5e.skillAssistance}}x {{localize 'l5r5e.chatdices.assistance_used'}}"></i>
{{/if}} {{/if}}
</span> </span>
</header> </header>
</div> <section class="rnk-ct">
<table>
{{!-- Body --}} {{!-- Body --}}
{{#if options.editable}} {{#if options.editable}}
<tr> {{!-- Face Rings --}}
{{!-- Face Rings --}} <fieldset class="dropbox swap">
<td> <legend class="section-header">
<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>
<i class="fa fa-arrow-down" aria-hidden="true"></i> {{localize 'l5r5e.roll_n_keep.swap_drop_here'}} </legend>
</legend>
{{#each data.swapDiceFaces.rings}} {{#each data.swapDiceFaces.rings}}
<div class="dice dropbox faces-change" data-type="swap" data-face="{{this}}" data-die="RingDie"> <div class="dice dropbox faces-change" data-type="swap" data-face="{{this}}" data-die="RingDie">
<img src="{{getDiceFaceUrl 'RingDie' this}}" alt="{{this}}" /> <img src="{{getDiceFaceUrl 'RingDie' this}}" alt="{{this}}" />
</div> </div>
{{/each}} {{/each}}
</td> </fieldset>
{{!-- Center --}} {{!-- Center --}}
<td> <article class="rnk-center">
{{!-- Discard & ReRoll --}} {{!-- Discard & ReRoll --}}
<table> <fieldset class="dropbox discards" data-type="discard">
<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>&nbsp;</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>
<legend class="section-header"> <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> </legend>
{{#each data.swapDiceFaces.skills}} </fieldset>
<div class="dice dropbox faces-change" data-type="swap" data-face="{{this}}" data-die="AbilityDie"> <fieldset class="dropbox rerolls" data-type="reroll">
<img src="{{getDiceFaceUrl 'AbilityDie' this}}" alt="{{this}}" /> <legend class="section-header">
</div> <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>
{{/each}} </legend>
</td> </fieldset>
</tr> {{!-- DiceList history --}}
<tr> <table>
<td colspan="3"> {{#each data.dicesList as |item idxStep|}}
<button id="finalize" name="finalize" type="button" {{#if data.submitDisabled}}disabled{{/if}}> <tr>
{{ localize 'l5r5e.roll_n_keep.bt_validate' }} <i class="fas fa-arrow-circle-right"></i> {{#each item as |dice idxDie|}}
</button> <td>
</td> {{#if dice.face}}
</tr> {{#if dice.newFace}}
{{else}} <span class="fas dice-ct {{dice.choice}}">
{{!-- Non editable DiceList history --}} <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}}" />
{{#each data.dicesList as |item idxStep|}} </span>
<tr> {{else}}
{{#each item as |dice idxDie|}} <span class="fas dice-ct {{dice.choice}}">
<td> <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 dice.face}} </span>
{{#if dice.newFace}} {{/if}}
<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}}" />
{{/if}} {{/if}}
{{/if}} </td>
</td> {{/each}}
</tr>
{{/each}} {{/each}}
</tr> </table>
{{/each}} {{!-- 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}} {{/if}}
</table> </section>
</form> </form>