diff --git a/less/v2/apps.less b/less/v2/apps.less index 0187f05f51..57ef879c11 100644 --- a/less/v2/apps.less +++ b/less/v2/apps.less @@ -231,20 +231,6 @@ } } - .collapsible { - &.collapsed { - .fa-caret-down { transform: rotate(-90deg); } - .collapsible-content { grid-template-rows: 0fr; } - } - .fa-caret-down { transition: transform 250ms ease; } - .collapsible-content { - display: grid; - grid-template-rows: 1fr; - transition: grid-template-rows 250ms ease; - > .wrapper { overflow: hidden; } - } - } - .unlist { list-style: none; padding: 0; @@ -1559,6 +1545,24 @@ dialog.dnd5e2.application { } } +/* ---------------------------------- */ +/* Collapsible Content */ +/* ---------------------------------- */ + +.dnd5e2 .collapsible, .collapsible.dnd5e2-collapsible { + &.collapsed { + .fa-caret-down { transform: rotate(-90deg); } + .collapsible-content { grid-template-rows: 0fr; } + } + .fa-caret-down { transition: transform 250ms ease; } + .collapsible-content { + display: grid; + grid-template-rows: 1fr; + transition: grid-template-rows 250ms ease; + > .wrapper { overflow: hidden; } + } +} + /* ---------------------------------- */ /* Combat Tracker */ /* ---------------------------------- */ @@ -1568,7 +1572,7 @@ dialog.dnd5e2.application { .fa-chevron-down { transition: transform 250ms ease; } &.collapsed .fa-chevron-down { transform: rotate(-90deg); } - &.active::after { transition: border-color 250ms ease; } + &.active::after, &.active::before { transition: border-color 250ms ease; } &.active:not(.collapsed)::after { border-color: color-mix(in oklab, var(--color-border-highlight), transparent); } .group-header { cursor: pointer; } @@ -1579,6 +1583,15 @@ dialog.dnd5e2.application { line-height: 20px; } } + + /* V13 Syles */ + .combat-tracker { + .combatant-group { + display: block; + &.active:not(.collapsed)::before { border-color: color-mix(in oklab, var(--color-warm-2), transparent); } + } + .group-children { padding: 0; } + } } /* ---------------------------------- */ diff --git a/module/applications/combat/combat-tracker.mjs b/module/applications/combat/combat-tracker.mjs index 2177264bd4..3a5acdade4 100644 --- a/module/applications/combat/combat-tracker.mjs +++ b/module/applications/combat/combat-tracker.mjs @@ -51,13 +51,14 @@ export default class CombatTracker5e extends CombatTracker { renderGroups(html) { if ( !this.viewed ) return; const groups = this.viewed.createGroups(); - const list = html.querySelector(".directory-list"); - list.classList.add("dnd5e2"); + const V13 = game.release.generation >= 13; + const list = html.querySelector(".directory-list, .combat-tracker"); for ( const [key, { combatants, expanded }] of groups.entries() ) { const children = list.querySelectorAll(Array.from(combatants).map(c => `[data-combatant-id="${c.id}"]`).join(", ")); if ( !children.length ) continue; const groupContainer = document.createElement("li"); - groupContainer.classList.add("combatant", "combatant-group", "directory-item", "collapsible"); + groupContainer.classList.add("combatant", "combatant-group", "collapsible", "dnd5e2-collapsible"); + if ( !V13 ) groupContainer.classlist.add("directory-item"); if ( !expanded ) groupContainer.classList.add("collapsed"); // Determine the count @@ -81,9 +82,9 @@ export default class CombatTracker5e extends CombatTracker {