daggerheart/styles/less/ui/chat/action.less
Murilo Brito 74df2c4e87
Feature/chat message styles (#514)
* style items and action chat messages

* enhance death move chat message and fix border bottom from title actions

* fix padding bottom

* Added basic chat-message.hbs

* .

* style remaing chat messages

* style action messages

* remove console log

* add colapsable descriptions in chat messages

* inital style for message rolls

* fix deal damage button style

* add new partchments

* Roll Chat message new design template

* j

* l

* p

* y

* fix _getTags type error and add a alias label for non base messages

* Fix damage & healing roll

* Fix conflict

* Deleting old templates

* Good for now

* fix labels in duality rolls messages and style experience and effects messages

---------

Co-authored-by: WBHarry <williambjrklund@gmail.com>
Co-authored-by: Dapoolp <elcatnet@gmail.com>
2025-08-02 09:24:51 +02:00

101 lines
2.7 KiB
Text

@import '../../utils/colors.less';
@import '../../utils/fonts.less';
@import '../../utils/spacing.less';
.daggerheart.chat {
&.action {
display: flex;
flex-direction: column;
align-items: center;
details[open] {
.fa-chevron-down {
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: light-dark(@dark-blue-10, @golden-10);
cursor: pointer;
transition: all 0.3s ease;
}
.action-img {
width: 40px;
height: 40px;
border-radius: 3px;
object-fit: cover;
}
.action-header {
display: flex;
flex-direction: column;
gap: 5px;
.title {
font-size: 20px;
color: @golden;
font-family: @font-subtitle;
margin: 0;
}
.label {
font-size: 12px;
color: @beige;
font-family: @font-body;
margin: 0;
}
}
}
}
.description {
color: @beige;
padding: 8px;
font-family: @font-body;
}
.ability-card-footer {
display: flex;
flex-wrap: wrap;
gap: 5px;
width: 100%;
padding: 0 8px;
button {
font-family: @font-body;
font-weight: 600;
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;
}
}
}
}