diff --git a/src/scss/components/_dice_total.scss b/src/scss/components/_dice_total.scss index c19a0572..a9082cc1 100644 --- a/src/scss/components/_dice_total.scss +++ b/src/scss/components/_dice_total.scss @@ -1,18 +1,20 @@ @use "../utils/colors"; -.ds4-dice-total { +// Needs to be nested in .dice-roll to win against foundry's style.css with respect to specificity +.dice-roll .ds4-dice-total { @mixin color-filter($rotation) { filter: sepia(0.5) hue-rotate($rotation); - backdrop-filter: sepia(0) hue-rotate($rotation); } &--coup { - color: colors.$c-coup; @include color-filter(60deg); + background-color: colors.$c-coup-bg; + color: colors.$c-coup; } &--fumble { - color: colors.$c-fumble; @include color-filter(-60deg); + background-color: colors.$c-fumble-bg; + color: colors.$c-fumble; } } diff --git a/src/scss/utils/_colors.scss b/src/scss/utils/_colors.scss index 91844386..b3a864a2 100644 --- a/src/scss/utils/_colors.scss +++ b/src/scss/utils/_colors.scss @@ -4,4 +4,6 @@ $c-light-grey: #777; $c-border-groove: #eeede0; $c-invalid-input: rgba(lightcoral, 50%); $c-coup: #18520b; +$c-coup-bg: #acc2a7; $c-fumble: #aa0200; +$c-fumble-bg: #d8b5ba;