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

add light theme for chat messages (#1016)

Browse source
This commit is contained in:
Murilo Brito 2025-08-20 05:14:46 -03:00 • committed by GitHub
parent af250d7a61
commit 7a6bbe3488
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 231 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

40
styles/less/ui/chat/ability-use.less
View file

@ -2,6 +2,38 @@
@import '../../utils/fonts.less';
@import '../../utils/spacing.less';
.theme-light {
.daggerheart.chat.domain-card {
.domain-card-move .domain-card-header {
border-bottom: 1px solid @dark-blue;
&:hover {
background: @dark-blue-10;
}
.domain-label {
.title {
color: @dark-blue;
}
.tags .tag {
background: @dark-15;
border: 1px solid @dark;
color: @dark;
}
}
.fa-chevron-down {
color: @dark-blue;
}
}
.description {
color: @dark;
}
}
}
.daggerheart.chat {
&.domain-card {
display: flex;
@ -41,7 +73,7 @@
border-bottom: 1px solid @golden;
&:hover {
background: light-dark(@dark-blue-10, @golden-10);
background: @golden-10;
cursor: pointer;
transition: all 0.3s ease;
}
@ -73,9 +105,9 @@
padding: 3px 5px;
font-size: 12px;
background: light-dark(@dark-15, @beige-15);
border: 1px solid light-dark(@dark, @beige);
color: light-dark(@dark, @beige);
background: @beige-15;
border: 1px solid @beige;
color: @beige;
border-radius: 3px;
}
}

31
styles/less/ui/chat/action.less
View file

@ -2,6 +2,35 @@
@import '../../utils/fonts.less';
@import '../../utils/spacing.less';
.theme-light {
.daggerheart.chat.action {
.action-move .action-section {
border-bottom: 1px solid @dark-blue;
&:hover {
background: @dark-blue-10;
}
.action-header {
.title {
color: @dark-blue;
}
.label {
color: @dark;
}
}
.fa-chevron-down {
color: @dark-blue;
}
}
.description {
color: @dark;
}
}
}
.daggerheart.chat {
&.action {
display: flex;
@ -34,7 +63,7 @@
border-bottom: 1px solid @golden;
&:hover {
background: light-dark(@dark-blue-10, @golden-10);
background: @golden-10;
cursor: pointer;
transition: all 0.3s ease;
}

50
styles/less/ui/chat/chat.less
View file

@ -2,6 +2,49 @@
@import '../../utils/fonts.less';
@import '../../utils/spacing.less';
.theme-light {
.daggerheart,
#chat-notifications {
--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;
}
&: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;
}
.dice-tooltip .wrapper .roll-die {
color: @beige;
}
}
}
}
.chat-message .roll-formula {
background: @dark-15;
color: @dark;
}
}
}
.daggerheart.chat {
&.resource-roll {
.reroll-message {
@ -27,8 +70,8 @@
.daggerheart,
#chat-notifications {
.chat-message {
--text-color: light-dark(@dark-blue, @golden);
--bg-color: light-dark(@dark-blue-40, @golden-40);
--text-color: @golden;
--bg-color: @golden-40;
[data-use-perm='false'] {
pointer-events: none;
@ -85,7 +128,7 @@
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
color: light-dark(@dark, @beige);
color: @beige;
margin: 10px 0;
span {
@ -427,6 +470,7 @@
gap: 5px;
margin-top: 8px;
button {
height: 32px;
flex: 1;
}
}

29
styles/less/ui/chat/downtime.less
View file

@ -2,6 +2,35 @@
@import '../../utils/fonts.less';
@import '../../utils/spacing.less';
.theme-light {
.daggerheart.chat.downtime {
.downtime-moves-list .downtime-move {
&:hover {
background: @dark-blue-10;
}
.downtime-label {
border-bottom: 1px solid @dark-blue;
.header-label .title {
color: @dark-blue;
}
.header-label .label {
color: @dark;
}
}
.fa-chevron-down {
color: @dark-blue;
}
}
.description {
color: @dark;
}
}
}
.daggerheart.chat {
&.downtime {
display: flex;

90
styles/less/ui/chat/sheet.less
View file

@ -1,6 +1,66 @@
@import '../../utils/colors.less';
@import '../../utils/fonts.less';
.theme-light {
.chat-message .message-content {
color: @dark;
blockquote {
border-left: 5px solid @dark-blue-40;
}
a[href] {
color: @dark-blue;
}
a[href]:hover,
a[href].active {
font-weight: bold;
text-shadow: 0 0 8px @dark-blue;
}
button {
background: transparent;
border: 1px solid @dark-blue;
color: @dark-blue;
&:hover {
background: @light-black;
color: @dark-blue;
}
&:disabled {
background: transparent;
color: @dark-blue;
&:hover {
background: transparent;
color: @dark-blue;
}
}
&.reverted {
background: @dark-blue-10;
color: @dark-blue;
border: 1px solid @dark;
&:hover {
background: transparent;
color: @dark-blue;
}
img {
border-radius: 3px;
}
}
}
.roll-buttons button {
height: 40px;
font-family: @font-body;
font-weight: bold;
}
}
}
.chat-message.dh-chat-message {
.message-content {
padding: 0;
@ -17,7 +77,7 @@
.message-content {
padding: 0 8px;
font-family: @font-body;
color: light-dark(@dark, @beige);
color: @beige;
blockquote {
border-left: 5px solid light-dark(@dark-blue-40, @golden-40);
@ -34,15 +94,15 @@
}
button {
background: light-dark(transparent, @golden);
border: 1px solid light-dark(@dark-blue, @dark-blue);
color: light-dark(@dark-blue, @dark-blue);
background: @golden;
border: 1px solid @dark-blue;
color: @dark-blue;
outline: none;
box-shadow: none;
&:hover {
background: light-dark(@light-black, @dark-blue);
color: light-dark(@dark-blue, @golden);
background: @dark-blue;
color: @golden;
}
&.glow {
@ -50,24 +110,24 @@
}
&:disabled {
background: light-dark(transparent, @golden);
color: light-dark(@dark-blue, @dark-blue);
background: @golden;
color: @dark-blue;
opacity: 0.6;
cursor: not-allowed;
&:hover {
background: light-dark(transparent, @golden);
color: light-dark(@dark-blue, @dark-blue);
background: @golden;
color: @dark-blue;
}
}
&.reverted {
background: light-dark(@dark-blue-10, @golden-10);
color: light-dark(@dark-blue, @golden);
border: 1px solid light-dark(@dark, transparent);
background: @golden-10;
color: @golden;
border: 1px solid transparent;
&:hover {
background: light-dark(transparent, @golden);
color: light-dark(@dark-blue, @dark-blue);
background: @golden;
color: @dark-blue;
}
img {
border-radius: 3px;