Add style for chat result

This commit is contained in:
Mandar
2021-02-01 20:49:44 +01:00
parent b54f58c9ce
commit 694333a1cb
3 changed files with 67 additions and 28 deletions

File diff suppressed because one or more lines are too long

View File

@@ -5,6 +5,60 @@
.dice-total {
background: rgba(255, 255, 255, 0.1);
border: rgba(255, 255, 255, 0.75);
text-align: center;
margin: 0.5rem 0;
padding: 0.25rem 0.5rem 0.25rem 0.25rem;
&-rnk {
line-height: 2rem;
i {
margin-left: 0.5rem;
}
}
}
button {
&.chat-dice-rnk {
cursor: default;
color: $white;
background: linear-gradient(
$l5r5e-linear-gradient-third,
$l5r5e-linear-gradient-third-dark,
$l5r5e-linear-gradient-third
);
background-origin: padding-box;
border-image: url("../assets/ui/macro-button.webp") 10 repeat;
border-image-width: 0.5rem;
border-image-outset: 0px;
margin: 0;
&:hover {
background: linear-gradient(
$l5r5e-linear-gradient-first-dark,
$l5r5e-linear-gradient-first,
$l5r5e-linear-gradient-first-dark
);
}
}
}
.dice-result-rnk {
background: rgba(0, 0, 255, 0.1);
border: 1px solid rgba(55, 55, 155, 0.75);
padding: 0.25rem;
color: rgba(55, 55, 155, 0.75);
text-align: center;
font-weight: bold;
text-shadow: 0 0 0 $black;
&.success {
background: rgba(0, 255, 0, 0.1);
border-color: rgba(55, 155, 55, 0.75);
color: rgba(55, 155, 55, 0.75);
i.i_success {
font-size: 1rem;
}
}
&.fail {
background: rgba(255, 0, 0, 0.1);
border-color: rgba(155, 55, 55, 0.75);
color: rgba(155, 55, 55, 0.75);
}
}
}
@@ -18,20 +72,11 @@
border-bottom: 3px solid fuchsia;
}
img {
> img {
border: 1px solid transparent;
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
height: 44px;
width: 44px;
//cursor: pointer;
//-webkit-appearance: none;
//appearance: none;
outline: none;
margin: 0;
flex: 0 0 20px;
display: inline-block;
height: auto;
width: calc(100% / 6 - 0.255rem);
margin: auto;
}
}

View File

@@ -5,13 +5,7 @@
<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}}"
>
<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">
@@ -59,29 +53,29 @@
{{#l5r5e.summary}}
{{!-- summary symbols --}}
<div>
<div class="l5r5e dice-total dice-total-rnk">
{{#if success}}
<i class="i_success" title="{{localize "l5r5e.chatdices.successes"}}"></i> {{success}}
<i class="i_success" title="{{localize 'l5r5e.chatdices.successes'}}"></i>x{{success}}
{{/if}}
{{#if explosive}}
<i class="i_explosive" title="{{localize "l5r5e.chatdices.explosives"}}"></i> {{explosive}}
<i class="i_explosive" title="{{localize 'l5r5e.chatdices.explosives'}}"></i>x{{explosive}}
{{/if}}
{{#if opportunity}}
<i class="i_opportunity" title="{{localize "l5r5e.chatdices.opportunities"}}"></i> {{opportunity}}
<i class="i_opportunity" title="{{localize 'l5r5e.chatdices.opportunities'}}"></i>x{{opportunity}}
{{/if}}
{{#if strife}}
<i class="i_strife" title="{{localize "l5r5e.chatdices.strife"}}"></i> {{strife}}
<i class="i_strife" title="{{localize 'l5r5e.chatdices.strife'}}"></i>x{{strife}}
{{/if}}
</div>
{{!-- Result text --}}
{{^if ../l5r5e.difficultyHidden}}
<div>
<div class="l5r5e dice-result-rnk {{#ifCond totalSuccess '>=' difficulty}}success{{else}}fail{{/ifCond}}">
{{#ifCond totalSuccess '>=' ../l5r5e.difficulty}}
{{localize "l5r5e.chatdices.success_text"}} ({{totalBonus}} {{localize "l5r5e.chatdices.bonus_text"}})
{{localize "l5r5e.chatdices.success_text"}} + <i title="{{totalBonus}} {{localize 'l5r5e.chatdices.successes'}}">({{totalBonus}} {{localize "l5r5e.chatdices.bonus_text"}})</i>
{{else}}
{{localize "l5r5e.chatdices.fail_text"}}
{{/ifCond}}