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';
.theme-light {
.daggerheart,
#chat-notifications {
.daggerheart.chat-sidebar .chat-log,
#chat-notifications .chat-log {
--text-color: @dark-blue;
--bg-color: @dark-blue-40;
.message-content .chat-roll {
.roll-part-header {
span,
span:before,
span:after {
color: @dark-blue;
}
&:before {
background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, @dark-blue 100%);
color: @dark-blue;
.chat-message {
.roll-formula {
background: @dark-15;
color: @dark;
}
&:after {
background: linear-gradient(90deg, @dark-blue 0%, rgba(0, 0, 0, 0) 100%);
color: @dark-blue;
}
}
.roll-section {
.roll-part-content {
.roll-result-value {
color: @dark-blue;
&.duality {
background-image: url(../assets/parchments/dh-parchment-dark.png);
.message-content {
color: @beige;
}
.dice-tooltip .wrapper .roll-die {
.roll-formula {
background: @dark-15;
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);
}
}
.chat-message .roll-formula {
background: @dark-15;
&.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);
}
}
}
&:not(.duality) {
.font-20 {
color: @dark;
}
.roll-die {
color: @beige;
}
fieldset {
color: @dark-blue;
border-color: @dark-blue;
legend {
color: @dark-blue;
}
}
.chat-roll {
.roll-part-header {
color: @dark-blue;
span::before,
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;
}
}
}
}
}
}
}
.daggerheart.chat {
&.resource-roll {
.reroll-message {
text-align: center;
font-size: 18px;
color: @beige;
font-size: 16px;
margin-bottom: 0;
}
}

View file

@ -2,7 +2,7 @@
@import '../../utils/fonts.less';
.theme-light {
.chat-message .message-content {
.chat-message:not(.duality) .message-content {
color: @dark;
blockquote {
@ -58,6 +58,12 @@
font-family: @font-body;
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 {
box-shadow: none;
border: none;
background: light-dark(@dark-blue-40, @golden-40);
color: light-dark(@dark-blue, @golden);
background: @golden-10;
color: @golden;
font-weight: 600;
align-content: center;
}

View file

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