mirror of
https://github.com/Foundryborne/daggerheart.git
synced 2026-01-11 19:25:21 +01:00
feat: add basic tooltip style and style domain card template
This commit is contained in:
molilo
parent
f4dd9dc5c1
commit
7184fd9e30
5 changed files with 203 additions and 22 deletions
|
|
@ -2787,7 +2787,9 @@
|
|||
"companionPartnerLevelBlock": "The companion needs an assigned partner to level up.",
|
||||
"configureAttribution": "Configure Attribution",
|
||||
"deleteItem": "Delete Item",
|
||||
"immune": "Immune"
|
||||
"immune": "Immune",
|
||||
"middleClick": "[Middle Click] Keep tooltip view"
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
@import './tooltip/tooltip.less';
|
||||
@import './tooltip/battlepoints.less';
|
||||
@import './tooltip/bordered-tooltip.less';
|
||||
@import './tooltip/domain-cards.less';
|
||||
|
||||
@import './autocomplete/autocomplete.less';
|
||||
|
|
|
|||
18
styles/less/ux/tooltip/domain-cards.less
Normal file
18
styles/less/ux/tooltip/domain-cards.less
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
@import '../../utils/colors.less';
|
||||
@import '../../utils/fonts.less';
|
||||
|
||||
.theme-light .daggerheart.dh-style.tooltip {
|
||||
&.domain-card {
|
||||
.item-icons-list .item-icon img {
|
||||
filter: @bright-beige-filter;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.daggerheart.dh-style.tooltip {
|
||||
&.domain-card {
|
||||
.item-icons-list .item-icon img {
|
||||
filter: @golden-filter !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,159 @@
|
|||
@import '../../utils/colors.less';
|
||||
@import '../../utils/fonts.less';
|
||||
|
||||
#tooltip:has(div.daggerheart.dh-style.tooltip),
|
||||
aside[role='tooltip']:has(div.daggerheart.dh-style.tooltip) {
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
height: max-content;
|
||||
max-height: 650px;
|
||||
width: 260px;
|
||||
background-image: url('../assets/parchments/dh-parchment-dark.png');
|
||||
position: relative;
|
||||
|
||||
.tooltip-title {
|
||||
font-size: var(--font-size-20);
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
font-weight: 700;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.tooltip-image {
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
object-fit: cover;
|
||||
mask-image: linear-gradient(180deg, black 88%, transparent 100%);
|
||||
}
|
||||
|
||||
.tooltip-description {
|
||||
font-style: inherit;
|
||||
text-align: inherit;
|
||||
width: 100%;
|
||||
padding: 5px 10px;
|
||||
position: relative;
|
||||
|
||||
|
||||
&::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;
|
||||
}
|
||||
}
|
||||
|
||||
.tags {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding-bottom: 16px;
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
|
||||
.item-icons-list {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
align-items: end;
|
||||
justify-content: center;
|
||||
top: 25px;
|
||||
right: 10px;
|
||||
z-index: 1;
|
||||
|
||||
.item-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
text-align: center;
|
||||
padding-right: 8px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
font-size: 1.2rem;
|
||||
background: light-dark(@dark-blue-60, @dark-golden-80);
|
||||
backdrop-filter: blur(8px);
|
||||
border: 4px double light-dark(@beige, @golden);
|
||||
color: light-dark(@beige, @golden);
|
||||
border-radius: 999px;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
.recall-label {
|
||||
font-size: var(--font-size-14);
|
||||
opacity: 0;
|
||||
margin-right: 0.3rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
max-width: 300px;
|
||||
padding: 0 10px;
|
||||
border-radius: 60px;
|
||||
|
||||
.recall-label {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip-hint {
|
||||
border-radius: 3px;
|
||||
padding: 3px;
|
||||
background: light-dark(@dark-blue-60, @rustic-brown-80);
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
font-size: 12px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
aside[role='tooltip'].locked-tooltip:has(div.daggerheart.dh-style.tooltip) {
|
||||
box-shadow: 0 0 20px @golden-90;
|
||||
}
|
||||
|
||||
.theme-light #tooltip:has(div.daggerheart.dh-style.tooltip),
|
||||
.theme-light aside[role='tooltip']:has(div.daggerheart.dh-style.tooltip) {
|
||||
background-image: url('../assets/parchments/dh-parchment-light.png');
|
||||
}
|
||||
|
||||
.theme-light aside[role='tooltip'].locked-tooltip:has(div.daggerheart.dh-style.tooltip) {
|
||||
box-shadow: 0 0 20px @dark-blue-90;
|
||||
}
|
||||
|
||||
#tooltip,
|
||||
.locked-tooltip {
|
||||
&.wide {
|
||||
|
|
|
|||
|
|
@ -1,29 +1,32 @@
|
|||
<div class="daggerheart dh-style tooltip">
|
||||
<h2 class="tooltip-title">{{item.name}}</h2>
|
||||
<img class="tooltip-image" src="{{item.img}}" />
|
||||
<div class="tooltip-description">{{{description}}}</div>
|
||||
|
||||
<div class="tooltip-information-section">
|
||||
<div class="tooltip-information">
|
||||
<label>{{localize "DAGGERHEART.GENERAL.Domain.single"}}</label>
|
||||
<div class="daggerheart dh-style tooltip domain-card">
|
||||
<div class="item-icons-list">
|
||||
<span class="item-icon">
|
||||
<span class="recall-value">{{item.system.recallCost}}</span>
|
||||
<i class="fa-solid fa-bolt"></i>
|
||||
</span>
|
||||
<span class="item-icon">
|
||||
{{#with (lookup config.DOMAIN.domains item.system.domain) as | domain |}}
|
||||
<div>{{localize domain.label}}</div>
|
||||
<img src="{{domain.src}}" alt="">
|
||||
{{/with}}
|
||||
</div>
|
||||
|
||||
<div class="tooltip-information">
|
||||
<label>{{localize "Type"}}</label>
|
||||
</span>
|
||||
</div>
|
||||
<img class="tooltip-image" src="{{item.img}}" />
|
||||
<h2 class="tooltip-title">{{item.name}}</h2>
|
||||
<div class="tags">
|
||||
<div class="tag">
|
||||
{{#with (lookup config.DOMAIN.cardTypes item.system.type) as | type |}}
|
||||
<div>{{localize type.label}}</div>
|
||||
<span>{{localize type.label}}</span>
|
||||
{{/with}}
|
||||
</div>
|
||||
<div class="tooltip-information">
|
||||
<label>{{localize "DAGGERHEART.GENERAL.level"}}</label>
|
||||
<div>{{item.system.level}}</div>
|
||||
</div>
|
||||
<div class="tooltip-information">
|
||||
<label>{{localize "DAGGERHEART.ITEMS.DomainCard.recallCost"}}</label>
|
||||
<div>{{item.system.recallCost}}</div>
|
||||
<div class="tag">
|
||||
<span>{{localize 'DAGGERHEART.GENERAL.levelShort'}} {{ item.system.level }}</span>
|
||||
</div>
|
||||
</div>
|
||||
{{#if description}}
|
||||
<div class="tooltip-description">{{{description}}}</div>
|
||||
{{/if}}
|
||||
|
||||
<p class="tooltip-hint">
|
||||
<i class="fa-solid fa-computer-mouse"></i> {{localize "DAGGERHEART.UI.Tooltip.middleClick"}}
|
||||
</p>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue