fix light theme issues

This commit is contained in:
moliloo 2025-08-23 20:22:34 -03:00
parent 1ee7a1f742
commit 2344278a3d
3 changed files with 266 additions and 259 deletions

View file

@ -2,7 +2,7 @@
@import '../../utils/fonts.less'; @import '../../utils/fonts.less';
@import '../../utils/spacing.less'; @import '../../utils/spacing.less';
.theme-light { body.theme-light {
.daggerheart.chat.domain-card { .daggerheart.chat.domain-card {
.domain-card-move .domain-card-header { .domain-card-move .domain-card-header {
border-bottom: 1px solid @dark-blue; border-bottom: 1px solid @dark-blue;
@ -34,110 +34,112 @@
} }
} }
.daggerheart.chat { body.theme-dark {
&.domain-card { .daggerheart.chat {
display: flex; &.domain-card {
flex-direction: column; display: flex;
align-items: center; flex-direction: column;
align-items: center;
.card-img { .card-img {
width: 100%; width: 100%;
height: 200px; height: 200px;
mask-image: linear-gradient(0deg, transparent 0%, black 10%, black 90%, transparent 100%); mask-image: linear-gradient(0deg, transparent 0%, black 10%, black 90%, transparent 100%);
object-fit: cover; object-fit: cover;
}
details[open] {
.fa-chevron-down {
transform: rotate(180deg);
transition: all 0.3s ease;
}
}
.domain-card-move {
width: 100%;
.fa-chevron-down {
transition: all 0.3s ease;
margin-left: auto;
} }
.domain-card-header { details[open] {
display: flex; .fa-chevron-down {
flex-direction: row; transform: rotate(180deg);
align-items: center;
margin: 8px;
padding-bottom: 5px;
width: -webkit-fill-available;
gap: 5px;
border-bottom: 1px solid @golden;
&:hover {
background: @golden-10;
cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
}
.domain-label { .domain-card-move {
width: 100%;
.fa-chevron-down {
transition: all 0.3s ease;
margin-left: auto;
}
.domain-card-header {
display: flex; display: flex;
flex-direction: column; flex-direction: row;
width: 100%; align-items: center;
margin: 8px;
padding-bottom: 5px; padding-bottom: 5px;
width: -webkit-fill-available; width: -webkit-fill-available;
gap: 5px; gap: 5px;
border-bottom: 1px solid @golden;
.title { &:hover {
font-size: 20px; background: @golden-10;
color: @golden; cursor: pointer;
font-weight: 700; transition: all 0.3s ease;
} }
.tags { .domain-label {
display: flex; display: flex;
gap: 10px; flex-direction: column;
flex-wrap: wrap; width: 100%;
padding-bottom: 5px;
width: -webkit-fill-available;
gap: 5px;
.tag { .title {
font-size: 20px;
color: @golden;
font-weight: 700;
}
.tags {
display: flex; display: flex;
flex-direction: row; gap: 10px;
justify-content: center; flex-wrap: wrap;
align-items: center;
padding: 3px 5px;
font-size: 12px;
background: @beige-15; .tag {
border: 1px solid @beige; display: flex;
color: @beige; flex-direction: row;
border-radius: 3px; justify-content: center;
align-items: center;
padding: 3px 5px;
font-size: 12px;
background: @beige-15;
border: 1px solid @beige;
color: @beige;
border-radius: 3px;
}
} }
} }
} }
} }
}
.description { .description {
padding: 8px; padding: 8px;
}
.ability-card-footer {
display: flex;
flex-wrap: wrap;
gap: 5px;
width: 100%;
padding: 0 8px;
button {
height: 40px;
flex: 1 1 calc(50% - 5px);
&:nth-last-child(1):nth-child(odd) {
flex-basis: 100%;
}
} }
.ability-card-action-cost { .ability-card-footer {
margin: auto; display: flex;
font-size: 1.5em; flex-wrap: wrap;
gap: 5px;
width: 100%;
padding: 0 8px;
button {
height: 40px;
flex: 1 1 calc(50% - 5px);
&:nth-last-child(1):nth-child(odd) {
flex-basis: 100%;
}
}
.ability-card-action-cost {
margin: auto;
font-size: 1.5em;
}
} }
} }
} }

View file

@ -2,7 +2,7 @@
@import '../../utils/fonts.less'; @import '../../utils/fonts.less';
@import '../../utils/spacing.less'; @import '../../utils/spacing.less';
.theme-light { body.theme-light {
.daggerheart.chat.action { .daggerheart.chat.action {
.action-move .action-section { .action-move .action-section {
border-bottom: 1px solid @dark-blue; border-bottom: 1px solid @dark-blue;
@ -31,93 +31,96 @@
} }
} }
.daggerheart.chat { body.theme-dark {
&.action { .daggerheart.chat {
display: flex; &.action {
flex-direction: column; display: flex;
align-items: center; flex-direction: column;
align-items: center;
details[open] { details[open] {
.fa-chevron-down { .fa-chevron-down {
transform: rotate(180deg); transform: rotate(180deg);
transition: all 0.3s ease;
}
}
.action-move {
width: 100%;
.fa-chevron-down {
transition: all 0.3s ease;
margin-left: auto;
}
.action-section {
display: flex;
flex-direction: row;
align-items: center;
margin: 8px 8px 0;
padding-bottom: 5px;
width: -webkit-fill-available;
gap: 5px;
border-bottom: 1px solid @golden;
&:hover {
background: @golden-10;
cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
}
.action-img { .action-move {
width: 40px; width: 100%;
height: 40px;
border-radius: 3px; .fa-chevron-down {
object-fit: cover; transition: all 0.3s ease;
margin-left: auto;
} }
.action-header { .action-section {
display: flex; display: flex;
flex-direction: column; flex-direction: row;
align-items: center;
margin: 8px 8px 0;
padding-bottom: 5px;
width: -webkit-fill-available;
gap: 5px; gap: 5px;
border-bottom: 1px solid @golden;
.title { &:hover {
font-size: 20px; background: @golden-10;
color: @golden; cursor: pointer;
font-weight: 700; transition: all 0.3s ease;
} }
.label { .action-img {
font-size: 12px; width: 40px;
height: 40px;
border-radius: 3px;
object-fit: cover;
}
.action-header {
display: flex;
flex-direction: column;
gap: 5px;
color: @beige; color: @beige;
margin: 0;
.title {
font-size: 20px;
color: @golden;
font-weight: 700;
}
.label {
font-size: 12px;
color: @beige;
margin: 0;
}
} }
} }
} }
}
.description { .description {
padding: 8px; padding: 8px;
}
.ability-card-footer {
display: flex;
flex-wrap: wrap;
gap: 5px;
width: 100%;
padding: 0 8px;
button {
height: 40px;
flex: 1 1 calc(50% - 5px);
&:nth-last-child(1):nth-child(odd) {
flex-basis: 100%;
}
} }
.ability-card-action-cost { .ability-card-footer {
margin: auto; display: flex;
font-size: 1.5em; flex-wrap: wrap;
gap: 5px;
width: 100%;
padding: 0 8px;
button {
height: 40px;
flex: 1 1 calc(50% - 5px);
&:nth-last-child(1):nth-child(odd) {
flex-basis: 100%;
}
}
.ability-card-action-cost {
margin: auto;
font-size: 1.5em;
}
} }
} }
} }

View file

@ -1,7 +1,7 @@
@import '../../utils/colors.less'; @import '../../utils/colors.less';
@import '../../utils/fonts.less'; @import '../../utils/fonts.less';
.theme-light { body.theme-light {
.chat-message:not(.duality) .message-content { .chat-message:not(.duality) .message-content {
color: @dark; color: @dark;
@ -67,141 +67,143 @@
} }
} }
.chat-message.dh-chat-message { body.theme-dark {
.message-content { .chat-message.dh-chat-message {
padding: 0; .message-content {
} padding: 0;
} }
.chat-message {
.duality-modifiers,
.duality-result,
.dice-title {
display: none;
} }
.message-content { .chat-message {
padding: 0 8px; .duality-modifiers,
font-family: @font-body; .duality-result,
color: @beige; .dice-title {
display: none;
blockquote {
border-left: 5px solid light-dark(@dark-blue-40, @golden-40);
} }
a[href] { .message-content {
color: light-dark(@dark-blue, @golden); padding: 0 8px;
} font-family: @font-body;
color: @beige;
a[href]:hover, blockquote {
a[href].active { border-left: 5px solid light-dark(@dark-blue-40, @golden-40);
font-weight: bold;
text-shadow: 0 0 8px light-dark(@dark-blue, @golden);
}
button {
background: @golden;
border: 1px solid @dark-blue;
color: @dark-blue;
outline: none;
box-shadow: none;
&:hover {
background: @dark-blue;
color: @golden;
} }
&.glow { a[href] {
animation: glow 0.75s infinite alternate; color: light-dark(@dark-blue, @golden);
} }
&:disabled { a[href]:hover,
a[href].active {
font-weight: bold;
text-shadow: 0 0 8px light-dark(@dark-blue, @golden);
}
button {
background: @golden; background: @golden;
border: 1px solid @dark-blue;
color: @dark-blue; color: @dark-blue;
opacity: 0.6; outline: none;
cursor: not-allowed; box-shadow: none;
&:hover { &:hover {
background: @dark-blue;
color: @golden;
}
&.glow {
animation: glow 0.75s infinite alternate;
}
&:disabled {
background: @golden; background: @golden;
color: @dark-blue; color: @dark-blue;
opacity: 0.6;
cursor: not-allowed;
&:hover {
background: @golden;
color: @dark-blue;
}
}
&.reverted {
background: @golden-10;
color: @golden;
border: 1px solid transparent;
&:hover {
background: @golden;
color: @dark-blue;
}
img {
border-radius: 3px;
}
} }
} }
&.reverted { .enriched-effect {
display: flex;
align-items: center;
border: 1px solid black;
width: fit-content;
padding: 0 2px 0 0;
border-radius: 6px;
color: @dark;
background-image: url(../assets/parchments/dh-parchment-light.png);
&:hover {
text-shadow: none;
}
span {
white-space: nowrap;
}
}
.dice-roll .dice-formula,
.dice-roll .dice-total {
box-shadow: none;
border: none;
background: @golden-10; background: @golden-10;
color: @golden; color: @golden;
border: 1px solid transparent; font-weight: 600;
&:hover { align-content: center;
background: @golden; }
color: @dark-blue;
} .dice-roll .dice-formula {
img { height: 27px;
border-radius: 3px; }
}
.dice-roll .dice-total {
height: 34px;
} }
} }
}
.enriched-effect { fieldset.daggerheart.chat {
padding: 0;
border-left-width: 0;
border-right-width: 0;
border-bottom-width: 0;
legend {
display: flex; display: flex;
align-items: center; align-items: center;
border: 1px solid black; gap: 5px;
width: fit-content; &:before,
padding: 0 2px 0 0; &:after {
border-radius: 6px; content: '\f0d8';
color: @dark; font-family: 'Font Awesome 6 Pro';
background-image: url(../assets/parchments/dh-parchment-light.png);
&:hover {
text-shadow: none;
}
span {
white-space: nowrap;
} }
} }
&.expanded {
.dice-roll .dice-formula, legend:before,
.dice-roll .dice-total { legend:after {
box-shadow: none; content: '\f0d7';
border: none; }
background: @golden-10;
color: @golden;
font-weight: 600;
align-content: center;
} }
.daggerheart.chat {
.dice-roll .dice-formula { margin-top: 5px;
height: 27px;
}
.dice-roll .dice-total {
height: 34px;
} }
} }
} }
fieldset.daggerheart.chat {
padding: 0;
border-left-width: 0;
border-right-width: 0;
border-bottom-width: 0;
legend {
display: flex;
align-items: center;
gap: 5px;
&:before,
&:after {
content: '\f0d8';
font-family: 'Font Awesome 6 Pro';
}
}
&.expanded {
legend:before,
legend:after {
content: '\f0d7';
}
}
.daggerheart.chat {
margin-top: 5px;
}
}