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 { #interface.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;
&:hover {
background: @dark-blue-10;
}
.domain-label { .domain-label {
.title { .title {
color: @dark-blue; 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 { .description {
color: @dark; color: @dark;
} }
@ -43,7 +44,7 @@
.card-img { .card-img {
width: 100%; width: 100%;
height: 200px; height: 180px;
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;
} }
@ -68,23 +69,12 @@
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
margin: 8px; margin: 8px;
padding-bottom: 5px;
width: -webkit-fill-available;
gap: 5px; gap: 5px;
border-bottom: 1px solid @golden;
&:hover {
background: @golden-10;
cursor: pointer;
transition: all 0.3s ease;
}
.domain-label { .domain-label {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
padding-bottom: 5px;
width: -webkit-fill-available;
gap: 5px; gap: 5px;
.title { .title {
@ -95,7 +85,7 @@
.tags { .tags {
display: flex; display: flex;
gap: 10px; gap: 4px;
flex-wrap: wrap; flex-wrap: wrap;
.tag { .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 { .description {
padding: 8px; padding: 8px;
} }

View file

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