Tighten appearance of ability use chat messages (#1821)

This commit is contained in:
Carlos Fernandez 2026-04-21 17:44:03 -04:00 committed by GitHub
parent 3eda3c4c05
commit 7a4f9d7bc8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 32 additions and 26 deletions

View file

@ -6,12 +6,6 @@
#interface.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;
@ -29,6 +23,13 @@
}
}
&:has(.description) .domain-card-move .domain-card-header {
border-bottom: 1px solid @dark-blue;
&:hover {
background: @dark-blue-10;
}
}
.description {
color: @dark;
}
@ -43,7 +44,7 @@
.card-img {
width: 100%;
height: 200px;
height: 180px;
mask-image: linear-gradient(0deg, transparent 0%, black 10%, black 90%, transparent 100%);
object-fit: cover;
}
@ -68,23 +69,12 @@
flex-direction: row;
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;
}
.domain-label {
display: flex;
flex-direction: column;
width: 100%;
padding-bottom: 5px;
width: -webkit-fill-available;
gap: 5px;
.title {
@ -95,7 +85,7 @@
.tags {
display: flex;
gap: 10px;
gap: 4px;
flex-wrap: wrap;
.tag {
@ -116,6 +106,16 @@
}
}
&:has(.description) .domain-card-move .domain-card-header {
border-bottom: 1px solid @golden;
padding-bottom: 5px;
&:hover {
background: @golden-10;
cursor: pointer;
transition: all 0.3s ease;
}
}
.description {
padding: 8px;
}

View file

@ -4,15 +4,21 @@
<summary class="domain-card-header">
<div class="domain-label">
<h2 class="title">{{item.name}}</h2>
<ul class="tags">
{{#each item.tags as |tag|}}
<li class="tag"><span>{{tag}}</span></li>
{{/each}}
</ul>
{{#if item.tags}}
<ul class="tags">
{{#each item.tags as |tag|}}
<li class="tag"><span>{{tag}}</span></li>
{{/each}}
</ul>
{{/if}}
</div>
<i class="fa-solid fa-chevron-down"></i>
{{#if description}}
<i class="fa-solid fa-chevron-down"></i>
{{/if}}
</summary>
<div class="description">{{{description}}}</div>
{{#if description}}
<div class="description">{{{description}}}</div>
{{/if}}
</details>
<footer class="ability-card-footer">
{{#each actions as |action|}}