chat dice style

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

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%);
}
}
}
}
}
}

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;