cosmo/daggerheart
1
0
Fork 0
mirror of https://github.com/Foundryborne/daggerheart.git synced 2026-07-21 18:09:54 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Minor tweaks to tooltip card styling (#2069)
Some checks are pending
Project CI / build (24.x) (push) Waiting to run
Details

Browse source
This commit is contained in:
Carlos Fernandez 2026-07-08 10:46:28 -04:00 • committed by GitHub
parent b03772b633
commit 6cd19ada8a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 129 additions and 129 deletions
Download patch file Download diff file Expand all files Collapse all files

128
styles/less/ux/tooltip/index.less
View file

@ -1,4 +1,130 @@
@import './sheet.less'; #tooltip:has(div.daggerheart.dh-style.tooltip.card-style),
aside[role='tooltip']:has(div.daggerheart.dh-style.tooltip),
#tooltip.bordered-tooltip {
.tooltip-title {
font-size: var(--font-size-20);
color: @color-text-emphatic;
font-weight: 700;
}
.tooltip-description {
font-style: inherit;
text-align: inherit;
width: 100%;
padding: 5px 10px;
position: relative;
margin-top: 5px;
&::before {
content: '';
background: @golden;
mask-image: linear-gradient(270deg, transparent 0%, black 50%, transparent 100%);
height: 2px;
width: calc(100% - 10px);
}
&::before {
position: absolute;
top: -5px;
}
}
.tooltip-separator {
background: @golden;
mask-image: linear-gradient(270deg, transparent 0%, black 50%, transparent 100%);
height: 2px;
width: calc(100% - 10px);
margin-bottom: 2px;
}
.tooltip-tags {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
padding: 5px 10px;
position: relative;
max-height: 150px;
overflow-y: auto;
position: relative;
.tooltip-tag {
display: flex;
gap: 10px;
flex-direction: column;
.tooltip-tag-label-container {
display: flex;
align-items: center;
gap: 5px;
img {
width: 40px;
height: 40px;
border-radius: 3px;
}
}
}
}
.tags {
display: flex;
gap: 5px 10px;
padding-bottom: 4px;
flex-wrap: wrap;
justify-content: center;
&.advantages {
width: 100%;
padding: 5px 10px;
padding-bottom: 16px;
position: relative;
margin-top: 5px;
&::before {
content: '';
background: @golden;
mask-image: linear-gradient(270deg, transparent 0%, black 50%, transparent 100%);
height: 2px;
width: calc(100% - 10px);
}
&::before {
position: absolute;
top: -5px;
}
.tag {
background: @green-10;
color: @green;
border-color: @green;
}
}
.tag {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 3px 5px;
font-size: var(--font-size-12);
font: @font-body;
background: light-dark(@dark-15, @beige-15);
border: 1px solid light-dark(@dark, @beige);
border-radius: 3px;
}
.label {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
font-size: var(--font-size-12);
}
}
}
@import './armorManagement.less'; @import './armorManagement.less';
@import './battlepoints.less'; @import './battlepoints.less';
@import './bordered-tooltip.less'; @import './bordered-tooltip.less';

126
styles/less/ux/tooltip/sheet.less
View file

@ -1,126 +0,0 @@
#tooltip:has(div.daggerheart.dh-style.tooltip.card-style),
aside[role='tooltip']:has(div.daggerheart.dh-style.tooltip),
#tooltip.bordered-tooltip {
.tooltip-title {
font-size: var(--font-size-20);
color: @color-text-emphatic;
font-weight: 700;
}
.tooltip-description {
font-style: inherit;
text-align: inherit;
width: 100%;
padding: 5px 10px;
position: relative;
margin-top: 5px;
&::before {
content: '';
background: @golden;
mask-image: linear-gradient(270deg, transparent 0%, black 50%, transparent 100%);
height: 2px;
width: calc(100% - 10px);
}
&::before {
position: absolute;
top: -5px;
}
}
.tooltip-separator {
background: @golden;
mask-image: linear-gradient(270deg, transparent 0%, black 50%, transparent 100%);
height: 2px;
width: calc(100% - 10px);
margin-bottom: 2px;
}
.tooltip-tags {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
padding: 5px 10px;
position: relative;
max-height: 150px;
overflow-y: auto;
position: relative;
.tooltip-tag {
display: flex;
gap: 10px;
flex-direction: column;
.tooltip-tag-label-container {
display: flex;
align-items: center;
gap: 5px;
img {
width: 40px;
height: 40px;
border-radius: 3px;
}
}
}
}
.tags {
display: flex;
gap: 5px 10px;
padding-bottom: 16px;
flex-wrap: wrap;
justify-content: center;
&.advantages {
width: 100%;
padding: 5px 10px;
padding-bottom: 16px;
position: relative;
margin-top: 5px;
&::before {
content: '';
background: @golden;
mask-image: linear-gradient(270deg, transparent 0%, black 50%, transparent 100%);
height: 2px;
width: calc(100% - 10px);
}
&::before {
position: absolute;
top: -5px;
}
.tag {
background: @green-10;
color: @green;
border-color: @green;
}
}
.tag {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 3px 5px;
font-size: var(--font-size-12);
font: @font-body;
background: light-dark(@dark-15, @beige-15);
border: 1px solid light-dark(@dark, @beige);
border-radius: 3px;
}
.label {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
font-size: var(--font-size-12);
}
}
}

2
styles/less/ux/tooltip/tooltip.less
View file

@ -4,6 +4,7 @@
#tooltip:has(div.daggerheart.dh-style.tooltip.card-style), #tooltip:has(div.daggerheart.dh-style.tooltip.card-style),
aside[role='tooltip']:has(div.daggerheart.dh-style.tooltip.card-style) { aside[role='tooltip']:has(div.daggerheart.dh-style.tooltip.card-style) {
padding: 0; padding: 0;
padding-bottom: 8px;
border: none; border: none;
border-radius: 10px; border-radius: 10px;
height: max-content; height: max-content;
@ -134,7 +135,6 @@ aside[role='tooltip']:has(div.daggerheart.dh-style.tooltip.card-style) {
background: light-dark(@dark-blue-60, @rustic-brown-80); background: light-dark(@dark-blue-60, @rustic-brown-80);
color: @color-text-emphatic; color: @color-text-emphatic;
font-size: 12px; font-size: 12px;
margin-bottom: 10px;
} }
} }

2
templates/ui/tooltip/domainCard.hbs
View file

@ -23,7 +23,7 @@
</div> </div>
</div> </div>
{{#if description}} {{#if description}}
<div class="tooltip-description">{{{description}}}</div> <div class="tooltip-description">{{{description}}}</div>
{{/if}} {{/if}}
<p class="tooltip-hint"> <p class="tooltip-hint">