cosmo/daggerheart
1
0
Fork 0
mirror of https://github.com/Foundryborne/daggerheart.git synced 2026-01-12 03:31:07 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

199 - Tooltips (#311)

Browse source 
* Set up templates for all 'advanced' tooltips

* Fixed ItemFeature Header label

* Fixed less import
This commit is contained in:
WBHarry 2025-07-11 22:26:56 +02:00 • committed by GitHub
parent 72436478c1
commit b6195127fe
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
23 changed files with 505 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

2
styles/daggerheart.less
View file

@ -12,4 +12,6 @@
@import './less/ui/index.less';
@import './less/ux/index.less';
@import '../node_modules/@yaireo/tagify/dist/tagify.css';

1
styles/less/ux/index.less Normal file
View file

@ -0,0 +1 @@
@import './tooltip/tooltip.less';

106
styles/less/ux/tooltip/tooltip.less Normal file
View file

@ -0,0 +1,106 @@
.daggerheart.dh-style.tooltip {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
.tooltip-title {
margin: 0;
text-align: center;
}
.tooltip-image {
height: 180px;
width: 180px;
}
.tooltip-description {
font-style: italic;
}
.tooltip-sub-title {
margin: 0;
color: light-dark(@dark-blue, @beige);
}
.tooltip-information-section {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
&.triple {
grid-template-columns: 1fr 1fr 1fr;
}
&.border {
border: 1px solid light-dark(@dark-blue, @golden);
border-radius: 6px;
padding: 2px;
}
.tooltip-information {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
&.full-width {
grid-column: span 2;
}
label {
font-weight: bold;
}
label,
div {
white-space: nowrap;
}
}
}
.tooltip-tags {
width: 100%;
display: flex;
flex-direction: column;
gap: 4px;
.tooltip-tag {
width: 100%;
display: grid;
grid-template-columns: 80px 1fr;
align-items: start;
gap: 8px;
padding: 4px;
border: 1px solid light-dark(@dark-blue, @golden);
border-radius: 6px;
.tooltip-tag-label-container {
display: flex;
align-items: center;
flex-direction: column;
gap: 2px;
.tooltip-tag-image {
width: 40px;
height: 40px;
}
}
.tooltip-tag-label {
font-weight: bold;
text-align: center;
}
.tooltip-tag-description {
display: flex;
flex-wrap: wrap;
}
}
}
.spaced {
margin-bottom: 4px;
}
}