daggerheart/styles/less/ux/tooltip/tooltip.less
WBHarry 6e87e4dad0
[Fix] Downtime Rework (#367)
* Fixed so that the dropdown for activeEffectAutocomplete never ends up behind dialog

* Downtime can now display both ShortRest and LongRest options depending on character rules

* Initial downtime layout rework

* Fixed styling for downtime tooltip

* Added icon to homebrew menu for DowntimeActions

* Fixed columns if both types of moves are not available

* Changed the lightmode to darkmode

* Added downtime buttons

* .

* Moved extra rest options from rules to bonuses

* Improved dialog width
2025-07-17 19:48:59 -03:00

120 lines
2.5 KiB
Text

.daggerheart.dh-style.tooltip {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
.tooltip-title-container {
width: 100%;
display: flex;
align-items: center;
gap: 16px;
.tooltip-image {
height: 40px;
width: 40px;
border-radius: 6px;
border: 1px solid @golden;
}
}
.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;
}
}