diff --git a/module/applications/levelup/levelup.mjs b/module/applications/levelup/levelup.mjs index f025c131..cb88e5dd 100644 --- a/module/applications/levelup/levelup.mjs +++ b/module/applications/levelup/levelup.mjs @@ -20,10 +20,11 @@ export default class DhlevelUp extends HandlebarsApplicationMixin(ApplicationV2) static DEFAULT_OPTIONS = { tag: 'form', - classes: ['daggerheart', 'levelup'], + classes: ['daggerheart', 'dialog', 'dh-style', 'levelup'], position: { width: 1000, height: 'auto' }, window: { - resizable: true + resizable: true, + icon: 'fa-solid fa-arrow-turn-up' }, actions: { save: this.save, @@ -45,7 +46,10 @@ export default class DhlevelUp extends HandlebarsApplicationMixin(ApplicationV2) static PARTS = { tabs: { template: 'systems/daggerheart/templates/levelup/tabs/tab-navigation.hbs' }, advancements: { template: 'systems/daggerheart/templates/levelup/tabs/advancements.hbs' }, - selections: { template: 'systems/daggerheart/templates/levelup/tabs/selections.hbs' }, + selections: { + template: 'systems/daggerheart/templates/levelup/tabs/selections.hbs', + scrollable: ['.selections'] + }, summary: { template: 'systems/daggerheart/templates/levelup/tabs/summary.hbs' }, footer: { template: 'systems/daggerheart/templates/levelup/tabs/footer.hbs' } }; diff --git a/styles/less/dialog/index.less b/styles/less/dialog/index.less index c6a16527..942016e0 100644 --- a/styles/less/dialog/index.less +++ b/styles/less/dialog/index.less @@ -3,6 +3,7 @@ @import './level-up/sheet.less'; @import './level-up/summary-container.less'; @import './level-up/tiers-container.less'; +@import './level-up/footer.less'; @import './resource-dice/sheet.less'; diff --git a/styles/less/dialog/level-up/footer.less b/styles/less/dialog/level-up/footer.less new file mode 100644 index 00000000..daf25b60 --- /dev/null +++ b/styles/less/dialog/level-up/footer.less @@ -0,0 +1,19 @@ +@import '../../utils/fonts.less'; + +.daggerheart.levelup { + .tab-footer { + margin-top: 10px; + .levelup-navigation-actions, + .levelup-footer { + display: flex; + justify-content: end; + gap: 10px; + + button { + font-family: @font-body; + font-weight: bold; + height: 40px; + } + } + } +} diff --git a/styles/less/dialog/level-up/navigation-container.less b/styles/less/dialog/level-up/navigation-container.less index 142cf089..d8872931 100644 --- a/styles/less/dialog/level-up/navigation-container.less +++ b/styles/less/dialog/level-up/navigation-container.less @@ -1,3 +1,6 @@ +@import '../../utils/colors.less'; +@import '../../utils/fonts.less'; + .daggerheart.levelup { .levelup-navigation-container { display: flex; @@ -7,23 +10,18 @@ nav { flex: 1; + border: none; .levelup-tab-container { display: flex; align-items: center; gap: 4px; - } - } - .levelup-navigation-actions { - width: 306px; - display: flex; - justify-content: end; - gap: 16px; - margin-right: 4px; - - * { - width: calc(50% - 8px); + a, + span { + font-family: @font-body; + color: light-dark(@dark-blue, @golden); + } } } } diff --git a/styles/less/dialog/level-up/selections-container.less b/styles/less/dialog/level-up/selections-container.less index 552f7c86..843fead0 100644 --- a/styles/less/dialog/level-up/selections-container.less +++ b/styles/less/dialog/level-up/selections-container.less @@ -1,18 +1,38 @@ +@import '../../utils/fonts.less'; +@import '../../utils/colors.less'; + .daggerheart.levelup { .levelup-selections-container { + overflow: auto; + padding: 10px 0; + scrollbar-width: thin; + scrollbar-color: light-dark(@dark-blue, @golden) transparent; + max-height: 500px; + mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%); + .achievement-experience-cards { display: flex; gap: 8px; .achievement-experience-card { - border: 1px solid; - border-radius: 4px; - padding-right: 4px; - font-size: 18px; display: flex; justify-content: space-between; align-items: center; + background: light-dark(@dark-blue-40, @golden-40); + border-radius: 3px; + padding: 5px; + font-size: 16px; gap: 4px; + width: 100%; + + input { + background: light-dark(@soft-shadow, @semi-transparent-dark-blue); + width: 80%; + } + + span { + font-family: @font-body; + } .achievement-experience-marker { border: 1px solid; @@ -30,10 +50,13 @@ .levelup-card-selection { display: flex; flex-wrap: wrap; + justify-content: center; gap: 40px; + height: 190px; .card-preview-container { - width: calc(100% * (1 / 5)); + height: 100%; + max-width: 200px; } .levelup-domains-selection-container { @@ -89,10 +112,30 @@ } } + .card-section { + flex: 1 1 100%; + + .card-section-header { + display: flex; + align-items: center; + gap: 20px; + margin-bottom: 10px; + + h3 { + font-family: @font-subtitle; + color: light-dark(@dark, @beige); + margin: 0; + white-space: nowrap; + } + } + } + .levelup-selections-title { - display: flex; - align-items: center; - gap: 4px; + margin-left: auto; + margin-right: auto; + font-size: 22px; + font-weight: bold; + padding: 0 12px; } .levelup-radio-choices { diff --git a/styles/less/dialog/level-up/sheet.less b/styles/less/dialog/level-up/sheet.less index 2f89034c..ade7c8a9 100644 --- a/styles/less/dialog/level-up/sheet.less +++ b/styles/less/dialog/level-up/sheet.less @@ -25,9 +25,11 @@ section { .section-container { display: flex; - flex-direction: column; - gap: 8px; + flex-direction: row; + justify-content: center; + gap: 20px 8px; margin-top: 8px; + flex-wrap: wrap; } } diff --git a/styles/less/dialog/level-up/summary-container.less b/styles/less/dialog/level-up/summary-container.less index fbaa783e..eb760cde 100644 --- a/styles/less/dialog/level-up/summary-container.less +++ b/styles/less/dialog/level-up/summary-container.less @@ -1,5 +1,28 @@ +@import '../../utils/colors.less'; +@import '../../utils/fonts.less'; + .daggerheart.levelup { + .summary-header { + display: flex; + align-items: center; + gap: 20px; + margin-bottom: 10px; + + h3 { + font-family: @font-subtitle; + color: light-dark(@dark, @beige); + margin: 0; + white-space: nowrap; + } + } .levelup-summary-container { + overflow: auto; + padding: 10px 0; + scrollbar-width: thin; + scrollbar-color: light-dark(@dark-blue, @golden) transparent; + max-height: 700px; + mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%); + .level-achievements-container, .level-advancements-container { display: flex; @@ -11,7 +34,7 @@ h4, h5 { margin: 0; - color: var(--color-text-secondary); + color: light-dark(@dark, @beige); } } @@ -19,7 +42,19 @@ display: flex; align-items: center; gap: 4px; - font-size: 20px; + font-size: 14px; + font-family: @font-body; + color: light-dark(@dark, @beige); + } + + h5.summary-section { + display: flex; + align-items: center; + gap: 4px; + font-size: 16px; + font-family: @font-subtitle; + color: light-dark(@dark, @beige); + margin-bottom: 5px; } .summary-selection-container { @@ -28,9 +63,11 @@ .summary-selection { border: 2px solid; - border-radius: 6px; + border-radius: 3px; padding: 0 4px; - font-size: 18px; + font-size: 14px; + font-family: @font-body; + color: light-dark(@dark, @beige); } } } diff --git a/styles/less/dialog/level-up/tiers-container.less b/styles/less/dialog/level-up/tiers-container.less index bf270fe9..1149ede3 100644 --- a/styles/less/dialog/level-up/tiers-container.less +++ b/styles/less/dialog/level-up/tiers-container.less @@ -1,3 +1,6 @@ +@import '../../utils/colors.less'; +@import '../../utils/fonts.less'; + .daggerheart.levelup { .tiers-container { display: flex; @@ -38,7 +41,7 @@ height: min-content; &.multi { - border: 2px solid grey; + border: 2px solid light-dark(@dark-blue-40, @golden-40); padding: 2.4px 2.5px 0; border-radius: 4px; gap: 2px; @@ -56,7 +59,8 @@ } .checkbox-group-label { - font-size: 14px; + font-family: @font-body; + font-size: 12px; font-style: italic; } } diff --git a/styles/less/global/elements.less b/styles/less/global/elements.less index 4b638748..067b4c86 100755 --- a/styles/less/global/elements.less +++ b/styles/less/global/elements.less @@ -674,8 +674,8 @@ .application .component.dh-style.card-preview-container { position: relative; - border-radius: 6px; - border: 2px solid var(--color-tabs-border); + border: 2px solid transparent; + display: flex; flex-direction: column; aspect-ratio: 0.75; @@ -697,31 +697,41 @@ justify-content: center; } - .preview-image-container { - flex: 1; - border-radius: 4px 4px 0 0; - } - - .preview-text-container { - flex: 1; - border-radius: 0 0 4px 4px; + .preview-selected-container { display: flex; flex-direction: column; - align-items: center; - justify-content: center; - font-size: 18px; - text-align: center; - color: var(--color-text-selection-bg); - background-image: url(../assets/parchments/dh-parchment-light.png); + border: 2px solid light-dark(@dark-blue-50, @beige-50); + border-radius: 6px; + max-width: 200px; + height: 100%; + + .preview-image-container { + width: 100%; + flex-grow: 1; + object-fit: cover; + border-radius: 4px 4px 0 0; + } + + .preview-text-container { + font-family: @font-body; + padding: 10px 0; + text-align: center; + font-size: 16px; + color: light-dark(@beige, @dark); + background-image: url(../assets/parchments/dh-parchment-light.png); + border-radius: 0 0 4px 4px; + } } .preview-empty-container { + border-radius: 6px; pointer-events: none; position: relative; display: flex; align-items: center; justify-content: center; flex: 1; + border: 2px dashed light-dark(@dark-blue-50, @beige-50); .preview-empty-inner-container { width: 100%; @@ -729,15 +739,19 @@ justify-content: center; .preview-add-icon { - font-size: 48px; + font-size: 40px; + color: light-dark(@dark-blue-50, @beige-50); } .preview-empty-subtext { position: absolute; - top: 10%; - font-size: 18px; + bottom: 5%; + font-size: 10px; font-variant: small-caps; text-align: center; + font-family: @font-body; + font-style: italic; + color: light-dark(@dark-blue-60, @beige-80); } } } diff --git a/templates/components/card-preview.hbs b/templates/components/card-preview.hbs index 08d4ca01..67388b6d 100644 --- a/templates/components/card-preview.hbs +++ b/templates/components/card-preview.hbs @@ -3,13 +3,15 @@ {{#if (not disabled)}}data-action="viewCompendium"{{/if}} data-compendium="{{this.compendium}}" data-path="{{this.path}}" data-limit="{{this.limit}}" > {{#if this.img}} - -
- {{#if altPartialBlock}} - {{> @partial-block }} - {{else}} - {{this.name}} - {{/if}} +
+ +
+ {{#if altPartialBlock}} + {{> @partial-block }} + {{else}} + {{this.name}} + {{/if}} +
{{else}}
diff --git a/templates/levelup/tabs/footer.hbs b/templates/levelup/tabs/footer.hbs index 85c49a91..1e87a573 100644 --- a/templates/levelup/tabs/footer.hbs +++ b/templates/levelup/tabs/footer.hbs @@ -1,4 +1,23 @@ \ No newline at end of file diff --git a/templates/levelup/tabs/tab-navigation.hbs b/templates/levelup/tabs/tab-navigation.hbs index 990e909d..0a73e5ab 100644 --- a/templates/levelup/tabs/tab-navigation.hbs +++ b/templates/levelup/tabs/tab-navigation.hbs @@ -1,3 +1,4 @@ +{{#unless tabs.summary.active}}
{{#if levelupAuto}} @@ -9,36 +10,19 @@
{{localize tab.label}} + {{#if tab.progress}} + {{tab.progress.selected}}/{{tab.progress.max}} + {{/if}} - {{#if tab.progress}} -
{{tab.progress.selected}}/{{tab.progress.max}}
- {{/if}}
{{/if}} {{/each}} {{/if}} - {{#if this.levelupAuto}} -
- {{#if this.navigate.previous.fromSummary}} - - {{else}} - {{#if (not this.navigate.previous.disabled)}} - - {{/if}} - {{/if}} - {{#if this.navigate.next.show}} - {{#if this.navigate.next.toSummary}} - - {{else}} - - {{/if}} - {{else}} -
- {{/if}} -
- {{/if}}
{{/if}} - \ No newline at end of file + +{{else}} +
+{{/unless}} \ No newline at end of file