diff --git a/styles/less/ux/tooltip/tooltip.less b/styles/less/ux/tooltip/tooltip.less index 2d76d44c..a5358ef6 100644 --- a/styles/less/ux/tooltip/tooltip.less +++ b/styles/less/ux/tooltip/tooltip.less @@ -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; } diff --git a/templates/ui/tooltip/attack.hbs b/templates/ui/tooltip/attack.hbs index 2a4e0767..8e4a1bb0 100644 --- a/templates/ui/tooltip/attack.hbs +++ b/templates/ui/tooltip/attack.hbs @@ -1,6 +1,6 @@