cosmo/daggerheart
1
0
Fork 0
mirror of https://github.com/Foundryborne/daggerheart.git synced 2026-01-17 23:49:02 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

add colapsable descriptions in chat messages

Browse source
This commit is contained in:
moliloo 2025-07-29 00:56:42 -03:00
parent 74ccd79390
commit 74f7f1f158
8 changed files with 163 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

85
styles/less/ui/chat/ability-use.less
View file

@ -15,40 +15,71 @@
object-fit: cover;
}
.domain-card-header {
display: flex;
flex-direction: column;
width: 100%;
margin: 8px 8px 0;
padding-bottom: 5px;
width: -webkit-fill-available;
gap: 5px;
border-bottom: 1px solid @golden;
details[open] {
.fa-chevron-down {
transform: rotate(180deg);
transition: all 0.3s ease;
}
}
.title {
font-size: 20px;
color: @golden;
font-family: @font-subtitle;
margin: 0;
.domain-card-move {
width: 100%;
.fa-chevron-down {
transition: all 0.3s ease;
margin-left: auto;
}
.tags {
.domain-card-header {
display: flex;
gap: 10px;
flex-direction: row;
align-items: center;
margin: 8px;
padding-bottom: 5px;
width: -webkit-fill-available;
gap: 5px;
border-bottom: 1px solid @golden;
.tag {
&:hover {
background: light-dark(@dark-blue-10, @golden-10);
cursor: pointer;
transition: all 0.3s ease;
}
.domain-label {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 3px 5px;
font-size: 12px;
font-family: @font-body;
flex-direction: column;
width: 100%;
padding-bottom: 5px;
width: -webkit-fill-available;
gap: 5px;
background: light-dark(@dark-15, @beige-15);
border: 1px solid light-dark(@dark, @beige);
color: light-dark(@dark, @beige);
border-radius: 3px;
.title {
font-size: 20px;
color: @golden;
font-family: @font-subtitle;
margin: 0;
}
.tags {
display: flex;
gap: 10px;
.tag {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 3px 5px;
font-size: 12px;
font-family: @font-body;
background: light-dark(@dark-15, @beige-15);
border: 1px solid light-dark(@dark, @beige);
color: light-dark(@dark, @beige);
border-radius: 3px;
}
}
}
}
}

74
styles/less/ui/chat/action.less
View file

@ -8,40 +8,62 @@
flex-direction: column;
align-items: center;
.action-section {
display: flex;
flex-direction: row;
width: 100%;
margin: 8px 8px 0;
padding-bottom: 5px;
width: -webkit-fill-available;
gap: 5px;
border-bottom: 1px solid @golden;
details[open] {
.fa-chevron-down {
transform: rotate(180deg);
transition: all 0.3s ease;
}
}
.action-img {
width: 40px;
height: 40px;
border-radius: 3px;
object-fit: cover;
.action-move {
width: 100%;
.fa-chevron-down {
transition: all 0.3s ease;
margin-left: auto;
}
.action-header {
.action-section {
display: flex;
flex-direction: column;
flex-direction: row;
align-items: center;
margin: 8px 8px 0;
padding-bottom: 5px;
width: -webkit-fill-available;
gap: 5px;
border-bottom: 1px solid @golden;
.title {
font-size: 20px;
color: @golden;
font-family: @font-subtitle;
margin: 0;
&:hover {
background: light-dark(@dark-blue-10, @golden-10);
cursor: pointer;
transition: all 0.3s ease;
}
.label {
font-size: 12px;
color: @beige;
font-family: @font-body;
margin: 0;
.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;
}
}
}
}

19
styles/less/ui/chat/downtime.less
View file

@ -8,10 +8,23 @@
flex-direction: column;
align-items: center;
details[open] {
.fa-chevron-down {
transform: rotate(180deg);
transition: all 0.3s ease;
}
}
.downtime-moves-list {
display: flex;
flex-direction: column;
gap: 5px;
width: 100%;
.fa-chevron-down {
transition: all 0.3s ease;
margin-left: auto;
}
.downtime-move {
width: 100%;
@ -25,6 +38,12 @@
padding-bottom: 5px;
width: -webkit-fill-available;
&:hover {
background: light-dark(@dark-blue-10, @golden-10);
cursor: pointer;
transition: all 0.3s ease;
}
.downtime-image {
width: 40px;
height: 40px;