cosmo/daggerheart
1
0
Fork 0
mirror of https://github.com/Foundryborne/daggerheart.git synced 2026-01-12 03:31:07 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

chat dice style

Browse source
This commit is contained in:
Dapoolp 2025-06-13 20:36:44 +02:00
parent 36bbfc52fb
commit a040beab13
3 changed files with 55 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

47
styles/chat.less
View file

@ -349,7 +349,22 @@
align-items: center;
justify-content: center;
position: relative;
&.hope, &.fear {
.dice-wrapper {
clip-path: polygon(
50% 0%,
80% 10%,
100% 35%,
100% 70%,
80% 90%,
50% 100%,
20% 90%,
0% 70%,
0% 35%,
20% 10%
);
}
}
.dice-wrapper {
height: 24px;
width: 24px;
@ -357,18 +372,6 @@
display: flex;
align-items: center;
justify-content: center;
clip-path: polygon(
50% 0%,
80% 10%,
100% 35%,
100% 70%,
80% 90%,
50% 100%,
20% 90%,
0% 70%,
0% 35%,
20% 10%
);
.dice {
height: 26px;
@ -415,6 +418,24 @@
text-shadow: 0 0 4px black;
}
}
&.advantage {
.dice-wrapper {
.dice {
filter: brightness(0) saturate(100%) invert(18%) sepia(92%) saturate(4133%)
hue-rotate(96deg) brightness(104%) contrast(107%);
}
}
}
&.disadvantage {
.dice-wrapper {
.dice {
filter: brightness(0) saturate(100%) invert(9%) sepia(78%) saturate(6903%)
hue-rotate(11deg) brightness(93%) contrast(117%);
}
}
}
}
}
}

11
styles/daggerheart.css
View file

@ -1508,6 +1508,10 @@
justify-content: center;
position: relative;
}
.daggerheart.chat.roll .dice-tooltip .dice-rolls > .roll .dice-container .dice-inner-container.hope .dice-wrapper,
.daggerheart.chat.roll .dice-tooltip .dice-rolls > .roll .dice-container .dice-inner-container.fear .dice-wrapper {
clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
}
.daggerheart.chat.roll .dice-tooltip .dice-rolls > .roll .dice-container .dice-inner-container .dice-wrapper {
height: 24px;
width: 24px;
@ -1515,7 +1519,6 @@
display: flex;
align-items: center;
justify-content: center;
clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
}
.daggerheart.chat.roll .dice-tooltip .dice-rolls > .roll .dice-container .dice-inner-container .dice-wrapper .dice {
height: 26px;
@ -1548,6 +1551,12 @@
color: var(--color-light-1);
text-shadow: 0 0 4px black;
}
.daggerheart.chat.roll .dice-tooltip .dice-rolls > .roll .dice-container .dice-inner-container.advantage .dice-wrapper .dice {
filter: brightness(0) saturate(100%) invert(18%) sepia(92%) saturate(4133%) hue-rotate(96deg) brightness(104%) contrast(107%);
}
.daggerheart.chat.roll .dice-tooltip .dice-rolls > .roll .dice-container .dice-inner-container.disadvantage .dice-wrapper .dice {
filter: brightness(0) saturate(100%) invert(9%) sepia(78%) saturate(6903%) hue-rotate(11deg) brightness(93%) contrast(117%);
}
.daggerheart.chat.roll .dice-total.duality.hope {
border-color: #ffe760;
border-width: 3px;

20
templates/chat/duality-roll.hbs
View file

@ -123,7 +123,7 @@
</header>
<div class="flexrow">
<ol class="dice-rolls duality">
<li class="roll die {{hope.dice}} {{#if hope.discarded}}discarded{{/if}} hope min" title="{{localize "DAGGERHEART.General.Hope"}}">
<li class="roll die {{hope.dice}} {{#if hope.discarded}}discarded{{/if}}" title="{{localize "DAGGERHEART.General.Hope"}}">
<div class="dice-container">
<div class="dice-title">{{localize "DAGGERHEART.General.Hope"}}</div>
<div class="dice-inner-container hope" title="{{localize "DAGGERHEART.General.Hope"}}">
@ -134,7 +134,7 @@
</div>
</div>
</li>
<li class="roll die {{fear.dice}} {{#if fear.discarded}}discarded{{/if}} fear min" title="{{localize "DAGGERHEART.General.Fear"}}">
<li class="roll die {{fear.dice}} {{#if fear.discarded}}discarded{{/if}}" title="{{localize "DAGGERHEART.General.Fear"}}">
<div class="dice-container">
<div class="dice-title">{{localize "DAGGERHEART.General.Fear"}}</div>
<div class="dice-inner-container fear" title="{{localize "DAGGERHEART.General.Fear"}}">
@ -158,9 +158,9 @@
</header>
<div class="flexrow">
<ol class="dice-rolls">
<li class="roll die {{advantage.dice}} hope min">
<div class="dice-container advantage">
<div class="dice-inner-container">
<li class="roll die {{advantage.dice}}">
<div class="dice-container">
<div class="dice-inner-container advantage">
<div class="dice-wrapper">
<img class="dice" src="../icons/svg/d6-grey.svg"/>
</div>
@ -182,10 +182,12 @@
</header>
<div class="flexrow">
<ol class="dice-rolls">
<li class="roll die {{advantage.dice}} hope min">
<div class="advantage-container disadvantage">
<div class="dice-wrapper">
<img class="dice" src="../icons/svg/d6-grey.svg"/>
<li class="roll die {{advantage.dice}}">
<div class="dice-container">
<div class="dice-inner-container disadvantage">
<div class="dice-wrapper">
<img class="dice" src="../icons/svg/d6-grey.svg"/>
</div>
<div class="dice-value">{{advantage.value}}</div>
</div>
</div>