uberwald/l5rx-chiaroscuro
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 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);

134
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,23 +184,43 @@
.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 {
margin: 0.75rem 0 0;
table { table {
border: 0 none; border: 0 none;
margin: 0;
padding: 0;
}
.rnk-ct {
margin: 0.75rem 0 0;
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 { tr {
background: transparent; background: transparent;
td {
margin: 0;
padding: 0;
}
}
} }
} }
.button {
columns: 3;
} }
} }
@@ -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 {
.discard {
filter: opacity(0.5); filter: opacity(0.5);
border: 3px solid gray; border: 0 none;
} }
.reroll { &.reroll {
filter: opacity(0.5); filter: opacity(0.5);
border: 3px solid orangered; border: 0 none;
} }
.keep { &.keep {
border: 3px solid green; border: 0 none;
}
&.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}}

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

@@ -1,7 +1,6 @@
<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}}"
@@ -39,15 +38,13 @@
{{/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 --}}
<td> <fieldset class="dropbox swap">
<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.swap_drop_here'}} <i class="fa fa-arrows-alt-h"></i>
</legend> </legend>
{{#each data.swapDiceFaces.rings}} {{#each data.swapDiceFaces.rings}}
@@ -55,29 +52,20 @@
<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>
<tr>
<td>
<fieldset class="dropbox discards" data-type="discard"> <fieldset class="dropbox discards" data-type="discard">
<legend class="section-header"> <legend class="section-header">
<i class="fa fa-arrow-down" aria-hidden="true"></i> {{localize 'l5r5e.roll_n_keep.discard_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>
</fieldset> </fieldset>
</td>
<td>&nbsp;</td>
<td>
<fieldset class="dropbox rerolls" data-type="reroll"> <fieldset class="dropbox rerolls" data-type="reroll">
<legend class="section-header"> <legend class="section-header">
<i class="fa fa-arrow-down" aria-hidden="true"></i> {{localize 'l5r5e.roll_n_keep.reroll_drop_here'}} <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> </legend>
</fieldset> </fieldset>
</td>
</tr>
</table>
{{!-- DiceList history --}} {{!-- DiceList history --}}
<table> <table>
{{#each data.dicesList as |item idxStep|}} {{#each data.dicesList as |item idxStep|}}
@@ -86,9 +74,13 @@
<td> <td>
{{#if dice.face}} {{#if dice.face}}
{{#if dice.newFace}} {{#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}}" /> <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}} {{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}}" /> <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}} {{/if}}
</td> </td>
@@ -97,38 +89,28 @@
{{/each}} {{/each}}
</table> </table>
{{!-- Keep --}} {{!-- Keep --}}
<table>
<tr>
<td>
<fieldset class="dropbox keeps" data-type="keep"> <fieldset class="dropbox keeps" data-type="keep">
<legend class="section-header"> <legend class="section-header">
<i class="fa fa-arrow-down" aria-hidden="true"></i> {{localize 'l5r5e.roll_n_keep.keep_drop_here'}} <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> </legend>
</fieldset> </fieldset>
</td> </article>
</tr>
</table>
</td>
{{!-- Face Skills --}} {{!-- Face Skills --}}
<td> <fieldset class="dropbox swap">
<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.swap_drop_here'}} <i class="fa fa-arrows-alt-h"></i>
</legend> </legend>
{{#each data.swapDiceFaces.skills}} {{#each data.swapDiceFaces.skills}}
<div class="dice dropbox faces-change" data-type="swap" data-face="{{this}}" data-die="AbilityDie"> <div class="dice dropbox faces-change" data-type="swap" data-face="{{this}}" data-die="AbilityDie">
<img src="{{getDiceFaceUrl 'AbilityDie' this}}" alt="{{this}}" /> <img src="{{getDiceFaceUrl 'AbilityDie' this}}" alt="{{this}}" />
</div> </div>
{{/each}} {{/each}}
</td> </fieldset>
</tr>
<tr>
<td colspan="3">
<button id="finalize" name="finalize" type="button" {{#if data.submitDisabled}}disabled{{/if}}> <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> {{ localize 'l5r5e.roll_n_keep.bt_validate' }} <i class="fas fa-arrow-circle-right"></i>
</button> </button>
</td>
</tr>
{{else}} {{else}}
<table>
{{!-- Non editable DiceList history --}} {{!-- Non editable DiceList history --}}
{{#each data.dicesList as |item idxStep|}} {{#each data.dicesList as |item idxStep|}}
<tr> <tr>
@@ -136,15 +118,20 @@
<td> <td>
{{#if dice.face}} {{#if dice.face}}
{{#if dice.newFace}} {{#if dice.newFace}}
<span class="fas dice-ct {{dice.choice}}">
<img class="dice {{dice.choice}}" src="{{getDiceFaceUrl dice.type dice.newFace}}" alt="{{idxStep}}_{{idxDie}}" /> <img class="dice {{dice.choice}}" src="{{getDiceFaceUrl dice.type dice.newFace}}" alt="{{idxStep}}_{{idxDie}}" />
</span>
{{else}} {{else}}
<span class="fas dice-ct {{dice.choice}}">
<img class="dice {{dice.choice}}" src="{{getDiceFaceUrl dice.type dice.face}}" alt="{{idxStep}}_{{idxDie}}" /> <img class="dice {{dice.choice}}" src="{{getDiceFaceUrl dice.type dice.face}}" alt="{{idxStep}}_{{idxDie}}" />
</span>
{{/if}} {{/if}}
{{/if}} {{/if}}
</td> </td>
{{/each}} {{/each}}
</tr> </tr>
{{/each}} {{/each}}
{{/if}}
</table> </table>
{{/if}}
</section>
</form> </form>