${game.i18n.localize('DAGGERHEART.APPLICATIONS.PendingReactionsDialog.unfinishedRolls')}
${game.i18n.localize('DAGGERHEART.APPLICATIONS.PendingReactionsDialog.confirmation')}
${game.i18n.localize('DAGGERHEART.APPLICATIONS.PendingReactionsDialog.warning')}
` + content: ` +${game.i18n.localize('DAGGERHEART.APPLICATIONS.PendingReactionsDialog.unfinishedRolls')}
+${game.i18n.localize('DAGGERHEART.APPLICATIONS.PendingReactionsDialog.warning')}
+${game.i18n.localize('DAGGERHEART.APPLICATIONS.PendingReactionsDialog.confirmation')}
+ ` }); if (!confirm) return; } @@ -247,8 +251,24 @@ export default class DhpChatMessage extends foundry.documents.ChatMessage { const targets = this.filterPermTargets(this.system.hitTargets), config = foundry.utils.deepClone(this.system); config.event = event; + if (targets.length === 0) - ui.notifications.info(game.i18n.localize('DAGGERHEART.UI.Notifications.noTargetsSelectedOrPerm')); + return ui.notifications.info(game.i18n.localize('DAGGERHEART.UI.Notifications.noTargetsSelectedOrPerm')); + else if (config.hasSave) { + const pendingingSaves = targets.filter(t => t.saved.success === null); + if (pendingingSaves.length) { + const confirm = await foundry.applications.api.DialogV2.confirm({ + window: { title: game.i18n.localize('DAGGERHEART.APPLICATIONS.PendingReactionsDialog.title') }, + content: ` +${game.i18n.localize('DAGGERHEART.APPLICATIONS.PendingReactionsDialog.unfinishedRolls')}
+${game.i18n.localize('DAGGERHEART.APPLICATIONS.PendingReactionsDialog.warning')}
+${game.i18n.localize('DAGGERHEART.APPLICATIONS.PendingReactionsDialog.confirmation')}
+ ` + }); + if (!confirm) return; + } + } + this.consumeOnSuccess(); this.system.action?.workflow.get('effects')?.execute(config, targets, true); } diff --git a/module/documents/item.mjs b/module/documents/item.mjs index 93aa3b28..f46e24e6 100644 --- a/module/documents/item.mjs +++ b/module/documents/item.mjs @@ -73,13 +73,16 @@ export default class DHItem extends foundry.documents.Item { /** Returns true if the item can be used */ get usable() { const actor = this.actor; - const actionsList = this.system.actionsList; - return this.isOwner && actor?.type === 'character' && (actionsList?.size || actionsList?.length); + const pack = actor?.pack ? game.packs.get(actor.pack) : null; + const hasActions = this.system.actionsList?.size || this.system.actionsList?.length; + const isValidType = actor?.type === 'character' || this.type === 'feature'; + return !pack?.locked && this.isOwner && isValidType && hasActions; } /** @inheritdoc */ static async createDialog(data = {}, createOptions = {}, options = {}) { const { folders, types, template, context = {}, ...dialogOptions } = options; + dialogOptions.classes = [options.classes ?? [], 'item-create'].flat(); // handled in hook if (types?.length === 0) { throw new Error('The array of sub-types to restrict to must not be empty.'); diff --git a/module/documents/scene.mjs b/module/documents/scene.mjs index 59b8091f..bf700610 100644 --- a/module/documents/scene.mjs +++ b/module/documents/scene.mjs @@ -20,7 +20,7 @@ export default class DhScene extends Scene { const prototype = tokenDoc.actor?.prototypeToken ?? tokenDoc; this.#sizeSyncBatch.set(tokenDoc.id, { size: tokenSize, - prototypeSize: { width: prototype.width, height: prototype.height }, + prototypeSize: { width: prototype.width, height: prototype.height, depth: prototype.depth }, position: { x: tokenDoc.x, y: tokenDoc.y, elevation: tokenDoc.elevation } }); this.#processSyncBatch(); @@ -36,11 +36,13 @@ export default class DhScene extends Scene { const tokenSize = tokenSizes[size]; const width = size !== CONFIG.DH.ACTOR.tokenSize.custom.id ? tokenSize : prototypeSize.width; const height = size !== CONFIG.DH.ACTOR.tokenSize.custom.id ? tokenSize : prototypeSize.height; + const depth = size !== CONFIG.DH.ACTOR.tokenSize.custom.id ? tokenSize : prototypeSize.depth; const updatedPosition = DHToken.getSnappedPositionInSquareGrid(this.grid, position, width, height); return { _id, width, height, + depth, ...updatedPosition }; }); diff --git a/module/documents/token.mjs b/module/documents/token.mjs index 4ee7ce05..30862724 100644 --- a/module/documents/token.mjs +++ b/module/documents/token.mjs @@ -66,7 +66,8 @@ export default class DHToken extends CONFIG.Token.documentClass { if (tokenSize && actor.system.size !== CONFIG.DH.ACTOR.tokenSize.custom.id) { document.updateSource({ width: tokenSize, - height: tokenSize + height: tokenSize, + depth: tokenSize }); } } @@ -90,7 +91,7 @@ export default class DHToken extends CONFIG.Token.documentClass { ) { const tokenSizes = game.settings.get(CONFIG.DH.id, CONFIG.DH.SETTINGS.gameSettings.Homebrew).tokenSizes; const tokenSize = tokenSizes[update.system.size]; - if (tokenSize !== this.width || tokenSize !== this.height) { + if (tokenSize !== this.width || tokenSize !== this.height || tokenSize !== this.depth) { this.parent?.syncTokenDimensions(this, update.system.size); } } diff --git a/module/documents/tokenManager.mjs b/module/documents/tokenManager.mjs index 3ccff4e2..7678d2c7 100644 --- a/module/documents/tokenManager.mjs +++ b/module/documents/tokenManager.mjs @@ -15,6 +15,7 @@ export default class DhTokenManager { if (tokenSize && actor.system.size !== CONFIG.DH.ACTOR.tokenSize.custom.id) { tokenData.width = tokenSize; tokenData.height = tokenSize; + tokenData.depth = tokenSize; } } diff --git a/module/documents/tooltipManager.mjs b/module/documents/tooltipManager.mjs index 18c03169..3e3f4a16 100644 --- a/module/documents/tooltipManager.mjs +++ b/module/documents/tooltipManager.mjs @@ -3,7 +3,6 @@ import { AdversaryBPPerEncounter, BaseBPPerEncounter } from '../config/encounter export default class DhTooltipManager extends foundry.helpers.interaction.TooltipManager { #wide = false; #bordered = false; - #active = false; async activate(element, options = {}) { const { TextEditor } = foundry.applications.ux; diff --git a/module/enrichers/DamageEnricher.mjs b/module/enrichers/DamageEnricher.mjs index e3f9c42a..db0e8729 100644 --- a/module/enrichers/DamageEnricher.mjs +++ b/module/enrichers/DamageEnricher.mjs @@ -1,7 +1,7 @@ import { parseInlineParams } from './parser.mjs'; export default function DhDamageEnricher(match, _options) { - const { value, type, inline } = parseInlineParams(match[1]); + const { value, type, inline } = parseInlineParams(match[1], { first: 'value' }); if (!value || !type) return match[0]; return getDamageMessage(value, type, inline, match[0]); } @@ -59,7 +59,7 @@ export const renderDamageButton = async event => { { formula: value, applyTo: CONFIG.DH.GENERAL.healingTypes.hitPoints.id, - type: type + damageTypes: type } ] }; diff --git a/module/enrichers/parser.mjs b/module/enrichers/parser.mjs index 365caec9..76ea0b73 100644 --- a/module/enrichers/parser.mjs +++ b/module/enrichers/parser.mjs @@ -8,7 +8,7 @@ export function parseInlineParams(paramString, { first } = {}) { const parts = paramString.split('|').map(x => x.trim()); const params = {}; for (const [idx, param] of parts.entries()) { - if (first && idx === 0) { + if (first && idx === 0 && !param.includes(':')) { params[first] = param; } else { const parts = param.split(':'); diff --git a/module/helpers/utils.mjs b/module/helpers/utils.mjs index 7bc5fa25..ddc353b1 100644 --- a/module/helpers/utils.mjs +++ b/module/helpers/utils.mjs @@ -864,3 +864,58 @@ export function camelize(str) { }) .replace(/\s+/g, ''); } + +/** Bulk load a list of documents using uuids. Returns the documents in the same order */ +export async function fromUuids(uuids) { + // Set up base entries. Each step works on a sublist of these objects + const entries = uuids.map(uuid => ({ + uuid, + parsed: foundry.utils.parseUuid(uuid), + value: foundry.utils.fromUuidSync(uuid) + })); + + // Handle missing uuids for embedded documents first + // A value may be index data, so we check if its a document + const packEmbeddedEntries = entries.filter( + e => + !(e.value instanceof Document) && + e.parsed && + e.parsed.collection instanceof foundry.documents.collections.CompendiumCollection && + e.parsed.embedded.length > 0 + ); + await Promise.all( + packEmbeddedEntries.map(async e => { + e.value = await fromUuid(e.uuid); + return true; + }) + ); + + // Handle missing top level pack stuff, by batching per pack + const missingTopLevel = entries.filter(e => !(e.value instanceof Document) && e.value?.pack); + for (const packGroup of Object.values(Object.groupBy(missingTopLevel, e => e.value.pack))) { + const pack = game.packs.get(packGroup[0].value.pack); + if (!pack) continue; + + const ids = packGroup.map(p => p.parsed?.id).filter(id => !!id); + const documents = await pack.getDocuments({ _id__in: ids }); + for (const p of packGroup) { + p.value = documents.find(d => d.id === p.parsed.id) ?? p.value; + } + } + + return entries.map(e => e.value); +} +/** + * Triggers DiceSoNice rolls or dice roll audio for rolls. Not used for duality rolls. + * @param { Roll[] } rolls + * @return { void } + */ +export async function triggerChatRollFx(rolls, options = { whisper: false, blind: false }) { + const { whisper, blind } = options; + if (game.modules.get('dice-so-nice')?.active) { + const rerollPromises = rolls.map(roll => game.dice3d.showForRoll(roll, game.user, true, whisper, blind)); + await Promise.allSettled(rerollPromises); + } else { + foundry.audio.AudioHelper.play({ src: CONFIG.sounds.dice }); + } +} diff --git a/styles/less/dialog/beastform/sheet.less b/styles/less/dialog/beastform/sheet.less index 0e1fe746..6d1a8a2a 100644 --- a/styles/less/dialog/beastform/sheet.less +++ b/styles/less/dialog/beastform/sheet.less @@ -43,7 +43,7 @@ text-align: center; font-size: var(--font-size-16); margin: 0 4px; - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; border-radius: 6px; color: light-dark(@dark, @beige); background-image: url('../assets/parchments/dh-parchment-dark.png'); @@ -58,7 +58,7 @@ position: relative; display: flex; justify-content: center; - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; border-radius: 6px; cursor: pointer; width: 120px; @@ -164,7 +164,7 @@ .hybrid-data { padding: 0 2px; - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; border-radius: 6px; color: light-dark(@dark, @beige); background-image: url('../assets/parchments/dh-parchment-dark.png'); @@ -191,7 +191,7 @@ flex-direction: column; gap: 4px; padding: 0 4px; - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; border-radius: 6px; color: light-dark(@dark, @beige); background-image: url('../assets/parchments/dh-parchment-dark.png'); @@ -226,7 +226,7 @@ gap: 4px; .trait-card { - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; border-radius: 6px; padding: 2px; opacity: 0.4; diff --git a/styles/less/dialog/character-creation/selections-container.less b/styles/less/dialog/character-creation/selections-container.less index 24217dbf..ebf12eda 100644 --- a/styles/less/dialog/character-creation/selections-container.less +++ b/styles/less/dialog/character-creation/selections-container.less @@ -79,7 +79,7 @@ font-weight: bold; padding: 0 2px; background-image: url(../assets/parchments/dh-parchment-light.png); - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; border-radius: 6px; color: light-dark(@beige, @dark); opacity: 0.4; @@ -203,7 +203,7 @@ height: 16px; width: 110px; min-height: unset; - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; color: light-dark(@beige, @beige); background-color: light-dark(var(--color-warm-3), var(--color-warm-3)); @@ -230,7 +230,7 @@ .suggested-trait-container { width: 56px; white-space: nowrap; - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; border-radius: 6px; color: light-dark(@beige, @dark); background-image: url('../assets/parchments/dh-parchment-light.png'); @@ -345,7 +345,7 @@ display: flex; justify-content: center; position: relative; - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; border-radius: 6px; .nav-section-text { @@ -383,7 +383,7 @@ width: 56px; text-align: center; line-height: 1; - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; border-radius: 6px; color: light-dark(@beige, @dark); background-image: url(../assets/parchments/dh-parchment-light.png); @@ -447,7 +447,7 @@ height: 100%; .simple-equipment { - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; border-radius: 8px; position: relative; display: flex; @@ -466,7 +466,7 @@ top: -8px; font-size: var(--font-size-12); white-space: nowrap; - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; border-radius: 6px; color: @dark; background-image: url('../assets/parchments/dh-parchment-light.png'); diff --git a/styles/less/dialog/character-creation/tab-navigation.less b/styles/less/dialog/character-creation/tab-navigation.less index 36b89d5a..85541db7 100644 --- a/styles/less/dialog/character-creation/tab-navigation.less +++ b/styles/less/dialog/character-creation/tab-navigation.less @@ -7,7 +7,7 @@ border-top: 0; a { - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; &[disabled] { opacity: 0.4; diff --git a/styles/less/dialog/compendiumBrowserPackDialog/sheet.less b/styles/less/dialog/compendiumBrowserPackDialog/sheet.less index dfe375b5..b16f1086 100644 --- a/styles/less/dialog/compendiumBrowserPackDialog/sheet.less +++ b/styles/less/dialog/compendiumBrowserPackDialog/sheet.less @@ -67,7 +67,6 @@ i { font-size: 18px; - // color: light-dark(@dark-blue, @golden); } } } diff --git a/styles/less/dialog/damage-reduction/damage-reduction-container.less b/styles/less/dialog/damage-reduction/damage-reduction-container.less index e8242bdd..6f7ffb51 100644 --- a/styles/less/dialog/damage-reduction/damage-reduction-container.less +++ b/styles/less/dialog/damage-reduction/damage-reduction-container.less @@ -81,7 +81,7 @@ .mark-container { cursor: pointer; - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; border-radius: 6px; height: 26px; padding: 0 1px; @@ -126,7 +126,7 @@ width: 100%; .chip-inner-container { - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; border-radius: 6px; height: 26px; padding: 0 4px; diff --git a/styles/less/dialog/dice-roll/roll-selection.less b/styles/less/dialog/dice-roll/roll-selection.less index a1a01e6b..e3551902 100644 --- a/styles/less/dialog/dice-roll/roll-selection.less +++ b/styles/less/dialog/dice-roll/roll-selection.less @@ -56,7 +56,7 @@ cursor: pointer; padding: 5px; background: light-dark(@dark-blue-10, @golden-10); - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; .label { font-style: normal; @@ -129,7 +129,7 @@ cursor: pointer; padding: 5px; background: light-dark(@dark-blue-10, @golden-10); - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; .label { font-style: normal; diff --git a/styles/less/dialog/downtime/downtime-container.less b/styles/less/dialog/downtime/downtime-container.less index eb615ef0..33d153fd 100644 --- a/styles/less/dialog/downtime/downtime-container.less +++ b/styles/less/dialog/downtime/downtime-container.less @@ -37,7 +37,7 @@ .activity-marker { font-size: 0.5rem; flex: none; - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; margin-right: 4px; } @@ -55,7 +55,7 @@ .activity-selected-marker { font-size: var(--font-size-14); - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; border-radius: 6px; color: light-dark(@dark, @beige); background-image: url(../assets/parchments/dh-parchment-dark.png); @@ -78,7 +78,7 @@ } .refreshable-container { - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; border-radius: 6px; color: light-dark(@dark, @beige); background-image: url('../assets/parchments/dh-parchment-dark.png'); diff --git a/styles/less/dialog/group-roll-dialog/_common.less b/styles/less/dialog/group-roll-dialog/_common.less index b04f6893..f74ab8a0 100644 --- a/styles/less/dialog/group-roll-dialog/_common.less +++ b/styles/less/dialog/group-roll-dialog/_common.less @@ -1,5 +1,5 @@ h1 { - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; font: 700 var(--font-size-24) var(--dh-font-subtitle); text-align: center; } diff --git a/styles/less/dialog/group-roll-dialog/main.less b/styles/less/dialog/group-roll-dialog/main.less index f266dcc7..e30f4e29 100644 --- a/styles/less/dialog/group-roll-dialog/main.less +++ b/styles/less/dialog/group-roll-dialog/main.less @@ -110,7 +110,7 @@ display: flex; flex-direction: row; button { - --button-text-color: var(--color-text-primary); + --button-text-color: @color-text-primary; --button-size: 1.5em; padding: 0 var(--spacer-4); img { diff --git a/styles/less/dialog/image-select/sheet.less b/styles/less/dialog/image-select/sheet.less index 3ed4f583..7a3a8468 100644 --- a/styles/less/dialog/image-select/sheet.less +++ b/styles/less/dialog/image-select/sheet.less @@ -12,7 +12,7 @@ img { width: 136px; height: 136px; - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; border-radius: 6px; opacity: 0.4; diff --git a/styles/less/dialog/index.less b/styles/less/dialog/index.less index 11d9635e..e8f61318 100644 --- a/styles/less/dialog/index.less +++ b/styles/less/dialog/index.less @@ -24,8 +24,6 @@ @import './multiclass-choice/sheet.less'; -@import './reroll-dialog/sheet.less'; - @import './tag-team-dialog/initialization.less'; @import './tag-team-dialog/sheet.less'; diff --git a/styles/less/dialog/level-up/navigation-container.less b/styles/less/dialog/level-up/navigation-container.less index 282d683f..6bf80d7c 100644 --- a/styles/less/dialog/level-up/navigation-container.less +++ b/styles/less/dialog/level-up/navigation-container.less @@ -19,7 +19,7 @@ a, span { - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; } } } diff --git a/styles/less/dialog/level-up/sheet.less b/styles/less/dialog/level-up/sheet.less index c663f304..9ebd9331 100644 --- a/styles/less/dialog/level-up/sheet.less +++ b/styles/less/dialog/level-up/sheet.less @@ -14,8 +14,7 @@ .tab.active { flex: 1; overflow: auto; - scrollbar-width: thin; - scrollbar-color: light-dark(@dark-blue, @golden) transparent; + .with-scroll-shadows(); } div[data-application-part='form'] { diff --git a/styles/less/dialog/level-up/summary-container.less b/styles/less/dialog/level-up/summary-container.less index 97353ba7..de7c9f4a 100644 --- a/styles/less/dialog/level-up/summary-container.less +++ b/styles/less/dialog/level-up/summary-container.less @@ -18,7 +18,7 @@ overflow: auto; padding: 10px 0; max-height: 700px; - mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%); + .with-scroll-shadows(); .level-achievements-container, .level-advancements-container { diff --git a/styles/less/dialog/multiclass-choice/sheet.less b/styles/less/dialog/multiclass-choice/sheet.less index 1f38449a..0c487cbc 100644 --- a/styles/less/dialog/multiclass-choice/sheet.less +++ b/styles/less/dialog/multiclass-choice/sheet.less @@ -35,7 +35,7 @@ width: 120px; height: 120px; background: light-dark(@dark-blue-10, @golden-10); - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; &.selected { background: light-dark(@dark-blue-40, @golden-40); @@ -57,7 +57,7 @@ display: flex; flex-wrap: wrap; font-style: italic; - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; border-radius: 6px; padding: 4px 4px; } diff --git a/styles/less/dialog/reroll-dialog/sheet.less b/styles/less/dialog/reroll-dialog/sheet.less deleted file mode 100644 index 71c94d80..00000000 --- a/styles/less/dialog/reroll-dialog/sheet.less +++ /dev/null @@ -1,125 +0,0 @@ -.daggerheart.dialog.dh-style.views.reroll-dialog { - .window-content { - max-width: 648px; - } - - .reroll-outer-container { - h2 { - margin: 0; - } - - .dices-container { - display: flex; - flex-wrap: wrap; - gap: 8px; - } - - .dice-outer-container { - width: 300px; - - legend { - display: flex; - align-items: center; - gap: 4px; - - i { - margin-right: 4px; - } - } - - .dice-container { - display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; - - .result-container { - position: relative; - aspect-ratio: 1; - display: flex; - align-items: center; - justify-content: center; - font-size: 1.375rem; - opacity: 0.8; - - &.selected { - opacity: 1; - border: 1px solid; - border-radius: 6px; - border-color: light-dark(@dark-blue, @golden); - filter: drop-shadow(0 0 3px @golden); - } - - &:before { - content: ' '; - position: absolute; - width: 100%; - height: 100%; - z-index: -1; - mask: var(--svg-die) no-repeat center; - mask-size: contain; - background: linear-gradient(139.01deg, #efe6d8 3.51%, #372e1f 96.49%); - } - - &.d4:before { - --svg-die: url(../assets/icons/dice/default/d4.svg); - } - &.d6:before { - --svg-die: url(../assets/icons/dice/default/d6.svg); - } - &.d8:before { - --svg-die: url(../assets/icons/dice/default/d8.svg); - } - &.d10:before { - --svg-die: url(../assets/icons/dice/default/d10.svg); - } - &.d12:before { - --svg-die: url('../assets/icons/dice/default/d12.svg'); - } - &.d20:before { - --svg-die: url(../assets/icons/dice/default/d20.svg); - } - - .to-reroll-result { - position: absolute; - bottom: -7px; - gap: 2px; - border: 1px solid; - border-radius: 6px; - background-image: url(../assets/parchments/dh-parchment-dark.png); - display: flex; - align-items: center; - padding: 2px 6px; - - input { - margin: 0; - height: 12px; - line-height: 0px; - position: relative; - top: 1px; - - &:before, - &:after { - line-height: 12px; - font-size: var(--font-size-12); - } - } - - i { - font-size: var(--font-size-10); - } - } - } - } - } - } - - footer { - margin-top: 8px; - display: flex; - justify-content: space-between; - - .controls { - display: flex; - gap: 8px; - } - } -} diff --git a/styles/less/dialog/tag-team-dialog/initialization.less b/styles/less/dialog/tag-team-dialog/initialization.less index 2d015141..d6f7ad29 100644 --- a/styles/less/dialog/tag-team-dialog/initialization.less +++ b/styles/less/dialog/tag-team-dialog/initialization.less @@ -1,3 +1,5 @@ +@import '../../utils/mixin.less'; + .theme-light .daggerheart.dialog.dh-style.views.tag-team-dialog { .initialization-container .members-container .member-container { .member-name { @@ -34,7 +36,7 @@ align-items: stretch; justify-content: center; border-radius: 6px; - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; overflow: hidden; height: 11.5rem; width: 122px; @@ -60,19 +62,9 @@ padding: 5rem 4px var(--spacer-8) 4px; text-align: center; - color: var(--color-text-primary); + color: @color-text-primary; text-shadow: 1px 1px 2px var(--shadow-color), 0 0 10px var(--shadow-color); - - // Basic "scrim" gradient - background-image: linear-gradient( - to top, - var(--shadow-color), - rgba(from var(--shadow-color) r g b / 0.834) 10.6%, - rgba(from var(--shadow-color) r g b / 0.541) 34%, - rgba(from var(--shadow-color) r g b / 0.382) 47%, - rgba(from var(--shadow-color) r g b / 0.194) 65%, - transparent 100% - ); + .smooth-gradient-ease-in-out(background-image, to bottom, var(--shadow-color), 100%); } img { diff --git a/styles/less/dialog/tag-team-dialog/sheet.less b/styles/less/dialog/tag-team-dialog/sheet.less index a8dffbd2..82bc0270 100644 --- a/styles/less/dialog/tag-team-dialog/sheet.less +++ b/styles/less/dialog/tag-team-dialog/sheet.less @@ -1,6 +1,6 @@ .daggerheart.dialog.dh-style.views.tag-team-dialog .window-content { h1 { - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; font: 700 var(--font-size-24) var(--dh-font-subtitle); text-align: center; } @@ -42,7 +42,7 @@ img { height: 64px; border-radius: 6px; - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; } .member-name { @@ -64,7 +64,7 @@ .roll-title { font-size: var(--font-size-20); font-weight: bold; - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; text-align: center; display: flex; align-items: center; @@ -72,7 +72,7 @@ &::before, &::after { - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; content: ''; flex: 1; height: 2px; @@ -194,6 +194,7 @@ .roll-selection-container { display: flex; + gap: 16px; .select-roll-button { margin-top: 8px; @@ -202,7 +203,7 @@ justify-content: center; i { - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; font-size: 48px; &.inactive { diff --git a/styles/less/global/dialog.less b/styles/less/global/dialog.less index a3400700..1313d68b 100644 --- a/styles/less/global/dialog.less +++ b/styles/less/global/dialog.less @@ -36,8 +36,8 @@ padding: 0; &:hover { - border: 1px solid light-dark(@dark-blue, @golden); - color: light-dark(@dark-blue, @golden); + border: 1px solid @color-border; + color: @color-text-emphatic; } } } @@ -81,7 +81,7 @@ cursor: pointer; padding: 5px; background: light-dark(@dark-blue-10, @golden-10); - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; .label { font-style: normal; diff --git a/styles/less/global/elements.less b/styles/less/global/elements.less index 7d46d627..e57ba50d 100755 --- a/styles/less/global/elements.less +++ b/styles/less/global/elements.less @@ -2,8 +2,6 @@ @import '../utils/fonts.less'; .dh-style { - border: 1px solid light-dark(@dark-blue, @golden); - input[type='text'], input[type='number'], textarea, @@ -14,12 +12,12 @@ box-shadow: 0 4px 30px @soft-shadow; backdrop-filter: blur(9.5px); outline: 2px solid transparent; - color: light-dark(@dark-blue, @golden); - border: 1px solid light-dark(@dark, @beige); + color: @input-color-text; + border: 1px solid @input-color-border; transition: all 0.3s ease; &::placeholder { - color: light-dark(@dark-40, @beige-50); + color: @color-text-subtle; } &:hover, @@ -30,7 +28,7 @@ &:focus[type='number'] { background: light-dark(@soft-shadow, @semi-transparent-dark-blue); box-shadow: none; - outline: 2px solid light-dark(@dark, @beige); + outline: 2px solid @input-color-border; } &:disabled[type='text'], @@ -47,7 +45,7 @@ .input[contenteditable] { cursor: var(--cursor-text); &:empty:before { - color: light-dark(@dark-40, @beige-50); + color: @color-text-subtle; content: attr(placeholder); } } @@ -107,7 +105,7 @@ &:hover { background: light-dark(@light-black, @dark-blue); - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; } &.glow { @@ -128,7 +126,7 @@ &.reverted { background: light-dark(@dark-blue-10, @golden-10); - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; border: 1px solid light-dark(@dark, transparent); &:hover { background: light-dark(transparent, @golden); @@ -175,7 +173,7 @@ height: inherit; .tag { padding: 0.3rem 0.5rem; - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; background-color: light-dark(@dark-blue-10, @golden-40); border-radius: 3px; transition: 0.13s ease-out; @@ -265,7 +263,7 @@ align-items: center; margin-top: 5px; border-radius: 6px; - border-color: light-dark(@dark-blue, @golden); + border-color: @color-fieldset-border; &.glassy { background-color: light-dark(@dark-blue-10, @golden-10); @@ -274,7 +272,7 @@ legend { padding: 2px 12px; border-radius: 3px; - background-color: light-dark(@dark-blue, @golden); + background-color: @color-fieldset-border; color: light-dark(@beige, @dark-blue); margin-bottom: var(--spacer-4); } @@ -285,7 +283,7 @@ } &.fit-height { - height: 95%; + flex: 1; } &.flex { @@ -353,7 +351,7 @@ legend { font-weight: bold; - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; &.with-icon { display: flex; @@ -365,18 +363,6 @@ } } - input[type='text'], - input[type='number'] { - color: light-dark(@dark, @beige); - transition: all 0.3s ease; - outline: 2px solid transparent; - - &:focus, - &:hover { - outline: 2px solid light-dark(@dark, @beige); - } - } - &[disabled], &.child-disabled .form-group, select[disabled], @@ -514,7 +500,7 @@ display: block; height: 1px; width: 100%; - border-bottom: 1px solid light-dark(@dark-blue, @golden); + border-bottom: 1px solid @color-border; mask-image: linear-gradient(270deg, transparent 0%, black 50%, transparent 100%); } @@ -522,7 +508,7 @@ display: block; height: 1px; width: 100%; - border-bottom: 1px solid light-dark(@dark-blue, @golden); + border-bottom: 1px solid @color-border; mask-image: linear-gradient(270deg, transparent 0%, black 100%); &.invert { @@ -571,7 +557,7 @@ border: 0; &:hover { - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; } &:not(:first-child) { diff --git a/styles/less/global/filter-menu.less b/styles/less/global/filter-menu.less index 65a184f8..a0545950 100644 --- a/styles/less/global/filter-menu.less +++ b/styles/less/global/filter-menu.less @@ -13,7 +13,7 @@ legend { font-weight: bold; - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; font-size: var(--font-size-12); } @@ -25,7 +25,7 @@ button { background: light-dark(@light-black, @dark-blue); - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; outline: none; box-shadow: none; border: 1px solid light-dark(@dark-blue, @dark-blue); diff --git a/styles/less/global/inventory-item.less b/styles/less/global/inventory-item.less index a2b9ebd8..3a5a9321 100644 --- a/styles/less/global/inventory-item.less +++ b/styles/less/global/inventory-item.less @@ -287,7 +287,7 @@ position: relative; height: 120px; width: 98px; - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; border-radius: 6px; cursor: pointer; diff --git a/styles/less/global/prose-mirror.less b/styles/less/global/prose-mirror.less index 8412235d..e4b1249f 100644 --- a/styles/less/global/prose-mirror.less +++ b/styles/less/global/prose-mirror.less @@ -40,6 +40,11 @@ ul { list-style: disc; } + } + // Fixes centering and makes it not render over scrollbar + &:hover button.toggle:enabled { + display: flex; + right: 12px; } } } diff --git a/styles/less/global/resource-bar.less b/styles/less/global/resource-bar.less index be9bc68b..d06b43a8 100644 --- a/styles/less/global/resource-bar.less +++ b/styles/less/global/resource-bar.less @@ -50,16 +50,16 @@ flex-wrap: wrap; gap: 5px; padding: 5px; - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; border-radius: 6px; z-index: 1; - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; width: fit-content; .slot { width: 15px; height: 10px; - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; background: light-dark(@dark-blue-10, @golden-10); border-radius: 3px; transition: all 0.3s ease; @@ -148,7 +148,7 @@ appearance: none; width: 100px; height: 40px; - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; border-radius: 6px; z-index: 1; background: @dark-blue; diff --git a/styles/less/global/sheet.less b/styles/less/global/sheet.less index 5ccb8788..e3072da1 100755 --- a/styles/less/global/sheet.less +++ b/styles/less/global/sheet.less @@ -4,7 +4,7 @@ // Theme handling .appTheme({ - background: @dark-blue-d0; + background: @dark-blue-c0; backdrop-filter: blur(7px); }, { background: url('../assets/parchments/dh-parchment-light.png') no-repeat center; @@ -43,7 +43,7 @@ body.game:is(.performance-low, .noblur) { &:hover { border-color: light-dark(@dark-blue, @golden); - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; } } } diff --git a/styles/less/global/tab-navigation.less b/styles/less/global/tab-navigation.less index 3f8844f2..3d143b4c 100755 --- a/styles/less/global/tab-navigation.less +++ b/styles/less/global/tab-navigation.less @@ -3,8 +3,7 @@ .daggerheart.dh-style { .tab-navigation { - margin: 5px 0; - height: 40px; + margin: 5px 0 10px 0; width: 100%; .navigation-container { @@ -20,7 +19,11 @@ white-space: nowrap; a { - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; + + &.empty:not(.active) { + opacity: 0.4; + } } } } diff --git a/styles/less/hud/token-hud/token-hud.less b/styles/less/hud/token-hud/token-hud.less index e31ede4a..3b998f4e 100644 --- a/styles/less/hud/token-hud/token-hud.less +++ b/styles/less/hud/token-hud/token-hud.less @@ -24,7 +24,7 @@ .palette-category-title { grid-column: span var(--effect-columns); font-weight: bold; - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; } } } @@ -38,6 +38,9 @@ } .status-effects { + // TODO: Remove when the issue https://github.com/foundryvtt/foundryvtt/issues/14410 is resolved and Foundry handles it cleanly themselves. + grid-template-rows: min-content; + .effect-control-container { position: relative; diff --git a/styles/less/sheets-settings/adversary-settings/sheet.less b/styles/less/sheets-settings/adversary-settings/sheet.less index b4b0683b..e6eb8d0b 100644 --- a/styles/less/sheets-settings/adversary-settings/sheet.less +++ b/styles/less/sheets-settings/adversary-settings/sheet.less @@ -7,7 +7,7 @@ &.attack.active { display: flex; flex-direction: column; - gap: 16px; + gap: 12px; } .fieldsets-section { diff --git a/styles/less/sheets-settings/character-settings/sheet.less b/styles/less/sheets-settings/character-settings/sheet.less index eab29436..37906712 100644 --- a/styles/less/sheets-settings/character-settings/sheet.less +++ b/styles/less/sheets-settings/character-settings/sheet.less @@ -1,17 +1,19 @@ @import '../../utils/colors.less'; -.theme-light .application.daggerheart.dh-style.dialog { - .tab.details { - .traits-inner-container .trait-container { - background: url('../assets/svg/trait-shield-light.svg') no-repeat; +.appTheme({}, { + &.dialog.character-settings { + .tab.details { + .traits-inner-container .trait-container { + background: url('../assets/svg/trait-shield-light.svg') no-repeat; - div { - filter: drop-shadow(0 0 3px @beige); - text-shadow: 0 0 3px @beige; + div { + filter: drop-shadow(0 0 3px @beige); + text-shadow: 0 0 3px @beige; + } } } } -} +}); .application.daggerheart.dh-style.dialog { .tab.details { diff --git a/styles/less/sheets-settings/header.less b/styles/less/sheets-settings/header.less index 82f3c488..04e2fa90 100644 --- a/styles/less/sheets-settings/header.less +++ b/styles/less/sheets-settings/header.less @@ -13,7 +13,7 @@ font-size: var(--font-size-24); margin: 0; text-align: center; - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; } } } diff --git a/styles/less/sheets/actors/actor-sheet-shared.less b/styles/less/sheets/actors/actor-sheet-shared.less index bd82ef83..b3eb0469 100644 --- a/styles/less/sheets/actors/actor-sheet-shared.less +++ b/styles/less/sheets/actors/actor-sheet-shared.less @@ -34,15 +34,27 @@ .attribution-header-label { font-style: italic; font-family: @font-body; - color: light-dark(@chat-blue-bg, @beige-50); + color: @color-text-subtle; } .tab.inventory { - .search-section { - display: flex; + .gold-section { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px; - align-items: center; + padding: 10px 10px 0; + + .input { + color: light-dark(@dark, @beige); + } } + } + + .search-section { + display: flex; + gap: 10px; + align-items: center; + justify-content: space-between; .search-bar { position: relative; color: light-dark(@dark-blue-50, @beige-50); @@ -72,22 +84,11 @@ height: 32px; position: absolute; right: 20px; - font-size: 16px; + font-size: var(--font-size-16); z-index: 1; color: light-dark(@dark-blue-50, @beige-50); } } - - .gold-section { - display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr; - gap: 10px; - padding: 10px 10px 0; - - .input { - color: light-dark(@dark, @beige); - } - } } &.limited { @@ -127,7 +128,7 @@ .title-name { text-align: start; font-size: var(--font-size-28); - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; text-align: center; } } @@ -180,9 +181,9 @@ display: flex; gap: 10px; background-color: light-dark(transparent, @dark-blue); - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; padding: 5px 10px; - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; border-radius: 6px; align-items: center; width: fit-content; @@ -194,7 +195,7 @@ font-size: var(--font-size-14); font-weight: bold; text-transform: uppercase; - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; } .domain { @@ -206,7 +207,7 @@ font-size: var(--font-size-14); font-weight: bold; text-transform: uppercase; - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; } img { @@ -230,7 +231,7 @@ padding: 10px; border-radius: 5px; min-width: 90px; - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; background-color: light-dark(@dark-blue-10, @golden-40); } } diff --git a/styles/less/sheets/actors/adversary/effects.less b/styles/less/sheets/actors/adversary/effects.less index fbf74249..4aa44e51 100644 --- a/styles/less/sheets/actors/adversary/effects.less +++ b/styles/less/sheets/actors/adversary/effects.less @@ -1,4 +1,5 @@ @import '../../../utils/colors.less'; +@import '../../../utils/mixin.less'; .application.sheet.daggerheart.actor.dh-style.adversary { .tab.effects { @@ -7,8 +8,8 @@ flex-direction: column; gap: 10px; overflow-y: auto; - mask-image: linear-gradient(0deg, transparent 0%, black 5%); padding-bottom: 20px; + .with-scroll-shadows(); } } } diff --git a/styles/less/sheets/actors/adversary/actions.less b/styles/less/sheets/actors/adversary/features.less similarity index 82% rename from styles/less/sheets/actors/adversary/actions.less rename to styles/less/sheets/actors/adversary/features.less index af870d9b..447d050e 100644 --- a/styles/less/sheets/actors/adversary/actions.less +++ b/styles/less/sheets/actors/adversary/features.less @@ -1,5 +1,6 @@ @import '../../../utils/colors.less'; @import '../../../utils/fonts.less'; +@import '../../../utils/mixin.less'; .application.sheet.daggerheart.actor.dh-style.adversary { .tab.features { @@ -8,8 +9,8 @@ flex-direction: column; gap: 10px; overflow-y: auto; - mask-image: linear-gradient(0deg, transparent 0%, black 5%); padding-bottom: 20px; + .with-scroll-shadows(); } } } diff --git a/styles/less/sheets/actors/adversary/header.less b/styles/less/sheets/actors/adversary/header.less index 8bd3fcee..1e5e4fa5 100644 --- a/styles/less/sheets/actors/adversary/header.less +++ b/styles/less/sheets/actors/adversary/header.less @@ -35,7 +35,7 @@ .tags { display: flex; gap: 10px; - padding-bottom: 16px; + padding-bottom: 8px; .tag { display: flex; @@ -67,11 +67,5 @@ gap: 12px; padding: 16px 0; } - - .adversary-navigation { - display: flex; - gap: 8px; - align-items: center; - } } } diff --git a/styles/less/sheets/actors/adversary/index.less b/styles/less/sheets/actors/adversary/index.less new file mode 100644 index 00000000..28ff9d22 --- /dev/null +++ b/styles/less/sheets/actors/adversary/index.less @@ -0,0 +1,7 @@ +@import './features.less'; +@import './header.less'; +@import './sheet.less'; +@import './sidebar.less'; +@import './effects.less'; +@import './notes.less'; + diff --git a/styles/less/sheets/actors/adversary/notes.less b/styles/less/sheets/actors/adversary/notes.less new file mode 100644 index 00000000..a95d070e --- /dev/null +++ b/styles/less/sheets/actors/adversary/notes.less @@ -0,0 +1,3 @@ +.application.sheet.daggerheart.actor.dh-style.adversary .tab.notes.active { + padding-bottom: 20px; +} diff --git a/styles/less/sheets/actors/adversary/sidebar.less b/styles/less/sheets/actors/adversary/sidebar.less index ef99bc09..5db9f5e9 100644 --- a/styles/less/sheets/actors/adversary/sidebar.less +++ b/styles/less/sheets/actors/adversary/sidebar.less @@ -65,9 +65,9 @@ display: flex; gap: 10px; background-color: light-dark(transparent, @dark-blue); - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; padding: 5px 10px; - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; border-radius: 6px; align-items: center; width: fit-content; @@ -77,7 +77,7 @@ font-size: var(--font-size-14); font-weight: bold; text-transform: uppercase; - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; &.threshold-value { color: light-dark(@dark, @beige); @@ -191,7 +191,7 @@ appearance: none; width: 100px; height: 40px; - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; border-radius: 6px; z-index: 1; background: @dark-blue; @@ -237,7 +237,7 @@ display: flex; width: 50px; height: 30px; - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; border-bottom: none; border-radius: 6px 6px 0 0; padding: 0 6px; @@ -286,9 +286,8 @@ overflow-y: hidden; padding-top: 10px; padding-bottom: 20px; - mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%); - scrollbar-gutter: stable; + .with-scroll-shadows(); &:hover { overflow-y: auto; diff --git a/styles/less/sheets/actors/character/biography.less b/styles/less/sheets/actors/character/biography.less index f8d56735..8548a2fb 100644 --- a/styles/less/sheets/actors/character/biography.less +++ b/styles/less/sheets/actors/character/biography.less @@ -1,5 +1,6 @@ @import '../../../utils/colors.less'; @import '../../../utils/fonts.less'; +@import '../../../utils/mixin.less'; .application.sheet.daggerheart.actor.dh-style.character { .tab.biography { @@ -9,10 +10,10 @@ gap: 10px; height: 100%; overflow-y: auto; - mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 98%, transparent 100%); padding-top: 8px; padding-bottom: 20px; height: 100%; + .with-scroll-shadows(); } .characteristics-section { diff --git a/styles/less/sheets/actors/character/effects.less b/styles/less/sheets/actors/character/effects.less index ae49fa2d..0ab1007d 100644 --- a/styles/less/sheets/actors/character/effects.less +++ b/styles/less/sheets/actors/character/effects.less @@ -1,5 +1,6 @@ @import '../../../utils/colors.less'; @import '../../../utils/fonts.less'; +@import '../../../utils/mixin.less'; .application.sheet.daggerheart.actor.dh-style.character { .tab.effects { @@ -8,8 +9,8 @@ flex-direction: column; gap: 10px; overflow-y: auto; - mask-image: linear-gradient(0deg, transparent 0%, black 5%); padding-bottom: 20px; + .with-scroll-shadows(); } } } diff --git a/styles/less/sheets/actors/character/features.less b/styles/less/sheets/actors/character/features.less index 017254a3..52b41826 100644 --- a/styles/less/sheets/actors/character/features.less +++ b/styles/less/sheets/actors/character/features.less @@ -1,5 +1,6 @@ @import '../../../utils/colors.less'; @import '../../../utils/fonts.less'; +@import '../../../utils/mixin.less'; .application.sheet.daggerheart.actor.dh-style.character { .tab.features { @@ -8,8 +9,8 @@ flex-direction: column; gap: 10px; overflow-y: auto; - mask-image: linear-gradient(0deg, transparent 0%, black 5%); padding-bottom: 20px; + .with-scroll-shadows(); } } } diff --git a/styles/less/sheets/actors/character/header.less b/styles/less/sheets/actors/character/header.less index 21ea4846..91b3545a 100644 --- a/styles/less/sheets/actors/character/header.less +++ b/styles/less/sheets/actors/character/header.less @@ -103,7 +103,7 @@ padding: 5px 0; margin-bottom: 8px; font-size: var(--font-size-12); - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; .missing-header-feature { opacity: 0.5; @@ -170,9 +170,9 @@ display: flex; gap: 4px; background-color: light-dark(transparent, @dark-blue); - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; padding: 5px 10px; - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; border-radius: 6px; align-items: center; width: fit-content; @@ -182,7 +182,7 @@ font-size: var(--font-size-14); font-weight: bold; text-transform: uppercase; - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; margin-right: 4px; } @@ -195,7 +195,7 @@ font-size: var(--font-size-14); font-weight: bold; text-transform: uppercase; - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; } img { @@ -226,7 +226,6 @@ padding-left: 0.5rem; .trait { - --color-border: light-dark(@semi-transparent-dark-blue, @golden-60); cursor: pointer; position: relative; @@ -238,10 +237,10 @@ .trait-name { position: relative; - background-color: light-dark(@semi-transparent-dark-blue, @golden-40); - border: 1px solid var(--color-border); + background-color: @trait-color-bg; + border: 1px solid @trait-color-border; border-radius: 3px; - color: light-dark(var(--color-light-1), @golden); + color: @color-text-emphatic; font-size: var(--font-size-12); font-weight: 600; height: 1rem; @@ -250,7 +249,7 @@ width: 100%; padding: 0 0.1876px 0 0.375rem; margin-right: 0.125rem; /* makes it center SLIGHTLY */ - text-shadow: 1px 1px 2px @light-black; + text-shadow: 1px 1px 3px @color-text-shadow-contrast; display: flex; align-items: center; @@ -259,7 +258,7 @@ .tier-mark { position: absolute; background-color: @dark-blue; - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; border-radius: 50%; width: 1rem; height: 1rem; @@ -279,6 +278,7 @@ } .trait-value-area { + --color-border: @trait-color-border; --background: light-dark(#e8e6e3, @dark-blue); display: flex; position: relative; @@ -298,7 +298,7 @@ .spellcasting-mark { position: absolute; - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; color: @golden; left: 0; right: 0; diff --git a/styles/less/sheets/actors/character/index.less b/styles/less/sheets/actors/character/index.less new file mode 100644 index 00000000..edefe0a1 --- /dev/null +++ b/styles/less/sheets/actors/character/index.less @@ -0,0 +1,8 @@ +@import './biography.less'; +@import './effects.less'; +@import './features.less'; +@import './header.less'; +@import './inventory.less'; +@import './loadout.less'; +@import './sheet.less'; +@import './sidebar.less'; diff --git a/styles/less/sheets/actors/character/inventory.less b/styles/less/sheets/actors/character/inventory.less index c8d2b584..fcfbbee9 100644 --- a/styles/less/sheets/actors/character/inventory.less +++ b/styles/less/sheets/actors/character/inventory.less @@ -1,5 +1,6 @@ @import '../../../utils/colors.less'; @import '../../../utils/fonts.less'; +@import '../../../utils/mixin.less'; .application.sheet.daggerheart.actor.dh-style.character { .tab.inventory { @@ -8,8 +9,9 @@ flex-direction: column; gap: 10px; overflow-y: auto; - mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%); - padding: 20px 0; + margin-top: 20px; + padding-bottom: 20px; + .with-scroll-shadows(); } } } diff --git a/styles/less/sheets/actors/character/loadout.less b/styles/less/sheets/actors/character/loadout.less index 127d688a..fa3e0176 100644 --- a/styles/less/sheets/actors/character/loadout.less +++ b/styles/less/sheets/actors/character/loadout.less @@ -1,51 +1,13 @@ @import '../../../utils/colors.less'; @import '../../../utils/fonts.less'; +@import '../../../utils/mixin.less'; .application.sheet.daggerheart.actor.dh-style.character { .tab.loadout { .search-section { - display: flex; - align-items: center; - justify-content: space-between; - - .search-bar { - position: relative; - color: light-dark(@dark-blue-50, @beige-50); - width: 80%; - padding-top: 5px; - - input { - border-radius: 50px; - background: light-dark(@dark-blue-10, @golden-10); - border: none; - outline: 2px solid transparent; - transition: all 0.3s ease; - padding: 0 20px; - - &:hover { - outline: 2px solid light-dark(@dark, @golden); - } - - &::-webkit-search-cancel-button { - -webkit-appearance: none; - display: none; - } - } - - .icon { - align-content: center; - height: 32px; - position: absolute; - right: 20px; - font-size: var(--font-size-16); - z-index: 1; - color: light-dark(@dark-blue-50, @beige-50); - } - } - .btn-toggle-view { background: light-dark(@dark-blue-10, @dark-blue); - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; border-radius: 15px; padding: 0; gap: 0; @@ -54,7 +16,7 @@ span { margin: 1px; width: 26px; - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; &.list-icon { i { @@ -90,8 +52,9 @@ gap: 10px; height: 100%; overflow-y: auto; - mask-image: linear-gradient(0deg, transparent 0%, black 10%, black 98%, transparent 100%); - padding: 20px 0; + margin-top: 20px; + padding-bottom: 20px; + .with-scroll-shadows(); } } } diff --git a/styles/less/sheets/actors/character/sidebar.less b/styles/less/sheets/actors/character/sidebar.less index e450891b..c76ee9ff 100644 --- a/styles/less/sheets/actors/character/sidebar.less +++ b/styles/less/sheets/actors/character/sidebar.less @@ -40,7 +40,7 @@ .application.sheet.dh-style .character-sidebar-sheet { width: 275px; min-width: 275px; - border-right: 1px solid light-dark(@dark-blue, @golden); + border-right: 1px solid @color-border; .portrait { position: relative; @@ -168,7 +168,7 @@ appearance: none; width: 100px; height: 40px; - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; border-radius: 6px; z-index: 1; background: @dark-blue; @@ -282,11 +282,11 @@ &:hover { background: light-dark(@light-black, @dark-blue); - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; h4, i { - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; } } } @@ -309,12 +309,12 @@ flex-wrap: wrap; gap: 4px; padding: 5px; - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; border-radius: 6px; z-index: 1; background: @dark-blue; justify-content: center; - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; .armor-slot { cursor: pointer; @@ -343,12 +343,12 @@ &:hover { background: light-dark(@light-black, @dark-blue); - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; .label, .value, i { - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; } } @@ -375,7 +375,7 @@ text-align: center; z-index: 2; color: light-dark(@dark-blue, @beige); - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; border-bottom: none; border-radius: 6px 6px 0 0; @@ -411,7 +411,7 @@ appearance: none; width: 80px; height: 30px; - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; border-radius: 6px; z-index: 1; background: light-dark(transparent, @dark-blue); @@ -450,7 +450,7 @@ display: flex; width: 50px; height: 30px; - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; border-bottom: none; border-radius: 6px 6px 0 0; padding: 0 6px; @@ -513,9 +513,9 @@ align-self: center; gap: 10px; background-color: light-dark(transparent, @dark-blue); - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; padding: 5px 10px; - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; border-radius: 6px; align-items: center; width: fit-content; @@ -525,7 +525,7 @@ font-size: var(--font-size-14); font-weight: bold; text-transform: uppercase; - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; &.threshold-value { color: light-dark(@dark, @beige); @@ -549,8 +549,8 @@ overflow-y: hidden; padding-top: 10px; padding-bottom: 20px; - mask-image: linear-gradient(0deg, transparent 0%, black 5%); scrollbar-gutter: stable; + .with-scroll-shadows(); &:hover { overflow-y: auto; diff --git a/styles/less/sheets/actors/companion/effects.less b/styles/less/sheets/actors/companion/effects.less index 6d7fe061..c0cac669 100644 --- a/styles/less/sheets/actors/companion/effects.less +++ b/styles/less/sheets/actors/companion/effects.less @@ -7,8 +7,8 @@ flex-direction: column; gap: 10px; overflow-y: auto; - mask-image: linear-gradient(0deg, transparent 0%, black 5%); padding-bottom: 20px; + .with-scroll-shadows(); } } } diff --git a/styles/less/sheets/actors/companion/header.less b/styles/less/sheets/actors/companion/header.less index 2a162a25..aca789a6 100644 --- a/styles/less/sheets/actors/companion/header.less +++ b/styles/less/sheets/actors/companion/header.less @@ -11,7 +11,7 @@ .profile { height: 235px; cursor: pointer; - mask-image: linear-gradient(0deg, transparent 0%, black 10%); + .smooth-gradient-ease-in-out(mask-image, to top, black, 2.25rem); } .actor-name { @@ -24,15 +24,20 @@ margin-bottom: -30px; input[type='text'] { + backdrop-filter: none; + border: none; + font-family: @font-title; font-size: var(--font-size-24); - height: 32px; - text-align: center; - border: 1px solid transparent; outline: 2px solid transparent; + box-shadow: unset; + text-shadow: 0 0 4px @color-text-shadow-contrast, 0 0 8px @color-text-shadow-contrast, 0 0 14px @color-text-shadow-contrast; + + height: 2rem; + text-align: center; transition: all 0.3s ease; &:hover { - outline: 2px solid light-dark(@dark, @golden); + outline: 2px solid @color-border; } } } @@ -63,7 +68,7 @@ display: flex; width: 50px; height: 40px; - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; border-bottom: none; border-radius: 6px 6px 0 0; padding: 0 6px; @@ -95,104 +100,6 @@ } } - // .status-bar { - // display: flex; - // justify-content: center; - // position: relative; - // width: 100px; - // height: 40px; - - // .status-label { - // position: relative; - // top: 40px; - // height: 22px; - // width: 79px; - // clip-path: path('M0 0H79L74 16.5L39 22L4 16.5L0 0Z'); - // background: light-dark(@dark-blue, @golden); - - // h4 { - // font-weight: bold; - // text-align: center; - // line-height: 18px; - // color: light-dark(@beige, @dark-blue); - // } - // } - // .status-value { - // position: absolute; - // display: flex; - // padding: 0 6px; - // font-size: 1.5rem; - // align-items: center; - // width: 100px; - // height: 40px; - // justify-content: center; - // text-align: center; - // z-index: 2; - // color: @beige; - - // input[type='number'] { - // background: transparent; - // font-size: 1.5rem; - // width: 40px; - // height: 30px; - // text-align: center; - // border: none; - // outline: 2px solid transparent; - // color: @beige; - - // &.bar-input { - // padding: 0; - // color: @beige; - // backdrop-filter: none; - // background: transparent; - // transition: all 0.3s ease; - - // &:hover, - // &:focus { - // background: @semi-transparent-dark-blue; - // backdrop-filter: blur(9.5px); - // } - // } - // } - - // .bar-label { - // width: 40px; - // } - // } - // .progress-bar { - // position: absolute; - // appearance: none; - // width: 100px; - // height: 40px; - // border: 1px solid light-dark(@dark-blue, @golden); - // border-radius: 6px; - // z-index: 1; - // background: @dark-blue; - - // &::-webkit-progress-bar { - // border: none; - // background: @dark-blue; - // border-radius: 6px; - // } - // &::-webkit-progress-value { - // background: @gradient-hp; - // border-radius: 6px; - // } - // &.stress-color::-webkit-progress-value { - // background: @gradient-stress; - // border-radius: 6px; - // } - // &::-moz-progress-bar { - // background: @gradient-hp; - // border-radius: 6px; - // } - // &.stress-color::-moz-progress-bar { - // background: @gradient-stress; - // border-radius: 6px; - // } - // } - // } - .level-div { white-space: nowrap; display: flex; @@ -241,10 +148,8 @@ } .companion-navigation { - display: flex; - gap: 8px; - align-items: center; width: 100%; + padding: 0 10px; } } } diff --git a/styles/less/sheets/actors/companion/index.less b/styles/less/sheets/actors/companion/index.less new file mode 100644 index 00000000..c4931814 --- /dev/null +++ b/styles/less/sheets/actors/companion/index.less @@ -0,0 +1,4 @@ +@import './details.less'; +@import './header.less'; +@import './sheet.less'; +@import './effects.less'; diff --git a/styles/less/sheets/actors/companion/sheet.less b/styles/less/sheets/actors/companion/sheet.less index f31679ba..8bf8a0b9 100644 --- a/styles/less/sheets/actors/companion/sheet.less +++ b/styles/less/sheets/actors/companion/sheet.less @@ -10,3 +10,16 @@ background: url('../assets/parchments/dh-parchment-light.png'); } }); + +.application.sheet.daggerheart.actor.dh-style.companion { + .window-content { + display: flex; + } + + .tab.active { + flex: 1; + overflow: hidden; + display: flex; + flex-direction: column; + } +} diff --git a/styles/less/sheets/actors/environment/actions.less b/styles/less/sheets/actors/environment/features.less similarity index 74% rename from styles/less/sheets/actors/environment/actions.less rename to styles/less/sheets/actors/environment/features.less index cc8a345a..84cf26f8 100644 --- a/styles/less/sheets/actors/environment/actions.less +++ b/styles/less/sheets/actors/environment/features.less @@ -1,5 +1,6 @@ @import '../../../utils/colors.less'; @import '../../../utils/fonts.less'; +@import '../../../utils/mixin.less'; .application.sheet.daggerheart.actor.dh-style.environment { .tab.features { @@ -8,8 +9,8 @@ flex-direction: column; gap: 10px; overflow-y: auto; - mask-image: linear-gradient(0deg, transparent 0%, black 5%); - padding-bottom: 20px; + padding-bottom: 4px; + .with-scroll-shadows(); } } } diff --git a/styles/less/sheets/actors/environment/header.less b/styles/less/sheets/actors/environment/header.less index 670f6c92..da6954e0 100644 --- a/styles/less/sheets/actors/environment/header.less +++ b/styles/less/sheets/actors/environment/header.less @@ -1,5 +1,6 @@ @import '../../../utils/colors.less'; @import '../../../utils/fonts.less'; +@import '../../../utils/mixin.less'; .application.sheet.daggerheart.actor.dh-style.environment { .environment-header-sheet { @@ -10,60 +11,82 @@ .profile { height: 235px; - mask-image: linear-gradient(0deg, transparent 0%, black 10%); cursor: pointer; + .smooth-gradient-ease-in-out(mask-image, to top, black, 3.5rem); } .item-container { - display: flex; + display: grid; + grid-auto-flow: row; + grid-template-columns: 1fr min-content; + align-items: center; position: relative; - top: -45px; - gap: 20px; + top: -36px; + gap: 0 var(--spacer-12); padding: 0 20px; - margin-bottom: -30px; + margin-bottom: -26px; - .item-info { + .item-name input[type='text'] { + backdrop-filter: none; + border: none; + font-family: @font-title; + font-size: var(--font-size-32); + text-align: start; + transition: all 0.3s ease; + outline: 2px solid transparent; + box-shadow: none; + text-shadow: 0 0 4px @color-text-shadow-contrast, 0 0 8px @color-text-shadow-contrast, 0 0 14px @color-text-shadow-contrast; + padding-left: 0; + height: 2.625rem; + + &:hover[type='text'], + &:focus[type='text'] { + box-shadow: none; + outline: 2px solid @color-border; + } + } + + .flexrow { + align-items: baseline; + grid-column: span 2; + } + + .tags { display: flex; - flex-direction: column; - gap: 8px; + gap: 10px; + padding-bottom: 0; + flex: 0; - .tags { + .tag { display: flex; - gap: 10px; - padding-bottom: 0; + flex-direction: row; + justify-content: center; + align-items: center; + padding: 3px 5px; + font-size: var(--font-size-12); + font: @font-body; + white-space: nowrap; - .tag { - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - padding: 3px 5px; - font-size: var(--font-size-12); - font: @font-body; - - background: light-dark(@dark-15, @beige-15); - border: 1px solid light-dark(@dark, @beige); - border-radius: 3px; - } - - .label { - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - font-size: var(--font-size-12); - } + background: light-dark(@dark-15, @beige-15); + border: 1px solid light-dark(@dark, @beige); + border-radius: 3px; } - .attribution-header-label { - text-align: left; - position: relative; - top: 4px; - margin-bottom: -6px; + .label { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + font-size: var(--font-size-12); } } + .attribution-header-label { + text-align: right; + position: relative; + } + .status-number { display: flex; align-items: center; @@ -74,14 +97,14 @@ display: flex; width: 50px; height: 30px; - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; border-bottom: none; border-radius: 6px 6px 0 0; padding: 0 6px; font-size: 1.2rem; align-items: center; justify-content: center; - background: light-dark(transparent, @dark-blue); + background: light-dark(#e8e6e3, @dark-blue); z-index: 2; &.armor-slots { @@ -93,7 +116,7 @@ .status-label { padding: 2px 10px; width: 100%; - border-radius: 3px; + border-radius: 0 0 3px 3px; background: light-dark(@dark-blue, @golden); h4 { @@ -105,37 +128,21 @@ } } } - - .item-name { - input[type='text'] { - font-size: var(--font-size-32); - height: 42px; - text-align: start; - 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); - } - } - } } .environment-info { display: flex; flex-direction: column; - gap: 12px; + gap: var(--spacer-8); padding: 10px 20px; } .environment-navigation { - display: flex; - gap: 20px; - align-items: center; padding: 0 20px; + + .tab-navigation { + margin-top: 0; + } } } } diff --git a/styles/less/sheets/actors/environment/index.less b/styles/less/sheets/actors/environment/index.less new file mode 100644 index 00000000..211c8e60 --- /dev/null +++ b/styles/less/sheets/actors/environment/index.less @@ -0,0 +1,4 @@ +@import './features.less'; +@import './header.less'; +@import './potentialAdversaries.less'; +@import './sheet.less'; diff --git a/styles/less/sheets/actors/environment/potentialAdversaries.less b/styles/less/sheets/actors/environment/potentialAdversaries.less index f3c5776a..f112c0d2 100644 --- a/styles/less/sheets/actors/environment/potentialAdversaries.less +++ b/styles/less/sheets/actors/environment/potentialAdversaries.less @@ -7,8 +7,8 @@ flex-direction: column; gap: 10px; overflow-y: auto; - mask-image: linear-gradient(0deg, transparent 0%, black 5%); - padding-bottom: 20px; + padding-bottom: 4px; + .with-scroll-shadows(); } } } diff --git a/styles/less/sheets/actors/environment/sheet.less b/styles/less/sheets/actors/environment/sheet.less index a7c9605b..2d9cc188 100644 --- a/styles/less/sheets/actors/environment/sheet.less +++ b/styles/less/sheets/actors/environment/sheet.less @@ -5,10 +5,6 @@ .appTheme({ &.environment { background-image: url('../assets/parchments/dh-parchment-dark.png'); - - .attribution-header-label { - background-image: url('../assets/parchments/dh-parchment-dark.png'); - } } }, { &.environment { diff --git a/styles/less/sheets/actors/npc/features.less b/styles/less/sheets/actors/npc/features.less new file mode 100644 index 00000000..a579d9f8 --- /dev/null +++ b/styles/less/sheets/actors/npc/features.less @@ -0,0 +1,18 @@ +.application.sheet.daggerheart.actor.dh-style.npc { + .tab.features { + &.active { + overflow: hidden; + display: flex; + flex-direction: column; + } + + .feature-section { + display: flex; + flex-direction: column; + gap: 10px; + overflow-y: auto; + padding-bottom: 4px; + .with-scroll-shadows(); + } + } +} diff --git a/styles/less/sheets/actors/npc/header.less b/styles/less/sheets/actors/npc/header.less new file mode 100644 index 00000000..086a254c --- /dev/null +++ b/styles/less/sheets/actors/npc/header.less @@ -0,0 +1,83 @@ +.application.sheet.daggerheart.actor.dh-style.npc { + .npc-header-sheet { + width: 100%; + display: flex; + + .portrait { + cursor: pointer; + max-width: 275px; + + img { + height: 275px; + } + } + + .tags { + display: flex; + gap: 10px; + padding-bottom: 8px; + + .tag { + display: flex; + flex-direction: row; + gap: 4px; + justify-content: center; + align-items: center; + padding: 3px 5px; + font-size: var(--font-size-12); + font: @font-body; + + background: light-dark(@dark-15, @beige-15); + border: 1px solid light-dark(@dark, @beige); + border-radius: 3px; + } + + .label { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + font-size: var(--font-size-12); + } + } + + .info-section { + flex: 1; + padding: 0 15px; + padding-top: var(--header-height); + display: flex; + flex-direction: column; + + .name-row { + display: flex; + gap: 5px; + align-items: center; + justify-content: space-between; + padding: 8px 0; + + h1 { + display: flex; + flex: 1; + padding: 6px 0 0 0; + font-size: var(--font-size-32); + text-align: start; + border: 1px solid transparent; + outline: 2px solid transparent; + transition: all 0.3s ease; + word-break: break-word; + + &:hover { + outline: 2px solid light-dark(@dark, @golden); + } + } + } + + .npc-info { + display: flex; + flex-direction: column; + gap: 12px; + padding: 16px 0; + } + } + } +} \ No newline at end of file diff --git a/styles/less/sheets/actors/npc/index.less b/styles/less/sheets/actors/npc/index.less new file mode 100644 index 00000000..2d7d54e3 --- /dev/null +++ b/styles/less/sheets/actors/npc/index.less @@ -0,0 +1,3 @@ +@import './sheet.less'; +@import './header.less'; +@import './features.less'; \ No newline at end of file diff --git a/styles/less/sheets/actors/npc/sheet.less b/styles/less/sheets/actors/npc/sheet.less new file mode 100644 index 00000000..8ba3b7a9 --- /dev/null +++ b/styles/less/sheets/actors/npc/sheet.less @@ -0,0 +1,10 @@ +.application.sheet.daggerheart.actor.dh-style.npc { + .window-content { + display: grid; + grid-template-rows: auto auto 1fr; + } + + .npc-navigation { + padding: 0 15px; + } +} \ No newline at end of file diff --git a/styles/less/sheets/actors/party/header.less b/styles/less/sheets/actors/party/header.less index 9a2c7350..58e3bc31 100644 --- a/styles/less/sheets/actors/party/header.less +++ b/styles/less/sheets/actors/party/header.less @@ -1,5 +1,6 @@ @import '../../../utils/colors.less'; @import '../../../utils/fonts.less'; +@import '../../../utils/mixin.less'; .party-header-sheet { display: flex; @@ -9,26 +10,31 @@ .profile { height: 235px; - mask-image: linear-gradient(0deg, transparent 0%, black 10%); cursor: pointer; + .smooth-gradient-ease-in-out(mask-image, to top, black, 3.5rem); } .item-container { - .item-name { - padding: 0 20px; - input[type='text'] { - font-size: 32px; - height: 42px; - text-align: center; - transition: all 0.3s ease; - outline: 2px solid transparent; - border: 1px solid transparent; + margin-top: -2rem; + z-index: 1; + input.item-name[type='text'] { + backdrop-filter: none; + border: none; + color: @color-text-emphatic; + font-family: @font-title; + font-size: var(--font-size-32); + outline: 2px solid transparent; + box-shadow: unset; + text-shadow: 0 0 4px @color-text-shadow-contrast, 0 0 8px @color-text-shadow-contrast, 0 0 14px @color-text-shadow-contrast; - &:hover[type='text'], - &:focus[type='text'] { - box-shadow: none; - outline: 2px solid light-dark(@dark-blue, @golden); - } + text-align: center; + transition: all 0.3s ease; + width: calc(100% - 40px); + height: 2.625rem; + + &:hover[type='text'], + &:focus[type='text'] { + outline: 2px solid @color-border; } } diff --git a/styles/less/sheets/actors/party/index.less b/styles/less/sheets/actors/party/index.less new file mode 100644 index 00000000..56f7a457 --- /dev/null +++ b/styles/less/sheets/actors/party/index.less @@ -0,0 +1,4 @@ +@import './header.less'; +@import './party-members.less'; +@import './sheet.less'; +@import './inventory.less'; diff --git a/styles/less/sheets/actors/party/inventory.less b/styles/less/sheets/actors/party/inventory.less index 8af37a79..444c6a57 100644 --- a/styles/less/sheets/actors/party/inventory.less +++ b/styles/less/sheets/actors/party/inventory.less @@ -1,5 +1,6 @@ @import '../../../utils/colors.less'; @import '../../../utils/fonts.less'; +@import '../../../utils/mixin.less'; .application.sheet.daggerheart.actor.dh-style.party { .tab.inventory { @@ -8,8 +9,9 @@ flex-direction: column; gap: 10px; overflow-y: auto; - mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%); - padding: 20px 0; + margin-top: 20px; + padding-bottom: 4px; + .with-scroll-shadows(); } } } diff --git a/styles/less/sheets/actors/party/party-members.less b/styles/less/sheets/actors/party/party-members.less index a3ec90ec..dc464291 100644 --- a/styles/less/sheets/actors/party/party-members.less +++ b/styles/less/sheets/actors/party/party-members.less @@ -48,7 +48,7 @@ border-radius: 50%; width: 24px; height: 24px; - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; object-fit: cover; } } @@ -79,9 +79,9 @@ display: flex; gap: 4px; background-color: light-dark(var(--color-light-1), @dark-blue); - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; padding: 4px 6px; - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; border-radius: 3px; align-items: baseline; width: fit-content; @@ -93,7 +93,7 @@ &.threshold-label { font-size: var(--font-size-10); - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; } &.threshold-value { @@ -116,7 +116,7 @@ width: 100%; z-index: 1; font-size: var(--font-size-20); - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; font-weight: bold; } @@ -132,9 +132,9 @@ .hope-section { display: flex; background-color: light-dark(transparent, @dark-blue); - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; padding: 3px 6px; - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; border-radius: 3px; align-items: center; width: fit-content; @@ -144,7 +144,7 @@ font-size: var(--font-size-12); font-weight: bold; text-transform: uppercase; - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; margin-right: 3px; } @@ -212,9 +212,9 @@ gap: 4px; background-color: light-dark(@dark-blue-10, @dark-blue); - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; padding: 2px 5px; - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; border-radius: 0 6px 6px 0; width: fit-content; min-height: 22px; @@ -232,7 +232,7 @@ .slot { width: 16px; height: 10px; - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; background: light-dark(@dark-blue-10, @golden-10); border-radius: 3px; transition: all 0.3s ease; @@ -248,7 +248,7 @@ .traits { background-color: light-dark(@dark-blue-10, @dark-blue); - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; border-radius: 6px; display: grid; grid-template-columns: 1fr 1fr; @@ -260,7 +260,7 @@ justify-content: space-between; gap: 3px; .label { - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; } .value { font-weight: 600; diff --git a/styles/less/sheets/index.less b/styles/less/sheets/index.less index 7d595614..4312f755 100644 --- a/styles/less/sheets/index.less +++ b/styles/less/sheets/index.less @@ -2,35 +2,12 @@ @import './actors/actor-sheet-shared.less'; -@import './actors/adversary/actions.less'; -@import './actors/adversary/header.less'; -@import './actors/adversary/sheet.less'; -@import './actors/adversary/sidebar.less'; -@import './actors/adversary/effects.less'; - -@import './actors/character/biography.less'; -@import './actors/character/effects.less'; -@import './actors/character/features.less'; -@import './actors/character/header.less'; -@import './actors/character/inventory.less'; -@import './actors/character/loadout.less'; -@import './actors/character/sheet.less'; -@import './actors/character/sidebar.less'; - -@import './actors/companion/details.less'; -@import './actors/companion/header.less'; -@import './actors/companion/sheet.less'; -@import './actors/companion/effects.less'; - -@import './actors/environment/actions.less'; -@import './actors/environment/header.less'; -@import './actors/environment/potentialAdversaries.less'; -@import './actors/environment/sheet.less'; - -@import './actors/party/header.less'; -@import './actors/party/party-members.less'; -@import './actors/party/sheet.less'; -@import './actors/party/inventory.less'; +@import './actors/adversary/index.less'; +@import './actors/character/index.less'; +@import './actors/companion/index.less'; +@import './actors/environment/index.less'; +@import './actors/npc/index.less'; +@import './actors/party/index.less'; @import './items/beastform.less'; @import './items/class.less'; diff --git a/styles/less/ui/chat/group-roll.less b/styles/less/ui/chat/group-roll.less index 9ed87220..98f0cfac 100644 --- a/styles/less/ui/chat/group-roll.less +++ b/styles/less/ui/chat/group-roll.less @@ -31,7 +31,7 @@ } i { - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; } } } @@ -71,7 +71,7 @@ align-items: center; justify-content: center; gap: 10px; - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; .main-value { font-size: var(--font-size-24); @@ -153,7 +153,7 @@ cursor: pointer; padding: 5px; background: light-dark(@dark-blue-10, @golden-10); - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; &.finished { background-color: initial; diff --git a/styles/less/ui/chat/sheet.less b/styles/less/ui/chat/sheet.less index fb8cc104..bdf22364 100644 --- a/styles/less/ui/chat/sheet.less +++ b/styles/less/ui/chat/sheet.less @@ -93,7 +93,7 @@ } a[href] { - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; } a[href]:hover, diff --git a/styles/less/ui/countdown/countdown.less b/styles/less/ui/countdown/countdown.less index 380eb454..63e539ba 100644 --- a/styles/less/ui/countdown/countdown.less +++ b/styles/less/ui/countdown/countdown.less @@ -17,8 +17,8 @@ position: relative; border: 0; box-shadow: none; - color: var(--color-text-primary); - width: 300px; + color: @color-text-primary; + width: 18.75rem; pointer-events: all; align-self: flex-end; transition: 0.3s right ease-in-out; @@ -36,7 +36,7 @@ transition: opacity var(--ui-fade-duration); } - :not(.performance-low, .noblur) { + &:not(.performance-low, .noblur) { backdrop-filter: blur(5px); } @@ -49,8 +49,7 @@ } &.icon-only { - width: 180px; - min-width: 180px; + width: 12rem; } .countdowns-header, @@ -108,8 +107,8 @@ gap: 16px; img { - width: 44px; - height: 44px; + width: 2.75rem; + height: 2.75rem; border-radius: 6px; } @@ -127,7 +126,7 @@ .countdown-tool-controls { display: flex; align-items: center; - gap: 16px; + gap: var(--spacer-12); } .progress-tag { diff --git a/styles/less/ui/effects-display/sheet.less b/styles/less/ui/effects-display/sheet.less index 17d9889f..80ad0d65 100644 --- a/styles/less/ui/effects-display/sheet.less +++ b/styles/less/ui/effects-display/sheet.less @@ -20,7 +20,7 @@ .effect-container { position: relative; pointer-events: all; - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; border-radius: 3px; img { diff --git a/styles/less/ui/item-browser/item-browser.less b/styles/less/ui/item-browser/item-browser.less index 066da73b..aac63d7a 100644 --- a/styles/less/ui/item-browser/item-browser.less +++ b/styles/less/ui/item-browser/item-browser.less @@ -1,5 +1,6 @@ @import '../../utils/colors.less'; @import '../../utils/fonts.less'; +@import '../../utils/mixin.less'; .application.daggerheart.dh-style.compendium-browser { border: initial; @@ -200,7 +201,7 @@ font-weight: bold; border-radius: 3px; background-color: light-dark(@dark-blue-40, @golden-40); - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; } .subfolder-list { @@ -218,7 +219,7 @@ font-weight: bold; border-radius: 3px; background-color: light-dark(@dark-blue-10, @golden-10); - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; } .wrapper { @@ -242,10 +243,11 @@ .compendium-sidebar > .folder-list { overflow-y: auto; scrollbar-gutter: stable; + .with-scroll-shadows(); } .item-list-header, - .item-list [data-action='expandContent'] { + .item-list .item-info[data-action] { display: flex; > * { @@ -265,8 +267,8 @@ .item-list-header { align-items: center; background-color: light-dark(@dark-15, @dark-golden-80); - color: light-dark(@dark-blue, @golden); - border: 1px solid light-dark(@dark-blue, @golden); + color: @color-text-emphatic; + border: 1px solid @color-border; border-radius: 3px; min-height: 30px; font-weight: bold; diff --git a/styles/less/ui/settings/homebrew-settings/domains.less b/styles/less/ui/settings/homebrew-settings/domains.less index 406294ac..6314cc66 100644 --- a/styles/less/ui/settings/homebrew-settings/domains.less +++ b/styles/less/ui/settings/homebrew-settings/domains.less @@ -60,7 +60,7 @@ position: relative; display: flex; justify-content: center; - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; border-radius: 6px; &.selectable { @@ -76,7 +76,7 @@ .domain-label { position: absolute; top: 4px; - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; border-radius: 6px; padding: 0 2px; color: light-dark(@dark, @beige); diff --git a/styles/less/ui/settings/homebrew-settings/resources.less b/styles/less/ui/settings/homebrew-settings/resources.less index 1184904b..9d562756 100644 --- a/styles/less/ui/settings/homebrew-settings/resources.less +++ b/styles/less/ui/settings/homebrew-settings/resources.less @@ -61,7 +61,7 @@ display: flex; align-items: center; gap: 4px; - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; i { font-size: 14px; diff --git a/styles/less/ui/settings/homebrew-settings/types.less b/styles/less/ui/settings/homebrew-settings/types.less index d09431f7..1d568853 100644 --- a/styles/less/ui/settings/homebrew-settings/types.less +++ b/styles/less/ui/settings/homebrew-settings/types.less @@ -21,7 +21,7 @@ border: 1px solid; border-radius: 6px; padding: 0 8px; - border: 1px solid light-dark(@dark-blue, @golden); + border: 1px solid @color-border; color: light-dark(@dark, @beige); background-image: url('../assets/parchments/dh-parchment-dark.png'); cursor: pointer; diff --git a/styles/less/ui/settings/settings.less b/styles/less/ui/settings/settings.less index d08f74e6..35c48480 100644 --- a/styles/less/ui/settings/settings.less +++ b/styles/less/ui/settings/settings.less @@ -1,7 +1,7 @@ @import '../../utils/colors.less'; .daggerheart.dh-style.setting { - --color-form-label: var(--color-text-primary); + --color-form-label: @color-text-primary; h2, h3, diff --git a/styles/less/ui/sidebar/daggerheartMenu.less b/styles/less/ui/sidebar/daggerheartMenu.less index 88b139c5..280d5ad3 100644 --- a/styles/less/ui/sidebar/daggerheartMenu.less +++ b/styles/less/ui/sidebar/daggerheartMenu.less @@ -34,7 +34,7 @@ cursor: pointer; padding: 5px; background: light-dark(@dark-blue-10, @golden-10); - color: light-dark(@dark-blue, @golden); + color: @color-text-emphatic; .label { font-style: normal; diff --git a/styles/less/utils/colors.less b/styles/less/utils/colors.less index 80519a5b..bb219ebb 100755 --- a/styles/less/utils/colors.less +++ b/styles/less/utils/colors.less @@ -51,7 +51,7 @@ --dark-blue-50: #18162e50; --dark-blue-60: #18162e60; --dark-blue-90: #18162e90; - --dark-blue-d0: #18162ed0; + --dark-blue-c0: #18162ec0; --semi-transparent-dark-blue: rgba(24, 22, 46, 0.33); --dark: #222222; @@ -71,6 +71,7 @@ --beige-filter: brightness(0) saturate(100%) invert(87%) sepia(25%) saturate(164%) hue-rotate(339deg) brightness(106%) contrast(87%); --bright-beige-filter: brightness(0) saturate(100%) invert(87%) sepia(15%) saturate(343%) hue-rotate(333deg) brightness(110%) contrast(87%); + --light-white: rgba(255, 255, 255, 0.3); --soft-white-shadow: rgba(255, 255, 255, 0.05); --light-black: rgba(0, 0, 0, 0.3); @@ -85,6 +86,47 @@ --primary-color-fear: rgba(9, 71, 179, 0.75); } +/** + * Override core foundry color variables in theme scopes, and add some new theme specific variants. + * These are intended to be more representative of its use case, so avoid naming these after the color. + * Some foundry variables are heavily scoped and we need to redefine them (https://github.com/foundryvtt/foundryvtt/issues/12893) + * Convention for the redefined ones is --dh-{element}-color-{thing} + */ +@scope (.theme-light) to (.themed) { + .dh-style :scope, + :scope.dh-style, + .dh-style, + .duality { + --color-border: @dark-blue; + --color-fieldset-border: @dark-blue; + --color-text-emphatic: @dark-blue; + --color-text-subtle: #555; + + --dh-color-text-shadow-contrast: #ffffffa0; + --dh-input-color-border: @dark; + --dh-input-color-text: @dark; + --dh-trait-color-bg: #b1afb6; + --dh-trait-color-border: #8e8d96; + } +} +@scope (.theme-dark) to (.themed) { + .dh-style :scope, + :scope.dh-style, + .dh-style, + .duality { + --color-border: @golden; + --color-fieldset-border: @golden; + --color-text-emphatic: @golden; + --color-text-subtle: #a29086; + + --dh-color-text-shadow-contrast: @dark-80; + --dh-input-color-border: @beige; + --dh-input-color-text: @beige; + --dh-trait-color-bg: #50433F; + --dh-trait-color-border: #927952; + } +} + @primary-blue: var(--primary-blue, #1488cc); @secondary-blue: var(--secondary-blue, #2b32b2); @@ -137,7 +179,7 @@ @dark-blue-50: var(--dark-blue-50, #18162e50); @dark-blue-60: var(--dark-blue-60, #18162e60); @dark-blue-90: var(--dark-blue-90, #18162e90); -@dark-blue-d0: var(--dark-blue-d0, #18162ed0); +@dark-blue-c0: var(--dark-blue-c0, #18162ec0); @semi-transparent-dark-blue: var(--semi-transparent-dark-blue, rgba(24, 22, 46, 0.33)); @dark: var(--dark, #222222); @@ -159,6 +201,7 @@ @soft-white-shadow: var(--soft-white-shadow, rgba(255, 255, 255, 0.05)); +@light-white: var(--light-white, rgba(255, 255, 255, 0.3)); @light-black: var(--light-black, rgba(0, 0, 0, 0.3)); @soft-shadow: var(--soft-shadow, rgba(0, 0, 0, 0.05)); @@ -190,3 +233,15 @@ box-shadow: 0 0 2px 2px @dark-blue; } } + +// LESS variable versions of core foundry color variables +@color-border: var(--color-border); +@color-fieldset-border: var(--color-fieldset-border); +@color-text-emphatic: var(--color-text-emphatic); +@color-text-primary: var(--color-text-primary); +@color-text-subtle: var(--color-text-subtle); +@color-text-shadow-contrast: var(--dh-color-text-shadow-contrast); +@input-color-border: var(--dh-input-color-border); +@input-color-text: var(--dh-input-color-text); +@trait-color-bg: var(--dh-trait-color-bg); +@trait-color-border: var(--dh-trait-color-border); \ No newline at end of file diff --git a/styles/less/utils/mixin.less b/styles/less/utils/mixin.less index 49e97a1f..18b1f9a6 100644 --- a/styles/less/utils/mixin.less +++ b/styles/less/utils/mixin.less @@ -5,16 +5,16 @@ */ .appTheme(@darkRules, @lightRules) { // Dark theme selectors - .themed.theme-dark .application.daggerheart.sheet.dh-style, - .themed.theme-dark.application.daggerheart.sheet.dh-style, + .themed.theme-dark .application.daggerheart.dh-style, + .themed.theme-dark.application.daggerheart.dh-style, body.theme-dark .application.daggerheart, body.theme-dark.application.daggerheart { @darkRules(); } // Light theme selectors - .themed.theme-light .application.daggerheart.sheet.dh-style, - .themed.theme-light.application.daggerheart.sheet.dh-style, + .themed.theme-light .application.daggerheart.dh-style, + .themed.theme-light.application.daggerheart.dh-style, body.theme-light .application.daggerheart, body.theme-light.application.daggerheart { @lightRules(); @@ -50,14 +50,15 @@ */ .dh-typography() { h1 { + --dh-input-color-text: @color-text-emphatic; font-family: @font-title; margin: 0; border: none; font-weight: normal; - } - - h1 input[type='text'] { - font-family: @font-title; + input[type='text'], + .input[contenteditable] { + font-family: @font-title; + } } h2, @@ -114,3 +115,92 @@ font-family: @font-body; } } + + +// A simple ease-out mask +.smooth-gradient-ease-out(@param, @to, @destination, @length) { + @{param}+: linear-gradient( + @to, + transparent 0%, + rgb(from @destination r g b / ~"calc(alpha * 0.013)") calc(0.008 * @length), + rgb(from @destination r g b / ~"calc(alpha * 0.049)") calc(0.029 * @length), + rgb(from @destination r g b / ~"calc(alpha * 0.104)") calc(0.064 * @length), + rgb(from @destination r g b / ~"calc(alpha * 0.259)") calc(0.166 * @length), + rgb(from @destination r g b / ~"calc(alpha * 0.45)") calc(0.304 * @length), + rgb(from @destination r g b / ~"calc(alpha * 0.741)") calc(0.554 * @length), + rgb(from @destination r g b / ~"calc(alpha * 0.825)") calc(0.644 * @length), + rgb(from @destination r g b / ~"calc(alpha * 0.896)") calc(0.735 * @length), + rgb(from @destination r g b / ~"calc(alpha * 0.951)") calc(0.825 * @length), + rgb(from @destination r g b / ~"calc(alpha * 0.987)") calc(0.914 * @length), + @destination @length + ); +} + +/** + * A simple ease in and out mask. + * @param - the parameter to add to + * @param - direction, such as "to top" + * @destination - the color at the destination. The origin is always transparent + * @length - the value at the destination + */ +.smooth-gradient-ease-in-out(@param, @to, @destination, @length: 100%) { + @{param}+: linear-gradient( + @to, + transparent 0%, + rgb(from @destination r g b / ~"calc(alpha * 0.013)") calc(0.081 * @length), + rgb(from @destination r g b / ~"calc(alpha * 0.049)") calc(0.155 * @length), + rgb(from @destination r g b / ~"calc(alpha * 0.104)") calc(0.225 * @length), + rgb(from @destination r g b / ~"calc(alpha * 0.259)") calc(0.353 * @length), + rgb(from @destination r g b / ~"calc(alpha * 0.45)") calc(0.471 * @length), + rgb(from @destination r g b / ~"calc(alpha * 0.741)") calc(0.647 * @length), + rgb(from @destination r g b / ~"calc(alpha * 0.825)") calc(0.71 * @length), + rgb(from @destination r g b / ~"calc(alpha * 0.896)") calc(0.775 * @length), + rgb(from @destination r g b / ~"calc(alpha * 0.951)") calc(0.845 * @length), + rgb(from @destination r g b / ~"calc(alpha * 0.987)") calc(0.914 * @length), + @destination @length + ); +} + +// Scroll shadows, but only if the browser supports. At the time of writing, this doesn't work on firefox +@supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) { + @property --fade-start { + syntax: "