diff --git a/styles/less/global/chat.less b/styles/less/global/chat.less index 37ec993d..bf29a05c 100644 --- a/styles/less/global/chat.less +++ b/styles/less/global/chat.less @@ -7,6 +7,15 @@ #chat-notifications .chat-log { .chat-message { background-image: url('../assets/parchments/dh-parchment-light.png'); + + .message-header .message-header-metadata .message-metadata, + .message-header .message-header-main .message-sub-header-container { + color: @dark; + } + + .message-header .message-header-main .message-sub-header-container h4 { + color: @dark-blue; + } } } } @@ -36,7 +45,7 @@ .message-metadata { font-family: @font-body; - color: light-dark(@dark, @beige); + color: @beige; } } @@ -59,14 +68,14 @@ display: flex; flex-direction: column; justify-content: space-between; - color: light-dark(@dark, @beige); + color: @beige; h4 { font-size: 16px; font-weight: bold; margin-bottom: 0; font-family: @font-subtitle; - color: light-dark(@dark-blue, @golden); + color: @golden; } } } diff --git a/styles/less/global/inventory-item.less b/styles/less/global/inventory-item.less index 6c58d31a..d63c658e 100644 --- a/styles/less/global/inventory-item.less +++ b/styles/less/global/inventory-item.less @@ -135,7 +135,7 @@ .label { gap: 4px; - color: @beige-80; + color: light-dark(@dark-80, @beige-80); } } } diff --git a/styles/less/ui/chat/ability-use.less b/styles/less/ui/chat/ability-use.less index 7993d29d..58897697 100644 --- a/styles/less/ui/chat/ability-use.less +++ b/styles/less/ui/chat/ability-use.less @@ -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; } } diff --git a/styles/less/ui/chat/action.less b/styles/less/ui/chat/action.less index 0200c9dc..82cc3210 100644 --- a/styles/less/ui/chat/action.less +++ b/styles/less/ui/chat/action.less @@ -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; } diff --git a/styles/less/ui/chat/chat.less b/styles/less/ui/chat/chat.less index 81af3d23..c6ed95ca 100644 --- a/styles/less/ui/chat/chat.less +++ b/styles/less/ui/chat/chat.less @@ -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; } } diff --git a/styles/less/ui/chat/downtime.less b/styles/less/ui/chat/downtime.less index 7c28c835..8b898c43 100644 --- a/styles/less/ui/chat/downtime.less +++ b/styles/less/ui/chat/downtime.less @@ -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; diff --git a/styles/less/ui/chat/sheet.less b/styles/less/ui/chat/sheet.less index da66c12f..59fa39dc 100644 --- a/styles/less/ui/chat/sheet.less +++ b/styles/less/ui/chat/sheet.less @@ -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; diff --git a/styles/less/utils/colors.less b/styles/less/utils/colors.less index dcc7cc5b..9ce201a3 100755 --- a/styles/less/utils/colors.less +++ b/styles/less/utils/colors.less @@ -53,6 +53,7 @@ @dark: #222; @dark-15: #22222215; @dark-40: #22222240; +@dark-80: #22222280; @dark-filter: brightness(0) saturate(100%); @deep-black: #0e0d15;