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

style beatform tooltip, fix unnarmed attack location, add outline border when users use midle click

Browse source
This commit is contained in:
Murilo Brito 2025-12-23 01:27:15 -03:00
parent f28ba761dc
commit 81fe4af36c
4 changed files with 118 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -19,6 +19,10 @@ aside[role='tooltip']:has(div.daggerheart.dh-style.tooltip.card-style) {
margin-bottom: 5px;
}
.tooltip-subtitle {
margin: 0;
}
.tooltip-image {
width: 100%;
height: 160px;
@ -32,7 +36,7 @@ aside[role='tooltip']:has(div.daggerheart.dh-style.tooltip.card-style) {
width: 100%;
padding: 5px 10px;
position: relative;
margin-top: 5px;
&::before {
content: '';
@ -43,8 +47,55 @@ aside[role='tooltip']:has(div.daggerheart.dh-style.tooltip.card-style) {
}
&::before {
position: absolute;
top: -5px;
position: absolute;
top: -5px;
}
}
.tooltip-tags {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
padding: 5px 10px;
position: relative;
padding-top: 10px;
max-height: 150px;
overflow-y: auto;
position: relative;
scrollbar-width: thin;
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
&::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: 0px;
}
.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;
}
}
}
}
@ -55,6 +106,33 @@ aside[role='tooltip']:has(div.daggerheart.dh-style.tooltip.card-style) {
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;
@ -145,6 +223,7 @@ aside[role='tooltip']:has(div.daggerheart.dh-style.tooltip.card-style) {
aside[role='tooltip'].locked-tooltip:has(div.daggerheart.dh-style.tooltip.card-style) {
box-shadow: 0 0 25px @golden-90;
outline: 1px solid light-dark(@dark-blue, @golden);
}
.theme-light #tooltip:has(div.daggerheart.dh-style.tooltip.card-style),
@ -154,6 +233,8 @@ aside[role='tooltip'].locked-tooltip:has(div.daggerheart.dh-style.tooltip.card-s
.theme-light aside[role='tooltip'].locked-tooltip:has(div.daggerheart.dh-style.tooltip) {
box-shadow: 0 0 25px @dark-blue-90;
outline: 1px solid light-dark(@dark-blue, @golden);
}
#tooltip,
@ -207,11 +288,6 @@ aside[role='tooltip'].locked-tooltip:has(div.daggerheart.dh-style.tooltip.card-s
font-style: italic;
}
.tooltip-sub-title {
margin: 0;
color: light-dark(@dark-blue, @beige);
}
.tooltip-information-section {
width: 100%;
display: grid;
@ -263,46 +339,6 @@ aside[role='tooltip'].locked-tooltip:has(div.daggerheart.dh-style.tooltip.card-s
}
}
.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;
}