diff --git a/.gitignore b/.gitignore index d5c12e03..f597cf72 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ .vscode node_modules /packs -Build \ No newline at end of file +Build +/build \ No newline at end of file diff --git a/assets/parchments/dh-parchment-dark.png b/assets/parchments/dh-parchment-dark.png new file mode 100755 index 00000000..760f02cb Binary files /dev/null and b/assets/parchments/dh-parchment-dark.png differ diff --git a/assets/parchments/dh-parchment-light.png b/assets/parchments/dh-parchment-light.png new file mode 100755 index 00000000..598444a5 Binary files /dev/null and b/assets/parchments/dh-parchment-light.png differ diff --git a/lang/en.json b/lang/en.json old mode 100644 new mode 100755 index e4c758ae..a07b84f6 --- a/lang/en.json +++ b/lang/en.json @@ -694,10 +694,13 @@ }, "Feature": { "Type": { - "Ancestry": "Ancestry", - "Community": "Community", - "Class": "Class", - "Subclass": "Subclass" + "ancestry": "Ancestry", + "community": "Community", + "class": "Class", + "subclass": "Subclass", + "classHope": "Class Hope", + "domainCard": "Domain Card", + "equipment": "Equipment" }, "ValueType": { "Normal": "Normal", @@ -1009,9 +1012,18 @@ "Tabs": { "Features": "Features", "Effects": "Effects", - "Actions": "Actions" + "Settings": "Settings", + "Actions": "Actions", + "Description": "Description" }, - "Description": "Description" + "Description": "Description", + "effects": { + "addEffect": "Add Effect", + "applyLocation": "Apply Location", + "value": "Value", + "initiallySelected": "Initially Selected", + "hopeIncrease": "Hope Increase" + } }, "Consumable": { "Quantity": "Quantity", @@ -1050,16 +1062,16 @@ }, "Effects": { "Types": { - "Health": { + "health": { "Name": "Health" }, - "Stress": { + "stress": { "Name": "Stress" }, - "Reach": { + "reach": { "Name": "Reach" }, - "Damage": { + "damage": { "Name": "Damage" } }, diff --git a/module/applications/sheets/feature.mjs b/module/applications/sheets/feature.mjs old mode 100644 new mode 100755 index f8938fd0..54bfa68e --- a/module/applications/sheets/feature.mjs +++ b/module/applications/sheets/feature.mjs @@ -12,7 +12,8 @@ export default class FeatureSheet extends DaggerheartSheet(ItemSheetV2) { static DEFAULT_OPTIONS = { tag: 'form', - classes: ['daggerheart', 'sheet', 'feature'], + id: 'daggerheart-feature', + classes: ['daggerheart', 'sheet', 'dh-style', 'feature'], position: { width: 600, height: 600 }, window: { resizable: true }, actions: { @@ -30,17 +31,57 @@ export default class FeatureSheet extends DaggerheartSheet(ItemSheetV2) { }; static PARTS = { - form: { - id: 'feature', - template: 'systems/daggerheart/templates/sheets/feature.hbs' + header: { template: 'systems/daggerheart/templates/sheets/items/feature/header.hbs' }, + tabs: { template: 'systems/daggerheart/templates/sheets/global/tabs/tab-navigation.hbs' }, + description: { template: 'systems/daggerheart/templates/sheets/global/tabs/tab-description.hbs' }, + actions: { + template: 'systems/daggerheart/templates/sheets/items/feature/actions.hbs', + scrollable: ['.actions'] + }, + settings: { + template: 'systems/daggerheart/templates/sheets/items/feature/settings.hbs', + scrollable: ['.settings'] + }, + effects: { + template: 'systems/daggerheart/templates/sheets/items/feature/effects.hbs', + scrollable: ['.effects'] } }; _getTabs() { const tabs = { - features: { active: true, cssClass: '', group: 'primary', id: 'features', icon: null, label: 'Features' }, - effects: { active: false, cssClass: '', group: 'primary', id: 'effects', icon: null, label: 'Effects' }, - actions: { active: false, cssClass: '', group: 'primary', id: 'actions', icon: null, label: 'Actions' } + description: { + active: true, + cssClass: '', + group: 'primary', + id: 'description', + icon: null, + label: 'DAGGERHEART.Sheets.Feature.Tabs.Description' + }, + actions: { + active: false, + cssClass: '', + group: 'primary', + id: 'actions', + icon: null, + label: 'DAGGERHEART.Sheets.Feature.Tabs.Actions' + }, + settings: { + active: false, + cssClass: '', + group: 'primary', + id: 'settings', + icon: null, + label: 'DAGGERHEART.Sheets.Feature.Tabs.Settings' + }, + effects: { + active: false, + cssClass: '', + group: 'primary', + id: 'effects', + icon: null, + label: 'DAGGERHEART.Sheets.Feature.Tabs.Effects' + } }; for (const v of Object.values(tabs)) { v.active = this.tabGroups[v.group] ? this.tabGroups[v.group] === v.id : v.active; @@ -58,7 +99,8 @@ export default class FeatureSheet extends DaggerheartSheet(ItemSheetV2) { async _prepareContext(_options) { const context = await super._prepareContext(_options); context.document = this.document; - (context.tabs = this._getTabs()), (context.generalConfig = SYSTEM.GENERAL); + context.tabs = this._getTabs(); + context.generalConfig = SYSTEM.GENERAL; context.itemConfig = SYSTEM.ITEM; context.properties = SYSTEM.ACTOR.featureProperties; context.dice = SYSTEM.GENERAL.diceTypes; @@ -98,7 +140,7 @@ export default class FeatureSheet extends DaggerheartSheet(ItemSheetV2) { } static async addAction() { - const action = await new DaggerheartAction({}, { parent: this.document }); + const action = await new DaggerheartAction({ img: this.document.img }, { parent: this.document }); await this.document.update({ 'system.actions': [...this.document.system.actions, action] }); await new DaggerheartActionConfig(this.document.system.actions[this.document.system.actions.length - 1]).render( true diff --git a/module/config/itemConfig.mjs b/module/config/itemConfig.mjs index 053c83cc..fe2037f2 100644 --- a/module/config/itemConfig.mjs +++ b/module/config/itemConfig.mjs @@ -285,19 +285,31 @@ export const weaponFeatures = { export const featureTypes = { ancestry: { id: 'ancestry', - label: 'DAGGERHEART.Feature.Type.Ancestry' + label: 'DAGGERHEART.Feature.Type.ancestry' }, community: { id: 'community', - label: 'DAGGERHEART.Feature.Type.Community' + label: 'DAGGERHEART.Feature.Type.community' }, class: { id: 'class', - label: 'DAGGERHEART.Feature.Type.Class' + label: 'DAGGERHEART.Feature.Type.class' }, subclass: { id: 'subclass', - label: 'DAGGERHEART.Feature.Type.Subclass' + label: 'DAGGERHEART.Feature.Type.subclass' + }, + classHope: { + id: 'classHope', + label: 'DAGGERHEART.Feature.Type.classHope' + }, + domainCard: { + id: 'domainCard', + label: 'DAGGERHEART.Feature.Type.domainCard' + }, + equipment: { + id: 'equipment', + label: 'DAGGERHEART.Feature.Type.equipment' } }; diff --git a/module/data/action.mjs b/module/data/action.mjs old mode 100644 new mode 100755 index 2c33450e..48adfb21 --- a/module/data/action.mjs +++ b/module/data/action.mjs @@ -4,6 +4,7 @@ export default class DaggerheartAction extends foundry.abstract.DataModel { return { id: new fields.StringField({}), name: new fields.StringField({ initial: 'New Action' }), + img: new fields.StringField({ initial: '' }), damage: new fields.SchemaField({ type: new fields.StringField({ choices: SYSTEM.GENERAL.damageTypes, nullable: true, initial: null }), value: new fields.StringField({}) diff --git a/styles/daggerheart.css b/styles/daggerheart.css old mode 100644 new mode 100755 index 0cd5f177..eb6fed29 --- a/styles/daggerheart.css +++ b/styles/daggerheart.css @@ -1806,7 +1806,6 @@ align-items: baseline; } .daggerheart.sheet .item-sidebar { - border-right: 1px groove darkgray; min-width: 160px; flex: 0; padding: 4px; @@ -2785,6 +2784,369 @@ div.daggerheart.views.multiclass { .item-button .item-icon.checked { opacity: 1; } +.application.sheet.daggerheart.dh-style.feature .item-sheet-header { + display: flex; +} +.application.sheet.daggerheart.dh-style.feature .item-sheet-header .profile { + height: 130px; + width: 130px; +} +.application.sheet.daggerheart.dh-style.feature section.tab { + height: 400px; + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: light-dark(#18162e, #f3c267) transparent; +} +.application.sheet.daggerheart.dh-style.feature .tab.actions .actions-list { + display: flex; + flex-direction: column; + list-style: none; + padding: 0; + margin: 0; + width: 100%; + gap: 5px; +} +.application.sheet.daggerheart.dh-style.feature .tab.actions .actions-list .action-item { + display: grid; + align-items: center; + grid-template-columns: 1fr 4fr 1fr; + cursor: pointer; +} +.application.sheet.daggerheart.dh-style.feature .tab.actions .actions-list .action-item h4 { + font-family: 'Montserrat', sans-serif; + font-weight: lighter; + color: #efe6d8; +} +.application.sheet.daggerheart.dh-style.feature .tab.actions .actions-list .action-item .image { + height: 40px; + width: 40px; + object-fit: cover; + border-radius: 6px; + border: none; +} +.application.sheet.daggerheart.dh-style.feature .tab.actions .actions-list .action-item .controls { + display: flex; + justify-content: center; + gap: 10px; +} +.application.sheet.daggerheart.dh-style.feature .tab.actions .actions-list .action-item .controls a { + text-shadow: none; +} +@font-face { + font-family: 'Cinzel'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(https://fonts.gstatic.com/s/cinzel/v23/8vIU7ww63mVu7gtR-kwKxNvkNOjw-tbnTYo.ttf) format('truetype'); +} +@font-face { + font-family: 'Cinzel'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(https://fonts.gstatic.com/s/cinzel/v23/8vIU7ww63mVu7gtR-kwKxNvkNOjw-jHgTYo.ttf) format('truetype'); +} +@font-face { + font-family: 'Cinzel Decorative'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(https://fonts.gstatic.com/s/cinzeldecorative/v17/daaHSScvJGqLYhG8nNt8KPPswUAPniZoaelD.ttf) format('truetype'); +} +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v29/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Ew-.ttf) format('truetype'); +} +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v29/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCu170w-.ttf) format('truetype'); +} +.application.sheet.daggerheart.dh-style h1 { + font-family: 'Cinzel Decorative', serif; + margin: 0; + border: none; + font-weight: normal; +} +.application.sheet.daggerheart.dh-style h2, +.application.sheet.daggerheart.dh-style h3 { + font-family: 'Cinzel', serif; + margin: 0; + border: none; + font-weight: normal; +} +.application.sheet.daggerheart.dh-style h4 { + font-family: 'Montserrat', sans-serif; + font-size: 14px; + border: none; + font-weight: 700; + margin: 0; + text-shadow: none; + color: #f3c267; + font-weight: normal; +} +.application.sheet.daggerheart.dh-style h5 { + font-size: 14px; + color: #f3c267; + margin: 0; + font-weight: normal; +} +.application.sheet.daggerheart.dh-style p, +.application.sheet.daggerheart.dh-style span { + font-family: 'Montserrat', sans-serif; +} +.application.sheet.daggerheart.dh-style small { + font-family: 'Montserrat', sans-serif; + opacity: 0.8; +} +.application.sheet.dh-style .window-header { + background: transparent; + border-bottom: none; + justify-content: end; +} +.application.sheet.dh-style .window-header h1 { + color: light-dark(#18162e, #efe6d8); + font-family: 'Montserrat', sans-serif; +} +.application.sheet.dh-style .window-header button { + background: light-dark(transparent, #0e0d15); + color: light-dark(#18162e, #efe6d8); + border: 1px solid light-dark(#18162e, transparent); + padding: 0; +} +.application.sheet.dh-style .window-header button:hover { + border: 1px solid light-dark(#18162e, #f3c267); + color: light-dark(#18162e, #f3c267); +} +.application.sheet.dh-style:not(.minimized) .window-title, +.application.sheet.dh-style:not(.minimized) .window-icon { + display: none; + opacity: 0; + transition: opacity 0.3s ease; +} +.application.sheet.dh-style.minimized .window-content { + display: none; + opacity: 0; + transition: opacity 0.1s ease; +} +.application.sheet.dh-style:not(.minimized) .window-content { + opacity: 1; + transition: opacity 0.3s ease; +} +.application.sheet.dh-style .window-content { + overflow: initial; + backdrop-filter: none; + padding: 0; +} +.theme-dark .application.sheet.dh-style { + backdrop-filter: blur(4px); +} +.theme-light .application.sheet.dh-style { + background-image: url('../assets/parchments/dh-parchment-light.png'); + background-repeat: no-repeat; + background-position: center; +} +.application.sheet.daggerheart.dh-style .window-content { + position: relative; + top: -36px; +} +.application.sheet.daggerheart.dh-style .window-content .tab { + padding: 0 10px; +} +.application.sheet.dh-style { + border: 1px solid light-dark(#18162e, #f3c267); +} +.application.sheet.dh-style input[type='text'], +.application.sheet.dh-style input[type='number'] { + background: light-dark(transparent, transparent); + border-radius: 6px; + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05); + backdrop-filter: blur(9.5px); + -webkit-backdrop-filter: blur(9.5px); + outline: none; + color: light-dark(#18162e, #f3c267); + border: 1px solid light-dark(#222, #efe6d8); +} +.application.sheet.dh-style input[type='text']:hover[type='text'], +.application.sheet.dh-style input[type='number']:hover[type='text'], +.application.sheet.dh-style input[type='text']:hover[type='number'], +.application.sheet.dh-style input[type='number']:hover[type='number'], +.application.sheet.dh-style input[type='text']:focus[type='text'], +.application.sheet.dh-style input[type='number']:focus[type='text'], +.application.sheet.dh-style input[type='text']:focus[type='number'], +.application.sheet.dh-style input[type='number']:focus[type='number'] { + background: light-dark(rgba(0, 0, 0, 0.05), rgba(24, 22, 46, 0.33)); + box-shadow: none; + outline: 2px solid light-dark(#222, #efe6d8); +} +.application.sheet.dh-style input[type='checkbox']:checked::after { + color: light-dark(#18162e, #f3c267); +} +.application.sheet.dh-style input[type='checkbox']::before { + color: light-dark(#f3c267, #18162e); +} +.application.sheet.dh-style button { + background: light-dark(transparent, #f3c267); + border: 1px solid light-dark(#18162e, #18162e); + color: light-dark(#18162e, #18162e); + outline: none; + box-shadow: none; +} +.application.sheet.dh-style button:hover { + background: light-dark(rgba(0, 0, 0, 0.3), #18162e); + color: light-dark(#18162e, #f3c267); +} +.application.sheet.dh-style select { + background: light-dark(transparent, transparent); + color: light-dark(#222, #efe6d8); + font-family: 'Montserrat', sans-serif; + outline: 2px solid transparent; + border: 1px solid light-dark(#222, #efe6d8); +} +.application.sheet.dh-style select:focus, +.application.sheet.dh-style select:hover { + outline: 2px solid light-dark(#222, #efe6d8); + box-shadow: none; +} +.application.sheet.dh-style select option { + color: #efe6d8; + background-color: #18162e; + border-radius: 6px; +} +.application.sheet.dh-style p { + margin: 0; +} +.application.sheet.dh-style ul { + margin: 0; + padding: 0; + list-style: none; +} +.application.sheet.dh-style li { + margin: 0; +} +.application.sheet.dh-style fieldset { + align-items: center; + margin-top: 5px; + border-radius: 6px; + border-color: light-dark(#18162e, #f3c267); +} +.application.sheet.dh-style fieldset.one-column { + display: flex; + flex-direction: column; + align-items: start; + gap: 10px; + min-height: 64px; +} +.application.sheet.dh-style fieldset.two-columns { + display: grid; + grid-template-columns: 1fr 2fr; + gap: 10px; +} +.application.sheet.dh-style fieldset legend { + font-family: 'Montserrat', sans-serif; + font-weight: bold; + color: light-dark(#18162e, #f3c267); +} +.application.sheet.dh-style fieldset legend a { + text-shadow: none; +} +.application.sheet.dh-style fieldset input[type='text'], +.application.sheet.dh-style fieldset input[type='number'] { + color: light-dark(#222, #efe6d8); + font-family: 'Montserrat', sans-serif; + transition: all 0.3s ease; + outline: 2px solid transparent; +} +.application.sheet.dh-style fieldset input[type='text']:focus, +.application.sheet.dh-style fieldset input[type='number']:focus, +.application.sheet.dh-style fieldset input[type='text']:hover, +.application.sheet.dh-style fieldset input[type='number']:hover { + outline: 2px solid light-dark(#222, #efe6d8); +} +.application.sheet.dh-style fieldset .nest-inputs { + display: flex; + align-items: center; + gap: 5px; +} +.application.sheet.dh-style line-div { + display: block; + height: 1px; + width: 100%; + border-bottom: 1px solid light-dark(#18162e, #f3c267); + mask-image: linear-gradient(270deg, transparent 0%, black 50%, transparent 100%); +} +.application.sheet.dh-style .item-description { + opacity: 1; + transform: translateY(0); + transition: opacity 0.3s ease-out, transform 0.3s ease-out; +} +.application.sheet.dh-style .item-description.invisible { + height: 0; + opacity: 0; + overflow: hidden; + transform: translateY(-20px); + transform-origin: top; +} +.sheet.daggerheart.dh-style .tab-navigation { + margin: 5px 0; + height: 40px; +} +.sheet.daggerheart.dh-style .tab-navigation .feature-tab { + border: none; + gap: 5px; +} +.sheet.daggerheart.dh-style .tab-navigation .feature-tab a { + color: light-dark(#18162e, #f3c267); + text-shadow: none; + font-family: 'Montserrat', sans-serif; +} +.application.sheet.daggerheart.dh-style .item-sheet-header { + display: flex; +} +.application.sheet.daggerheart.dh-style .item-sheet-header .profile { + height: 150px; + width: 150px; + object-fit: cover; + border-right: 1px solid light-dark(#18162e, #f3c267); + border-bottom: 1px solid light-dark(#18162e, #f3c267); + box-sizing: border-box; + cursor: pointer; +} +.application.sheet.daggerheart.dh-style .item-sheet-header .item-info { + display: flex; + flex-direction: column; + align-items: center; + gap: 5px; + margin-top: 36px; + text-align: center; + width: 80%; +} +.application.sheet.daggerheart.dh-style .item-sheet-header .item-info .item-name input[type='text'] { + font-size: 32px; + height: 42px; + text-align: center; + width: 90%; + transition: all 0.3s ease; + outline: 2px solid transparent; + border: 1px solid transparent; +} +.application.sheet.daggerheart.dh-style .item-sheet-header .item-info .item-name input[type='text']:hover[type='text'], +.application.sheet.daggerheart.dh-style .item-sheet-header .item-info .item-name input[type='text']:focus[type='text'] { + box-shadow: none; + outline: 2px solid light-dark(#18162e, #f3c267); +} +.application.sheet.daggerheart.dh-style .item-sheet-header .item-info .item-description { + display: flex; + gap: 10px; +} +.application.sheet.daggerheart.dh-style .item-sheet-header .item-info h3 { + font-size: 1rem; +} #logo { content: url(../assets/DaggerheartLogo.webp); height: 50px; @@ -2835,21 +3197,11 @@ div.daggerheart.views.multiclass { .daggerheart .icon-button.spaced { margin-left: 4px; } -.daggerheart .icon-button.active { - filter: drop-shadow(0 0 3px red); -} -.daggerheart .icon-button.active.secondary { - filter: drop-shadow(0 0 3px gold); -} .daggerheart .icon-button.disabled { opacity: 0.6; } .daggerheart .icon-button:hover:not(.disabled) { cursor: pointer; - filter: drop-shadow(0 0 3px red); -} -.daggerheart .icon-button:hover:not(.disabled).secondary { - filter: drop-shadow(0 0 3px gold); } #players h3 { display: flex; diff --git a/styles/daggerheart.less b/styles/daggerheart.less old mode 100644 new mode 100755 index cadae587..d55a4aec --- a/styles/daggerheart.less +++ b/styles/daggerheart.less @@ -11,6 +11,17 @@ @import './dialog.less'; @import '../node_modules/@yaireo/tagify/dist/tagify.css'; +// new styles imports +@import './less/items/feature.less'; + +@import './less/utils/colors.less'; +@import './less/utils/fonts.less'; + +@import './less/global/sheet.less'; +@import './less/global/elements.less'; +@import './less/global/tab-navigation.less'; +@import './less/global/item-header.less'; + #logo { content: url(../assets/DaggerheartLogo.webp); height: 50px; @@ -73,25 +84,12 @@ margin-left: @halfMargin; } - &.active { - filter: drop-shadow(0 0 3px @mainShadow); - - &.secondary { - filter: drop-shadow(0 0 3px @secondaryShadow); - } - } - &.disabled { opacity: 0.6; } &:hover:not(.disabled) { cursor: pointer; - filter: drop-shadow(0 0 3px @mainShadow); - - &.secondary { - filter: drop-shadow(0 0 3px @secondaryShadow); - } } } diff --git a/styles/item.less b/styles/item.less old mode 100644 new mode 100755 index a6d16bee..964d69fc --- a/styles/item.less +++ b/styles/item.less @@ -42,7 +42,7 @@ } .item-sidebar { - border-right: @thinBorder groove darkgray; + // border-right: @thinBorder groove darkgray; min-width: 160px; flex: 0; padding: @fullPadding; diff --git a/styles/less/global/elements.less b/styles/less/global/elements.less new file mode 100755 index 00000000..79cb6284 --- /dev/null +++ b/styles/less/global/elements.less @@ -0,0 +1,158 @@ +@import '../utils/colors.less'; +@import '../utils/fonts.less'; + +.application.sheet.dh-style { + border: 1px solid light-dark(@dark-blue, @golden); + + input[type='text'], + input[type='number'] { + background: light-dark(transparent, transparent); + border-radius: 6px; + box-shadow: 0 4px 30px @soft-shadow; + backdrop-filter: blur(9.5px); + -webkit-backdrop-filter: blur(9.5px); + outline: none; + color: light-dark(@dark-blue, @golden); + border: 1px solid light-dark(@dark, @beige); + + &:hover[type='text'], + &:hover[type='number'], + &:focus[type='text'], + &:focus[type='number'] { + background: light-dark(@soft-shadow, @semi-transparent-dark-blue); + box-shadow: none; + outline: 2px solid light-dark(@dark, @beige); + } + } + + input[type='checkbox'] { + &:checked::after { + color: light-dark(@dark-blue, @golden); + } + &::before { + color: light-dark(@golden, @dark-blue); + } + } + + button { + background: light-dark(transparent, @golden); + border: 1px solid light-dark(@dark-blue, @dark-blue); + color: light-dark(@dark-blue, @dark-blue); + outline: none; + box-shadow: none; + + &:hover { + background: light-dark(@light-black, @dark-blue); + color: light-dark(@dark-blue, @golden); + } + } + + select { + background: light-dark(transparent, transparent); + color: light-dark(@dark, @beige); + font-family: @font-body; + outline: 2px solid transparent; + border: 1px solid light-dark(@dark, @beige); + + &:focus, + &:hover { + outline: 2px solid light-dark(@dark, @beige); + box-shadow: none; + } + + & option { + color: @beige; + background-color: @dark-blue; + border-radius: 6px; + } + } + + p { + margin: 0; + } + + ul { + margin: 0; + padding: 0; + list-style: none; + } + + li { + margin: 0; + } + + fieldset { + align-items: center; + margin-top: 5px; + border-radius: 6px; + border-color: light-dark(@dark-blue, @golden); + + &.one-column { + display: flex; + flex-direction: column; + align-items: start; + gap: 10px; + min-height: 64px; + } + + &.two-columns { + display: grid; + grid-template-columns: 1fr 2fr; + gap: 10px; + } + + legend { + font-family: @font-body; + font-weight: bold; + color: light-dark(@dark-blue, @golden); + + a { + text-shadow: none; + } + } + + input[type='text'], + input[type='number'] { + color: light-dark(@dark, @beige); + font-family: @font-body; + transition: all 0.3s ease; + outline: 2px solid transparent; + + &:focus, + &:hover { + outline: 2px solid light-dark(@dark, @beige); + } + } + + .nest-inputs { + display: flex; + align-items: center; + gap: 5px; + } + } + + line-div { + display: block; + height: 1px; + width: 100%; + border-bottom: 1px solid light-dark(@dark-blue, @golden); + mask-image: linear-gradient(270deg, transparent 0%, black 50%, transparent 100%); + } + + .item-description { + opacity: 1; + transform: translateY(0); + + transition: + opacity 0.3s ease-out, + transform 0.3s ease-out; + } + + .item-description.invisible { + height: 0; + opacity: 0; + overflow: hidden; + transform: translateY(-20px); + transform-origin: top; + } +} diff --git a/styles/less/global/item-header.less b/styles/less/global/item-header.less new file mode 100755 index 00000000..e34bc30f --- /dev/null +++ b/styles/less/global/item-header.less @@ -0,0 +1,52 @@ +@import '../utils/colors.less'; + +.application.sheet.daggerheart.dh-style { + .item-sheet-header { + display: flex; + + .profile { + height: 150px; + width: 150px; + object-fit: cover; + border-right: 1px solid light-dark(@dark-blue, @golden); + border-bottom: 1px solid light-dark(@dark-blue, @golden); + box-sizing: border-box; + cursor: pointer; + } + + .item-info { + display: flex; + flex-direction: column; + align-items: center; + gap: 5px; + margin-top: 36px; + text-align: center; + width: 80%; + + .item-name input[type='text'] { + font-size: 32px; + height: 42px; + text-align: center; + width: 90%; + transition: all 0.3s ease; + outline: 2px solid transparent; + border: 1px solid transparent; + + &:hover[type='text'], + &:focus[type='text'] { + box-shadow: none; + outline: 2px solid light-dark(@dark-blue, @golden); + } + } + + .item-description { + display: flex; + gap: 10px; + } + + h3 { + font-size: 1rem; + } + } + } +} diff --git a/styles/less/global/sheet.less b/styles/less/global/sheet.less new file mode 100755 index 00000000..b3fe4960 --- /dev/null +++ b/styles/less/global/sheet.less @@ -0,0 +1,81 @@ +@import '../utils/colors.less'; +@import '../utils/fonts.less'; + +.application.sheet.dh-style .window-header { + background: transparent; + border-bottom: none; + justify-content: end; + + h1 { + color: light-dark(@dark-blue, @beige); + font-family: @font-body; + } + + button { + background: light-dark(transparent, @deep-black); + color: light-dark(@dark-blue, @beige); + border: 1px solid light-dark(@dark-blue, transparent); + padding: 0; + + &:hover { + border: 1px solid light-dark(@dark-blue, @golden); + color: light-dark(@dark-blue, @golden); + } + } +} + +.application.sheet.dh-style:not(.minimized) { + .window-title, + .window-icon { + display: none; + opacity: 0; + transition: opacity 0.3s ease; + } +} + +.application.sheet.dh-style.minimized { + .window-content { + display: none; + opacity: 0; + transition: opacity 0.1s ease; + } +} + +.application.sheet.dh-style:not(.minimized) { + .window-content { + opacity: 1; + transition: opacity 0.3s ease; + } +} + +.application.sheet.dh-style .window-content { + overflow: initial; + backdrop-filter: none; + padding: 0; +} + +.theme-dark { + .application.sheet.dh-style { + backdrop-filter: blur(4px); + } +} + +.theme-light { + .application.sheet.dh-style { + background-image: url('../assets/parchments/dh-parchment-light.png'); + background-repeat: no-repeat; + background-position: center; + } +} +// D:\Foundry\v13\data\Data\systems\daggerheart\assets\parchments\dh-parchment-light.png + +.application.sheet.daggerheart.dh-style { + .window-content { + position: relative; + top: -36px; + + .tab { + padding: 0 10px; + } + } +} diff --git a/styles/less/global/tab-navigation.less b/styles/less/global/tab-navigation.less new file mode 100755 index 00000000..4e167e20 --- /dev/null +++ b/styles/less/global/tab-navigation.less @@ -0,0 +1,20 @@ +@import '../utils/colors.less'; +@import '../utils/fonts.less'; + +.sheet.daggerheart.dh-style { + .tab-navigation { + margin: 5px 0; + height: 40px; + + .feature-tab { + border: none; + gap: 5px; + + a { + color: light-dark(@dark-blue, @golden); + text-shadow: none; + font-family: @font-body; + } + } + } +} diff --git a/styles/less/items/feature.less b/styles/less/items/feature.less new file mode 100755 index 00000000..08002406 --- /dev/null +++ b/styles/less/items/feature.less @@ -0,0 +1,62 @@ +@import '../utils/colors.less'; +@import '../utils/fonts.less'; + +.application.sheet.daggerheart.dh-style.feature { + .item-sheet-header { + display: flex; + + .profile { + height: 130px; + width: 130px; + } + } + + section.tab { + height: 400px; + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: light-dark(@dark-blue, @golden) transparent; + } + + .tab.actions { + .actions-list { + display: flex; + flex-direction: column; + list-style: none; + padding: 0; + margin: 0; + width: 100%; + gap: 5px; + + .action-item { + display: grid; + align-items: center; + grid-template-columns: 1fr 4fr 1fr; + cursor: pointer; + + h4 { + font-family: @font-body; + font-weight: lighter; + color: @beige; + } + + .image { + height: 40px; + width: 40px; + object-fit: cover; + border-radius: 6px; + border: none; + } + + .controls { + display: flex; + justify-content: center; + gap: 10px; + a { + text-shadow: none; + } + } + } + } + } +} diff --git a/styles/less/utils/colors.less b/styles/less/utils/colors.less new file mode 100755 index 00000000..7e2ed6ca --- /dev/null +++ b/styles/less/utils/colors.less @@ -0,0 +1,22 @@ +@primary-blue: #1488cc; +@secondary-blue: #2b32b2; +@golden: #f3c267; +@dark-blue: #18162e; +@deep-black: #0e0d15; +@beige: #efe6d8; +@beige-60-opacity: #efe6d860; +@dark-blue: rgb(24, 22, 46); +@semi-transparent-dark-blue: rgba(24, 22, 46, 0.33); +@dark: #222; +@light-black: rgba(0, 0, 0, 0.3); +@soft-shadow: rgba(0, 0, 0, 0.05); +@gradient-hp: linear-gradient(15deg, rgb(70, 20, 10) 0%, rgb(190, 0, 0) 42%, rgb(252, 176, 69) 100%); +@gradient-stress: linear-gradient(15deg, rgb(130, 59, 1) 0%, rgb(252, 142, 69) 65%, rgb(190, 0, 0) 100%); + +.theme-dark { + @primary-color: @golden; +} + +.theme-light { + @primary-color: @dark-blue; +} diff --git a/styles/less/utils/fonts.less b/styles/less/utils/fonts.less new file mode 100755 index 00000000..2e62a0bf --- /dev/null +++ b/styles/less/utils/fonts.less @@ -0,0 +1,50 @@ +@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Cinzel+Decorative:wght@700&family=Montserrat:wght@400;600&display=swap'); + +@font-title: 'Cinzel Decorative', serif; +@font-subtitle: 'Cinzel', serif; +@font-body: 'Montserrat', sans-serif; + +.application.sheet.daggerheart.dh-style { + h1 { + font-family: @font-title; + margin: 0; + border: none; + font-weight: normal; + } + + h2, + h3 { + font-family: @font-subtitle; + margin: 0; + border: none; + font-weight: normal; + } + + h4 { + font-family: @font-body; + font-size: 14px; + border: none; + font-weight: 700; + margin: 0; + text-shadow: none; + color: #f3c267; + font-weight: normal; + } + + h5 { + font-size: 14px; + color: #f3c267; + margin: 0; + font-weight: normal; + } + + p, + span { + font-family: @font-body; + } + + small { + font-family: @font-body; + opacity: 0.8; + } +} diff --git a/templates/sheets/feature.hbs b/templates/sheets/feature.hbs deleted file mode 100644 index c0e6d9e6..00000000 --- a/templates/sheets/feature.hbs +++ /dev/null @@ -1,79 +0,0 @@ -
-
-
- -
- {{formInput fields.name value=source.name rootId=partId}} -
-
- -
- -
-
-
- {{formField systemFields.type value=source.system.type rootId=partId label="DAGGERHEART.Sheets.Feature.FeatureType" localize=true }} - {{formField systemFields.actionType value=source.system.actionType label="DAGGERHEART.Sheets.Feature.ActionType" rootId=partId localize=true }} -
-
- {{formField systemFields.refreshData.fields.type value=source.system.refreshData.type rootId=partId label="DAGGERHEART.Sheets.Feature.RefreshType" localize=true }} - {{#if document.system.refreshData.type}} - - - {{/if}} -
-
-
- -
-
- {{#if (eq document.system.featureType.type "dice")}} - - {{/if}} - - {{#if (eq document.system.featureType.type "dice")}} - - - - - - - {{/if}} -
-
-
-

{{localize "DAGGERHEART.Sheets.Feature.Description"}}

- {{!-- {{editor document.system.description target="system.description" button=true}} --}} - {{formInput systemFields.description value=source.system.description enriched=source.system.description localize=true toggled=true}} -
-
-
- {{> "systems/daggerheart/templates/sheets/parts/effects.hbs" config=this.effectConfig selectedEffectType=this.selectedEffectType effects=document.system.effects}} -
-
-

{{localize "Actions"}}

-
- {{#each document.system.actions as |action index|}} -
- -
{{action.name}}
- -
- {{/each}} -
-
-
-
\ No newline at end of file diff --git a/templates/sheets/global/tabs/tab-description.hbs b/templates/sheets/global/tabs/tab-description.hbs new file mode 100755 index 00000000..58a90ed7 --- /dev/null +++ b/templates/sheets/global/tabs/tab-description.hbs @@ -0,0 +1,10 @@ +
+
+ {{localize "DAGGERHEART.Sheets.Feature.Description"}} + {{formInput systemFields.description value=source.system.description enriched=source.system.description localize=true toggled=true}} +
+
\ No newline at end of file diff --git a/templates/sheets/global/tabs/tab-navigation.hbs b/templates/sheets/global/tabs/tab-navigation.hbs new file mode 100755 index 00000000..976aac89 --- /dev/null +++ b/templates/sheets/global/tabs/tab-navigation.hbs @@ -0,0 +1,11 @@ +
+ + + +
\ No newline at end of file diff --git a/templates/sheets/items/feature/actions.hbs b/templates/sheets/items/feature/actions.hbs new file mode 100755 index 00000000..be986927 --- /dev/null +++ b/templates/sheets/items/feature/actions.hbs @@ -0,0 +1,21 @@ +
+
+ {{localize "Actions"}} +
+ {{#each document.system.actions as |action index|}} +
+ + {{action.name}} +
+ + +
+
+ {{/each}} +
+
+
\ No newline at end of file diff --git a/templates/sheets/items/feature/effects.hbs b/templates/sheets/items/feature/effects.hbs new file mode 100755 index 00000000..68fed719 --- /dev/null +++ b/templates/sheets/items/feature/effects.hbs @@ -0,0 +1,67 @@ +
+
+ {{localize "Effects"}} + {{localize "DAGGERHEART.Sheets.Feature.effects.addEffect"}} +
+ + + + +
+
+ + {{#each this.document.system.effects as |effect key|}} +
+ + {{localize (concat 'DAGGERHEART.Effects.Types.' effect.type '.Name')}} + + + + + {{#if effect.applyLocationChoices}} + + {{localize "DAGGERHEART.Sheets.Feature.effects.applyLocation"}} + + + {{/if}} + {{#if (eq effect.valueType ../this.effectConfig.valueTypes.numberString.id)}} + {{#if (eq effect.type ../this.effectConfig.effectTypes.damage.id) }} + {{localize "DAGGERHEART.Sheets.Feature.effects.value"}} + + + {{localize "DAGGERHEART.Sheets.Feature.effects.initiallySelected"}} + + + {{localize "DAGGERHEART.Sheets.Feature.effects.hopeIncrease"}} + + {{else}} + {{localize "DAGGERHEART.Sheets.Feature.effects.value"}} + + {{/if}} + {{/if}} + {{#if (eq effect.valueType ../this.effectConfig.valueTypes.select.id)}} + + {{localize effect.valueData.fromValue}} + + + + + {{localize effect.valueData.name}} + + + {{/if}} +
+ {{/each}} +
\ No newline at end of file diff --git a/templates/sheets/items/feature/header.hbs b/templates/sheets/items/feature/header.hbs new file mode 100755 index 00000000..8ff99f32 --- /dev/null +++ b/templates/sheets/items/feature/header.hbs @@ -0,0 +1,10 @@ +
+ +
+ +

+
+

{{localize (concat 'DAGGERHEART.Feature.Type.' source.system.type)}}

+
+
+
\ No newline at end of file diff --git a/templates/sheets/items/feature/settings.hbs b/templates/sheets/items/feature/settings.hbs new file mode 100755 index 00000000..cca672ea --- /dev/null +++ b/templates/sheets/items/feature/settings.hbs @@ -0,0 +1,43 @@ +
+
+ {{localize tabs.settings.label}} + {{localize "DAGGERHEART.Sheets.Feature.FeatureType"}} + {{formField systemFields.type value=source.system.type rootId=partId localize=true }} + + {{localize "DAGGERHEART.Sheets.Feature.ActionType"}} + {{formField systemFields.actionType value=source.system.actionType rootId=partId localize=true }} + + {{localize "DAGGERHEART.Sheets.Feature.RefreshType"}} +
+ + {{formField systemFields.refreshData.fields.type value=source.system.refreshData.type rootId=partId localize=true }} +
+
+ +
+ {{localize "DAGGERHEART.Sheets.Feature.ValueType.Title"}} + {{localize "DAGGERHEART.Sheets.Feature.ValueType.Title"}} + + + {{#if (eq document.system.featureType.type "dice")}} + {{localize "DAGGERHEART.Sheets.Feature.ValueType.Dice"}} + + + {{localize "DAGGERHEART.Feature.Max"}} + + + {{localize "DAGGERHEART.Sheets.Feature.ValueType.Property"}} + + {{/if}} +
+
\ No newline at end of file