fix light theme to roll messages

This commit is contained in:
moliloo 2025-08-23 05:05:11 -03:00
parent d5f7e17339
commit 1ee7a1f742
3 changed files with 123 additions and 33 deletions

View file

@ -3,53 +3,137 @@
@import '../../utils/spacing.less'; @import '../../utils/spacing.less';
.theme-light { .theme-light {
.daggerheart, .daggerheart.chat-sidebar .chat-log,
#chat-notifications { #chat-notifications .chat-log {
--text-color: @dark-blue; --text-color: @dark-blue;
--bg-color: @dark-blue-40; --bg-color: @dark-blue-40;
.message-content .chat-roll { .chat-message {
.roll-part-header { .roll-formula {
span, background: @dark-15;
span:before, color: @dark;
span:after { }
color: @dark-blue;
} &.duality {
&:before { background-image: url(../assets/parchments/dh-parchment-dark.png);
background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, @dark-blue 100%);
color: @dark-blue; .message-content {
color: @beige;
} }
&:after { .roll-formula {
background: linear-gradient(90deg, @dark-blue 0%, rgba(0, 0, 0, 0) 100%); background: @dark-15;
color: @dark-blue; color: @dark;
}
.message-header {
.message-sub-header-container {
color: @beige;
h4 {
color: @golden;
}
}
.message-header-metadata {
.message-metadata {
color: @beige;
}
}
}
&.hope {
--text-color: @golden;
--bg-color: @golden-40;
.message-header,
.message-content {
background-color: @golden-bg;
}
.roll-formula {
background: var(--bg-color);
color: var(--text-color);
}
}
&.fear {
--text-color: @chat-blue;
--bg-color: @chat-blue-40;
.message-header,
.message-content {
background-color: @chat-blue-bg;
}
.roll-formula {
background: var(--bg-color);
color: var(--text-color);
}
}
&.critical {
--text-color: @chat-purple;
--bg-color: @chat-purple-40;
.message-header,
.message-content {
background-color: @chat-purple-bg;
}
.roll-formula {
background: var(--bg-color);
color: var(--text-color);
}
} }
} }
.roll-section {
.roll-part-content { &:not(.duality) {
.roll-result-value { .font-20 {
color: @dark;
}
.roll-die {
color: @beige;
}
fieldset {
color: @dark-blue;
border-color: @dark-blue;
legend {
color: @dark-blue; color: @dark-blue;
} }
}
.chat-roll {
.roll-part-header {
color: @dark-blue;
.dice-tooltip .wrapper .roll-die { span::before,
color: @beige; span::after {
color: @dark-blue;
}
&:before {
background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, @dark-blue 100%);
}
&:after {
background: linear-gradient(90deg, @dark-blue 0%, rgba(0, 0, 0, 0) 100%);
}
}
.roll-part-content {
&.dice-result {
color: @dark;
}
.roll-result-container {
color: @dark-blue;
}
} }
} }
} }
} }
.chat-message .roll-formula {
background: @dark-15;
color: @dark;
}
} }
} }
.daggerheart.chat { .daggerheart.chat {
&.resource-roll { &.resource-roll {
.reroll-message { .reroll-message {
text-align: center; color: @beige;
font-size: 18px; font-size: 16px;
margin-bottom: 0; margin-bottom: 0;
} }
} }

View file

@ -2,7 +2,7 @@
@import '../../utils/fonts.less'; @import '../../utils/fonts.less';
.theme-light { .theme-light {
.chat-message .message-content { .chat-message:not(.duality) .message-content {
color: @dark; color: @dark;
blockquote { blockquote {
@ -58,6 +58,12 @@
font-family: @font-body; font-family: @font-body;
font-weight: bold; font-weight: bold;
} }
.dice-roll .dice-formula,
.dice-roll .dice-total {
background: @dark-blue-40;
color: @dark-blue;
}
} }
} }
@ -158,8 +164,8 @@
.dice-roll .dice-total { .dice-roll .dice-total {
box-shadow: none; box-shadow: none;
border: none; border: none;
background: light-dark(@dark-blue-40, @golden-40); background: @golden-10;
color: light-dark(@dark-blue, @golden); color: @golden;
font-weight: 600; font-weight: 600;
align-content: center; align-content: center;
} }

View file

@ -1,3 +1,3 @@
<div class="daggerheart chat resource-roll"> <ul class="daggerheart chat resource-roll">
<h5 class="reroll-message">{{localize "DAGGERHEART.UI.Chat.resourceRoll.playerMessage" user=user name=name }}</h5> <li class="reroll-message">{{localize "DAGGERHEART.UI.Chat.resourceRoll.playerMessage" user=user name=name }}</li>
</div> </ul>