diff --git a/styles/less/ux/tooltip/index.less b/styles/less/ux/tooltip/index.less index eeec9354..30cb88df 100644 --- a/styles/less/ux/tooltip/index.less +++ b/styles/less/ux/tooltip/index.less @@ -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 './battlepoints.less'; @import './bordered-tooltip.less'; diff --git a/styles/less/ux/tooltip/sheet.less b/styles/less/ux/tooltip/sheet.less deleted file mode 100644 index cc4166da..00000000 --- a/styles/less/ux/tooltip/sheet.less +++ /dev/null @@ -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); - } - } -} diff --git a/styles/less/ux/tooltip/tooltip.less b/styles/less/ux/tooltip/tooltip.less index f02499e2..26ecb5c3 100644 --- a/styles/less/ux/tooltip/tooltip.less +++ b/styles/less/ux/tooltip/tooltip.less @@ -4,6 +4,7 @@ #tooltip:has(div.daggerheart.dh-style.tooltip.card-style), aside[role='tooltip']:has(div.daggerheart.dh-style.tooltip.card-style) { padding: 0; + padding-bottom: 8px; border: none; border-radius: 10px; 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); color: @color-text-emphatic; font-size: 12px; - margin-bottom: 10px; } } diff --git a/templates/ui/tooltip/domainCard.hbs b/templates/ui/tooltip/domainCard.hbs index 0380a523..26eeedf5 100644 --- a/templates/ui/tooltip/domainCard.hbs +++ b/templates/ui/tooltip/domainCard.hbs @@ -23,7 +23,7 @@ {{#if description}} -
{{{description}}}
+
{{{description}}}
{{/if}}